aural-ui 4.0.1 → 4.1.0

package/dist/components/banner/Banner.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 
+import { AuralComponentDocsPage } from "src/ui/story-spec/components/component-story-docs-page"
+
 import { Banner } from "."
 
 const meta: Meta<typeof Banner> = {
@@ -8,12 +10,29 @@ const meta: Meta<typeof Banner> = {
   component: Banner,
   parameters: {
     layout: "centered",
-    backgrounds: {
-      default: "dark",
-      values: [
-        { name: "dark", value: "#0a0a0a" },
-        { name: "light", value: "#ffffff" },
-      ],
+    docs: {
+      description: {
+        component:
+          "A full-width notification strip for surfacing contextual feedback — positive, negative, warning, or info — in filled or outlined appearance. Supports optional icons, interactive click behaviour, and heading-only layouts.",
+      },
+      page: () => (
+        <AuralComponentDocsPage
+          features={[
+            {
+              title: "4 Semantic Variants",
+              description: "Positive to negative",
+            },
+            {
+              title: "Filled & Outlined",
+              description: "Two appearance styles",
+            },
+            {
+              title: "Interactive Support",
+              description: "onClick for CTAs",
+            },
+          ]}
+        />
+      ),
     },
   },
   tags: ["autodocs"],
@@ -54,84 +73,18 @@ const meta: Meta<typeof Banner> = {
 export default meta
 type Story = StoryObj<typeof Banner>
 
-export const Default: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "info",
-    appearance: "filled",
-    leftIcon: true,
-    rightIcon: true,
-  },
+// Filled-variant overrides: the component uses vivid surface tokens (green/blue/yellow-500)
+// which fail contrast in light mode. Override with -sec surfaces paired with their text tokens.
+const filledClassOverride: Record<string, string> = {
+  positive: "bg-fm-surface-positive-sec text-fm-positive-sec",
+  info: "bg-fm-surface-info-sec text-fm-info-sec",
+  warning: "bg-fm-yellow-200 text-fm-yellow-900",
+  negative: "", // red-1000 text on red-400 bg reads well in both themes
 }
 
-export const Positive: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "positive",
-    appearance: "filled",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
+// ─── 1. Playground ────────────────────────────────────────────────────────────
 
-export const PositiveOutlined: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "positive",
-    appearance: "outlined",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
-
-export const Negative: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "negative",
-    appearance: "filled",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
-
-export const NegativeOutlined: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "negative",
-    appearance: "outlined",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
-
-export const Warning: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "warning",
-    appearance: "filled",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
-
-export const WarningOutlined: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "warning",
-    appearance: "outlined",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
-
-export const Info: Story = {
+export const Playground: Story = {
   args: {
     heading: "Heading",
     paragraph: "Paragraph",
@@ -140,343 +93,444 @@ export const Info: Story = {
     leftIcon: true,
     rightIcon: true,
   },
-}
-
-export const InfoOutlined: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "info",
-    appearance: "outlined",
-    leftIcon: true,
-    rightIcon: true,
+  render: (args) => {
+    const override =
+      args.appearance === "filled"
+        ? filledClassOverride[args.variant ?? "info"]
+        : ""
+    return (
+      <div className="w-full max-w-2xl space-y-4">
+        <Banner {...args} className={override} />
+        <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)">{`<Banner variant="${args.variant}" appearance="${args.appearance}" heading="${args.heading}" leftIcon={${args.leftIcon}} rightIcon={${args.rightIcon}} />`}</code>
+        </div>
+      </div>
+    )
   },
-}
-
-export const NoLeftIcon: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "info",
-    appearance: "filled",
-    leftIcon: false,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Adjust variant, appearance, heading, paragraph, and icon visibility using the controls panel in the sidebar.",
+      },
+    },
   },
 }
 
-export const NoRightIcon: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "info",
-    appearance: "filled",
-    rightIcon: false,
-  },
-}
+// ─── 2. All Variants ──────────────────────────────────────────────────────────
 
-export const Clickable: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "positive",
-    appearance: "filled",
-    onClick: () => alert("Banner clicked!"),
-  },
-}
+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">
+          Filled
+        </h4>
+        <div className="flex w-full max-w-2xl flex-col gap-3">
+          <div className="space-y-2">
+            <Banner
+              variant="positive"
+              appearance="filled"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+              className="bg-fm-surface-positive-sec text-fm-positive-sec"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Positive
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="negative"
+              appearance="filled"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Negative
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="warning"
+              appearance="filled"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+              className="bg-fm-yellow-200 text-fm-yellow-900"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Warning
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="info"
+              appearance="filled"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+              className="bg-fm-surface-info-sec text-fm-info-sec"
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Info
+            </p>
+          </div>
+        </div>
+      </div>
 
