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

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

@@ -51,9 +51,6 @@ export const LayoutTypesEnumValues = getStorybookEnumValues(
   }}
   argTypes={{
     backgroundColor: { control: { type: "color" } },
-    border: {
-      table: { defaultValue: { summary: false } },
-    },
     className: { control: false },
     foregroundColor: { control: { type: "color" } },
     id: { control: false },
@@ -81,6 +78,12 @@ export const LayoutTypesEnumValues = getStorybookEnumValues(
     "imageProps.src": {
       table: { defaultValue: { summary: "" } },
     },
+    isAlignedRightActions: {
+      table: { defaultValue: { summary: false } },
+    },
+    isBordered: {
+      table: { defaultValue: { summary: false } },
+    },
     isCentered: {
       table: { defaultValue: { summary: false } },
     },
@@ -97,7 +100,24 @@ export const LayoutTypesEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.13`  |
+| 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} />
 
@@ -109,28 +129,33 @@ 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,
       className: undefined,
       foregroundColor: undefined,
       id: "card-id",
@@ -140,6 +165,8 @@ headings and CTAs.
       "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,
@@ -173,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
@@ -200,6 +227,40 @@ 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
@@ -566,6 +627,212 @@ 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>
@@ -728,54 +995,12 @@ prop to override the default width.
   </Story>
 </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>
-
 ## 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>
@@ -785,7 +1010,7 @@ image component in using the `imageProps.component` 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>
@@ -795,7 +1020,7 @@ image component in using the `imageProps.component` 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>
@@ -808,7 +1033,7 @@ image component in using the `imageProps.component` prop.
     </SimpleGrid>
     <br />
     <SimpleGrid columns={1}>
-      <Card layout={LayoutTypes.Row} border>
+      <Card layout={LayoutTypes.Row} isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img4-heading1">
           Card Heading
         </CardHeading>
@@ -821,7 +1046,7 @@ image component in using the `imageProps.component` prop.
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={LayoutTypes.Row} border>
+      <Card layout={LayoutTypes.Row} isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img5-heading1">
           Card Heading
         </CardHeading>
@@ -834,7 +1059,7 @@ image component in using the `imageProps.component` prop.
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={LayoutTypes.Row} border>
+      <Card layout={LayoutTypes.Row} isBordered>
         <CardHeading level={HeadingLevels.Three} id="no-img6-heading1">
           Card Heading
         </CardHeading>
@@ -850,135 +1075,3 @@ image component in using the `imageProps.component` 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
-      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>
-
-## 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.