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

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

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

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