CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Numbered Cards extra large breakpoint and storybook

Browse Source
This commit is contained in:
adilallo
2025-08-17 21:34:36 -06:00
parent 3ab67d5096
commit 5a552bc78b
7 changed files with 430 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/NumberedCard.stories.js
+113
View File
@@ -0,0 +1,113 @@
import NumberedCard from "../app/components/NumberedCard";
export default {
title: "Components/NumberedCard",
component: NumberedCard,
parameters: {
layout: "centered",
docs: {
description: {
component:
"Individual numbered card component that displays a step in a process with a numbered icon and descriptive text. Supports responsive layouts across different breakpoints.",
},
},
},
argTypes: {
number: {
control: { type: "number", min: 1, max: 9 },
description: "The number to display on the card",
},
text: {
control: { type: "text" },
description: "The descriptive text for this step",
},
iconShape: {
control: { type: "select" },
options: ["blob", "gear", "star"],
description:
"The shape of the icon background (currently not used, uses PNG images)",
},
iconColor: {
control: { type: "select" },
options: ["green", "purple", "orange", "blue"],
description:
"The color theme for the icon (currently not used, uses PNG images)",
},
},
tags: ["autodocs"],
};
export const Default = {
args: {
number: 1,
text: "Document how your community makes decisions",
iconShape: "blob",
iconColor: "green",
},
};
export const AllNumbers = {
args: {
number: 1,
text: "Example card text",
iconShape: "blob",
iconColor: "green",
},
render: (args) => (
<div className="space-y-4">
<NumberedCard {...args} number={1} text="First step in the process" />
<NumberedCard
{...args}
number={2}
text="Second step with different content"
/>
<NumberedCard
{...args}
number={3}
text="Third and final step of the workflow"
/>
</div>
),
parameters: {
docs: {
description: {
story:
"Shows all three numbered cards with different content to demonstrate the visual hierarchy.",
},
},
},
};
export const LongText = {
args: {
number: 1,
text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
iconShape: "blob",
iconColor: "green",
},
parameters: {
docs: {
description: {
story:
"Demonstrates how the card handles longer text content across different breakpoints.",
},
},
},
};
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.",
},
},
},
};
stories/NumberedCards.stories.js
+125
View File
@@ -0,0 +1,125 @@
import NumberedCards from "../app/components/NumberedCards";
export default {
title: "Components/NumberedCards",
component: NumberedCards,
parameters: {
layout: "fullscreen",
docs: {
description: {
component:
"A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberedCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system.",
},
},
},
argTypes: {
title: {
control: { type: "text" },
description: "The main title for the section",
},
subtitle: {
control: { type: "text" },
description: "The subtitle text below the main title",
},
cards: {
control: { type: "object" },
description:
"Array of card objects with text, iconShape, and iconColor properties",
},
},
tags: ["autodocs"],
};
export const Default = {
args: {
title: "How CommunityRule works",
subtitle: "Here's a quick overview of the process, from start to finish.",
cards: [
{
text: "Document how your community makes decisions",
iconShape: "blob",
iconColor: "green",
},
{
text: "Build an operating manual for a successful community",
iconShape: "gear",
iconColor: "purple",
},
{
text: "Get a link to your manual for your group to review and evolve",
iconShape: "star",
iconColor: "orange",
},
],
},
};
export const CustomContent = {
args: {
title: "Our Process",
subtitle: "Follow these simple steps to get started with your project.",
cards: [
{
text: "Define your project requirements and goals",
iconShape: "blob",
iconColor: "green",
},
{
text: "Collaborate with our team to create the perfect solution",
iconShape: "gear",
iconColor: "purple",
},
{
text: "Launch and iterate based on user feedback",
iconShape: "star",
iconColor: "orange",
},
{
text: "Scale and optimize for continued success",
iconShape: "blob",
iconColor: "blue",
},
],
},
parameters: {
docs: {
description: {
story:
"Example with custom content and four cards to show flexibility.",
},
},
},
};
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.",
},
},
},
};
stories/SectionHeader.stories.js
+106
View File
@@ -0,0 +1,106 @@
import SectionHeader from "../app/components/SectionHeader";
export default {
title: "Components/SectionHeader",
component: SectionHeader,
parameters: {
layout: "centered",
docs: {
description: {
component:
"A section header component that displays a title and subtitle with responsive typography and layout. Supports different title text for large breakpoints and maintains consistent spacing across all screen sizes.",
},
},
},
argTypes: {
title: {
control: { type: "text" },
description: "The main title text (used for xsm and sm breakpoints)",
},
subtitle: {
control: { type: "text" },
description: "The subtitle text below the main title",
},
titleLg: {
control: { type: "text" },
description:
"The title text for lg and xl breakpoints (optional, falls back to title)",
},
},
tags: ["autodocs"],
};
export const Default = {
args: {
title: "How CommunityRule works",
subtitle: "Here's a quick overview of the process, from start to finish.",
titleLg: "How CommunityRule helps",
},
};
export const CustomContent = {
args: {
title: "Our Mission",
subtitle:
"We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
titleLg: "Building Better Communities",
},
parameters: {
docs: {
description: {
story:
"Example with custom content to show the flexibility of the component.",
},
},
},
};
export const LongSubtitle = {
args: {
title: "Complex Process",
subtitle:
"This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
titleLg: "Complex Process Simplified",
},
parameters: {
docs: {
description: {
story:
"Demonstrates how the component handles longer subtitle text across different breakpoints.",
},
},
},
};
export const ResponsiveTest = {
args: {
title: "Responsive Design",
subtitle:
"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
titleLg: "Responsive Design Test",
},
parameters: {
docs: {
description: {
story:
"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
},
},
},
};
export const WithoutTitleLg = {
args: {
title: "Simple Header",
subtitle:
"This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints.",
},
parameters: {
docs: {
description: {
story:
"Shows the component without a titleLg prop, demonstrating the fallback behavior.",
},
},
},
};
stories/SectionNumber.stories.js
+78
View File
@@ -0,0 +1,78 @@
import SectionNumber from "../app/components/SectionNumber";
export default {
title: "Components/SectionNumber",
component: SectionNumber,
parameters: {
layout: "centered",
docs: {
description: {
component:
"A numbered icon component that displays a number overlaid on a PNG background image. The component uses different PNG images for numbers 1, 2, and 3, with the image extending beyond the 40px container size.",
},
},
},
argTypes: {
number: {
control: { type: "number", min: 1, max: 3 },
description: "The number to display (1, 2, or 3)",
},
},
tags: ["autodocs"],
};
export const NumberOne = {
args: {
number: 1,
},
};
export const NumberTwo = {
args: {
number: 2,
},
};
export const NumberThree = {
args: {
number: 3,
},
};
export const AllNumbers = {
render: () => (
<div className="flex space-x-4">
<SectionNumber number={1} />
<SectionNumber number={2} />
<SectionNumber number={3} />
</div>
),
parameters: {
docs: {
description: {
story:
"Shows all three numbered icons side by side to demonstrate the different PNG backgrounds.",
},
},
},
};
export const WithBackground = {
render: () => (
<div className="bg-gray-100 p-8 rounded-lg">
<div className="flex space-x-4">
<SectionNumber number={1} />
<SectionNumber number={2} />
<SectionNumber number={3} />
</div>
</div>
),
parameters: {
docs: {
description: {
story:
"Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container.",
},
},
},
};