Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,85 @@
+import CommunityRule from "../../app/components/type/CommunityRule";
+
+const sampleSections = [
+  {
+    categoryName: "Decision making",
+    entries: [
+      {
+        title: "How proposals pass",
+        body: "Short opener line.\n\nImportant 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/Type/CommunityRule",
+  component: CommunityRule,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    sections: {
+      control: false,
+      description: "Rule sections, each with a categoryName and entries.",
+    },
+    useCardStyle: {
+      control: "boolean",
+      description: "When true, wraps the rule body in a white card with a teal bar",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: false,
+  },
+};
+
+export const WithLabeledBlocks = {
+  args: {
+    sections: [
+      {
+        categoryName: "Membership",
+        entries: [
+          {
+            title: "Consensus or vote-based approval",
+            body: "",
+            blocks: [
+              {
+                label: "Eligibility & philosophy",
+                body: "Access to critical resources is restricted to safeguard the project.",
+              },
+              {
+                label: "Joining process",
+                body: "Volunteers who have completed two full distributions can submit a request.",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    useCardStyle: false,
+  },
+};
+
+export const CardStyle = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: true,
+  },
+};
@@ -0,0 +1,56 @@
+import Section from "../../app/components/type/Section";
+import TextBlock from "../../app/components/type/TextBlock";
+
+export default {
+  title: "Components/Type/Section",
+  component: Section,
+  parameters: { layout: "padded" },
+  argTypes: {
+    categoryName: { control: "text" },
+    showRail: { control: "boolean" },
+    children: { control: false },
+  },
+};
+
+export const Default = {
+  args: {
+    categoryName: "Values",
+    showRail: true,
+    children: (
+      <>
+        <TextBlock
+          title="Solidarity Forever"
+          body={`“Change needs all of us.”
+
+Food Not Bombs is not a charity. It is a project of solidarity.`}
+        />
+        <TextBlock
+          title="Shared Leadership"
+          body="Everyone coordinates, no one controls."
+        />
+      </>
+    ),
+  },
+};
+
+export const WithoutRail = {
+  args: {
+    categoryName: "Membership",
+    showRail: false,
+    children: (
+      <TextBlock
+        title="Open access"
+        rows={[
+          {
+            label: "Eligibility & philosophy",
+            body: "Anyone aligned with the mission may join.",
+          },
+          {
+            label: "Process",
+            body: "Complete two orientations, then lazy consensus.",
+          },
+        ]}
+      />
+    ),
+  },
+};
@@ -0,0 +1,167 @@
+import SectionHeader from "../../app/components/type/SectionHeader";
+
+export default {
+  title: "Components/Type/SectionHeader",
+  component: SectionHeader,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Figma Type / SectionHeader ([17411:10981](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=17411-10981)). Title + subtitle with responsive typography: stacked on small screens, split row from lg. **`default`**: top-aligned row; **`multi-line`**: vertically centered row on large screens (subtitle vs. title). Optional **`stackedDesktopLines`** for three-line desktop titles (CardSteps).",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "Title for small viewports (and mobile/stacked layout)",
+    },
+    subtitle: {
+      control: { type: "text" },
+      description: "Subtitle / supporting copy",
+    },
+    titleLg: {
+      control: { type: "text" },
+      description:
+        "Optional single-line title from lg up (when `stackedDesktopLines` is not set)",
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "multi-line"],
+      description: "Layout variant (Figma 1-line vs 3-line row behavior)",
+    },
+  },
+  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:
+          "Used in **RuleStack**: 50/50 row from lg with subtitle vertically centered against the title block.",
+      },
+    },
+  },
+};
+
+export const MultiLineStackedTitle = {
+  args: {
+    title: "How CommunityRule works",
+    subtitle: "Here's a quick overview of the process, from start to finish.",
+    variant: "multi-line",
+    stackedDesktopLines: ["How", "CommunityRule", "helps"],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Used in **CardSteps**: three-line Bricolage lockup on large screens with `stackedDesktopLines`.",
+      },
+    },
+  },
+};
+
+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.",
+      },
+    },
+  },
+};
@@ -0,0 +1,35 @@
+import TextBlock from "../../app/components/type/TextBlock";
+
+export default {
+  title: "Components/Type/TextBlock",
+  component: TextBlock,
+  parameters: { layout: "padded" },
+  argTypes: {
+    title: { control: "text" },
+    body: { control: "text" },
+    rows: { control: false },
+  },
+};
+
+export const PlainBody = {
+  args: {
+    title: "Solidarity Forever",
+    body: "First paragraph line.\n\nSecond paragraph with more detail.",
+  },
+};
+
+export const LabeledRows = {
+  args: {
+    title: "Consensus or vote-based approval",
+    rows: [
+      {
+        label: "Eligibility & philosophy",
+        body: "Access to critical resources is restricted to safeguard the project.",
+      },
+      {
+        label: "Joining process",
+        body: "Volunteers who have completed two full distributions can submit a request.",
+      },
+    ],
+  },
+};