@nypl/design-system-react-components 0.25.11 → 0.26.0

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
@@ -51,39 +51,46 @@ export const cardLayoutsEnumValues = getStorybookEnumValues(
   }}
   argTypes={{
     backgroundColor: { control: { type: "color" } },
-    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: "" } },
     },
+    isAlignedRightActions: {
+      table: { defaultValue: { summary: false } },
+    },
+    isBordered: {
+      table: { defaultValue: { summary: false } },
+    },
+    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 +100,24 @@ export const cardLayoutsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.26.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} />
 
@@ -105,48 +129,63 @@ 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
+### CardHeading
 
-The `CardHeading` component mirrors the standard DS `Heading` component and
-accepts the [same props](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/components-typography-styles-heading--heading-with-controls).
+The `CardHeading` component mirrors the standard Reservoir Design System (DS)
+`Heading` component and accepts the [same props](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/components-typography-styles-heading--heading-with-controls).
 
-#### CardActions
+### 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.
 
-#### CardContent
+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,
-      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",
+      isAlignedRightActions: false,
+      isBordered: false,
+      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
@@ -161,17 +200,17 @@ headings and CTAs.
         </CardContent>
         <CardActions topBorder bottomBorder>
           <Button
-            onClick={action("clicked")}
-            id="main-button1"
             buttonType={ButtonTypes.Primary}
+            id="main-button1"
+            onClick={action("clicked")}
             type="submit"
           >
             Primary
           </Button>
           <Button
-            onClick={action("clicked")}
-            id="main-button2"
             buttonType={ButtonTypes.Secondary}
+            id="main-button2"
+            onClick={action("clicked")}
             type="submit"
           >
             Secondary
@@ -188,11 +227,45 @@ headings and CTAs.
 
 <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={HeadingLevels.Three} id="headingthree">
+  Heading level three
+</CardHeading>
+<CardHeading level={HeadingLevels.Four} id="headingfour">
+  Heading level four
+</CardHeading>
+
+// Incorrect
+<CardHeading level={HeadingLevels.Two} id="headingtwo">
+  Heading level Two
+</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.
+
 ## 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 `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 +275,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 +290,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 +315,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 +333,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 +358,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 +367,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 +388,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 +409,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 +430,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 +451,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 +472,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 +500,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 +520,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 +540,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 +560,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 +581,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 +603,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
@@ -522,15 +627,223 @@ prop to override the default width.
   </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: 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
+      </CardHeading>
+      <CardHeading level={HeadingLevels.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={LinkTypes.Button} href="#">
+          Reserve
+        </Link>
+        <Link href="#url" type={LinkTypes.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: ImageRatios.TwoByOne,
+        src: "https://placeimg.com/400/200/animals",
+      }}
+    >
+      <CardHeading
+        level={HeadingLevels.Three}
+        id="link-heading1"
+        url="http://nypl.org"
+      >
+        Go to NYPL home page.
+      </CardHeading>
+      <CardHeading level={HeadingLevels.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={LinkTypes.Button}>
+          Button
+        </Link>
+        <Link href="#" type={LinkTypes.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: ImageRatios.TwoByOne,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        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
+        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">
+          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 "LayoutTypes.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: ImageRatios.TwoByOne,
+        size: ImageSizes.Medium,
+        src: "https://placeimg.com/400/200/animals",
+      }}
+      isAlignedRightActions
+      isCentered
+      layout={LayoutTypes.Row}
+    >
+      <CardHeading level={HeadingLevels.Two} id="main-heading1">
+        Optional Header
+      </CardHeading>
+      <CardHeading level={HeadingLevels.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"
+          buttonType={ButtonTypes.Primary}
+          type="submit"
+        >
+          Primary
+        </Button>
+        <Button
+          onClick={action("clicked")}
+          id="main-button2"
+          buttonType={ButtonTypes.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
-        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 +854,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 +869,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 +884,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 +899,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 +914,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 +938,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 +956,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 +974,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
@@ -666,51 +995,12 @@ prop to override the default width.
   </Story>
 </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.
-
-<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" />
-      }
-    >
-      <CardHeading level={HeadingLevels.Two} id="img1-heading1">
-        Card Component with Custom Image Component
-      </CardHeading>
-      <CardHeading level={HeadingLevels.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={LinkTypes.Button} href="#">
-          Reserve
-        </Link>
-        <Link href="#url" type={LinkTypes.Forwards}>
-          View Book Details
-        </Link>
-      </CardActions>
-    </Card>
-  </Story>
-</Canvas>
-
 ## Cards Without Images
 
 <Canvas>
   <Story name="Cards Without Images">
     <SimpleGrid columns={3}>
-      <Card border>
+      <Card isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img1-heading1">
           Card Heading
         </CardHeading>
@@ -720,7 +1010,7 @@ component in using the `imageComponent` prop.
           Praesent commodo cursus magna, vel scelerisque nisl.
         </CardContent>
       </Card>
-      <Card border>
+      <Card isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img2-heading1">
           Card Heading
         </CardHeading>
@@ -730,7 +1020,7 @@ component in using the `imageComponent` prop.
           Praesent commodo cursus magna, vel scelerisque nisl.
         </CardContent>
       </Card>
-      <Card border>
+      <Card isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img3-heading1">
           Card Heading
         </CardHeading>
@@ -743,7 +1033,7 @@ component in using the `imageComponent` prop.
     </SimpleGrid>
     <br />
     <SimpleGrid columns={1}>
-      <Card layout={CardLayouts.Row} border>
+      <Card layout={LayoutTypes.Row} isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img4-heading1">
           Card Heading
         </CardHeading>
@@ -756,7 +1046,7 @@ component in using the `imageComponent` prop.
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Row} border>
+      <Card layout={LayoutTypes.Row} isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img5-heading1">
           Card Heading
         </CardHeading>
@@ -769,7 +1059,7 @@ component in using the `imageComponent` prop.
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Row} border>
+      <Card layout={LayoutTypes.Row} isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img6-heading1">
           Card Heading
         </CardHeading>
@@ -785,129 +1075,3 @@ component in using the `imageComponent` prop.
     </SimpleGrid>
   </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
-      imageSrc="https://placeimg.com/400/200/animals"
-      imageAlt="Alt text"
-      imageAspectRatio={ImageRatios.TwoByOne}
-    >
-      <CardHeading
-        level={HeadingLevels.Three}
-        id="link-heading1"
-        url="http://nypl.org"
-      >
-        Go to NYPL home page.
-      </CardHeading>
-      <CardHeading level={HeadingLevels.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={LinkTypes.Button}>
-          Button
-        </Link>
-        <Link href="#" type={LinkTypes.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
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageSrc="https://placeimg.com/400/200/animals"
-        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
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
-        imageAtEnd
-        imageSrc="https://placeimg.com/410/210/animals"
-        mainActionLink="http://nypl.org"
-      >
-        <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>
-</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.