Refine use cases rule examples

tests/components/AskOrganizer.test.tsx

@@ -91,11 +91,35 @@ describe("AskOrganizer (behavioral tests)", () => {
         variant="use-case-detail"
       />,
     );
-    expect(
-      container.querySelector('[data-figma-node="22015-42624"]'),
-    ).toBeInTheDocument();
+    const section = container.querySelector('[data-figma-node="22015-42624"]');
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveClass("py-[var(--spacing-scale-032)]");
+    expect(section).not.toHaveClass("py-[var(--spacing-scale-096)]");
     expect(
       screen.getByRole("heading", { name: "Still have questions?" }),
     ).toBeInTheDocument();
   });
+
+  it("centered variant uses baseline section padding per Figma 17487-12288", () => {
+    const { container } = render(
+      <AskOrganizer
+        title="Still have questions?"
+        subtitle="Get answers from an experienced organizer"
+        variant="centered"
+      />,
+    );
+    const section = container.querySelector('[data-figma-node="18116-15960"]');
+    expect(section).toHaveClass(
+      "py-[var(--spacing-scale-040)]",
+      "px-[var(--spacing-scale-032)]",
+    );
+    expect(section).not.toHaveClass("py-[var(--spacing-scale-096)]");
+  });
+
+  it("does not force 358px min-width below md (fits 320px baseline)", () => {
+    const { container } = render(<AskOrganizer title="Test Title" />);
+    const inner = container.querySelector("section > div");
+    expect(inner).toHaveClass("min-w-0", "md:min-w-[358px]");
+    expect(inner?.className).not.toContain(" min-w-[358px]");
+  });
 });

tests/components/CommunityRule.test.tsx

