@windstream/react-shared-components 0.1.11 → 0.1.13

package/src/components/list/List.stories.tsx

@@ -1,272 +1,272 @@
-import { List, ListItem } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof List> = {
-  title: "Components/List",
-  component: List,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Flexible list components for ordered, unordered, and custom lists.",
-      },
-    },
-  },
-  argTypes: {
-    type: {
-      control: { type: "select" },
-      options: ["ul", "ol"],
-      description: "List type (ul or ol)",
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["default", "unstyled"],
-      description: "List styling variant",
-    },
-    children: {
-      control: { type: "text" },
-      description: "List content",
-    },
-  },
-  args: {
-    type: "ul",
-    variant: "default",
-    children: "List content",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default list
-export const Default: Story = {
-  render: () => (
-    <List>
-      <ListItem>First item</ListItem>
-      <ListItem>Second item</ListItem>
-      <ListItem>Third item</ListItem>
-    </List>
-  ),
-};
-
-// Unordered list
-export const Unordered: Story = {
-  render: () => (
-    <List type="ul">
-      <ListItem>Apple</ListItem>
-      <ListItem>Banana</ListItem>
-      <ListItem>Cherry</ListItem>
-      <ListItem>Date</ListItem>
-    </List>
-  ),
-};
-
-// Ordered list
-export const Ordered: Story = {
-  render: () => (
-    <List type="ol">
-      <ListItem>First step</ListItem>
-      <ListItem>Second step</ListItem>
-      <ListItem>Third step</ListItem>
-      <ListItem>Fourth step</ListItem>
-    </List>
-  ),
-};
-
-// Unstyled list
-export const Unstyled: Story = {
-  render: () => (
-    <List variant="unstyled" className="space-y-3">
-      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
-        <div className="h-3 w-3 rounded-full bg-blue-500"></div>
-        <span>Unstyled item 1</span>
-      </ListItem>
-      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
-        <div className="h-3 w-3 rounded-full bg-green-500"></div>
-        <span>Unstyled item 2</span>
-      </ListItem>
-      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
-        <div className="h-3 w-3 rounded-full bg-purple-500"></div>
-        <span>Unstyled item 3</span>
-      </ListItem>
-    </List>
-  ),
-};
-
-// Compact list
-export const Compact: Story = {
-  render: () => (
-    <List className="space-y-1">
-      <ListItem>Compact item 1</ListItem>
-      <ListItem>Compact item 2</ListItem>
-      <ListItem>Compact item 3</ListItem>
-    </List>
-  ),
-};
-
-// Spaced list
-export const Spaced: Story = {
-  render: () => (
-    <List className="space-y-4">
-      <ListItem>Spaced item 1</ListItem>
-      <ListItem>Spaced item 2</ListItem>
-      <ListItem>Spaced item 3</ListItem>
-    </List>
-  ),
-};
-
-// Navigation list
-export const Navigation: Story = {
-  render: () => (
-    <List variant="unstyled" className="space-y-1">
-      <ListItem>
-        <a
-          href="#dashboard"
-          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
-        >
-          Dashboard
-        </a>
-      </ListItem>
-      <ListItem>
-        <a
-          href="#profile"
-          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
-        >
-          Profile
-        </a>
-      </ListItem>
-      <ListItem>
-        <a
-          href="#settings"
-          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
-        >
-          Settings
-        </a>
-      </ListItem>
-      <ListItem>
-        <a
-          href="#logout"
-          className="block rounded px-4 py-2 text-red-600 hover:bg-red-50"
-        >
-          Logout
-        </a>
-      </ListItem>
-    </List>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Navigation menu using unstyled list.",
-      },
-    },
-  },
-};
-
-// Feature list
-export const FeatureList: Story = {
-  render: () => (
-    <List variant="unstyled" className="space-y-4">
-      <ListItem className="flex items-start gap-3">
-        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
-          <span className="text-sm text-green-600">✓</span>
-        </div>
-        <div>
-          <h4 className="font-medium text-gray-900">Feature 1</h4>
-          <p className="text-sm text-gray-600">
-            Description of the first feature
-          </p>
-        </div>
-      </ListItem>
-      <ListItem className="flex items-start gap-3">
-        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
-          <span className="text-sm text-green-600">✓</span>
-        </div>
-        <div>
-          <h4 className="font-medium text-gray-900">Feature 2</h4>
-          <p className="text-sm text-gray-600">
-            Description of the second feature
-          </p>
-        </div>
-      </ListItem>
-      <ListItem className="flex items-start gap-3">
-        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
-          <span className="text-sm text-green-600">✓</span>
-        </div>
-        <div>
-          <h4 className="font-medium text-gray-900">Feature 3</h4>
-          <p className="text-sm text-gray-600">
-            Description of the third feature
-          </p>
-        </div>
-      </ListItem>
-    </List>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Feature list with icons and descriptions.",
-      },
-    },
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => (
-    <div className="space-y-8">
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">List Types</h3>
-        <div className="grid grid-cols-2 gap-8">
-          <div>
-            <h4 className="mb-2 font-medium">Unordered</h4>
-            <List type="ul">
-              <ListItem>Item 1</ListItem>
-              <ListItem>Item 2</ListItem>
-              <ListItem>Item 3</ListItem>
-            </List>
-          </div>
-          <div>
-            <h4 className="mb-2 font-medium">Ordered</h4>
-            <List type="ol">
-              <ListItem>Step 1</ListItem>
-              <ListItem>Step 2</ListItem>
-              <ListItem>Step 3</ListItem>
-            </List>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Variants</h3>
-        <div className="grid grid-cols-2 gap-6">
-          <div>
-            <h4 className="mb-2 font-medium">Default</h4>
-            <List variant="default">
-              <ListItem>Default item</ListItem>
-              <ListItem>Default item</ListItem>
-            </List>
-          </div>
-          <div>
-            <h4 className="mb-2 font-medium">Unstyled</h4>
-            <List variant="unstyled">
-              <ListItem>Unstyled item</ListItem>
-              <ListItem>Unstyled item</ListItem>
-            </List>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Showcase of all list variants and sizes.",
-      },
-    },
-  },
-};
+import { List, ListItem } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof List> = {
+  title: "Components/List",
+  component: List,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Flexible list components for ordered, unordered, and custom lists.",
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["ul", "ol"],
+      description: "List type (ul or ol)",
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "unstyled"],
+      description: "List styling variant",
+    },
+    children: {
+      control: { type: "text" },
+      description: "List content",
+    },
+  },
+  args: {
+    type: "ul",
+    variant: "default",
+    children: "List content",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default list
+export const Default: Story = {
+  render: () => (
+    <List>
+      <ListItem>First item</ListItem>
+      <ListItem>Second item</ListItem>
+      <ListItem>Third item</ListItem>
+    </List>
+  ),
+};
+
+// Unordered list
+export const Unordered: Story = {
+  render: () => (
+    <List type="ul">
+      <ListItem>Apple</ListItem>
+      <ListItem>Banana</ListItem>
+      <ListItem>Cherry</ListItem>
+      <ListItem>Date</ListItem>
+    </List>
+  ),
+};
+
+// Ordered list
+export const Ordered: Story = {
+  render: () => (
+    <List type="ol">
+      <ListItem>First step</ListItem>
+      <ListItem>Second step</ListItem>
+      <ListItem>Third step</ListItem>
+      <ListItem>Fourth step</ListItem>
+    </List>
+  ),
+};
+
+// Unstyled list
+export const Unstyled: Story = {
+  render: () => (
+    <List variant="unstyled" className="space-y-3">
+      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
+        <div className="h-3 w-3 rounded-full bg-blue-500"></div>
+        <span>Unstyled item 1</span>
+      </ListItem>
+      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
+        <div className="h-3 w-3 rounded-full bg-green-500"></div>
+        <span>Unstyled item 2</span>
+      </ListItem>
+      <ListItem className="flex items-center gap-3 rounded-lg bg-gray-50 p-3">
+        <div className="h-3 w-3 rounded-full bg-purple-500"></div>
+        <span>Unstyled item 3</span>
+      </ListItem>
+    </List>
+  ),
+};
+
+// Compact list
+export const Compact: Story = {
+  render: () => (
+    <List className="space-y-1">
+      <ListItem>Compact item 1</ListItem>
+      <ListItem>Compact item 2</ListItem>
+      <ListItem>Compact item 3</ListItem>
+    </List>
+  ),
+};
+
+// Spaced list
+export const Spaced: Story = {
+  render: () => (
+    <List className="space-y-4">
+      <ListItem>Spaced item 1</ListItem>
+      <ListItem>Spaced item 2</ListItem>
+      <ListItem>Spaced item 3</ListItem>
+    </List>
+  ),
+};
+
+// Navigation list
+export const Navigation: Story = {
+  render: () => (
+    <List variant="unstyled" className="space-y-1">
+      <ListItem>
+        <a
+          href="#dashboard"
+          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
+        >
+          Dashboard
+        </a>
+      </ListItem>
+      <ListItem>
+        <a
+          href="#profile"
+          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
+        >
+          Profile
+        </a>
+      </ListItem>
+      <ListItem>
+        <a
+          href="#settings"
+          className="block rounded px-4 py-2 text-gray-700 hover:bg-gray-100"
+        >
+          Settings
+        </a>
+      </ListItem>
+      <ListItem>
+        <a
+          href="#logout"
+          className="block rounded px-4 py-2 text-red-600 hover:bg-red-50"
+        >
+          Logout
+        </a>
+      </ListItem>
+    </List>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation menu using unstyled list.",
+      },
+    },
+  },
+};
+
+// Feature list
+export const FeatureList: Story = {
+  render: () => (
+    <List variant="unstyled" className="space-y-4">
+      <ListItem className="flex items-start gap-3">
+        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
+          <span className="text-sm text-green-600">✓</span>
+        </div>
+        <div>
+          <h4 className="font-medium text-gray-900">Feature 1</h4>
+          <p className="text-sm text-gray-600">
+            Description of the first feature
+          </p>
+        </div>
+      </ListItem>
+      <ListItem className="flex items-start gap-3">
+        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
+          <span className="text-sm text-green-600">✓</span>
+        </div>
+        <div>
+          <h4 className="font-medium text-gray-900">Feature 2</h4>
+          <p className="text-sm text-gray-600">
+            Description of the second feature
+          </p>
+        </div>
+      </ListItem>
+      <ListItem className="flex items-start gap-3">
+        <div className="mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
+          <span className="text-sm text-green-600">✓</span>
+        </div>
+        <div>
+          <h4 className="font-medium text-gray-900">Feature 3</h4>
+          <p className="text-sm text-gray-600">
+            Description of the third feature
+          </p>
+        </div>
+      </ListItem>
+    </List>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Feature list with icons and descriptions.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">List Types</h3>
+        <div className="grid grid-cols-2 gap-8">
+          <div>
+            <h4 className="mb-2 font-medium">Unordered</h4>
+            <List type="ul">
+              <ListItem>Item 1</ListItem>
+              <ListItem>Item 2</ListItem>
+              <ListItem>Item 3</ListItem>
+            </List>
+          </div>
+          <div>
+            <h4 className="mb-2 font-medium">Ordered</h4>
+            <List type="ol">
+              <ListItem>Step 1</ListItem>
+              <ListItem>Step 2</ListItem>
+              <ListItem>Step 3</ListItem>
+            </List>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Variants</h3>
+        <div className="grid grid-cols-2 gap-6">
+          <div>
+            <h4 className="mb-2 font-medium">Default</h4>
+            <List variant="default">
+              <ListItem>Default item</ListItem>
+              <ListItem>Default item</ListItem>
+            </List>
+          </div>
+          <div>
+            <h4 className="mb-2 font-medium">Unstyled</h4>
+            <List variant="unstyled">
+              <ListItem>Unstyled item</ListItem>
+              <ListItem>Unstyled item</ListItem>
+            </List>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all list variants and sizes.",
+      },
+    },
+  },
+};