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

package/src/components/Form/Form.stories.mdx

@@ -1,3 +1,4 @@
+import { Flex, Spacer } from "@chakra-ui/react";
 import { action } from "@storybook/addon-actions";
 import {
   ArgsTable,
@@ -172,14 +173,51 @@ need to render multiple input components in a horizontal row.
         <FormRow>
           <FormField>
             <CheckboxGroup
+              isFullWidth
               labelText="Checkbox Group"
-              name="cbg1"
+              name="checkbox-example"
               optReqFlag={false}
             >
-              <Checkbox labelText="Checkbox 1" showLabel />
-              <Checkbox labelText="Checkbox 2" showLabel />
-              <Checkbox labelText="Checkbox 3" showLabel />
-              <Checkbox labelText="Checkbox 4" showLabel />
+              <Checkbox
+                labelText={
+                  <Flex>
+                    <span>Arts</span>
+                    <Spacer />
+                    <span>4</span>
+                  </Flex>
+                }
+                value="arts"
+              />
+              <Checkbox
+                labelText={
+                  <Flex>
+                    <span>English</span>
+                    <Spacer />
+                    <span>23</span>
+                  </Flex>
+                }
+                value="English"
+              />
+              <Checkbox
+                labelText={
+                  <Flex>
+                    <span>Science</span>
+                    <Spacer />
+                    <span>10</span>
+                  </Flex>
+                }
+                value="Science"
+              />
+              <Checkbox
+                labelText={
+                  <Flex>
+                    <span>Math</span>
+                    <Spacer />
+                    <span>3</span>
+                  </Flex>
+                }
+                value="Math"
+              />
             </CheckboxGroup>
           </FormField>
           <FormField>
@@ -192,9 +230,9 @@ need to render multiple input components in a horizontal row.
           </FormField>
           <FormField>
             <Select
+              helperText="The select field helper text."
               labelText="Select Field"
               showLabel={true}
-              helperText="The select field helper text."
             >
               <option>Option 1</option>
               <option>Option 2</option>
@@ -225,9 +263,9 @@ export const formRow = (nameString, size) => {
         <FormRow>
           <FormField>
             <Select
+              helperText="The select field helper text."
               labelText="Select Field"
               showLabel={true}
-              helperText="The select field helper text."
             >
               <option>Option 1</option>
               <option>Option 2</option>
@@ -237,9 +275,9 @@ export const formRow = (nameString, size) => {
           </FormField>
           <FormField>
             <Select
+              helperText="The select field helper text."
               labelText="Select Field"
               showLabel={true}
-              helperText="The select field helper text."
             >
               <option>Option 1</option>
               <option>Option 2</option>
@@ -249,9 +287,9 @@ export const formRow = (nameString, size) => {
           </FormField>
           <FormField>
             <Select
+              helperText="The select field helper text."
               labelText="Select Field"
               showLabel={true}
-              helperText="The select field helper text."
             >
               <option>Option 1</option>
               <option>Option 2</option>

package/src/components/Form/Form.test.tsx

@@ -169,7 +169,7 @@ describe("Form", () => {
       </Form>
     );
     expect(warn).toHaveBeenCalledWith(
-      "FormRow children must be `FormField` components."
+      "NYPL Reservoir FormRow: Children must be `FormField` components."
     );
   });
 

package/src/components/Form/Form.tsx

@@ -37,7 +37,9 @@ export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
       if (child.type === FormField || child.props.mdxType === "FormField") {
         return React.cloneElement(child, { id: `${id}-grandchild${i}` });
       }
-      console.warn("FormRow children must be `FormField` components.");
+      console.warn(
+        "NYPL Reservoir FormRow: Children must be `FormField` components."
+      );
       return null;
     }
   );

package/src/components/Grid/SimpleGrid.stories.mdx

@@ -10,8 +10,7 @@ import { withDesign } from "storybook-addon-designs";
 import SimpleGrid from "./SimpleGrid";
 import { GridGaps } from "./GridTypes";
 import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
-import { CardLayouts } from "../Card/CardTypes";
-import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import {
   IconNames,
@@ -21,6 +20,7 @@ import {
 } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import { ImageRatios } from "../Image/ImageTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import { getStorybookEnumValues } from "../../utils/utils";
@@ -78,9 +78,11 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
     {(args) => (
       <SimpleGrid {...args} gap={enumValues.getValue(args.gap)}>
         <Card
-          imageSrc="https://placeimg.com/400/220/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/220/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -89,9 +91,11 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
           </CardContent>
         </Card>
         <Card
-          imageSrc="https://placeimg.com/400/220/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/220/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -100,9 +104,11 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
           </CardContent>
         </Card>
         <Card
-          imageSrc="https://placeimg.com/400/240/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/240/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -111,9 +117,11 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
           </CardContent>
         </Card>
         <Card
-          imageSrc="https://placeimg.com/400/260/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/260/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -122,9 +130,11 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
           </CardContent>
         </Card>
         <Card
-          imageSrc="https://placeimg.com/400/320/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/320/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -133,9 +143,11 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
           </CardContent>
         </Card>
         <Card
-          imageSrc="https://placeimg.com/400/300/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/300/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -213,12 +225,14 @@ This example is rendering horizontal `Card` components with the `columns` prop s
   <DSProvider>
     <SimpleGrid columns={1}>
       <Card
-        layout={CardLayouts.Row}
         border
-        center
-        imageSrc="https://placeimg.com/400/200/animals"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.FourByThree}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.FourByThree,
+          src: "https://placeimg.com/400/200/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1">
           Card Heading
@@ -230,12 +244,14 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         </CardContent>
       </Card>
       <Card
-        layout={CardLayouts.Row}
         border
-        center
-        imageSrc="https://placeimg.com/410/210/animals"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.FourByThree}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.FourByThree,
+          src: "https://placeimg.com/410/210/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading2">
           Card Heading
@@ -247,12 +263,14 @@ This example is rendering horizontal `Card` components with the `columns` prop s
         </CardContent>
       </Card>
       <Card
-        layout={CardLayouts.Row}
         border
-        center
-        imageSrc="https://placeimg.com/320/320/animals"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.FourByThree}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: ImageRatios.FourByThree,
+          src: "https://placeimg.com/320/320/animals",
+        }}
+        isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading3">
           Card Heading