@@ -1,4 +1,5 @@
-import { describe } from "vitest";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
@@ -34,4 +35,19 @@ const config: ComponentTestSuiteConfig<Props> = {
 
 describe("CommunityRule", () => {
   componentTestSuite<Props>(config);
+
+  it("uses cardAccentColor for the card left border when useCardStyle is true", () => {
+    const { container } = render(
+      <CommunityRule
+        sections={sampleSections}
+        useCardStyle
+        cardAccentColor="var(--color-surface-invert-brand-lavender)"
+      />,
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.style.boxShadow).toBe(
+      "inset 4px 0 0 0 var(--color-surface-invert-brand-lavender)",
+    );
+    expect(screen.getByText("How proposals pass")).toBeInTheDocument();
+  });
 });

tests/components/ContentBanner.test.tsx

@@ -62,6 +62,28 @@ describe("ContentBanner", () => {
     expect(screen.getByText("Test description")).toBeInTheDocument();
   });
 
+  it("renders useCase variant rule preview as link when href is set", () => {
+    const { container } = render(
+      <ContentBanner
+        post={mockPost}
+        variant="useCase"
+        rulePreview={{
+          title: "Sample Operating Manual",
+          description: "Governance preview for the case study.",
+          backgroundColor: "bg-[var(--color-surface-invert-brand-lavender)]",
+          iconPath: "assets/case-study/case-study-mutual-aid.svg",
+          href: "/use-cases/mutual-aid-colorado/rule",
+        }}
+      />,
+    );
+
+    const link = screen.getByRole("link", {
+      name: /view sample operating manual community rule/i,
+    });
+    expect(link).toHaveAttribute("href", "/use-cases/mutual-aid-colorado/rule");
+    expect(container.querySelector(".pointer-events-none")).toBeNull();
+  });
+
   it("renders useCase variant with ContentContainer copy and rule preview", () => {
     const { container } = render(
       <ContentBanner
@@ -76,13 +98,18 @@ describe("ContentBanner", () => {
       />,
     );
 
-    expect(
-      screen.getByRole("heading", { name: "Test Article" }),
-    ).toBeInTheDocument();
+    const title = screen.getByRole("heading", { name: "Test Article" });
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveClass("sm:text-[24px]", "md:text-[32px]");
     expect(screen.getByText("Sample Operating Manual")).toBeInTheDocument();
-    expect(
-      container.querySelector('[data-figma-node="22015:42621"]'),
-    ).toBeInTheDocument();
+    const copyColumn = container.querySelector('[data-node-id="19189:9171"]');
+    expect(copyColumn).toHaveClass("lg:max-w-[365px]");
+    expect(copyColumn).not.toHaveClass("max-w-[365px]");
+    const bannerRow = container.querySelector(
+      '[data-figma-node="22015:42621"]',
+    );
+    expect(bannerRow).toBeInTheDocument();
+    expect(bannerRow).toHaveClass("lg:grid-cols-2");
   });
 
   it("renders guide variant with left-aligned copy and logo mark", () => {

tests/components/CreateFlowTopNav.test.tsx

@@ -1,6 +1,10 @@
 import React from "react";
-import { describe, it, expect, vi } from "vitest";
-import { renderWithProviders as render, screen } from "../utils/test-utils";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import {
+  renderWithProviders as render,
+  screen,
+  waitFor,
+} from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
 import CreateFlowTopNav from "../../app/components/navigation/CreateFlowTopNav";
@@ -150,6 +154,25 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
     expect(handler).toHaveBeenCalledTimes(1);
   });
 
+  it("renders Duplicate button when hasDuplicate is true", () => {
+    render(
+      <CreateFlowTopNav
+        hasDuplicate={true}
+        duplicateLabel="Duplicate"
+        duplicateAriaLabel="Duplicate"
+        onDuplicate={vi.fn()}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Duplicate" }),
+    ).toBeInTheDocument();
+  });
+
+  it("uses exitLabel override when provided", () => {
+    render(<CreateFlowTopNav exitLabel="Return" />);
+    expect(screen.getByRole("button", { name: "Return" })).toBeInTheDocument();
+  });
+
   it("calls onExit when Exit button is clicked", async () => {
     const user = userEvent.setup();
     const handleExit = vi.fn();
@@ -161,3 +184,107 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
     expect(handleExit).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("CreateFlowTopNav (viewport < sm2 / 440px)", () => {
+  const defaultInnerWidth = 1200;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 320,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: defaultInnerWidth,
+    });
+  });
+
+  const completedScreenProps = {
+    hasShare: true,
+    hasExport: true,
+    hasEdit: true,
+    saveDraftOnExit: true,
+    onShare: vi.fn(),
+    onSelectExportFormat: vi.fn(),
+    onEdit: vi.fn(),
+    onExit: vi.fn(),
+  } as const;
+
+  it("collapses secondary actions into a kebab menu", async () => {
+    render(<CreateFlowTopNav {...completedScreenProps} />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "More options" }),
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByRole("button", { name: "Share" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Export" }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Edit" })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Save & Exit" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("opens kebab menu with share, export formats, edit, and save & exit", async () => {
+    const user = userEvent.setup();
+    render(<CreateFlowTopNav {...completedScreenProps} />);
+
+    const kebab = await screen.findByRole("button", { name: "More options" });
+    await user.click(kebab);
+
+    expect(screen.getByRole("menuitem", { name: "Share" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Download PDF" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Download CSV" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Download Markdown" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: "Edit" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Save & Exit" }),
+    ).toBeInTheDocument();
+  });
+
+  it("invokes handlers from kebab menu items", async () => {
+    const user = userEvent.setup();
+    const handleShare = vi.fn();
+    const handleEdit = vi.fn();
+    const handleExit = vi.fn();
+
+    render(
+      <CreateFlowTopNav
+        {...completedScreenProps}
+        onShare={handleShare}
+        onEdit={handleEdit}
+        onExit={handleExit}
+      />,
+    );
+
+    const kebab = await screen.findByRole("button", { name: "More options" });
+    await user.click(kebab);
+    await user.click(screen.getByRole("menuitem", { name: "Share" }));
+    expect(handleShare).toHaveBeenCalledTimes(1);
+
+    await user.click(kebab);
+    await user.click(screen.getByRole("menuitem", { name: "Edit" }));
+    expect(handleEdit).toHaveBeenCalledTimes(1);
+
+    await user.click(kebab);
+    await user.click(screen.getByRole("menuitem", { name: "Save & Exit" }));
+    expect(handleExit).toHaveBeenCalledTimes(1);
+  });
+});

