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

package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap

@@ -5,17 +5,13 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
   className=" css-0"
   id="radio-group-column"
 >
-  <legend
-    className=""
-  >
-    <span>
-      column
-    </span>
-    <span
+  <legend>
+    column
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -125,17 +121,13 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
   className=" css-0"
   id="radio-group-row"
 >
-  <legend
-    className=""
-  >
-    <span>
-      row
-    </span>
-    <span
+  <legend>
+    row
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -245,17 +237,13 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
   className=" css-0"
   id="radio-group-noLabel"
 >
-  <legend
-    className="sr-only"
-  >
-    <span>
-      no label
-    </span>
-    <span
+  <legend>
+    no label
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label="no label"
@@ -365,17 +353,13 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
   className=" css-0"
   id="radio-group-helperText"
 >
-  <legend
-    className=""
-  >
-    <span>
-      helperText
-    </span>
-    <span
+  <legend>
+    helperText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -483,7 +467,9 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
     <div
       aria-atomic={true}
       aria-live="off"
-      className="helper-text"
+      className=" css-0"
+      data-isinvalid={false}
+      id="helperText-helperErrorText"
     >
       helper text
     </div>
@@ -496,17 +482,13 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
   className=" css-0"
   id="radio-group-invalidText"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalidText
-    </span>
-    <span
+  <legend>
+    invalidText
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -616,12 +598,8 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
   className=" css-0"
   id="radio-group-optReq"
 >
-  <legend
-    className=""
-  >
-    <span>
-      no optional or required label
-    </span>
+  <legend>
+    no optional or required label
   </legend>
   <div
     aria-label={null}
@@ -731,17 +709,13 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
   className=" css-0"
   id="radio-group-required"
 >
-  <legend
-    className=""
-  >
-    <span>
-      required
-    </span>
-    <span
+  <legend>
+    required
+    <div
       className="css-0"
     >
-      Required
-    </span>
+      Optional
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -853,17 +827,13 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
   className=" css-0"
   id="radio-group-invalid"
 >
-  <legend
-    className=""
-  >
-    <span>
-      invalid
-    </span>
-    <span
+  <legend>
+    invalid
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -872,6 +842,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -922,6 +893,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-invalid=""
     >
       <input
         aria-invalid={true}
@@ -979,17 +951,13 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   className=" css-0"
   id="radio-group-disabled"
 >
-  <legend
-    className=""
-  >
-    <span>
-      disabled
-    </span>
-    <span
+  <legend>
+    disabled
+    <div
       className="css-0"
     >
       Optional
-    </span>
+    </div>
   </legend>
   <div
     aria-label={null}
@@ -998,6 +966,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   >
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}
@@ -1048,6 +1017,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
     </label>
     <label
       className="chakra-radio css-78joka"
+      data-disabled=""
     >
       <input
         aria-disabled={true}

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

@@ -19,12 +19,13 @@ const optionsGroup = [
   "Villagers",
 ];
 const selectProps = {
-  name: "nhItemSearch",
+  name: "selectName",
   labelText: "Select a category",
   optionsData: optionsGroup,
 };
 const textInputProps = {
   labelText: "Item Search",
+  name: "textInputName",
   placeholder: "Item Search",
 };
 const helperErrorText = "Search for items in Animal Crossing New Horizons";
@@ -102,6 +103,24 @@ describe("SearchBar", () => {
     expect(screen.queryByText(helperErrorText)).not.toBeInTheDocument();
   });
 
