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

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

@@ -1,358 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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;