aural-ui 4.0.1 → 4.1.0

package/dist/components/thumbnail-tags/ThumbnailTags.stories.tsx

@@ -1,21 +1,38 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
-import ThumbnailTags from "."
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
 
-type ThumbnailTagsProps = React.ComponentProps<typeof ThumbnailTags>
+import ThumbnailTags from "."
 
 const meta: Meta<typeof ThumbnailTags> = {
   title: "Components/UI/ThumbnailTags",
   component: ThumbnailTags,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "Thumbnail overlay badges designed to be placed on media cards. Six variants cover promotional pricing text, engagement metrics, content status (checked, completed-series), achievement markers (top10, ranked), each rendered as a purpose-built SVG or branded pill.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "6 Variants",
+              description: "Promo to ranked",
+            },
+            {
+              title: "Media Card Overlays",
+              description: "Positioned on thumbnails",
+            },
+            {
+              title: "SVG & Pill Styles",
+              description: "Purpose-built graphics",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -35,212 +52,269 @@ const meta: Meta<typeof ThumbnailTags> = {
     },
     text: {
       control: "text",
-      description: "The main text content for variant - Promotional",
+      description:
+        "Main text content — used by the promotional and ranked variants",
     },
     primaryText: {
       control: "text",
-      description: "The main text content for variant Engagement",
+      description: "Primary metric text — used by the engagement variant",
     },
     secondaryText: {
       control: "text",
-      description: "The secondary text content for variant Engagement",
+      description: "Secondary label text — used by the engagement variant",
     },
     classNames: {
       control: "object",
       description:
-        "Custom CSS classes for the component elements (container, text, primaryText, secondaryText,svg)",
+        "Custom CSS classes for inner elements (container, text, primaryText, secondaryText, svg)",
     },
   },
 }
 
 export default meta
-type Story = StoryObj<ThumbnailTagsProps>
-
-export const Default: Story = {
-  args: {
-    variant: "promotional",
-    text: "30% off",
-  },
-}
+type Story = StoryObj<typeof ThumbnailTags>
 
-export const Ranked: Story = {
-  args: {
-    variant: "ranked",
-    text: "#1 in hindi",
-  },
-}
+// ─── 1. Playground ────────────────────────────────────────────────────────────
 
-export const PromotionalTag = {
+export const Playground: Story = {
   args: {
     variant: "promotional",
     text: "30% off",
   },
-}
-
-export const CheckedTag: Story = {
-  args: {
-    variant: "checked",
-  },
-}
-
-export const EngagementTag: Story = {
-  args: {
-    variant: "engagement",
-    primaryText: "999M+",
-    secondaryText: "Plays",
-  },
-}
-
-export const TopTenTag: Story = {
-  args: {
-    variant: "top10",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Select a variant in the controls panel to explore each thumbnail tag style. Note: text applies to promotional and ranked; primaryText/secondaryText apply to engagement.",
+      },
+    },
   },
 }
 
-export const CompletedSeriesTag: Story = {
-  args: {
-    variant: "completed-series",
-  },
-}
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
 
