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

package/src/components/SearchBar/SearchBar.test.tsx

@@ -0,0 +1,435 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+import renderer from "react-test-renderer";
+
+import SearchBar, { SelectProps, TextInputProps } from "./SearchBar";
+
+const optionsGroup = [
+  "Art",
+  "Bushes",
+  "Clothing",
+  "Flowers",
+  "Fossils",
+  "Fruits",
+  "Furniture",
+  "Songs",
+  "Tools",
+  "Villagers",
+];
+const selectProps: SelectProps = {
+  name: "selectName",
+  labelText: "Select a category",
+  optionsData: optionsGroup,
+  value: "Songs",
+};
+const textInputProps: TextInputProps = {
+  labelText: "Item Search",
+  name: "textInputName",
+  placeholder: "Item Search",
+};
+const labelText = "SearchBar label";
+const helperText = "Search for items in Animal Crossing New Horizons";
+const invalidText = "Could not find the item :(";
+
+describe("SearchBar Accessibility", () => {
+  it("passes axe accessibility test", async () => {
+    const { container } = render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        invalidText={invalidText}
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test with a Select component", async () => {
+    const { container } = render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        invalidText={invalidText}
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("SearchBar", () => {
+  const searchBarSubmit = jest.fn();
+  const buttonCallback = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the basic form", () => {
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(screen.getByRole("search")).toBeInTheDocument();
+    expect(screen.getByRole("search")).toHaveAttribute(
+      "aria-label",
+      `${labelText} - ${helperText}`
+    );
+    expect(screen.getByPlaceholderText("Item Search")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("renders an optional Select component", () => {
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getByLabelText("Select a category")).toBeInTheDocument();
+  });
+
+  it("renders the invalid text in the invalid state", () => {
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        invalidText={invalidText}
+        isInvalid
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(screen.getByText(invalidText)).toBeInTheDocument();
+    expect(screen.queryByText(helperText)).not.toBeInTheDocument();
+  });
+
+  it("does not render the default invalid text from the Select or TextInput components", () => {
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        invalidText={invalidText}
+        isInvalid
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(
+      screen.queryByText("There is an error related to this field.")
+    ).not.toBeInTheDocument();
+  });
+
+  it("calls the TextInput onChange callback function", () => {
+    textInputProps.onChange = jest.fn();
+
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        textInputProps={textInputProps}
+      />
+    );
+    const input = screen.getByLabelText(textInputProps.labelText);
+    expect(textInputProps.onChange).toHaveBeenCalledTimes(0);
+
+    userEvent.type(input, "search!");
+
+    // Seven times for every letter in the search string
+    expect(textInputProps.onChange).toHaveBeenCalledTimes(7);
+  });
+
+  it("calls the Select onChange callback function", () => {
+    let selectValue = "Songs";
+    selectProps.onChange = (e) => (selectValue = (e.target as any).value);
+    selectProps.value = selectValue;
+
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    const select = screen.getByLabelText(selectProps.labelText);
+    expect(selectValue).toEqual("Songs");
+
+    userEvent.selectOptions(select, "Flowers");
+    expect(selectValue).toEqual("Flowers");
+
+    userEvent.selectOptions(select, "Furniture");
+    expect(selectValue).toEqual("Furniture");
+  });
+
+  it("calls the callback function for the Button component ", () => {
+    render(
+      <SearchBar
+        buttonOnClick={buttonCallback}
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(buttonCallback).toHaveBeenCalledTimes(0);
+    userEvent.click(screen.getByRole("button"));
+    expect(buttonCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls the callback function on submit ", () => {
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(searchBarSubmit).toHaveBeenCalledTimes(0);
+    userEvent.click(screen.getByRole("button"));
+    expect(searchBarSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders a default placeholder", () => {
+    const textInputProps: TextInputProps = {
+      labelText: "Item Search",
+      name: "textInputName",
+    };
+
+    render(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+
+    expect(screen.getByPlaceholderText("Search terms")).toBeInTheDocument();
+  });
+
+  it("renders 'required' in the placeholder text", () => {
+    const { rerender } = render(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+
+    expect(
+      screen.queryByPlaceholderText("Item Search (Required)")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        isRequired
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(
+      screen.getByPlaceholderText("Item Search (Required)")
+    ).toBeInTheDocument();
+  });
+
+  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.
+      <SearchBar labelText={labelText} onSubmit={jest.fn()} />
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir SearchBar: This component's required `id` prop was not passed."
+    );
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <SearchBar
+          helperText={helperText}
+          id="basic"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const withSelect = renderer
+      .create(
+        <SearchBar
+          helperText={helperText}
+          id="withSelect"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          selectProps={selectProps}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const withoutHelperText = renderer
+      .create(
+        <SearchBar
+          id="withoutHelperText"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const invalidState = renderer
+      .create(
+        <SearchBar
+          id="invalidState"
+          isInvalid
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const disabledState = renderer
+      .create(
+        <SearchBar
+          id="disabledState"
+          isDisabled
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const requiredState = renderer
+      .create(
+        <SearchBar
+          id="requiredState"
+          isDisabled
+          isRequired
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const noBrandButtonType = renderer
+      .create(
+        <SearchBar
+          id="noBrandButtonType"
+          isDisabled
+          isRequired
+          labelText={labelText}
+          noBrandButtonType={true}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const withHeading = renderer
+      .create(
+        <SearchBar
+          id="withHeading"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          headingText="A Heading"
+        />
+      )
+      .toJSON();
+    const withDescription = renderer
+      .create(
+        <SearchBar
+          id="withDescription"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          descriptionText="A description"
+        />
+      )
+      .toJSON();
+    const withHeadingAndDescription = renderer
+      .create(
+        <SearchBar
+          id="withHeadingAndDescription"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          headingText="A Heading"
+          descriptionText="A description"
+        />
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <SearchBar
+          helperText={helperText}
+          id="chakra"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <SearchBar
+          helperText={helperText}
+          id="props"
+          labelText={labelText}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          data-testid="props"
+        />
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(withSelect).toMatchSnapshot();
+    expect(withoutHelperText).toMatchSnapshot();
+    expect(invalidState).toMatchSnapshot();
+    expect(disabledState).toMatchSnapshot();
+    expect(requiredState).toMatchSnapshot();
+    expect(noBrandButtonType).toMatchSnapshot();
+    expect(withHeading).toMatchSnapshot();
+    expect(withDescription).toMatchSnapshot();
+    expect(withHeadingAndDescription).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,210 @@
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
+
+import Button from "../Button/Button";
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import Icon from "../Icons/Icon";
+import Select from "../Select/Select";
+import TextInput from "../TextInput/TextInput";
+
+interface BaseProps {
+  labelText: string;
+  name: string;
+  onChange?: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => void;
+  value?: string;
+}
+// Internal interfaces that are used only for `SearchBar` props.
+export interface SelectProps extends BaseProps {
+  optionsData: string[];
+  onChange?: (event: React.FormEvent) => void;
+}
+export interface TextInputProps extends BaseProps {
+  placeholder?: string;
+}
+
+export interface SearchBarProps {
+  /** Adds 'action' property to the `form` element. */
+  action?: string;
+  /** The onClick callback function for the `Button` component. */
+  buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+  /** A class name for the `form` element. */
+  className?: string;
+  /** Optional string for the SearchBar's description above the component. */
+  descriptionText?: string;
+  /** Optional string for the SearchBar's heading text above the component. */
+  headingText?: string;
+  /** The text to display below the form in a `HelperErrorText` component. */
+  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;
+  /** Sets children form components in the disabled state. */
+  isDisabled?: boolean;
+  /** Sets children form components in the error state. */
+  isInvalid?: boolean;
+  /** Sets children form components in the required state. */
+  isRequired?: boolean;
+  /** Populates the `aria-label` attribute on the form element. */
+  labelText: string;
+  /** Adds 'method' property to the `form` element. */
+  method?: string;
+  /** Sets the `Button` variant type to `noBrand` when true;
+   * false by default which sets the type to `primary`. */
+  noBrandButtonType?: boolean;
+  /** Handler function when the form is submitted. */
+  onSubmit: (event: React.FormEvent) => void;
+  /** Required props to render a `Select` element. */
+  selectProps?: SelectProps | undefined;
+  /** Custom input element to render instead of a `TextInput` element. */
+  textInputElement?: JSX.Element;
+  /** Required props to render a `TextInput` element. */
+  textInputProps?: TextInputProps | undefined;
+}
+
+/**
+ * Renders a wrapper `form` element to be used with `Select` (optional),
+ * `Input`, and `Button` components together.
+ */
+export const SearchBar = chakra((props: SearchBarProps) => {
+  const {
+    action,
+    buttonOnClick,
+    className,
+    descriptionText,
+    headingText,
+    helperText,
+    id,
+    invalidText,
+    isDisabled = false,
+    isInvalid = false,
+    isRequired = false,
+    labelText,
+    method,
+    noBrandButtonType = false,
+    onSubmit,
+    selectProps,
+    textInputElement,
+    textInputProps,
+    ...rest
+  } = props;
+  const styles = useMultiStyleConfig("SearchBar", {});
+  const stateProps = {
+    helperText: "",
+    isDisabled,
+    isInvalid,
+    isRequired,
+    showHelperInvalidText: false,
+    showLabel: false,
+  };
+  const footnote = isInvalid ? invalidText : helperText;
+  const finalAriaLabel = footnote ? `${labelText} - ${footnote}` : labelText;
+  const inputPlaceholder = textInputProps?.placeholder || "Search terms";
+  const textInputPlaceholder = `${inputPlaceholder} ${
+    isRequired ? "(Required)" : ""
+  }`;
+  const buttonType = noBrandButtonType ? "noBrand" : "primary";
+  const searchBarButtonStyles = {
+    borderLeftRadius: "none",
+    borderRightRadius: { base: "none", md: "sm" },
+    lineHeight: "1.70",
+    marginBottom: "auto",
+  };
+
+  if (!id) {
+    console.warn(
+      "NYPL Reservoir SearchBar: This component's required `id` prop was not passed."
+    );
+  }
+  // Render the `Select` component.
+  const selectElem = selectProps && (
+    <Select
+      id={`searchbar-select-${id}`}
+      labelText={selectProps?.labelText}
+      name={selectProps?.name}
+      onChange={selectProps?.onChange}
+      selectType="searchbar"
+      value={selectProps?.value}
+      __css={styles.select}
+      {...stateProps}
+    >
+      {selectProps?.optionsData.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </Select>
+  );
+  // Render the `TextInput` component.
+  const textInputNative = textInputProps && (
+    <TextInput
+      id={`searchbar-textinput-${id}`}
+      labelText={textInputProps?.labelText}
+      name={textInputProps?.name}
+      onChange={textInputProps?.onChange}
+      placeholder={textInputPlaceholder}
+      textInputType={selectElem ? "searchBarSelect" : "searchBar"}
+      type="text"
+      value={textInputProps?.value}
+      {...stateProps}
+    />
+  );
+  // Render the `Button` component.
+  const buttonElem = (
+    <Button
+      buttonType={buttonType}
+      id={`searchbar-button-${id}`}
+      isDisabled={isDisabled}
+      onClick={buttonOnClick}
+      type="submit"
+      __css={searchBarButtonStyles}
+    >
+      <Icon
+        align="left"
+        id={`searchbar-icon-${id}`}
+        name="search"
+        size="small"
+      />
+      Search
+    </Button>
+  );
+  // If a custom input element was passed, use that element
+  // instead of the DS `TextInput` component.
+  const textInputElem = textInputElement || textInputNative;
+
+  return (
+    <ComponentWrapper
+      descriptionText={descriptionText}
+      headingText={headingText}
+      helperText={helperText}
+      id={id}
+      invalidText={invalidText}
+      isInvalid={isInvalid}
+      {...rest}
+    >
+      <Box
+        as="form"
+        id={`searchbar-form-${id}`}
+        className={className}
+        role="search"
+        aria-label={finalAriaLabel}
+        onSubmit={onSubmit}
+        method={method}
+        action={action}
+        __css={styles}
+      >
+        {selectElem}
+        {textInputElem}
+        {buttonElem}
+      </Box>
+    </ComponentWrapper>
+  );
+});
+
+export default SearchBar;