-export const HeadingOnly: Story = {
-  args: {
-    heading: "Heading",
-    variant: "info",
-    appearance: "filled",
-    leftIcon: true,
-    rightIcon: true,
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Outlined
+        </h4>
+        <div className="flex w-full max-w-2xl flex-col gap-3">
+          <div className="space-y-2">
+            <Banner
+              variant="positive"
+              appearance="outlined"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Positive
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="negative"
+              appearance="outlined"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Negative
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="warning"
+              appearance="outlined"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Warning
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="info"
+              appearance="outlined"
+              heading="Heading"
+              paragraph="Paragraph"
+              leftIcon
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Info
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "All four variants (positive, negative, warning, info) in both filled and outlined appearances.",
+      },
+    },
   },
 }
 
-export const WithBothIcons: Story = {
-  args: {
-    heading: "Heading",
-    paragraph: "Paragraph",
-    variant: "info",
-    appearance: "filled",
-    leftIcon: true,
-    rightIcon: true,
-  },
-}
+// ─── 3. Configurations ────────────────────────────────────────────────────────
 
-export const WithCustomIcons: Story = {
+export const Configurations: Story = {
   render: () => (
-    <Banner
-      heading="Custom Icons"
-      paragraph="This banner has custom icons on both sides"
-      variant="positive"
-      appearance="filled"
-      leftIcon={<span className="mr-4 text-xl">🚀</span>}
-      rightIcon={<span className="ml-4 text-xl">✨</span>}
-    />
-  ),
-}
+    <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">
+          Icon Placement
+        </h4>
+        <div className="flex w-full max-w-2xl flex-col gap-3">
+          <div className="space-y-2">
+            <Banner
+              variant="info"
+              appearance="outlined"
+              heading="Both Icons"
+              paragraph="Left feature icon and right arrow icon"
+              leftIcon
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Both icons
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="info"
+              appearance="outlined"
+              heading="Left Icon Only"
+              paragraph="Feature icon on the left, no right arrow"
+              leftIcon
+              rightIcon={false}
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Left icon only
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="info"
+              appearance="outlined"
+              heading="Right Icon Only"
+              paragraph="No left icon, arrow on the right"
+              leftIcon={false}
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Right icon only
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="info"
+              appearance="outlined"
+              heading="No Icons"
+              paragraph="Clean layout with no icons on either side"
+              leftIcon={false}
+              rightIcon={false}
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              No icons
+            </p>
+          </div>
+        </div>
+      </div>
 
-export const ReactNodeContent: Story = {
-  render: () => (
-    <Banner
-      heading={
-        <span className="font-bold text-[#ffffff]">Rich Text Heading</span>
-      }
-      paragraph={
-        <div className="flex items-center gap-2">
-          <span className="text-[#ffffff]">Rich content</span>
-          <span className="inline-block h-2 w-2 rounded-full bg-[#ffffff]"></span>
-          <span className="text-[#ffffff]">with components</span>
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Content Layout
+        </h4>
+        <div className="flex w-full max-w-2xl flex-col gap-3">
+          <div className="space-y-2">
+            <Banner
+              variant="positive"
+              appearance="outlined"
+              heading="Heading and Paragraph"
+              paragraph="Both heading and supporting paragraph shown together"
+              leftIcon
+              rightIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Heading + paragraph
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Banner
+              variant="positive"
+              appearance="outlined"
+              heading="Heading Only"
+              leftIcon
+            />
+            <p className="text-fm-secondary font-fm-text text-fm-sm leading-fm-sm text-center">
+              Heading only
+            </p>
+          </div>
         </div>
-      }
-      variant="info"
-      appearance="filled"
-      leftIcon={true}
-    />
+      </div>
+    </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Icon placement configurations (both, left-only, right-only, none) and content layout variations (heading + paragraph vs heading only).",
+      },
+    },
+  },
 }
 
