@nypl/design-system-react-components 0.25.7 → 0.25.10

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 { FormGaps } 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(FormGaps, "FormGaps");
 
 <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"],
+    },
+    gap: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "FormGaps.Large" } },
+      options: enumValues.options,
+    },
+  }}
 />
 
 # Form
@@ -46,35 +60,45 @@ import SimpleGrid from "../Grid/SimpleGrid";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Form} />
 
-The `Form` component renders a standard `<form>` element and should be used to handle layout and spacing for child input fields. `FormRow` and `FormField` components should be used to build the `<form>` struture and to arrange input fields as needed.
+The `Form` component renders a standard `<form>` element and should be used to
+handle layout and spacing for child input fields. `FormRow` and `FormField`
+components should be used to build the `<form>` structure and to arrange input
+fields as needed.
 
-`FormField` should be used as a parent for all input components from the DS (`Button`, `Select`, `TextInput`, etc.).
+```jsx
+<Form>
+  <FormRow>
+    <FormField>{/* ... */}</FormField>
+  </FormRow>
+  <FormRow>
+    <FormField>{/* ... */}</FormField>
+  </FormRow>
+</Form>
+```
+
+`FormField` should be used as a parent for all input components from the DS
+(`Button`, `Select`, `TextInput`, etc.).
 
-`FormRow` should be used as a parent of multiple `FormField` components when you need to render multiple input components in a horizontal row.
+`FormRow` should be used as a parent of multiple `FormField` components when you
+need to render multiple input components in a horizontal row.
 
 <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"],
-        },
-      },
+      gap: "FormGaps.Large",
     }}
   >
     {(args) => (
-      <Form {...args}>
+      <Form {...args} gap={enumValues.getValue(args.gap)}>
         <FormRow>
           <FormField>
             <TextInput
@@ -95,15 +119,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,16 +212,16 @@ 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}>
+      <Form gap={size}>
         <FormRow>
           <FormField>
             <Select
@@ -242,16 +266,18 @@ export const formRow = (size) => {
   );
 };
 export const sizes = [];
