fix(Card): address QA design and eng feedback (#1958)

- 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
chanzuckerberg · May 22, 2024 · 14c73fe · 14c73fe
1 parent 2f27acc
commit 14c73fe
Show file tree

Hide file tree

Showing 9 changed files with 293 additions and 56 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -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",

diff --git a/src/components/Card/Card-v2.module.css b/src/components/Card/Card-v2.module.css
@@ -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) {
@@ -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);
+    }
   }
 }
 
@@ -110,7 +118,8 @@
   flex-grow: 0;
 }
 
-.header__text {
+.header__text,
+.header__custom {
   flex-grow: 2;
 }
 

diff --git a/src/components/Card/Card-v2.stories.tsx b/src/components/Card/Card-v2.stories.tsx
@@ -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',
@@ -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: (
@@ -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"
@@ -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>
@@ -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"
@@ -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: (
@@ -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',
@@ -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
@@ -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',

diff --git a/src/components/Card/Card-v2.tsx b/src/components/Card/Card-v2.tsx
@@ -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.
@@ -111,6 +117,7 @@ export const Card = ({
   children,
   containerStyle = 'low',
   isDragging,
+  isInteractive = false,
   topStripe = 'none',
   topStripeColor = '',
   ...other
@@ -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 (
@@ -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}>