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

package/src/components/Card/Card.test.tsx

@@ -3,14 +3,16 @@ import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import Card, { CardHeading, CardContent, CardActions } from "./Card";
-import Link from "../Link/Link";
-import { LinkTypes } from "../Link/LinkTypes";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
+import Card, { CardHeading, CardContent, CardActions } from "./Card";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
+import Image from "../Image/Image";
+import Link from "../Link/Link";
+import { LinkTypes } from "../Link/LinkTypes";
+import { ImageRatios } from "../Image/ImageTypes";
 
 describe("Card Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -92,12 +94,12 @@ describe("Card", () => {
   );
   const cardWithExtendedStyles = (
     <Card
-      id="cardWithExtendedStyles"
       className="edition-card"
-      imageSrc="https://placeimg.com/300/400/arch"
+      id="cardWithExtendedStyles"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/300/400/arch"
     >
-      <CardHeading level={HeadingLevels.Two} id="editioncardheading1">
+      <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
         The Card Heading
       </CardHeading>
       <CardContent>
@@ -114,10 +116,10 @@ describe("Card", () => {
         </Link>
         <Link id="link-icon" href="#url" type={LinkTypes.Action}>
           <Icon
-            id="icon-cardWithExtendedStyles"
-            name={IconNames.Download}
             align={IconAlign.Left}
             iconRotation={IconRotationTypes.Rotate0}
+            id="icon-cardWithExtendedStyles"
+            name={IconNames.Download}
           />
           Download
         </Link>
@@ -126,12 +128,12 @@ describe("Card", () => {
   );
   const cardWithNoCTAs = (
     <Card
-      id="cardWithNoCTAs"
       className="edition-card"
-      imageSrc="https://placeimg.com/300/400/arch"
+      id="cardWithNoCTAs"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/300/400/arch"
     >
-      <CardHeading level={HeadingLevels.Two} id="editioncardheading1">
+      <CardHeading id="editioncardheading1" level={HeadingLevels.Two}>
         The Card Heading
       </CardHeading>
       <CardContent>
@@ -143,14 +145,14 @@ describe("Card", () => {
   );
   const cardWithNoContent = (
     <Card
-      id="cardWithNoContent"
       className="edition-card"
-      imageSrc="https://placeimg.com/300/400/arch"
+      id="cardWithNoContent"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/300/400/arch"
     >
       <CardHeading
-        level={HeadingLevels.Two}
         id="editioncardheading1"
+        level={HeadingLevels.Two}
         url="#edition-link"
       >
         The Card Heading
@@ -161,10 +163,10 @@ describe("Card", () => {
         </Link>
         <Link id="link-icon" href="#url" type={LinkTypes.Action}>
           <Icon
-            id="icon-cardWithNoContent"
-            name={IconNames.Download}
             align={IconAlign.Left}
             iconRotation={IconRotationTypes.Rotate0}
+            id="icon-cardWithNoContent"
+            name={IconNames.Download}
           />
           Download
         </Link>
@@ -174,8 +176,8 @@ describe("Card", () => {
   const cardWithNoImage = (
     <Card id="cardWithNoImage" className="edition-card">
       <CardHeading
-        level={HeadingLevels.Two}
         id="editioncardheading1"
+        level={HeadingLevels.Two}
         url="#edition-link"
       >
         The Card Heading
@@ -187,10 +189,10 @@ describe("Card", () => {
         </Link>
         <Link id="link-icon" href="#url" type={LinkTypes.Action}>
           <Icon
-            id="icon-cardWithNoImage"
-            name={IconNames.Download}
             align={IconAlign.Left}
             iconRotation={IconRotationTypes.Rotate0}
+            id="icon-cardWithNoImage"
+            name={IconNames.Download}
           />
           Download
         </Link>
@@ -200,8 +202,8 @@ describe("Card", () => {
   const cardFullClick = () => (
     <Card
       id="fullclick"
-      imageSrc="https://placeimg.com/400/200/arch"
       imageAlt="Alt text"
+      imageSrc="https://placeimg.com/400/200/arch"
       mainActionLink="http://nypl.org"
     >
       <CardHeading level={HeadingLevels.Three} id="heading1">
@@ -210,9 +212,9 @@ describe("Card", () => {
       <CardContent>middle column content</CardContent>
       <CardActions>
         <Button
-          onClick={() => {}}
-          id="button1"
           buttonType={ButtonTypes.Primary}
+          id="button1"
+          onClick={() => {}}
           type="submit"
         >
           Example CTA
@@ -220,6 +222,18 @@ describe("Card", () => {
       </CardActions>
     </Card>
   );
+  const cardImageComponentAndRatio = () => (
+    <Card
+      id="fullclick"
+      imageComponent={<Image alt="" src="https://placeimg.com/400/200/arch" />}
+      imageAspectRatio={ImageRatios.ThreeByTwo}
+    >
+      <CardHeading level={HeadingLevels.Three} id="heading1">
+        The Card Heading
+      </CardHeading>
+      <CardContent>middle column content</CardContent>
+    </Card>
+  );
   let container;
 
   it("renders a Card with a header, image, content, and CTAs", () => {
@@ -289,6 +303,14 @@ describe("Card", () => {
     );
   });
 
+  it("Logs a warning when both `imageComponent` and `imageAspectRatio` are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(cardImageComponentAndRatio());
+    expect(warn).toHaveBeenCalledWith(
+      "Both `imageComponent` and `imageAspectRatio` are set but `imageAspectRatio` will be ignored in favor of the aspect ratio on `imageComponent`."
+    );
+  });
+
   it("Renders the UI snapshot correctly", () => {
     const regular = renderer.create(regularCard).toJSON();
     const withExtendedStyles = renderer.create(cardWithExtendedStyles).toJSON();
@@ -296,6 +318,7 @@ describe("Card", () => {
     const withNoContent = renderer.create(cardWithNoContent).toJSON();
     const withNoImage = renderer.create(cardWithNoImage).toJSON();
     const withFullClick = renderer.create(cardFullClick()).toJSON();
+
     expect(regular).toMatchSnapshot();
     expect(withExtendedStyles).toMatchSnapshot();
     expect(withNoCTAs).toMatchSnapshot();

package/src/components/Card/Card.tsx

@@ -16,7 +16,8 @@ import generateUUID from "../../helpers/generateUUID";
 interface CardBaseProps {
   /** Optional value to control the alignment of the text and elements. */
   center?: boolean;
-  /** Optional value to render the layout in a row or column (default). */
+  /** Optional value to render the layout in a row or column.
+   * Default is `CardLayouts.Column`. */
   layout?: CardLayouts;
 }
 
@@ -54,14 +55,15 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
   /** Text description of the image; to follow best practices for accessibility,
    * this prop should not be left blank if `imageSrc` is passed. */
   imageAlt?: string;
-  /** Optional value to control the aspect ratio of the `CardIage`; default
-   * value is `square`. */
+  /** Optional value to control the aspect ratio of the `CardImage`; default
+   * value is `ImageRatios.Square`. */
   imageAspectRatio?: ImageRatios;
   /** Optional boolean value to control the position of the `CardImage`. */
   imageAtEnd?: boolean;
   /** Custom image component used in place of DS `Image` component. */
   imageComponent?: JSX.Element;
-  /** Optional value to control the size of the `CardImage`. */
+  /** Optional value to control the size of the `CardImage`. Default value is
+   * `ImageSizes.Default`. */
   imageSize?: ImageSizes;
   /** The path to the image displayed within the `Card` component. */
   imageSrc?: string;
@@ -179,10 +181,19 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
     mainActionLink,
   } = props;
   const hasImage = imageSrc || imageComponent;
+  const finalImageAspectRatio = imageComponent
+    ? ImageRatios.Original
+    : imageAspectRatio;
   const customColors = {};
   const cardContents = [];
   let cardHeadingCount = 0;
 
+  if (imageComponent && imageAspectRatio !== ImageRatios.Square) {
+    console.warn(
+      "Both `imageComponent` and `imageAspectRatio` are set but `imageAspectRatio` will be ignored in favor of the aspect ratio on `imageComponent`."
+    );
+  }
+
   backgroundColor && (customColors["backgroundColor"] = backgroundColor);
   foregroundColor && (customColors["color"] = foregroundColor);
 
@@ -192,6 +203,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
     hasImage,
     imageAtEnd,
     layout,
+    mainActionLink,
   });
 
   React.Children.map(children, (child: React.ReactElement, key) => {
@@ -246,7 +258,7 @@ export default function Card(props: React.PropsWithChildren<CardProps>) {
             component={imageComponent}
             alt={imageAlt}
             imageSize={imageSize}
-            imageAspectRatio={imageAspectRatio}
+            imageAspectRatio={finalImageAspectRatio}
             imageAtEnd={imageAtEnd}
             layout={layout}
           />

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

@@ -233,8 +233,11 @@ exports[`Card Renders the UI snapshot correctly 4`] = `
       id="editioncardheading1"
     >
       <a
-        className="chakra-link css-1xdhyk6"
+        className="css-0"
         href="#edition-link"
+        id="editioncardheading1-link"
+        rel={null}
+        target={null}
       >
         The Card Heading
       </a>
@@ -310,8 +313,11 @@ exports[`Card Renders the UI snapshot correctly 5`] = `
       id="editioncardheading1"
     >
       <a
-        className="chakra-link css-1xdhyk6"
+        className="css-0"
         href="#edition-link"
+        id="editioncardheading1-link"
+        rel={null}
+        target={null}
       >
         The Card Heading
       </a>

package/src/components/Chakra/Box.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import { Box } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import { getCategory } from "../../utils/componentCategories";
 import VideoPlayer from "../VideoPlayer/VideoPlayer";
 import {
-  VideoPlayerTypes,
   VideoPlayerAspectRatios,
+  VideoPlayerTypes,
 } from "../VideoPlayer/VideoPlayerTypes";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Box")} component={Box} />

package/src/components/Chakra/Center.stories.mdx

@@ -1,11 +1,11 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
-import { Box, Center, Square, Circle, HStack } from "@chakra-ui/react";
+import { Box, Center, Circle, HStack, Square } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 
-import { getCategory } from "../../utils/componentCategories";
+import Icon from "../Icons/Icon";
+import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import { ImageSizes } from "../Image/ImageTypes";
-import Icon from "../Icons/Icon";
-import { IconNames, IconColors, IconSizes } from "../Icons/IconTypes";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Center, Circle, Square")} component={Center} />

package/src/components/Chakra/Grid.stories.mdx

@@ -1,6 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
-import { Box } from "@chakra-ui/react";
-import { Grid, GridItem } from "@chakra-ui/react";
+import { Box, Grid, GridItem } from "@chakra-ui/react";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 

package/src/components/Chakra/Stack.stories.mdx

@@ -1,10 +1,10 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs";
 import { Box, Stack, HStack, VStack, Circle } from "@chakra-ui/react";
 
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
 import Icon from "../Icons/Icon";
 import { IconNames, IconSizes } from "../Icons/IconTypes";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta title={getCategory("Stack, HStack, VStack")} component={Stack} />
 

package/src/components/Checkbox/Checkbox.stories.mdx

@@ -1,17 +1,17 @@
+import { HStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { HStack } from "@chakra-ui/react";
 
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
 import Checkbox from "./Checkbox";
 import { onChangeDefault } from "./Checkbox";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Checkbox")}
@@ -20,16 +20,35 @@ import { onChangeDefault } from "./Checkbox";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
     },
     jest: ["Checkbox.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
-    isChecked: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    className: { control: false },
+    id: { control: false },
+    isChecked: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isIndeterminate: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    key: { table: { disable: true } },
+    onChange: { control: false },
+    ref: { table: { disable: true } },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: false } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: false } },
+    },
   }}
 />
 
@@ -38,7 +57,7 @@ import { onChangeDefault } from "./Checkbox";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Checkbox} />
 
@@ -49,15 +68,18 @@ cause an accessibility violation if none is present.
   <Story
     name="Checkbox"
     args={{
+      className: undefined,
       helperText: "This is the helper text!",
-      id: "test_id",
+      id: "checkbox_id",
       invalidText: "This is the error text :(",
+      isChecked: undefined,
       isDisabled: false,
       isIndeterminate: false,
       isInvalid: false,
       isRequired: false,
       labelText: "Test Label",
       name: "test_name",
+      onChange: undefined,
       showHelperInvalidText: true,
       showLabel: true,
       value: "1",

package/src/components/Checkbox/Checkbox.tsx

@@ -1,23 +1,26 @@
-import * as React from "react";
 import {
   Box,
   Checkbox as ChakraCheckbox,
   Icon,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import * as React from "react";
+
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface CheckboxProps {
   /** className you can add in addition to 'input' */
   className?: string;
   /** Optional string to populate the HelperErrorText for standard state */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional string to populate the HelperErrorText for the error state
    * when `isInvalid` is true. */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** When using the Checkbox as a "controlled" form element, you can specify
    * the Checkbox's checked state using this prop.
    * Learn more about controlled and uncontrolled form fields:
@@ -89,7 +92,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       value,
     } = props;
     const styles = useMultiStyleConfig("Checkbox", {});
-    const footnote = isInvalid ? invalidText : helperText;
+    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const ariaAttributes = {};
     const onChange = props.onChange || onChangeDefault;
     // Use Chakra's default indeterminate icon.
@@ -130,9 +133,11 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
         </ChakraCheckbox>
         {footnote && showHelperInvalidText && (
           <Box __css={styles.helper}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </>

package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -1,17 +1,23 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { getCategory } from "../../utils/componentCategories";
-import DSProvider from "../../theme/provider";
+import Checkbox from "../Checkbox/Checkbox";
 import CheckboxGroup from "./CheckboxGroup";
 import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
-import Checkbox from "../Checkbox/Checkbox";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  CheckboxGroupLayoutTypes,
+  "CheckboxGroupLayoutTypes"
+);
 
 <Meta
   title={getCategory("CheckboxGroup")}
@@ -20,17 +26,41 @@ import Checkbox from "../Checkbox/Checkbox";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11895%3A658",
     },
     jest: ["CheckboxGroup.test.tsx"],
   }}
   argTypes={{
     children: { table: { disable: true } },
-    defaultValue: { table: { disable: true } },
-    id: { table: { disable: true } },
-    name: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    defaultValue: { control: false },
+    id: { control: false },
+    isDisabled: {
+      table: { defaultValue: { summary: false } },
+    },
+    isInvalid: {
+      table: { defaultValue: { summary: false } },
+    },
+    isRequired: {
+      table: { defaultValue: { summary: false } },
+    },
+    key: { table: { disable: true } },
+    layout: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "CheckboxGroupLayoutTypes.Column" } },
+      options: enumValues.options,
+    },
+    name: { control: false },
+    onChange: { control: false },
+    optReqFlag: {
+      table: { defaultValue: { summary: true } },
+    },
+    ref: { table: { disable: true } },
+    showHelperInvalidText: {
+      table: { defaultValue: { summary: true } },
+    },
+    showLabel: {
+      table: { defaultValue: { summary: true } },
+    },
   }}
 />
 
@@ -39,7 +69,7 @@ import Checkbox from "../Checkbox/Checkbox";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.9`   |
 
 <Description of={CheckboxGroup} />
 
@@ -49,20 +79,22 @@ import Checkbox from "../Checkbox/Checkbox";
     args={{
       defaultValue: ["4"],
       helperText: "This is the helper text for the full group.",
+      id: "checkboxGroup-id",
       invalidText: "This is the error text :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
       labelText: "Standard Checkbox Group",
-      layout: CheckboxGroupLayoutTypes.Column,
+      layout: "CheckboxGroupLayoutTypes.Column",
       name: "checkbox-story",
+      onChange: undefined,
       optReqFlag: true,
       showHelperInvalidText: true,
       showLabel: true,
     }}
   >
     {(args) => (
-      <CheckboxGroup {...args}>
+      <CheckboxGroup {...args} layout={enumValues.getValue(args.layout)}>
         <Checkbox value="2" labelText="Checkbox 2" />
         <Checkbox value="3" labelText="Checkbox 3" />
         <Checkbox value="4" labelText="Checkbox 4" />

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -6,12 +6,14 @@ import {
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
-import generateUUID from "../../helpers/generateUUID";
-import { spacing } from "../../theme/foundations/spacing";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import Checkbox from "../Checkbox/Checkbox";
+import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
 import Fieldset from "../Fieldset/Fieldset";
+import HelperErrorText, {
+  HelperErrorTextType,
+} from "../HelperErrorText/HelperErrorText";
+import { spacing } from "../../theme/foundations/spacing";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface CheckboxGroupProps {
   /** Any child node passed to the component. */
@@ -19,11 +21,11 @@ export interface CheckboxGroupProps {
   /** Populates the initial value of the input */
   defaultValue?: string[];
   /** Optional string to populate the HelperErrorText for standard state */
-  helperText?: string;
+  helperText?: HelperErrorTextType;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Optional string to populate the HelperErrorText for error state */
-  invalidText?: string;
+  invalidText?: HelperErrorTextType;
   /** Adds the 'disabled' prop to the input when true. */
   isDisabled?: boolean;
   /** A`dds the 'aria-invalid' attribute to the input and
@@ -76,7 +78,7 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
       showHelperInvalidText = true,
       showLabel = true,
     } = props;
-    const footnote = isInvalid ? invalidText : helperText;
+    const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const spacingProp =
       layout === CheckboxGroupLayoutTypes.Column ? spacing.s : spacing.l;
     const newChildren = [];
@@ -139,9 +141,11 @@ const CheckboxGroup = React.forwardRef<HTMLInputElement, CheckboxGroupProps>(
         </ChakraCheckboxGroup>
         {footnote && showHelperInvalidText && (
           <Box __css={styles.helper}>
-            <HelperErrorText isInvalid={isInvalid} id={`${id}-helperErrorText`}>
-              {footnote}
-            </HelperErrorText>
+            <HelperErrorText
+              id={`${id}-helperErrorText`}
+              isInvalid={isInvalid}
+              text={footnote}
+            />
           </Box>
         )}
       </Fieldset>

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

@@ -584,11 +584,14 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
       aria-atomic={true}
       aria-live="off"
       className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "helper text",
+        }
+      }
       data-isinvalid={false}
       id="helperText-helperErrorText"
-    >
-      helper text
-    </div>
+    />
   </div>
 </fieldset>
 `;