diff --git a/stories/ContentLockup.stories.js b/stories/ContentLockup.stories.js new file mode 100644 index 0000000..e37a74e --- /dev/null +++ b/stories/ContentLockup.stories.js @@ -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.", + }, + }, + }, +}; diff --git a/stories/HeroBanner.stories.js b/stories/HeroBanner.stories.js new file mode 100644 index 0000000..c5926ea --- /dev/null +++ b/stories/HeroBanner.stories.js @@ -0,0 +1,57 @@ +import HeroBanner from "../app/components/HeroBanner"; + +export default { + title: "Components/HeroBanner", + component: HeroBanner, + parameters: { + layout: "fullscreen", + docs: { + description: { + component: + "A responsive hero banner component that showcases the Community Rule branding and messaging. Adapts across multiple breakpoints with proper spacing, typography, and interactive elements. Includes background decorations and product demo integration.", + }, + }, + }, + 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 hero banner with standard Community Rule messaging and branding.", + }, + }, + }, +}; diff --git a/stories/HeroBannerSystem.stories.js b/stories/HeroBannerSystem.stories.js new file mode 100644 index 0000000..9c6356a --- /dev/null +++ b/stories/HeroBannerSystem.stories.js @@ -0,0 +1,248 @@ +import HeroBanner from "../app/components/HeroBanner"; +import ContentLockup from "../app/components/ContentLockup"; +import HeroDecor from "../app/components/HeroDecor"; + +export default { + title: "Systems/HeroBanner System", + parameters: { + layout: "fullscreen", + docs: { + description: { + component: + "Complete HeroBanner system showcasing all nested components working together. This demonstrates the full responsive behavior and component integration.", + }, + }, + }, + tags: ["autodocs"], +}; + +export const CompleteSystem = { + render: () => ( +
+ +
+ ), + parameters: { + docs: { + description: { + story: + "Complete HeroBanner system with all components integrated. Resize your browser to see responsive behavior across all breakpoints.", + }, + }, + }, +}; + +export const ComponentBreakdown = { + render: () => ( +
+
+

HeroBanner Components

+ +
+
+

+ 1. ContentLockup Component +

+
+ +
+
+ +
+

+ 2. HeroDecor Component +

+
+ +
+

Decoration appears behind content

+
+
+
+ +
+

+ 3. Complete HeroBanner +

+ +
+
+
+
+ ), + parameters: { + docs: { + description: { + story: + "Breakdown of individual components that make up the HeroBanner system, showing how they work together.", + }, + }, + }, +}; + +export const ResponsiveBreakpoints = { + render: () => ( +
+

Responsive Breakpoints

+ +
+
+

XSmall (≤429px)

+
+ +
+
+ +
+

Small (430px+)

+
+ +
+
+ +
+

Medium (768px+)

+
+ +
+
+ +
+

Large (1024px+)

+
+ +
+
+ +
+

XLarge (1440px+)

+
+ +
+
+
+
+ ), + parameters: { + docs: { + description: { + story: + "HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulates a different screen size.", + }, + }, + }, +}; + +export const ContentVariations = { + render: () => ( +
+

Content Variations

+ +
+
+

Standard Content

+ +
+ +
+

Alternative Content

+ +
+ +
+

Long Description

+ +
+
+
+ ), + parameters: { + docs: { + description: { + story: + "HeroBanner system with different content variations to demonstrate flexibility and content handling.", + }, + }, + }, +}; diff --git a/stories/HeroDecor.stories.js b/stories/HeroDecor.stories.js new file mode 100644 index 0000000..99e3b68 --- /dev/null +++ b/stories/HeroDecor.stories.js @@ -0,0 +1,58 @@ +import HeroDecor from "../app/components/HeroDecor"; + +export default { + title: "Components/HeroDecor", + component: HeroDecor, + parameters: { + layout: "centered", + docs: { + description: { + component: + "A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability.", + }, + }, + }, + argTypes: { + className: { + control: { type: "text" }, + description: "Additional CSS classes for positioning and styling", + }, + }, + tags: ["autodocs"], +}; + +export const Default = { + args: { + className: "w-[400px] h-[200px]", + }, + parameters: { + docs: { + description: { + story: "Default hero decoration with standard sizing and positioning.", + }, + }, + }, +}; + +export const WithBackground = { + args: { + className: "w-[600px] h-[300px]", + }, + render: (args) => ( +
+ +
+

Content Overlay

+

This demonstrates how the decoration appears behind content.

+
+
+ ), + parameters: { + docs: { + description: { + story: + "Hero decoration with background color to show how it integrates with content.", + }, + }, + }, +}; diff --git a/stories/NumberedCard.stories.js b/stories/NumberedCard.stories.js index aa541eb..01ebf98 100644 --- a/stories/NumberedCard.stories.js +++ b/stories/NumberedCard.stories.js @@ -94,20 +94,3 @@ export const LongText = { }, }, }; - -export const ResponsiveTest = { - args: { - number: 2, - text: "Test responsive behavior by resizing your browser window", - iconShape: "gear", - iconColor: "purple", - }, - parameters: { - docs: { - description: { - story: - "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.", - }, - }, - }, -}; diff --git a/stories/NumberedCards.stories.js b/stories/NumberedCards.stories.js index aed510b..90ca449 100644 --- a/stories/NumberedCards.stories.js +++ b/stories/NumberedCards.stories.js @@ -90,36 +90,3 @@ export const CustomContent = { }, }, }; - -export const ResponsiveBreakpoints = { - args: { - title: "Responsive Design Test", - subtitle: - "This story demonstrates how the component adapts across different breakpoints: xsm, sm, lg, and xl.", - cards: [ - { - text: "Mobile-first design approach", - iconShape: "blob", - iconColor: "green", - }, - { - text: "Tablet and desktop optimization", - iconShape: "gear", - iconColor: "purple", - }, - { - text: "Large screen layouts and spacing", - iconShape: "star", - iconColor: "orange", - }, - ], - }, - parameters: { - docs: { - description: { - story: - "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.", - }, - }, - }, -};