-for (const formSpacing in FormSpacing) {
-  sizes.push(formRow(FormSpacing[formSpacing]));
+for (const FormGaps in FormGaps) {
+  sizes.push(formRow(`FormGaps.${FormGaps}`, FormGaps[FormGaps]));
 }
 export const getForms = (list) => <ul style={{ listStyle: "none" }}>{list}</ul>;
 
-By default, the `Form` component will handle the NYPL spacing around form input elements. The default spacing value is `large`, which corresponds to the CSS variable `--nypl-space-l` (2rem / 32px).
+By default, the `Form` component will handle the NYPL spacing around form input
+elements. The default spacing value is `large`, which corresponds to the CSS
+variable `--nypl-space-l` (2rem / 32px).
 
 **IMPORTANT:** The default spacing should not be overwritten without a very good reason.
 
-Below are the spacing variants available with the `FormSpacing` enum.
+Below are the spacing variants available with the `FormGaps` enum.
 
 <Canvas>
   <Story
@@ -269,7 +295,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" gap={FormGaps.Large}>
   <FormField>
     <TextInput
       labelText="Username"

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

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Form, { FormRow, FormField } from "./Form";
-// import { FormSpacing } from "./FormTypes";
+// import { FormGaps } from "./FormTypes";
 import TextInput from "../TextInput/TextInput";
 
 describe("Form Accessibility", () => {
@@ -12,6 +12,19 @@ describe("Form Accessibility", () => {
     const { container } = render(<Form />);
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test for the full hierachy", async () => {
+    const { container } = render(
+      <Form>
+        <FormRow>
+          <FormField>Form Field 1</FormField>
+          <FormField>Form Field 2</FormField>
+          <FormField>Form Field 3</FormField>
+        </FormRow>
+      </Form>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Form Snapshot", () => {
@@ -101,11 +114,87 @@ describe("Form", () => {
     expect(form).toHaveAttribute("method", "get");
   });
 
+  it("passes down the `Form`'s id down to its children", () => {
+    const { container } = render(
+      <Form id="formId">
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+      </Form>
+    );
+
+    expect(container.querySelector("#formId")).toBeInTheDocument();
+    // The first `FormRow` adds "child0" to its id
+    expect(container.querySelector("#formId-child0")).toBeInTheDocument();
+    // The first `FormRow`'s first `FormField` adds "grandchild0" to its id
+    expect(
+      container.querySelector("#formId-child0-grandchild0")
+    ).toBeInTheDocument();
+    // The first `FormRow`'s second `FormField` adds "grandchild1" to its id
+    expect(
+      container.querySelector("#formId-child0-grandchild1")
+    ).toBeInTheDocument();
+    // The second `FormRow` adds "child1" to its id
+    expect(container.querySelector("#formId-child1")).toBeInTheDocument();
+    // The second `FormRow`'s first `FormField` adds "grandchild0" to its id
+    expect(
+      container.querySelector("#formId-child1-grandchild0")
+    ).toBeInTheDocument();
+    // The second `FormRow`'s second `FormField` adds "grandchild1" to its id
+    expect(
+      container.querySelector("#formId-child1-grandchild1")
+    ).toBeInTheDocument();
+  });
+
+  it("logs a warning if a child of `FormRow` is not a `FormField`", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Form>
+        <FormRow>
+          <div>Not a FormField</div>
+        </FormRow>
+      </Form>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "FormRow children must be `FormField` components."
+    );
+  });
+
+  it("calls the onSubmit function", () => {
+    const onSubmit = jest.fn();
+    render(
+      <Form onSubmit={onSubmit}>
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+      </Form>
+    );
+    const form = screen.getByRole("form");
+    expect(onSubmit).toHaveBeenCalledTimes(0);
+    fireEvent.submit(form);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
   // TO DO: There's somethign weird about checking for the "grid-gap" style.
   // Other styles can be validated, but "grid-gap" is being ellusive.
   // it("Renders a <form> element with spacing variant applied", () => {
   //   render(
-  //     <Form spacing={FormSpacing.ExtraSmall}>
+  //     <Form gap={FormGaps.ExtraSmall}>
   //       <FormRow />
   //     </Form>
   //   );

package/src/components/Form/Form.tsx

@@ -1,29 +1,29 @@
 import * as React from "react";
-import { FormSpacing } from "./FormTypes";
+
+import { FormGaps } from "./FormTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
-import { Box } from "@chakra-ui/react";
 import generateUUID from "../../helpers/generateUUID";
 
-export interface FormChildProps {
-  /** className to be applied to FormRow */
+interface FormBaseProps {
+  /** className to be applied to FormRow, FormField, and Form */
   className?: string;
-  /** Spacing size (internal use) */
-  gap?: FormSpacing;
+  /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
+   * spacing will be used; ```IMPORTANT: for general form layout, this prop
+   * should not be used``` */
+  gap?: FormGaps;
   /** ID that other components can cross reference (internal use) */
   id?: string;
 }
 
-export interface FormProps {
+export interface FormChildProps extends FormBaseProps {}
+
+export interface FormProps extends FormBaseProps {
   /** Optional form `action` attribute */
   action?: string;
-  /** Optional className you can add in addition to `form` */
-  className?: string;
-  /** Optional ID that other components can cross reference */
-  id?: string;
   /** Optional form `method` attribute */
   method?: "get" | "post";
-  /** Optional spacing size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for general form layout, this prop should not be used``` */
-  spacing?: FormSpacing;
+  /** Function to call for the `onSubmit` form event. */
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
 /** FormRow child-component */
@@ -34,7 +34,11 @@ export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
     children,
     (child: React.ReactElement, i) => {
       if (!child) return null;
-      return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+      if (child.type === FormField || child.props.mdxType === "FormField") {
+        return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+      }
+      console.warn("FormRow children must be `FormField` components.");
+      return null;
     }
   );
   return (
@@ -54,15 +58,16 @@ 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,
+    gap = FormGaps.Large,
     id = generateUUID(),
     method,
-    spacing,
+    onSubmit,
   } = props;
 
   let attributes = {};
@@ -75,21 +80,21 @@ export default function Form(props: React.ComponentProps<"form"> & FormProps) {
   const alteredChildren = React.Children.map(
     children,
     (child: React.ReactElement, i) => {
-      return React.cloneElement(child, { gap: spacing, id: `${id}-child${i}` });
+      return React.cloneElement(child, { gap, id: `${id}-child${i}` });
     }
   );
 
   return (
-    <Box
-      as="form"
+    <form
       aria-label="form"
+      className={className}
       id={id}
+      onSubmit={onSubmit}
       {...attributes}
-      className={className}
     >
-      <SimpleGrid columns={1} gap={spacing} id={id + "-parent"}>
+      <SimpleGrid columns={1} gap={gap} id={`${id}-parent`}>
         {alteredChildren}
       </SimpleGrid>
-    </Box>
+    </form>
   );
 }

package/src/components/Form/FormTypes.tsx

@@ -1,3 +1,3 @@
-import { GridGaps as FormSpacing } from "../Grid/GridTypes";
+import { GridGaps as FormGaps } from "../Grid/GridTypes";
 
-export { FormSpacing };
+export { FormGaps };

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

@@ -3,7 +3,6 @@
 exports[`Form Snapshot Renders the UI snapshot correctly 1`] = `
 <form
   aria-label="form"
-  className="css-0"
   id="snapshot-form"
 >
   <div

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