@nypl/design-system-react-components 1.0.1 → 1.0.2

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

@@ -0,0 +1,350 @@
+import { Flex, Spacer } from "@chakra-ui/react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Checkbox from "./Checkbox";
+
+describe("Checkbox Accessibility", () => {
+  it("passes axe accessibility test with string label", async () => {
+    const { container } = render(
+      <Checkbox
+        id="inputID"
+        onChange={jest.fn()}
+        labelText="Test Label"
+        showLabel={false}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test with jsx label", async () => {
+    const { container } = render(
+      <Checkbox
+        id="jsxLabel"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        value="arts"
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Checkbox", () => {
+  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", () => {
+    render(<Checkbox id="inputID" labelText="Test Label" showLabel={false} />);
+    expect(screen.getByLabelText("Test Label")).toHaveAttribute(
+      "aria-label",
+      "Test Label"
+    );
+  });
+
+  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("Renders visible helper or error text", () => {
+    const { rerender } = render(
+      <Checkbox
+        id="inputID"
+        labelText="Test Label"
+        helperText="This is the helper text."
+        invalidText="This is the error text :("
+      />
+    );
+    expect(screen.getByText("This is the helper text.")).toBeVisible();
+    expect(
+      screen.queryByText("This is the error text :(")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <Checkbox
+        id="inputID"
+        labelText="Test Label"
+        isInvalid
+        helperText="This is the helper text."
+        invalidText="This is the error text :("
+      />
+    );
+    expect(screen.getByText("This is the error text :(")).toBeVisible();
+    expect(
+      screen.queryByText("This is the helper text.")
+    ).not.toBeInTheDocument();
+  });
+
+  it("Sets the checkbox's ID", () => {
+    render(<Checkbox id="inputID" labelText="Test Label" />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("id", "inputID");
+  });
+
+  it("Sets the 'checked' attribute", () => {
+    render(
+      <Checkbox
+        id="inputID"
+        labelText="Test Label"
+        showLabel={true}
+        isChecked
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("checked");
+  });
+
+  it("Sets the 'indeterminate' state", () => {
+    const { container, rerender } = render(
+      <Checkbox id="inputID" labelText="Test Label" isChecked />
+    );
+    expect(
+      container.querySelector(".chakra-checkbox__control")
+    ).not.toHaveAttribute("data-indeterminate");
+
+    rerender(
+      <Checkbox id="inputID" labelText="Test Label" isChecked isIndeterminate />
+    );
+    expect(
+      container.querySelector(".chakra-checkbox__control")
+    ).toHaveAttribute("data-indeterminate");
+  });
+
+  it("Sets the 'disabled' attribute", () => {
+    render(
+      <Checkbox
+        id="inputID"
+        labelText="Test Label"
+        showLabel={true}
+        isDisabled
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("disabled");
+  });
+
+  it("Sets the 'required' attribute", () => {
+    render(
+      <Checkbox
+        id="inputID"
+        labelText="Test Label"
+        showLabel={true}
+        isRequired
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("required");
+  });
+
+  it("Sets the error state", () => {
+    render(
+      <Checkbox
+        id="inputID-attributes"
+        labelText="onChange test"
+        showLabel={true}
+        invalidText="This is the error text!"
+        isInvalid
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(screen.getByText("This is the error text!")).toBeInTheDocument();
+  });
+
+  it("does not render the error text when 'isInvalid' is true but 'showHelperInvalidText' is false", () => {
+    render(
+      <Checkbox
+        id="inputID-attributes"
+        labelText="onChange test"
+        showLabel={true}
+        showHelperInvalidText={false}
+        isInvalid
+      />
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid");
+    expect(
+      screen.queryByText("This is the error text!")
+    ).not.toBeInTheDocument();
+  });
+
+  it("should call onChange only once when checkbox is clicked", () => {
+    const onChangeMock = jest.fn();
+
+    render(
+      <Checkbox
+        id="onChangeCalledOnce"
+        onChange={onChangeMock}
+        labelText="onChangeTest"
+        showLabel={true}
+        isChecked={false}
+      />
+    );
+
+    expect(
+      screen.getByRole("checkbox", { name: /onchangetest/i })
+    ).toBeInTheDocument();
+    userEvent.click(screen.getByRole("checkbox", { name: /onchangetest/i }));
+    expect(onChangeMock).toBeCalledTimes(1);
+  });
+
+  it("Changing the value calls the onChange handler", () => {
+    let isChecked = false;
+    const onChange = (e) => {
+      isChecked = e.target.checked;
+    };
+    const utils = render(
+      <Checkbox
+        id="onChangeTest"
+        onChange={onChange}
+        labelText="onChangeTest Lab"
+        showLabel={true}
+        isChecked={isChecked}
+      />
+    );
+
+    expect(isChecked).toEqual(false);
+    userEvent.click(utils.getByText("onChangeTest Lab"));
+    expect(isChecked).toEqual(true);
+
+    utils.rerender(
+      <Checkbox
+        id="onChangeTest"
+        onChange={onChange}
+        labelText="onChangeTest Lab"
+        showLabel={true}
+        isChecked={isChecked}
+      />
+    );
+
+    userEvent.click(utils.getByText("onChangeTest Lab"));
+    expect(isChecked).toEqual(false);
+  });
+
+  it("logs a warning if `labelText` is not a string and `showLabel` is false", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Checkbox
+        id="checkbox"
+        value="arts"
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        showLabel={false}
+      />
+    );
+
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Checkbox: `labelText` must be a string when `showLabel` is false."
+    );
+  });
+
+  it("Logs a warning when there is no `id` passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    // @ts-ignore: Typescript complains when a required prop is not passed, but
+    // here we don't want to pass the required prop to make sure the warning appears.
+    render(<Checkbox labelText="checkbox" />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Checkbox: This component's required `id` prop was not passed."
+    );
+  });
+
+  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 isIndeterminate = renderer
+      .create(
+        <Checkbox
+          id="checkbox-checked"
+          labelText="Test Label"
+          isChecked
+          isIndeterminate
+        />
+      )
+      .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();
+    const withJSXLabel = renderer
+      .create(
+        <Checkbox
+          id="jsxLabel"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Checkbox
+          id="checkbox-chakra"
+          labelText="Test Label"
+          p="s"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Checkbox
+          id="checkbox-props"
+          labelText="Test Label"
+          data-testid="testid"
+        />
+      )
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(isChecked).toMatchSnapshot();
+    expect(isIndeterminate).toMatchSnapshot();
+    expect(isRequired).toMatchSnapshot();
+    expect(isInvalid).toMatchSnapshot();
+    expect(isDisabled).toMatchSnapshot();
+    expect(withJSXLabel).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,152 @@
+import {
+  chakra,
+  Checkbox as ChakraCheckbox,
+  Icon,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { getAriaAttrs } from "../../utils/utils";
+
+interface CheckboxIconProps {
+  /** 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 indeterminate state to the `Checkbox`. */
+  isIndeterminate?: boolean;
+}
+
+export interface CheckboxProps extends CheckboxIconProps {
+  /** className you can add in addition to 'input' */
+  className?: string;
+  /** Optional string to populate the HelperErrorText for standard state */
+  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;
+  /** 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 | JSX.Element;
+  /** 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 hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
+  /** Offers the ability to show the checkbox's label onscreen or hide it.
+   * Refer to the `labelText` property for more information. */
+  showLabel?: boolean;
+  /** Populates the value of the input */
+  value?: string;
+}
+
+function CheckboxIcon(props: CheckboxIconProps) {
+  // We don't need the `isIndeterminate` or `isChecked` props but it
+  // causes rendering issues on the SVG element, so we remove them
+  // before passing all the props to the `Icon` component.
+  const { isIndeterminate, isChecked, ...rest } = props;
+
+  return (
+    <Icon viewBox="0 0 24 24" {...rest}>
+      <path
+        fill="currentColor"
+        d="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"
+      />
+    </Icon>
+  );
+}
+
+export const Checkbox = chakra(
+  React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref?) => {
+    const {
+      className,
+      invalidText,
+      helperText,
+      id,
+      isChecked,
+      isDisabled = false,
+      isIndeterminate = false,
+      isInvalid = false,
+      isRequired = false,
+      labelText,
+      name,
+      onChange,
+      showHelperInvalidText = true,
+      showLabel = true,
+      value,
+      ...rest
+    } = props;
+    const styles = useMultiStyleConfig("Checkbox", {});
+    const footnote = isInvalid ? invalidText : helperText;
+    // Use Chakra's default indeterminate icon.
+    const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
+    const ariaAttributes = getAriaAttrs({
+      footnote,
+      id,
+      labelText,
+      name: "Checkbox",
+      showLabel,
+    });
+
+    if (!id) {
+      console.warn(
+        "NYPL Reservoir Checkbox: This component's required `id` prop was not passed."
+      );
+    }
+
+    return (
+      <ComponentWrapper
+        helperText={helperText}
+        helperTextStyles={styles.helperErrorText}
+        id={id}
+        invalidText={invalidText}
+        isInvalid={isInvalid}
+        showHelperInvalidText={showHelperInvalidText}
+        {...rest}
+      >
+        <ChakraCheckbox
+          className={className}
+          icon={icon}
+          id={id}
+          isDisabled={isDisabled}
+          isIndeterminate={isIndeterminate}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          name={name || "default"}
+          ref={ref}
+          value={value}
+          {...(isChecked !== undefined
+            ? {
+                isChecked,
+                onChange,
+              }
+            : {
+                defaultIsChecked: false,
+              })}
+          alignItems="flex-start"
+          __css={styles}
+          {...ariaAttributes}
+        >
+          {showLabel && labelText}
+        </ChakraCheckbox>
+      </ComponentWrapper>
+    );
+  })
+);
+
+export default Checkbox;