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

package/src/components/TextInput/TextInput.test.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 import userEvent from "@testing-library/user-event";
 
 import TextInput from "./TextInput";
@@ -368,3 +369,98 @@ describe("Textarea element type", () => {
     expect(screen.getByLabelText(/Custom textarea Label/i)).toBeInTheDocument();
   });
 });
+
+describe("UI Snapshots", () => {
+  it("renders the text input UI snapshot correctly", () => {
+    const required = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const optional = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const hiddenLabelText = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          showLabel={false}
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const withHelperText = renderer
+      .create(
+        <TextInput
+          helperText="Custom helper text"
+          id="myTextInput"
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const errorState = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isInvalid
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+    const disabledState = renderer
+      .create(
+        <TextInput
+          id="myTextInput"
+          isDisabled
+          isRequired
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type={TextInputTypes.text}
+        />
+      )
+      .toJSON();
+
+    expect(required).toMatchSnapshot();
+    expect(optional).toMatchSnapshot();
+    expect(hiddenLabelText).toMatchSnapshot();
+    expect(withHelperText).toMatchSnapshot();
+    expect(errorState).toMatchSnapshot();
+    expect(disabledState).toMatchSnapshot();
+  });
+  it("renders the textarea UI snapshot correctly", () => {
+    const basicTextarea = renderer
+      .create(
+        <TextInput
+          id="myTextarea"
+          labelText="Custom textarea Label"
+          placeholder="Textarea Placeholder"
+          type={TextInputTypes.textarea}
+        />
+      )
+      .toJSON();
+
+    expect(basicTextarea).toMatchSnapshot();
+  });
+});

package/src/components/TextInput/TextInput.tsx

@@ -12,7 +12,9 @@ import {
   TextInputVariants,
 } from "./TextInputTypes";
 import Label from "../Label/Label";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface InputProps {
@@ -25,11 +27,11 @@ export interface InputProps {
   /** The starting value of the input field. */
   defaultValue?: string;
   /** Populates the HelperErrorText for the standard state */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Populates the HelperErrorText for the error state */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** Adds the `disabled` and `aria-disabled` prop to the input when true */
   isDisabled?: boolean;
   /** Adds errored styling to the input/textarea and helper text elements */
@@ -63,7 +65,7 @@ export interface InputProps {
   type?: TextInputTypes;
   /** Populates the value of the input/textarea elements */
   value?: string;
-  /** The variant to display. */
+  /** FOR INTERNAL DS USE ONLY: the input variant to display. */
   variantType?: TextInputVariants;
 }
 
@@ -111,7 +113,7 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
     const finalInvalidText = invalidText
       ? invalidText
       : "There is an error related to this field.";
-    let footnote: string | React.ReactNode = isInvalid
+    let footnote: HelperErrorTextType = isInvalid
       ? finalInvalidText
       : helperText;
     let fieldOutput;
@@ -184,9 +186,11 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
         {fieldOutput}
         {footnote && showHelperInvalidText && !isHidden && (
           <Box __css={finalStyles.helper} aria-disabled={isDisabled}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </Box>

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

@@ -0,0 +1,240 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <input
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={false}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <input
+    aria-label="Custom Input Label"
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-describedby="myTextInput-helperText"
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="off"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Custom helper text",
+        }
+      }
+      data-isinvalid={false}
+      id="myTextInput-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-invalid={true}
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={false}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="polite"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "There is an error related to this field.",
+        }
+      }
+      data-isinvalid={true}
+      id="myTextInput-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 6`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextInput"
+    id="myTextInput-label"
+  >
+    Custom Input Label
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <input
+    aria-required={true}
+    className="chakra-input css-0"
+    disabled={true}
+    id="myTextInput"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Input Placeholder"
+    required={true}
+    step={null}
+    type="text"
+  />
+</div>
+`;
+
+exports[`UI Snapshots renders the textarea UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="myTextarea"
+    id="myTextarea-label"
+  >
+    Custom textarea Label
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <textarea
+    className="chakra-textarea css-0"
+    disabled={false}
+    id="myTextarea"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    placeholder="Textarea Placeholder"
+    required={false}
+    step={null}
+  />
+</div>
+`;

package/src/components/Toggle/Toggle.stories.mdx

@@ -1,18 +1,25 @@
+import { HStack, VStack, Grid, Box } from "@chakra-ui/react";
 import {
   Meta,
   Story,
   Canvas,
   ArgsTable,
   Description,
-} from "@storybook/addon-docs/blocks";
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { HStack, VStack, Grid, Box } from "@chakra-ui/react";
+
 import Heading from "../Heading/Heading";
 import SimpleGrid from "../Grid/SimpleGrid";
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
 import Toggle from "./Toggle";
 import { ToggleSizes } from "./ToggleSizes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const sizeEnumValues = getStorybookEnumValues(
+  ToggleSizes,
+  "ToggleSizes"
+);
 
 <Meta
   title={getCategory("Toggle")}
@@ -26,8 +33,20 @@ import { ToggleSizes } from "./ToggleSizes";
     jest: ["Toggle.test.tsx"],
   }}
   argTypes={{
+    additionalStyles: { control: false },
+    defaultChecked: { control: false },
     id: { control: false },
-    className: { control: false },
+    key: { table: { disable: true } },
+    name: { control: false },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    size: {
+      control: {
+        type: "select",
+        table: { defaultValue: { summary: "ToggleSizes.Large" } },
+        options: sizeEnumValues.options,
+      },
+    },
   }}
 />
 
@@ -36,7 +55,7 @@ import { ToggleSizes } from "./ToggleSizes";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.8`   |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Toggle} />
 
