@purpurds/radio-card-group 6.6.0 → 6.6.2

package/src/radio-card-group.test.tsx

@@ -79,11 +79,37 @@ describe("RadioButtonGroup", () => {
     ];
     render(<RadioCardGroup items={items} id="test" data-testid="test" value="1" label="Label" />);
 
-    expect(screen.queryByTestId("test-label")).toHaveTextContent("Label");
+    const heading = screen.getByRole("heading", { level: 2 });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveAttribute("id", "test-label");
+    expect(heading).toHaveTextContent("Label");
+
     expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-labelledby", "test-label");
     expect(screen.getAllByRole("radio")).toHaveLength(2);
   });
 
+  it("should render with h4 label", () => {
+    const items = [
+      { id: "1", title: "1", value: "1" },
+      { id: "2", title: "2", value: "2" },
+    ];
+    render(
+      <RadioCardGroup
+        items={items}
+        id="test"
+        data-testid="test"
+        value="1"
+        label="Label"
+        labelTag="h4"
+      />
+    );
+
+    const heading = screen.getByRole("heading", { level: 4 });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveAttribute("id", "test-label");
+    expect(heading).toHaveTextContent("Label");
+  });
+
   it("should only render children that are RadioCardItems", () => {
     const items = [
       { id: "1", title: "1", value: "1" },

package/src/radio-card-group.tsx

@@ -1,5 +1,5 @@
 import React, { Children, cloneElement, ForwardedRef, forwardRef, ReactNode, Ref } from "react";
-import { Heading } from "@purpurds/heading";
+import { type HeadingTagType, Heading } from "@purpurds/heading";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 
 import { cx } from "./classnames";
@@ -40,6 +40,10 @@ export type RadioCardGroupProps = {
    * Renders above the radio card group as a heading
    * */
   label?: string;
+  /**
+   * Changes heading level for label.
+   */
+  labelTag?: HeadingTagType;
   /**
    * When true, keyboard navigation will loop from last item to first, and vice versa.
    * */
@@ -84,6 +88,7 @@ const RadioCardGroupComponent = (
     className,
     items,
     label,
+    labelTag = "h2",
     loop = true,
     orientation = "vertical",
     radioPosition = "right",
@@ -99,7 +104,7 @@ const RadioCardGroupComponent = (
         <Heading
           data-testid={dataTestId ? `${dataTestId}-label` : undefined}
           id={`${props.id}-label`}
-          tag="h2"
+          tag={labelTag}
           variant="subsection-100"
         >
           {`${props.required ? "* " : ""}${label}`}