@nypl/design-system-react-components 0.25.8 → 0.25.9

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

@@ -1,31 +1,33 @@
+import { action } from "@storybook/addon-actions";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { getCategory } from "../../utils/componentCategories";
 
-import Form, { FormRow, FormField } from "./Form";
-import { FormSpacing } from "./FormTypes";
-import TextInput from "../TextInput/TextInput";
-import Radio from "../Radio/Radio";
-import RadioGroup from "../RadioGroup/RadioGroup";
+import Button from "../Button/Button";
 import Checkbox from "../Checkbox/Checkbox";
 import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
-import Label from "../Label/Label";
-import Button from "../Button/Button";
-import Select from "../Select/Select";
+import DatePicker from "../DatePicker/DatePicker";
+import { DatePickerTypes } from "../DatePicker/DatePickerTypes";
+import Form, { FormRow, FormField } from "./Form";
+import { FormSpacing } from "./FormTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
-import DatePicker from "../DatePicker/DatePicker";
-import { DatePickerTypes } from "../DatePicker/DatePickerTypes";
-import { action } from "@storybook/addon-actions";
-
+import Label from "../Label/Label";
+import Radio from "../Radio/Radio";
+import RadioGroup from "../RadioGroup/RadioGroup";
+import Select from "../Select/Select";
+import TextInput from "../TextInput/TextInput";
+import { getCategory } from "../../utils/componentCategories";
 import SimpleGrid from "../Grid/SimpleGrid";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(FormSpacing, "FormSpacing");
 
 <Meta
   title={getCategory("Form")}
@@ -34,11 +36,23 @@ import SimpleGrid from "../Grid/SimpleGrid";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
     },
     jest: ["Form.test.tsx"],
   }}
+  argTypes={{
+    action: { control: false },
+    id: { control: false },
+    method: {
+      control: { type: "radio" },
+      options: ["get", "post"],
+    },
+    spacing: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "FormSpacing.Large" } },
+      options: enumValues.options,
+    },
+  }}
 />
 
 # Form
@@ -58,23 +72,17 @@ The `Form` component renders a standard `<form>` element and should be used to h
 
 <Canvas withToolbar>
   <Story
