-
+ {/* Subtitle Container */}
+
diff --git a/stories/NumberedCard.stories.js b/stories/NumberedCard.stories.js
new file mode 100644
index 0000000..aa541eb
--- /dev/null
+++ b/stories/NumberedCard.stories.js
@@ -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) => (
+
+
+
+
+
+ ),
+ 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.",
+ },
+ },
+ },
+};
diff --git a/stories/NumberedCards.stories.js b/stories/NumberedCards.stories.js
new file mode 100644
index 0000000..aed510b
--- /dev/null
+++ b/stories/NumberedCards.stories.js
@@ -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.",
+ },
+ },
+ },
+};
diff --git a/stories/SectionHeader.stories.js b/stories/SectionHeader.stories.js
new file mode 100644
index 0000000..40bf7b0
--- /dev/null
+++ b/stories/SectionHeader.stories.js
@@ -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.",
+ },
+ },
+ },
+};
diff --git a/stories/SectionNumber.stories.js b/stories/SectionNumber.stories.js
new file mode 100644
index 0000000..b0287c6
--- /dev/null
+++ b/stories/SectionNumber.stories.js
@@ -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: () => (
+
+
+
+
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Shows all three numbered icons side by side to demonstrate the different PNG backgrounds.",
+ },
+ },
+ },
+};
+
+export const WithBackground = {
+ render: () => (
+
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container.",
+ },
+ },
+ },
+};