@purpurds/radio-card-group 6.12.5 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/radio-card-group",
-  "version": "6.12.5",
+  "version": "7.1.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/radio-card-group.cjs.js",
   "types": "./dist/radio-card-group.d.ts",
@@ -17,10 +17,10 @@
   "dependencies": {
     "@radix-ui/react-radio-group": "~1.2.3",
     "classnames": "~2.5.0",
-    "@purpurds/skeleton": "6.12.5",
-    "@purpurds/paragraph": "6.12.5",
-    "@purpurds/heading": "6.12.5",
-    "@purpurds/tokens": "6.12.5"
+    "@purpurds/heading": "7.1.0",
+    "@purpurds/paragraph": "7.1.0",
+    "@purpurds/skeleton": "7.1.0",
+    "@purpurds/tokens": "7.1.0"
   },
   "devDependencies": {
     "eslint": "9.24.0",
@@ -41,11 +41,11 @@
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
-    "@purpurds/badge": "6.12.5",
-    "@purpurds/button": "6.12.5",
+    "@purpurds/badge": "7.1.0",
+    "@purpurds/button": "7.1.0",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "6.12.5",
-    "@purpurds/text-field": "6.12.5"
+    "@purpurds/grid": "7.1.0",
+    "@purpurds/text-field": "7.1.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

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

@@ -43,6 +43,9 @@ const meta = {
     RadioCardGroupItem: RadioCardItem,
   },
   decorators,
+  args: {
+    required: false,
+  },
   argTypes: {
     orientation: {
       control: "radio",
@@ -77,7 +80,7 @@ const items: RadioCardGroupItem[] = Array.from(Array(7).keys()).map((key) => ({
 export const Controlled: Story = {
   args: {
     items,
-    label: "Controlled Radio card group",
+    heading: "Controlled Radio card group",
     id: "radio-card-story",
     value: items[0].value,
   },
@@ -96,7 +99,7 @@ export const Controlled: Story = {
 export const Uncontrolled: Story = {
   args: {
     items,
-    label: "Uncontrolled radio card group label",
+    heading: "Uncontrolled radio card group",
     id: "radio-card-story",
     defaultValue: items[0].value,
   },
@@ -153,7 +156,7 @@ const itemsAsChildren: RadioCardGroupItem[] = [
 
 export const ItemsAsChildren: Story = {
   args: {
-    label: "Cards passed as children",
+    heading: "Cards passed as children",
     id: "radio-card-story",
     defaultValue: items[0].value,
   },

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

@@ -9,7 +9,7 @@ import { RadioCardImage } from "./radio-card-item-image";
 
 expect.extend(matchers);
 
-describe("RadioButtonGroup", () => {
+describe("RadioCardGroup", () => {
   global.ResizeObserver = vi.fn().mockImplementation(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
@@ -29,7 +29,7 @@ describe("RadioButtonGroup", () => {
       { id: "3", title: "3", value: "3" },
     ];
     render(<RadioCardGroup items={items} id="test" data-testid="test" value="1" />);
-    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-heading")).not.toBeInTheDocument();
     const radioCardItems = screen.getAllByRole("radio");
 
     expect(radioCardItems).toHaveLength(3);
@@ -47,48 +47,50 @@ describe("RadioButtonGroup", () => {
     const items = [
       { id: "1", title: "1", value: "1" },
       { id: "2", title: "2", value: "2", disabled: true },
-      { id: "3", title: "3", value: "3", required: true },
+      { id: "3", title: "3", value: "3" },
     ];
     render(
       <form>
-        <RadioCardGroup items={items} id="test" data-testid="test" value="1" />
+        <RadioCardGroup items={items} id="test" data-testid="test" value="1" required />
       </form>
     );
 
-    expect(screen.queryByTestId("test-label")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("test-heading")).not.toBeInTheDocument();
     const radioCardItems = screen.getAllByTestId("test-item");
 
     expect(radioCardItems).toHaveLength(3);
     expect(radioCardItems["0"].nextElementSibling).toBeChecked();
     expect(radioCardItems["0"].nextElementSibling).not.toBeDisabled();
-    expect(radioCardItems["0"].nextElementSibling).not.toBeRequired();
+    expect(radioCardItems["0"].nextElementSibling).toBeRequired();
 
     expect(radioCardItems["1"].nextElementSibling).not.toBeChecked();
     expect(radioCardItems["1"].nextElementSibling).toBeDisabled();
-    expect(radioCardItems["1"].nextElementSibling).not.toBeRequired();
+    expect(radioCardItems["1"].nextElementSibling).toBeRequired();
 
     expect(radioCardItems["2"].nextElementSibling).not.toBeChecked();
     expect(radioCardItems["2"].nextElementSibling).not.toBeDisabled();
     expect(radioCardItems["2"].nextElementSibling).toBeRequired();
   });
 
-  it("should render with label", () => {
+  it("should render with heading", () => {
     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" />);
+    render(
+      <RadioCardGroup items={items} id="test" data-testid="test" value="1" heading="Heading" />
+    );
 
     const heading = screen.getByRole("heading", { level: 2 });
     expect(heading).toBeInTheDocument();
-    expect(heading).toHaveAttribute("id", "test-label");
-    expect(heading).toHaveTextContent("Label");
+    expect(heading).toHaveAttribute("id", "test-heading");
+    expect(heading).toHaveTextContent("Heading");
 
-    expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-labelledby", "test-label");
+    expect(screen.getByRole("radiogroup")).toHaveAttribute("aria-labelledby", "test-heading");
     expect(screen.getAllByRole("radio")).toHaveLength(2);
   });
 
-  it("should render with h4 label", () => {
+  it("should render with h4 heading", () => {
     const items = [
       { id: "1", title: "1", value: "1" },
       { id: "2", title: "2", value: "2" },
@@ -99,15 +101,15 @@ describe("RadioButtonGroup", () => {
         id="test"
         data-testid="test"
         value="1"
-        label="Label"
-        labelTag="h4"
+        heading="Heading"
+        headingTag="h4"
       />
     );
 
     const heading = screen.getByRole("heading", { level: 4 });
     expect(heading).toBeInTheDocument();
-    expect(heading).toHaveAttribute("id", "test-label");
-    expect(heading).toHaveTextContent("Label");
+    expect(heading).toHaveAttribute("id", "test-heading");
+    expect(heading).toHaveTextContent("Heading");
   });
 
   it("should only render children that are RadioCardItems", () => {
@@ -116,7 +118,7 @@ describe("RadioButtonGroup", () => {
       { id: "2", title: "2", value: "2" },
     ];
     render(
-      <RadioCardGroup id="test" data-testid="test" value="1" label="Label">
+      <RadioCardGroup id="test" data-testid="test" value="1" heading="Heading">
         <RadioCardImage data-testid="test-radio-item-image" altText="test-alt" src="test-source" />
         {items.map((item) => (
           <RadioCardItem data-testid="test-radio-card-item" key={item.id} {...item} />
@@ -144,7 +146,7 @@ describe("RadioButtonGroup", () => {
         id="test"
         data-testid="test"
         value="1"
-        label="Label"
+        heading="Heading"
         onValueChange={onValueChangeMock}
       >
         {items.map((item) => (
@@ -170,7 +172,7 @@ describe("RadioButtonGroup", () => {
     ];
 
     render(
-      <RadioCardGroup id="test" data-testid="test" label="Label">
+      <RadioCardGroup id="test" data-testid="test" heading="Heading">
         {items.map((item) => (
           <RadioCardItem data-testid="test-radio-card-item" key={item.id} {...item} />
         ))}

package/src/radio-card-group.tsx

@@ -1,5 +1,5 @@
 import React, { Children, cloneElement, ForwardedRef, forwardRef, ReactNode, Ref } from "react";
-import { Heading,type HeadingTagType } from "@purpurds/heading";
+import { Heading, type HeadingTagType } from "@purpurds/heading";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 
 import { cx } from "./classnames";
@@ -13,7 +13,7 @@ type StylingProps = Pick<React.HTMLAttributes<HTMLElement>, "className" | "style
 
 export type RadioCardGroupProps = StylingProps & {
   /**
-   * To use when no label is given.
+   * To use when no heading is given.
    * */
   ["aria-label"]?: string;
   /**
@@ -40,11 +40,11 @@ export type RadioCardGroupProps = StylingProps & {
   /**
    * Renders above the radio card group as a heading
    * */
-  label?: string;
+  heading?: string;
   /**
-   * Changes heading level for label.
+   * Changes heading level for heading.
    */
-  labelTag?: HeadingTagType;
+  headingTag?: HeadingTagType;
   /**
    * When true, keyboard navigation will loop from last item to first, and vice versa.
    * */
@@ -88,8 +88,8 @@ const RadioCardGroupComponent = (
     children,
     className,
     items,
-    label,
-    labelTag = "h2",
+    heading,
+    headingTag = "h2",
     loop = true,
     orientation = "vertical",
     radioPosition = "right",
@@ -101,20 +101,21 @@ const RadioCardGroupComponent = (
 
   return (
     <div className={cx(className, `${rootClassName}__container`)} ref={ref}>
-      {label && (
+      {heading && (
         <Heading
-          data-testid={dataTestId ? `${dataTestId}-label` : undefined}
-          id={`${props.id}-label`}
-          tag={labelTag}
+          data-testid={dataTestId ? `${dataTestId}-heading` : undefined}
+          id={`${props.id}-heading`}
+          tag={headingTag}
           variant="subsection-100"
         >
-          {`${props.required ? "* " : ""}${label}`}
+          {props.required && <span aria-hidden>{"* "}</span>}
+          {heading}
         </Heading>
       )}
       {(!!items?.length || radioCardItemChildren.length) && (
         <RadixRadioGroup.Root
           {...props}
-          aria-labelledby={ariaLabelledby || (label ? `${props.id}-label` : undefined)}
+          aria-labelledby={ariaLabelledby || (heading ? `${props.id}-heading` : undefined)}
           className={cx(
             rootClassName,
             `${rootClassName}--${orientation}`,

package/src/radio-card-item.tsx

@@ -1,10 +1,4 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  isValidElement,
-  ReactElement,
-  ReactNode,
-} from "react";
+import React, { ForwardedRef, forwardRef, isValidElement, ReactElement, ReactNode } from "react";
 import { Paragraph } from "@purpurds/paragraph";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 
@@ -34,20 +28,19 @@ export type RadioCardItemProps = {
   id: string;
   /**
    * The radio image.
-   * 
+   *
       union = {
         "data-testid"?: string | undefined;
         altText: string;
         loading?: "lazy" | "eager" | undefined;
         noPlaceholder?: boolean | undefined;
         src: string;
-      } | 
+      } |
       ((props: {
         disabled?: boolean;
       }) => ReactNode) | React.ReactNode
    * */
   image?: RadioCardImageProps | CustomElement;
-  required?: boolean;
   value: string;
   /**
    * `union = string | Omit<ReactNode, "undefined" | "null">`
@@ -64,16 +57,7 @@ const RadioCardItemComponent = (
   { title, ...propsx }: RadioCardItemProps,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
-  const {
-    ["data-testid"]: dataTestid,
-    body,
-    children,
-    disabled,
-    id,
-    image,
-    required,
-    value,
-  } = propsx;
+  const { ["data-testid"]: dataTestid, body, children, disabled, id, image, value } = propsx;
 
   const props = { title, ...propsx };
 
@@ -84,7 +68,6 @@ const RadioCardItemComponent = (
         data-testid={dataTestid}
         disabled={disabled}
         id={id}
-        required={required}
         value={value}
       >
         {image && (
@@ -139,7 +122,5 @@ const RadioCardItemComponent = (
 export const RadioCardItem = forwardRef(RadioCardItemComponent);
 RadioCardItem.displayName = "RadioCardItem";
 
-export const isRadioCardItem = (
-  child?: ReactNode
-): child is ReactElement<RadioCardItemProps> =>
+export const isRadioCardItem = (child?: ReactNode): child is ReactElement<RadioCardItemProps> =>
   isValidElement<RadioCardItemProps>(child) && child?.type === RadioCardItem;