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

package/src/components/CheckboxGroup/CheckboxGroup.test.tsx

@@ -1,22 +1,60 @@
-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 CheckboxGroup from "./CheckboxGroup";
 import Checkbox from "../Checkbox/Checkbox";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
-import userEvent from "@testing-library/user-event";
+import { LayoutTypes } from "../../helpers/enums";
 
-describe("Checkbox Accessibility", () => {
-  it("passes axe accessibility", async () => {
+describe("CheckboxGroup Accessibility", () => {
+  it("passes axe accessibility with string labels ", async () => {
+    const { container } = render(
+      <CheckboxGroup
+        id="checkboxGroup"
+        labelText="CheckboxGroup example"
+        name="a11y-test"
+      >
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
+        <Checkbox id="checkbox5" value="5" labelText="Checkbox 5" />
+      </CheckboxGroup>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+  it("passes axe accessibility with jsx labels", async () => {
     const { container } = render(
-      <CheckboxGroup labelText="CheckboxGroup example" name="a11y-test">
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
-        <Checkbox value="5" labelText="Checkbox 5" />
+      <CheckboxGroup
+        labelText="jsxLabels"
+        name="jsxLabels"
+        id="jsxLabels"
+        isFullWidth
+      >
+        <Checkbox
+          id="arts"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+        <Checkbox
+          id="English"
+          labelText={
+            <Flex>
+              <span>English</span>
+              <Spacer />
+              <span>23</span>
+            </Flex>
+          }
+          value="English"
+        />
       </CheckboxGroup>
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -26,10 +64,10 @@ describe("Checkbox Accessibility", () => {
 describe("Checkbox", () => {
   it("renders with Checkbox inputs and a label", () => {
     render(
-      <CheckboxGroup labelText="Test Label" name="test1">
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+      <CheckboxGroup id="checkboxGroup" labelText="Test Label" name="test1">
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     expect(screen.getByText(/Test Label/i)).toBeInTheDocument();
@@ -41,10 +79,10 @@ describe("Checkbox", () => {
 
   it("renders with appropriate 'aria-label' attribute and value when 'showLabel' prop is set to false", () => {
     const { rerender } = render(
-      <CheckboxGroup labelText="Test Label" name="test2">
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+      <CheckboxGroup id="checkboxGroup" labelText="Test Label" name="test2">
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     expect(screen.getByTestId("checkbox-group")).not.toHaveAttribute(
@@ -53,10 +91,15 @@ describe("Checkbox", () => {
     );
 
     rerender(
-      <CheckboxGroup labelText="Test Label" name="test2" showLabel={false}>
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+      <CheckboxGroup
+        id="checkboxGroup"
+        labelText="Test Label"
+        name="test2"
+        showLabel={false}
+      >
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     expect(screen.getByTestId("checkbox-group")).toHaveAttribute(
@@ -68,14 +111,15 @@ describe("Checkbox", () => {
   it("renders visible helper or error text", () => {
     const { rerender } = render(
       <CheckboxGroup
+        id="checkboxGroup"
         labelText="Test Label"
         name="test3"
         helperText="This is the helper text for the full group."
         invalidText="This is the error text :("
       >
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     expect(
@@ -87,15 +131,16 @@ describe("Checkbox", () => {
 
     rerender(
       <CheckboxGroup
+        id="checkboxGroup"
         labelText="Test Label"
         name="test3"
         helperText="This is the helper text for the full group."
         invalidText="This is the error text :("
         isInvalid
       >
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     expect(screen.getByText("This is the error text :(")).toBeVisible();
@@ -107,7 +152,7 @@ describe("Checkbox", () => {
   it("sets the CheckboxGroup's ID", () => {
     render(
       <CheckboxGroup labelText="Test Label" name="test5" id="some-id">
-        <Checkbox value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
       </CheckboxGroup>
     );
 
@@ -119,20 +164,21 @@ describe("Checkbox", () => {
   });
 
   it("sets the next value through the onChange function", () => {
-    let newValue = [];
-    const onChange = (value) => {
+    let newValue: string[] = [];
+    const onChange = (value: string[]) => {
       newValue = value;
     };
     render(
       <CheckboxGroup
+        id="checkboxGroup"
         labelText="Test Label"
         name="getValue"
         defaultValue={["4"]}
         onChange={onChange}
       >
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
 
@@ -147,23 +193,17 @@ describe("Checkbox", () => {
     expect(newValue).toEqual(["4", "2"]);
   });
 
-  it("calls the UUID generation function if no id prop value is passed", () => {
-    const generateUUIDSpy = jest.spyOn(generateUUID, "default");
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(0);
-    render(
-      <CheckboxGroup labelText="Test Label" name="test6">
-        <Checkbox value="2" labelText="Checkbox 2" />
-      </CheckboxGroup>
-    );
-    expect(generateUUIDSpy).toHaveBeenCalledTimes(1);
-  });
-
   it("sets the 'disabled' attribute for all its Checkbox children", () => {
     render(
-      <CheckboxGroup labelText="Test Label" name="test7" isDisabled>
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+      <CheckboxGroup
+        id="checkboxGroup"
+        labelText="Test Label"
+        name="test7"
+        isDisabled
+      >
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     const Checkboxes = screen.getAllByRole("checkbox");
@@ -176,10 +216,15 @@ describe("Checkbox", () => {
 
   it("sets the 'required' attribute for all its Checkbox children", () => {
     render(
-      <CheckboxGroup labelText="Test Label" name="test8" isRequired>
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+      <CheckboxGroup
+        id="checkboxGroup"
+        labelText="Test Label"
+        name="test8"
+        isRequired
+      >
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     const Checkboxes = screen.getAllByRole("checkbox");
@@ -193,14 +238,15 @@ describe("Checkbox", () => {
   it("sets the error state for all its Checkbox children", () => {
     render(
       <CheckboxGroup
+        id="checkboxGroup"
         labelText="Test Label"
         name="test9"
         isInvalid
         invalidText="There's an error!"
       >
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     const Checkboxes = screen.getAllByRole("checkbox");
@@ -214,15 +260,16 @@ describe("Checkbox", () => {
   it("does not render the invalid text when 'isInvalid' is true but 'showHelperInvalidText' is false", () => {
     render(
       <CheckboxGroup
+        id="checkboxGroup"
         labelText="Test Label"
         name="test9"
         isInvalid
         invalidText="There's an error!"
         showHelperInvalidText={false}
       >
-        <Checkbox value="2" labelText="Checkbox 2" />
-        <Checkbox value="3" labelText="Checkbox 3" />
-        <Checkbox value="4" labelText="Checkbox 4" />
+        <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+        <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        <Checkbox id="checkbox4" value="4" labelText="Checkbox 4" />
       </CheckboxGroup>
     );
     const Checkboxes = screen.getAllByRole("checkbox");
@@ -233,12 +280,26 @@ describe("Checkbox", () => {
     expect(Checkboxes[2]).toHaveAttribute("aria-invalid");
   });
 
+  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.
+      <CheckboxGroup labelText="column" name="column">
+        <Checkbox id="checkbox1" value="1" labelText="Checkbox 1" />
+      </CheckboxGroup>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir CheckboxGroup: This component's required `id` prop was not passed."
+    );
+  });
+
   it("renders the UI snapshot correctly", () => {
     const column = renderer
       .create(
         <CheckboxGroup labelText="column" name="column" id="column">
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
@@ -248,10 +309,10 @@ describe("Checkbox", () => {
           labelText="row"
           name="row"
           id="row"
-          layout={CheckboxGroupLayoutTypes.Row}
+          layout={LayoutTypes.Row}
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
@@ -263,8 +324,8 @@ describe("Checkbox", () => {
           id="noLabel"
           showLabel={false}
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
@@ -276,8 +337,8 @@ describe("Checkbox", () => {
           id="helperText"
           helperText="helper text"
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
@@ -289,34 +350,35 @@ describe("Checkbox", () => {
           id="invalidText"
           invalidText="error text"
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
-    const noOptReqLabel = renderer
+    const isRequired = renderer
       .create(
         <CheckboxGroup
-          labelText="no optional or required label"
-          name="optReq"
-          id="optReq"
-          optReqFlag={false}
+          labelText="required"
+          name="required"
+          id="required"
+          isRequired
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
-    const isRequired = renderer
+    const noRequiredLabel = renderer
       .create(
         <CheckboxGroup
-          labelText="required"
-          name="required"
-          id="required"
+          labelText="no optional or required label"
+          name="noRequiredLabel"
+          id="noRequiredLabel"
           isRequired
+          showRequiredLabel={false}
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
@@ -328,8 +390,8 @@ describe("Checkbox", () => {
           id="invalid"
           isInvalid
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
@@ -341,8 +403,68 @@ describe("Checkbox", () => {
           id="disabled"
           isDisabled
         >
-          <Checkbox value="2" labelText="Checkbox 2" />
-          <Checkbox value="3" labelText="Checkbox 3" />
+          <Checkbox id="checkbox2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="checkbox3" value="3" labelText="Checkbox 3" />
+        </CheckboxGroup>
+      )
+      .toJSON();
+    const withJSXCheckboxLabels = renderer
+      .create(
+        <CheckboxGroup
+          id="jsxLabels"
+          isFullWidth
+          labelText="jsxLabels"
+          name="jsxLabels"
+        >
+          <Checkbox
+            id="arts"
+            labelText={
+              <Flex>
+                <span>Arts</span>
+                <Spacer />
+                <span>4</span>
+              </Flex>
+            }
+            value="arts"
+          />
+          <Checkbox
+            id="English"
+            labelText={
+              <Flex>
+                <span>English</span>
+                <Spacer />
+                <span>23</span>
+              </Flex>
+            }
+            value="English"
+          />
+        </CheckboxGroup>
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <CheckboxGroup
+          labelText="chakraProps"
+          name="chakraProps"
+          id="chakraProps"
+          p="s"
+          color="ui.error.primary"
+        >
+          <Checkbox id="2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="3" value="3" labelText="Checkbox 3" />
+        </CheckboxGroup>
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <CheckboxGroup
+          labelText="otherProps"
+          name="otherProps"
+          id="otherProps"
+          data-testid="props"
+        >
+          <Checkbox id="2" value="2" labelText="Checkbox 2" />
+          <Checkbox id="3" value="3" labelText="Checkbox 3" />
         </CheckboxGroup>
       )
       .toJSON();
@@ -352,10 +474,13 @@ describe("Checkbox", () => {
     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(withJSXCheckboxLabels).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 
   it("should throw warning when a non-Checkbox component is used as a child", () => {
@@ -366,7 +491,8 @@ describe("Checkbox", () => {
       </CheckboxGroup>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Only `Checkbox` components are allowed inside the `CheckboxGroup` component."
+      "NYPL Reservoir CheckboxGroup: Only `Checkbox` components are " +
+        "allowed as children."
     );
   });
 });

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,20 +1,18 @@
-import * as React from "react";
 import {
-  Box,
+  chakra,
   CheckboxGroup as ChakraCheckboxGroup,
   Stack,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
 import Checkbox from "../Checkbox/Checkbox";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import Fieldset from "../Fieldset/Fieldset";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
+import { LayoutTypes } from "../../helpers/enums";
 import { spacing } from "../../theme/foundations/spacing";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface CheckboxGroupProps {
   /** Any child node passed to the component. */
   children: React.ReactNode;
@@ -23,11 +21,13 @@ export interface CheckboxGroupProps {
   /** 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 `Checkbox`s' wrapper to be full width. */
+  isFullWidth?: boolean;
   /** A`dds the 'aria-invalid' attribute to the input and
    * sets the error state when true. */
   isInvalid?: boolean;
@@ -37,18 +37,19 @@ export interface CheckboxGroupProps {
    * true, or an "aria-label" if `showLabel` is false. */
   labelText: string;
   /** Renders the checkbox buttons in a row or column (default). */
-  layout?: CheckboxGroupLayoutTypes;
+  layout?: LayoutTypes;
   /** The `name` prop indicates the form group for all the `Checkbox` 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 = () => {};
@@ -59,28 +60,32 @@ const noop = () => {};
  * wrapping and associated text elements, but the checkbox input elements
  * _need_ to be child `Checkbox` components from the NYPL Design System.
  */
-const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
-  (props, ref?) => {
+export const CheckboxGroup = chakra(
+  React.forwardRef<HTMLInputElement, CheckboxGroupProps>((props, ref?) => {
     const {
       children,
       defaultValue = [],
       helperText,
-      id = generateUUID(),
+      id,
       invalidText,
       isDisabled = false,
+      isFullWidth = false,
       isInvalid = false,
       isRequired = false,
       labelText,
-      layout = CheckboxGroupLayoutTypes.Column,
+      layout = LayoutTypes.Column,
       name,
       onChange,
-      optReqFlag = true,
       showHelperInvalidText = true,
       showLabel = true,
+      showRequiredLabel = true,
+      ...rest
     } = props;
     const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const spacingProp =
-      layout === CheckboxGroupLayoutTypes.Column ? spacing.s : spacing.l;
+      layout === LayoutTypes.Column
+        ? spacing.input.group.default.vstack
+        : spacing.input.group.default.hstack;
     const newChildren = [];
     const checkboxProps =
       defaultValue && onChange
@@ -90,6 +95,12 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
           }
         : {};
 
+    if (!id) {
+      console.warn(
+        "NYPL Reservoir CheckboxGroup: This component's required `id` prop was not passed."
+      );
+    }
+
     // Go through the Checkbox children and update them as needed.
     React.Children.map(children, (child: React.ReactElement, i) => {
       if (child.type !== Checkbox) {
@@ -98,7 +109,8 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
           noop();
         } else {
           console.warn(
-            "Only `Checkbox` components are allowed inside the `CheckboxGroup` component."
+            "NYPL Reservoir CheckboxGroup: Only `Checkbox` components are " +
+              "allowed as children."
           );
         }
       }
@@ -117,14 +129,16 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
     });
 
     // Get the Chakra-based styles for the custom elements in this component.
-    const styles = useMultiStyleConfig("CheckboxGroup", {});
+    const styles = useMultiStyleConfig("CheckboxGroup", { isFullWidth });
 
     return (
       <Fieldset
         id={`${id}-checkbox-group`}
         isLegendHidden={!showLabel}
+        isRequired={isRequired}
         legendText={labelText}
-        optReqFlag={optReqFlag}
+        showRequiredLabel={showRequiredLabel}
+        {...rest}
       >
         <ChakraCheckboxGroup {...checkboxProps}>
           <Stack
@@ -140,17 +154,16 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
           </Stack>
         </ChakraCheckboxGroup>
         {footnote && showHelperInvalidText && (
-          <Box __css={styles.helper}>
-            <HelperErrorText
-              id={`${id}-helperErrorText`}
-              isInvalid={isInvalid}
-              text={footnote}
-            />
-          </Box>
+          <HelperErrorText
+            additionalStyles={styles.helperErrorText}
+            id={`${id}-helperErrorText`}
+            isInvalid={isInvalid}
+            text={footnote}
+          />
         )}
       </Fieldset>
     );
-  }
+  })
 );
 
 export default CheckboxGroup;