@windstream/react-shared-components 0.1.6 → 0.1.7

package/src/components/radio-button/RadioButton.stories.tsx

@@ -1,307 +1,307 @@
-import { useState } from "react";
-import { RadioButton } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof RadioButton> = {
-  title: "Components/RadioButton",
-  component: RadioButton,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A radio button component with support for labels, subtext, error states, and custom variants.",
-      },
-    },
-  },
-  argTypes: {
-    name: {
-      control: { type: "text" },
-      description: "Radio button group name",
-    },
-    value: {
-      control: { type: "text" },
-      description: "Radio button value",
-    },
-    checked: {
-      control: { type: "boolean" },
-      description: "Whether the radio button is checked",
-    },
-    label: {
-      control: { type: "text" },
-      description: "Label text",
-    },
-    subText: {
-      control: { type: "text" },
-      description: "Subtext displayed below the label",
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["circle"],
-      description: "Radio button variant",
-    },
-    hasError: {
-      control: { type: "boolean" },
-      description: "Show error state",
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Disable the radio button",
-    },
-  },
-  args: {
-    name: "radio-group",
-    value: "option1",
-    checked: false,
-    label: "Radio Button Label",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default radio button
-export const Default: Story = {
-  args: {},
-};
-
-// Checked radio button
-export const Checked: Story = {
-  args: {
-    checked: true,
-    label: "Checked Radio Button",
-  },
-};
-
-// Unchecked radio button
-export const Unchecked: Story = {
-  args: {
-    checked: false,
-    label: "Unchecked Radio Button",
-  },
-};
-
-// With label
-export const WithLabel: Story = {
-  args: {
-    label: "Option with Label",
-  },
-};
-
-// With subtext
-export const WithSubtext: Story = {
-  args: {
-    label: "Premium Plan",
-    subText: "$29.99/month - Best value",
-  },
-};
-
-// Error state
-export const Error: Story = {
-  args: {
-    label: "Radio Button with Error",
-    hasError: true,
-  },
-};
-
-// Disabled state
-export const Disabled: Story = {
-  args: {
-    label: "Disabled Radio Button",
-    disabled: true,
-  },
-};
-
-// Disabled checked
-export const DisabledChecked: Story = {
-  args: {
-    checked: true,
-    label: "Disabled Checked Radio Button",
-    disabled: true,
-  },
-};
-
-// Radio group
-export const RadioGroup: Story = {
-  render: () => {
-    const [selected, setSelected] = useState("option1");
-    return (
-      <div className="space-y-3">
-        <RadioButton
-          name="plan"
-          value="option1"
-          checked={selected === "option1"}
-          onChange={() => setSelected("option1")}
-          label="Basic Plan"
-          subText="$9.99/month"
-        />
-        <RadioButton
-          name="plan"
-          value="option2"
-          checked={selected === "option2"}
-          onChange={() => setSelected("option2")}
-          label="Standard Plan"
-          subText="$19.99/month"
-        />
-        <RadioButton
-          name="plan"
-          value="option3"
-          checked={selected === "option3"}
-          onChange={() => setSelected("option3")}
-          label="Premium Plan"
-          subText="$29.99/month"
-        />
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Radio button group where only one option can be selected.",
-      },
-    },
-  },
-};
-
-// With error in group
-export const GroupWithError: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<string | undefined>();
-    return (
-      <div className="space-y-3">
-        <RadioButton
-          name="payment"
-          value="credit"
-          checked={selected === "credit"}
-          onChange={val =>
-            setSelected(
-              typeof val === "string" || typeof val === "number"
-                ? String(val)
-                : undefined
-            )
-          }
-          label="Credit Card"
-          hasError={!selected}
-        />
-        <RadioButton
-          name="payment"
-          value="debit"
-          checked={selected === "debit"}
-          onChange={val =>
-            setSelected(
-              typeof val === "string" || typeof val === "number"
-                ? String(val)
-                : undefined
-            )
-          }
-          label="Debit Card"
-          hasError={!selected}
-        />
-        <RadioButton
-          name="payment"
-          value="paypal"
-          checked={selected === "paypal"}
-          onChange={val =>
-            setSelected(
-              typeof val === "string" || typeof val === "number"
-                ? String(val)
-                : undefined
-            )
-          }
-          label="PayPal"
-          hasError={!selected}
-        />
-        {!selected && (
-          <p className="text-sm text-red-600">Please select a payment method</p>
-        )}
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Radio button group with error state when no option is selected.",
-      },
-    },
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => (
-    <div className="space-y-6">
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">States</h3>
-        <div className="space-y-3">
-          <RadioButton
-            name="demo1"
-            value="unchecked"
-            checked={false}
-            label="Unchecked"
-          />
-          <RadioButton
-            name="demo2"
-            value="checked"
-            checked={true}
-            label="Checked"
-          />
-          <RadioButton
-            name="demo3"
-            value="disabled"
-            checked={false}
-            label="Disabled"
-            disabled
-          />
-          <RadioButton
-            name="demo4"
-            value="disabled-checked"
-            checked={true}
-            label="Disabled Checked"
-            disabled
-          />
-        </div>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Subtext</h3>
-        <div className="space-y-3">
-          <RadioButton
-            name="demo5"
-            value="plan1"
-            checked={true}
-            label="Basic Plan"
-            subText="$9.99/month"
-          />
-          <RadioButton
-            name="demo6"
-            value="plan2"
-            checked={false}
-            label="Premium Plan"
-            subText="$29.99/month - Best value"
-          />
-        </div>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Error State</h3>
-        <RadioButton
-          name="demo7"
-          value="error"
-          checked={false}
-          label="Radio Button with Error"
-          hasError
-        />
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Showcase of all radio button variants and states.",
-      },
-    },
-  },
-};
+import { useState } from "react";
+import { RadioButton } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof RadioButton> = {
+  title: "Components/RadioButton",
+  component: RadioButton,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A radio button component with support for labels, subtext, error states, and custom variants.",
+      },
+    },
+  },
+  argTypes: {
+    name: {
+      control: { type: "text" },
+      description: "Radio button group name",
+    },
+    value: {
+      control: { type: "text" },
+      description: "Radio button value",
+    },
+    checked: {
+      control: { type: "boolean" },
+      description: "Whether the radio button is checked",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Label text",
+    },
+    subText: {
+      control: { type: "text" },
+      description: "Subtext displayed below the label",
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["circle"],
+      description: "Radio button variant",
+    },
+    hasError: {
+      control: { type: "boolean" },
+      description: "Show error state",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the radio button",
+    },
+  },
+  args: {
+    name: "radio-group",
+    value: "option1",
+    checked: false,
+    label: "Radio Button Label",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default radio button
+export const Default: Story = {
+  args: {},
+};
+
+// Checked radio button
+export const Checked: Story = {
+  args: {
+    checked: true,
+    label: "Checked Radio Button",
+  },
+};
+
+// Unchecked radio button
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+    label: "Unchecked Radio Button",
+  },
+};
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    label: "Option with Label",
+  },
+};
+
+// With subtext
+export const WithSubtext: Story = {
+  args: {
+    label: "Premium Plan",
+    subText: "$29.99/month - Best value",
+  },
+};
+
+// Error state
+export const Error: Story = {
+  args: {
+    label: "Radio Button with Error",
+    hasError: true,
+  },
+};
+
+// Disabled state
+export const Disabled: Story = {
+  args: {
+    label: "Disabled Radio Button",
+    disabled: true,
+  },
+};
+
+// Disabled checked
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    label: "Disabled Checked Radio Button",
+    disabled: true,
+  },
+};
+
+// Radio group
+export const RadioGroup: Story = {
+  render: () => {
+    const [selected, setSelected] = useState("option1");
+    return (
+      <div className="space-y-3">
+        <RadioButton
+          name="plan"
+          value="option1"
+          checked={selected === "option1"}
+          onChange={() => setSelected("option1")}
+          label="Basic Plan"
+          subText="$9.99/month"
+        />
+        <RadioButton
+          name="plan"
+          value="option2"
+          checked={selected === "option2"}
+          onChange={() => setSelected("option2")}
+          label="Standard Plan"
+          subText="$19.99/month"
+        />
+        <RadioButton
+          name="plan"
+          value="option3"
+          checked={selected === "option3"}
+          onChange={() => setSelected("option3")}
+          label="Premium Plan"
+          subText="$29.99/month"
+        />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Radio button group where only one option can be selected.",
+      },
+    },
+  },
+};
+
+// With error in group
+export const GroupWithError: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | undefined>();
+    return (
+      <div className="space-y-3">
+        <RadioButton
+          name="payment"
+          value="credit"
+          checked={selected === "credit"}
+          onChange={val =>
+            setSelected(
+              typeof val === "string" || typeof val === "number"
+                ? String(val)
+                : undefined
+            )
+          }
+          label="Credit Card"
+          hasError={!selected}
+        />
+        <RadioButton
+          name="payment"
+          value="debit"
+          checked={selected === "debit"}
+          onChange={val =>
+            setSelected(
+              typeof val === "string" || typeof val === "number"
+                ? String(val)
+                : undefined
+            )
+          }
+          label="Debit Card"
+          hasError={!selected}
+        />
+        <RadioButton
+          name="payment"
+          value="paypal"
+          checked={selected === "paypal"}
+          onChange={val =>
+            setSelected(
+              typeof val === "string" || typeof val === "number"
+                ? String(val)
+                : undefined
+            )
+          }
+          label="PayPal"
+          hasError={!selected}
+        />
+        {!selected && (
+          <p className="text-sm text-red-600">Please select a payment method</p>
+        )}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Radio button group with error state when no option is selected.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">States</h3>
+        <div className="space-y-3">
+          <RadioButton
+            name="demo1"
+            value="unchecked"
+            checked={false}
+            label="Unchecked"
+          />
+          <RadioButton
+            name="demo2"
+            value="checked"
+            checked={true}
+            label="Checked"
+          />
+          <RadioButton
+            name="demo3"
+            value="disabled"
+            checked={false}
+            label="Disabled"
+            disabled
+          />
+          <RadioButton
+            name="demo4"
+            value="disabled-checked"
+            checked={true}
+            label="Disabled Checked"
+            disabled
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Subtext</h3>
+        <div className="space-y-3">
+          <RadioButton
+            name="demo5"
+            value="plan1"
+            checked={true}
+            label="Basic Plan"
+            subText="$9.99/month"
+          />
+          <RadioButton
+            name="demo6"
+            value="plan2"
+            checked={false}
+            label="Premium Plan"
+            subText="$29.99/month - Best value"
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Error State</h3>
+        <RadioButton
+          name="demo7"
+          value="error"
+          checked={false}
+          label="Radio Button with Error"
+          hasError
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all radio button variants and states.",
+      },
+    },
+  },
+};