Skip to content

Commit

Permalink
fix(Card): address QA design and eng feedback
Browse files Browse the repository at this point in the history
- add isInteractive implementation and stories
- allow .Header body to avoid flex issues
- update brand tokens to have lowEmphasis values
- update stories to avoid mixing eyebrow with icon
- documentation on individual stories
  • Loading branch information
booc0mtaco committed May 22, 2024
1 parent 2f27acc commit d6551f5
Show file tree
Hide file tree
Showing 9 changed files with 293 additions and 56 deletions.
6 changes: 6 additions & 0 deletions .storybook/data/tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -166,13 +166,19 @@
"eds-theme-color-background-brand-primary-strong": "#6B65E2",
"eds-theme-color-background-brand-primary-strong-hover": "#3E42B1",
"eds-theme-color-background-brand-red": "#4D0118",
"eds-theme-color-background-brand-red-low-emphasis": "#FDF3F4",
"eds-theme-color-background-brand-orange": "#FFA070",
"eds-theme-color-background-brand-orange-low-emphasis": "#FFEEE5",
"eds-theme-color-background-brand-yellow": "#F9DA78",
"eds-theme-color-background-brand-yellow-low-emphasis": "#FDF3D3",
"eds-theme-color-background-brand-green": "#57B083",
"eds-theme-color-background-brand-green-low-emphasis": "#E6F5ED",
"eds-theme-color-background-brand-blue-1": "#99CCFF",
"eds-theme-color-background-brand-blue-2": "#3165D2",
"eds-theme-color-background-brand-blue-3": "#0F2163",
"eds-theme-color-background-brand-blue-low-emphasis": "#EAF4FF",
"eds-theme-color-background-brand-purple": "#C580E7",
"eds-theme-color-background-brand-purple-low-emphasis": "#FBF5FD",
"eds-theme-color-background-brand-pink": "#DB458D",
"eds-theme-color-background-utility-base-0": "rgb(var(--eds-color-white) / 1)",
"eds-theme-color-background-utility-base-1": "#FDF9F8",
Expand Down
31 changes: 20 additions & 11 deletions src/components/Card/Card-v2.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
outline-offset: 1px;
outline: 0.125rem solid var(--eds-theme-color-border-utility-focus);
}

&.card--is-interactive {
cursor: pointer;
}
}

