Component cleanup

tests/components/CommunityRule.test.tsx

@@ -3,9 +3,9 @@ import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
+import CommunityRule from "../../app/components/type/CommunityRule";
 
-type Props = React.ComponentProps<typeof CommunityRuleDocument>;
+type Props = React.ComponentProps<typeof CommunityRule>;
 
 const sampleSections = [
   {
@@ -20,8 +20,8 @@ const sampleSections = [
 ];
 
 const config: ComponentTestSuiteConfig<Props> = {
-  component: CommunityRuleDocument,
-  name: "CommunityRuleDocument",
+  component: CommunityRule,
+  name: "CommunityRule",
   props: {
     sections: sampleSections,
   } as Props,
@@ -32,6 +32,6 @@ const config: ComponentTestSuiteConfig<Props> = {
   },
 };
 
-describe("CommunityRuleDocument", () => {
+describe("CommunityRule", () => {
   componentTestSuite<Props>(config);
 });

tests/components/ContextMenu.test.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import ContextMenu from "../../app/components/modals/ContextMenu/ContextMenu";
-import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
-import { componentTestSuite } from "../utils/componentTestSuite";
-
-type ContextMenuProps = React.ComponentProps<typeof ContextMenu>;
-
-componentTestSuite<ContextMenuProps>({
-  component: ContextMenu,
-  name: "ContextMenu",
-  props: {
-    children: <ContextMenuItem>Item</ContextMenuItem>,
-  } as ContextMenuProps,
-  requiredProps: [],
-  primaryRole: "menu",
-  testCases: {
-    renders: true,
-    accessibility: true,
-    keyboardNavigation: false,
-    disabledState: false,
-    errorState: false,
-  },
-});

tests/components/ContextMenuItem.test.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
-import { componentTestSuite } from "../utils/componentTestSuite";
-
-type ContextMenuItemProps = React.ComponentProps<typeof ContextMenuItem>;
-
-componentTestSuite<ContextMenuItemProps>({
-  component: ContextMenuItem,
-  name: "ContextMenuItem",
-  props: {
-    children: "Item",
-  } as ContextMenuItemProps,
-  requiredProps: [],
-  primaryRole: "menuitem",
-  testCases: {
-    renders: true,
-    accessibility: false,
-    keyboardNavigation: true,
-    disabledState: true,
-    errorState: false,
-  },
-  states: {
-    disabledProps: { disabled: true },
-  },
-});

tests/components/CreateFlowFooter.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
-import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
+import CreateFlowFooter from "../../app/components/navigation/CreateFlowFooter";
 import Button from "../../app/components/buttons/Button";
 import {
   componentTestSuite,

tests/components/CreateFlowTopNav.test.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
+import CreateFlowTopNav from "../../app/components/navigation/CreateFlowTopNav";
 import {
   componentTestSuite,
   ComponentTestSuiteConfig,

tests/components/DecisionMakingSidebar.test.tsx

@@ -1,38 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderWithProviders as render, screen } from "../utils/test-utils";
-import "@testing-library/jest-dom/vitest";
-import DecisionMakingSidebar from "../../app/components/utility/DecisionMakingSidebar";
-
-describe("DecisionMakingSidebar", () => {
-  const messageBoxItems = [{ id: "1", label: "Consensus" }];
-
-  it("renders title and description", () => {
-    render(
-      <DecisionMakingSidebar
-        title="How are decisions made?"
-        description="Pick approaches for your group."
-        messageBoxTitle="Select methods"
-        messageBoxItems={messageBoxItems}
-      />,
-    );
-    expect(
-      screen.getByRole("heading", { name: "How are decisions made?" }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText("Pick approaches for your group."),
-    ).toBeInTheDocument();
-  });
-
-  it("renders InfoMessageBox section", () => {
-    render(
-      <DecisionMakingSidebar
-        title="Decisions"
-        description="Desc"
-        messageBoxTitle="Select methods"
-        messageBoxItems={messageBoxItems}
-      />,
-    );
-    expect(screen.getByText("Select methods")).toBeInTheDocument();
-    expect(screen.getByText("Consensus")).toBeInTheDocument();
-  });
-});

tests/components/FinalReviewPage.test.tsx

@@ -77,7 +77,7 @@ describe("FinalReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders RuleCard with fallback title when context has no name", () => {
+  it("renders Rule with fallback title when context has no name", () => {
     render(<FinalReviewScreen />);
     expect(screen.getByText(FALLBACK_CARD_TITLE)).toBeInTheDocument();
   });
@@ -89,7 +89,7 @@ describe("FinalReviewScreen", () => {
         replaceState({
           title: "Oak Park Commons",
           summary:
-            "Leftover template or one-line summary — must not appear as the RuleCard description.",
+            "Leftover template or one-line summary — must not appear as the Rule description.",
         });
       }, [replaceState]);
       return <FinalReviewScreen />;
@@ -100,7 +100,7 @@ describe("FinalReviewScreen", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders RuleCard title from create flow state", async () => {
+  it("renders Rule title from create flow state", async () => {
     render(
       <FinalReviewWithFlowState
         title="Oak Park Commons"
@@ -115,7 +115,7 @@ describe("FinalReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders RuleCard as a button (card is interactive)", () => {
+  it("renders Rule as a button (card is interactive)", () => {
     render(<FinalReviewScreen />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);
@@ -124,7 +124,7 @@ describe("FinalReviewScreen", () => {
     ).toBe(true);
   });
 
-  it("renders expanded RuleCard with category labels", () => {
+  it("renders expanded Rule with category labels", () => {
     render(<FinalReviewScreen />);
     expect(screen.getByText("Values")).toBeInTheDocument();
     expect(screen.getByText("Communication")).toBeInTheDocument();
@@ -143,7 +143,7 @@ describe("FinalReviewScreen", () => {
 
 /**
  * Seeds a Customize-from-template style state (method ids + core-value
- * snapshot) and asserts the final-review RuleCard renders the resolved
+ * snapshot) and asserts the final-review Rule renders the resolved
  * labels — the fix for "preselected chips don't register on final review".
  */
 function FinalReviewWithCustomizeSelections() {

tests/components/Icon.test.tsx

@@ -1,26 +1,112 @@
-import { describe } from "vitest";
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import Icon from "../../app/components/cards/Icon";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import { Icon } from "../../app/components/asset";
 
-type Props = React.ComponentProps<typeof Icon>;
+type IconProps = React.ComponentProps<typeof Icon>;
 
-const config: ComponentTestSuiteConfig<Props> = {
+const baseProps: IconProps = {
+  icon: <div data-testid="test-icon">Icon</div>,
+  title: "Worker's cooperatives",
+  description:
+    "Employee-owned businesses often need to clarify how power is shared",
+};
+
+const config: ComponentTestSuiteConfig<IconProps> = {
   component: Icon,
   name: "Icon",
-  props: {
-    name: "exclamation",
-    size: 24,
-  } as Props,
-  requiredProps: ["name"],
+  props: baseProps,
+  requiredProps: ["icon", "title", "description"],
+  optionalProps: {
+    className: "custom-class",
+    onClick: vi.fn(),
+  },
+  primaryRole: "button",
   testCases: {
     renders: true,
     accessibility: true,
+    keyboardNavigation: true,
+    disabledState: false,
+    errorState: false,
   },
 };
 
-describe("Icon", () => {
-  componentTestSuite<Props>(config);
+componentTestSuite<IconProps>(config);
+
+// Pure presentational; no provider context needed.
+describe("Icon (behavioral tests)", () => {
+  it("calls onClick when clicked", () => {
+    const handleClick = vi.fn();
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+        onClick={handleClick}
+      />,
+    );
+    const card = screen.getByRole("button");
+    fireEvent.click(card);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClick when Enter key is pressed", () => {
+    const handleClick = vi.fn();
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+        onClick={handleClick}
+      />,
+    );
+    const card = screen.getByRole("button");
+    fireEvent.keyDown(card, { key: "Enter" });
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClick when Space key is pressed", () => {
+    const handleClick = vi.fn();
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+        onClick={handleClick}
+      />,
+    );
+    const card = screen.getByRole("button");
+    fireEvent.keyDown(card, { key: " " });
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders icon, title, and description", () => {
+    render(
+      <Icon
+        icon={<div data-testid="icon">Icon</div>}
+        title="Worker's cooperatives"
+        description="Employee-owned businesses"
+      />,
+    );
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+    expect(screen.getByText("Worker's cooperatives")).toBeInTheDocument();
+    expect(screen.getByText("Employee-owned businesses")).toBeInTheDocument();
+  });
+
+  it("has proper ARIA label", () => {
+    render(
+      <Icon
+        icon={<div>Icon</div>}
+        title="Test Title"
+        description="Test Description"
+      />,
+    );
+    const card = screen.getByRole("button");
+    expect(card).toHaveAttribute("aria-label", "Test Title: Test Description");
+  });
 });

tests/components/IconCard.test.tsx

@@ -1,112 +0,0 @@
-import React from "react";
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom/vitest";
-import IconCard from "../../app/components/cards/IconCard";
-import {
-  componentTestSuite,
-  type ComponentTestSuiteConfig,
-} from "../utils/componentTestSuite";
-
-type IconCardProps = React.ComponentProps<typeof IconCard>;
-
-const baseProps: IconCardProps = {
-  icon: <div data-testid="test-icon">Icon</div>,
-  title: "Worker's cooperatives",
-  description:
-    "Employee-owned businesses often need to clarify how power is shared",
-};
-
-const config: ComponentTestSuiteConfig<IconCardProps> = {
-  component: IconCard,
-  name: "IconCard",
-  props: baseProps,
-  requiredProps: ["icon", "title", "description"],
-  optionalProps: {
-    className: "custom-class",
-    onClick: vi.fn(),
-  },
-  primaryRole: "button",
-  testCases: {
-    renders: true,
-    accessibility: true,
-    keyboardNavigation: true,
-    disabledState: false,
-    errorState: false,
-  },
-};
-
-componentTestSuite<IconCardProps>(config);
-
-// Pure presentational; no provider context needed.
-describe("IconCard (behavioral tests)", () => {
-  it("calls onClick when clicked", () => {
-    const handleClick = vi.fn();
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-        onClick={handleClick}
-      />,
-    );
-    const card = screen.getByRole("button");
-    fireEvent.click(card);
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("calls onClick when Enter key is pressed", () => {
-    const handleClick = vi.fn();
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-        onClick={handleClick}
-      />,
-    );
-    const card = screen.getByRole("button");
-    fireEvent.keyDown(card, { key: "Enter" });
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("calls onClick when Space key is pressed", () => {
-    const handleClick = vi.fn();
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-        onClick={handleClick}
-      />,
-    );
-    const card = screen.getByRole("button");
-    fireEvent.keyDown(card, { key: " " });
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("renders icon, title, and description", () => {
-    render(
-      <IconCard
-        icon={<div data-testid="icon">Icon</div>}
-        title="Worker's cooperatives"
-        description="Employee-owned businesses"
-      />,
-    );
-    expect(screen.getByTestId("icon")).toBeInTheDocument();
-    expect(screen.getByText("Worker's cooperatives")).toBeInTheDocument();
-    expect(screen.getByText("Employee-owned businesses")).toBeInTheDocument();
-  });
-
-  it("has proper ARIA label", () => {
-    render(
-      <IconCard
-        icon={<div>Icon</div>}
-        title="Test Title"
-        description="Test Description"
-      />,
-    );
-    const card = screen.getByRole("button");
-    expect(card).toHaveAttribute("aria-label", "Test Title: Test Description");
-  });
-});

tests/components/InfoMessageBox.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import InfoMessageBox from "../../app/components/utility/InfoMessageBox";
+import InfoMessageBox from "../../app/components/controls/InfoMessageBox";
 
 describe("InfoMessageBox", () => {
   const items = [

tests/components/InputLabel.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { screen } from "@testing-library/react";
 import { renderWithProviders as render } from "../utils/test-utils";
-import InputLabel from "../../app/components/utility/InputLabel";
+import InputLabel from "../../app/components/type/InputLabel";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,

tests/components/Logo.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
-import Logo from "../../app/components/asset/logo";
+import Logo from "../../app/components/asset/Logo";
 import {
   componentTestSuite,
   ComponentTestSuiteConfig,

tests/components/ModalFooter.test.tsx

@@ -3,7 +3,7 @@ import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import ModalFooter from "../../app/components/utility/ModalFooter";
+import ModalFooter from "../../app/components/modals/ModalFooter";
 
 type Props = React.ComponentProps<typeof ModalFooter>;
 

tests/components/ModalHeader.test.tsx

@@ -3,7 +3,7 @@ import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
-import ModalHeader from "../../app/components/utility/ModalHeader";
+import ModalHeader from "../../app/components/modals/ModalHeader";
 
 type Props = React.ComponentProps<typeof ModalHeader>;
 

tests/components/ReviewPage.test.tsx

@@ -39,12 +39,12 @@ describe("CommunityReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders RuleCard with title fallback when no community name is set", () => {
+  it("renders Rule with title fallback when no community name is set", () => {
     render(<CommunityReviewScreen />);
     expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
   });
 
-  it("omits the RuleCard description when the user has not entered community context", () => {
+  it("omits the Rule description when the user has not entered community context", () => {
     render(<CommunityReviewScreen />);
     expect(
       screen.queryByText(
@@ -53,7 +53,7 @@ describe("CommunityReviewScreen", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders RuleCard as a button (card is interactive)", () => {
+  it("renders Rule as a button (card is interactive)", () => {
     render(<CommunityReviewScreen />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);

tests/components/Section.test.tsx

@@ -0,0 +1,30 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import Section from "../../app/components/type/Section";
+import TextBlock from "../../app/components/type/TextBlock";
+
+type Props = React.ComponentProps<typeof Section>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Section,
+  name: "Section",
+  props: {
+    categoryName: "Decision making",
+    showRail: true,
+    children: (
+      <TextBlock title="How proposals pass" body="Important decisions require alignment." />
+    ),
+  } as Props,
+  requiredProps: ["categoryName", "children"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("Section", () => {
+  componentTestSuite<Props>(config);
+});

tests/components/SectionHeader.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SectionHeader from "../../app/components/sections/SectionHeader";
+import SectionHeader from "../../app/components/type/SectionHeader";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type SectionHeaderProps = React.ComponentProps<typeof SectionHeader>;

tests/components/Separator.test.tsx

@@ -1,22 +0,0 @@
-import { describe } from "vitest";
-import {
-  componentTestSuite,
-  type ComponentTestSuiteConfig,
-} from "../utils/componentTestSuite";
-import Separator from "../../app/components/utility/Separator";
-
-type Props = React.ComponentProps<typeof Separator>;
-
-const config: ComponentTestSuiteConfig<Props> = {
-  component: Separator,
-  name: "Separator",
-  props: {} as Props,
-  testCases: {
-    renders: true,
-    accessibility: true,
-  },
-};
-
-describe("Separator", () => {
-  componentTestSuite<Props>(config);
-});

tests/components/TemplateReviewCard.test.tsx

@@ -41,8 +41,8 @@ const config: ComponentTestSuiteConfig<Props> = {
   primaryRole: "button",
   testCases: {
     renders: true,
-    // RuleCard contains nested interactive elements (chips inside a clickable card)
-    // which trigger axe's "nested-interactive" rule. Tracked by RuleCard itself.
+    // Rule contains nested interactive elements (chips inside a clickable card)
+    // which trigger axe's "nested-interactive" rule. Tracked by Rule itself.
     accessibility: false,
   },
 };

tests/components/TextBlock.test.tsx

@@ -0,0 +1,26 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import TextBlock from "../../app/components/type/TextBlock";
+
+type Props = React.ComponentProps<typeof TextBlock>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: TextBlock,
+  name: "TextBlock",
+  props: {
+    title: "Policy title",
+    body: "Supporting text for the policy.",
+  } as Props,
+  requiredProps: ["title"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("TextBlock", () => {
+  componentTestSuite<Props>(config);
+});

tests/components/Top.test.tsx

@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import TopNav from "../../app/components/navigation/TopNav";
+import Top from "../../app/components/navigation/Top";
 import { renderWithProviders } from "../utils/test-utils";
 import { CREATE_FLOW_ANONYMOUS_KEY } from "../../app/(app)/create/utils/anonymousDraftStorage";
 import { CORE_VALUE_DETAILS_STORAGE_KEY } from "../../app/(app)/create/utils/coreValueDetailsLocalStorage";
@@ -23,13 +23,13 @@ vi.mock("next/navigation", () => ({
   usePathname: () => "/",
 }));
 
-type TopNavProps = React.ComponentProps<typeof TopNav>;
+type TopProps = React.ComponentProps<typeof Top>;
 
 // Test folderTop=false variant (standard header)
-componentTestSuite<TopNavProps>({
-  component: TopNav,
-  name: "TopNav (folderTop=false)",
-  props: { folderTop: false } as TopNavProps,
+componentTestSuite<TopProps>({
+  component: Top,
+  name: "Top (folderTop=false)",
+  props: { folderTop: false } as TopProps,
   requiredProps: [],
   primaryRole: "banner",
   testCases: {
@@ -43,10 +43,10 @@ componentTestSuite<TopNavProps>({
 
 // Test folderTop=true variant (home header)
 // Note: Accessibility test may fail due to Next.js Script component behavior in test environment
-componentTestSuite<TopNavProps>({
-  component: TopNav,
-  name: "TopNav (folderTop=true)",
-  props: { folderTop: true } as TopNavProps,
+componentTestSuite<TopProps>({
+  component: Top,
+  name: "Top (folderTop=true)",
+  props: { folderTop: true } as TopProps,
   requiredProps: [],
   primaryRole: "banner",
   testCases: {
@@ -58,7 +58,7 @@ componentTestSuite<TopNavProps>({
   },
 });
 
-describe('TopNav "Create rule" button', () => {
+describe('Top "Create rule" button', () => {
   beforeEach(() => {
     pushMock.mockReset();
     window.localStorage.clear();
@@ -71,7 +71,7 @@ describe('TopNav "Create rule" button', () => {
    * Guards against localStorage stickiness on the marketing homepage: hitting
    * the top-nav "Create rule" from anywhere outside `/create` must wipe the
    * in-flight anonymous draft so the wizard always starts fresh. See
-   * handleCreateRuleClick in TopNav.container.tsx for the contract.
+   * handleCreateRuleClick in Top.container.tsx for the contract.
    */
   it("clears anonymous draft + core-value-details localStorage before routing to /create", async () => {
     window.localStorage.setItem(
@@ -83,9 +83,9 @@ describe('TopNav "Create rule" button', () => {
       JSON.stringify({ "1": { meaning: "m", signals: "s" } }),
     );
 
-    renderWithProviders(<TopNav folderTop={false} />);
+    renderWithProviders(<Top folderTop={false} />);
 
-    // TopNav renders the Create Rule button at three breakpoints (xs/sm/md);
+    // Top renders the Create Rule button at three breakpoints (xs/sm/md);
     // any of them clicking the same handler is the point.
     const [btn] = screen.getAllByRole("button", {
       name: /create a new rule/i,