@nypl/design-system-react-components 0.25.12 → 0.25.13

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

@@ -11,9 +11,8 @@ import { withDesign } from "storybook-addon-designs";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Card, { CardHeading, CardContent, CardActions } from "./Card";
-import { CardLayouts } from "./CardTypes";
 import Heading from "../Heading/Heading";
-import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
 import Icon from "../Icons/Icon";
 import Image from "../Image/Image";
@@ -21,6 +20,7 @@ import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import Link from "../Link/Link";
 import { LinkTypes } from "../Link/LinkTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
+import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import { getStorybookEnumValues } from "../../utils/utils";
@@ -33,9 +33,9 @@ export const imageSizesEnumValues = getStorybookEnumValues(
   ImageSizes,
   "ImageSizes"
 );
-export const cardLayoutsEnumValues = getStorybookEnumValues(
-  CardLayouts,
-  "CardLayouts"
+export const LayoutTypesEnumValues = getStorybookEnumValues(
+  LayoutTypes,
+  "LayoutTypes"
 );
 
 <Meta
@@ -54,36 +54,40 @@ export const cardLayoutsEnumValues = getStorybookEnumValues(
     border: {
       table: { defaultValue: { summary: false } },
     },
-    center: {
-      table: { defaultValue: { summary: false } },
-    },
     className: { control: false },
     foregroundColor: { control: { type: "color" } },
     id: { control: false },
-    imageAlt: {
+    imageProps: { disable: true },
+    "imageProps.alt": {
+      control: { type: "text" },
       table: { defaultValue: { summary: "" } },
     },
-    imageAspectRatio: {
+    "imageProps.aspectRatio": {
       control: { type: "select" },
       table: { defaultValue: { summary: "ImageRatios.Square" } },
       options: imageRatiosEnumValues.options,
     },
-    imageAtEnd: {
+    "imageProps.caption": { control: false },
+    "imageProps.component": { control: false },
+    "imageProps.credit": { control: false },
+    "imageProps.isAtEnd": {
       table: { defaultValue: { summary: false } },
     },
-    imageComponent: { control: false },
-    imageSize: {
+    "imageProps.size": {
       control: { type: "select" },
       table: { defaultValue: { summary: "ImageSizes.Default" } },
       options: imageSizesEnumValues.options,
     },
-    imageSrc: {
+    "imageProps.src": {
       table: { defaultValue: { summary: "" } },
     },
+    isCentered: {
+      table: { defaultValue: { summary: false } },
+    },
     layout: {
       control: { type: "radio" },
-      table: { defaultValue: { summary: "CardLayouts.Column" } },
-      options: cardLayoutsEnumValues.options,
+      table: { defaultValue: { summary: "LayoutTypes.Column" } },
+      options: LayoutTypesEnumValues.options,
     },
   }}
 />
@@ -93,7 +97,7 @@ export const cardLayoutsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Card} />
 
@@ -127,26 +131,34 @@ headings and CTAs.
     args={{
       backgroundColor: undefined,
       border: false,
-      center: false,
       className: undefined,
       foregroundColor: undefined,
       id: "card-id",
-      imageAlt: "Alt text",
-      imageAspectRatio: "ImageRatios.Square",
-      imageAtEnd: false,
-      imageComponent: undefined,
-      imageSize: "ImageSizes.Default",
-      imageSrc: "https://placeimg.com/400/300/animals",
-      layout: "CardLayouts.Row",
+      "imageProps.alt": "Alt text",
+      "imageProps.aspectRatio": "ImageRatios.Square",
+      "imageProps.component": undefined,
+      "imageProps.isAtEnd": false,
+      "imageProps.size": "ImageSizes.Default",
+      "imageProps.src": "https://placeimg.com/400/300/animals",
+      isCentered: false,
+      layout: "LayoutTypes.Row",
       mainActionLink: undefined,
     }}
   >
     {(args) => (
       <Card
         {...args}
-        imageAspectRatio={imageRatiosEnumValues.getValue(args.imageAspectRatio)}
-        imageSize={imageSizesEnumValues.getValue(args.imageSize)}
-        layout={cardLayoutsEnumValues.getValue(args.layout)}
+        imageProps={{
+          alt: args["imageProps.alt"],
+          aspectRatio: imageRatiosEnumValues.getValue(
+            args["imageProps.aspectRatio"]
+          ),
+          component: args["imageProps.component"],
+          isAtEnd: args["imageProps.isAtEnd"],
+          size: imageSizesEnumValues.getValue(args["imageProps.size"]),
+          src: args["imageProps.src"],
+        }}
+        layout={LayoutTypesEnumValues.getValue(args.layout)}
       >
         <CardHeading level={HeadingLevels.Two} id="main-heading1">
           Optional Header
@@ -192,7 +204,7 @@ headings and CTAs.
 
 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` boolean prop
+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`.
 
@@ -202,9 +214,11 @@ a `Card`.
   <Story name="Card Image Position">
     <SimpleGrid columns={2}>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/400/200/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/400/200/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="props-heading1">
           Image on Top (default)
@@ -215,10 +229,12 @@ a `Card`.
         </CardContent>
       </Card>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageAtEnd
-        imageSrc="https://placeimg.com/410/210/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          isAtEnd: true,
+          src: "https://placeimg.com/400/200/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="props-heading2">
           Image on Bottom
@@ -238,11 +254,13 @@ a `Card`.
   <DSProvider>
     <SimpleGrid columns={1}>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/400/200/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="row-heading1">
           Image on Left (default)
@@ -254,12 +272,14 @@ a `Card`.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageAtEnd
-        imageSrc="https://placeimg.com/410/210/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          isAtEnd: true,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="row-heading2">
           Image on Right
@@ -277,7 +297,7 @@ a `Card`.
 ## 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 `imageSize`
+`225px` for a `Card` with a row layout. However, you can use the `imageProps.size`
 prop to override the default width.
 
 ### Column Cards
@@ -286,11 +306,13 @@ prop to override the default width.
   <Story name="Card Image Size">
     <SimpleGrid columns={1}>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageSize={ImageSizes.ExtraExtraSmall}
-        imageSrc="https://placeimg.com/400/200/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.Square,
+          size: ImageSizes.ExtraExtraSmall,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
       >
         <CardHeading level={HeadingLevels.Three} id="column-heading1">
           Extra Extra Small Image
@@ -305,11 +327,13 @@ prop to override the default width.
       </Card>
       <HorizontalRule />
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageSize={ImageSizes.ExtraSmall}
-        imageSrc="https://placeimg.com/400/200/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.Square,
+          size: ImageSizes.ExtraSmall,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
       >
         <CardHeading level={HeadingLevels.Three} id="column-heading1">
           Extra Small Image
@@ -324,11 +348,13 @@ prop to override the default width.
       </Card>
       <HorizontalRule />
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageSize={ImageSizes.Small}
-        imageSrc="https://placeimg.com/400/200/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.Square,
+          size: ImageSizes.Small,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
       >
         <CardHeading level={HeadingLevels.Three} id="column-heading1">
           Small Image
@@ -343,11 +369,13 @@ prop to override the default width.
       </Card>
       <HorizontalRule />
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/400/200/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.Square,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
       >
         <CardHeading level={HeadingLevels.Three} id="column2-heading1">
           Medium Image
@@ -362,11 +390,13 @@ prop to override the default width.
       </Card>
       <HorizontalRule />
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageSize={ImageSizes.Large}
-        imageSrc="https://placeimg.com/410/210/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.Square,
+          size: ImageSizes.Large,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
       >
         <CardHeading level={HeadingLevels.Three} id="column3-heading1">
           Large Image
@@ -381,10 +411,12 @@ prop to override the default width.
       </Card>
       <HorizontalRule />
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.Square}
-        imageSrc="https://placeimg.com/410/210/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.Square,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
       >
         <CardHeading level={HeadingLevels.Three} id="column-4heading1">
           Default Image
@@ -407,12 +439,14 @@ prop to override the default width.
   <DSProvider>
     <SimpleGrid columns={1}>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSize={ImageSizes.ExtraExtraSmall}
-        imageSrc="https://placeimg.com/400/200/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          size: ImageSizes.ExtraExtraSmall,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Three} id="row2-heading1">
           Extra Extra Small Image
@@ -425,12 +459,14 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSize={ImageSizes.ExtraSmall}
-        imageSrc="https://placeimg.com/400/200/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          size: ImageSizes.ExtraSmall,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Three} id="row2-heading1">
           Extra Small Image
@@ -443,12 +479,14 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSize={ImageSizes.Small}
-        imageSrc="https://placeimg.com/400/200/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          size: ImageSizes.Small,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Three} id="row2-heading1">
           Small Image
@@ -461,12 +499,14 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSize={ImageSizes.Medium}
-        imageSrc="https://placeimg.com/410/210/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          size: ImageSizes.Medium,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Three} id="row3-heading2">
           Medium Image
@@ -480,12 +520,14 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSize={ImageSizes.Large}
-        imageSrc="https://placeimg.com/400/250/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          size: ImageSizes.Large,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Three} id="row4-heading1">
           Large Image
@@ -500,11 +542,13 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/450/250/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Three} id="row5-heading2">
           Default Image
@@ -528,9 +572,11 @@ prop to override the default width.
   <Story name="Cards in a Grid">
     <SimpleGrid columns={3}>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/400/200/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/400/200/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="grid1-heading1">
           Card Heading
@@ -541,9 +587,11 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/410/210/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/410/210/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="grid2-heading1">
           Card Heading
@@ -554,9 +602,11 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/420/220/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/420/220/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="grid3-heading1">
           Card Heading
@@ -567,9 +617,11 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/430/230/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/430/230/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="grid4-heading1">
           Card Heading
@@ -580,9 +632,11 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/440/240/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/440/200/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="grid5-heading1">
           Card Heading
@@ -593,9 +647,11 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/450/250/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/450/200/animals",
+        }}
       >
         <CardHeading level={HeadingLevels.Three} id="grid6-heading1">
           Card Heading
@@ -615,11 +671,13 @@ prop to override the default width.
   <Story name="Cards in a Stack">
     <SimpleGrid columns={1}>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/400/200/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="stack1-heading1">
           Card Heading
@@ -631,11 +689,13 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/410/210/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/410/210/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="stack2-heading2">
           Card Heading
@@ -647,11 +707,13 @@ prop to override the default width.
         </CardContent>
       </Card>
       <Card
-        center
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/420/220/animals"
-        layout={CardLayouts.Row}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/420/220/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="stack3-heading3">
           Card Heading
@@ -668,17 +730,20 @@ prop to override the default width.
 
 ## Custom Image Component
 
-Instead of passing a path for the `imageSrc` prop, you can pass a custom image
-component in using the `imageComponent` prop.
+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
-      imageAlt="Alt text"
-      imageAspectRatio={ImageRatios.SixteenByNine}
-      imageComponent={
-        <Image src="https://placeimg.com/400/400/animals" alt="Alt text" />
-      }
+      imageProps={{
+        alt: "Alt text",
+        aspectRatio: ImageRatios.SixteenByNine,
+        component: (
+          <Image src="https://placeimg.com/400/400/animals" alt="Alt text" />
+        ),
+        src: "https://placeimg.com/400/200/animals",
+      }}
     >
       <CardHeading level={HeadingLevels.Two} id="img1-heading1">
         Card Component with Custom Image Component
@@ -743,7 +808,7 @@ component in using the `imageComponent` prop.
     </SimpleGrid>
     <br />
     <SimpleGrid columns={1}>
-      <Card layout={CardLayouts.Row} border>
+      <Card layout={LayoutTypes.Row} border>
         <CardHeading level={HeadingLevels.Three} id="no-img4-heading1">
           Card Heading
         </CardHeading>
@@ -756,7 +821,7 @@ component in using the `imageComponent` prop.
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Row} border>
+      <Card layout={LayoutTypes.Row} border>
         <CardHeading level={HeadingLevels.Three} id="no-img5-heading1">
           Card Heading
         </CardHeading>
@@ -769,7 +834,7 @@ component in using the `imageComponent` prop.
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Row} border>
+      <Card layout={LayoutTypes.Row} border>
         <CardHeading level={HeadingLevels.Three} id="no-img6-heading1">
           Card Heading
         </CardHeading>
@@ -796,9 +861,11 @@ see both patterns.
 <Canvas>
   <Story name="Card With Link Heading">
     <Card
-      imageSrc="https://placeimg.com/400/200/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={ImageRatios.TwoByOne}
+      imageProps={{
+        alt: "Alt text",
+        aspectRatio: ImageRatios.TwoByOne,
+        src: "https://placeimg.com/400/200/animals",
+      }}
     >
       <CardHeading
         level={HeadingLevels.Three}
@@ -844,9 +911,11 @@ from being having the full-click functionality.
   <Story name="Card With Full-Click Functionality">
     <SimpleGrid columns={2}>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/400/200/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/400/200/animals",
+        }}
         mainActionLink="http://nypl.org"
       >
         <CardHeading level={HeadingLevels.Three} id="fullclick1-heading1">
@@ -870,10 +939,12 @@ from being having the full-click functionality.
         </CardActions>
       </Card>
       <Card
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageAtEnd
-        imageSrc="https://placeimg.com/410/210/animals"
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.TwoByOne,
+          isAtEnd: true,
+          src: "https://placeimg.com/410/210/animals",
+        }}
         mainActionLink="http://nypl.org"
       >
         <CardHeading level={HeadingLevels.Three} id="fullclick2-heading1">