Update radio group component

app/components/RadioGroup/RadioGroup.types.ts

@@ -1,6 +1,7 @@
 export interface RadioOption {
   value: string;
   label: string;
+  subtext?: string;
   ariaLabel?: string;
 }
 

app/components/RadioGroup/RadioGroup.view.tsx

@@ -21,6 +21,52 @@ export function RadioGroupView({
       {options.map((option) => {
         const isSelected = value === option.value;
 
+        // If there's subtext, render radio button without label and handle layout separately
+        if (option.subtext) {
+          return (
+            <div
+              key={option.value}
+              className="flex gap-[8px] items-start"
+            >
+              <RadioButton
+                checked={isSelected}
+                mode={mode}
+                state={state}
+                disabled={disabled}
+                name={groupId}
+                value={option.value}
+                ariaLabel={option.ariaLabel || option.label}
+                onChange={({ checked }) => {
+                  if (checked) {
+                    onOptionChange(option.value);
+                  }
+                }}
+              />
+              <div className="flex flex-col gap-[4px] flex-1">
+                <span
+                  className={`font-inter text-[14px] leading-[20px] ${
+                    mode === "inverse"
+                      ? "text-[var(--color-content-inverse-primary)]"
+                      : "text-[var(--color-content-default-primary)]"
+                  }`}
+                >
+                  {option.label}
+                </span>
+                <span
+                  className={`font-inter text-[14px] leading-[20px] ${
+                    mode === "inverse"
+                      ? "text-[var(--color-content-inverse-secondary,#1f1f1f)]"
+                      : "text-[var(--color-content-default-secondary,#b4b4b4)]"
+                  }`}
+                >
+                  {option.subtext}
+                </span>
+              </div>
+            </div>
+          );
+        }
+
+        // If no subtext, use RadioButton's built-in label
         return (
           <RadioButton
             key={option.value}

stories/RadioGroup.stories.js

@@ -1,203 +1,175 @@
 import React from "react";
 import RadioGroup from "../app/components/RadioGroup";
-import { expect } from "@storybook/test";
-import { userEvent, within } from "@storybook/test";
 
-// Interaction functions for Storybook play functions
+export default {
-const DefaultInteraction = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const radioGroup = canvas.getByRole("radiogroup");
-    const radioButtons = canvas.getAllByRole("radio");
-    await expect(radioGroup).toBeInTheDocument();
-    await expect(radioButtons).toHaveLength(3);
-    await expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
-    await expect(radioButtons[1]).toHaveAttribute("aria-checked", "false");
-    await expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-  },
-};
-
-const StandardInteraction = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const radioGroup = canvas.getByRole("radiogroup");
-    const radioButtons = canvas.getAllByRole("radio");
-    await expect(radioGroup).toBeInTheDocument();
-    await expect(radioButtons[0]).toHaveAttribute("aria-checked", "false");
-    await expect(radioButtons[1]).toHaveAttribute("aria-checked", "true");
-    await expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-    await userEvent.click(radioButtons[0]);
-    await expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
-    await expect(radioButtons[1]).toHaveAttribute("aria-checked", "false");
-    await expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-  },
-};
-
-const InverseInteraction = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const radioGroup = canvas.getByRole("radiogroup");
-    const radioButtons = canvas.getAllByRole("radio");
-    await expect(radioGroup).toBeInTheDocument();
-    await expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
-    await expect(radioButtons[1]).toHaveAttribute("aria-checked", "false");
-    await expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-    await userEvent.click(radioButtons[1]);
-    await expect(radioButtons[0]).toHaveAttribute("aria-checked", "false");
-    await expect(radioButtons[1]).toHaveAttribute("aria-checked", "true");
-    await expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-  },
-};
-
-const InteractiveInteraction = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const radioGroup = canvas.getByRole("radiogroup");
-    const radioButtons = canvas.getAllByRole("radio");
-    await expect(radioGroup).toBeInTheDocument();
-    await expect(canvas.getByText("Selected: option1")).toBeVisible();
-    await userEvent.click(radioButtons[1]);
-    await expect(canvas.getByText("Selected: option2")).toBeVisible();
-    await userEvent.click(radioButtons[2]);
-    await expect(canvas.getByText("Selected: option3")).toBeVisible();
-  },
-};
-
-const meta = {
   title: "Forms/RadioGroup",
   component: RadioGroup,
   parameters: {
     layout: "centered",
     backgrounds: {
       default: "dark",
-      values: [{ name: "dark", value: "black" }],
+      values: [
+        { name: "light", value: "#ffffff" },
+        { name: "dark", value: "#000000" },
+      ],
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     mode: {
-      control: { type: "select" },
+      control: "select",
       options: ["standard", "inverse"],
+      description: "Visual mode of the radio group",
     },
-    state: {
+    disabled: {
-      control: { type: "select" },
+      control: "boolean",
-      options: ["default", "hover", "focus"],
+      description: "Whether the radio group is disabled",
     },
-    value: { control: "text" },
-  },
-  args: {
-    mode: "standard",
-    state: "default",
-    value: "option1",
-    options: [
-      { value: "option1", label: "Option 1" },
-      { value: "option2", label: "Option 2" },
-      { value: "option3", label: "Option 3" },
-    ],
   },
 };
 
-export default meta;
-
 export const Default = {
-  args: {
+  render: () => {
-    mode: "standard",
+    const [value, setValue] = React.useState("");
-    state: "default",
+
-    value: "option1",
-    options: [
-      { value: "option1", label: "Option 1" },
-      { value: "option2", label: "Option 2" },
-      { value: "option3", label: "Option 3" },
-    ],
-  },
-  play: DefaultInteraction.play,
-  render: (args) => {
-    const [value, setValue] = React.useState(args.value);
     return (
       <RadioGroup
-        {...args}
+        name="default-radio-group"
         value={value}
         onChange={({ value: newValue }) => setValue(newValue)}
+        mode="standard"
+        options={[
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ]}
       />
     );
   },
 };
 
-export const Standard = {
+export const WithSubtext = {
   render: () => {
-    const [value, setValue] = React.useState("option2");
+    const [value, setValue] = React.useState("");
 
     return (
-      <div className="space-y-4">
+      <RadioGroup
-        <div className="space-y-2">
+        name="subtext-radio-group"
-          <h3 className="text-white font-medium">Standard Mode</h3>
+        value={value}
-          <RadioGroup
+        onChange={({ value: newValue }) => setValue(newValue)}
-            name="standard-example"
+        mode="standard"
-            value={value}
+        options={[
-            mode="standard"
+          { value: "option1", label: "Option 1" },
-            options={[
+          {
-              { value: "option1", label: "Option 1" },
+            value: "option2",
-              { value: "option2", label: "Option 2" },
+            label: "Option 2",
-              { value: "option3", label: "Option 3" },
+            subtext: "Lorem ipsum dolor sit amet consectetur",
-            ]}
+          },
-            onChange={({ value: newValue }) => setValue(newValue)}
+        ]}
-          />
+      />
-        </div>
-      </div>
     );
   },
-  play: StandardInteraction.play,
 };
 
 export const Inverse = {
   render: () => {
-    const [value, setValue] = React.useState("option1");
+    const [value, setValue] = React.useState("");
 
     return (
-      <div className="space-y-4">
+      <RadioGroup
-        <div className="space-y-2">
+        name="inverse-radio-group"
-          <h3 className="text-white font-medium">Inverse Mode</h3>
+        value={value}
-          <RadioGroup
+        onChange={({ value: newValue }) => setValue(newValue)}
-            name="inverse-example"
+        mode="inverse"
-            value={value}
+        options={[
-            mode="inverse"
+          { value: "option1", label: "Option 1" },
-            options={[
+          { value: "option2", label: "Option 2" },
-              { value: "option1", label: "Option 1" },
+          { value: "option3", label: "Option 3" },
-              { value: "option2", label: "Option 2" },
+        ]}
-              { value: "option3", label: "Option 3" },
+      />
-            ]}
-            onChange={({ value: newValue }) => setValue(newValue)}
-          />
-        </div>
-      </div>
     );
   },
-  play: InverseInteraction.play,
 };
 
-export const Interactive = {
+export const InverseWithSubtext = {
   render: () => {
-    const [value, setValue] = React.useState("option1");
+    const [value, setValue] = React.useState("");
 
     return (
-      <div className="space-y-4">
+      <RadioGroup
-        <div className="space-y-2">
+        name="inverse-subtext-radio-group"
-          <h3 className="text-white font-medium">Interactive Example</h3>
+        value={value}
-          <p className="text-gray-400 text-sm">Selected: {value}</p>
+        onChange={({ value: newValue }) => setValue(newValue)}
-          <RadioGroup
+        mode="inverse"
-            name="interactive-example"
+        options={[
-            value={value}
+          { value: "option1", label: "Option 1" },
-            mode="standard"
+          {
-            options={[
+            value: "option2",
-              { value: "option1", label: "Option 1" },
+            label: "Option 2",
-              { value: "option2", label: "Option 2" },
+            subtext: "Lorem ipsum dolor sit amet consectetur",
-              { value: "option3", label: "Option 3" },
+          },
-            ]}
+        ]}
-            onChange={({ value }) => setValue(value)}
+      />
-          />
-        </div>
-      </div>
     );
   },
-  play: InteractiveInteraction.play,
+};
+
+export const Disabled = {
+  render: () => (
+    <RadioGroup
+      name="disabled-radio-group"
+      value=""
+      mode="standard"
+      disabled
+      options={[
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+      ]}
+    />
+  ),
+};
+
+export const AllModes = () => {
+  const [standardValue, setStandardValue] = React.useState("");
+  const [inverseValue, setInverseValue] = React.useState("");
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-white">Standard Mode</h3>
+        <RadioGroup
+          name="standard-all-radio-group"
+          value={standardValue}
+          onChange={({ value }) => setStandardValue(value)}
+          mode="standard"
+          options={[
+            { value: "option1", label: "Option 1" },
+            {
+              value: "option2",
+              label: "Option 2",
+              subtext: "Lorem ipsum dolor sit amet consectetur",
+            },
+          ]}
+        />
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4 text-white">Inverse Mode</h3>
+        <RadioGroup
+          name="inverse-all-radio-group"
+          value={inverseValue}
+          onChange={({ value }) => setInverseValue(value)}
+          mode="inverse"
+          options={[
+            { value: "option3", label: "Option 1" },
+            {
+              value: "option4",
+              label: "Option 2",
+              subtext: "Lorem ipsum dolor sit amet consectetur",
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
 };