@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,1043 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from "@storybook/addon-docs";
-import { withDesign } from "storybook-addon-designs";
-
-import Button from "../Button/Button";
-import Card, { CardHeading, CardContent, CardActions } from "./Card";
-import Heading from "../Heading/Heading";
-import HorizontalRule from "../HorizontalRule/HorizontalRule";
-import Icon from "../Icons/Icon";
-import Image from "../Image/Image";
-import Link from "../Link/Link";
-import SimpleGrid from "../Grid/SimpleGrid";
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
-
-<Meta
-  title={getCategory("Card")}
-  component={Card}
-  decorators={[withDesign]}
-  parameters={{
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A25747",
-    },
-    jest: ["Card.test.tsx"],
-  }}
-  argTypes={{
-    backgroundColor: { control: { type: "color" } },
-    className: { control: false },
-    foregroundColor: { control: { type: "color" } },
-    id: { control: false },
-    imageProps: { disable: true },
-    "imageProps.alt": {
-      control: { type: "text" },
-      table: { defaultValue: { summary: "" } },
-    },
-    "imageProps.aspectRatio": {
-      table: { defaultValue: { summary: "square" } },
-    },
-    "imageProps.caption": { control: false },
-    "imageProps.component": { control: false },
-    "imageProps.credit": { control: false },
-    "imageProps.isAtEnd": {
-      table: { defaultValue: { summary: false } },
-    },
-    "imageProps.size": {
-      table: { defaultValue: { summary: "default" } },
-    },
-    "imageProps.src": {
-      table: { defaultValue: { summary: "" } },
-    },
-    isAlignedRightActions: {
-      table: { defaultValue: { summary: false } },
-    },
-    isBordered: {
-      table: { defaultValue: { summary: false } },
-    },
-    isCentered: {
-      table: { defaultValue: { summary: false } },
-    },
-    layout: {
-      table: { defaultValue: { summary: "column" } },
-    },
-  }}
-/>
-
-# Card
-
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.24.0`   |
-| Latest            | `0.28.0`   |
-
-## Table of Contents
-
-- [Overview](#overview)
-- [Component Props](#component-props)
-- [Accessibility](#accessibility)
-- [Image Position](#image-position)
-- [Image Size](#image-size)
-- [Custom Image Component](#custom-image-component)
-- [Card With Link Heading](#card-with-link-heading)
-- [Card With Full-Click Functionality](#card-with-full-click-functionality)
-- [Card with Right Side CardActions](#card-with-right-side-cardactions)
-- [Cards in a Grid](#cards-in-a-grid)
-- [Cards in a Stack](#cards-in-a-stack)
-- [Card Without Images](#card-without-images)
-
-## Overview
-
-<Description of={Card} />
-
-The `Card` component is viewed as a contained, stand-alone element. It is highly
-configurable and composable. It can be shown with or without an image and the
-content area is composed using Card-specific child components: `CardHeading`,
-`CardActions` and `CardContent`. These child components can be arranged in any
-order and each child component may be used multiple times within the content
-area. Although a `Card` is a self-contained unit, `Card` components are often
-grouped together and displayed in some type of grid layout.
-
-### CardHeading
-
-The `CardHeading` component mirrors the standard Reservoir Design System (DS)
-`Heading` component and accepts the [same props](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/components-typography-styles-heading--heading-with-controls).
-
-### CardActions
-
-The `CardActions` component is used to display "call to action" (CTA) buttons
-and links for the card. The DS `Button` and `Link` components should be passed
-as children into the `CardActions` component.
-
-Set the `isAlignedRightActions` prop to true in the `Card` component to align the
-`CardActions` to the right of the the main content area. This is only applicable
-in the row layout of the `Card` component.
-
-### CardContent
-
-The `CardContent` component should be used to display all content other than
-headings and CTAs.
-
-## Component Props
-
-<Canvas withToolbar>
-  <Story
-    name="Card with Controls"
-    args={{
-      backgroundColor: undefined,
-      className: undefined,
-      foregroundColor: undefined,
-      id: "card-id",
-      "imageProps.alt": "Alt text",
-      "imageProps.aspectRatio": "square",
-      "imageProps.component": undefined,
-      "imageProps.isAtEnd": false,
-      "imageProps.size": "default",
-      "imageProps.src": "https://placeimg.com/400/300/animals",
-      isAlignedRightActions: false,
-      isBordered: false,
-      isCentered: false,
-      layout: "row",
-      mainActionLink: undefined,
-    }}
-  >
-    {(args) => (
-      <Card
-        backgroundColor={args.backgroundColor}
-        className={args.className}
-        foregroundColor={args.foregroundColor}
-        id={args.id}
-        imageProps={{
-          alt: args["imageProps.alt"],
-          aspectRatio: args["imageProps.aspectRatio"],
-          component: args["imageProps.component"],
-          isAtEnd: args["imageProps.isAtEnd"],
-          size: args["imageProps.size"],
-          src: args["imageProps.src"],
-        }}
-        isAlignedRightActions={args.isAlignedRightActions}
-        isBordered={args.isBordered}
-        isCentered={args.isCentered}
-        layout={args.layout}
-        mainActionLink={args.mainActionLink}
-      >
-        <CardHeading level="two" id="main-heading1">
-          Optional Header
-        </CardHeading>
-        <CardHeading level="three" id="main-heading2">
-          Sollicitudin Lorem Tortor Purus Ornare
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue. Nullam quis risus eget urna mollis ornare
-          vel eu leo. Nulla vitae elit libero, a pharetra augue.
-        </CardContent>
-        <CardActions topBorder bottomBorder>
-          <Button id="main-button1" onClick={action("clicked")} type="submit">
-            Primary
-          </Button>
-          <Button
-            buttonType="secondary"
-            id="main-button2"
-            onClick={action("clicked")}
-            type="submit"
-          >
-            Secondary
-          </Button>
-        </CardActions>
-        <CardActions>
-          <Link href="#">#hash1</Link>,<Link href="#">#hash2</Link>,
-          <Link href="#">#hash3</Link>
-        </CardActions>
-      </Card>
-    )}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Card with Controls" />
-
-## 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 accessibility error.
-Therefore, when adding `CardHeading` components, make sure to add them in
-sequential order with the proper `level` prop.
-
-```tsx
-// Correct
-<CardHeading level="three" id="headingthree">
-  Heading level three
-</CardHeading>
-<CardHeading level="four" id="headingfour">
-  Heading level four
-</CardHeading>
-
-// Incorrect
-<CardHeading level="two" id="headingtwo">
-  Heading level Two
-</CardHeading>
-<CardHeading level="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.
-
-## Image Position
-
-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 `imageProps.isAtEnd` boolean prop
-to override the default placement and move the image to the last element within
-a `Card`.
-
-### Column Cards
-
-<Canvas>
-  <Story name="Card Image Position">
-    <SimpleGrid columns={2}>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-      >
-        <CardHeading level="three" id="props-heading1">
-          Image on Top (default)
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          isAtEnd: true,
-          src: "https://placeimg.com/400/200/animals",
-        }}
-      >
-        <CardHeading level="three" id="props-heading2">
-          Image on Bottom
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-    </SimpleGrid>
-  </Story>
-</Canvas>
-
-### Row Cards
-
-<Canvas>
-  <DSProvider>
-    <SimpleGrid columns={1}>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="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
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          isAtEnd: true,
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="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 `Card` with a column layout and
-`225px` for a `Card` with a row layout. However, you can use the `imageProps.size`
-prop to override the default width.
-
-### Column Cards
-
-<Canvas>
-  <Story name="Card Image Size">
-    <SimpleGrid columns={1}>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "square",
-          size: "xxsmall",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-      >
-        <CardHeading level="three" id="column-heading1">
-          Extra Extra Small Image
-        </CardHeading>
-        <CardHeading level="four" id="column-heading2">
-          Max-Width: 64px
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <HorizontalRule />
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "square",
-          size: "xsmall",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-      >
-        <CardHeading level="three" id="column-heading1">
-          Extra Small Image
-        </CardHeading>
-        <CardHeading level="four" id="column-heading2">
-          Max-Width: 96px
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <HorizontalRule />
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "square",
-          size: "small",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-      >
-        <CardHeading level="three" id="column-heading1">
-          Small Image
-        </CardHeading>
-        <CardHeading level="four" id="column-heading2">
-          Max-Width: 165px
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <HorizontalRule />
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "square",
-          size: "medium",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-      >
-        <CardHeading level="three" id="column2-heading1">
-          Medium Image
-        </CardHeading>
-        <CardHeading level="four" id="column2-heading2">
-          Max-Width: 225px
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <HorizontalRule />
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "square",
-          size: "large",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-      >
-        <CardHeading level="three" id="column3-heading1">
-          Large Image
-        </CardHeading>
-        <CardHeading level="four" id="column3-heading2">
-          Max-Width: 360px
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <HorizontalRule />
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "square",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-      >
-        <CardHeading level="three" id="column-4heading1">
-          Default Image
-        </CardHeading>
-        <CardHeading level="four" id="column-4heading2">
-          Width: 100%
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-    </SimpleGrid>
-  </Story>
-</Canvas>
-
-### Row Cards
-
-<Canvas>
-  <DSProvider>
-    <SimpleGrid columns={1}>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          size: "xxsmall",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="three" id="row2-heading1">
-          Extra Extra Small Image
-        </CardHeading>
-        <CardHeading level="four" id="row2-heading2">
-          Max-Width: 64px
-        </CardHeading>
-        <CardContent>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          size: "xsmall",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="three" id="row2-heading1">
-          Extra Small Image
-        </CardHeading>
-        <CardHeading level="four" id="row2-heading2">
-          Max-Width: 96px
-        </CardHeading>
-        <CardContent>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          size: "small",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="three" id="row2-heading1">
-          Small Image
-        </CardHeading>
-        <CardHeading level="four" id="row2-heading2">
-          Max-Width: 165px
-        </CardHeading>
-        <CardContent>
-          Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          size: "medium",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="three" id="row3-heading2">
-          Medium Image
-        </CardHeading>
-        <CardHeading level="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
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          size: "large",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="three" id="row4-heading1">
-          Large Image
-        </CardHeading>
-        <CardHeading level="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
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="three" id="row5-heading2">
-          Default Image
-        </CardHeading>
-        <CardHeading level="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>
-
-## Custom Image Component
-
-Instead of passing a path for the `imageProps.src` prop, you can pass a custom
-image component in using the `imageProps.component` prop.
-
-<Canvas withToolbar>
-  <Story name="Custom Image Component">
-    <Card
-      imageProps={{
-        alt: "Alt text",
-        aspectRatio: "sixteenByNine",
-        component: (
-          <Image src="https://placeimg.com/400/400/animals" alt="Alt text" />
-        ),
-        src: "https://placeimg.com/400/200/animals",
-      }}
-    >
-      <CardHeading level="two" id="img1-heading1">
-        Card Component with Custom Image Component
-      </CardHeading>
-      <CardHeading level="three" id="img2-heading2">
-        Secondary Heading
-      </CardHeading>
-      <CardContent>
-        Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet,
-        consectetur adipiscing elit. Aenean lacinia bibendum nulla sed
-        consectetur. Vestibulum id ligula porta felis euismod semper. Cras justo
-        odio, dapibus ac facilisis in, egestas eget quam. Sed posuere
-        consectetur est at lobortis.
-      </CardContent>
-      <CardActions>
-        <Link type="button" href="#">
-          Reserve
-        </Link>
-        <Link href="#url" type="forwards">
-          View Book Details
-        </Link>
-      </CardActions>
-    </Card>
-  </Story>
-</Canvas>
-
-## Card with Link Heading
-
-The `CardHeading` component works just like the DS `Heading` component. This
-means that a URL can be passed in the `url` prop for `CardHeading` or a `Link`
-component can be used as a child. Click on "Show code" in the example below to
-see both patterns.
-
-<Canvas>
-  <Story name="Card With Link Heading">
-    <Card
-      imageProps={{
-        alt: "Alt text",
-        aspectRatio: "twoByOne",
-        src: "https://placeimg.com/400/200/animals",
-      }}
-    >
-      <CardHeading level="three" id="link-heading1" url="http://nypl.org">
-        Go to NYPL home page.
-      </CardHeading>
-      <CardHeading level="four" id="link-heading2">
-        <>
-          Go to NYPL <Link href="http://nypl.org">home page</Link>.
-        </>
-      </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="button">
-          Button
-        </Link>
-        <Link href="#" type="forwards">
-          Other link
-        </Link>
-      </CardActions>
-    </Card>
-  </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
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        mainActionLink="http://nypl.org"
-      >
-        <CardHeading level="three" id="fullclick1-heading1">
-          Go to NYPL home page.
-        </CardHeading>
-        <CardHeading level="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="button">
-            Button
-          </Link>
-          <Link href="#" type="forwards">
-            Other link
-          </Link>
-        </CardActions>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          isAtEnd: true,
-          src: "https://placeimg.com/410/210/animals",
-        }}
-        mainActionLink="http://nypl.org"
-      >
-        <CardHeading level="three" id="fullclick2-heading1">
-          Go to NYPL home page.
-        </CardHeading>
-        <CardContent>
-          This `Card` component does not have any extra links.
-        </CardContent>
-      </Card>
-    </SimpleGrid>
-  </Story>
-</Canvas>
-
-## Card with Right Side CardActions
-
-It's possible to set only the `CardActions` component on the right side of the
-main content area of the `Card`. This is possible only in the `layout="row"`
-layout and through the `Card` component's `isAlignedRightActions` prop which
-must be set to `true`.
-
-<Canvas>
-  <Story name="Card with Right Side CardActions">
-    <Card
-      imageProps={{
-        alt: "Alt text",
-        aspectRatio: "twoByOne",
-        size: "medium",
-        src: "https://placeimg.com/400/200/animals",
-      }}
-      isAlignedRightActions
-      isCentered
-      layout="row"
-    >
-      <CardHeading level="two" id="main-heading1">
-        Optional Header
-      </CardHeading>
-      <CardHeading level="three" id="main-heading2">
-        Sollicitudin Lorem Tortor Purus Ornare
-      </CardHeading>
-      <CardContent>
-        Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-        libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel
-        eu leo. Nulla vitae elit libero, a pharetra augue.
-      </CardContent>
-      <CardActions topBorder bottomBorder>
-        <Button onClick={action("clicked")} id="main-button1" type="submit">
-          Primary
-        </Button>
-        <Button
-          onClick={action("clicked")}
-          id="main-button2"
-          buttonType="secondary"
-          type="submit"
-        >
-          Secondary
-        </Button>
-      </CardActions>
-      <CardActions>
-        <Link href="#">#hash1</Link>,<Link href="#">#hash2</Link>,
-        <Link href="#">#hash3</Link>
-      </CardActions>
-    </Card>
-  </Story>
-</Canvas>
-
-## Cards in a Grid
-
-<Canvas>
-  <Story name="Cards in a Grid">
-    <SimpleGrid columns={3}>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-      >
-        <CardHeading level="three" id="grid1-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/410/210/animals",
-        }}
-      >
-        <CardHeading level="three" id="grid2-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/420/220/animals",
-        }}
-      >
-        <CardHeading level="three" id="grid3-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/430/230/animals",
-        }}
-      >
-        <CardHeading level="three" id="grid4-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/440/200/animals",
-        }}
-      >
-        <CardHeading level="three" id="grid5-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/450/200/animals",
-        }}
-      >
-        <CardHeading level="three" id="grid6-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue.
-        </CardContent>
-      </Card>
-    </SimpleGrid>
-  </Story>
-</Canvas>
-
-## Cards in a Stack
-
-<Canvas>
-  <Story name="Cards in a Stack">
-    <SimpleGrid columns={1}>
-      <Card
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/400/200/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="four" id="stack1-heading1">
-          Card Heading
-        </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
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/410/210/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="four" id="stack2-heading2">
-          Card Heading
-        </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
-        imageProps={{
-          alt: "Alt text",
-          aspectRatio: "twoByOne",
-          src: "https://placeimg.com/420/220/animals",
-        }}
-        isCentered
-        layout="row"
-      >
-        <CardHeading level="four" id="stack3-heading3">
-          Card Heading
-        </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>
-  </Story>
-</Canvas>
-
-## Cards Without Images
-
-<Canvas>
-  <Story name="Cards Without Images">
-    <SimpleGrid columns={3}>
-      <Card isBordered>
-        <CardHeading level="three" id="no-img1-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.
-          Praesent commodo cursus magna, vel scelerisque nisl.
-        </CardContent>
-      </Card>
-      <Card isBordered>
-        <CardHeading level="three" id="no-img2-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.
-          Praesent commodo cursus magna, vel scelerisque nisl.
-        </CardContent>
-      </Card>
-      <Card isBordered>
-        <CardHeading level="three" id="no-img3-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.
-          Praesent commodo cursus magna, vel scelerisque nisl.
-        </CardContent>
-      </Card>
-    </SimpleGrid>
-    <br />
-    <SimpleGrid columns={1}>
-      <Card layout="row" isBordered>
-        <CardHeading level="three" id="no-img4-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue. Vestibulum id ligula porta felis euismod
-          semper. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit
-          libero, a pharetra augue. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec id elit non mi porta gravida at
-          eget metus.
-        </CardContent>
-      </Card>
-      <Card layout="row" isBordered>
-        <CardHeading level="three" id="no-img5-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue. Vestibulum id ligula porta felis euismod
-          semper. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit
-          libero, a pharetra augue. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec id elit non mi porta gravida at
-          eget metus.
-        </CardContent>
-      </Card>
-      <Card layout="row" isBordered>
-        <CardHeading level="three" id="no-img6-heading1">
-          Card Heading
-        </CardHeading>
-        <CardContent>
-          Vestibulum id ligula porta felis euismod semper. Nulla vitae elit
-          libero, a pharetra augue. Vestibulum id ligula porta felis euismod
-          semper. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit
-          libero, a pharetra augue. Praesent commodo cursus magna, vel
-          scelerisque nisl consectetur et. Donec id elit non mi porta gravida at
-          eget metus.
-        </CardContent>
-      </Card>
-    </SimpleGrid>
-  </Story>
-</Canvas>