Hero Banner Storybook added

2025-08-19 23:12:50 -06:00
parent 452603f4f6
commit 445e812e9c
6 changed files with 455 additions and 50 deletions
@@ -0,0 +1,92 @@
+import ContentLockup from "../app/components/ContentLockup";
+
+export default {
+  title: "Components/ContentLockup",
+  component: ContentLockup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Used within the HeroBanner component.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "The main title text",
+    },
+    subtitle: {
+      control: { type: "text" },
+      description: "The subtitle text",
+    },
+    description: {
+      control: { type: "text" },
+      description: "The description text",
+    },
+    ctaText: {
+      control: { type: "text" },
+      description: "The call-to-action button text",
+    },
+    ctaHref: {
+      control: { type: "text" },
+      description: "The call-to-action button link",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    title: "Collaborate",
+    subtitle: "with clarity",
+    description:
+      "Help your community make important decisions in a way that reflects its unique values.",
+    ctaText: "Learn how Community Rule works",
+    ctaHref: "#",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default content lockup with standard Community Rule messaging.",
+      },
+    },
+  },
+};
+
+export const LongDescription = {
+  args: {
+    title: "Collaborate",
+    subtitle: "with clarity",
+    description:
+      "Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
+    ctaText: "Learn how Community Rule works",
+    ctaHref: "#",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Content lockup with longer description text to test text wrapping.",
+      },
+    },
+  },
+};
+
+export const ShortContent = {
+  args: {
+    title: "Simple",
+    subtitle: "solution",
+    description: "Easy community decision making.",
+    ctaText: "Try it",
+    ctaHref: "#",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Content lockup with minimal content to test compact layouts.",
+      },
+    },
+  },
+};