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

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

@@ -1,22 +1,61 @@
-import * as React from "react";
+import { Flex, Spacer } from "@chakra-ui/react";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
+import * as React from "react";
 import renderer from "react-test-renderer";
 
-// import * as generateUUID from "../../helpers/generateUUID";
-import RadioGroup from "./RadioGroup";
 import Radio from "../Radio/Radio";
-import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
-import userEvent from "@testing-library/user-event";
+import RadioGroup from "./RadioGroup";
+import { LayoutTypes } from "../../helpers/enums";
 
 describe("Radio Accessibility", () => {
-  it("passes axe accessibility", async () => {
+  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();
+  });
+
+  it("passes axe accessibility with jsx labels", async () => {
+    const { container } = render(
+      <RadioGroup
+        id="radioGroup"
+        labelText="RadioGroup example"
+        name="a11y-test"
+        isFullWidth
+      >
+        <Radio
+          id="arts"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+        <Radio
+          id="English"
+          labelText={
+            <Flex>
+              <span>English</span>
+              <Spacer />
+              <span>23</span>
+            </Flex>
+          }
+          value="English"
+        />
       </RadioGroup>
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -26,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();
@@ -41,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(
@@ -56,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(
@@ -75,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();
@@ -95,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>
     );
 
@@ -113,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>
     );
 
@@ -131,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");
@@ -162,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");
@@ -182,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");
@@ -204,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();
@@ -233,7 +279,7 @@ describe("Radio Button", () => {
           labelText="row"
           name="row"
           id="row"
-          layout={RadioGroupLayoutTypes.Row}
+          layout={LayoutTypes.Row}
         >
           <Radio value="2" labelText="Radio 2" id="radio-2" />
           <Radio value="3" labelText="Radio 3" id="radio-3" />
@@ -279,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" />
@@ -326,16 +373,79 @@ describe("Radio Button", () => {
         </RadioGroup>
       )
       .toJSON();
+    const withJSXRadioLabels = renderer
+      .create(
+        <RadioGroup
+          id="jsxLabels"
+          isFullWidth
+          labelText="RadioGroup example"
+          name="a11y-test"
+        >
+          <Radio
+            id="arts"
+            labelText={
+              <Flex>
+                <span>Arts</span>
+                <Spacer />
+                <span>4</span>
+              </Flex>
+            }
+            value="arts"
+          />
+          <Radio
+            id="English"
+            labelText={
+              <Flex>
+                <span>English</span>
+                <Spacer />
+                <span>23</span>
+              </Flex>
+            }
+            value="English"
+          />
+        </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", () => {
@@ -346,7 +456,22 @@ describe("Radio Button", () => {
       </RadioGroup>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Only `Radio` components are allowed inside the `RadioGroup` component."
+      "NYPL Reservoir RadioGroup: Only `Radio` components are allowed inside " +
+        "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";
 
@@ -12,9 +12,7 @@ import HelperErrorText, {
 } from "../HelperErrorText/HelperErrorText";
 import { spacing } from "../../theme/foundations/spacing";
 import Radio from "../Radio/Radio";
-import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
-import generateUUID from "../../helpers/generateUUID";
-
+import { LayoutTypes } from "../../helpers/enums";
 export interface RadioGroupProps {
   /** Additional class name. */
   className?: string;
@@ -23,11 +21,13 @@ 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. */
   isDisabled?: boolean;
+  /** Set's the `Radio`s' wrapper to be full width. */
+  isFullWidth?: boolean;
   /** Adds the 'aria-invalid' attribute to the input and
    * sets the error state when true. */
   isInvalid?: boolean;
@@ -37,121 +37,130 @@ export interface RadioGroupProps {
    * true, or an "aria-label" if `showLabel` is false. */
   labelText: string;
   /** Renders the Radio buttons in a row or column (default). */
-  layout?: RadioGroupLayoutTypes;
+  layout?: LayoutTypes;
   /** The `name` prop indicates the form group for all the Radio children. */
   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,
-    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();
+/**
+ * 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(
-          "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", {});
-
-  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;