Component cleanup

stories/sections/CardSteps.stories.js

@@ -1,30 +1,30 @@
-import NumberedCards from "../../app/components/sections/NumberedCards";
+import CardSteps from "../../app/components/sections/CardSteps";
 
 export default {
-  title: "Components/Sections/NumberedCards",
-  component: NumberedCards,
+  title: "Components/Sections/CardSteps",
+  component: CardSteps,
   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 NumberCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system.",
+          "Marketing section (Figma SectionCardSteps) that composes **cards/Step** tiles with a section header and CTA. Use for sequential explainers on the home page and similar surfaces.",
       },
     },
   },
   argTypes: {
     title: {
       control: { type: "text" },
-      description: "The main title for the section",
+      description: "The main title for the section (mobile single line)",
     },
     subtitle: {
       control: { type: "text" },
-      description: "The subtitle text below the main title",
+      description: "Supporting text beside / below the title on large screens",
     },
-    cards: {
+    steps: {
       control: { type: "object" },
       description:
-        "Array of card objects with text, iconShape, and iconColor properties",
+        "Items rendered as **Step** cards (text, optional iconShape, iconColor)",
     },
   },
   tags: ["autodocs"],
@@ -34,7 +34,8 @@ export const Default = {
   args: {
     title: "How CommunityRule works",
     subtitle: "Here's a quick overview of the process, from start to finish.",
-    cards: [
+    headingDesktopLines: ["How", "CommunityRule", "helps"],
+    steps: [
       {
         text: "Document how your community makes decisions",
         iconShape: "blob",
@@ -58,7 +59,7 @@ export const CustomContent = {
   args: {
     title: "Our Process",
     subtitle: "Follow these simple steps to get started with your project.",
-    cards: [
+    steps: [
       {
         text: "Define your project requirements and goals",
         iconShape: "blob",
@@ -85,7 +86,7 @@ export const CustomContent = {
     docs: {
       description: {
         story:
-          "Example with custom content and four cards to show flexibility.",
+          "Example with custom content and four **Step** tiles to show flexibility.",
       },
     },
   },

stories/sections/CommunityRuleDocument.stories.js

@@ -1,58 +0,0 @@
-import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
-
-const sampleSections = [
-  {
-    categoryName: "Decision making",
-    entries: [
-      {
-        title: "How proposals pass",
-        body: "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
-      },
-      {
-        title: "Blocks",
-        body: "Anyone with a serious objection may block consensus and require further discussion.",
-      },
-    ],
-  },
-  {
-    categoryName: "Membership",
-    entries: [
-      {
-        title: "Joining",
-        body: "New members are welcomed by consensus of existing members.",
-      },
-    ],
-  },
-];
-
-export default {
-  title: "Components/Sections/CommunityRuleDocument",
-  component: CommunityRuleDocument,
-  parameters: {
-    layout: "padded",
-  },
-  argTypes: {
-    sections: {
-      control: false,
-      description: "Document sections, each with a categoryName and entries.",
-    },
-    useCardStyle: {
-      control: "boolean",
-      description: "When true, wraps the document in a white card with a teal bar",
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    sections: sampleSections,
-    useCardStyle: false,
-  },
-};
-
-export const CardStyle = {
-  args: {
-    sections: sampleSections,
-    useCardStyle: true,
-  },
-};

stories/sections/FeatureGrid.stories.js

@@ -14,7 +14,7 @@ A responsive feature grid component that displays organizational tools and servi
 
 - **Responsive Layout**: Adapts from 2x2 grid on mobile to 1x4 grid on tablet to horizontal layout on desktop
 - **ContentLockup Integration**: Uses the feature variant with "Learn more" link
-- **MiniCard Grid**: Four feature cards with color-coded backgrounds and icons
+- **Mini grid**: Four feature tiles with color-coded backgrounds and icons
 - **Accessibility**: Full keyboard navigation, focus indicators, and ARIA labels
 - **Design System**: Uses design tokens for consistent spacing, colors, and typography
 
@@ -26,7 +26,7 @@ A responsive feature grid component that displays organizational tools and servi
 
 ## Interactive Elements
 
-- **MiniCards**: Hover effects, focus indicators, and keyboard navigation
+- **Mini tiles**: Hover effects, focus indicators, and keyboard navigation
 - **Learn More Link**: Underlined link with focus states
 - **Color-coded Features**: Royal, green, pink, and blue backgrounds for categorization
 
@@ -69,7 +69,7 @@ export const Default = {
 Default FeatureGrid with standard content. This component demonstrates:
 
 - **ContentLockup**: Feature variant with title, subtitle, and "Learn more" link
-- **MiniCard Grid**: Four feature cards with different colors and icons
+- **Mini grid**: Four feature tiles with different colors and icons
 - **Responsive Design**: Layout adapts across mobile, tablet, and desktop breakpoints
 - **Interactive States**: Hover effects and focus indicators on all interactive elements
 

stories/sections/GovernanceTemplateGrid.stories.js

@@ -10,7 +10,7 @@ export default {
   argTypes: {
     entries: {
       control: false,
-      description: "Catalog entries to render as a 2-column grid of RuleCards",
+      description: "Catalog entries to render as a 2-column grid of Rules",
     },
     onTemplateClick: { action: "template-clicked" },
   },

stories/sections/RuleStack.stories.js

@@ -44,7 +44,7 @@ export default {
     docs: {
       description: {
         component:
-          "A complete template library component that displays governance patterns in a responsive grid layout. Includes SectionHeader with multi-line variant, interactive RuleCard components, and a call-to-action button. Features comprehensive accessibility, analytics tracking, and responsive design across all breakpoints.\n\n" +
+          "A complete template library component that displays governance patterns in a responsive grid layout. Composes **`type/SectionHeader`** (multi-line variant), interactive **`Rule`** cards, and a call-to-action button. Features comprehensive accessibility, analytics tracking, and responsive design across all breakpoints.\n\n" +
           "**Testing Scenarios:**\n" +
           "- **Responsive Testing**: Resize browser window to test layout adaptation from single column on mobile to 2x2 grid on larger screens\n" +
           "- **Interactive Testing**: Hover over cards to see effects, use Tab to navigate between cards, and click to see analytics events in console\n" +

stories/sections/SectionHeader.stories.js

@@ -1,151 +0,0 @@
-import SectionHeader from "../../app/components/sections/SectionHeader";
-
-export default {
-  title: "Components/Sections/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. Includes 'default' and 'multi-line' variants with different layout behaviors.",
-      },
-    },
-  },
-  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)",
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["default", "multi-line"],
-      description:
-        "The layout variant - 'default' for traditional layout, 'multi-line' for 50/50 split layout",
-    },
-  },
-  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",
-    variant: "default",
-  },
-};
-
-export const MultiLine = {
-  args: {
-    title: "Popular templates",
-    subtitle:
-      "These are popular patterns for making decisions in mutual aid and open source communities. You can use them as they are or as a starting place for customizing your own CommunityRule.",
-    variant: "multi-line",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The multi-line variant creates a 50/50 split layout at lg and xl breakpoints, with the title on the left and subtitle on the right. This variant is used in the RuleStack component.",
-      },
-    },
-  },
-};
-
-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",
-    variant: "default",
-  },
-  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",
-    variant: "default",
-  },
-  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",
-    variant: "default",
-  },
-  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.",
-    variant: "default",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Shows the component without a titleLg prop, demonstrating the fallback behavior.",
-      },
-    },
-  },
-};
-
-export const MultiLineResponsive = {
-  args: {
-    title: "Multi-line Responsive Test",
-    subtitle:
-      "This multi-line variant demonstrates the 50/50 split layout at larger breakpoints. Resize your browser to see how the layout adapts from stacked on mobile to side-by-side on desktop.",
-    variant: "multi-line",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Test the responsive behavior of the multi-line variant. The layout changes from stacked on mobile to 50/50 split on lg and xl breakpoints.",
-      },
-    },
-  },
-};