@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/Card/Card.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -11,17 +10,19 @@ import { action } from "@storybook/addon-actions";
 
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
-import Card, { CardImage, CardHeading, CardContent, CardActions } from "./Card";
-import { CardImageRatios, CardImageSizes, CardLayouts } from "./CardTypes";
+import Card, { CardHeading, CardContent, CardActions } from "./Card";
+import { CardLayouts } from "./CardTypes";
 import Link from "../Link/Link";
 import Heading from "../Heading/Heading";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
 import { LinkTypes } from "../Link/LinkTypes";
 import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
 import Image from "../Image/Image";
+import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Card")}
@@ -31,23 +32,13 @@ import { getCategory } from "../../utils/componentCategories";
     design: {
       type: "figma",
       url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A25747",
     },
   }}
   argTypes={{
-    blockName: { table: { disable: true } },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
     id: { table: { disable: true } },
     imageComponent: { table: { disable: true } },
-    layout: { table: { disable: false } },
-    imageSrc: { table: { disable: false } },
-    imageAlt: { table: { disable: false } },
-    imageSize: { table: { disable: false } },
-    imageAspectRatio: { table: { disable: false } },
-    imageAtEnd: { table: { disable: false } },
-    border: { table: { disable: false } },
-    padding: { table: { disable: false } },
     backgroundColor: { control: { type: "color" } },
     foregroundColor: { control: { type: "color" } },
   }}
