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

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,358 @@
+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 Select from "./Select";
+
+const baseProps = {
+  helperText: "This is the helper text.",
+  id: "select",
+  labelText: "What is your favorite color?",
+  name: "color",
+};
+const baseOptions = (
+  <>
+    <option value="red">Red</option>
+    <option value="green">Green</option>
+    <option value="blue">Blue</option>
+    <option value="black">Black</option>
+    <option value="white">White</option>
+  </>
+);
+
+describe("Select Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(<Select {...baseProps}>{baseOptions}</Select>);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Select", () => {
+  it("renders a label, select, option, and helper text DOM elements", () => {
+    render(<Select {...baseProps}>{baseOptions}</Select>);
+
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getAllByRole("option")).toHaveLength(5);
+    expect(screen.getByText(/This is the helper text/i)).toBeInTheDocument();
+  });
+
+  it("renders a name attribute to use in forms", () => {
+    render(<Select {...baseProps}>{baseOptions}</Select>);
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).toHaveAttribute("name", "color");
+  });
+
+  it("renders an aria-label attribute when `showLabel` is false", () => {
+    const { rerender } = render(<Select {...baseProps}>{baseOptions}</Select>);
+
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).not.toHaveAttribute("aria-label");
+
+    rerender(
+      <Select {...baseProps} showLabel={false}>
+        {baseOptions}
+      </Select>
+    );
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).toHaveAttribute(
+      "aria-label",
+      "What is your favorite color? - This is the helper text."
+    );
+  });
+
+  it("renders aria-describedby when helperText prop is passed", () => {
+    const id = "test-describe";
+    render(
+      <Select {...baseProps} id={id}>
+        {baseOptions}
+      </Select>
+    );
+
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).toHaveAttribute("aria-describedby", `${id}-helperText`);
+  });
+
+  it("renders '(Required)' text in the label", () => {
+    const { rerender } = render(
+      <Select {...baseProps} isRequired>
+        {baseOptions}
+      </Select>
+    );
+
+    expect(screen.getByText(/Required/i)).toBeInTheDocument();
+
+    rerender(
+      <Select {...baseProps} isRequired showRequiredLabel={false}>
+        {baseOptions}
+      </Select>
+    );
+    expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
+  });
+
+  it("renders required and aria-required attributes when 'showLabel' is false", () => {
+    render(
+      <Select {...baseProps} isRequired showLabel={false}>
+        {baseOptions}
+      </Select>
+    );
+    expect(screen.queryByText(/equired/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).toHaveAttribute("aria-required");
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).toHaveAttribute("required");
+  });
+
+  it("should not render a required label if 'showRequiredLabel' flag is false, but still render the label", () => {
+    render(
+      <Select {...baseProps} isRequired showRequiredLabel={false}>
+        {baseOptions}
+      </Select>
+    );
+    expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByLabelText(/What is your favorite color/i)
+    ).toBeInTheDocument();
+  });
+
+  it("renders helper text when helperText prop is passed", () => {
+    render(<Select {...baseProps}>{baseOptions}</Select>);
+
+    expect(screen.getByText("This is the helper text.")).toBeInTheDocument();
+  });
+
+  it("renders default error text when 'invalidText' prop is not passed and 'isInvalid' prop is set to true", () => {
+    render(
+      <Select {...baseProps} isInvalid>
+        {baseOptions}
+      </Select>
+    );
+
+    expect(
+      screen.getByText("There is an error related to this field.")
+    ).toBeInTheDocument();
+  });
+
+  it("does not render the error text when 'isInvalid' is true and 'showHelperInvalidText' is false", () => {
+    render(
+      <Select {...baseProps} showHelperInvalidText={false} isInvalid>
+        {baseOptions}
+      </Select>
+    );
+
+    expect(
+      screen.queryByText("There is an error related to this field.")
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders custom error text when 'invalidText' prop is passed and 'isInvalid' prop is set to true", () => {
+    render(
+      <Select
+        {...baseProps}
+        invalidText="This is a custom error text!"
+        isInvalid
+      >
+        {baseOptions}
+      </Select>
+    );
+    expect(
+      screen.getByText("This is a custom error text!")
+    ).toBeInTheDocument();
+  });
+
+  it("updates the value through a ref", () => {
+    const selectRef = React.createRef<HTMLSelectElement>();
+    render(
+      <Select {...baseProps} ref={selectRef}>
+        {baseOptions}
+      </Select>
+    );
+
+    expect(selectRef.current?.value).toEqual("red");
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "blue" },
+    });
+    expect(selectRef.current?.value).toEqual("blue");
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "white" },
+    });
+    expect(selectRef.current?.value).toEqual("white");
+  });
+
+  it("calls the onChange callback function", () => {
+    let value = "";
+    const changeCallback = (e: React.FormEvent) => {
+      value = (e.target as HTMLInputElement).value;
+    };
+    render(
+      <Select {...baseProps} onChange={changeCallback} value={value}>
+        {baseOptions}
+      </Select>
+    );
+
+    expect(value).toEqual("");
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "blue" },
+    });
+    expect(value).toEqual("blue");
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "white" },
+    });
+    expect(value).toEqual("white");
+  });
+
+  it("logs a warning when there is no `id` passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      // @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.
+      <Select labelText="What is your favorite color?" name="color">
+        {baseOptions}
+      </Select>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Select: This component's required `id` prop was not passed."
+    );
+  });
+
+  it("Renders the UI snapshot correctly", () => {
+    const siblings = ["Kendall", "Shiv", "Connor", "Roman", "Tom"];
+    const options = siblings.map((sibling) => (
+      <option key={sibling}>{sibling}</option>
+    ));
+
+    const primary = renderer
+      .create(
+        <Select
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const disabled = renderer
+      .create(
+        <Select
+          id="select"
+          isDisabled
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withInvalidText = renderer
+      .create(
+        <Select
+          id="select"
+          invalidText="Tom doesn't count as a sibling :(."
+          isInvalid
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withHelperText = renderer
+      .create(
+        <Select
+          helperText="Remember, Logan will judge you no matter who you pick."
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const required = renderer
+      .create(
+        <Select
+          id="select"
+          isRequired
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withLabelInline = renderer
+      .create(
+        <Select
+          id="select"
+          isRequired
+          labelPosition="inline"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const hasOnChange = renderer
+      .create(
+        <Select
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+          onChange={jest.fn()}
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Select
+          id="chakra"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+          p="20px"
+          color="ui.error.primary"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Select
+          id="props"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+          data-testid="props"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(disabled).toMatchSnapshot();
+    expect(withInvalidText).toMatchSnapshot();
+    expect(withHelperText).toMatchSnapshot();
+    expect(required).toMatchSnapshot();
+    expect(withLabelInline).toMatchSnapshot();
+    expect(hasOnChange).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/Select/Select.tsx

@@ -0,0 +1,183 @@
+import {
+  Box,
+  chakra,
+  Select as ChakraSelect,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import React, { useEffect, useState, useRef } from "react";
+
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import Icon from "../Icons/Icon";
+import Label from "../Label/Label";
+import { getAriaAttrs } from "../../utils/utils";
+
+export type SelectTypes = "default" | "searchbar";
+export type LabelPositions = "default" | "inline";
+export interface SelectProps {
+  /** A class name for the `div` parent element. */
+  className?: string;
+  /** Optional string to populate the `HelperErrorText` for the 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 select when true */
+  isDisabled?: boolean;
+  /** Adds the `aria-invalid` attribute to the select when true. This also makes
+   * the color theme "NYPL error" red for the select and text. */
+  isInvalid?: boolean;
+  /** Adds the `required` and `aria-required` attributes to the input when true. */
+  isRequired?: boolean;
+  /** Optional value to render the label inline, rather than the default (on top)
+   * of the select element. */
+  labelPosition?: LabelPositions;
+  /** Provides text for a `Label` component if `showLabel` is set to `true`;
+   * populates an `aria-label` attribute on the select input if `showLabel` is
+   * set to `false`. */
+  labelText: string;
+  /** Used to reference the select element in forms. */
+  name: string;
+  /** The callback function to get the selected value.
+   * Should be passed along with `value` for controlled components. */
+  onChange?: (event: React.FormEvent) => void;
+  /** Placeholder text in the select element. */
+  placeholder?: string;
+  /** The variant to display. */
+  selectType?: SelectTypes;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
+  /** Offers the ability to show the select's label onscreen or hide it. Refer
+   * to the `labelText` property for more information. */
+  showLabel?: boolean;
+  /** Whether or not to display the "(Required)" text in the label text.
+   * True by default. */
+  showRequiredLabel?: boolean;
+  /** The value of the selected option.
+   * Should be passed along with `onChange` for controlled components. */
+  value?: string;
+}
+
+/**
+ * Component that renders Chakra's `Select` component along with an accessible
+ * `Label` and optional `HelperErrorText` component.
+ */
+export const Select = chakra(
+  React.forwardRef<HTMLSelectElement, React.PropsWithChildren<SelectProps>>(
+    (props: React.PropsWithChildren<SelectProps>, ref?) => {
+      const {
+        children,
+        className,
+        helperText,
+        id,
+        invalidText,
+        isDisabled = false,
+        isInvalid = false,
+        isRequired = false,
+        labelPosition = "default",
+        labelText,
+        name,
+        onChange,
+        placeholder,
+        selectType = "default",
+        showHelperInvalidText = true,
+        showLabel = true,
+        showRequiredLabel = true,
+        value = "",
+        ...rest
+      } = props;
+      const [labelWidth, setLabelWidth] = useState<number>(0);
+      const labelRef = useRef<HTMLDivElement>(null);
+      const styles = useMultiStyleConfig("CustomSelect", {
+        variant: selectType,
+        labelPosition,
+      });
+      const finalInvalidText = invalidText
+        ? invalidText
+        : "There is an error related to this field.";
+      const footnote = isInvalid ? finalInvalidText : helperText;
+      const ariaAttributes = getAriaAttrs({
+        footnote,
+        id,
+        labelText,
+        name: "Select",
+        showLabel,
+      });
+      // To control the `Select` component, both `onChange` and `value`
+      // must be passed.
+      const controlledProps = onChange ? { onChange, value } : {};
+
+      // The number of pixels between the label and select elements
+      // when the labelPosition is inline (equivalent to --nypl-space-xs).
+      const labelSelectGap = 8;
+
+      if (!id) {
+        console.warn(
+          "NYPL Reservoir Select: This component's required `id` prop was not passed."
+        );
+      }
+
+      useEffect(() => {
+        if (labelPosition === "inline") {
+          if (labelRef.current) {
+            const width = labelRef.current.clientWidth + labelSelectGap;
+            setLabelWidth(width);
+          }
+        } else {
+          setLabelWidth(0);
+        }
+      }, [labelPosition]);
+
+      return (
+        <ComponentWrapper
+          className={className}
+          helperText={helperText}
+          helperTextStyles={{
+            marginLeft: { sm: "auto", md: `${labelWidth}px` },
+          }}
+          id={id}
+          invalidText={finalInvalidText}
+          isInvalid={isInvalid}
+          showHelperInvalidText={showHelperInvalidText}
+          __css={styles}
+          {...rest}
+        >
+          <Box __css={labelPosition === "inline" && styles.inline}>
+            {showLabel && (
+              <Box ref={labelRef}>
+                <Label
+                  htmlFor={id}
+                  id={`${id}-label`}
+                  isInlined
+                  isRequired={showRequiredLabel && isRequired}
+                >
+                  {labelText}
+                </Label>
+              </Box>
+            )}
+            <ChakraSelect
+              id={id}
+              variant="outline"
+              isRequired={isRequired}
+              isDisabled={isDisabled}
+              isInvalid={isInvalid}
+              name={name}
+              placeholder={placeholder}
+              ref={ref}
+              {...controlledProps}
+              {...ariaAttributes}
+              icon={<Icon id={`${id}-icon`} name="arrow" size="medium" />}
+              __css={styles.select}
+            >
+              {children}
+            </ChakraSelect>
+          </Box>
+        </ComponentWrapper>
+      );
+    }
+  )
+);
+
+export default Select;