Implement use cases page

2026-05-17 21:41:54 -06:00
parent b6b9b63608
commit 450da4d8ab
78 changed files with 1870 additions and 118 deletions
@@ -0,0 +1,37 @@
+import CaseStudy, {
+  CASE_STUDY_SURFACE_OPTIONS,
+} from "../../app/components/cards/CaseStudy";
+
+export default {
+  title: "Components/Cards/CaseStudy",
+  component: CaseStudy,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Figma **Card / CaseStudy** ([21993-32352](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21993-32352)). Fixed **305×305** artwork when **`visual`** is omitted: Mutual Aid **SVG** (**`assets/case-study/`**) + raster tiles for neutral/rose (**[22112-871524](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871524)**).",
+      },
+    },
+  },
+  argTypes: {
+    surface: {
+      control: { type: "select" },
+      options: [...CASE_STUDY_SURFACE_OPTIONS],
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Lavender = {
+  args: { surface: "lavender", imageAlt: "Mutual Aid Colorado logo" },
+};
+export const Neutral = {
+  args: { surface: "neutral", imageAlt: "Food Not Bombs logo" },
+};
+export const Rose = {
+  args: {
+    surface: "rose",
+    imageAlt: "Boulder County Street Medics logo",
+  },
+};
@@ -24,7 +24,8 @@ export default {
    },
    description: {
      control: { type: "text" },
-      description: "The description text displayed in uppercase",
+      description:
+        "Body: 12px/16px (X Small); 14px/20px on md–<lg only (Card/Icon, Section 22084-859062)",
    },
    onClick: { action: "clicked" },
  },
@@ -0,0 +1,93 @@
+import Groups from "../../app/components/sections/Groups";
+
+const vectorIconSrc = [
+  "/assets/vector/worker-coop.svg",
+  "/assets/vector/mutual-aid.svg",
+  "/assets/vector/open-source.svg",
+  "/assets/vector/dao.svg",
+];
+
+const sampleItems = [
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[0]}
+        width={36}
+      />
+    ),
+    title: "Worker's cooperatives",
+    description:
+      "Employee-owned businesses often need to clarify how power is shared, decisions are made, and how processes operate within their organizations.",
+  },
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[1]}
+        width={36}
+      />
+    ),
+    title: "Mutual aid groups",
+    description:
+      "Mutual aid groups must define how resources are shared, decisions are made, and volunteer coordination operates within their organizations.",
+  },
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[2]}
+        width={36}
+      />
+    ),
+    title: "Open source projects",
+    description:
+      "Agree to how contributions are managed, technical decisions are made, and community participation operates within their development communities.",
+  },
+  {
+    icon: (
+      <img
+        alt=""
+        aria-hidden
+        className="inline-block size-9 object-contain"
+        height={36}
+        src={vectorIconSrc[3]}
+        width={36}
+      />
+    ),
+    title: "DAOs",
+    description:
+      "Document token-based voting process, proposal patterns, and how community governance operates within their blockchain ecosystems.",
+  },
+];
+
+export default {
+  title: "Components/Sections/Groups",
+  component: Groups,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Section** (**[22084-859062](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859062&m=dev)**) — baseline stacked cards; **md+** `22084-859470` hairline grid. **`cards/Icon`** tiles (body **12px/16px** from **`lg`**).",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    title: "Who is this for?",
+    items: sampleItems,
+  },
+};
@@ -11,7 +11,7 @@ export default {
 A responsive quote section component that displays inspirational governance quotes with author attribution and decorative geometric elements.

 ## Features
- **Four variants**: compact, standard, extended, and **statement** (Section/Quote yellow band, dual paragraphs)
+- **Four variants**: compact, standard, extended, and **statement** (Section/Quote yellow band; two paragraphs below \`lg\`, one paragraph from \`lg\` on /about and /use-cases — [21967-24638](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21967-24638&m=dev))
 - **Responsive design**: Adapts across all breakpoints
 - **Error handling**: Graceful fallbacks for image loading failures
 - **Accessibility**: WCAG 2.1 AA compliant with proper ARIA labels
@@ -39,12 +39,11 @@ A responsive quote section component that displays inspirational governance quot
    },
    quote: {
      control: { type: "text" },
-      description:
-        "Main quote / first paragraph (for `statement`, pair with quoteSecondary)",
+      description: "Main quote — first statement paragraph",
    },
    quoteSecondary: {
      control: { type: "text" },
-      description: "Second paragraph when `variant` is `statement`",
+      description: "Second statement paragraph",
    },
    author: {
      control: { type: "text" },
@@ -129,7 +128,7 @@ export const AllVariants = {
  },
 };

-// Statement band (About page / Figma Section/Quote)
+// Statement band (Section/Quote — same layout as /about + /use-cases)
 export const StatementAbout = {
  args: {
    variant: "statement",
@@ -0,0 +1,33 @@
+import UseCasesOrgs from "../../app/components/sections/UseCasesOrgs";
+import CaseStudy from "../../app/components/cards/CaseStudy";
+
+export default {
+  title: "Components/Sections/UseCasesOrgs",
+  component: UseCasesOrgs,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Orgs** ([21993-33687](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21993-33687&m=dev)): **`CaseStudy`** row (**305×305**, **8px** gap, **24px** horizontal / **48px** bottom padding).",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  render: () => (
+    <UseCasesOrgs>
+      <CaseStudy
+        surface="lavender"
+        imageAlt="Mutual Aid Colorado logo"
+      />
+      <CaseStudy surface="neutral" imageAlt="Food Not Bombs logo" />
+      <CaseStudy
+        surface="rose"
+        imageAlt="Boulder County Street Medics logo"
+      />
+    </UseCasesOrgs>
+  ),
+};
@@ -0,0 +1,43 @@
+import PageHeader from "../../app/components/type/PageHeader";
+
+export default {
+  title: "Components/Type/PageHeader",
+  component: PageHeader,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Type / PageHeader** ([21004-15902](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21004-15902)). Marketing hero: title, body, optional inverse pill CTA.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    title: "Mutual aid groups should define structure before they need it",
+    description:
+      "Many mutual aid groups deprioritize guidelines in favor of immediate action, but setting up a few key agreements early protects the group's mission.",
+    ctaText: "Create CommunityRule",
+    ctaHref: "/create",
+  },
+};
+
+export const WithoutCta = {
+  args: {
+    title: "Headline only",
+    description: "Supporting copy without a call to action.",
+  },
+};
+
+/** Use cases header: stacked below `lg`; single line at **`lg`** ([21004-24825](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21004-24825&m=dev)). */
+export const UseCasesMinimal = {
+  args: {
+    title: ["See how groups use", "CommunityRule"],
+    headingAlign: "center",
+    sectionMinimal: true,
+    singleLineTitleFromLg: true,
+  },
+};
@@ -0,0 +1,40 @@
+import TripleStep from "../../app/components/type/TripleStep";
+
+const sampleSteps = [
+  {
+    title: "Get your stakeholders together",
+    body: "If you're just getting started, you might begin with shared values, decision-making plan, and conflict resolution process.",
+  },
+  {
+    title: "Define how your group should operate",
+    body: "Involving everyone in shaping these agreements through group discussions, workshops, or a tool like CommunityRule can help build collective buy-in.",
+  },
+  {
+    title: "Have a durable impact",
+    body: "Consider treating guidelines as a living document that evolves with your group's needs.",
+  },
+];
+
+export default {
+  title: "Components/Type/TripleStep",
+  component: TripleStep,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Figma **Section / Triple Step** ([22084-859405](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859405&m=dev)); type baseline ([22112-871527](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22112-871527)). Headline uses **Large/Heading** from **md**; steps use **18px/22px** Bricolage medium + **Small/Paragraph** (14/20); outline CTA; **md+** second column shows **`triple-step.svg`**.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    heading: "Get recommendations that will make organizing easier",
+    steps: sampleSteps,
+    ctaText: "Create Rule",
+    ctaHref: "/create",
+  },
+};