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

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

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import ComponentWrapper from "./ComponentWrapper";
+
+/**
+ * @NOTE while the component is accessible, whatever is passed as children
+ * elements may not be considered accessible. This is up to the developer to
+ * make sure to pass accessible elements.
+ */
+describe("ComponentWrapper Accessibility", () => {
+  it("Passes axe accessibility test", async () => {
+    const { container } = render(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={false}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("Passes axe accessibility test without certain props", async () => {
+    const { container } = render(
+      <ComponentWrapper id="id">
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("ComponentWrapper", () => {
+  it("renders with different text sections and children elements", () => {
+    render(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={false}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.getByText("description text")).toBeInTheDocument();
+    expect(screen.getByText("heading text")).toBeInTheDocument();
+    expect(screen.getByText("helper text")).toBeInTheDocument();
+    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
+    expect(screen.getByText("children elements")).toBeInTheDocument();
+  });
+
+  it("renders with only its children elements", () => {
+    render(
+      <ComponentWrapper id="id">
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.queryByText("description text")).not.toBeInTheDocument();
+    expect(screen.queryByText("heading text")).not.toBeInTheDocument();
+    expect(screen.queryByText("helper text")).not.toBeInTheDocument();
+    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
+    expect(screen.getByText("children elements")).toBeInTheDocument();
+  });
+
+  it("renders invalid text in the internal HelperErrorText component", () => {
+    const { rerender } = render(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={false}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.getByText("helper text")).toBeInTheDocument();
+    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
+
+    rerender(
+      <ComponentWrapper
+        descriptionText="description text"
+        headingText="heading text"
+        helperText="helper text"
+        id="id"
+        invalidText="invalid text"
+        isInvalid={true}
+      >
+        <div>children elements</div>
+      </ComponentWrapper>
+    );
+
+    expect(screen.queryByText("helper text")).not.toBeInTheDocument();
+    expect(screen.getByText("invalid text")).toBeInTheDocument();
+  });
+
+  it("Renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <ComponentWrapper
+          descriptionText="description text"
+          headingText="heading text"
+          helperText="helper text"
+          id="id"
+          invalidText="invalid text"
+          isInvalid={false}
+        >
+          <div>children elements</div>
+        </ComponentWrapper>
+      )
+      .toJSON();
+    const onlyWithChildren = renderer
+      .create(
+        <ComponentWrapper id="id">
+          <div>children elements</div>
+        </ComponentWrapper>
+      )
+      .toJSON();
+    const isInvalid = renderer
+      .create(
+        <ComponentWrapper
+          descriptionText="description text"
+          headingText="heading text"
+          helperText="helper text"
+          id="id"
+          invalidText="invalid text"
+          isInvalid={true}
+        >
+          <div>children elements</div>
+        </ComponentWrapper>
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(onlyWithChildren).toMatchSnapshot();
+    expect(isInvalid).toMatchSnapshot();
+  });
+});

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -1,22 +1,30 @@
-import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
-import generateUUID from "../../helpers/generateUUID";
+import * as React from "react";
+
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import Text from "../Text/Text";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface ComponentWrapperProps {
   /** The UI elements that will be wrapped by this component */
   children: React.ReactNode;
-  /** Optional string to set the text for a video description */
+  /** Optional string to set the text for the component's description */
   descriptionText?: string;
   /** Optional string to set the text for a `Heading` component */
   headingText?: string;
   /** Optional string to set the text for a `HelperErrorText` component */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
+  /** Optional string to populate the `HelperErrorText` for the error state
+   * when `isInvalid` is true. */
+  invalidText?: HelperErrorTextType;
+  /** Sets invalid text in the error state. */
+  isInvalid?: boolean;
 }
 
 function ComponentWrapper(
@@ -28,34 +36,39 @@ function ComponentWrapper(
     headingText,
     helperText,
     id = generateUUID(),
+    invalidText,
+    isInvalid = false,
   } = props;
   const hasChildren = !!children;
   const styles = useMultiStyleConfig("ComponentWrapper", { hasChildren });
+  const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
 
+  // Note: Typescript warns when there are no children passed and
+  // doesn't compile. This is meant to log in non-Typescript apps.
   if (!hasChildren) {
-    console.warn("Component Wrapper has no children.");
+    console.warn("`ComponentWrapper` has no children.");
   }
 
   return (
     <Box __css={styles}>
-      <>
-        {headingText && (
-          <Heading
-            id={`${id}-heading`}
-            level={HeadingLevels.Two}
-            text={headingText}
+      {headingText && (
+        <Heading
+          id={`${id}-heading`}
+          level={HeadingLevels.Two}
+          text={headingText}
+        />
+      )}
+      {descriptionText && <Text>{descriptionText}</Text>}
+      {children}
+      {footnote && (
+        <Box __css={styles.helperText}>
+          <HelperErrorText
+            id={`${id}-helperText`}
+            isInvalid={isInvalid}
+            text={footnote}
           />
-        )}
-        {descriptionText && <Text>{descriptionText}</Text>}
-        {children}
-        {helperText && (
-          <Box __css={styles.helperText}>
-            <HelperErrorText id={`${id}-helperText`} isInvalid={false}>
-              {helperText}
-            </HelperErrorText>
-          </Box>
-        )}
-      </>
+        </Box>
+      )}
     </Box>
   );
 }

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.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.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>
 `;
@@ -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>
@@ -805,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" />