Skip to content

Commit

Permalink
feat(card): Add component tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@macandcheese
macandcheese committed Jan 13, 2024
1 parent a308ab0 commit 065427b
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 63 deletions.
97 changes: 54 additions & 43 deletions packages/calcite-components/src/components/card/card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,93 @@
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-card-background-color: Specifies the background color of the component.
* @prop --calcite-card-border-color: Specifies the border color of the component.
* @prop --calcite-card-box-shadow: Specifies the box shadow of the component.
* @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-card-subtitle-color: Specifies the color of the component's `"subtitle"` slot.
* @prop --calcite-card-title-color: Specifies the color of the component's `"title"` slot.
*
*/

:host {
@apply block max-w-full;
& .calcite-card-container {
@apply bg-foreground-1
border-color-2
text-color-3
relative
}

.calcite-card-container {
@apply relative
flex
h-full
flex-col
justify-between
border
border-solid
shadow-none
duration-150
ease-in-out
overflow-hidden;
border-radius: var(--calcite-border-radius-base);
}
border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));
border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));
background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1));
box-shadow: var(--calcite-card-box-shadow, var(--calcite-shadow-none));
}

.container {
@apply relative flex flex-auto flex-col;
}

:host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container) {
@apply pointer-events-none opacity-0;
@apply pointer-events-none;
opacity: $calcite-opacity-0;
}

:host([loading]) .calcite-card-loader-container {
@apply absolute
inset-0
flex
items-center;
}

.header,
.footer {
@apply flex px-3 pt-3 pb-1;
@apply absolute inset-0 flex items-center;
}

.header {
@apply flex-col;
@apply flex flex-col;
padding-inline: var(--calcite-spacing-md);
padding-block-start: var(--calcite-spacing-md);
padding-block-end: var(--calcite-spacing-xxs);
}

.footer {
@apply mt-auto flex-row content-between
justify-between
px-3
pt-1
pb-3;
@apply flex mt-auto flex-row content-between justify-between;
padding-inline: var(--calcite-spacing-md);
padding-block-start: var(--calcite-spacing-xxs);
padding-block-end: var(--calcite-spacing-md);
}

.card-content {
@apply text-color-3
text-n2-wrap
p-3;
@apply text-n2-wrap;
color: var(--calcite-color-text-3);
padding: var(--calcite-spacing-md);
}

:host([selected]) .calcite-card-container {
@apply border-color-brand;
--calcite-card-container-border-color: var(--calcite-color-brand);
}

// slotted content
@include slotted("title", "*") {
@apply text-color-1
text-n1-wrap
m-0
font-medium;
@apply text-n1-wrap;
margin: 0;
font-weight: var(--calcite-font-weight-medium);
color: var(--calcite-card-title-color, var(--calcite-color-text-1));
}

:host([selectable]) {
.header {
// prevents overlap with checkbox (default header padding + no-overlap spacing)
padding-inline-end: theme("spacing.8");
padding-inline-end: var(--calcite-spacing-xxxl);
}
}

@include slotted("subtitle", "*") {
@apply text-color-2
text-n2-wrap
m-0
mt-2
font-normal;
@apply text-n2-wrap font-normal;
margin: 0;
margin-block-start: var(--calcite-spacing-sm);
color: var(--calcite-card-subtitle-color, var(--calcite-color-text-2));
}

