@windstream/react-shared-components 0.1.64 → 0.1.68

package/src/components/checkbox/Checkbox.stories.tsx

@@ -1,247 +1,247 @@
-import { useState } from "react";
-import { Checkbox } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Checkbox> = {
-  title: "Components/Checkbox",
-  component: Checkbox,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A checkbox component with support for checked/unchecked states, labels, error states, and info icons.",
-      },
-    },
-  },
-  argTypes: {
-    checked: {
-      control: { type: "boolean" },
-      description: "Whether the checkbox is checked",
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Disable the checkbox",
-    },
-    label: {
-      control: { type: "text" },
-      description: "Label text for the checkbox",
-    },
-    error: {
-      control: { type: "boolean" },
-      description: "Show error state",
-    },
-    required: {
-      control: { type: "boolean" },
-      description: "Mark checkbox as required",
-    },
-    state: {
-      control: { type: "select" },
-      options: ["default", "focus", "disabled"],
-      description: "Visual state of the checkbox",
-    },
-  },
-  args: {
-    checked: false,
-    disabled: false,
-    label: "Checkbox Label",
-    error: false,
-    required: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default checkbox
-export const Default: Story = {
-  args: {},
-};
-
-// Checked checkbox
-export const Checked: Story = {
-  args: {
-    checked: true,
-    label: "Checked Checkbox",
-  },
-};
-
-// Unchecked checkbox
-export const Unchecked: Story = {
-  args: {
-    checked: false,
-    label: "Unchecked Checkbox",
-  },
-};
-
-// With label
-export const WithLabel: Story = {
-  args: {
-    checked: false,
-    label: "I agree to the terms and conditions",
-  },
-};
-
-// Disabled checkbox
-export const Disabled: Story = {
-  args: {
-    checked: false,
-    label: "Disabled Checkbox",
-    disabled: true,
-  },
-};
-
-// Disabled checked
-export const DisabledChecked: Story = {
-  args: {
-    checked: true,
-    label: "Disabled Checked Checkbox",
-    disabled: true,
-  },
-};
-
-// Error state
-export const Error: Story = {
-  args: {
-    checked: false,
-    label: "Checkbox with Error",
-    error: true,
-  },
-};
-
-// Required checkbox
-export const Required: Story = {
-  args: {
-    checked: false,
-    label: "Required Field",
-    required: true,
-  },
-};
-
-// Focus state
-export const Focus: Story = {
-  args: {
-    checked: false,
-    label: "Focused Checkbox",
-    state: "focus",
-  },
-};
-
-// With info icon
-export const WithInfoIcon: Story = {
-  args: {
-    checked: false,
-    label: "Checkbox with Info",
-    renderInfoIcon: {
-      onClick: () => alert("Info clicked"),
-      dataTestId: "info-icon",
-    },
-  },
-};
-
-// Interactive checkbox
-export const Interactive: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    return (
-      <Checkbox
-        checked={checked}
-        onChange={isChecked => setChecked(isChecked)}
-        label="Click to toggle"
-      />
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Interactive checkbox that can be toggled by clicking.",
-      },
-    },
-  },
-};
-
-// Multiple checkboxes
-export const Multiple: Story = {
-  render: () => {
-    const [items, setItems] = useState([
-      { id: 1, label: "Option 1", checked: false },
-      { id: 2, label: "Option 2", checked: true },
-      { id: 3, label: "Option 3", checked: false },
-    ]);
-
-    const handleChange = (id: number, isChecked: boolean) => {
-      setItems(
-        items.map(item =>
-          item.id === id ? { ...item, checked: isChecked } : item
-        )
-      );
-    };
-
-    return (
-      <div className="space-y-3">
-        {items.map(item => (
-          <Checkbox
-            key={item.id}
-            checked={item.checked}
-            onChange={isChecked => handleChange(item.id, isChecked)}
-            label={item.label}
-          />
-        ))}
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Multiple checkboxes in a group.",
-      },
-    },
-  },
-};
-
-// 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">
-          <Checkbox checked={false} label="Unchecked" />
-          <Checkbox checked={true} label="Checked" />
-          <Checkbox checked={false} label="Disabled" disabled />
-          <Checkbox checked={true} label="Disabled Checked" disabled />
-        </div>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Error</h3>
-        <Checkbox checked={false} label="Error State" error />
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Required</h3>
-        <Checkbox checked={false} label="Required Field" required />
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Info Icon</h3>
-        <Checkbox
-          checked={false}
-          label="With Info Icon"
-          renderInfoIcon={{
-            onClick: () => {},
-            dataTestId: "info",
-          }}
-        />
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Showcase of all checkbox variants and states.",
-      },
-    },
-  },
-};
+import { useState } from "react";
+import { Checkbox } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A checkbox component with support for checked/unchecked states, labels, error states, and info icons.",
+      },
+    },
+  },
+  argTypes: {
+    checked: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is checked",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the checkbox",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Label text for the checkbox",
+    },
+    error: {
+      control: { type: "boolean" },
+      description: "Show error state",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Mark checkbox as required",
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "focus", "disabled"],
+      description: "Visual state of the checkbox",
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    label: "Checkbox Label",
+    error: false,
+    required: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default checkbox
+export const Default: Story = {
+  args: {},
+};
+
+// Checked checkbox
+export const Checked: Story = {
+  args: {
+    checked: true,
+    label: "Checked Checkbox",
+  },
+};
+
+// Unchecked checkbox
+export const Unchecked: Story = {
+  args: {
+    checked: false,
+    label: "Unchecked Checkbox",
+  },
+};
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    checked: false,
+    label: "I agree to the terms and conditions",
+  },
+};
+
+// Disabled checkbox
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    label: "Disabled Checkbox",
+    disabled: true,
+  },
+};
+
+// Disabled checked
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    label: "Disabled Checked Checkbox",
+    disabled: true,
+  },
+};
+
+// Error state
+export const Error: Story = {
+  args: {
+    checked: false,
+    label: "Checkbox with Error",
+    error: true,
+  },
+};
+
+// Required checkbox
+export const Required: Story = {
+  args: {
+    checked: false,
+    label: "Required Field",
+    required: true,
+  },
+};
+
+// Focus state
+export const Focus: Story = {
+  args: {
+    checked: false,
+    label: "Focused Checkbox",
+    state: "focus",
+  },
+};
+
+// With info icon
+export const WithInfoIcon: Story = {
+  args: {
+    checked: false,
+    label: "Checkbox with Info",
+    renderInfoIcon: {
+      onClick: () => alert("Info clicked"),
+      dataTestId: "info-icon",
+    },
+  },
+};
+
+// Interactive checkbox
+export const Interactive: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Checkbox
+        checked={checked}
+        onChange={isChecked => setChecked(isChecked)}
+        label="Click to toggle"
+      />
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive checkbox that can be toggled by clicking.",
+      },
+    },
+  },
+};
+
+// Multiple checkboxes
+export const Multiple: Story = {
+  render: () => {
+    const [items, setItems] = useState([
+      { id: 1, label: "Option 1", checked: false },
+      { id: 2, label: "Option 2", checked: true },
+      { id: 3, label: "Option 3", checked: false },
+    ]);
+
+    const handleChange = (id: number, isChecked: boolean) => {
+      setItems(
+        items.map(item =>
+          item.id === id ? { ...item, checked: isChecked } : item
+        )
+      );
+    };
+
+    return (
+      <div className="space-y-3">
+        {items.map(item => (
+          <Checkbox
+            key={item.id}
+            checked={item.checked}
+            onChange={isChecked => handleChange(item.id, isChecked)}
+            label={item.label}
+          />
+        ))}
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple checkboxes in a group.",
+      },
+    },
+  },
+};
+
+// 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">
+          <Checkbox checked={false} label="Unchecked" />
+          <Checkbox checked={true} label="Checked" />
+          <Checkbox checked={false} label="Disabled" disabled />
+          <Checkbox checked={true} label="Disabled Checked" disabled />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Error</h3>
+        <Checkbox checked={false} label="Error State" error />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Required</h3>
+        <Checkbox checked={false} label="Required Field" required />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Info Icon</h3>
+        <Checkbox
+          checked={false}
+          label="With Info Icon"
+          renderInfoIcon={{
+            onClick: () => {},
+            dataTestId: "info",
+          }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all checkbox variants and states.",
+      },
+    },
+  },
+};