@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,319 +0,0 @@
-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", () => {
-  let changeHandler: jest.MockedFunction<() => void>;
-
-  beforeEach(() => {
-    changeHandler = jest.fn();
-  });
-
-  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("Changing the value calls the onChange handler", () => {
-    const utils = render(
-      <Checkbox
-        id="onChangeTest"
-        onChange={changeHandler}
-        labelText="onChangeTest Lab"
-        showLabel={true}
-        isChecked
-      />
-    );
-
-    expect(changeHandler).toHaveBeenCalledTimes(0);
-    userEvent.type(utils.getByText("onChangeTest Lab"), "Hello");
-    expect(changeHandler).toHaveBeenCalledTimes(1);
-  });
-
-  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

@@ -1,166 +0,0 @@
-import {
-  chakra,
-  Checkbox as ChakraCheckbox,
-  Icon,
-  useMultiStyleConfig,
-} from "@chakra-ui/react";
-import * as React from "react";
-import { AriaAttributes } from "../../utils/interfaces";
-
-import HelperErrorText, {
-  HelperErrorTextType,
-} from "../HelperErrorText/HelperErrorText";
-
-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;
-}
-
-export const onChangeDefault = () => {
-  return;
-};
-
-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,
-      showHelperInvalidText = true,
-      showLabel = true,
-      value,
-      ...rest
-    } = props;
-    const styles = useMultiStyleConfig("Checkbox", {});
-    const footnote = isInvalid ? invalidText : helperText;
-    const ariaAttributes: AriaAttributes = {};
-    const onChange = props.onChange || onChangeDefault;
-    // Use Chakra's default indeterminate icon.
-    const icon = !isIndeterminate ? <CheckboxIcon /> : undefined;
-
-    if (!id) {
-      console.warn(
-        "NYPL Reservoir Checkbox: This component's required `id` prop was not passed."
-      );
-    }
-
-    if (!showLabel) {
-      if (typeof labelText !== "string") {
-        console.warn(
-          "NYPL Reservoir Checkbox: `labelText` must be a string when `showLabel` is false."
-        );
-      }
-      ariaAttributes["aria-label"] =
-        labelText && footnote
-          ? `${labelText} - ${footnote}`
-          : (labelText as string);
-    } else {
-      if (footnote) ariaAttributes["aria-describedby"] = `${id}-helperText`;
-    }
-
-    return (
-      <>
-        <ChakraCheckbox
-          id={id}
-          className={className}
-          name={name || "default"}
-          isDisabled={isDisabled}
-          isInvalid={isInvalid}
-          isRequired={isRequired}
-          isIndeterminate={isIndeterminate}
-          ref={ref}
-          value={value}
-          {...(isChecked !== undefined
-            ? {
-                isChecked,
-                onChange,
-              }
-            : {
-                defaultIsChecked: false,
-              })}
-          icon={icon}
-          alignItems="flex-start"
-          __css={styles}
-          {...ariaAttributes}
-          {...rest}
-        >
-          {showLabel && labelText}
-        </ChakraCheckbox>
-        {footnote && showHelperInvalidText && (
-          <HelperErrorText
-            id={`${id}-helperText`}
-            isInvalid={isInvalid}
-            text={footnote}
-            __css={styles.helperErrorText}
-          />
-        )}
-      </>
-    );
-  })
-);
-
-export default Checkbox;