:where(.child-card) {
Expand All @@ -47,25 +51,29 @@
.card--container-color-default {
background-color: var(--eds-theme-color-background-utility-container);

&:hover {
background-color: var(--eds-theme-color-background-utility-container-hover);
}
&.card--is-interactive {
&:hover {
background-color: var(--eds-theme-color-background-utility-container-hover);
}

&:active {
background-color: var(--eds-theme-color-background-utility-container-active);
&:active {
background-color: var(--eds-theme-color-background-utility-container-active);
}
}
}

.card--container-color-call-out {
background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
border-color: var(--eds-theme-color-border-utility-informational);

&:hover {
background-color: var(--eds-theme-color-background-utility-information-low-emphasis-hover);
}
&.card--is-interactive {
&:hover {
background-color: var(--eds-theme-color-background-utility-information-low-emphasis-hover);
}

&:active {
background-color: var(--eds-theme-color-background-utility-information-low-emphasis-active);
&:active {
background-color: var(--eds-theme-color-background-utility-information-low-emphasis-active);
}
}
}

Expand Down Expand Up @@ -110,7 +118,8 @@
flex-grow: 0;
}

.header__text {
.header__text,
.header__custom {
flex-grow: 2;
}

Expand Down
74 changes: 61 additions & 13 deletions src/components/Card/Card-v2.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,13 @@ export default {
},
topStripeColor: {
options: [
'',
'bg-brand-blue-1',
'bg-brand-blue-2',
'bg-brand-blue-3',
'bg-brand-green',
'bg-brand-orange',
'bg-brand-pink',
'bg-brand-purple',
'bg-brand-red',
'bg-brand-yellow',
'bg-brand-blue-lowEmphasis',
'bg-brand-green-lowEmphasis',
'bg-brand-orange-lowEmphasis',
'bg-brand-pink-lowEmphasis',
'bg-brand-purple-lowEmphasis',
'bg-brand-red-lowEmphasis',
'bg-brand-yellow-lowEmphasis',
],
control: {
type: 'select',
Expand All @@ -65,6 +62,19 @@ type Args = React.ComponentProps<typeof Card>;
*/
export const Default: StoryObj<Args> = {};

/**
* Cards can be made interactive by using `isInteractive`. With this, it will require being linked to `Link` or some control that performs an action or is being dragged.
*/
export const IsInteractive: StoryObj<Args> = {
args: {
...Default.args,
isInteractive: true,
},
};

/**
* This demonstrates all that's possible with the header component
*/
export const WithFullHeader: StoryObj<Args> = {
args: {
children: (
Expand All @@ -85,12 +95,14 @@ export const WithFullHeader: StoryObj<Args> = {
},
};

/**
* When using an icon in the header, we should not use `eyebrow` as it causes a noisy appearance. This is, however, technically possible.
*/
export const WithFullHeaderAndIcon: StoryObj<Args> = {
args: {
children: (
<>
<Card.Header
eyebrow="Recommended for you"
icon="person-encircled"
subTitle={<span>Get to know your colleagues</span>}
title="Question of the day"
Expand All @@ -106,6 +118,10 @@ export const WithFullHeaderAndIcon: StoryObj<Args> = {
},
};

/**
* Example implementation of a menu with a clickable icon button, to demonstrate adding a menu to a card
* @returns ReactNode
*/
function CardMenu() {
return (
<Menu>
Expand Down Expand Up @@ -141,13 +157,15 @@ function CardMenu() {
);
}

/**
* You can combine a small header with a menu icon in the top-right.
*/
export const WithSmallFullHeaderAndIcon: StoryObj<Args> = {
args: {
children: (
<>
<Card.Header
action={<CardMenu />}
eyebrow="Recommended for you"
icon="person-encircled"
size="sm"
subTitle="Get to know your colleagues"
Expand All @@ -164,6 +182,27 @@ export const WithSmallFullHeaderAndIcon: StoryObj<Args> = {
},
};

/**
* It's possible to customize the card header with formatted text and content, which replaces the pre-defined slots
*/
export const WithCustomizedHeader: StoryObj<Args> = {
args: {
children: (
<>
<Card.Header className="mb-size-2">
Displaying <strong>some text</strong> with <em>mixed formatting</em>.
</Card.Header>
<Card.Body>
<div className="fpo">Card Body</div>
</Card.Body>
<Card.Footer>
<div className="fpo">Card Footer</div>
</Card.Footer>
</>
),
},
};

export const WithHorizontalPrimaryButton: StoryObj<Args> = {
args: {
children: (
Expand Down Expand Up @@ -198,6 +237,9 @@ export const CustomBrandCard: StoryObj<Args> = {
},
};

/**
* You can add a stripe along the top of a card to enhance and emphasis its appearance
*/
export const TopStripe: StoryObj<Args> = {
args: {
topStripe: 'medium',
Expand Down Expand Up @@ -226,10 +268,13 @@ export const TopStripe: StoryObj<Args> = {
},
};

/**
* Cards also allow for using custom top stripe colors. Use one of the low-emphasis brand colors (see the control above to test)
*/
export const CustomTopStripe: StoryObj<Args> = {
args: {
topStripe: 'high',
topStripeColor: 'bg-brand-purple',
topStripeColor: 'bg-brand-purple-lowEmphasis',
children: (
<>
<Card.Header
Expand All @@ -255,6 +300,9 @@ export const CustomTopStripe: StoryObj<Args> = {
},
};

/**
* Another visual change to cards allow for adjusting the background color, to change how the card looks, using `containerColor`
*/
export const BackgroundCallout: StoryObj<Args> = {
args: {
containerColor: 'call-out',
Expand Down
10 changes: 9 additions & 1 deletion src/components/Card/Card-v2.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
* or used programmatically with drag and drop libraries
*/
isDragging?: boolean;
/**
* Whether `Card` itself is directly interactive (clicking will perform some navigation or action)
*
* **Default is `false`**.
*/
isInteractive?: boolean;
/**
* Decorative top bar used to cause a highlight on a given card. When present, this
* corresponds to a specified emphasis level.
Expand Down Expand Up @@ -111,6 +117,7 @@ export const Card = ({
children,
containerStyle = 'low',
isDragging,
isInteractive = false,
topStripe = 'none',
topStripeColor = '',
...other
Expand All @@ -121,6 +128,7 @@ export const Card = ({
styles[`card--container-color-${containerColor}`],
typeof isDragging !== 'undefined' &&
styles[`card--is-dragging-${isDragging}`],
isInteractive && styles['card--is-interactive'],
className,
);
return (
Expand Down Expand Up @@ -201,7 +209,7 @@ const CardHeader = ({

return children ? (
<header className={componentClassName} {...other}>
{children}
<div className={styles['header__custom']}>{children}</div>
</header>
) : (
<header className={componentClassName} {...other}>
Expand Down
Loading

0 comments on commit d6551f5

Please sign in to comment.