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

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,17 +1,16 @@
 import * as React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 import * as generateUUID from "../../helpers/generateUUID";
 import Checkbox from "./Checkbox";
 
 describe("Checkbox Accessibility", () => {
-  it("passes axe accessibility test", async () => {
+  it("Passes axe accessibility test", async () => {
     const { container } = render(
       <Checkbox
         id="inputID"
-        attributes={{ onClick: jest.fn() }}
         onChange={jest.fn()}
         labelText="Test Label"
         showLabel={false}
@@ -22,204 +21,175 @@ describe("Checkbox Accessibility", () => {
 });
 
 describe("Checkbox", () => {
-  let utils;
   let changeHandler;
-  let clickHander;
   let generateUUIDSpy;
 
   beforeEach(() => {
-    clickHander = jest.fn();
     changeHandler = jest.fn();
     generateUUIDSpy = jest.spyOn(generateUUID, "default");
-    utils = render(
-      <Checkbox
-        id="inputID"
-        attributes={{ onClick: clickHander }}
-        onChange={changeHandler}
-        labelText="Test Label"
-        showLabel={false}
-      />
-    );
+  });
+
+  it("Renders with a checkbox input and label", () => {
+    render(<Checkbox id="inputID" labelText="Test Label" />);
+    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
+    expect(screen.getByRole("checkbox")).toBeInTheDocument();
   });
 
   it("Renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false", () => {
-    const container = utils.container;
-    expect(container.querySelector(".input__checkbox")).toHaveAttribute(
+    render(<Checkbox id="inputID" labelText="Test Label" showLabel={false} />);
+    expect(screen.getByLabelText("Test Label")).toHaveAttribute(
       "aria-label",
       "Test Label"
     );
   });
 
-  it("Renders without crashing", () => {
-    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
-  });
-
-  it("The checkbox element is an input with type='checkbox'", () => {
-    const container = utils.container;
-    expect(container.querySelector(".input__checkbox")).toHaveAttribute(
-      "type",
-      "checkbox"
+  it("Renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false and 'helperText' has been passed", () => {
+    render(
+      <Checkbox
+        id="inputID"
+        labelText="Test Label"
+        showLabel={false}
+        helperText="This is the helper text."
+      />
     );
+    expect(
+      screen.getByLabelText("Test Label - This is the helper text.")
+    ).toBeInTheDocument();
   });
 
-  it("Allows user to pass in additional attributes", () => {
-    expect(clickHander.mock.calls.length).toEqual(0);
-    userEvent.click(screen.getByLabelText("Test Label"));
-    expect(clickHander.mock.calls.length).toEqual(1);
-  });
-
-  it("Changing the value calls the onChange handler", () => {
-    const utils = render(
+  it("Renders visible helper or error text", () => {
+    const { rerender } = render(
       <Checkbox
-        id="onChangeTest"
-        onChange={changeHandler}
-        labelText="onChangeTest Lab"
-        showLabel={true}
-        checked
+        id="inputID"
+        labelText="Test Label"
+        helperText="This is the helper text."
+        errorText="This is the error text :("
       />
     );
+    expect(screen.getByText("This is the helper text.")).toBeVisible();
+    expect(
+      screen.queryByText("This is the error text :(")
+    ).not.toBeInTheDocument();
 
-    expect(changeHandler).toHaveBeenCalledTimes(0);
-    userEvent.type(utils.getByText("onChangeTest Lab"), "Hello");
-    expect(changeHandler).toHaveBeenCalledTimes(1);
-  });
-
-  it("Renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false and 'helperText' has been passed", () => {
-    const utils = render(
+    rerender(
       <Checkbox
-        id="onChangeTest"
-        onChange={changeHandler}
-        labelText="onChangeTest Lab"
-        showLabel={false}
-        helperText="The helper text."
-        checked
+        id="inputID"
+        labelText="Test Label"
+        isInvalid
+        helperText="This is the helper text."
+        errorText="This is the error text :("
       />
     );
-    const container = utils.container;
+    expect(screen.getByText("This is the error text :(")).toBeVisible();
+    expect(
+      screen.queryByText("This is the helper text.")
+    ).not.toBeInTheDocument();
+  });
 
-    expect(container.querySelector(".input__checkbox")).toHaveAttribute(
-      "aria-label",
-      "onChangeTest Lab - The helper text."
-    );
+  it("Sets the checkbox's ID", () => {
+    render(<Checkbox id="inputID" labelText="Test Label" />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("id", "inputID");
   });
 
-  it("Renders with label", () => {
-    const utils = render(
+  it("Calls the UUID generation function if no id prop value is passed", () => {
+    expect(generateUUIDSpy).toHaveBeenCalledTimes(0);
+    render(<Checkbox labelText="Test Label" />);
+    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("Sets the 'checked' attribute", () => {
+    render(
       <Checkbox
-        //add other props here
-        id="test_id"
-        labelText="Hello"
+        id="inputID"
+        labelText="Test Label"
         showLabel={true}
+        isChecked
       />
     );
-    const container = utils.container;
-    expect(utils.getByLabelText("Hello")).toBeInTheDocument();
-    expect(container.querySelector(".input__checkbox")).not.toHaveAttribute(
-      "aria-label"
-    );
-    expect(utils.getByText("Hello")).toHaveAttribute("for", "test_id");
+    expect(screen.getByRole("checkbox")).toHaveAttribute("checked");
   });
 
-  it("Renders with visible helper text", () => {
-    const utils = render(
+  it("Sets the 'disabled' attribute", () => {
+    render(
       <Checkbox
-        //add other props here
-        id="test_id"
-        labelText="Hello"
+        id="inputID"
+        labelText="Test Label"
         showLabel={true}
-        helperText="The helper text."
-        errorText="The error text."
-        errored={false}
+        isDisabled
       />
     );
-    expect(utils.getByText("The helper text.")).toBeInTheDocument();
+    expect(screen.getByRole("checkbox")).toHaveAttribute("disabled");
   });
 
-  it("Renders with visible error text", () => {
-    const utils = render(
+  it("Sets the 'required' attribute", () => {
+    render(
       <Checkbox
-        //add other props here
-        id="test_id"
-        labelText="Hello"
+        id="inputID"
+        labelText="Test Label"
         showLabel={true}
-        helperText="The helper text."
-        errorText="The error text."
-        errored={true}
+        isRequired
       />
     );
-    expect(utils.getByText("The error text.")).toBeInTheDocument();
+    expect(screen.getByRole("checkbox")).toHaveAttribute("required");
   });
 
-  it("Calls a UUID generation method if no ID is passed as a prop", () => {
-    render(<Checkbox labelText="Hello" showLabel={true}></Checkbox>);
-
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it("The 'checked' attribute can be set properly", () => {
-    const onChange = jest.fn();
-    const utils = render(
+  it("Sets the error state", () => {
+    render(
       <Checkbox
         id="inputID-attributes"
-        labelText="Hello"
-        showLabel={false}
-        attributes={{
-          checked: true,
-          "aria-checked": true,
-          onChange,
-        }}
+        labelText="onChange test"
+        showLabel={true}
+        isInvalid
       />
     );
-
-    const container = utils.container;
-    expect(container.querySelector(".input__checkbox")).toHaveAttribute(
-      "checked"
-    );
-    expect(container.querySelector(".input__checkbox")).toHaveAttribute(
-      "aria-checked"
-    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
   });
 
-  // TODO:
-  // it("Passes the ref to the input element", () => {
-  //   const ref = React.createRef<HTMLInputElement>();
-  //   const container = render(
-  //     <Checkbox
-  //       id="inputID-attributes"
-  //       ref={ref}
-  //       labelText="Hello"
-  //       showLabel={false}
-  //     />
-  //   );
-  // });
-
-  it("Renders HTML attributes passed through the `attributes` prop", () => {
-    const onChangeSpy = jest.fn();
-    const onBlurSpy = jest.fn();
+  it("Changing the value calls the onChange handler", () => {
     const utils = render(
       <Checkbox
-        id="inputID-attributes"
-        attributes={{
-          onChange: onChangeSpy,
-          onBlur: onBlurSpy,
-          tabIndex: 0,
-        }}
-        labelText="Hello"
+        id="onChangeTest"
+        onChange={changeHandler}
+        labelText="onChangeTest Lab"
         showLabel={true}
-      ></Checkbox>
+        isChecked
+      />
     );
-    const container = utils.container;
 
-    expect(container.querySelector(".input__checkbox")).toHaveAttribute(
-      "tabIndex",
-      "0"
-    );
+    expect(changeHandler).toHaveBeenCalledTimes(0);
+    userEvent.type(utils.getByText("onChangeTest Lab"), "Hello");
+    expect(changeHandler).toHaveBeenCalledTimes(1);
+  });
 
-    expect(onChangeSpy).toHaveBeenCalledTimes(0);
-    userEvent.type(utils.getByText("Hello"), "Hello");
-    expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    expect(onBlurSpy).toHaveBeenCalledTimes(0);
-    fireEvent.blur(utils.getByLabelText("Hello"));
-    expect(onBlurSpy).toHaveBeenCalledTimes(1);
+  it("Renders the UI snapshot correctly", () => {
+    const primary = renderer
+      .create(<Checkbox id="inputID" labelText="Test Label" />)
+      .toJSON();
+    const isChecked = renderer
+      .create(
+        <Checkbox id="checkbox-checked" labelText="Test Label" isChecked />
+      )
+      .toJSON();
+    const isRequired = renderer
+      .create(
+        <Checkbox id="checkbox-required" labelText="Test Label" isRequired />
+      )
+      .toJSON();
+    const isInvalid = renderer
+      .create(
+        <Checkbox id="checkbox-invalid" labelText="Test Label" isInvalid />
+      )
+      .toJSON();
+    const isDisabled = renderer
+      .create(
+        <Checkbox id="checkbox-disabled" labelText="Test Label" isDisabled />
+      )
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(isChecked).toMatchSnapshot();
+    expect(isRequired).toMatchSnapshot();
+    expect(isInvalid).toMatchSnapshot();
+    expect(isDisabled).toMatchSnapshot();
   });
 });

package/src/components/Checkbox/Checkbox.tsx

@@ -1,36 +1,47 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import {
+  Box,
+  Checkbox as ChakraCheckbox,
+  Icon,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
-import Label from "../Label/Label";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface CheckboxProps {
-  /** The checkbox's label.  This will serve as the text content for a `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
-  labelText: string;
-  /** Additional attributes to pass to the `<input>` tag */
-  attributes?: { [key: string]: any };
-  /** When using the Checkbox as a "controlled" form element, you can specify the Checkbox's checked state using this prop. Learn more about controlled and uncontrolled form fields: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
-  checked?: boolean;
   /** className you can add in addition to 'input' */
   className?: string;
-  /** Adds the 'disabled' prop to the input when true */
-  disabled?: boolean;
-  /** Helper for modifiers array; adds 'errored' styling */
-  errored?: boolean;
-  /** Optional string to populate the HelperErrorText for error state */
+  /** Optional string to populate the HelperErrorText for the error state
+   * when `isInvalid` is true.
+   */
   errorText?: string;
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
+  /** When using the Checkbox as a "controlled" form element, you can specify the
+   * Checkbox's checked state using this prop.
+   * Learn more about controlled and uncontrolled form fields:
+   * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+  isChecked?: boolean;
+  /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+   * This also makes the text italic and color scheme gray.
+   */
+  isDisabled?: boolean;
+  /** Adds the 'aria-invalid' attribute to the input when true. This also makes
+   * the color theme "NYPL error" red for the button and text.
+   */
+  isInvalid?: boolean;
+  /** Adds the 'required' attribute to the input when true. */
+  isRequired?: boolean;
+  /** The checkbox's label.  This will serve as the text content for a `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+  labelText: string;
   /** The name prop indicates into which group of checkboxes this checkbox belongs.  If none is specified, 'default' will be used */
   name?: string;
   /** The action to perform on the `<input>`'s onChange function  */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** Offers the ability to show the checkbox's label onscreen or hide it. Refer to the `labelText` property for more information. */
-  showLabel: boolean;
+  showLabel?: boolean;
   /** Populates the value of the input */
   value?: string;
 }
@@ -39,67 +50,82 @@ export const onChangeDefault = () => {
   return;
 };
 
+function CheckboxIcon(props) {
+  // Don't need the `isChecked` prop but it causes
+  // rendering issues on the SVG element.
+  const { isIndeterminate, isChecked, ...rest } = props;
+
+  const d = isIndeterminate
+    ? "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z"
+    : "M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z";
+
+  return (
+    <Icon viewBox="0 0 24 24" {...rest}>
+      <path fill="currentColor" d={d} />
+    </Icon>
+  );
+}
+
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref?) => {
     const {
-      checked,
       className,
-      disabled,
-      errored,
       errorText,
       helperText,
-      id,
+      id = generateUUID(),
+      isChecked,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
       labelText,
       name,
-      showLabel,
+      showLabel = true,
       value,
     } = props;
 
-    const attributes = props.attributes || {};
-    const modifiers = props.modifiers ? props.modifiers : [];
-    const checkboxID = id || generateUUID();
+    const styles = useMultiStyleConfig("Checkbox", {});
+    const footnote = isInvalid ? errorText : helperText;
+    const attributes = {};
     const onChange = props.onChange || onChangeDefault;
 
-    const footnote = errored ? errorText : helperText;
-
     if (!showLabel) {
       attributes["aria-label"] =
         labelText && footnote ? `${labelText} - ${footnote}` : labelText;
     } else {
-      if (footnote) attributes["aria-describedby"] = `${checkboxID}-helperText`;
-    }
-
-    if (errored) {
-      modifiers.push("error");
+      if (footnote) attributes["aria-describedby"] = `${id}-helperText`;
     }
 
     return (
       <>
-        <input
-          {...(checked !== undefined
+        <ChakraCheckbox
+          id={id}
+          className={className}
+          name={name || "default"}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          ref={ref}
+          value={value}
+          {...(isChecked !== undefined
             ? {
-                checked: checked,
-                onChange: onChange,
+                isChecked,
+                onChange,
               }
             : {
-                defaultChecked: false,
+                defaultIsChecked: false,
               })}
-          className={bem("checkbox", modifiers, "input", [className])}
-          disabled={disabled}
-          id={checkboxID}
-          name={name || "default"}
-          ref={ref}
-          type="checkbox"
-          value={value}
+          icon={<CheckboxIcon />}
+          __css={styles}
           {...attributes}
-        />
-        {labelText && showLabel && (
-          <Label htmlFor={checkboxID}>{labelText}</Label>
-        )}
+        >
+          {showLabel && labelText}
+        </ChakraCheckbox>
         {footnote && showLabel && (
-          <HelperErrorText isError={errored} id={id + `-helperText`}>
-            {footnote}
-          </HelperErrorText>
+          <Box __css={styles.helper} aria-disabled={isDisabled}>
+            <HelperErrorText isError={isInvalid} id={`${id}-helperText`}>
+              {footnote}
+            </HelperErrorText>
+          </Box>
         )}
       </>
     );