-// Collection showing all variants
 export const AllVariants: Story = {
-  args: {
-    ...Default.args,
-  },
   render: () => (
-    <div className="flex flex-col gap-6">
-      <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
-          Promotional Tag
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="promotional" text="30% off" />
-          <ThumbnailTags variant="promotional" text="NEW" />
-          <ThumbnailTags variant="promotional" text="HOT" />
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
-          Checked Tag
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="checked" />
-          <ThumbnailTags variant="checked" />
-          <ThumbnailTags variant="checked" />
-        </div>
-      </div>
-
+    <div className="space-y-8">
       <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
-          Engagement Tag
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags
-            variant="engagement"
-            primaryText="999M+"
-            secondaryText="Plays"
-          />
-          <ThumbnailTags
-            variant="engagement"
-            primaryText="1.2K"
-            secondaryText="Views"
-          />
-          <ThumbnailTags
-            variant="engagement"
-            primaryText="50M+"
-            secondaryText="Hits"
-          />
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Promotional
+        </h4>
+        <div className="flex flex-wrap items-center gap-4">
+          {["30% off", "NEW", "HOT", "FREE", "LIMITED"].map((text) => (
+            <div key={text} className="space-y-2 text-center">
+              <ThumbnailTags variant="promotional" text={text} />
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                {text}
+              </p>
+            </div>
+          ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">Top 10 Tag</h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="top10" />
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Engagement
+        </h4>
+        <div className="flex flex-wrap items-center gap-4">
+          {[
+            { primaryText: "999M+", secondaryText: "Plays" },
+            { primaryText: "1.2K", secondaryText: "Views" },
+            { primaryText: "50M+", secondaryText: "Hits" },
+          ].map(({ primaryText, secondaryText }) => (
+            <div key={primaryText} className="space-y-2 text-center">
+              <ThumbnailTags
+                variant="engagement"
+                primaryText={primaryText}
+                secondaryText={secondaryText}
+              />
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                {primaryText} {secondaryText}
+              </p>
+            </div>
+          ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
-          Completed Series Tag
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="completed-series" />
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Ranked
+        </h4>
+        <div className="flex flex-wrap items-center gap-4">
+          {["#1 in hindi", "#2 show", "#1 podcast"].map((text) => (
+            <div key={text} className="space-y-2 text-center">
+              <ThumbnailTags variant="ranked" text={text} />
+              <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+                {text}
+              </p>
+            </div>
+          ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">Ranked Tag</h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="ranked" text="#1 show" />
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Status &amp; Achievement
+        </h4>
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="space-y-2 text-center">
+            <ThumbnailTags variant="checked" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              checked
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <ThumbnailTags variant="top10" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              top10
+            </p>
+          </div>
+          <div className="space-y-2 text-center">
+            <ThumbnailTags variant="completed-series" />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm">
+              completed-series
+            </p>
+          </div>
         </div>
       </div>
     </div>
   ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "All six variants displayed: promotional pricing pills, engagement metric badges, ranked labels, and the status/achievement icons (checked, top10, completed-series).",
+      },
+    },
+  },
 }
 
-// Showcase different use cases
+// ─── 3. Use Cases ─────────────────────────────────────────────────────────────
+
 export const UseCases: Story = {
-  args: {
-    ...Default.args,
-  },
   render: () => (
-    <div className="space-y-8">
+    <div className="mx-auto max-w-3xl space-y-8 p-8">
+      {/* Media card grid */}
       <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
-          Promotional Tags
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="promotional" text="30% off" />
-          <ThumbnailTags variant="promotional" text="FREE" />
-          <ThumbnailTags variant="promotional" text="LIMITED" />
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Media Cards
+        </h4>
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+          {[
+            {
+              title: "Midnight Dreams",
+              artist: "Luna Wave",
+              badge: <ThumbnailTags variant="promotional" text="NEW" />,
+            },
+            {
+              title: "Electric Sunrise",
+              artist: "Neon Pulse",
+              badge: (
+                <ThumbnailTags
+                  variant="engagement"
+                  primaryText="2.5M+"
+                  secondaryText="Plays"
+                />
+              ),
+            },
+            {
+              title: "Top Hindi Hits",
+              artist: "Various Artists",
+              badge: <ThumbnailTags variant="ranked" text="#1 in hindi" />,
+            },
+            {
+              title: "Jazz Standards",
+              artist: "Dusk &amp; Dawn",
+              badge: <ThumbnailTags variant="completed-series" />,
+            },
+            {
+              title: "Chill Vibes",
+              artist: "Mellow Gold",
+              badge: <ThumbnailTags variant="checked" />,
+            },
+            {
+              title: "Global Beats",
+              artist: "World Sounds",
+              badge: <ThumbnailTags variant="top10" />,
+            },
+          ].map(({ title, artist, badge }) => (
+            <div
+              key={title}
+              className="border-fm-divider-secondary bg-fm-surface-secondary relative rounded-xl border p-4"
+            >
+              <div className="mb-3 flex items-start justify-between gap-2">
+                <div className="bg-fm-surface-tertiary h-14 w-14 shrink-0 rounded-lg" />
+                <div className="shrink-0">{badge}</div>
+              </div>
+              <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-medium">
+                {title}
+              </p>
+              <p className="text-fm-tertiary font-fm-text text-fm-sm leading-fm-sm">
+                {artist}
+              </p>
+            </div>
+          ))}
         </div>
       </div>
 
+      {/* Engagement metrics row */}
       <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
-          Status Indicators
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="checked" />
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
           Engagement Metrics
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags
-            variant="engagement"
-            primaryText="2.5M+"
-            secondaryText="Plays"
-          />
-          <ThumbnailTags
-            variant="engagement"
-            primaryText="150K"
-            secondaryText="Likes"
-          />
-          <ThumbnailTags
-            variant="engagement"
-            primaryText="25K"
-            secondaryText="Shares"
-          />
+        </h4>
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-xl border p-4">
+          {[
+            {
+              title: "Midnight Dreams",
+              primaryText: "2.5M+",
+              secondaryText: "Plays",
+            },
+            {
+              title: "Electric Sunrise",
+              primaryText: "150K",
+              secondaryText: "Likes",
+            },
+            {
+              title: "Chill Vibes",
+              primaryText: "25K",
+              secondaryText: "Shares",
+            },
+          ].map(({ title, primaryText, secondaryText }) => (
+            <div key={title} className="flex items-center justify-between">
+              <p className="text-fm-primary font-fm-text text-fm-sm leading-fm-sm font-medium">
+                {title}
+              </p>
+              <ThumbnailTags
+                variant="engagement"
+                primaryText={primaryText}
+                secondaryText={secondaryText}
+              />
+            </div>
+          ))}
         </div>
       </div>
 
+      {/* Promotional pricing row */}
       <div className="space-y-4">
-        <h3 className="text-fm-lg text-fm-primary font-semibold">
-          Achievement Badges
-        </h3>
-        <div className="flex gap-4">
-          <ThumbnailTags variant="top10" />
-          <ThumbnailTags variant="completed-series" />
-          <ThumbnailTags variant="ranked" text="#1 show" />
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Promotional Pricing
+        </h4>
+        <div className="flex flex-wrap gap-3">
+          {["30% off", "FREE", "LIMITED", "SALE"].map((text) => (
+            <ThumbnailTags key={text} variant="promotional" text={text} />
+          ))}
         </div>
       </div>
     </div>
   ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real product contexts: thumbnail badges on media cards, engagement metric rows, and promotional pricing strips. Shows how each variant overlays or accompanies content in a streaming UI.",
+      },
+    },
+  },
 }