@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/SearchBar/SearchBar.Test.tsx

@@ -2,15 +2,46 @@ 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 Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import SearchBar from "./SearchBar";
 
+const optionsGroup = [
+  "Art",
+  "Bushes",
+  "Clothing",
+  "Flowers",
+  "Fossils",
+  "Fruits",
+  "Furniture",
+  "Songs",
+  "Tools",
+  "Villagers",
+];
+const selectProps = {
+  name: "nhItemSearch",
+  labelText: "Select a category",
+  optionsData: optionsGroup,
+};
+const textInputProps = {
+  labelText: "Item Search",
+  placeholder: "Item Search",
+};
+const helperErrorText = "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 id="id" ariaLabel="searchbar" onSubmit={jest.fn()} />
+      <SearchBar
+        id="id"
+        labelText="Searchbar"
+        onSubmit={jest.fn()}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+        invalidText={invalidText}
+      />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
@@ -20,32 +51,136 @@ describe("SearchBar", () => {
   const searchBarSubmit = jest.fn();
   const buttonCallback = jest.fn();
 
-  it("Renders SearchBar", () => {
+  it("renders the basic form", () => {
     render(
-      <SearchBar id="id" ariaLabel="searchbar" onSubmit={searchBarSubmit} />
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+      />
     );
     expect(screen.getByRole("search")).toBeInTheDocument();
     expect(screen.getByRole("search")).toHaveAttribute(
       "aria-label",
       "searchbar"
     );
+    expect(screen.getByPlaceholderText("Item Search")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("renders an optional Select component", () => {
+    render(
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+      />
+    );
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getByLabelText("Select a category")).toBeInTheDocument();
+  });
+
+  it("renders the invalid text in the invalid state", () => {
+    render(
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+        invalidText={invalidText}
+        isInvalid
+      />
+    );
+    expect(screen.getByText(invalidText)).toBeInTheDocument();
+    expect(screen.queryByText(helperErrorText)).not.toBeInTheDocument();
   });
 
-  it("Search Bar calls call back on Submit ", () => {
+  it("calls the callback function on submit ", () => {
     render(
-      <SearchBar ariaLabel="searchBar" id="id" onSubmit={searchBarSubmit}>
-        <Button
-          buttonType={ButtonTypes.Primary}
-          id="button"
-          onClick={buttonCallback}
-          type="submit"
-        >
-          Search
-        </Button>
-      </SearchBar>
+      <SearchBar
+        labelText="searchBar"
+        id="id"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+      />
     );
     expect(searchBarSubmit).toHaveBeenCalledTimes(0);
+    expect(buttonCallback).toHaveBeenCalledTimes(0);
     userEvent.click(screen.getByRole("button"));
     expect(searchBarSubmit).toHaveBeenCalledTimes(1);
+    expect(buttonCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("Renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          helperErrorText={helperErrorText}
+        />
+      )
+      .toJSON();
+    const withSelect = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          selectProps={selectProps}
+          textInputProps={textInputProps}
+          helperErrorText={helperErrorText}
+        />
+      )
+      .toJSON();
+    const withoutHelperText = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const invalidState = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          isInvalid
+        />
+      )
+      .toJSON();
+    const disabledState = renderer
+      .create(
+        <SearchBar
+          id="id"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+          isDisabled
+        />
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(withSelect).toMatchSnapshot();
+    expect(withoutHelperText).toMatchSnapshot();
+    expect(invalidState).toMatchSnapshot();
+    expect(disabledState).toMatchSnapshot();
   });
 });

package/src/components/SearchBar/SearchBar.stories.mdx

@@ -2,21 +2,15 @@ import {
   Meta,
   Story,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+
 import SearchBar from "./SearchBar";
-import Select from "../Select/Select";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
-import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
-import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
-import Input from "../Input/Input";
-import { InputTypes } from "../Input/InputTypes";
 import * as stories from "../Autosuggest/Autosuggest.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("SearchBar")}
@@ -31,9 +25,16 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["SearchBar.test.tsx"],
   }}
   argTypes={{
-    blockName: {
-      table: { disable: true },
-    },
+    action: { table: { disable: true } },
+    ariaLabel: { table: { disable: true } },
+    buttonOnClick: { table: { disable: true } },
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+    method: { table: { disable: true } },
+    onSubmit: { table: { disable: true } },
+    selectProps: { table: { disable: true } },
+    textInputProps: { table: { disable: true } },
+    textInputElement: { table: { disable: true } },
   }}
 />
 
@@ -41,178 +42,183 @@ import { getCategory } from "../../utils/componentCategories";
 
 <Description of={SearchBar} />
 
-The main wrapper element that is rendered is `<form>` DOM element. All the props
-passed to `SearchBar` will apply to the `<form>` element. If you need to update
-the children, make sure the props are passed to the appropriate components.
+The main wrapper element that is rendered is a `<form>` DOM element. All the
+props passed to `SearchBar` will apply to the `<form>` element and its children.
+The `SearchBar` component will render a `Select` component (optional),
+`TextInput` component, `Button` component, and `HelperErrorText` component
+based on the required props.
 
 The `Select` dropdown narrows the search within a specific category, typically
-title or author. You should only have one `Select` component at a time. If you
-need more options, link to the advance search page. Toggle the `Select` through
-the Controls.
-
-_Note: The `HelperErrorText` component should be the next direct sibling of the
-`SearchBar` component if it will be used._
-
-export const optionsGroup = {
-  Art: [
-    "Academic Painting",
-    "Amazing Painting",
-    "Ancient Statue",
-    "Basic Painting",
-    "Beautiful Statue",
-  ],
-  Bushes: [
-    "Blue-Hydrangea Bush",
-    "Blue-Hydrangea Start",
-    "Holly Bush",
-    "Orange-Tea-Olive Bush",
-    "Pink Camellia Bush",
-  ],
-  Clothing: ["3D Glasses", "Academy Uniform", "Acid-Washed Jacket"],
-  "DIY Recipes": ["Acorn Pochette", "Acoustic Guitar", "Angled Signpost"],
-  Flowers: [
-    "Black Cosmos",
-    "Blue Pansies",
-    "Gold Roses",
-    "Lily of the Valley",
-    "Orange Hyacinth",
-  ],
-  Fossils: [
-    "Acanthostega",
-    "Amber",
-    "Ammonite",
-    "Ankylo Skull",
-    "Anomalocaris",
-    "Australopith",
-  ],
-  Fruits: ["Apples", "Oranges", "Pears", "Coconuts", "Cherries"],
-  Furniture: [
-    "Abstract Wall",
-    "Accessories Stand",
-    "ACNH Switch",
-    "Air Circulator",
-  ],
-  Materials: [
-    "Acorn",
-    "Aquaris Fragment",
-    "Bamboo Piece",
-    "Boot",
-    "Clump of Weeds",
-  ],
-  NPC: ["Celeste", "Kicks", "Leif", "Redd", "Saharah"],
-  Songs: ["Agent K.K.", "Café K.K.", "Comrade K.K."],
-  Tools: [
-    "Axe",
-    "Bamboo Wand",
-    "Fishing Rod",
-    "Shovel",
-    "Slingshot",
-    "Watering Can",
-  ],
-  Villagers: ["Agnes", "Alfonso", "Anchovy", "Axel", "Aurora"],
-};
+title or author. Toggle the `Select` through the Controls.
 
-<Preview withToolbar>
+export const optionsGroup = [
+  "Art",
+  "Bushes",
+  "Clothing",
+  "Flowers",
+  "Fossils",
+  "Fruits",
+  "Furniture",
+  "Songs",
+  "Tools",
+  "Villagers",
+];
+
+<Canvas withToolbar>
   <Story
     name="Basic"
     args={{
       showHelperText: true,
       showSelect: true,
-      isErrorState: false,
-      disabledButton: false,
+      invalidText: "Could not find the item :(",
+      isDisabled: false,
+      isInvalid: false,
+      isRequired: false,
+      helperErrorText: "Search for items in Animal Crossing New Horizons",
     }}
   >
     {(args) => (
-      <div>
-        <SearchBar {...args}>
-          {args.showSelect && (
-            <Select
-              name="nhItemSearch"
-              ariaLabel="Filter Search"
-              id="select-searchBar"
-              isRequired={false}
-            >
-              {Object.keys(optionsGroup).map((nhOption) => (
-                <option key={nhOption} aria-selected={false}>
-                  {nhOption}
-                </option>
-              ))}
-            </Select>
-          )}
-          <Input
-            id="inputBasic"
-            ariaLabelledBy="buttonBasic"
-            placeholder="Item Search"
-            required={true}
-            type={InputTypes.text}
-            attributes={{
-              ["aria-describedby"]: "helperTextBasic",
-            }}
-            errored={args.isErrorState}
-          />
-          <Button
-            buttonType={ButtonTypes.Primary}
-            id="buttonBasic"
-            type="submit"
-            disabled={args.disabledButton}
-          >
-            <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
-            />
-            Search
-          </Button>
-        </SearchBar>
-        {args.showHelperText && (
-          <HelperErrorText id="helperTextBasic" isError={args.isErrorState}>
-            Search for items in Animal Crossing New Horizons
-          </HelperErrorText>
-        )}
-      </div>
+      <SearchBar
+        onSubmit={() => {}}
+        {...args}
+        selectProps={
+          args.showSelect && {
+            name: "nhItemSearch",
+            labelText: "Select a category",
+            optionsData: optionsGroup,
+          }
+        }
+        textInputProps={{
+          labelText: "Item Search",
+          placeholder: "Item Search",
+        }}
+        helperErrorText={args.showHelperText && args.helperErrorText}
+      />
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Basic" />
 
+## Component Props
+
+### Select Component
+
+To render an optional `Select` component, an object must be passed to the
+`selectProps` prop. It _must_ include `name`, `labelText`, and `optionsData`
+properties. The `labelText` value won't be rendered but will be used for its
+`aria-label` attribute.
+
+```
+const selectProps = {
+  name: "select-form-name",
+  labelText: "Select a category",
+  optionsData: optionsGroup,
+};
+
+// ...
+<SearchBar
+  onSubmit={() => {}}
+  selectProps={selectProps}
+  // ...
+/>
+```
+
+### TextInput Component
+
+To render the `TextInput` component, an object must be passed to the
+`textInputProps` prop. It _must_ include `labelText` and `placeholder`
+properties. The `labelText` value won't be rendered but will be used for its
+`aria-label` attribute.
+
+```
+const textInputProps = {
+  labelText: "Item Search",
+  placeholder: "Item Search",
+};
+
+// ...
+<SearchBar
+  onSubmit={() => {}}
+  textInputProps={textInputProps}
+  // ...
+/>
+```
+
+### Custom Input Component
+
+To render a custom input component, pass the component to the `textInputElement`
+prop. This will render your custom input component such as an `Autocomplete`
+component. Check the "Search Autocomplete" example for more details.
+
+```
+const textInputElement = <CustomInput {...props} />;
+
+// ...
+<SearchBar
+  onSubmit={() => {}}
+  textInputElement={textInputElement}
+  // ...
+/>
+```
+
+### Button Component
+
+A `Button` component will automatically be rendered for the `SearchBar`
+component. If you want to pass a callback function to the `Button`, use the
+`buttonOnClick` prop.
+
+### HelperErrorText Component
+
+To render the `HelperErrorText` component, pass a string value to the
+`helperErrorText` prop. For the invalid state when `isInvalid` is true, pass the
+error string in the `invalidText` prop.
+
+```
+const helperErrorText = "";
+
+// ...
+<SearchBar
+  onSubmit={() => {}}
+  helperErrorText="Search for items in Animal Crossing New Horizons"
+  // ...
+/>
+```
+
 ## Search Autocomplete
 
 While the Design System does not implement an `Autosuggest` or `Autocomplete`
 component, it does show a pattern for using the `react-autosuggest` package.
 In this example, we're using the `react-autosuggest` example found in the
 [Basic Autosuggest story](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/autosuggest--autosuggest-library)
-as the main component inside the `SearchBar` component. See the combination of
-the Autosuggest story along with this story to see how to compose all the
-components together.
+as the main component inside the `SearchBar` component.
+
+In order to render this custom input element in the `SearchBar` component, pass
+it in the `textInputElement` prop. Do not pass an object to the `textInputProps`
+prop since the custom input component passed in `textInputElement` will take
+precedence.
 
-<Preview withToolbar>
-  <Story name="Search Autocomplete">
+<Canvas withToolbar>
+  <Story
+    name="Search Autocomplete"
+    args={{
+      isInvalid: false,
+      isDisabled: false,
+      isRequired: false,
+    }}
+  >
     {(args) => (
       <div style={{ minHeight: "150px" }}>
-        <SearchBar {...args}>
-          {stories.SearchBarExample()}
-          <Button
-            buttonType={ButtonTypes.Primary}
-            id="autosuggest-button"
-            type="submit"
-          >
-            <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
-            />
-            Search
-          </Button>
-        </SearchBar>
-        <HelperErrorText id="autosuggest-helperText" isError={false}>
-          Select your home library. Start by typing the name of the library. Try{" "}
-          {'"'}ba{'"'}.
-        </HelperErrorText>
+        <SearchBar
+          onSubmit={() => {}}
+          textInputElement={stories.SearchBarExample()}
+          helperErrorText="Select your home library. Start by typing the name of the library. Try 'ba'."
+          {...args}
+        />
       </div>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 ## Other Examples
 
@@ -221,75 +227,41 @@ Here are the same possible states of the `SearchBar` component in static example
 
 ### Error State
 
-For the error state, make sure that the `errored` prop is passed to the `Input`
-component and the `isError` prop is passed to the `HelperErrorText` component.
-
-<Preview>
-  <div>
-    <SearchBar>
-      <Input
-        ariaLabelledBy="button-error-state"
-        id="input-error"
-        placeholder="Item Search"
-        required={true}
-        type={InputTypes.text}
-        errored={true}
-        attributes={{
-          ["aria-describedby"]: "error-helperText",
-        }}
-      />
-      <Button
-        buttonType={ButtonTypes.Primary}
-        id="button-error-state"
-        type="submit"
-      >
-        <Icon
-          name={IconNames.search}
-          decorative={true}
-          modifiers={["small", "icon-left"]}
-        />
-        Search
-      </Button>
-    </SearchBar>
-    <HelperErrorText id="error-helperText" isError={true}>
-      Sorry, we can't find that item!
-    </HelperErrorText>
-  </div>
-</Preview>
+For the error state, set the `isInvalid` prop to `true`. This will update the
+state for all its children. If you passed a custom input element, you must
+handle the error state yourself.
 
-<br />
+<Canvas>
+  <DSProvider>
+    <SearchBar
+      onSubmit={() => {}}
+      textInputProps={{
+        labelText: "Item Search",
+        placeholder: "Item Search",
+      }}
+      helperErrorText="Sorry, we can't find that item!"
+      invalidText="Could not find the item :("
+      isInvalid
+    />
+  </DSProvider>
+</Canvas>
 
 ### Disabled State
 
-For the disabled state, make sure to pass the `disabled` prop to the
-`Button` component.
-
-<Preview>
-  <div>
-    <SearchBar>
-      <Input
-        ariaLabelledBy="button-disabled"
-        id="input-disabled"
-        placeholder="Item Search"
-        required={true}
-        type={InputTypes.text}
-      />
-      <Button
-        buttonType={ButtonTypes.Primary}
-        id="button-disabled"
-        type="submit"
-        disabled={true}
-      >
-        <Icon
-          name={IconNames.search}
-          decorative={true}
-          modifiers={["small", "icon-left"]}
-        />
-        Search
-      </Button>
-    </SearchBar>
-    <HelperErrorText id="error-disabled">
-      Reason for disabled state.
-    </HelperErrorText>
-  </div>
-</Preview>
+For the disabled state, set the `isDisabled` prop to `true`. This will update
+the state for all its children. If you passed a custom input element, you must
+handle the disabled state yourself.
+
+<Canvas>
+  <DSProvider>
+    <SearchBar
+      obSubmit={() => {}}
+      textInputProps={{
+        labelText: "Item Search",
+        placeholder: "Item Search",
+      }}
+      helperErrorText="Reason for disabled state."
+      isDisabled
+    />
+  </DSProvider>
+</Canvas>