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

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

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComponentWrapper Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="id-heading"
+  >
+    heading text
+  </h2>
+  <p
+    className="chakra-text css-0"
+  >
+    description text
+  </p>
+  <div>
+    children elements
+  </div>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="off"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "helper text",
+        }
+      }
+      data-isinvalid={false}
+      id="id-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`ComponentWrapper Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <div>
+    children elements
+  </div>
+</div>
+`;
+
+exports[`ComponentWrapper Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="id-heading"
+  >
+    heading text
+  </h2>
+  <p
+    className="chakra-text css-0"
+  >
+    description text
+  </p>
+  <div>
+    children elements
+  </div>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="polite"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "invalid text",
+        }
+      }
+      data-isinvalid={true}
+      id="id-helperText"
+    />
+  </div>
+</div>
+`;

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.10`  |
 
 <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

@@ -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);
     });
 
@@ -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
@@ -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();
@@ -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

@@ -4,8 +4,10 @@ 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 TextInput, {
   InputProps,
   TextInputRefType,
@@ -14,8 +16,7 @@ import generateUUID from "../../helpers/generateUUID";
 import { useMultiStyleConfig } from "@chakra-ui/system";
 
 // 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 +75,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 +87,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 +216,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 +416,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 } },
+    },
   }}
 />
 
@@ -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}>