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

package/src/components/TextInput/TextInput.stories.mdx

@@ -1,17 +1,23 @@
+import { VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { VStack } from "@chakra-ui/react";
 
 import TextInput from "./TextInput";
-import { TextInputTypes } from "./TextInputTypes";
+import { TextInputTypes, TextInputVariants } from "./TextInputTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  TextInputTypes,
+  "TextInputTypes"
+);
 
 <Meta
   title={getCategory("TextInput")}
@@ -20,16 +26,33 @@ import DSProvider from "../../theme/provider";
   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: ["TextInput.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
-    id: { table: { disable: true } },
-    onChange: { table: { disable: true } },
-    value: { table: { disable: true } },
+    attributes: { control: false },
+    id: { control: false },
+    isDisabled: { table: { defaultValue: { summary: false } } },
+    isInvalid: { table: { defaultValue: { summary: false } } },
+    isRequired: { table: { defaultValue: { summary: false } } },
+    key: { table: { disable: true } },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    showHelperInvalidText: { table: { defaultValue: { summary: true } } },
+    showLabel: { table: { defaultValue: { summary: true } } },
+    showOptReqLabel: { table: { defaultValue: { summary: true } } },
+    step: { table: { defaultValue: { summary: 1 } } },
+    type: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "TextInputTypes.text" } },
+      options: enumValues.options,
+    },
+    value: { control: false },
+    variantType: {
+      control: false,
+      table: { defaultValue: { summary: "TextInputVariants.Default" } },
+    },
   }}
 />
 
@@ -38,7 +61,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.9`   |
 
 <Description of={TextInput} />
 
@@ -50,26 +73,36 @@ is left blank, a value will be generated for you.
 
 <Canvas withToolbar>
   <Story
-    name="TextInput"
+    name="TextInput with Controls"
     args={{
+      additionalStyles: undefined,
+      attributes: undefined,
+      className: undefined,
+      defaultValue: undefined,
       helperText: "Choose wisely.",
-      id: "myTextInput",
+      id: "textInput-id",
       invalidText: "This is error text :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: true,
       labelText: "What is your favorite color?",
+      name: undefined,
+      onChange: undefined,
       placeholder: "e.g. blue, green, etc.",
+      showHelperInvalidText: true,
       showLabel: true,
       showOptReqLabel: true,
-      type: TextInputTypes.text,
+      step: 1,
+      type: "TextInputTypes.text",
+      value: undefined,
+      variantType: TextInputVariants.Default,
     }}
   >
-    {(args) => <TextInput {...args} />}
+    {(args) => <TextInput {...args} type={enumValues.getValue(args.type)} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="TextInput" />
+<ArgsTable story="TextInput with Controls" />
 
 ## Labelling Variations
 
@@ -140,6 +173,36 @@ text within the `label` element.
   </DSProvider>
 </Canvas>
 
+## HTML in Helper Text
+
+HTML can be passed into the `helperText` prop as a string or HTML.
+
+```jsx
+helperText="Choose <b>wisely!</b>"
+// or
+helperText={<>Choose <b>wisely!</b></>}
+```
+
+<Canvas>
+  <DSProvider>
+    <TextInput
+      labelText="What is your favorite color?"
+      placeholder="i.e. blue, green, etc."
+      helperText="Choose <b>wisely!</b>"
+    />
+    <br />
+    <TextInput
+      labelText="What is your favorite color?"
+      placeholder="i.e. blue, green, etc."
+      helperText={
+        <>
+          Choose <b>wisely!</b>
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
 ## Textarea
 
 The TextInput component includes a multiline `textarea` form field. To render a
@@ -161,6 +224,10 @@ variations described above are available for the `textarea` option.
       showOptReqLabel: true,
       type: TextInputTypes.textarea,
     }}
+    argTypes={{
+      type: { control: false },
+      variantType: { control: false },
+    }}
   >
     {(args) => <TextInput {...args} />}
   </Story>

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>
+`;