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

package/src/components/DatePicker/DatePicker.stories.mdx

@@ -1,16 +1,22 @@
 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 DatePicker from "./DatePicker";
 import { DatePickerTypes } from "./DatePickerTypes";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  DatePickerTypes,
+  "DatePickerTypes"
+);
 
 <Meta
   title={getCategory("DatePicker")}
@@ -19,18 +25,51 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11689%3A0",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11689%3A0",
     },
     jest: ["DatePicker.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
-    nameFrom: { table: { disable: true } },
-    nameTo: { table: { disable: true } },
-    onChange: { table: { disable: true } },
-    refTo: { table: { disable: true } },
+    className: { control: false },
+    dateFormat: {
+      table: { defaultValue: { summary: "yyyy-MM-dd" } },
+    },
+    dateType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "DatePickerTypes.Full" } },
+      options: enumValues.options,
+    },
+    id: { control: false },
+    isDateRange: {
+      table: { defaultValue: { summary: false } },
+    },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    key: { table: { disable: true } },
+    labelText: {
+      table: { defaultValue: { summary: "From" } },
+    },
+    nameFrom: { control: false },
+    nameTo: { control: false },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    refTo: { control: false },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: true } },
+    },
+    showOptReqLabel: {
+      table: { defaultValue: { summary: true } },
+    },
   }}
 />
 
@@ -39,7 +78,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.9`   |
 
 <Description of={DatePicker} />
 
@@ -49,13 +88,15 @@ also be added through props.
 
 <Canvas withToolbar>
   <Story
-    name="DatePicker"
+    name="DatePicker with Controls"
     args={{
+      className: undefined,
       dateFormat: "yyyy-MM-dd",
-      dateType: DatePickerTypes.Full,
+      dateType: "DatePickerTypes.Full",
       helperText: "Note that the Library may be closed on Sundays.",
       helperTextFrom: "Select start date.",
       helperTextTo: "Select end date.",
+      id: "datePicker-id",
       initialDate: "1/1/2021",
       initialDateTo: "1/30/2021",
       invalidText: "Please select a valid date.",
@@ -68,16 +109,20 @@ also be added through props.
       minDate: "1/1/2021",
       nameFrom: "visit-dates-from",
       nameTo: "visit-dates-to",
+      onChange: undefined,
+      refTo: undefined,
       showHelperInvalidText: true,
       showLabel: true,
       showOptReqLabel: true,
     }}
   >
-    {(args) => <DatePicker id="visit-dates" {...args} />}
+    {(args) => (
+      <DatePicker {...args} dateType={enumValues.getValue(args.dateType)} />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="DatePicker" />
+<ArgsTable story="DatePicker with Controls" />
 
 ## Date Range
 

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

@@ -368,7 +368,7 @@ describe("DatePicker", () => {
     // Note: Have to add an initial date so that the snapshot tests always
     // pass. Otherwise, it'll use the _current_ date which changes
     // based on the day it is tested and is not what we want.
-    it.skip("renders the UI snapshot correctly", () => {
+    it("renders the UI snapshot correctly", () => {
       const basic = renderer
         .create(
           <DatePicker
@@ -805,10 +805,12 @@ describe("DatePicker", () => {
       const input = screen.getByLabelText(
         /Select the year you want to visit NYPL/i
       );
-      const [year] = getTodaysValues();
+      const mockYear = 2021;
 
       expect(
-        screen.queryByText(`${(year as any) - 4} - ${(year as any) + 7}`)
+        screen.queryByText(
+          `${(mockYear as any) - 4} - ${(mockYear as any) + 7}`
+        )
       ).not.toBeInTheDocument();
 
       userEvent.click(input);
@@ -817,16 +819,16 @@ describe("DatePicker", () => {
       // before the current year to seven years after the current year. For year
       // 2021, it will display 2017 - 2028.
       expect(
-        screen.getByText(`${(year as any) - 4} - ${(year as any) + 7}`)
+        screen.getByText(`${(mockYear as any) - 4} - ${(mockYear as any) + 7}`)
       ).toBeInTheDocument();
       // This calendar displays 12 years to select from.
       // It should display the four previous years from the current year.
       for (let i = 4; i > 0; i--) {
-        expect(screen.getByText((year as any) - i)).toBeInTheDocument();
+        expect(screen.getByText((mockYear as any) - i)).toBeInTheDocument();
       }
       // It should display the eight next years from the current year.
       for (let i = 0; i < 8; i++) {
-        expect(screen.getByText((year as any) + i)).toBeInTheDocument();
+        expect(screen.getByText((mockYear as any) + i)).toBeInTheDocument();
       }
     });
 

package/src/components/DatePicker/DatePicker.tsx

@@ -5,7 +5,9 @@ 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 HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import TextInput, {
   InputProps,
   TextInputRefType,
@@ -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. */
@@ -415,9 +417,11 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
           )}
         </DateRangeRow>
         {helperText && isDateRange && showHelperInvalidText && (
-          <HelperErrorText id={`${id}-helper-text`} isInvalid={false}>
-            {helperText}
-          </HelperErrorText>
+          <HelperErrorText
+            id={`${id}-helper-text`}
+            isInvalid={false}
+            text={helperText}
+          />
         )}
       </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>
@@ -430,11 +436,14 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
       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"
-    >
-      Note that the Library may be closed on Sundays.
-    </div>
+    />
   </fieldset>
 </div>
 `;
@@ -539,11 +548,14 @@ exports[`DatePicker Date Range 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-helper-text"
-    >
-      Note that the Library may be closed on Sundays.
-    </div>
+    />
   </fieldset>
 </div>
 `;
@@ -587,6 +599,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 1`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988-01-02"
           />
@@ -625,12 +638,9 @@ exports[`DatePicker Single input renders the UI snapshot correctly 2`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
-<<<<<<< HEAD
-            value="2021-11-17"
-=======
             value="1988-01-02"
->>>>>>> development
           />
         </div>
       </div>
@@ -678,6 +688,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 3`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988/02/01"
           />
@@ -729,6 +740,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988-01-02"
           />
@@ -740,11 +752,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>
@@ -793,6 +808,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
             onClick={[Function]}
             onFocus={[Function]}
             required={false}
+            step={null}
             type="text"
             value="1988-01-02"
           />
@@ -804,11 +820,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 } },
+    },
   }}
 />
 
@@ -36,8 +45,10 @@ import DSProvider from "../../theme/provider";
 
 <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/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 = {};