tests/components/FinalReviewPage.test.tsx

@@ -702,17 +702,48 @@ function FinalReviewEditPublishedWithStateProbe({
   return <FinalReviewScreen variant="editPublished" />;
 }
 
-describe("FinalReviewScreen — edit published description", () => {
-  it("does not expose click-to-edit description on default final review", () => {
+describe("FinalReviewScreen — edit published title and description", () => {
+  it("does not expose click-to-edit title or description on default final review", () => {
     render(
       <FinalReviewWithFlowState
         title="Oak"
         communityContext="Visible body"
       />,
     );
+    expect(screen.queryByTestId("rule-title-edit")).not.toBeInTheDocument();
     expect(screen.queryByTestId("rule-description-edit")).not.toBeInTheDocument();
   });
 
+  it("opens Save modal from title click and updates title", async () => {
+    let latest: CreateFlowState = {};
+    render(
+      <FinalReviewEditPublishedWithStateProbe
+        onState={(s) => {
+          latest = s;
+        }}
+        initial={{
+          title: "Oak Park Commons",
+          communityContext: "Original",
+          selectedCommunicationMethodIds: ["signal"],
+        }}
+      />,
+    );
+
+    fireEvent.click(await screen.findByTestId("rule-title-edit"));
+    const dialog = await screen.findByRole("dialog");
+    expect(within(dialog).getByText(/Community name/i)).toBeInTheDocument();
+    const input = within(dialog).getByRole("textbox");
+    fireEvent.change(input, { target: { value: "Renamed Commons" } });
+    fireEvent.click(within(dialog).getByRole("button", { name: "Save" }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(latest.title).toBe("Renamed Commons");
+    });
+  });
+
   it("opens Save modal from description click and updates communityContext + summary", async () => {
     let latest: CreateFlowState = {};
     render(

tests/components/SectionHeader.test.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
 import SectionHeader from "../../app/components/type/SectionHeader";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
@@ -21,3 +23,22 @@ componentTestSuite<SectionHeaderProps>({
     errorState: false,
   },
 });
+
+describe("SectionHeader twoColumnsFromMd", () => {
+  it("splits rule stack header at md when twoColumnsFromMd is set", () => {
+    const { container } = render(
+      <SectionHeader
+        title="Popular templates"
+        subtitle="Start from a proven pattern."
+        variant="multi-line"
+        ruleStackDesktopTypeScale
+        twoColumnsFromMd
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: /popular templates/i }),
+    ).toBeInTheDocument();
+    expect(container.firstElementChild).toHaveClass("md:flex-row");
+  });
+});

tests/components/type/TripleTextBlock.test.tsx

@@ -66,9 +66,10 @@ describe("TripleTextBlock", () => {
       />,
     );
 
-    expect(
-      container.querySelector('[data-figma-node="22085-860414"]'),
-    ).toBeTruthy();
+    const section = container.querySelector('[data-figma-node="22085-860414"]');
+    expect(section).toBeTruthy();
+    expect(section).toHaveClass("px-[var(--spacing-scale-032)]");
+    expect(section).not.toHaveClass("px-[calc(var(--spacing-scale-032)+var(--spacing-scale-096))]");
 
     expect(
       screen.getByRole("heading", {
@@ -84,6 +85,9 @@ describe("TripleTextBlock", () => {
     ).toBeInTheDocument();
     expect(screen.getByText("First paragraph.")).toBeInTheDocument();
     expect(screen.getByText("Second paragraph.")).toBeInTheDocument();
+    expect(screen.getByText("Second paragraph.")).toHaveClass(
+      "mt-[var(--spacing-scale-024)]",
+    );
     expect(screen.getByRole("link", { name: "Setup your community" })).toHaveAttribute(
       "href",
       "/create",