@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/components/SearchBar/SearchBar.tsx

@@ -1,24 +1,19 @@
-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 {
-  labelText: string;
-  name: string;
-  optionsData: string[];
-}
-interface TextInputProps {
+interface BaseProps {
   labelText: string;
   name: string;
   onChange?: (
@@ -26,6 +21,12 @@ interface TextInputProps {
       | React.ChangeEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLTextAreaElement>
   ) => void;
+}
+// Internal interfaces that are used only for `SearchBar` props.
+export interface SelectProps extends BaseProps {
+  optionsData: string[];
+}
+export interface TextInputProps extends BaseProps {
   placeholder: string;
   value?: string;
 }
@@ -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,
@@ -95,19 +106,27 @@ export default function SearchBar(props: SearchBarProps) {
     showHelperInvalidText: false,
     showLabel: false,
   };
-  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
-      id={generateUUID()}
-      name={selectProps?.name}
+      id={`searchbar-select-${id}`}
       labelText={selectProps?.labelText}
+      name={selectProps?.name}
+      onChange={selectProps?.onChange}
       type={SelectTypes.SearchBar}
       {...stateProps}
     >
@@ -121,11 +140,11 @@ export default function SearchBar(props: SearchBarProps) {
   // Render the `TextInput` component.
   const textInputNative = textInputProps && (
     <TextInput
-      id={generateUUID()}
+      id={`searchbar-textinput-${id}`}
       labelText={textInputProps?.labelText}
-      placeholder={textInputPlaceholder}
-      onChange={textInputProps?.onChange}
       name={textInputProps?.name}
+      onChange={textInputProps?.onChange}
+      placeholder={textInputPlaceholder}
       type={TextInputTypes.text}
       variantType={
         selectElem
@@ -139,49 +158,50 @@ export default function SearchBar(props: SearchBarProps) {
   // Render the `Button` component.
   const buttonElem = (
     <Button
-      id={generateUUID()}
-      buttonType={ButtonTypes.SearchBar}
-      type="submit"
-      onClick={buttonOnClick}
+      additionalStyles={searchBarButtonStyles}
+      buttonType={buttonType}
+      id={`searchbar-button-${id}`}
       isDisabled={isDisabled}
+      onClick={buttonOnClick}
+      type="submit"
     >
       <Icon
+        align={IconAlign.Left}
+        id={`searchbar-icon-${id}`}
         name={IconNames.Search}
         size={IconSizes.Small}
-        align={IconAlign.Left}
       />
       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.
+  // If a custom input element was passed, use that element
+  // instead of the DS `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={`searchbar-form-${id}`}
+        className={className}
+        role="search"
+        aria-label={finalAriaLabel}
+        onSubmit={onSubmit}
+        method={method}
+        action={action}
+        __css={styles}
+      >
         {selectElem}
         {textInputElem}
         {buttonElem}
       </Box>
-      {helperErrorTextElem}
-    </Box>
+    </ComponentWrapper>
   );
 }

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

@@ -1,16 +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 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")}
@@ -19,17 +25,40 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A549",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A549",
     },
     jest: ["Select.test.tsx"],
   }}
   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 },
   }}
 />
 
@@ -38,7 +67,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Select} />
 