-export const AllBanners = () => {
-  return (
-    <div className="flex w-full max-w-2xl flex-col gap-4">
-      <h2 className="text-fm-primary text-xl font-bold uppercase">POSITIVE</h2>
-      <Banner
-        variant="positive"
-        appearance="filled"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
-      <Banner
-        variant="positive"
-        appearance="outlined"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
-
-      <h2 className="text-fm-primary mt-4 text-xl font-bold uppercase">
-        NEGATIVE
-      </h2>
-      <Banner
-        variant="negative"
-        appearance="filled"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
-      <Banner
-        variant="negative"
-        appearance="outlined"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
-
-      <h2 className="text-fm-primary mt-4 text-xl font-bold uppercase">INFO</h2>
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
-      <Banner
-        variant="info"
-        appearance="outlined"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
+// ─── 4. Interactive ───────────────────────────────────────────────────────────
 
-      <h2 className="text-fm-primary mt-4 text-xl font-bold uppercase">
-        WARNING
-      </h2>
-      <Banner
-        variant="warning"
-        appearance="filled"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
-      <Banner
-        variant="warning"
-        appearance="outlined"
-        heading="Heading"
-        paragraph="Paragraph"
-        leftIcon={true}
-        rightIcon={true}
-      />
+type BannerVariant = "positive" | "negative" | "warning" | "info"
 
-      <h2 className="text-fm-primary mt-8 text-xl font-bold uppercase">
-        INTERACTIVE EXAMPLES
-      </h2>
-      <Banner
-        variant="positive"
-        appearance="filled"
-        heading="Click me"
-        paragraph="This banner is clickable"
-        leftIcon={true}
-        rightIcon={true}
-        onClick={() => alert("Banner clicked!")}
-      />
-
-      <h2 className="text-fm-primary mt-8 text-xl font-bold uppercase">
-        CUSTOM ICON EXAMPLES
-      </h2>
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="Custom left icon"
-        paragraph="This banner has a custom left icon"
-        leftIcon={<span className="mr-4 text-xl">🔔</span>}
-        rightIcon={true}
-      />
-      <Banner
-        variant="warning"
-        appearance="outlined"
-        heading="Custom right icon"
-        paragraph="This banner has a custom right icon"
-        leftIcon={true}
-        rightIcon={<span className="ml-4 text-xl">👉</span>}
-      />
-    </div>
+const InteractiveStory = () => {
+  const [variant, setVariant] = React.useState<BannerVariant>("positive")
+  const [appearance, setAppearance] = React.useState<"filled" | "outlined">(
+    "outlined"
   )
-}
+  const [triggered, setTriggered] = React.useState(false)
 
-export const IconVariants = () => {
-  return (
-    <div className="flex w-full max-w-2xl flex-col gap-4">
-      <h2 className="text-fm-primary text-xl font-bold uppercase">
-        WITH ICONS
-      </h2>
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="Both icons"
-        paragraph="This banner has both left and right icons"
-        leftIcon={true}
-        rightIcon={true}
-      />
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="Left icon only"
-        paragraph="This banner has only a left icon"
-        leftIcon={true}
-        rightIcon={false}
-      />
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="Right icon only"
-        paragraph="This banner has only a right icon"
-        leftIcon={false}
-        rightIcon={true}
-      />
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="No icons"
-        paragraph="This banner has no icons"
-        leftIcon={false}
-        rightIcon={false}
-      />
-    </div>
-  )
-}
+  const variants: BannerVariant[] = ["positive", "negative", "warning", "info"]
+  const override = appearance === "filled" ? filledClassOverride[variant] : ""
 
-export const ContentVariants = () => {
   return (
-    <div className="flex w-full max-w-2xl flex-col gap-4">
-      <h2 className="text-fm-primary text-xl font-bold uppercase">
-        CONTENT VARIATIONS
-      </h2>
-      <Banner
-        variant="positive"
-        appearance="filled"
-        heading="Heading only"
-        leftIcon={true}
-      />
-      <Banner
-        variant="negative"
-        appearance="filled"
-        paragraph="Paragraph only (no heading)"
-        leftIcon={true}
-      />
-      <Banner
-        variant="warning"
-        appearance="filled"
-        heading={
-          <div className="flex items-center gap-2">
-            <span>Heading with </span>
-            <span className="bg-fm-surface-warning text-fm-neutral-100 rounded px-2 py-1">
-              Component
-            </span>
+    <div className="w-full p-8">
+      <div className="mx-auto max-w-3xl space-y-6">
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-5 rounded-xl border p-5">
+            <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+              Variant
+            </p>
+            <div className="flex flex-col gap-2">
+              {variants.map((v) => (
+                <button
+                  key={v}
+                  onClick={() => {
+                    setVariant(v)
+                    setTriggered(false)
+                  }}
+                  className={`font-fm-text text-fm-sm leading-fm-sm rounded-lg px-3 py-2 text-left capitalize transition-colors outline-none ${
+                    variant === v
+                      ? "bg-fm-surface-contrast text-fm-contrast"
+                      : "bg-fm-surface-primary text-fm-secondary hover:text-fm-primary"
+                  }`}
+                >
+                  {v}
+                </button>
+              ))}
+            </div>
+            <div className="border-fm-divider-secondary border-t pt-4" />
+            <p className="text-fm-primary font-fm-brand text-fm-sm leading-fm-sm font-semibold tracking-widest uppercase">
+              Appearance
+            </p>
+            <div className="flex flex-col gap-2">
+              {(["filled", "outlined"] as const).map((a) => (
+                <button
+                  key={a}
+                  onClick={() => setAppearance(a)}
+                  className={`font-fm-text text-fm-sm leading-fm-sm rounded-lg px-3 py-2 text-left capitalize transition-colors outline-none ${
+                    appearance === a
+                      ? "bg-fm-surface-contrast text-fm-contrast"
+                      : "bg-fm-surface-primary text-fm-secondary hover:text-fm-primary"
+                  }`}
+                >
+                  {a}
+                </button>
+              ))}
+            </div>
           </div>
-        }
-        paragraph="Normal paragraph"
-        leftIcon={true}
-      />
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="Normal heading"
-        paragraph={
-          <div className="flex items-center gap-2">
-            <span>Paragraph with </span>
-            <span className="bg-fm-surface-info text-fm-neutral-100 rounded px-2 py-1">
-              Component
-            </span>
+
+          <div className="flex flex-col gap-3 lg:col-span-2">
+            <Banner
+              variant={variant}
+              appearance={appearance}
+              heading={triggered ? "Banner clicked!" : "Click this banner"}
+              paragraph={
+                triggered
+                  ? "Action triggered successfully"
+                  : "This banner is interactive — try clicking it"
+              }
+              leftIcon
+              rightIcon
+              onClick={() => setTriggered((prev) => !prev)}
+              className={override}
+            />
+            <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)">{`<Banner variant="${variant}" appearance="${appearance}" onClick={handler} />`}</code>
+            </div>
           </div>
-        }
-        leftIcon={true}
-      />
+        </div>
+      </div>
     </div>
   )
 }
 
-export const InteractiveVariants = () => {
-  return (
-    <div className="flex w-full max-w-2xl flex-col gap-4">
-      <h2 className="text-fm-primary text-xl font-bold uppercase">
-        INTERACTIVE BANNERS
-      </h2>
-      <Banner
-        variant="positive"
-        appearance="filled"
-        heading="Clickable banner"
-        paragraph="Click me to trigger an action"
-        leftIcon={true}
-        rightIcon={true}
-        onClick={() => alert("Positive banner clicked!")}
-      />
-      <Banner
-        variant="negative"
-        appearance="outlined"
-        heading="Clickable outlined banner"
-        paragraph="Click me to trigger an action"
-        leftIcon={true}
-        rightIcon={true}
-        onClick={() => alert("Negative banner clicked!")}
-      />
-      <Banner
-        variant="info"
-        appearance="filled"
-        heading="No right arrow"
-        paragraph="This banner is clickable but has no right arrow"
-        leftIcon={true}
-        rightIcon={false}
-        onClick={() => alert("Info banner clicked!")}
-      />
+export const Interactive: Story = {
+  render: () => <InteractiveStory />,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Clickable banner with an onClick handler. Select a variant and appearance to preview interactive behaviour.",
+      },
+    },
+  },
+}
+
+// ─── 5. Use Cases ─────────────────────────────────────────────────────────────
+
+export const UseCases: Story = {
+  render: () => (
+    <div className="mx-auto max-w-3xl space-y-8 p-8">
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Upload & Processing Feedback
+        </h4>
+        <div className="mx-auto max-w-2xl space-y-3">
+          <Banner
+            variant="positive"
+            appearance="outlined"
+            heading="Track uploaded successfully"
+            paragraph="Your track is now being processed and will be live shortly"
+            leftIcon
+            rightIcon
+          />
+          <Banner
+            variant="warning"
+            appearance="outlined"
+            heading="Audio quality is low"
+            paragraph="Consider re-uploading at 320 kbps or higher for best results"
+            leftIcon
+            rightIcon
+          />
+          <Banner
+            variant="negative"
+            appearance="outlined"
+            heading="Upload failed"
+            paragraph="File format not supported. Please use MP3, WAV, or FLAC"
+            leftIcon
+            rightIcon
+          />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-fm-secondary font-fm-text text-fm-md leading-fm-md font-medium">
+          Account & Subscription
+        </h4>
+        <div className="mx-auto max-w-2xl space-y-3">
+          <Banner
+            variant="info"
+            appearance="outlined"
+            heading="Your trial ends in 3 days"
+            paragraph="Upgrade to keep access to all features"
+            leftIcon
+            rightIcon
+          />
+          <Banner
+            variant="positive"
+            appearance="outlined"
+            heading="Subscription renewed"
+            paragraph="Your Pro plan has been renewed for another 12 months"
+            leftIcon
+          />
+        </div>
+      </div>
     </div>
-  )
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Real-world usage: upload and processing status feedback, and account subscription notification banners.",
+      },
+    },
+  },
 }