+  it("does not render the default invalid text from the Select or TextInput components", () => {
+    render(
+      <SearchBar
+        id="id"
+        labelText="searchbar"
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+        helperErrorText={helperErrorText}
+        invalidText={invalidText}
+        isInvalid
+      />
+    );
+    expect(
+      screen.queryByText("There is an error related to this field.")
+    ).not.toBeInTheDocument();
+  });
+
   it("calls the callback function on submit ", () => {
     render(
       <SearchBar

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

@@ -40,6 +40,11 @@ import DSProvider from "../../theme/provider";
 
 # SearchBar
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.4`    |
+| Latest            | `0.25.4`   |
+
 <Description of={SearchBar} />
 
 The main wrapper element that is rendered is a `<form>` DOM element. All the
@@ -51,6 +56,9 @@ based on the required props.
 The `Select` dropdown narrows the search within a specific category, typically
 title or author. Toggle the `Select` through the Controls.
 
+Note: The labels for the `Select` and `TextInput` components are not visible but
+aria-labels are used to make these children components accessible.
+
 export const optionsGroup = [
   "Art",
   "Bushes",
@@ -68,13 +76,13 @@ export const optionsGroup = [
   <Story
     name="Basic"
     args={{
-      showHelperText: true,
-      showSelect: true,
+      helperErrorText: "Search for items in Animal Crossing New Horizons",
       invalidText: "Could not find the item :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
-      helperErrorText: "Search for items in Animal Crossing New Horizons",
+      showHelperText: true,
+      showSelect: true,
     }}
   >
     {(args) => (
@@ -83,13 +91,14 @@ export const optionsGroup = [
         {...args}
         selectProps={
           args.showSelect && {
-            name: "nhItemSearch",
             labelText: "Select a category",
+            name: "selectName",
             optionsData: optionsGroup,
           }
         }
         textInputProps={{
           labelText: "Item Search",
+          name: "textInputName",
           placeholder: "Item Search",
         }}
         helperErrorText={args.showHelperText && args.helperErrorText}
@@ -127,14 +136,19 @@ const selectProps = {
 ### TextInput Component
 
 To render the `TextInput` component, an object must be passed to the
-`textInputProps` prop. It _must_ include `labelText` and `placeholder`
+`textInputProps` prop. It _must_ include `labelText`, `name`, and `placeholder`
 properties. The `labelText` value won't be rendered but will be used for its
-`aria-label` attribute.
+`aria-label` attribute. Optional values to pass include `onChange` and `value`.
 
 ```
 const textInputProps = {
   labelText: "Item Search",
+  name: "textInputName",
+  onChange: (event) => {
+    console.log(event.target.value);
+  },
   placeholder: "Item Search",
+  value: "Horizon"
 };
 
 // ...
@@ -202,8 +216,8 @@ precedence.
   <Story
     name="Search Autocomplete"
     args={{
-      isInvalid: false,
       isDisabled: false,
+      isInvalid: false,
       isRequired: false,
     }}
   >
@@ -237,9 +251,10 @@ handle the error state yourself.
       onSubmit={() => {}}
       textInputProps={{
         labelText: "Item Search",
+        name: "textInputName",
         placeholder: "Item Search",
       }}
-      helperErrorText="Sorry, we can't find that item!"
+      helperErrorText="This is the helper text!"
       invalidText="Could not find the item :("
       isInvalid
     />
@@ -258,6 +273,7 @@ handle the disabled state yourself.
       obSubmit={() => {}}
       textInputProps={{
         labelText: "Item Search",
+        name: "textInputName",
         placeholder: "Item Search",
       }}
       helperErrorText="Reason for disabled state."
@@ -265,3 +281,92 @@ handle the disabled state yourself.
     />
   </DSProvider>
 </Canvas>
+
+### TextInput and onSubmit Values
+
+_NOTE: open the browser console to see the values logged in the example below._
+
+It is possible to get certain values from the `SearchBar` component by passing
+callback functions as props.
+
+The keyword value in the `TextInput` component can be accessed by passing a
+function to the `onChange` property in the `textInputProp` prop. This is useful
+for validating the keyword the user entered.
+
+To get values when the form is submitted, you must:
+
+- pass values for the `name` property in the `selectProps` and `textInputProps`
+  prop objects.
+- get the values returned in the `onSubmit` callback function.
+
+In the following example, the `name` for the `Select` is "selectName" and the
+`name` for the `TextInput` is "textInputName". The `onSubmit` function can get
+the submitted values through the `event` object. In the example below, the
+values can be retrieved as `event.target.selectName.value` and
+`event.target.textInputName.value`.
+
+```tsx
+function SearchBarValueExample() {
+  const textInputOnChange = (event) => {
+    console.log(`onChange TextInput value: ${event.target.value}`);
+  };
+  const onSubmit = (event) => {
+    event.preventDefault();
+    console.log(`onSubmit Select value: ${event.target.searchName.value}`);
+    console.log(`onSubmit TextInput value ${event.target.textInputName.value}`);
+  };
+  return (
+    <SearchBar
+      onSubmit={onSubmit}
+      selectProps={{
+        labelText: "Select a category",
+        name: "selectName",
+        optionsData: optionsGroup,
+      }}
+      textInputProps={{
+        labelText: "Item Search",
+        name: "textInputName",
+        onChange: textInputOnChange,
+        placeholder: "Item Search",
+      }}
+      helperErrorText="Search for an item"
+      invalidText="Could not find the item :("
+    />
+  );
+}
+```
+
+export function SearchBarValueExample() {
+  const textInputOnChange = (event) => {
+    console.log(`onChange TextInput value: ${event.target.value}`);
+  };
+  const onSubmit = (event) => {
+    event.preventDefault();
+    console.log(`onSubmit Select value: ${event.target.selectName.value}`);
+    console.log(`onSubmit TextInput value ${event.target.textInputName.value}`);
+  };
+  return (
+    <SearchBar
+      onSubmit={onSubmit}
+      selectProps={{
+        labelText: "Select a category",
+        name: "selectName",
+        optionsData: optionsGroup,
+      }}
+      textInputProps={{
+        labelText: "Item Search",
+        name: "textInputName",
+        onChange: textInputOnChange,
+        placeholder: "Item Search",
+      }}
+      helperErrorText="Search for an item"
+      invalidText="Could not find the item :("
+    />
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <SearchBarValueExample />
+  </DSProvider>
+</Canvas>

package/src/components/SearchBar/SearchBar.tsx

@@ -20,7 +20,14 @@ interface SelectProps {
 }
 interface TextInputProps {
   labelText: string;
+  name: string;
+  onChange?: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => void;
   placeholder: string;
+  value?: string;
 }
 
 export interface SearchBarProps {
@@ -51,9 +58,6 @@ export interface SearchBarProps {
   onSubmit: (event: React.FormEvent) => void;
   /** Required props to render a `Select` element. */
   selectProps?: SelectProps | undefined;
-  /** Will be used to visually display the label text for this
-   * `SearchBar` component. False by default. */
-  showLabel?: boolean;
   /** Custom input element to render instead of a `TextInput` element. */
   textInputElement?: JSX.Element;
   /** Required props to render a `TextInput` element. */
@@ -83,7 +87,14 @@ export default function SearchBar(props: SearchBarProps) {
     textInputProps,
   } = props;
   const styles = useMultiStyleConfig("SearchBar", { hasSelect: selectProps });
-  const stateProps = { isDisabled, isInvalid, isRequired };
+  const stateProps = {
+    helperText: "",
+    isDisabled,
+    isInvalid,
+    isRequired,
+    showHelperInvalidText: false,
+    showLabel: false,
+  };
   const helperErrorTextID = generateUUID();
   const ariaDescribedby = helperErrorTextID;
   const footnote = isInvalid ? invalidText : helperErrorText;
@@ -94,8 +105,6 @@ export default function SearchBar(props: SearchBarProps) {
       id={generateUUID()}
       name={selectProps?.name}
       labelText={selectProps?.labelText}
-      showLabel={false}
-      helperText=""
       type={SelectTypes.SearchBar}
       {...stateProps}
     >
@@ -112,14 +121,15 @@ export default function SearchBar(props: SearchBarProps) {
       id={generateUUID()}
       labelText={textInputProps?.labelText}
       placeholder={textInputProps?.placeholder}
+      onChange={textInputProps?.onChange}
+      name={textInputProps?.name}
       type={TextInputTypes.text}
       variantType={
         selectElem
           ? TextInputVariants.SearchBarSelect
           : TextInputVariants.SearchBar
       }
-      helperText=""
-      showLabel={false}
+      value={textInputProps?.value}
       {...stateProps}
     />
   );
@@ -130,7 +140,7 @@ export default function SearchBar(props: SearchBarProps) {
       buttonType={ButtonTypes.SearchBar}
       type="submit"
       onClick={buttonOnClick}
-      disabled={isDisabled}
+      isDisabled={isDisabled}
     >
       <Icon
         name={IconNames.Search}
@@ -142,7 +152,7 @@ export default function SearchBar(props: SearchBarProps) {
   );
   // Render the `HelperErrorText` component.
   const helperErrorTextElem = footnote && (
-    <HelperErrorText id={helperErrorTextID} isError={isInvalid}>
+    <HelperErrorText id={helperErrorTextID} isInvalid={isInvalid}>
       {footnote}
     </HelperErrorText>
   );

package/src/components/Select/Select.test.tsx

@@ -149,6 +149,18 @@ describe("Select", () => {
     ).toBeInTheDocument();
   });
 
+  it("does not render the error text when 'isInvalid' is true and 'showHelperInvalidText' is false", () => {
+    render(
+      <Select {...baseProps} showHelperInvalidText={false} isInvalid>
+        {baseOptions}
+      </Select>
+    );
+
+    expect(
+      screen.queryByText("There is an error related to this field.")
+    ).not.toBeInTheDocument();
+  });
+
   it("renders custom error text when 'invalidText' prop is passed and 'isInvalid' prop is set to true", () => {
     render(
       <Select

package/src/components/Select/Select.tsx

@@ -38,6 +38,8 @@ export interface SelectProps {
   /** The callback function to get the selected value.
    * Should be passed along with `value` for controlled components. */
   onChange?: (event: React.FormEvent) => void;
+  /** Offers the ability to hide the helper/invalid text. */
+  showHelperInvalidText?: boolean;
   /** Offers the ability to show the select's label onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
@@ -70,6 +72,7 @@ const Select = React.forwardRef<
     labelText,
     name,
     onChange,
+    showHelperInvalidText = true,
     showLabel = true,
     showOptReqLabel = true,
     type = SelectTypes.Default,
@@ -131,9 +134,9 @@ const Select = React.forwardRef<
       >
         {children}
       </ChakraSelect>
-      {footnote && (
+      {footnote && showHelperInvalidText && (
         <Box __css={styles.helper} aria-disabled={isDisabled}>
-          <HelperErrorText isError={isInvalid} id={id + `-helperText`}>
+          <HelperErrorText isInvalid={isInvalid} id={id + `-helperText`}>
             {footnote}
           </HelperErrorText>
         </Box>

package/src/components/Select/SelectTypes.tsx

@@ -1,3 +1,4 @@
+// Only used for internal purposes.
 export enum SelectTypes {
   Default = "default",
   SearchBar = "searchbar",