package/src/components/Grid/SimpleGrid.test.tsx

@@ -13,9 +13,11 @@ describe("Grid Accessibility", () => {
     const { container } = render(
       <SimpleGrid>
         <Card
-          imageSrc="https://placeimg.com/500/200/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/500/200/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Two}>Card Heading</CardHeading>
           <CardContent>
@@ -24,9 +26,11 @@ describe("Grid Accessibility", () => {
           </CardContent>
         </Card>
         <Card
-          imageSrc="https://placeimg.com/400/220/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/220/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>
@@ -35,9 +39,11 @@ describe("Grid Accessibility", () => {
           </CardContent>
         </Card>
         <Card
-          imageSrc="https://placeimg.com/400/240/animals"
-          imageAlt="Alt text"
-          imageAspectRatio={ImageRatios.TwoByOne}
+          imageProps={{
+            alt: "Alt text",
+            aspectRatio: ImageRatios.TwoByOne,
+            src: "https://placeimg.com/400/240/animals",
+          }}
         >
           <CardHeading level={HeadingLevels.Three}>Card Heading</CardHeading>
           <CardContent>

package/src/components/Heading/Heading.stories.mdx

@@ -8,13 +8,13 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "./Heading";
-import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 import { getCategory } from "../../utils/componentCategories";
 import { getStorybookEnumValues } from "../../utils/utils";
 
 export const sizesEnumValues = getStorybookEnumValues(
-  HeadingDisplaySizes,
-  "HeadingDisplaySizes"
+  HeadingSizes,
+  "HeadingSizes"
 );
 export const levelsEnumValues = getStorybookEnumValues(
   HeadingLevels,
@@ -35,16 +35,16 @@ export const levelsEnumValues = getStorybookEnumValues(
   argTypes={{
     additionalStyles: { control: false },
     className: { control: false },
-    displaySize: {
-      control: { type: "select" },
-      options: sizesEnumValues.options,
-    },
     id: { control: false },
     level: {
       control: { type: "select" },
       options: levelsEnumValues.options,
       table: { defaultValue: { summary: "HeadingLevels.Two" } },
     },
+    size: {
+      control: { type: "select" },
+      options: sizesEnumValues.options,
+    },
   }}
 />
 
@@ -53,13 +53,13 @@ export const levelsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.13`  |
 
 <Description of={Heading} />
 
 A `Heading` component will render a standard HTML `<h>` tag (1-6). The heading's
 text can be passed in through a `text` prop or as a child. Default styles for
-semantic elements can be overwritten using the `displaySize` prop.
+semantic elements can be overwritten using the `size` prop.
 
 <Canvas withToolbar>
   <Story
@@ -67,9 +67,9 @@ semantic elements can be overwritten using the `displaySize` prop.
     args={{
       additionalStyles: undefined,
       className: undefined,
-      displaySize: undefined,
       id: "heading-id",
       level: "HeadingLevels.Two",
+      size: undefined,
       text: "Default Heading",
       url: undefined,
       urlClass: undefined,
@@ -78,10 +78,8 @@ semantic elements can be overwritten using the `displaySize` prop.
     {(args) => (
       <Heading
         {...args}
-        displaySize={
-          args.displaySize && sizesEnumValues.getValue(args.displaySize)
-        }
         level={levelsEnumValues.getValue(args.level)}
+        size={args.size && sizesEnumValues.getValue(args.size)}
       />
     )}
   </Story>
@@ -128,37 +126,37 @@ semantic elements can be overwritten using the `displaySize` prop.
   </Story>
 </Canvas>
 
-## DisplaySize Styles
+## Size Styles
 
 Note: The `level` prop for the `Heading`s in the next example are all set to
 `level={HeadingLevels.One}`.
 
 <Canvas>
-  <Story name="DisplaySize Styles">
+  <Story name="Size Styles">
     <div>
       <Heading
         id="heading-primary"
         level={HeadingLevels.One}
-        displaySize={HeadingDisplaySizes.Primary}
-        text="<h1> HeadingDisplaySizes.Primary"
+        size={HeadingSizes.Primary}
+        text="<h1> HeadingSizes.Primary"
       />
       <Heading
         id="heading-secondary"
         level={HeadingLevels.One}
-        displaySize={HeadingDisplaySizes.Secondary}
-        text="<h1> HeadingDisplaySizes.Secondary"
+        size={HeadingSizes.Secondary}
+        text="<h1> HeadingSizes.Secondary"
       />
       <Heading
         id="heading-tertiary"
         level={HeadingLevels.One}
-        displaySize={HeadingDisplaySizes.Tertiary}
-        text="<h1> HeadingDisplaySizes.Tertiary"
+        size={HeadingSizes.Tertiary}
+        text="<h1> HeadingSizes.Tertiary"
       />
       <Heading
         id="heading-callout"
         level={HeadingLevels.One}
-        displaySize={HeadingDisplaySizes.Callout}
-        text="<h1> HeadingDisplaySizes.Callout"
+        size={HeadingSizes.Callout}
+        text="<h1> HeadingSizes.Callout"
       />
     </div>
   </Story>

package/src/components/Heading/Heading.test.tsx

@@ -4,7 +4,7 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Heading from "./Heading";
-import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 
 describe("Heading Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -93,7 +93,7 @@ describe("Heading", () => {
 
   it("throws error when neither child nor text is passed", () => {
     expect(() => render(<Heading id="h1" level={HeadingLevels.One} />)).toThrow(
-      "Heading has no children, please pass prop: text"
+      "NYPL Reservoir Heading: No children or value was passed to the `text` prop."
     );
   });
 
@@ -105,7 +105,7 @@ describe("Heading", () => {
           <span>many</span>
         </Heading>
       )
-    ).toThrow("Please only pass one child into Heading, got span, span");
+    ).toThrow("NYPL Reservoir Heading: Only pass one child into Heading.");
   });
 
   it("uses custom display size", () => {
@@ -113,8 +113,8 @@ describe("Heading", () => {
       <Heading
         id="h1"
         level={HeadingLevels.One}
-        text="Heading with Secondary displaySize"
-        displaySize={HeadingDisplaySizes.Secondary}
+        size={HeadingSizes.Secondary}
+        text="Heading with Secondary size"
       />
     );
     expect(screen.getByRole("heading", { level: 1 })).toHaveStyle({
@@ -140,8 +140,8 @@ describe("Heading", () => {
         <Heading
           id="customDisplaySize"
           level={HeadingLevels.One}
-          text="Heading with Secondary displaySize"
-          displaySize={HeadingDisplaySizes.Secondary}
+          size={HeadingSizes.Secondary}
+          text="Heading with Secondary size"
         />
       )
       .toJSON();

package/src/components/Heading/Heading.tsx

@@ -1,7 +1,7 @@
 import { Heading as ChakraHeading, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
+import { HeadingSizes, HeadingLevels } from "./HeadingTypes";
 import Link from "../Link/Link";
 import { getVariant } from "../../utils/utils";
 import generateUUID from "../../helpers/generateUUID";
@@ -11,14 +11,14 @@ export interface HeadingProps {
   additionalStyles?: { [key: string]: any };
   /** Optional className that appears in addition to `heading` */
   className?: string;
-  /** Optional size used to override the default styles of the semantic HTM
-   * `<h>` elements */
-  displaySize?: HeadingDisplaySizes;
   /** Optional ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
    * `Heading` will default to `<h2>` */
   level?: HeadingLevels;
+  /** Optional size used to override the default styles of the semantic HTM
+   * `<h>` elements */
+  size?: HeadingSizes;
   /** Inner text of the `<h*>` element */
   text?: string;
   /** Optional URL that header points to; when `url` prop is passed to
@@ -46,17 +46,15 @@ function Heading(props: React.PropsWithChildren<HeadingProps>) {
   const {
     additionalStyles = {},
     className,
-    displaySize,
     id = generateUUID(),
     level = HeadingLevels.Two,
+    size,
     text,
     url,
     urlClass,
   } = props;
   const finalLevel = getMappedLevel(level);
-  const variant = displaySize
-    ? getVariant(displaySize, HeadingDisplaySizes)
-    : `h${finalLevel}`;
+  const variant = size ? getVariant(size, HeadingSizes) : `h${finalLevel}`;
   const styles = useStyleConfig("Heading", { variant });
   // Combine native base styles with any additional styles.
   // This is used in the `Hero` and `Notification` components.
@@ -64,17 +62,15 @@ function Heading(props: React.PropsWithChildren<HeadingProps>) {
   const asHeading: any = `h${finalLevel}`;
 
   if (!props.children && !text) {
-    throw new Error("Heading has no children, please pass prop: text");
+    throw new Error(
+      "NYPL Reservoir Heading: No children or value was passed to the `text` prop."
+    );
   }
 
   if (React.Children.count(props.children) > 1) {
-    const children = React.Children.map(
-      props.children,
-      (child) => (child as JSX.Element).type
-    );
     // Catching the error because React's error isn't as helpful.
     throw new Error(
-      `Please only pass one child into Heading, got ${children.join(", ")}`
+      "NYPL Reservoir Heading: Only pass one child into Heading."
     );
   }
 

package/src/components/Heading/HeadingTypes.tsx

@@ -1,4 +1,4 @@
-export enum HeadingDisplaySizes {
+export enum HeadingSizes {
   Primary = "primary",
   Secondary = "secondary",
   Tertiary = "tertiary",

package/src/components/Heading/__snapshots__/Heading.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`Heading renders the UI snapshot correctly 3`] = `
   className="chakra-heading css-0"
   id="customDisplaySize"
 >
-  Heading with Secondary displaySize
+  Heading with Secondary size
 </h1>
 `;