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

package/src/components/DatePicker/DatePicker.test.tsx

@@ -9,7 +9,7 @@ import { DatePickerTypes } from "./DatePickerTypes";
 import { TextInputRefType } from "../TextInput/TextInput";
 
 /** This adds a "0" padding for date values under "10". */
-const str_pad = (n) => String("0" + n).slice(-2);
+const strPad = (n) => String("0" + n).slice(-2);
 const monthArray = [
   "January",
   "February",
@@ -49,8 +49,8 @@ describe("DatePicker", () => {
   /** Returns today's year, month, and day values. */
   const getTodaysValues = () => {
     const year = todaysDate.getFullYear();
-    const month = str_pad(todaysDate.getMonth() + 1);
-    const day = str_pad(todaysDate.getDate());
+    const month = strPad(todaysDate.getMonth() + 1);
+    const day = strPad(todaysDate.getDate());
     return [year, month, day];
   };
   /** Returns today's date in string format based on the DatePicker type. */
@@ -328,9 +328,9 @@ describe("DatePicker", () => {
       expect(screen.getByDisplayValue(newDayValue)).toBeInTheDocument();
 
       const { startDate } = dateObject;
-      const valueFromOnChange = `${startDate.getFullYear()}-${str_pad(
+      const valueFromOnChange = `${startDate.getFullYear()}-${strPad(
         startDate.getMonth() + 1
-      )}-${str_pad(startDate.getDate())}`;
+      )}-${strPad(startDate.getDate())}`;
       expect(newDayValue).toEqual(valueFromOnChange);
     });
 
@@ -724,7 +724,7 @@ describe("DatePicker", () => {
       // We are two months ahead but still selecting the midmonth day.
       userEvent.click(screen.getByText(midMonthDay));
       // So only the month should change accordingly.
-      const newMonthValue = `${newDayValue.substr(0, 5)}${str_pad(
+      const newMonthValue = `${newDayValue.substr(0, 5)}${strPad(
         "10"
       )}${newDayValue.substr(7)}`;
       expect(screen.getByDisplayValue(newMonthValue)).toBeInTheDocument();

package/src/components/DatePicker/DatePicker.tsx

@@ -4,18 +4,20 @@ import ReactDatePicker from "react-datepicker";
 import { DatePickerTypes } from "./DatePickerTypes";
 import Fieldset from "../Fieldset/Fieldset";
 import { FormRow, FormField } from "../Form/Form";
-import { FormSpacing } from "../Form/FormTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import { FormGaps } from "../Form/FormTypes";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
+import { helperTextMargin } from "../../theme/components/global";
 import TextInput, {
   InputProps,
   TextInputRefType,
 } from "../TextInput/TextInput";
 import generateUUID from "../../helpers/generateUUID";
-import { useMultiStyleConfig } from "@chakra-ui/system";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 // The object shape for the DatePicker's start and end date state values.
-// Internal use only.
-interface FullDateType {
+export interface FullDateType {
   /** Date object that gets returned for the onChange
    * function only for date ranges. */
   endDate?: Date;
@@ -74,7 +76,7 @@ export interface DatePickerProps extends DatePickerWrapperProps {
   /** DatePicker date types that can be rendered. */
   dateType?: DatePickerTypes;
   /** Populates the `HelperErrorText` component in this component. */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
   helperTextFrom?: string;
   /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
@@ -86,7 +88,7 @@ export interface DatePickerProps extends DatePickerWrapperProps {
   initialDateTo?: string;
   /** Populates the `HelperErrorText` error state for both "From"
    * and "To" input components. */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** Adds the 'disabled' property to the input element(s). */
   isDisabled?: boolean;
   /** Adds 'isInvalid' styling. */
@@ -215,7 +217,7 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
   children,
 }) =>
   isDateRange ? (
-    <FormRow id={`${id}-form-row`} gap={FormSpacing.ExtraSmall}>
+    <FormRow id={`${id}-form-row`} gap={FormGaps.ExtraSmall}>
       {children}
     </FormRow>
   ) : (
@@ -415,9 +417,13 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
           )}
         </DateRangeRow>
         {helperText && isDateRange && showHelperInvalidText && (
-          <HelperErrorText id={`${id}-helper-text`} isInvalid={false}>
-            {helperText}
-          </HelperErrorText>
+          <Box __css={helperTextMargin}>
+            <HelperErrorText
+              id={`${id}-helper-text`}
+              isInvalid={false}
+              text={helperText}
+            />
+          </Box>
         )}
       </DatePickerWrapper>
     );

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

@@ -363,11 +363,14 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                   aria-atomic={true}
                   aria-live="polite"
                   className=" css-0"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Please select a valid date.",
+                    }
+                  }
                   data-isinvalid={true}
                   id="invalid-start-helperText"
-                >
-                  Please select a valid date.
-                </div>
+                />
               </div>
             </div>
           </div>
@@ -415,11 +418,14 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                   aria-atomic={true}
                   aria-live="polite"
                   className=" css-0"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Please select a valid date.",
+                    }
+                  }
                   data-isinvalid={true}
                   id="invalid-end-helperText"
-                >
-                  Please select a valid date.
-                </div>
+                />
               </div>
             </div>
           </div>
@@ -427,13 +433,20 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
       </div>
     </div>
     <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      data-isinvalid={false}
-      id="invalid-helper-text"
+      className="css-fjhuh4"
     >
-      Note that the Library may be closed on Sundays.
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Note that the Library may be closed on Sundays.",
+          }
+        }
+        data-isinvalid={false}
+        id="invalid-helper-text"
+      />
     </div>
   </fieldset>
 </div>
@@ -536,13 +549,20 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
       </div>
     </div>
     <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      data-isinvalid={false}
-      id="disabled-helper-text"
+      className="css-fjhuh4"
     >
-      Note that the Library may be closed on Sundays.
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Note that the Library may be closed on Sundays.",
+          }
+        }
+        data-isinvalid={false}
+        id="disabled-helper-text"
+      />
     </div>
   </fieldset>
 </div>
@@ -740,11 +760,14 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
               aria-atomic={true}
               aria-live="polite"
               className=" css-0"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Please select a valid date.",
+                }
+              }
               data-isinvalid={true}
               id="invalid-start-helperText"
-            >
-              Please select a valid date.
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -805,11 +828,14 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
               aria-atomic={true}
               aria-live="off"
               className=" css-0"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Note that the Library may be closed on Sundays.",
+                }
+              }
               data-isinvalid={false}
               id="disabled-start-helperText"
-            >
-              Note that the Library may be closed on Sundays.
-            </div>
+            />
           </div>
         </div>
       </div>

package/src/components/Fieldset/Fieldset.stories.mdx

@@ -1,10 +1,10 @@
 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 Fieldset from "./Fieldset";
@@ -20,8 +20,17 @@ import DSProvider from "../../theme/provider";
   }}
   argTypes={{
     children: { table: { disable: true } },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    isLegendHidden: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    optReqFlag: {
+      table: { defaultValue: { summary: false } },
+    },
   }}
 />
 
@@ -30,14 +39,16 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.3`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Fieldset} />
 
 <Canvas withToolbar>
   <Story
-    name="Basic"
+    name="Fieldset"
     args={{
+      className: undefined,
+      id: "fieldset-id",
       isLegendHidden: false,
       isRequired: false,
       legendText: "This is the legend text",
@@ -52,4 +63,4 @@ import DSProvider from "../../theme/provider";
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic" />
+<ArgsTable story="Fieldset" />

package/src/components/Fieldset/Fieldset.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 interface FieldsetProps {
-  /** Children to render. Typically form-related components are used. */
-  children: React.ReactNode;
   /** Additional class name to add. */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
@@ -24,7 +22,7 @@ interface FieldsetProps {
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
  */
-const Fieldset: React.FC<FieldsetProps> = ({
+const Fieldset = ({
   children,
   className,
   id,
@@ -32,7 +30,7 @@ const Fieldset: React.FC<FieldsetProps> = ({
   isRequired = false,
   legendText,
   optReqFlag = true,
-}) => {
+}: React.PropsWithChildren<FieldsetProps>) => {
   const styles = useMultiStyleConfig("Fieldset", { isLegendHidden });
   return (
     <Box as="fieldset" id={id} __css={styles} className={className}>

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>
   //   );