@include slotted("thumbnail", "img") {
Expand All @@ -91,15 +97,20 @@
@include slotted("footer-start", "*") {
@apply text-n2-wrap self-center;
margin-inline-end: auto;
color: var(--calcite-color-text-3);
}

@include slotted("footer-end", "*") {
@apply text-n2-wrap self-center;
color: var(--calcite-color-text-3);
}

.checkbox-wrapper {
@apply absolute m-0 p-0;
inset-block-start: theme("spacing.2");
inset-inline-end: theme("spacing.2");
@apply absolute;
inset-block-start: var(--calcite-spacing-sm);
inset-inline-end: var(--calcite-spacing-sm);
margin: 0;
padding: 0;
}

.thumbnail-wrapper {
Expand Down
18 changes: 17 additions & 1 deletion packages/calcite-components/src/components/card/card.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export const thumbnailRounded = (): string => html`
<div id="card-container" style="width:260px;">
<style>
calcite-card {
--calcite-border-radius-base: 12px;
--calcite-card-corner-radius: 12px;
}
</style>
<calcite-card>
Expand Down Expand Up @@ -231,3 +231,19 @@ export const darkModeRTL_TestOnly = (): string => html`
`;

darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };

export const theming_TestOnly = (): string => html`
<calcite-card
style="--calcite-card-corner-radius: var(--calcite-corner-radius-round);
--calcite-card-background-color: var(--calcite-color-foreground-3);
--calcite-card-border-color: var(--calcite-color-status-success);
--calcite-card-box-shadow: var(--calcite-shadow-md);
--calcite-card-title-color: var(--calcite-color-status-success);
--calcite-card-subtitle-color: var(--calcite-color-status-danger)"
>
<h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
<span slot="subtitle"
>A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
>
</calcite-card>
`;
42 changes: 23 additions & 19 deletions packages/calcite-components/src/demos/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,13 @@
padding: 0 18px;
}

.rounded {
--calcite-border-radius-base: 5px;
.themed {
--calcite-card-corner-radius: var(--calcite-corner-radius-round);
--calcite-card-background-color: var(--calcite-color-foreground-3);
--calcite-card-border-color: var(--calcite-color-status-success);
--calcite-card-box-shadow: var(--calcite-shadow-md);
--calcite-card-title-color: var(--calcite-color-status-success);
--calcite-card-subtitle-color: var(--calcite-color-status-danger);
}
</style>
<script src="_assets/head.js"></script>
Expand All @@ -45,21 +50,20 @@ <h1 style="margin: 0 auto; text-align: center">Card</h1>
**************************************************
-->
<div class="parent">
<!-- text only -->
<div class="child">
<p>No buttons, not selectable</p>
<calcite-card>
<p>Themed</p>
<calcite-card class="themed">
<h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
<span slot="subtitle"
>A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
>
</calcite-card>
</div>

<!-- text only, selectable, and border-radius -->
<div class="child rounded">
<p>No buttons, selectable, border-radius</p>
<calcite-card selectable>
<!-- text only -->
<div class="child">
<p>No buttons, not selectable</p>
<calcite-card>
<h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
<span slot="subtitle"
>A great example of a study description that might wrap to a line or two, but isn't overly verbose.</span
Expand All @@ -79,7 +83,7 @@ <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
<p>Card with several buttons</p>

<calcite-card>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/180" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -136,7 +140,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>Card with two buttons</p>
<calcite-card selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">My great Workforce project that might wrap two lines</h3>
<span slot="subtitle">Johnathan Smith</span>
<span slot="footer-start">Nov 25, 2018</span>
Expand Down Expand Up @@ -165,7 +169,7 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
<div class="child">
<p>Selectable and selected card</p>
<calcite-card selected selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />

<h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
<span slot="subtitle"
Expand All @@ -180,7 +184,7 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
<div class="child">
<p>Deselect example</p>
<calcite-card selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />

<h3 slot="title">Translated select and deselect example</h3>
<span slot="subtitle"
Expand All @@ -201,7 +205,7 @@ <h3 slot="title">Translated select and deselect example</h3>
<div class="child">
<p>Loading</p>
<calcite-card loading>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />

<h3 slot="title">Loading example</h3>
<span slot="subtitle"
Expand All @@ -215,7 +219,7 @@ <h3 slot="title">Loading example</h3>
<div class="child">
<p>Submit button</p>
<calcite-card selectable>
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Untitled experience</h3>
<span slot="subtitle">Subtext</span>
<calcite-button slot="footer-start" width="full">Go</calcite-button>
Expand All @@ -232,7 +236,7 @@ <h3 slot="title">Untitled experience</h3>
<div class="child">
<p>thumbnail-position="block-start"</p>
<calcite-card thumbnail-position="block-start">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -274,7 +278,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>thumbnail-position="block-end"</p>
<calcite-card thumbnail-position="block-end">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -318,7 +322,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>thumbnail-position="inline-start"</p>
<calcite-card thumbnail-position="inline-start">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down Expand Up @@ -360,7 +364,7 @@ <h3 slot="title">Portland Businesses</h3>
<div class="child">
<p>thumbnail-position="inline-end"</p>
<calcite-card thumbnail-position="inline-end">
<img slot="thumbnail" alt="Sample image alt" src="https://placem.at/places?w=260&h=160&txt=0" />
<img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/280/80" />
<h3 slot="title">Portland Businesses</h3>
<span slot="subtitle"
>by
Expand Down

0 comments on commit 065427b

Please sign in to comment.