@@ -58,7 +49,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.24.1`   |
+| Latest            | `0.25.3`   |
 
 <Description of={Card} />
 
@@ -76,23 +67,27 @@ The `CardActions` component is used to display "call to action" (CTA) buttons an
 
 The `CardContent` component should be used to display all content other than headings and CTAs.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Card Props"
     args={{
       id: "custom-card",
-      layout: CardLayouts.Horizontal,
+      layout: CardLayouts.Row,
       imageSrc: "https://placeimg.com/400/300/animals",
-      imageAspectRatio: CardImageRatios.ThreeByFour,
+      imageAspectRatio: ImageRatios.ThreeByFour,
+      imageSize: ImageSizes.Default,
       imageAlt: "Alt text",
+      imageAtEnd: false,
+      border: false,
+      center: false,
     }}
   >
     {(args) => (
       <Card {...args}>
-        <CardHeading level={HeadingLevels.Two} id="heading1">
+        <CardHeading level={HeadingLevels.Two} id="main-heading1">
           Optional Header
         </CardHeading>
-        <CardHeading level={HeadingLevels.Four} id="heading2">
+        <CardHeading level={HeadingLevels.Three} id="main-heading2">
           Sollicitudin Lorem Tortor Purus Ornare
         </CardHeading>
         <CardContent>
@@ -103,7 +98,7 @@ The `CardContent` component should be used to display all content other than hea
         <CardActions topBorder bottomBorder>
           <Button
             onClick={action("clicked")}
-            id="button1"
+            id="main-button1"
             buttonType={ButtonTypes.Primary}
             type="submit"
           >
@@ -111,7 +106,7 @@ The `CardContent` component should be used to display all content other than hea
           </Button>
           <Button
             onClick={action("clicked")}
-            id="button2"
+            id="main-button2"
             buttonType={ButtonTypes.Secondary}
             type="submit"
           >
@@ -126,31 +121,28 @@ The `CardContent` component should be used to display all content other than hea
       </Card>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Card Props" />
 
 ## Image Position
 
-By default, the image is always the first element within a `Card`. This means the image is at the top of a vertical `Card` and on the left size of a horizontal `Card`. However, you can use the `imageAtEnd` prop to override the default placement and move the image to the last element within a `Card`.
+By default, the image is always the first element within a `Card`. This means
+the image is at the top of a `Card` with a column layout and on the left side of
+a `Card` with a row layout. However, you can use the `imageAtEnd` prop to override
+the default placement and move the image to the last element within a `Card`.
 
-### Vertical Cards
+### Column Cards
 
-<Preview>
+<Canvas>
   <Story name="Card Image Position">
-    <div
-      style={{
-        display: "grid",
-        "grid-gap": "2rem",
-        "grid-template-columns": "repeat(2, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={2}>
       <Card
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="props-heading1">
           Image on Top (default)
         </CardHeading>
         <CardContent>
@@ -161,10 +153,10 @@ By default, the image is always the first element within a `Card`. This means th
       <Card
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
         imageAtEnd
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="props-heading2">
           Image on Bottom
         </CardHeading>
         <CardContent>
@@ -172,82 +164,74 @@ By default, the image is always the first element within a `Card`. This means th
           libero, a pharetra augue.
         </CardContent>
       </Card>
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
 
-### Horizontal Cards
+### Row Cards
 
-<Preview>
-  <div
-    style={{
-      display: "grid",
-      "grid-gap": "2rem",
-      "grid-template-columns": "repeat(1, 1fr)",
-    }}
-  >
-    <Card
-      layout={CardLayouts.Horizontal}
-      center
-      imageSrc="https://placeimg.com/400/200/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={CardImageRatios.TwoByOne}
-    >
-      <CardHeading level={HeadingLevels.Four} id="heading1">
-        Image on Left (default)
-      </CardHeading>
-      <CardContent>
-        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed
-        posuere consectetur est at lobortis. Cras justo odio, dapibus ac
-        facilisis in, egestas eget quam.
-      </CardContent>
-    </Card>
-    <Card
-      layout={CardLayouts.Horizontal}
-      center
-      imageSrc="https://placeimg.com/410/210/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={CardImageRatios.TwoByOne}
-      imageAtEnd
-    >
-      <CardHeading level={HeadingLevels.Four} id="heading2">
-        Image on Right
-      </CardHeading>
-      <CardContent>
-        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed
-        posuere consectetur est at lobortis. Cras justo odio, dapibus ac
-        facilisis in, egestas eget quam.
-      </CardContent>
-    </Card>
-  </div>
-</Preview>
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+      >
+        <CardHeading level={HeadingLevels.Four} id="row-heading1">
+          Image on Left (default)
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+          facilisis in, egestas eget quam.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://placeimg.com/410/210/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        imageAtEnd
+      >
+        <CardHeading level={HeadingLevels.Four} id="row-heading2">
+          Image on Right
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+          facilisis in, egestas eget quam.
+        </CardContent>
+      </Card>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>
 
 ## Image Size
 
-By default, the image width is `100%` for a vertical `Card` and `225px` for a horizontal `Card`. However, you can use the `imageSize` prop to override the default width.
+By default, the image width is `100%` for a `Card` with a column layout and
+`225px` for a `Card` with a row layout. However, you can use the `imageSize`
+prop to override the default width.
 
-### Vertical Cards
+### Column Cards
 
-<Preview>
+<Canvas>
   <Story name="Card Image Size">
-    <div
-      style={{
-        display: "grid",
-        "grid-gap": "4rem",
-        "grid-template-columns": "repeat(1, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={1}>
       <Card
         center
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.Square}
-        imageSize={CardImageSizes.Small}
+        imageAspectRatio={ImageRatios.Square}
+        imageSize={ImageSizes.Small}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="column-heading1">
           Small Image
         </CardHeading>
-        <CardHeading level={HeadingLevels.Five} id="heading2">
+        <CardHeading level={HeadingLevels.Four} id="column-heading2">
           Max-Width: 165px
         </CardHeading>
         <CardContent>
@@ -260,13 +244,13 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
         center
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.Square}
-        imageSize={CardImageSizes.Medium}
+        imageAspectRatio={ImageRatios.Square}
+        imageSize={ImageSizes.Medium}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="column2-heading1">
           Medium Image
         </CardHeading>
-        <CardHeading level={HeadingLevels.Five} id="heading2">
+        <CardHeading level={HeadingLevels.Four} id="column2-heading2">
           Max-Width: 225px
         </CardHeading>
         <CardContent>
@@ -274,17 +258,18 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
           libero, a pharetra augue.
         </CardContent>
       </Card>
+      <HorizontalRule />
       <Card
         center
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.Square}
-        imageSize={CardImageSizes.Large}
+        imageAspectRatio={ImageRatios.Square}
+        imageSize={ImageSizes.Large}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="column3-heading1">
           Large Image
         </CardHeading>
-        <CardHeading level={HeadingLevels.Five} id="heading2">
+        <CardHeading level={HeadingLevels.Four} id="column3-heading2">
           Max-Width: 360px
         </CardHeading>
         <CardContent>
@@ -292,16 +277,17 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
           libero, a pharetra augue.
         </CardContent>
       </Card>
+      <HorizontalRule />
       <Card
         center
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.Square}
+        imageAspectRatio={ImageRatios.Square}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="column-4heading1">
           Default Image
         </CardHeading>
-        <CardHeading level={HeadingLevels.Five} id="heading2">
+        <CardHeading level={HeadingLevels.Four} id="column-4heading2">
           Width: 100%
         </CardHeading>
         <CardContent>
@@ -309,116 +295,106 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
           libero, a pharetra augue.
         </CardContent>
       </Card>
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
 
-### Horizontal Cards
+### Row Cards
 
-<Preview>
-  <div
-    style={{
-      display: "grid",
-      "grid-gap": "2rem",
-      "grid-template-columns": "repeat(1, 1fr)",
-    }}
-  >
-    <Card
-      layout={CardLayouts.Horizontal}
-      center
-      imageSrc="https://placeimg.com/400/200/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={CardImageRatios.TwoByOne}
-      imageSize={CardImageSizes.Small}
-    >
-      <CardHeading level={HeadingLevels.Three} id="heading1">
-        Small Image
-      </CardHeading>
-      <CardHeading level={HeadingLevels.Five} id="heading2">
-        Max-Width: 165px
-      </CardHeading>
-      <CardContent>
-        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-      </CardContent>
-    </Card>
-    <Card
-      layout={CardLayouts.Horizontal}
-      center
-      imageSrc="https://placeimg.com/410/210/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={CardImageRatios.TwoByOne}
-      imageSize={CardImageSizes.Medium}
-    >
-      <CardHeading level={HeadingLevels.Three} id="heading2">
-        Medium Image
-      </CardHeading>
-      <CardHeading level={HeadingLevels.Five} id="heading2">
-        Max-Width: 225px
-      </CardHeading>
-      <CardContent>
-        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed
-        posuere consectetur est at lobortis.
-      </CardContent>
-    </Card>
-    <Card
-      layout={CardLayouts.Horizontal}
-      center
-      imageSrc="https://placeimg.com/400/250/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={CardImageRatios.TwoByOne}
-      imageSize={CardImageSizes.Large}
-    >
-      <CardHeading level={HeadingLevels.Three} id="heading1">
-        Large Image
-      </CardHeading>
-      <CardHeading level={HeadingLevels.Five} id="heading2">
-        Max-Width: 360px
-      </CardHeading>
-      <CardContent>
-        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed
-        posuere consectetur est at lobortis. Cras justo odio, dapibus ac
-        facilisis in, egestas eget quam.
-      </CardContent>
-    </Card>
-    <Card
-      layout={CardLayouts.Horizontal}
-      center
-      imageSrc="https://placeimg.com/450/250/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={CardImageRatios.TwoByOne}
-    >
-      <CardHeading level={HeadingLevels.Three} id="heading2">
-        Default Image
-      </CardHeading>
-      <CardHeading level={HeadingLevels.Five} id="heading2">
-        Max-Width: 225px
-      </CardHeading>
-      <CardContent>
-        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed
-        posuere consectetur est at lobortis. Cras justo odio, dapibus ac
-        facilisis in, egestas eget quam.
-      </CardContent>
-    </Card>
-  </div>
-</Preview>
+<Canvas>
+  <DSProvider>
+    <SimpleGrid columns={1}>
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        imageSize={ImageSizes.Small}
+      >
+        <CardHeading level={HeadingLevels.Three} id="row2-heading1">
+          Small Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="row2-heading2">
+          Max-Width: 165px
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://placeimg.com/410/210/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        imageSize={ImageSizes.Medium}
+      >
+        <CardHeading level={HeadingLevels.Three} id="row3-heading2">
+          Medium Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="row3-heading2">
+          Max-Width: 225px
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://placeimg.com/400/250/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        imageSize={ImageSizes.Large}
+      >
+        <CardHeading level={HeadingLevels.Three} id="row4-heading1">
+          Large Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="row4-heading2">
+          Max-Width: 360px
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+          facilisis in, egestas eget quam.
+        </CardContent>
+      </Card>
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://placeimg.com/450/250/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+      >
+        <CardHeading level={HeadingLevels.Three} id="row5-heading2">
+          Default Image
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="row5-heading2">
+          Max-Width: 225px
+        </CardHeading>
+        <CardContent>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+          Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac
+          facilisis in, egestas eget quam.
+        </CardContent>
+      </Card>
+    </SimpleGrid>
+  </DSProvider>
+</Canvas>
 
 ## Cards in a Grid
 
-<Preview>
+<Canvas>
   <Story name="Cards in a Grid">
-    <div
-      style={{
-        display: "grid",
-        "grid-gap": "2rem",
-        "grid-template-columns": "repeat(3, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={3}>
       <Card
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="grid1-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -429,9 +405,9 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       <Card
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="grid2-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -442,9 +418,9 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       <Card
         imageSrc="https://placeimg.com/420/220/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="grid3-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -455,9 +431,9 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       <Card
         imageSrc="https://placeimg.com/430/230/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="grid4-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -468,9 +444,9 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       <Card
         imageSrc="https://placeimg.com/440/240/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="grid5-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -481,9 +457,9 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       <Card
         imageSrc="https://placeimg.com/450/250/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="grid6-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -491,29 +467,23 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
           libero, a pharetra augue.
         </CardContent>
       </Card>
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
 
 ## Cards in a Stack
 
-<Preview>
+<Canvas>
   <Story name="Cards in a Stack">
-    <div
-      style={{
-        display: "grid",
-        "grid-gap": "2rem",
-        "grid-template-columns": "repeat(1, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={1}>
       <Card
-        layout={CardLayouts.Horizontal}
+        layout={CardLayouts.Row}
         center
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="stack1-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -523,13 +493,13 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
         </CardContent>
       </Card>
       <Card
-        layout={CardLayouts.Horizontal}
+        layout={CardLayouts.Row}
         center
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading2">
+        <CardHeading level={HeadingLevels.Four} id="stack2-heading2">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -539,13 +509,13 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
         </CardContent>
       </Card>
       <Card
-        layout={CardLayouts.Horizontal}
+        layout={CardLayouts.Row}
         center
         imageSrc="https://placeimg.com/420/220/animals"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading3">
+        <CardHeading level={HeadingLevels.Four} id="stack3-heading3">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -554,27 +524,27 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
           facilisis in, egestas eget quam.
         </CardContent>
       </Card>
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
 
 ## Custom Image Component
 
 Instead of passing a path for the `imageSrc` prop, you can pass a custom image component in using the `imageComponent` prop.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Custom Image Component">
     <Card
       imageAlt="Alt text"
-      imageAspectRatio={CardImageRatios.SixteenByNine}
+      imageAspectRatio={ImageRatios.SixteenByNine}
       imageComponent={
         <Image src="https://placeimg.com/400/400/animals" alt="Alt text" />
       }
     >
-      <CardHeading level={HeadingLevels.Two} id="heading1">
+      <CardHeading level={HeadingLevels.Two} id="img1-heading1">
         Card Component with Custom Image Component
       </CardHeading>
-      <CardHeading level={HeadingLevels.Four} id="heading2">
+      <CardHeading level={HeadingLevels.Three} id="img2-heading2">
         Secondary Heading
       </CardHeading>
       <CardContent>
@@ -585,7 +555,7 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
         consectetur est at lobortis.
       </CardContent>
       <CardActions>
-        <Link type={LinkTypes.Button} href="blah">
+        <Link type={LinkTypes.Button} href="#">
           Reserve
         </Link>
         <Link href="#url" type={LinkTypes.Forwards}>
@@ -594,22 +564,15 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
       </CardActions>
     </Card>
   </Story>
-</Preview>
+</Canvas>
 
 ## Cards Without Images
 
-<Preview>
+<Canvas>
   <Story name="Cards Without Images">
-    <div
-      style={{
-        display: "grid",
-        "grid-gap": "2rem",
-        "grid-template-columns": "repeat(3, 1fr)",
-        "margin-bottom": "2rem",
-      }}
-    >
+    <SimpleGrid columns={3}>
       <Card border>
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="no-img1-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -619,7 +582,7 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
         </CardContent>
       </Card>
       <Card border>
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="no-img2-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -629,7 +592,7 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
         </CardContent>
       </Card>
       <Card border>
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+        <CardHeading level={HeadingLevels.Three} id="no-img3-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -638,16 +601,11 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
           Praesent commodo cursus magna, vel scelerisque nisl.
         </CardContent>
       </Card>
-    </div>
-    <div
-      style={{
-        display: "grid",
-        "grid-gap": "2rem",
-        "grid-template-columns": "repeat(1, 1fr)",
-      }}
-    >
-      <Card layout={CardLayouts.Horizontal} border>
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+    </SimpleGrid>
+    <br />
+    <SimpleGrid columns={1}>
+      <Card layout={CardLayouts.Row} border>
+        <CardHeading level={HeadingLevels.Three} id="no-img4-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -659,8 +617,8 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Horizontal} border>
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+      <Card layout={CardLayouts.Row} border>
+        <CardHeading level={HeadingLevels.Three} id="no-img5-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -672,8 +630,8 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Horizontal} border>
-        <CardHeading level={HeadingLevels.Three} id="heading1">
+      <Card layout={CardLayouts.Row} border>
+        <CardHeading level={HeadingLevels.Three} id="no-img6-heading1">
           Card Heading
         </CardHeading>
         <CardContent>
@@ -685,6 +643,89 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
           eget metus.
         </CardContent>
       </Card>
-    </div>
+    </SimpleGrid>
+  </Story>
+</Canvas>
+
+## Card With Full-Click Functionality
+
+To enable the full-click functionality in the `Card` component, pass a URL in
+the `mainActionLink` prop. This will make the entire `Card` component clickable.
+If the `Card` has action links or buttons, they can still be accessed by tabbing
+through the `Card` and pressing `enter` or clicking like a regular link.
+
+Internally, if multiple `CardHeading` components are passed, only the first one
+will have the full-click link. This, however, does not affect the `Card` itself
+from being having the full-click functionality.
+
+<Canvas>
+  <Story name="Card With Full-Click Functionality">
+    <SimpleGrid columns={2}>
+      <Card
+        imageSrc="https://placeimg.com/400/200/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        mainActionLink="http://nypl.org"
+      >
+        <CardHeading level={HeadingLevels.Three} id="fullclick1-heading1">
+          Go to NYPL home page.
+        </CardHeading>
+        <CardHeading level={HeadingLevels.Four} id="fullclick1-heading2">
+          Some other heading.
+        </CardHeading>
+        <CardContent>
+          This entire `Card` component is clickable, but the links below are
+          still accessible by tabbing through the `Card` and pressing `enter` or
+          clicking with a mouse.
+        </CardContent>
+        <CardActions>
+          <Link href="#" type={LinkTypes.Button}>
+            Button
+          </Link>
+          <Link href="#" type={LinkTypes.Forwards}>
+            Other link
+          </Link>
+        </CardActions>
+      </Card>
+      <Card
+        imageSrc="https://placeimg.com/410/210/animals"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+        mainActionLink="http://nypl.org"
+        imageAtEnd
+      >
+        <CardHeading level={HeadingLevels.Three} id="fullclick2-heading1">
+          Go to NYPL home page.
+        </CardHeading>
+        <CardContent>
+          This `Card` component does not have any extra links.
+        </CardContent>
+      </Card>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
+
+## Accessibility
+
+### Headings
+
+In general, headings from `h1` through `h6` must be in sequential order in the
+DOM tree. Rendering an `h4` following an `h2` will throw an error. Therefore,
+when adding `CardHeading` components, make sure to add them in sequential order
+with the `level` prop.
+
+```tsx
+<CardHeading level={HeadingLevels.Three} id="headingthree">
+  Heading level three
+</CardHeading>
+<CardHeading level={HeadingLevels.Four} id="headingfour">
+  Heading level four
+</CardHeading>
+```
+
+### Full-Click Functionality
+
+Passing in a URL in the `mainActionLink` prop will make the entire `Card`
+clickable. Other links in the `CardActions` component can still be accessed by
+tabbing through and pressing "enter" or by clicking as you normally would on a
+link.