aural-ui 4.0.1 → 4.1.0

package/dist/components/badge/Badge.stories.tsx

@@ -2,6 +2,8 @@ import React from "react"
 import { TickCircleIcon } from "@icons/tick-circle-icon"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import { Badge } from "."
 
 const meta: Meta<typeof Badge> = {
@@ -9,12 +11,29 @@ const meta: Meta<typeof Badge> = {
   component: Badge,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A compact status label for surfacing semantic context — categories, states, or counts — in neutral, info, positive, negative, and warning tones across three sizes.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "5 Semantic Colors",
+              description: "Neutral to warning",
+            },
+            {
+              title: "3 Sizes",
+              description: "xs, sm, md scale",
+            },
+            {
+              title: "Icon Support",
+              description: "Text, icon, or both",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -22,7 +41,7 @@ const meta: Meta<typeof Badge> = {
     color: {
       control: "select",
       options: ["neutral", "info", "positive", "negative", "warning"],
-      description: "The color of the badge",
+      description: "The color variant of the badge",
     },
     size: {
       control: "select",
@@ -43,134 +62,378 @@ const meta: Meta<typeof Badge> = {
 export default meta
 type Story = StoryObj<typeof Badge>
 
-export const Default: Story = {
-  args: {
-    children: "NEW",
-  },
-}
+// ─── 1. Playground ────────────────────────────────────────────────────────────
 
-export const Info: Story = {
+export const Playground: Story = {
   args: {
-    children: "INFO",
-    color: "info",
-  },
-}
-
-export const Positive: Story = {
-  args: {
-    children: "SUCCESS",
-    color: "positive",
-  },
-}
-
-export const Negative: Story = {
-  args: {
-    children: "ERROR",
-    color: "negative",
-  },
-}
-
-export const Warning: Story = {
-  args: {
-    children: "WARNING",
-    color: "warning",
+    children: "BADGE",
+    color: "neutral",
+    size: "md",
   },
-}
-
-export const Small: Story = {
-  args: {
-    children: "SMALL",
-    size: "sm",
+  render: (args) => (
+    <div className="w-full max-w-sm space-y-4">
+      <div className="flex justify-center">
+        <Badge {...args} />
+      </div>
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border px-4 py-3">
+        <code className="text-fm-secondary text-fm-md leading-fm-md font-(--font-fm-mono)">{`<Badge color="${args.color}" size="${args.size}">${args.children}</Badge>`}</code>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Adjust color, size, and content using the controls panel in the sidebar.",
+      },
+    },
   },
 }
 
-export const ExtraSmall: Story = {
-  args: {
-    children: "XS",
-    size: "xs",
-  },
-}
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
 
-export const Medium: Story = {
-  args: {
-    children: "MEDIUM",
-    size: "md",
-  },
-}
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Colors
+        </h4>
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="space-y-2 text-center">
+            <Badge color="neutral">NEUTRAL</Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Neutral
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge
+              color="info"
+              className="bg-fm-surface-info-sec text-fm-info-sec"
+            >
+              INFO
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Info
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge
+              color="positive"
+              className="bg-fm-surface-positive-sec text-fm-positive-sec"
+            >
+              SUCCESS
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Positive
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge color="negative">ERROR</Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Negative
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge
+              color="warning"
+              className="bg-fm-yellow-200 text-fm-yellow-900"
+            >
+              WARNING
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Warning
+            </p>
+          </div>
+        </div>
+      </div>
 
-export const WithIcon: Story = {
-  args: {
-    children: (
-      <>
-        <TickCircleIcon width={12} height={12} /> SUCCESS
-      </>
-    ),
-    color: "positive",
-    size: "sm",
-    className: "flex items-center gap-1",
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          With Icon
+        </h4>
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="space-y-2 text-center">
+            <Badge
+              color="positive"
+              size="sm"
+              className="bg-fm-surface-positive-sec text-fm-positive-sec flex items-center gap-1"
+            >
+              <TickCircleIcon width={12} height={12} /> SUCCESS
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Text + Icon
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge
+              color="info"
+              size="sm"
+              className="bg-fm-surface-info-sec text-fm-info-sec flex items-center gap-1"
+            >
+              <TickCircleIcon width={12} height={12} /> INFO
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Text + Icon
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge color="positive" size="xs">
+              <TickCircleIcon width={10} height={10} />
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Icon · xs
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge color="info" size="sm">
+              <TickCircleIcon width={12} height={12} />
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Icon · sm
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge color="warning" size="md">
+              <TickCircleIcon width={14} height={14} />
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Icon · md
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All five color variants and icon compositions — text-only, text+icon, and icon-only configurations.",
+      },
+    },
   },
 }
 
-export const Icon: Story = {
-  args: {
-    children: <TickCircleIcon width={12} height={12} />,
-    color: "positive",
-    size: "xs",
-  },
-}
+// ─── 3. Sizes ─────────────────────────────────────────────────────────────────
 
-export const AllBadges = () => {
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-2">
-        <Badge>DEFAULT</Badge>
-        <Badge color="info">INFO</Badge>
-        <Badge color="positive">SUCCESS</Badge>
-        <Badge color="negative">ERROR</Badge>
-        <Badge color="warning">WARNING</Badge>
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="flex flex-wrap items-end justify-center gap-6">
+        <div className="space-y-2 text-center">
+          <Badge size="xs">EXTRA SMALL</Badge>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+            xs
+          </p>
+        </div>
+        <div className="space-y-2 text-center">
+          <Badge size="sm">SMALL</Badge>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+            sm
+          </p>
+        </div>
+        <div className="space-y-2 text-center">
+          <Badge size="md">MEDIUM</Badge>
+          <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+            md (default)
+          </p>
+        </div>
       </div>
 
-      <div className="flex items-center gap-2">
-        <Badge size="xs">EXTRA SMALL</Badge>
-        <Badge size="sm">SMALL</Badge>
-        <Badge size="md">MEDIUM</Badge>
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Size × Color
+        </h4>
+        <div className="flex flex-wrap items-end justify-center gap-4">
+          <div className="space-y-2 text-center">
+            <Badge
+              color="info"
+              size="xs"
+              className="bg-fm-surface-info-sec text-fm-info-sec"
+            >
+              INFO XS
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              info · xs
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge
+              color="positive"
+              size="sm"
+              className="bg-fm-surface-positive-sec text-fm-positive-sec"
+            >
+              SUCCESS SM
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              positive · sm
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge color="negative" size="md">
+              ERROR MD
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              negative · md
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge
+              color="warning"
+              size="sm"
+              className="bg-fm-yellow-200 text-fm-yellow-900"
+            >
+              WARNING SM
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              warning · sm
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Badge color="neutral" size="xs">
+              NEUTRAL XS
+            </Badge>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              neutral · xs
+            </p>
+          </div>
+        </div>
       </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Three sizes (xs, sm, md) shown side by side with a size × color cross-axis comparison.",
+      },
+    },
+  },
+}
 