-    name="Form"
+    name="Form with Controls"
     args={{
       action: "/end/point",
-      id: "custom-form-id",
+      className: undefined,
+      id: "form-id",
       method: "get",
-    }}
-    argTypes={{
-      method: {
-        control: {
-          type: "radio",
-          options: ["get", "post"],
-        },
-      },
+      spacing: "FormSpacing.Large",
     }}
   >
     {(args) => (
-      <Form {...args}>
+      <Form {...args} spacing={enumValues.getValue(args.spacing)}>
         <FormRow>
           <FormField>
             <TextInput
@@ -95,15 +103,15 @@ The `Form` component renders a standard `<form>` element and should be used to h
               id="date-range"
               dateType={DatePickerTypes.Full}
               dateFormat="yyyy-MM-dd"
-              dateRange={true}
-              minDate="1/1/2021"
-              maxDate="1/1/2022"
-              labelText="Select the date range you want to visit NYPL"
-              nameFrom="visit-dates"
               helperTextFrom="From this date."
               helperTextTo="To this date."
               helperText="Select a valid date range."
               invalidText="Please select a valid date range."
+              isDateRange
+              labelText="Select the date range you want to visit NYPL"
+              minDate="1/1/2021"
+              maxDate="1/1/2022"
+              nameFrom="visit-dates"
               showLabel={false}
             />
           </FormField>
@@ -188,14 +196,14 @@ The `Form` component renders a standard `<form>` element and should be used to h
   </Story>
 </Canvas>
 
-<ArgsTable story="Form" />
+<ArgsTable story="Form with Controls" />
 
 ## Spacing Variants
 
-export const formRow = (size) => {
-  const labelText = `Size: ${size}`;
+export const formRow = (nameString, size) => {
+  const labelText = `Size: ${nameString} (${size})`;
   return (
-    <li>
+    <li key={size}>
       <Heading level={HeadingLevels.Three}>{labelText}</Heading>
       <Form spacing={size}>
         <FormRow>
@@ -243,7 +251,7 @@ export const formRow = (size) => {
 };
 export const sizes = [];
 for (const formSpacing in FormSpacing) {
-  sizes.push(formRow(FormSpacing[formSpacing]));
+  sizes.push(formRow(`FormSpacing.${formSpacing}`, FormSpacing[formSpacing]));
 }
 export const getForms = (list) => <ul style={{ listStyle: "none" }}>{list}</ul>;
 
@@ -269,7 +277,7 @@ Below are the spacing variants available with the `FormSpacing` enum.
 <Story name="Example Code" />
 
 ```jsx
-<Form action="/end/point" method="get">
+<Form action="/end/point" method="get" spacing={FormSpacing.Large}>
   <FormField>
     <TextInput
       labelText="Username"

package/src/components/Form/Form.tsx

@@ -1,7 +1,8 @@
+import { Box } from "@chakra-ui/react";
 import * as React from "react";
+
 import { FormSpacing } from "./FormTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
-import { Box } from "@chakra-ui/react";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface FormChildProps {
@@ -54,15 +55,15 @@ export function FormField(props: React.PropsWithChildren<FormChildProps>) {
   );
 }
 
-/** main Form component */
-export default function Form(props: React.ComponentProps<"form"> & FormProps) {
+/** Main Form component */
+export default function Form(props: React.PropsWithChildren<FormProps>) {
   const {
     action,
     children,
     className,
     id = generateUUID(),
     method,
-    spacing,
+    spacing = FormSpacing.Large,
   } = props;
 
   let attributes = {};

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

@@ -1,13 +1,14 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 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";
@@ -20,9 +21,11 @@ import {
 } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import { ImageRatios } from "../Image/ImageTypes";
-
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(GridGaps, "GridGaps");
 
 <Meta
   title={getCategory("SimpleGrid")}
@@ -31,32 +34,21 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26613",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26613",
     },
     jest: ["SimpleGrid.test.tsx"],
   }}
   argTypes={{
+    className: { control: false },
     columns: {
-      control: {
-        type: "number",
-        min: 2,
-      },
-      table: {
-        defaultValue: {
-          summary: 3,
-        },
-      },
+      control: { min: 2, type: "number" },
     },
     gap: {
-      table: {
-        defaultValue: {
-          summary: "l",
-        },
-      },
+      control: { type: "select" },
+      options: enumValues.options,
+      table: { defaultValue: { summary: "GridGaps.Large" } },
     },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    id: { control: false },
   }}
 />
 
@@ -74,9 +66,17 @@ The `SimpleGrid` component is used to render UI elements in a uniform grid layou
 The NYPL standards for the items per row in a grid is `3` for desktop, `2` for tablet and `1` for mobile. By default, the `SimpleGrid` component uses these standards and the `columns` prop is optional. If the `columns` prop is used, the tablet breakpoint will be dropped and only the mobile breakpoint (1 item per row) will be triggered.
 
 <Canvas withToolbar>
-  <Story name="SimpleGrid Props">
+  <Story
+    name="SimpleGrid with Controls"
+    args={{
+      className: undefined,
+      columns: undefined,
+      gap: "GridGaps.Large",
+      id: "simpleGrid-id",
+    }}
+  >
     {(args) => (
-      <SimpleGrid {...args}>
+      <SimpleGrid {...args} gap={enumValues.getValue(args.gap)}>
         <Card
           imageSrc="https://placeimg.com/400/220/animals"
           imageAlt="Alt text"
@@ -148,7 +148,7 @@ The NYPL standards for the items per row in a grid is `3` for desktop, `2` for t
   </Story>
 </Canvas>
 
-<ArgsTable story="SimpleGrid Props" />
+<ArgsTable story="SimpleGrid with Controls" />
 
 ## Other SimpleGrid Examples
 

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

@@ -1,16 +1,25 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "./Heading";
 import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
 import { getCategory } from "../../utils/componentCategories";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const sizesEnumValues = getStorybookEnumValues(
+  HeadingDisplaySizes,
+  "HeadingDisplaySizes"
+);
+export const levelsEnumValues = getStorybookEnumValues(
+  HeadingLevels,
+  "HeadingLevels"
+);
 
 <Meta
   title={getCategory("Heading")}
@@ -19,15 +28,23 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10975%3A16",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10975%3A16",
     },
     jest: ["Heading.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { table: { disable: true } },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    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" } },
+    },
   }}
 />
 
@@ -36,25 +53,41 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.9`   |
 
 <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.
+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.
 
 <Canvas withToolbar>
   <Story
-    name="Heading Props"
+    name="Heading with Controls"
     args={{
-      id: "default-heading",
+      additionalStyles: undefined,
+      className: undefined,
+      displaySize: undefined,
+      id: "heading-id",
+      level: "HeadingLevels.Two",
       text: "Default Heading",
+      url: undefined,
+      urlClass: undefined,
     }}
   >
-    {(args) => <Heading {...args} />}
+    {(args) => (
+      <Heading
+        {...args}
+        displaySize={
+          args.displaySize && sizesEnumValues.getValue(args.displaySize)
+        }
+        level={levelsEnumValues.getValue(args.level)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Heading Props" />
+<ArgsTable story="Heading with Controls" />
 
 ## Default Heading Styles
 
@@ -64,32 +97,32 @@ A `Heading` component will render a standard HTML `<h>` tag (1-6). The heading's
       <Heading
         id="heading-one"
         level={HeadingLevels.One}
-        text="<h1> Heading 1"
+        text="<h1> Heading 1 - HeadingLevels.One"
       />
       <Heading
         id="heading-two"
         level={HeadingLevels.Two}
-        text="<h2> Heading 2"
+        text="<h2> Heading 2 - HeadingLevels.Two"
       />
       <Heading
         id="heading-three"
         level={HeadingLevels.Three}
-        text="<h3> Heading 3"
+        text="<h3> Heading 3 - HeadingLevels.Three"
       />
       <Heading
         id="heading-four"
         level={HeadingLevels.Four}
-        text="<h4> Heading 4"
+        text="<h4> Heading 4 - HeadingLevels.Four"
       />
       <Heading
         id="heading-five"
         level={HeadingLevels.Five}
-        text="<h5> Heading 5"
+        text="<h5> Heading 5 - HeadingLevels.Five"
       />
       <Heading
         id="heading-six"
         level={HeadingLevels.Six}
-        text="<h6> Heading 6"
+        text="<h6> Heading 6 - HeadingLevels.Six"
       />
     </div>
   </Story>
@@ -97,6 +130,9 @@ A `Heading` component will render a standard HTML `<h>` tag (1-6). The heading's
 
 ## DisplaySize 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">
     <div>
@@ -155,7 +191,7 @@ When the `url` prop is passed to `Heading`, a child `<a>` element is created and
     />
     <Heading id="heading-with-link-child" level={HeadingLevels.Two}>
       <>
-        Heading with a Word <a href="hello">Link</a>
+        Heading with a Word <a href="#hello">Link</a>
       </>
     </Heading>
   </Story>

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import Heading from "./Heading";
 import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
@@ -15,12 +16,13 @@ describe("Heading Accessibility", () => {
 });
 
 describe("Heading", () => {
-  it("Shows heading", () => {
+  it("renders and HTML heading element with the correct level", () => {
     render(<Heading id="h1" level={HeadingLevels.One} text="Heading 1" />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
     expect(screen.getByText("Heading 1")).toBeInTheDocument();
   });
-  it("Can pass heading content as child", () => {
+
+  it("can pass heading content as child", () => {
     render(
       <Heading id="h1" level={HeadingLevels.Two}>
         Heading 2
@@ -30,13 +32,18 @@ describe("Heading", () => {
     expect(screen.getByText("Heading 2")).toBeInTheDocument();
   });
 
+  it("renders the default level two if no `level` prop is passed", () => {
+    render(<Heading id="h2">Heading 2</Heading>);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+
   // TODO: check that header children are links
   // it("Throws error when invalid heading is passed as child", () => {
   //   expect(() => render(<Heading id="h1" level={HeadingLevels.Three}><span>oh no</span></Heading>))
   //   .to.throw("Headings can only be plain text or bold");
   // });
 
-  it("Can pass heading content as child span", () => {
+  it("can pass a span element as a child", () => {
     render(
       <Heading id="h1" level={HeadingLevels.One}>
         <span>
@@ -47,7 +54,7 @@ describe("Heading", () => {
     expect(screen.getByText(/Text/i)).toBeInTheDocument();
   });
 
-  it("uses child when both child and the text prop are passed", () => {
+  it("prioritizes the child when both child and the text prop are passed", () => {
     render(
       <Heading id="h1" level={HeadingLevels.One} text="prop text">
         child text
@@ -56,20 +63,20 @@ describe("Heading", () => {
     expect(screen.getByText("child text")).toBeInTheDocument();
   });
 
-  it("Has <a> tag when passed URL", () => {
+  it("renders an anchor element when the `url` prop is passed", () => {
     render(
       <Heading
         id="h1"
         level={HeadingLevels.One}
-        url="fake-url"
         text="Heading 1"
+        url="fake-url"
       />
     );
 
     expect(screen.getByRole("link")).toBeInTheDocument();
   });
 
-  it("<a> has class when passed urlClass", () => {
+  it("adds the `urlClass` prop to the anchor element as its class name", () => {
     render(
       <Heading
         id="h1"
@@ -84,19 +91,13 @@ describe("Heading", () => {
     );
   });
 
-  it("Throws error when invalid heading number passed", () => {
-    expect(() =>
-      render(<Heading id="h1" level={9} text="Heading 9" />)
-    ).toThrow("Heading only supports levels 1-6");
-  });
-
-  it("Throws error when neither child nor text is passed", () => {
-    expect(() => render(<Heading id="h1" level={9} />)).toThrow(
-      "Heading only supports levels 1-6"
+  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"
     );
   });
 
-  it("Throws error when heading with many children is passed", () => {
+  it("throws error when heading with many children is passed", () => {
     expect(() =>
       render(
         <Heading id="h1" level={HeadingLevels.Four}>
@@ -107,7 +108,7 @@ describe("Heading", () => {
     ).toThrow("Please only pass one child into Heading, got span, span");
   });
 
-  it("Uses custom display size", () => {
+  it("uses custom display size", () => {
     render(
       <Heading
         id="h1"
@@ -120,4 +121,67 @@ describe("Heading", () => {
       "font-size": "2em",
     });
   });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <Heading id="basic" level={HeadingLevels.One} text="Heading text" />
+      )
+      .toJSON();
+    const basicWithChildText = renderer
+      .create(
+        <Heading id="basicWithChildText" level={HeadingLevels.One}>
+          Heading text
+        </Heading>
+      )
+      .toJSON();
+    const customDisplaySize = renderer
+      .create(
+        <Heading
+          id="customDisplaySize"
+          level={HeadingLevels.One}
+          text="Heading with Secondary displaySize"
+          displaySize={HeadingDisplaySizes.Secondary}
+        />
+      )
+      .toJSON();
+    const otherLevel = renderer
+      .create(
+        <Heading
+          id="otherLevel"
+          level={HeadingLevels.Six}
+          text="Heading level six"
+        />
+      )
+      .toJSON();
+    const withLink = renderer
+      .create(
+        <Heading
+          id="withLink"
+          level={HeadingLevels.One}
+          text="Heading text is a link"
+          url="fake-url"
+        />
+      )
+      .toJSON();
+    const withCustomLink = renderer
+      .create(
+        <Heading id="withCustomLink" level={HeadingLevels.One}>
+          <>
+            Part of the heading text is
+            <a href="fake-url" className="custom-link">
+              <span>a link</span>
+            </a>
+          </>
+        </Heading>
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(basicWithChildText).toMatchSnapshot();
+    expect(customDisplaySize).toMatchSnapshot();
+    expect(otherLevel).toMatchSnapshot();
+    expect(withLink).toMatchSnapshot();
+    expect(withCustomLink).toMatchSnapshot();
+  });
 });