@nypl/design-system-react-components 0.25.13 → 0.26.0

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

@@ -5,18 +5,22 @@ import { axe } from "jest-axe";
 import * as React from "react";
 import renderer from "react-test-renderer";
 
-import RadioGroup from "./RadioGroup";
 import Radio from "../Radio/Radio";
+import RadioGroup from "./RadioGroup";
 import { LayoutTypes } from "../../helpers/enums";
 
 describe("Radio Accessibility", () => {
   it("passes axe accessibility with string labels", async () => {
     const { container } = render(
-      <RadioGroup labelText="RadioGroup example" name="a11y-test">
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
-        <Radio value="5" labelText="Radio 5" />
+      <RadioGroup
+        id="radioGroup"
+        labelText="RadioGroup example"
+        name="a11y-test"
+      >
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
+        <Radio id="radio5" value="5" labelText="Radio 5" />
       </RadioGroup>
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -24,7 +28,12 @@ describe("Radio Accessibility", () => {
 
   it("passes axe accessibility with jsx labels", async () => {
     const { container } = render(
-      <RadioGroup labelText="RadioGroup example" name="a11y-test" isFullWidth>
+      <RadioGroup
+        id="radioGroup"
+        labelText="RadioGroup example"
+        name="a11y-test"
+        isFullWidth
+      >
         <Radio
           id="arts"
           labelText={
@@ -56,10 +65,10 @@ describe("Radio Accessibility", () => {
 describe("Radio Button", () => {
   it("renders with radio inputs and a label", () => {
     render(
-      <RadioGroup labelText="Test Label" name="test1">
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+      <RadioGroup id="radioGroup" labelText="Test Label" name="test1">
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     expect(screen.getByText(/Test Label/i)).toBeInTheDocument();
@@ -71,10 +80,15 @@ describe("Radio Button", () => {
 
   it("renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false", () => {
     render(
-      <RadioGroup labelText="Test Label" name="test2" showLabel={false}>
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+      <RadioGroup
+        id="radioGroup"
+        labelText="Test Label"
+        name="test2"
+        showLabel={false}
+      >
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     expect(screen.getByRole("radiogroup")).toHaveAttribute(
@@ -86,14 +100,15 @@ describe("Radio Button", () => {
   it("renders visible helper or error text", () => {
     const { rerender } = render(
       <RadioGroup
+        id="radioGroup"
         labelText="Test Label"
         name="test3"
         helperText="This is the helper text for the full group."
         invalidText="This is the error text :("
       >
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     expect(
@@ -105,15 +120,16 @@ describe("Radio Button", () => {
 
     rerender(
       <RadioGroup
+        id="radioGroup"
         labelText="Test Label"
         name="test4"
         helperText="This is the helper text for the full group."
         invalidText="This is the error text :("
         isInvalid
       >
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     expect(screen.getByText("This is the error text :(")).toBeVisible();
@@ -125,7 +141,7 @@ describe("Radio Button", () => {
   it("sets the RadioGroup's ID", () => {
     render(
       <RadioGroup labelText="Test Label" name="test5" id="some-id">
-        <Radio value="2" labelText="Radio 2" />
+        <Radio id="radio2" value="2" labelText="Radio 2" />
       </RadioGroup>
     );
 
@@ -143,14 +159,15 @@ describe("Radio Button", () => {
     };
     render(
       <RadioGroup
+        id="radioGroup"
         labelText="Test Label"
         name="getValue"
         defaultValue="4"
         onChange={onChange}
       >
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
 
@@ -161,25 +178,17 @@ describe("Radio Button", () => {
     expect(newValue).toEqual("2");
   });
 
-  // TODO: Figure out why this renders twice with two different calls
-  // to the render function.
-  // it("calls the UUID generation function if no id prop value is passed", () => {
-  //   const generateUUIDSpy = jest.spyOn(generateUUID, "default");
-  //   expect(generateUUIDSpy).toHaveBeenCalledTimes(0);
-  //   render(
-  //     <RadioGroup labelText="Test Label" name="test6">
-  //       <Radio value="2" labelText="Radio 2" id="radio2" />
-  //     </RadioGroup>
-  //   );
-  //   expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
-  // });
-
   it("sets the 'disabled' attribute for all its Radio children", () => {
     render(
-      <RadioGroup labelText="Test Label" name="test7" isDisabled>
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+      <RadioGroup
+        id="radioGroup"
+        labelText="Test Label"
+        name="test7"
+        isDisabled
+      >
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     const radios = screen.getAllByRole("radio");
@@ -192,10 +201,15 @@ describe("Radio Button", () => {
 
   it("sets the 'required' attribute for all its Radio children", () => {
     render(
-      <RadioGroup labelText="Test Label" name="test8" isRequired>
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+      <RadioGroup
+        id="radioGroup"
+        labelText="Test Label"
+        name="test8"
+        isRequired
+      >
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     const radios = screen.getAllByRole("radio");
@@ -212,14 +226,15 @@ describe("Radio Button", () => {
   it("sets the error state for all its Radio children", () => {
     render(
       <RadioGroup
+        id="radioGroup"
         labelText="Test Label"
         name="test9"
         isInvalid
         invalidText="There is an error :("
       >
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     const radios = screen.getAllByRole("radio");
@@ -234,15 +249,16 @@ describe("Radio Button", () => {
   it("does not render the error text when 'showHelperInvalidText' is false", () => {
     render(
       <RadioGroup
+        id="radioGroup"
         labelText="Test Label"
         name="test10"
         isInvalid
         invalidText="There is an error :("
         showHelperInvalidText={false}
       >
-        <Radio value="2" labelText="Radio 2" />
-        <Radio value="3" labelText="Radio 3" />
-        <Radio value="4" labelText="Radio 4" />
+        <Radio id="radio2" value="2" labelText="Radio 2" />
+        <Radio id="radio3" value="3" labelText="Radio 3" />
+        <Radio id="radio4" value="4" labelText="Radio 4" />
       </RadioGroup>
     );
     expect(screen.queryByText("There is an error :(")).not.toBeInTheDocument();
@@ -309,26 +325,27 @@ describe("Radio Button", () => {
         </RadioGroup>
       )
       .toJSON();
-    const noOptReqLabel = renderer
+    const isRequired = renderer
       .create(
         <RadioGroup
-          labelText="no optional or required label"
-          name="optReq"
-          id="optReq"
-          optReqFlag={false}
+          labelText="required"
+          name="required"
+          id="required"
+          isRequired
         >
           <Radio value="2" labelText="Radio 2" id="radio-2" />
           <Radio value="3" labelText="Radio 3" id="radio-3" />
         </RadioGroup>
       )
       .toJSON();
-    const isRequired = renderer
+    const noRequiredLabel = renderer
       .create(
         <RadioGroup
-          labelText="required"
-          name="required"
-          id="required"
+          labelText="no optional or required label"
+          name="noRequiredLabel"
+          id="noRequiredLabel"
           isRequired
+          showRequiredLabel={false}
         >
           <Radio value="2" labelText="Radio 2" id="radio-2" />
           <Radio value="3" labelText="Radio 3" id="radio-3" />
@@ -389,17 +406,46 @@ describe("Radio Button", () => {
         </RadioGroup>
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <RadioGroup
+          labelText="chakra"
+          name="chakra"
+          id="chakra"
+          p="20px"
+          color="ui.error.primary"
+        >
+          <Radio value="2" labelText="Radio 2" id="radio-2" />
+          <Radio value="3" labelText="Radio 3" id="radio-3" />
+        </RadioGroup>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <RadioGroup
+          labelText="props"
+          name="props"
+          id="props"
+          data-testid="props"
+        >
+          <Radio value="2" labelText="Radio 2" id="radio-2" />
+          <Radio value="3" labelText="Radio 3" id="radio-3" />
+        </RadioGroup>
+      )
+      .toJSON();
 
     expect(column).toMatchSnapshot();
     expect(row).toMatchSnapshot();
     expect(noLabel).toMatchSnapshot();
     expect(helperText).toMatchSnapshot();
     expect(invalidText).toMatchSnapshot();
-    expect(noOptReqLabel).toMatchSnapshot();
+    expect(noRequiredLabel).toMatchSnapshot();
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
     expect(withJSXRadioLabels).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 
   it("should throw warning when a non-Radio component is used as a child", () => {
@@ -414,4 +460,18 @@ describe("Radio Button", () => {
         "the `RadioGroup` component."
     );
   });
+
+  it("logs a warning when there is no `id` passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      // @ts-ignore: Typescript complains when a required prop is not passed, but
+      // here we don't want to pass the required prop to make sure the warning appears.
+      <RadioGroup labelText="RadioGroup example" name="a11y-test">
+        <Radio id="radio1" value="1" labelText="Radio 1" />
+      </RadioGroup>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir RadioGroup: This component's required `id` prop was not passed."
+    );
+  });
 });

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,8 +1,8 @@
 import {
-  Box,
+  chakra,
+  RadioGroup as ChakraRadioGroup,
   Stack,
   useMultiStyleConfig,
-  useRadioGroup,
 } from "@chakra-ui/react";
 import * as React from "react";
 
@@ -13,8 +13,6 @@ import HelperErrorText, {
 import { spacing } from "../../theme/foundations/spacing";
 import Radio from "../Radio/Radio";
 import { LayoutTypes } from "../../helpers/enums";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface RadioGroupProps {
   /** Additional class name. */
   className?: string;
@@ -23,7 +21,7 @@ export interface RadioGroupProps {
   /** Optional string to populate the HelperErrorText for standard state */
   helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
+  id: string;
   /** Optional string to populate the HelperErrorText for error state */
   invalidText?: HelperErrorTextType;
   /** Adds the 'disabled' prop to the input when true. */
@@ -44,117 +42,125 @@ export interface RadioGroupProps {
   name: string;
   /** The action to perform on the `<input>`'s onChange function  */
   onChange?: (value: string) => void;
-  /** Whether or not to display "Required"/"Optional" in the label text. */
-  optReqFlag?: boolean;
   /** Offers the ability to hide the helper/invalid text. */
   showHelperInvalidText?: boolean;
   /** Offers the ability to show the group's legend onscreen or hide it. Refer
    * to the `labelText` property for more information. */
   showLabel?: boolean;
+  /** Whether or not to display the "(Required)" text in the label text.
+   * True by default. */
+  showRequiredLabel?: boolean;
 }
 
 const noop = () => {};
-export const onChangeDefault = () => {
-  return;
-};
-
-const RadioGroup = React.forwardRef<
-  HTMLInputElement,
-  React.PropsWithChildren<RadioGroupProps>
->((props, ref?) => {
-  const {
-    children,
-    className = "",
-    defaultValue,
-    helperText,
-    id = generateUUID(),
-    invalidText,
-    isDisabled = false,
-    isFullWidth = false,
-    isInvalid = false,
-    isRequired = false,
-    labelText,
-    layout = LayoutTypes.Column,
-    name,
-    onChange = onChangeDefault,
-    optReqFlag = true,
-    showHelperInvalidText = true,
-    showLabel = true,
-  } = props;
-  const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
-  const spacingProp = layout === LayoutTypes.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();
+/**
+ * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
+ * HTML element along with optional helper text. The `name` prop is essential
+ * for this form group element and is not needed for individual DS `Radio`
+ * components when `RadioGroup` is used.
+ */
+export const RadioGroup = chakra(
+  React.forwardRef<HTMLInputElement, React.PropsWithChildren<RadioGroupProps>>(
+    (props, ref?) => {
+      const {
+        children,
+        className = "",
+        defaultValue,
+        helperText,
+        id,
+        invalidText,
+        isDisabled = false,
+        isFullWidth = false,
+        isInvalid = false,
+        isRequired = false,
+        labelText,
+        layout = LayoutTypes.Column,
+        name,
+        onChange,
+        showHelperInvalidText = true,
+        showLabel = true,
+        showRequiredLabel = true,
+        ...rest
+      } = props;
+      const [value, setValue] = React.useState(defaultValue);
+      const footnote: HelperErrorTextType = isInvalid
+        ? invalidText
+        : helperText;
+      const spacingProp = layout === LayoutTypes.Column ? spacing.s : spacing.l;
+      const newChildren: JSX.Element[] = [];
+      // Get the Chakra-based styles for the custom elements in this component.
+      const styles = useMultiStyleConfig("RadioGroup", { isFullWidth });
+      // Props for the `ChakraRadioGroup` component.
+      const radioGroupProps = {
+        "aria-label": !showLabel ? labelText : undefined,
+        name,
+        onChange: (selected: string) => {
+          setValue(selected);
+          onChange && onChange(selected);
+        },
+        ref,
+        value,
+      };
 
-  // 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 {
+      if (!id) {
         console.warn(
-          "NYPL Reservoir RadioGroup: Only `Radio` components are allowed " +
-            "inside the `RadioGroup` component."
+          "NYPL Reservoir RadioGroup: This component's required `id` prop was not passed."
         );
       }
-    }
 
-    const chakraRadioProps = getRadioProps({
-      value: child.props.value,
-    } as any);
+      // Go through the Radio children and update them as needed.
+      React.Children.map(children, (child: React.ReactElement, key) => {
+        if (child?.type !== Radio) {
+          // Special case for Storybook MDX documentation.
+          if (child.props?.mdxType && child.props?.mdxType === "Radio") {
+            noop();
+          } else {
+            console.warn(
+              "NYPL Reservoir RadioGroup: Only `Radio` components are allowed " +
+                "inside the `RadioGroup` component."
+            );
+          }
+        }
 
-    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,
+            isDisabled,
+            isInvalid,
+            isRequired,
+          };
+          newChildren.push(React.cloneElement(child, newProps));
+        }
+      });
+
+      return (
+        <Fieldset
+          className={className}
+          id={`radio-group-${id}`}
+          isLegendHidden={!showLabel}
+          isRequired={isRequired}
+          legendText={labelText}
+          showRequiredLabel={showRequiredLabel}
+          {...rest}
+        >
+          <ChakraRadioGroup {...radioGroupProps}>
+            <Stack direction={[layout]} spacing={spacingProp} sx={styles.stack}>
+              {newChildren}
+            </Stack>
+          </ChakraRadioGroup>
+          {footnote && showHelperInvalidText && (
+            <HelperErrorText
+              additionalStyles={styles.helperErrorText}
+              id={`${id}-helperErrorText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
+          )}
+        </Fieldset>
       );
     }
-  });
-
-  // Get the Chakra-based styles for the custom elements in this component.
-  const styles = useMultiStyleConfig("RadioGroup", { isFullWidth });
-
-  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}
-      >
-        {newChildren}
-      </Stack>
-      {footnote && showHelperInvalidText && (
-        <Box __css={styles.helper}>
-          <HelperErrorText
-            id={`${id}-helperErrorText`}
-            isInvalid={isInvalid}
-            text={footnote}
-          />
-        </Box>
-      )}
-    </Fieldset>
-  );
-});
+  )
+);
 
 export default RadioGroup;