chore: catch up Storybook preview, coverage, and story hygiene
Stories were throwing without AuthModal/CreateFlow providers, autodocs was a no-op, and several DS/create-flow screens had no stories.
This commit is contained in:
adilallo
@@ -0,0 +1,38 @@
|
||||
import FaqAccordion from "../../app/components/sections/Accordion";
|
||||
import about from "../../messages/en/pages/about.json";
|
||||
|
||||
export default {
|
||||
title: "Components/Sections/Accordion",
|
||||
component: FaqAccordion,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"About-page FAQ wrapper over layout/Accordion. Sizes: s below lg, m at lg, l at xl.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
title: { control: { type: "text" } },
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["s", "m", "l"],
|
||||
},
|
||||
lgSize: {
|
||||
control: { type: "select" },
|
||||
options: ["s", "m", "l"],
|
||||
},
|
||||
xlSize: {
|
||||
control: { type: "select" },
|
||||
options: ["s", "m", "l"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
title: about.faq.title,
|
||||
items: about.faq.items,
|
||||
},
|
||||
};
|
||||
@@ -1,248 +0,0 @@
|
||||
import HeroBanner from "../../app/components/sections/HeroBanner";
|
||||
import ContentLockup from "../../app/components/type/ContentLockup";
|
||||
import HeroDecor from "../../app/components/sections/HeroBanner/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: () => (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
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: () => (
|
||||
<div className="space-y-12 p-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6">HeroBanner Components</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
1. ContentLockup Component
|
||||
</h3>
|
||||
<div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg">
|
||||
<ContentLockup
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
2. HeroDecor Component
|
||||
</h3>
|
||||
<div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden h-64">
|
||||
<HeroDecor className="w-full h-full" />
|
||||
<div className="relative z-10 text-white mt-4">
|
||||
<p>Decoration appears behind content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
3. Complete HeroBanner
|
||||
</h3>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Breakdown of individual components that make up the HeroBanner system, showing how they work together.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ResponsiveBreakpoints = {
|
||||
render: () => (
|
||||
<div className="space-y-8 p-8">
|
||||
<h2 className="text-2xl font-bold">Responsive Breakpoints</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">XSmall (≤429px)</h3>
|
||||
<div
|
||||
className="border-2 border-gray-300 rounded-lg overflow-hidden"
|
||||
style={{ width: "400px" }}
|
||||
>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Small (430px+)</h3>
|
||||
<div
|
||||
className="border-2 border-gray-300 rounded-lg overflow-hidden"
|
||||
style={{ width: "600px" }}
|
||||
>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Medium (768px+)</h3>
|
||||
<div
|
||||
className="border-2 border-gray-300 rounded-lg overflow-hidden"
|
||||
style={{ width: "900px" }}
|
||||
>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Large (1024px+)</h3>
|
||||
<div
|
||||
className="border-2 border-gray-300 rounded-lg overflow-hidden"
|
||||
style={{ width: "1200px" }}
|
||||
>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">XLarge (1440px+)</h3>
|
||||
<div
|
||||
className="border-2 border-gray-300 rounded-lg overflow-hidden"
|
||||
style={{ width: "1600px" }}
|
||||
>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulates a different screen size.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ContentVariations = {
|
||||
render: () => (
|
||||
<div className="space-y-8 p-8">
|
||||
<h2 className="text-2xl font-bold">Content Variations</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Standard Content</h3>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Alternative Content</h3>
|
||||
<HeroBanner
|
||||
title="Build"
|
||||
subtitle="better communities"
|
||||
description="Create operating manuals that help your community thrive and make decisions together."
|
||||
ctaText="Get started today"
|
||||
ctaHref="/signup"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Long Description</h3>
|
||||
<HeroBanner
|
||||
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="#"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"HeroBanner system with different content variations to demonstrate flexibility and content handling.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,4 +1,5 @@
|
||||
import QuoteBlock from "../../app/components/sections/QuoteBlock";
|
||||
import { QUOTE_BLOCK_VARIANT_OPTIONS } from "../../lib/propNormalization";
|
||||
|
||||
export default {
|
||||
title: "Components/Sections/QuoteBlock",
|
||||
@@ -34,7 +35,7 @@ A responsive quote section component that displays inspirational governance quot
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["compact", "standard", "extended", "statement"],
|
||||
options: [...QUOTE_BLOCK_VARIANT_OPTIONS],
|
||||
description: "Layout variant for different use cases",
|
||||
},
|
||||
quote: {
|
||||
|
||||
Reference in New Issue
Block a user