-      <div className="flex items-center gap-2">
-        <Badge color="info" size="xs">
-          INFO XS
-        </Badge>
-        <Badge color="positive" size="sm">
-          SUCCESS SM
-        </Badge>
-        <Badge color="negative" size="md">
-          ERROR MD
-        </Badge>
-      </div>
+// ─── 4. Use Cases ─────────────────────────────────────────────────────────────
 
-      <div className="flex items-center gap-2">
-        <Badge color="info" size="xs" className="flex items-center gap-1">
-          <TickCircleIcon width={10} height={10} /> ICON XS
-        </Badge>
-        <Badge color="positive" size="sm" className="flex items-center gap-1">
-          <TickCircleIcon width={12} height={12} /> ICON SM
-        </Badge>
-        <Badge color="warning" size="md" className="flex items-center gap-1">
-          <TickCircleIcon width={14} height={14} /> ICON MD
-        </Badge>
+export const UseCases: Story = {
+  render: () => (
+    <div className="mx-auto max-w-3xl space-y-8 p-8">
+      {/* Track Status List */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Track Status
+        </h4>
+        <div className="mx-auto max-w-md space-y-3">
+          {(
+            [
+              {
+                title: "Midnight Dreams",
+                status: "NEW",
+                color: "info",
+                className: "bg-fm-surface-info-sec text-fm-info-sec",
+              },
+              {
+                title: "Electric Sunrise",
+                status: "LIVE",
+                color: "positive",
+                className: "bg-fm-surface-positive-sec text-fm-positive-sec",
+              },
+              {
+                title: "Echoes in Rain",
+                status: "ERROR",
+                color: "negative",
+                className: "",
+              },
+              {
+                title: "Neon Horizon",
+                status: "PENDING",
+                color: "warning",
+                className: "bg-fm-yellow-200 text-fm-yellow-900",
+              },
+            ] as const
+          ).map(({ title, status, color, className }) => (
+            <div
+              key={title}
+              className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3"
+            >
+              <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-medium">
+                {title}
+              </p>
+              <Badge color={color} size="xs" className={className}>
+                {status}
+              </Badge>
+            </div>
+          ))}
+        </div>
       </div>
 
-      <div className="flex items-center gap-2">
-        <Badge color="info" size="xs">
-          <TickCircleIcon width={10} height={10} />
-        </Badge>
-        <Badge color="positive" size="sm">
-          <TickCircleIcon width={12} height={12} />
-        </Badge>
-        <Badge color="warning" size="md">
-          <TickCircleIcon width={14} height={14} />
-        </Badge>
+      {/* Inline Content Labels */}
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Inline Content Labels
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md space-y-4 rounded-lg border p-4">
+          <div>
+            <div className="mb-1 flex items-center gap-2">
+              <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-semibold">
+                Album Release
+              </p>
+              <Badge
+                color="positive"
+                size="xs"
+                className="bg-fm-surface-positive-sec text-fm-positive-sec flex items-center gap-1"
+              >
+                <TickCircleIcon width={10} height={10} /> VERIFIED
+              </Badge>
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              New album available in all regions.
+            </p>
+          </div>
+          <div>
+            <div className="mb-1 flex items-center gap-2">
+              <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-semibold">
+                Live Streaming
+              </p>
+              <Badge
+                color="warning"
+                size="xs"
+                className="bg-fm-yellow-200 text-fm-yellow-900"
+              >
+                BETA
+              </Badge>
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Early access to live streaming for all subscribers.
+            </p>
+          </div>
+          <div>
+            <div className="mb-1 flex items-center gap-2">
+              <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-semibold">
+                Spatial Audio
+              </p>
+              <Badge
+                color="info"
+                size="xs"
+                className="bg-fm-surface-info-sec text-fm-info-sec"
+              >
+                NEW
+              </Badge>
+            </div>
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              Immersive audio now enabled for supported tracks.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
-  )
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world usage: track status lists and inline content labels with icon compositions.",
+      },
+    },
+  },
 }