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

package/src/components/RadioGroup/RadioGroup.tsx

@@ -16,8 +16,6 @@ import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface RadioGroupProps {
-  /** Any child node passed to the component. */
-  children: React.ReactNode;
   /** Additional class name. */
   className?: string;
   /** Populates the initial value of the input */
@@ -58,101 +56,102 @@ export const onChangeDefault = () => {
   return;
 };
 
-const RadioGroup = React.forwardRef<HTMLInputElement, RadioGroupProps>(
-  (props, ref?) => {
-    const {
-      children,
-      className = "",
-      defaultValue,
-      helperText,
-      id = generateUUID(),
-      invalidText,
-      isDisabled = false,
-      isInvalid = false,
-      isRequired = false,
-      labelText,
-      layout = RadioGroupLayoutTypes.Column,
-      name,
-      onChange = onChangeDefault,
-      optReqFlag = true,
-      showHelperInvalidText = true,
-      showLabel = true,
-    } = props;
-    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
-    const spacingProp =
-      layout === RadioGroupLayoutTypes.Column ? spacing.s : spacing.l;
-    const newChildren = [];
+const RadioGroup = React.forwardRef<
+  HTMLInputElement,
+  React.PropsWithChildren<RadioGroupProps>
+>((props, ref?) => {
+  const {
+    children,
+    className = "",
+    defaultValue,
+    helperText,
+    id = generateUUID(),
+    invalidText,
+    isDisabled = false,
+    isInvalid = false,
+    isRequired = false,
+    labelText,
+    layout = RadioGroupLayoutTypes.Column,
+    name,
+    onChange = onChangeDefault,
+    optReqFlag = true,
+    showHelperInvalidText = true,
+    showLabel = true,
+  } = props;
+  const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
+  const spacingProp =
+    layout === RadioGroupLayoutTypes.Column ? spacing.s : spacing.l;
+  const newChildren = [];
 
-    // Use Chakra's RadioGroup hook to set and get the proper props
-    // or the custom components.
-    const { getRootProps, getRadioProps } = useRadioGroup({
-      name,
-      defaultValue,
-      onChange,
-    });
-    const radioGroupProps = getRootProps();
+  // Use Chakra's RadioGroup hook to set and get the proper props
+  // or the custom components.
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name,
+    defaultValue,
+    onChange,
+  });
+  const radioGroupProps = getRootProps();
 
-    // Go through the Radio children and update them as needed.
-    React.Children.map(children, (child: React.ReactElement, i) => {
-      if (child.type !== Radio) {
-        // Special case for Storybook MDX documentation.
-        if (child.props.mdxType && child.props.mdxType === "Radio") {
-          noop();
-        } else {
-          console.warn(
-            "Only `Radio` components are allowed inside the `RadioGroup` component."
-          );
-        }
+  // Go through the Radio children and update them as needed.
+  React.Children.map(children, (child: React.ReactElement, i) => {
+    if (child.type !== Radio) {
+      // Special case for Storybook MDX documentation.
+      if (child.props.mdxType && child.props.mdxType === "Radio") {
+        noop();
+      } else {
+        console.warn(
+          "Only `Radio` components are allowed inside the `RadioGroup` component."
+        );
       }
+    }
 
-      const chakraRadioProps = getRadioProps({
-        value: child.props.value,
-      } as any);
+    const chakraRadioProps = getRadioProps({
+      value: child.props.value,
+    } as any);
 
-      if (child !== undefined && child !== null) {
-        const newProps = { key: i, isDisabled, isInvalid, isRequired };
-        if (child.props.value === defaultValue) {
-          newProps["checked"] = true;
-        }
-        newChildren.push(
-          React.cloneElement(child, { ...newProps, ...chakraRadioProps })
-        );
+    if (child !== undefined && child !== null) {
+      const newProps = { key: i, isDisabled, isInvalid, isRequired };
+      if (child.props.value === defaultValue) {
+        newProps["checked"] = true;
       }
-    });
+      newChildren.push(
+        React.cloneElement(child, { ...newProps, ...chakraRadioProps })
+      );
+    }
+  });
 
-    // Get the Chakra-based styles for the custom elements in this component.
-    const styles = useMultiStyleConfig("RadioGroup", {});
+  // Get the Chakra-based styles for the custom elements in this component.
+  const styles = useMultiStyleConfig("RadioGroup", {});
 
-    return (
-      <Fieldset
-        id={`radio-group-${id}`}
-        className={className}
-        isLegendHidden={!showLabel}
-        legendText={labelText}
-        optReqFlag={optReqFlag}
+  return (
+    <Fieldset
+      className={className}
+      id={`radio-group-${id}`}
+      isLegendHidden={!showLabel}
+      legendText={labelText}
+      optReqFlag={optReqFlag}
+    >
+      <Stack
+        aria-label={!showLabel ? labelText : null}
+        direction={[layout]}
+        spacing={spacingProp}
+        ref={ref}
+        {...radioGroupProps}
+        sx={styles.stack}
       >
-        <Stack
-          direction={[layout]}
-          spacing={spacingProp}
-          ref={ref}
-          aria-label={!showLabel ? labelText : null}
-          {...radioGroupProps}
-          sx={styles.stack}
-        >
-          {newChildren}
-        </Stack>
-        {footnote && showHelperInvalidText && (
-          <Box __css={styles.helper}>
-            <HelperErrorText
-              id={`${id}-helperErrorText`}
-              isInvalid={isInvalid}
-              text={footnote}
-            />
-          </Box>
-        )}
-      </Fieldset>
-    );
-  }
-);
+        {newChildren}
+      </Stack>
+      {footnote && showHelperInvalidText && (
+        <Box __css={styles.helper}>
+          <HelperErrorText
+            id={`${id}-helperErrorText`}
+            isInvalid={isInvalid}
+            text={footnote}
+          />
+        </Box>
+      )}
+    </Fieldset>
+  );
+});
 
 export default RadioGroup;

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

@@ -19,7 +19,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -66,7 +66,7 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -135,7 +135,7 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -182,7 +182,7 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -251,7 +251,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -298,7 +298,7 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -367,7 +367,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -414,7 +414,7 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -499,7 +499,7 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -546,7 +546,7 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -610,7 +610,7 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -657,7 +657,7 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         checked={false}
@@ -726,7 +726,7 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         aria-required={true}
@@ -774,7 +774,7 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
     >
       <input
         aria-required={true}
@@ -844,7 +844,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
       data-invalid=""
     >
       <input
@@ -895,7 +895,7 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
       data-invalid=""
     >
       <input
@@ -968,7 +968,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
     role="radiogroup"
   >
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
       data-disabled=""
     >
       <input
@@ -1019,7 +1019,7 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
       </span>
     </label>
     <label
-      className="chakra-radio css-78joka"
+      className="chakra-radio css-13p0l12"
       data-disabled=""
     >
       <input

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

@@ -4,7 +4,7 @@ import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
 import renderer from "react-test-renderer";
 
-import SearchBar from "./SearchBar";
+import SearchBar, { SelectProps, TextInputProps } from "./SearchBar";
 
 const optionsGroup = [
   "Art",
@@ -18,16 +18,17 @@ const optionsGroup = [
   "Tools",
   "Villagers",
 ];
-const selectProps = {
+const selectProps: SelectProps = {
   name: "selectName",
   labelText: "Select a category",
   optionsData: optionsGroup,
 };
-const textInputProps = {
+const textInputProps: TextInputProps = {
   labelText: "Item Search",
   name: "textInputName",
   placeholder: "Item Search",
 };
+const labelText = "SearchBar label";
 const helperText = "Search for items in Animal Crossing New Horizons";
 const invalidText = "Could not find the item :(";
 
@@ -38,7 +39,21 @@ describe("SearchBar Accessibility", () => {
         helperText={helperText}
         id="id"
         invalidText={invalidText}
-        labelText="Searchbar"
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test with a Select component", async () => {
+    const { container } = render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        invalidText={invalidText}
+        labelText={labelText}
         onSubmit={jest.fn()}
         selectProps={selectProps}
         textInputProps={textInputProps}
@@ -52,12 +67,16 @@ describe("SearchBar", () => {
   const searchBarSubmit = jest.fn();
   const buttonCallback = jest.fn();
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it("renders the basic form", () => {
     render(
       <SearchBar
         helperText={helperText}
         id="id"
-        labelText="searchbar"
+        labelText={labelText}
         onSubmit={searchBarSubmit}
         textInputProps={textInputProps}
       />
@@ -65,7 +84,7 @@ describe("SearchBar", () => {
     expect(screen.getByRole("search")).toBeInTheDocument();
     expect(screen.getByRole("search")).toHaveAttribute(
       "aria-label",
-      "searchbar"
+      `${labelText} - ${helperText}`
     );
     expect(screen.getByPlaceholderText("Item Search")).toBeInTheDocument();
     expect(screen.getByRole("button")).toBeInTheDocument();
@@ -76,7 +95,7 @@ describe("SearchBar", () => {
       <SearchBar
         helperText={helperText}
         id="id"
-        labelText="searchbar"
+        labelText={labelText}
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
@@ -93,7 +112,7 @@ describe("SearchBar", () => {
         id="id"
         invalidText={invalidText}
         isInvalid
-        labelText="searchbar"
+        labelText={labelText}
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
@@ -110,7 +129,7 @@ describe("SearchBar", () => {
         id="id"
         invalidText={invalidText}
         isInvalid
-        labelText="searchbar"
+        labelText={labelText}
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
@@ -121,38 +140,115 @@ describe("SearchBar", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("calls the TextInput onChange callback function", () => {
+    textInputProps.onChange = jest.fn();
+
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        textInputProps={textInputProps}
+      />
+    );
+    const input = screen.getByLabelText(textInputProps.labelText);
+    expect(textInputProps.onChange).toHaveBeenCalledTimes(0);
+
+    userEvent.type(input, "search!");
+
+    // Seven times for every letter in the search string
+    expect(textInputProps.onChange).toHaveBeenCalledTimes(7);
+  });
+
+  it("calls the Select onChange callback function", () => {
+    selectProps.onChange = jest.fn();
+
+    render(
+      <SearchBar
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    const select = screen.getByLabelText(selectProps.labelText);
+    expect(selectProps.onChange).toHaveBeenCalledTimes(0);
+
+    userEvent.selectOptions(select, "Flowers");
+    expect(selectProps.onChange).toHaveBeenCalledTimes(1);
+
+    userEvent.selectOptions(select, "Furniture");
+    expect(selectProps.onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it("calls the callback function for the Button component ", () => {
+    render(
+      <SearchBar
+        buttonOnClick={buttonCallback}
+        helperText={helperText}
+        id="id"
+        labelText={labelText}
+        onSubmit={searchBarSubmit}
+        selectProps={selectProps}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(buttonCallback).toHaveBeenCalledTimes(0);
+    userEvent.click(screen.getByRole("button"));
+    expect(buttonCallback).toHaveBeenCalledTimes(1);
+  });
+
   it("calls the callback function on submit ", () => {
     render(
       <SearchBar
         helperText={helperText}
         id="id"
-        labelText="searchBar"
+        labelText={labelText}
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
       />
     );
     expect(searchBarSubmit).toHaveBeenCalledTimes(0);
-    expect(buttonCallback).toHaveBeenCalledTimes(0);
     userEvent.click(screen.getByRole("button"));
     expect(searchBarSubmit).toHaveBeenCalledTimes(1);
-    expect(buttonCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("Renders 'required' in the placeholder text", () => {
+  it("renders a default placeholder", () => {
+    const textInputProps: TextInputProps = {
+      labelText: "Item Search",
+      name: "textInputName",
+    };
+
+    render(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        labelText={labelText}
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+
+    expect(screen.getByPlaceholderText("Search terms")).toBeInTheDocument();
+  });
+
+  it("renders 'required' in the placeholder text", () => {
     const { rerender } = render(
       <SearchBar
         id="requiredState"
         isDisabled
-        isRequired
-        labelText="searchbar"
+        labelText={labelText}
         onSubmit={jest.fn()}
         textInputProps={textInputProps}
       />
     );
 
     expect(
-      screen.getByPlaceholderText("Item Search (Required)")
+      screen.queryByPlaceholderText("Item Search (Required)")
     ).not.toBeInTheDocument();
 
     rerender(
@@ -160,7 +256,7 @@ describe("SearchBar", () => {
         id="requiredState"
         isDisabled
         isRequired
-        labelText="searchbar"
+        labelText={labelText}
         onSubmit={jest.fn()}
         textInputProps={textInputProps}
       />
@@ -170,13 +266,13 @@ describe("SearchBar", () => {
     ).toBeInTheDocument();
   });
 
-  it("Renders the UI snapshot correctly", () => {
+  it("renders the UI snapshot correctly", () => {
     const basic = renderer
       .create(
         <SearchBar
           helperText={helperText}
           id="basic"
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
         />
@@ -187,7 +283,7 @@ describe("SearchBar", () => {
         <SearchBar
           helperText={helperText}
           id="withSelect"
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           selectProps={selectProps}
           textInputProps={textInputProps}
@@ -198,7 +294,7 @@ describe("SearchBar", () => {
       .create(
         <SearchBar
           id="withoutHelperText"
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
         />
@@ -209,7 +305,7 @@ describe("SearchBar", () => {
         <SearchBar
           id="invalidState"
           isInvalid
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
         />
@@ -220,7 +316,7 @@ describe("SearchBar", () => {
         <SearchBar
           id="disabledState"
           isDisabled
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
         />
@@ -232,7 +328,7 @@ describe("SearchBar", () => {
           id="requiredState"
           isDisabled
           isRequired
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
         />
@@ -244,7 +340,7 @@ describe("SearchBar", () => {
           id="noBrandButtonType"
           isDisabled
           isRequired
-          labelText="searchbar"
+          labelText={labelText}
           noBrandButtonType={true}
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
@@ -255,7 +351,7 @@ describe("SearchBar", () => {
       .create(
         <SearchBar
           id="withHeading"
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           headingText="A Heading"
         />
@@ -265,7 +361,7 @@ describe("SearchBar", () => {
       .create(
         <SearchBar
           id="withDescription"
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           descriptionText="A description"
         />
@@ -275,7 +371,7 @@ describe("SearchBar", () => {
       .create(
         <SearchBar
           id="withHeadingAndDescription"
-          labelText="searchbar"
+          labelText={labelText}
           onSubmit={jest.fn()}
           headingText="A Heading"
           descriptionText="A description"