@@ -52,17 +71,22 @@ The Toggle component label should clarify the action being performed. Labels sho
   <Story
     name="Toggle"
     args={{
-      labelText: "Test Label",
-      size: "large",
+      additionalStyles: undefined,
       defaultChecked: false,
       helperText: "This is the helper text!",
+      id: "toggle-1",
       invalidText: "",
+      isChecked: undefined,
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
+      labelText: "Test Label",
+      name: "toggle-1",
+      onChange: undefined,
+      size: "ToogleSizes.Large",
     }}
   >
-    {(args) => <Toggle {...args} />}
+    {(args) => <Toggle {...args} size={sizeEnumValues.getValue(args.size)} />}
   </Story>
 </Canvas>
 

package/src/components/Toggle/Toggle.tsx

@@ -1,13 +1,16 @@
-import * as React from "react";
 import {
   Box,
   Switch,
   useMultiStyleConfig,
   useStyleConfig,
 } from "@chakra-ui/react";
-import generateUUID from "../../helpers/generateUUID";
+import * as React from "react";
+
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import { ToggleSizes } from "./ToggleSizes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface ToggleProps {
   /** Optionally pass in additional Chakra-based styles. */
@@ -16,12 +19,12 @@ export interface ToggleProps {
    *   If true, the toggle will be initially set to the "on" position. */
   defaultChecked?: boolean;
   /** Optional string to populate the HelperErrorText for standard state */
-  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?: string;
+  invalidText?: HelperErrorTextType;
   /** When using the Toggle as a "controlled" form element, you can specify
    * the Toggle's checked state using this prop.
    * Learn more about controlled and uncontrolled form fields:
@@ -71,7 +74,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
       onChange = onChangeDefault,
       size = ToggleSizes.Large,
     } = props;
-    const footnote = isInvalid ? invalidText : helperText;
+    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const ariaAttributes = {};
     const styles = useMultiStyleConfig("Toggle", {});
     const switchStyles = useStyleConfig("Switch");
@@ -105,9 +108,11 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
         </Box>
         {footnote && (
           <Box __css={styles.helper}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </>

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

@@ -5,7 +5,7 @@ exports[`Toggle Renders the UI snapshot correctly 1`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     onClick={[Function]}
   >
     <input
@@ -66,7 +66,7 @@ exports[`Toggle Renders the UI snapshot correctly 2`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     data-checked=""
     onClick={[Function]}
   >
@@ -131,7 +131,7 @@ exports[`Toggle Renders the UI snapshot correctly 3`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     data-invalid=""
     onClick={[Function]}
   >
@@ -195,7 +195,7 @@ exports[`Toggle Renders the UI snapshot correctly 4`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     data-disabled=""
     onClick={[Function]}
   >