@nypl/design-system-react-components 0.25.8 → 0.25.9

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

@@ -28,14 +28,14 @@ const textInputProps = {
   name: "textInputName",
   placeholder: "Item Search",
 };
-const helperErrorText = "Search for items in Animal Crossing New Horizons";
+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
-        helperErrorText={helperErrorText}
+        helperText={helperText}
         id="id"
         invalidText={invalidText}
         labelText="Searchbar"
@@ -55,7 +55,7 @@ describe("SearchBar", () => {
   it("renders the basic form", () => {
     render(
       <SearchBar
-        helperErrorText={helperErrorText}
+        helperText={helperText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
@@ -74,7 +74,7 @@ describe("SearchBar", () => {
   it("renders an optional Select component", () => {
     render(
       <SearchBar
-        helperErrorText={helperErrorText}
+        helperText={helperText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
@@ -89,7 +89,7 @@ describe("SearchBar", () => {
   it("renders the invalid text in the invalid state", () => {
     render(
       <SearchBar
-        helperErrorText={helperErrorText}
+        helperText={helperText}
         id="id"
         invalidText={invalidText}
         isInvalid
@@ -100,13 +100,13 @@ describe("SearchBar", () => {
       />
     );
     expect(screen.getByText(invalidText)).toBeInTheDocument();
-    expect(screen.queryByText(helperErrorText)).not.toBeInTheDocument();
+    expect(screen.queryByText(helperText)).not.toBeInTheDocument();
   });
 
   it("does not render the default invalid text from the Select or TextInput components", () => {
     render(
       <SearchBar
-        helperErrorText={helperErrorText}
+        helperText={helperText}
         id="id"
         invalidText={invalidText}
         isInvalid
@@ -124,7 +124,7 @@ describe("SearchBar", () => {
   it("calls the callback function on submit ", () => {
     render(
       <SearchBar
-        helperErrorText={helperErrorText}
+        helperText={helperText}
         id="id"
         labelText="searchBar"
         onSubmit={searchBarSubmit}
@@ -174,7 +174,7 @@ describe("SearchBar", () => {
     const basic = renderer
       .create(
         <SearchBar
-          helperErrorText={helperErrorText}
+          helperText={helperText}
           id="basic"
           labelText="searchbar"
           onSubmit={jest.fn()}
@@ -185,7 +185,7 @@ describe("SearchBar", () => {
     const withSelect = renderer
       .create(
         <SearchBar
-          helperErrorText={helperErrorText}
+          helperText={helperText}
           id="withSelect"
           labelText="searchbar"
           onSubmit={jest.fn()}
@@ -238,6 +238,50 @@ describe("SearchBar", () => {
         />
       )
       .toJSON();
+    const noBrandButtonType = renderer
+      .create(
+        <SearchBar
+          id="noBrandButtonType"
+          isDisabled
+          isRequired
+          labelText="searchbar"
+          noBrandButtonType={true}
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const withHeading = renderer
+      .create(
+        <SearchBar
+          id="withHeading"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          headingText="A Heading"
+        />
+      )
+      .toJSON();
+    const withDescription = renderer
+      .create(
+        <SearchBar
+          id="withDescription"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          descriptionText="A description"
+        />
+      )
+      .toJSON();
+    const withHeadingAndDescription = renderer
+      .create(
+        <SearchBar
+          id="withHeadingAndDescription"
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          headingText="A Heading"
+          descriptionText="A description"
+        />
+      )
+      .toJSON();
 
     expect(basic).toMatchSnapshot();
     expect(withSelect).toMatchSnapshot();
@@ -245,5 +289,9 @@ describe("SearchBar", () => {
     expect(invalidState).toMatchSnapshot();
     expect(disabledState).toMatchSnapshot();
     expect(requiredState).toMatchSnapshot();
+    expect(noBrandButtonType).toMatchSnapshot();
+    expect(withHeading).toMatchSnapshot();
+    expect(withDescription).toMatchSnapshot();
+    expect(withHeadingAndDescription).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,10 @@
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import SearchBar from "./SearchBar";
@@ -24,16 +24,34 @@ import DSProvider from "../../theme/provider";
     jest: ["SearchBar.test.tsx"],
   }}
   argTypes={{
-    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 } },
+    action: { control: false },
+    ariaLabel: { control: false },
+    buttonOnClick: {
+      control: false,
+      table: { defaultValue: { summary: "null" } },
+    },
+    className: { control: false },
+    id: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    method: { control: false },
+    onSubmit: { control: false },
+    selectProps: { control: false },
+    showHelperText: {
+      description: "Only used for Storybook",
+    },
+    showSelect: {
+      description: "Only used for Storybook",
+    },
+    textInputElement: { control: false },
+    textInputProps: { control: false },
   }}
 />
 
@@ -42,7 +60,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.6`   |
+| Latest            | `0.25.9`   |
 
 <Description of={SearchBar} />
 
@@ -73,20 +91,30 @@ export const optionsGroup = [
 
 <Canvas withToolbar>
   <Story
-    name="Basic"
+    name="SearchBar with Controls"
     args={{
-      helperErrorText: "Search for items in Animal Crossing New Horizons",
+      action: undefined,
+      buttonOnClick: undefined,
+      className: undefined,
+      helperText: "Search for items in Animal Crossing New Horizons",
+      id: "searchBar-id",
       invalidText: "Could not find the item :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
+      labelText: "SearchBar Label",
+      method: undefined,
+      noBrandButtonType: false,
+      onSubmit: () => {},
+      selectProps: undefined,
       showHelperText: true,
       showSelect: true,
+      textInputElement: undefined,
+      textInputProps: undefined,
     }}
   >
     {(args) => (
       <SearchBar
-        onSubmit={() => {}}
         {...args}
         selectProps={
           args.showSelect && {
@@ -100,13 +128,13 @@ export const optionsGroup = [
           name: "textInputName",
           placeholder: "Item Search",
         }}
-        helperErrorText={args.showHelperText && args.helperErrorText}
+        helperText={args.showHelperText && args.helperText}
       />
     )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic" />
+<ArgsTable story="SearchBar with Controls" />
 
 ## Component Props
 
@@ -181,23 +209,54 @@ 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.
 
+It's also possible to render the `ButtonType.NoBrand` variant style when the
+`noBrandButtonType` prop is set to `true`. The `ButtonType.Primary` variant
+style is used by default.
+
 ### 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.
+To render the `HelperErrorText` component, pass a string or HTML to the
+`helperText` prop. For the invalid state when `isInvalid` is true, pass the
+error string or HTML in the `invalidText` prop.
 
 ```
-const helperErrorText = "";
+const helperText = "";
 
 // ...
 <SearchBar
   onSubmit={() => {}}
-  helperErrorText="Search for items in Animal Crossing New Horizons"
+  helperText="Search for items in <b>Animal Crossing New Horizons</b>."
   // ...
 />
 ```
 
+<Canvas>
+  <DSProvider>
+    <SearchBar
+      descriptionText="The helper text below contains HTML in a string."
+      helperText="Search for items in <b>Animal Crossing New Horizons</b>."
+      onSubmit={() => {}}
+      textInputProps={{
+        labelText: "Item Search",
+        name: "textInputName",
+        placeholder: "Item Search",
+      }}
+    />
+    <br />
+    <SearchBar
+      descriptionText="The invalid text below contains HTML in a string."
+      isInvalid
+      invalidText="Could <b>not</b> find the item <b>:(</b>"
+      onSubmit={() => {}}
+      textInputProps={{
+        labelText: "Item Search",
+        name: "textInputName",
+        placeholder: "Item Search",
+      }}
+    />
+  </DSProvider>
+</Canvas>
+
 ## Search Autocomplete
 
 While the Design System does not implement an `Autosuggest` or `Autocomplete`
@@ -225,7 +284,7 @@ precedence.
         <SearchBar
           onSubmit={() => {}}
           textInputElement={stories.SearchBarExample()}
-          helperErrorText="Select your home library. Start by typing the name of the library. Try 'ba'."
+          helperText="Select your home library. Start by typing the name of the library. Try 'ba'."
           {...args}
         />
       </div>
@@ -253,7 +312,7 @@ handle the error state yourself.
         name: "textInputName",
         placeholder: "Item Search",
       }}
-      helperErrorText="This is the helper text!"
+      helperText="This is the helper text!"
       invalidText="Could not find the item :("
       isInvalid
     />
@@ -269,18 +328,38 @@ handle the disabled state yourself.
 <Canvas>
   <DSProvider>
     <SearchBar
-      obSubmit={() => {}}
+      onSubmit={() => {}}
       textInputProps={{
         labelText: "Item Search",
         name: "textInputName",
         placeholder: "Item Search",
       }}
-      helperErrorText="Reason for disabled state."
+      helperText="Reason for disabled state."
       isDisabled
     />
   </DSProvider>
 </Canvas>
 
+### With Heading and Description Text
+
+Use the `descriptionText` and `headingText` props to render a heading and
+description above the main `SearchBar` form component.
+
+<Canvas>
+  <DSProvider>
+    <SearchBar
+      descriptionText="This is the description for this `SearchBar` instance."
+      headingText="Heading for this `SearchBar`"
+      onSubmit={() => {}}
+      textInputProps={{
+        labelText: "Item Search",
+        name: "textInputName",
+        placeholder: "Item Search",
+      }}
+    />
+  </DSProvider>
+</Canvas>
+
 ### TextInput and onSubmit Values
 
 _NOTE: open the browser console to see the values logged in the example below._
@@ -328,7 +407,7 @@ function SearchBarValueExample() {
         onChange: textInputOnChange,
         placeholder: "Item Search",
       }}
-      helperErrorText="Search for an item"
+      helperText="Search for an item"
       invalidText="Could not find the item :("
     />
   );
@@ -358,7 +437,7 @@ export function SearchBarValueExample() {
         onChange: textInputOnChange,
         placeholder: "Item Search",
       }}
-      helperErrorText="Search for an item"
+      helperText="Search for an item"
       invalidText="Could not find the item :("
     />
   );

package/src/components/SearchBar/SearchBar.tsx

@@ -1,16 +1,17 @@
-import * as React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import * as React from "react";
 
-import generateUUID from "../../helpers/generateUUID";
-import Select from "../Select/Select";
-import TextInput from "../TextInput/TextInput";
-import { TextInputTypes, TextInputVariants } from "../TextInput/TextInputTypes";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
+import ComponentWrapper from "../ComponentWrapper/ComponentWrapper";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import Icon from "../Icons/Icon";
 import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import Select from "../Select/Select";
 import { SelectTypes } from "../Select/SelectTypes";
+import TextInput from "../TextInput/TextInput";
+import { TextInputTypes, TextInputVariants } from "../TextInput/TextInputTypes";
+import generateUUID from "../../helpers/generateUUID";
 
 // Internal interfaces that are used only for `SearchBar` props.
 interface SelectProps {
@@ -37,13 +38,17 @@ export interface SearchBarProps {
   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. */
-  helperErrorText?: string;
+  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?: string;
+  invalidText?: HelperErrorTextType;
   /** Sets children form components in the disabled state. */
   isDisabled?: boolean;
   /** Sets children form components in the error state. */
@@ -54,6 +59,9 @@ export interface SearchBarProps {
   labelText: string;
   /** Adds 'method' property to the `form` element. */
   method?: string;
+  /** Sets the `Button` variant type to `ButtonTypes.NoBrand` when true;
+   * false by default which sets the type to `ButtonTypes.Primary`. */
+  noBrandButtonType?: boolean;
   /** Handler function when the form is submitted. */
   onSubmit: (event: React.FormEvent) => void;
   /** Required props to render a `Select` element. */
@@ -73,7 +81,9 @@ export default function SearchBar(props: SearchBarProps) {
     action,
     buttonOnClick = null,
     className,
-    helperErrorText,
+    descriptionText,
+    headingText,
+    helperText,
     id = generateUUID(),
     invalidText,
     isDisabled = false,
@@ -81,6 +91,7 @@ export default function SearchBar(props: SearchBarProps) {
     isRequired = false,
     labelText,
     method,
+    noBrandButtonType = false,
     onSubmit,
     selectProps,
     textInputElement,
@@ -97,11 +108,20 @@ export default function SearchBar(props: SearchBarProps) {
   };
   const helperErrorTextID = generateUUID();
   const ariaDescribedby = helperErrorTextID;
-  const footnote = isInvalid ? invalidText : helperErrorText;
+  const footnote = isInvalid ? invalidText : helperText;
   const finalAriaLabel = footnote ? `${labelText} - ${footnote}` : labelText;
   const textInputPlaceholder = `${textInputProps?.placeholder} ${
     isRequired ? "(Required)" : ""
   }`;
+  const buttonType = noBrandButtonType
+    ? ButtonTypes.NoBrand
+    : ButtonTypes.Primary;
+  const searchBarButtonStyles = {
+    borderLeftRadius: "none",
+    borderRightRadius: { base: "none", md: "sm" },
+    lineHeight: "1.70",
+    marginBottom: "auto",
+  };
   // Render the `Select` component.
   const selectElem = selectProps && (
     <Select
@@ -139,11 +159,12 @@ export default function SearchBar(props: SearchBarProps) {
   // Render the `Button` component.
   const buttonElem = (
     <Button
+      additionalStyles={searchBarButtonStyles}
+      buttonType={buttonType}
       id={generateUUID()}
-      buttonType={ButtonTypes.SearchBar}
-      type="submit"
-      onClick={buttonOnClick}
       isDisabled={isDisabled}
+      onClick={buttonOnClick}
+      type="submit"
     >
       <Icon
         name={IconNames.Search}
@@ -153,35 +174,35 @@ export default function SearchBar(props: SearchBarProps) {
       Search
     </Button>
   );
-  // Render the `HelperErrorText` component.
-  const helperErrorTextElem = footnote && (
-    <HelperErrorText id={helperErrorTextID} isInvalid={isInvalid}>
-      {footnote}
-    </HelperErrorText>
-  );
   // If a custom input element was passed, use that instead of the
   // `TextInput` component.
   const textInputElem = textInputElement || textInputNative;
 
   return (
-    <Box
-      as="form"
+    <ComponentWrapper
+      descriptionText={descriptionText}
+      headingText={headingText}
+      helperText={helperText}
       id={id}
-      className={className}
-      role="search"
-      aria-label={finalAriaLabel}
-      aria-describedby={ariaDescribedby}
-      onSubmit={onSubmit}
-      method={method}
-      action={action}
-      __css={styles}
+      invalidText={invalidText}
+      isInvalid={isInvalid}
     >
-      <Box __css={styles.topRow}>
+      <Box
+        as="form"
+        id={`${id}-form`}
+        className={className}
+        role="search"
+        aria-label={finalAriaLabel}
+        aria-describedby={ariaDescribedby}
+        onSubmit={onSubmit}
+        method={method}
+        action={action}
+        __css={styles}
+      >
         {selectElem}
         {textInputElem}
         {buttonElem}
       </Box>
-      {helperErrorTextElem}
-    </Box>
+    </ComponentWrapper>
   );
 }

package/src/components/Select/Select.stories.mdx

@@ -1,18 +1,22 @@
+import { VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { VStack } from "@chakra-ui/react";
-import Select from "./Select";
-import Form from "../Form/Form";
 import Button from "../Button/Button";
+import Form from "../Form/Form";
+import Select from "./Select";
+import { SelectTypes } from "./SelectTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(SelectTypes, "SelectTypes");
 
 <Meta
   title={getCategory("Select")}
@@ -27,10 +31,34 @@ import DSProvider from "../../theme/provider";
   }}
   argTypes={{
     children: { table: { disable: true } },
-    id: { table: { disable: true } },
-    name: { table: { disable: true } },
-    onChange: { table: { disable: true } },
-    value: { table: { disable: true } },
+    id: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    name: { control: false },
+    key: { table: { disable: true } },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: true } },
+    },
+    showOptReqLabel: {
+      table: { defaultValue: { summary: true } },
+    },
+    type: {
+      control: false,
+      table: { defaultValue: { summary: "SelectTypes.Default" } },
+    },
+    value: { control: false },
   }}
 />
 
@@ -39,7 +67,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Select} />
 
@@ -64,17 +92,23 @@ elements, but the select options _need_ to be child `<option>` HTML elements.
 
 <Canvas withToolbar>
   <Story
-    name="Select"
+    name="Select with Controls"
     args={{
+      className: undefined,
       helperText: "This is the helper text.",
+      id: "select-id",
       invalidText: "This is the error text :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
       labelText: "What is your favorite color?",
       name: "color",
+      onChange: undefined,
+      showHelperInvalidText: undefined,
       showLabel: true,
       showOptReqLabel: true,
+      type: SelectTypes.Default,
+      value: undefined,
     }}
   >
     {(args) => (
@@ -89,7 +123,7 @@ elements, but the select options _need_ to be child `<option>` HTML elements.
   </Story>
 </Canvas>
 
-<ArgsTable story="Select" />
+<ArgsTable story="Select with Controls" />
 
 ## Labelling Variations