@@ -63,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) => (
@@ -88,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
 
@@ -102,8 +137,8 @@ text within the `label` element.
   <Story name="Labelling Variations">
     <VStack align="stretch" spacing={8}>
       <Select
-        labelText="What is your favorite color?"
         helperText="Display the label"
+        labelText="What is your favorite color?"
         name="color"
       >
         <option value="red">Red</option>
@@ -113,8 +148,8 @@ text within the `label` element.
         <option value="white">White</option>
       </Select>
       <Select
-        labelText="What is your favorite color?"
         helperText="Do not display the label"
+        labelText="What is your favorite color?"
         name="color"
         showLabel={false}
       >
@@ -125,10 +160,10 @@ text within the `label` element.
         <option value="white">White</option>
       </Select>
       <Select
-        labelText="What is your favorite color?"
         helperText="Display the Required/Optional text"
-        name="color"
         isRequired
+        labelText="What is your favorite color?"
+        name="color"
       >
         <option value="red">Red</option>
         <option value="green">Green</option>
@@ -137,11 +172,11 @@ text within the `label` element.
         <option value="white">White</option>
       </Select>
       <Select
-        labelText="What is your favorite color?"
         helperText="Do not display the Required/Optional text"
+        isRequired
+        labelText="What is your favorite color?"
         name="color"
         showOptReqLabel={false}
-        isRequired
       >
         <option value="red">Red</option>
         <option value="green">Green</option>
@@ -158,11 +193,11 @@ text within the `label` element.
 <Canvas>
   <DSProvider>
     <Select
-      labelText="What is your favorite color?"
       helperText="This is the helper text."
       invalidText="This is the error text :("
-      name="color"
       isInvalid
+      labelText="What is your favorite color?"
+      name="color"
     >
       <option value="red">Red</option>
       <option value="green">Green</option>
@@ -178,11 +213,11 @@ text within the `label` element.
 <Canvas>
   <DSProvider>
     <Select
-      labelText="What is your favorite color?"
       helperText="This is the helper text."
       invalidText="This is the error text :("
-      name="color"
       isDisabled
+      labelText="What is your favorite color?"
+      name="color"
     >
       <option value="red">Red</option>
       <option value="green">Green</option>
@@ -198,57 +233,133 @@ text within the `label` element.
 ### Controlled Component using `value` and `onChange` props
 
 If your application uses controlled React components and the DS `Select`
-component must be controlled, you can control and extract the data through the
+component must be controlled, you can pass and extract the value through the
 `value` and `onChange` props. This will be called every time a new `option`
 value is selected.
 
+Try it out: open up the browser's console to see new values being logged on
+each change.
+
 ```jsx
-const value = "red";
-const onChange = (e) => {
-  // This will return the value selected through the event object.
-  console.log(e.target.value);
-};
-// ...
-
-<Select
-  labelText="What is your favorite color?"
-  helperText="This is the helper text."
-  name="color"
-  value={value}
-  onChange={onChange}
->
-  <option value="red">Red</option>
-  <option value="green">Green</option>
-  <option value="blue">Blue</option>
-  <option value="black">Black</option>
-  <option value="white">White</option>
-</Select>;
+export function SelectControlledExample() {
+  const [value, setValue] = React.useState();
+  const onChange = (e) => {
+    // This will return the value selected through the event object.
+    console.log(e.target.value);
+    setValue(e.target.value);
+  };
+  return (
+    <Select
+      helperText="This is the helper text."
+      labelText="What is your favorite color?"
+      name="color"
+      onChange={onChange}
+      value={value}
+    >
+      <option value="red">Red</option>
+      <option value="green">Green</option>
+      <option value="blue">Blue</option>
+      <option value="black">Black</option>
+      <option value="white">White</option>
+    </Select>
+  );
+}
 ```
 
+export function SelectControlledExample() {
+  const [value, setValue] = React.useState();
+  const onChange = (e) => {
+    // This will return the value selected through the event object.
+    console.log("Controlled value:", e.target.value);
+    setValue(e.target.value);
+  };
+  return (
+    <Select
+      helperText="This is the helper text."
+      labelText="What is your favorite color?"
+      name="color"
+      onChange={onChange}
+      value={value}
+    >
+      <option value="red">Red</option>
+      <option value="green">Green</option>
+      <option value="blue">Blue</option>
+      <option value="black">Black</option>
+      <option value="white">White</option>
+    </Select>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <SelectControlledExample />
+  </DSProvider>
+</Canvas>
+
 ### Uncontrolled Component using `ref`s
 
 If your application uses uncontrolled components, you can pass a React `ref`
-prop to the DS Select component to get the selected value from the DOM.
+prop to the DS Select component to get the selected value from the DOM. Note
+that this example uses a `Form` and a `Button` to submit the form, only then
+will the value be available.
 
-```jsx
-const selectRef = React.createRef<HTMLSelectElement>();
-// ...
-<Select
-  labelText="What is your favorite color?"
-  helperText="This is the helper text."
-  name="color"
->
-  <option value="red">Red</option>
-  <option value="green">Green</option>
-  <option value="blue">Blue</option>
-  <option value="black">Black</option>
-  <option value="white">White</option>
-</Select>
+Try it out: open up the browser's console to see new values being logged on
+each change.
 
-// ...
-// Get the value through:
-const onSubmit = () => {
-  // ...
-  const selectValue = selectRef.current.value;
-};
+```jsx
+export function SelectUncontrolledExample() {
+  const selectRef = React.createRef();
+  const onSubmit = () => {
+    const selectValue = selectRef.current.value;
+    console.log("Using uncontrolled ref:", selectValue);
+  };
+  return (
+    <Form>
+      <Select
+        helperText="This is the helper text."
+        labelText="What is your favorite color?"
+        name="color"
+        ref={selectRef}
+      >
+        <option value="red">Red</option>
+        <option value="green">Green</option>
+        <option value="blue">Blue</option>
+        <option value="black">Black</option>
+        <option value="white">White</option>
+      </Select>
+      <Button onClick={onSubmit}>Submit</Button>
+    </Form>
+  );
+}
 ```
+
+export function SelectUncontrolledExample() {
+  const selectRef = React.createRef();
+  const onSubmit = () => {
+    const selectValue = selectRef.current.value;
+    console.log("Using uncontrolled ref:", selectValue);
+  };
+  return (
+    <Form>
+      <Select
+        helperText="This is the helper text."
+        labelText="What is your favorite color?"
+        name="color"
+        ref={selectRef}
+      >
+        <option value="red">Red</option>
+        <option value="green">Green</option>
+        <option value="blue">Blue</option>
+        <option value="black">Black</option>
+        <option value="white">White</option>
+      </Select>
+      <Button onClick={onSubmit}>Submit</Button>
+    </Form>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <SelectUncontrolledExample />
+  </DSProvider>
+</Canvas>