@nypl/design-system-react-components 0.23.4 → 0.25.1

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

@@ -1,17 +1,17 @@
 import {
   Meta,
   Story,
-  Canvas,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { VStack } from "@chakra-ui/react";
 
 import TextInput from "./TextInput";
 import { TextInputTypes } from "./TextInputTypes";
-import { action } from "@storybook/addon-actions";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("TextInput")}
@@ -27,6 +27,9 @@ import { getCategory } from "../../utils/componentCategories";
   }}
   argTypes={{
     attributes: { table: { disable: true } },
+    id: { table: { disable: true } },
+    onChange: { table: { disable: true } },
+    value: { table: { disable: true } },
   }}
 />
 
@@ -35,133 +38,130 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.23.2`   |
+| Latest            | `0.25.1`   |
 
 <Description of={TextInput} />
 
-This component renders a text input form element. See below for configuration information. For optimal accessibility, the `labelText` property is a required prop, regardless of the label visibility. Additionally, while the `id` prop is optional, a unique `id` attribute is necessary for accessibility. If the prop is left blank, a value will be generated for you.
+This component renders a text input form element. See below for configuration
+information. For optimal accessibility, the `labelText` property is a required
+prop, regardless of the label visibility. Additionally, while the `id` prop is
+optional, a unique `id` attribute is necessary for accessibility. If the prop
+is left blank, a value will be generated for you.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="TextInput"
     args={{
+      helperText: "Choose wisely.",
       id: "myTextInput",
-      type: TextInputTypes.text,
+      invalidText: "This is error text :(",
+      isDisabled: false,
+      isInvalid: false,
+      isRequired: true,
       labelText: "What is your favorite color?",
-      showLabel: true,
       placeholder: "e.g. blue, green, etc.",
-      helperText: "Choose wisely.",
-      errorText: "Waaaaaaaa!",
-      errored: false,
-      required: true,
-      disabled: false,
-      attributes: {
-        onFocus: action("focus"),
-        onBlur: action("blur"),
-        onChange: action("onChange"),
-        maxLength: 10,
-        tabIndex: 0,
-        autoFocus: true,
-        pattern: "[a-z0-9]",
-      },
+      showLabel: true,
+      showOptReqLabel: true,
+      type: TextInputTypes.text,
     }}
   >
     {(args) => <TextInput {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="TextInput" />
 
 ## Labelling Variations
 
-A TextInput can be rendered with or without visible labels.
-
-<Preview withToolbar>
-  <Story
-    name="Labelling Variations"
-    args={{
-      labelText: "What is your favorite color?",
-      showLabel: false,
-    }}
-  >
-    {(args) => <TextInput {...args} />}
+A TextInput can be rendered with or without visible labels. When `showLabel` is
+set to `false`, an `aria-label` attribute is added to the input/textarea element
+to maintain accessibility. If the component needs to be required, the
+`showOptReqLabel` prop can be used to show or hide the "Required"/"Optional"
+text within the `label` element.
+
+<Canvas withToolbar>
+  <Story name="Labelling Variations">
+    <VStack align="stretch" spacing={12}>
+      <TextInput
+        labelText="What is your favorite color?"
+        placeholder="i.e. blue, green, etc."
+        helperText="Choose wisely!"
+      />
+      <TextInput
+        labelText="What is your favorite color?"
+        placeholder="i.e. blue, green, etc."
+        showLabel={false}
+      />
+      <TextInput
+        labelText="What is your favorite color?"
+        placeholder="i.e. blue, green, etc."
+        isRequired
+      />
+      <TextInput
+        labelText="What is your favorite color?"
+        placeholder="i.e. blue, green, etc."
+        showOptReqLabel={false}
+        isRequired
+      />
+      <TextInput
+        labelText="What is your favorite color?"
+        showLabel={false}
+        placeholder="i.e. blue, green, etc."
+        helperText="Choose wisely!"
+      />
+    </VStack>
   </Story>
-</Preview>
-
-<Canvas>
-  <TextInput labelText="What is your favorite color?" showLabel={true} />
 </Canvas>
 
-<Canvas>
-  <TextInput
-    labelText="What is your favorite color?"
-    showLabel={false}
-    placeholder="i.e. blue, green, etc."
-  />
-</Canvas>
+### Errored
 
 <Canvas>
-  <TextInput
-    labelText="What is your favorite color?"
-    showLabel={true}
-    placeholder="i.e. blue, green, etc."
-  />
+  <DSProvider>
+    <TextInput
+      labelText="What is your favorite color?"
+      placeholder="i.e. blue, green, etc."
+      helperText="Choose wisely!"
+      invalidText="This is error text :("
+      isInvalid
+    />
+  </DSProvider>
 </Canvas>
 
-<Canvas>
-  <TextInput
-    labelText="What is your favorite color?"
-    showLabel={false}
-    placeholder="i.e. blue, green, etc."
-    helperText="Choose wisely!"
-  />
-</Canvas>
+### Disabled
 
 <Canvas>
-  <TextInput
-    labelText="What is your favorite color?"
-    showLabel={true}
-    placeholder="i.e. blue, green, etc."
-    helperText="Choose wisely!"
-  />
-</Canvas>
-
-<Canvas>
-  <TextInput
-    labelText="What is your favorite color?"
-    showLabel={false}
-    placeholder="i.e. blue, green, etc."
-    errorText="Waaaaaa!"
-    errored={true}
-  />
-</Canvas>
-
-<Canvas>
-  <TextInput
-    labelText="What is your favorite color?"
-    showLabel={true}
-    placeholder="i.e. blue, green, etc."
-    errorText="Waaaaaa!"
-    errored={true}
-  />
+  <DSProvider>
+    <TextInput
+      labelText="What is your favorite color?"
+      placeholder="i.e. blue, green, etc."
+      helperText="Choose wisely!"
+      isDisabled
+    />
+  </DSProvider>
 </Canvas>
 
 ## Textarea
 
 The TextInput component includes a multiline `textarea` form field. To render a
-`textarea` element, pass `TextInputTypes.textarea` for the `type` prop.
+`textarea` element, pass `TextInputTypes.textarea` for the `type` prop. All the
+variations described above are available for the `textarea` option.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Textarea"
     args={{
-      type: TextInputTypes.textarea,
+      helperText: "Let it all out.",
+      invalidText: "This is error text :(",
+      isDisabled: false,
+      isInvalid: false,
+      isRequired: true,
       labelText: "In less than 500 words, describe your favorite color?",
-      showLabel: true,
       placeholder: "Essay question...",
-      helperText: "Let it all out.",
+      showLabel: true,
+      showOptReqLabel: true,
+      type: TextInputTypes.textarea,
     }}
   >
     {(args) => <TextInput {...args} />}
   </Story>
-</Preview>
+</Canvas>

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

@@ -1,23 +1,33 @@
 import * as React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
 
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import TextInput from "./TextInput";
 import { TextInputTypes } from "./TextInputTypes";
 import * as generateUUID from "../../helpers/generateUUID";
 
 describe("TextInput Accessibility", () => {
-  it("passes axe accessibility test", async () => {
+  it("passes axe accessibility test for the input element", async () => {
     const { container } = render(
       <TextInput
-        id="myTextInput"
-        labelText="Custom Input Label"
-        required={true}
+        labelText="Custom input label"
+        isRequired
         placeholder="Input Placeholder"
         type={TextInputTypes.text}
-        attributes={{ onFocus: jest.fn() }}
+        onChange={jest.fn()}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test for the textarea element", async () => {
+    const { container } = render(
+      <TextInput
+        labelText="Custom textarea label"
+        isRequired
+        placeholder="Input Placeholder"
+        type={TextInputTypes.textarea}
         onChange={jest.fn()}
       />
     );
@@ -26,17 +36,18 @@ describe("TextInput Accessibility", () => {
 });
 
 describe("TextInput", () => {
+  let utils;
   let changeHandler;
   let focusHandler;
 
   beforeEach(() => {
     focusHandler = jest.fn();
     changeHandler = jest.fn();
-    render(
+    utils = render(
       <TextInput
         id="myTextInput"
         labelText="Custom Input Label"
-        required={true}
+        isRequired
         placeholder="Input Placeholder"
         type={TextInputTypes.text}
         attributes={{ onFocus: focusHandler }}
@@ -45,40 +56,80 @@ describe("TextInput", () => {
     );
   });
 
-  it("Renders an input element", () => {
+  it("renders an input element", () => {
     expect(screen.getByLabelText(/Custom Input Label/i)).toBeInTheDocument();
   });
 
-  it("Renders label with label text", () => {
+  it("renders label with label text", () => {
+    expect(screen.getByText("Custom Input Label")).toBeInTheDocument();
+  });
+
+  it("renders 'Required' along with the label text", () => {
+    expect(screen.getByText("Custom Input Label")).toBeInTheDocument();
+    expect(screen.getByText(/Required/i)).toBeInTheDocument();
+  });
+
+  it("renders 'Optional' along with the label text", () => {
+    utils.rerender(
+      <TextInput
+        id="myTextInput"
+        labelText="Custom Input Label"
+        isRequired={false}
+        placeholder="Input Placeholder"
+        type={TextInputTypes.text}
+        attributes={{ onFocus: focusHandler }}
+        onChange={changeHandler}
+      />
+    );
+
     expect(screen.getByText("Custom Input Label")).toBeInTheDocument();
+    expect(screen.getByText(/Optional/i)).toBeInTheDocument();
   });
 
-  it("Renders label's `for` attribute pointing at ID from input", () => {
+  it("does not render 'Required' along with the label text", () => {
+    utils.rerender(
+      <TextInput
+        id="myTextInput"
+        labelText="Custom Input Label"
+        isRequired
+        showOptReqLabel={false}
+        placeholder="Input Placeholder"
+        type={TextInputTypes.text}
+        attributes={{ onFocus: focusHandler }}
+        onChange={changeHandler}
+      />
+    );
+
+    expect(screen.getByText("Custom Input Label")).toBeInTheDocument();
+    expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
+  });
+
+  it("renders label's `for` attribute pointing at ID from input", () => {
     expect(screen.getByText(/Custom Input Label/i)).toHaveAttribute(
       "for",
       "myTextInput"
     );
   });
 
-  it("Renders placeholder text", () => {
+  it("renders placeholder text", () => {
     expect(
       screen.getByPlaceholderText("Input Placeholder")
     ).toBeInTheDocument();
   });
 
-  it("Adds aria-required prop if input is required", () => {
+  it("adds aria-required prop if input is required", () => {
     expect(screen.getByLabelText(/Custom Input Label/i)).toHaveAttribute(
       "aria-required"
     );
   });
 
-  it("Allows user to pass in additional attributes", () => {
+  it("allows user to pass in additional attributes", () => {
     expect(focusHandler).toHaveBeenCalledTimes(0);
     fireEvent.focus(screen.getByLabelText(/Custom Input Label/i));
     expect(focusHandler).toHaveBeenCalledTimes(1);
   });
 
-  it("Changing the value calls the onChange handler", () => {
+  it("changing the value calls the onChange handler", () => {
     expect(changeHandler).toHaveBeenCalledTimes(0);
     userEvent.type(screen.getByLabelText(/Custom Input Label/i), "Hello");
     // Called 5 times because "Hello" has length of 5.
@@ -96,43 +147,36 @@ describe("Renders TextInput with auto-generated ID, hidden label and visible hel
         labelText="Custom Input Label"
         showLabel={false}
         helperText="Custom Helper Text"
-        required={true}
+        isRequired
         placeholder="Input Placeholder"
         type={TextInputTypes.text}
       />
     );
   });
 
-  it("Renders Input component", () => {
+  it("renders Input component", () => {
     expect(screen.getByLabelText(/Custom Input Label/i)).toBeInTheDocument();
   });
 
-  it("Calls a UUID generation method if no ID is passed as a prop", () => {
+  it("calls a UUID generation method if no ID is passed as a prop", () => {
     // Called twice for the `TextInput` and the SVG icon components.
     expect(generateUUIDSpy).toHaveBeenCalledTimes(2);
   });
 
-  it("Does not renders Label component", () => {
+  it("does not renders Label component", () => {
     expect(screen.queryByText(/Custom Input Label/i)).not.toBeInTheDocument();
   });
 
-  it("Renders custom aria-label", () => {
+  it("renders custom aria-label", () => {
     expect(screen.getByLabelText(/Custom Input Label/i)).toHaveAttribute(
       "aria-label",
-      "Custom Input Label"
+      "Custom Input Label - Custom Helper Text"
     );
   });
 
-  it("Renders HelperErrorText component", () => {
+  it("renders HelperErrorText component", () => {
     expect(screen.getByText("Custom Helper Text")).toBeInTheDocument();
   });
-
-  it("Renders aria-describedby with helper text", () => {
-    expect(screen.getByLabelText(/Custom Input Label/i)).toHaveAttribute(
-      "aria-describedby",
-      "Custom Helper Text"
-    );
-  });
 });
 
 describe("TextInput shows error state", () => {
@@ -142,73 +186,34 @@ describe("TextInput shows error state", () => {
         id="myTextInputError"
         labelText="Custom Input Label"
         helperText="Custom Helper Text"
-        errorText="Custom Error Text"
+        invalidText="Custom Error Text"
         placeholder="Input Placeholder"
-        errored={true}
+        isInvalid={true}
         type={TextInputTypes.text}
       />
     );
   });
 
-  it("Renders Input component", () => {
+  it("renders Input component", () => {
     expect(screen.getByLabelText(/Custom Input Label/i)).toBeInTheDocument();
   });
 
-  it("Renders Label component", () => {
+  it("renders Label component", () => {
     expect(screen.getByText(/Custom Input Label/i)).toBeInTheDocument();
   });
 
-  it("Renders HelperErrorText component", () => {
+  it("renders HelperErrorText component", () => {
     expect(screen.queryByText("Custom Helper Text")).not.toBeInTheDocument();
     expect(screen.getByText("Custom Error Text")).toBeInTheDocument();
   });
 
-  it("Input shows error state", () => {
+  it("input shows error state", () => {
     expect(screen.getByLabelText(/Custom Input Label/i)).toHaveAttribute(
-      "class",
-      "inputfield inputfield--error "
+      "aria-invalid"
     );
   });
 });
 
-describe("TextInput Group", () => {
-  beforeEach(() => {
-    render(
-      <fieldset>
-        <legend>Input Group Label Legend</legend>
-
-        <TextInput
-          id="input1"
-          required={true}
-          type={TextInputTypes.text}
-          labelText="For"
-          helperText="Input 1 Helper Text"
-        />
-
-        <TextInput
-          id="input2"
-          required={true}
-          type={TextInputTypes.text}
-          labelText="To"
-          helperText="Input 2 Helper Text"
-        />
-
-        <HelperErrorText isError={true} id={"sharedHelperText"}>
-          Additional Error Text
-        </HelperErrorText>
-      </fieldset>
-    );
-  });
-
-  it("Renders legend", () => {
-    expect(screen.getByText("Input Group Label Legend")).toBeInTheDocument();
-  });
-
-  it("Renders two inputs", () => {
-    expect(screen.getAllByRole("textbox")).toHaveLength(2);
-  });
-});
-
 describe("Renders HTML attributes passed through the `attributes` prop", () => {
   const onChangeSpy = jest.fn();
   const onBlurSpy = jest.fn();
@@ -229,27 +234,27 @@ describe("Renders HTML attributes passed through the `attributes` prop", () => {
     );
   });
 
-  it("Has a maxlength for the input element", () => {
+  it("has a maxlength for the input element", () => {
     expect(screen.getByLabelText(/Input Label/i)).toHaveAttribute(
       "maxLength",
       "10"
     );
   });
 
-  it("Has a tabIndex", () => {
+  it("has a tabIndex", () => {
     expect(screen.getByLabelText(/Input Label/i)).toHaveAttribute(
       "tabIndex",
       "0"
     );
   });
 
-  it("Calls the onChange function", () => {
+  it("calls the onChange function", () => {
     expect(onChangeSpy).toHaveBeenCalledTimes(0);
     userEvent.type(screen.getByLabelText(/Input Label/i), "Hello");
     expect(onChangeSpy).toHaveBeenCalledTimes(5);
   });
 
-  it("Calls the onBlur function", () => {
+  it("calls the onBlur function", () => {
     expect(onBlurSpy).toHaveBeenCalledTimes(0);
     fireEvent.blur(screen.getByLabelText(/Input Label/i));
     expect(onBlurSpy).toHaveBeenCalledTimes(1);
@@ -288,7 +293,7 @@ describe("Renders HTML attributes passed through the `attributes` prop", () => {
 // });
 
 describe("Hidden input", () => {
-  it("Renders a hidden type input", () => {
+  it("renders a hidden type input", () => {
     const utils = render(
       <TextInput
         id="inputID-hidden"
@@ -306,6 +311,21 @@ describe("Hidden input", () => {
       "hidden"
     );
   });
+
+  it("does not show the helper text", () => {
+    render(
+      <TextInput
+        id="inputID-hidden"
+        labelText="Hidden Input Label"
+        helperText="Helper Text"
+        type={TextInputTypes.hidden}
+        value="hidden"
+      />
+    );
+
+    expect(screen.queryByText("Hidden Input Label")).not.toBeInTheDocument();
+    expect(screen.queryByText("Helper Text")).not.toBeInTheDocument();
+  });
 });
 
 describe("Textarea element type", () => {
@@ -320,11 +340,11 @@ describe("Textarea element type", () => {
     );
   });
 
-  it("Renders a textarea element", () => {
+  it("renders a textarea element", () => {
     expect(screen.getByRole("textbox")).toBeInTheDocument();
   });
 
-  it("Renders label with label text", () => {
+  it("renders label with label text", () => {
     expect(screen.getByLabelText(/Custom textarea Label/i)).toBeInTheDocument();
   });
 });