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

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";
@@ -19,22 +19,39 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
     },
     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 },
   }}
 />
 
@@ -43,7 +60,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.9`   |
 
 <Description of={SearchBar} />
 
@@ -74,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 && {
@@ -101,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
 
@@ -182,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`
@@ -226,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>
@@ -254,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
     />
@@ -270,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._
@@ -312,7 +390,7 @@ function SearchBarValueExample() {
   };
   const onSubmit = (event) => {
     event.preventDefault();
-    console.log(`onSubmit Select value: ${event.target.searchName.value}`);
+    console.log(`onSubmit Select value: ${event.target.selectName.value}`);
     console.log(`onSubmit TextInput value ${event.target.textInputName.value}`);
   };
   return (
@@ -329,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 :("
     />
   );
@@ -359,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,8 +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
@@ -120,7 +143,7 @@ export default function SearchBar(props: SearchBarProps) {
     <TextInput
       id={generateUUID()}
       labelText={textInputProps?.labelText}
-      placeholder={textInputProps?.placeholder}
+      placeholder={textInputPlaceholder}
       onChange={textInputProps?.onChange}
       name={textInputProps?.name}
       type={TextInputTypes.text}
@@ -136,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}
@@ -150,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>
   );
 }