onClick()}
+ />
+ );
+ }
+
const borderClass = "border border-[var(--color-border-default-primary)]";
const selectedBorder = selected
? "outline outline-4 outline-dashed outline-black outline-offset-[-4px]"
: "";
+ const cardIdProp = selectionId ? { "data-card-id": selectionId } : {};
- // Figma: "Card / CardSelection" vertical stack — node `16775:28762` (dev).
- // Prop `orientation="horizontal"` is this stacked layout (historical naming).
- if (orientation === "horizontal") {
+ if (size === "m") {
const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
return (
{
).toBeInTheDocument();
expect(
screen.getByText(
- "What method should this community use to communicate with eachother?",
+ "How should this community communicate with each-other?",
),
).toBeInTheDocument();
expect(
diff --git a/tests/unit/CardStack.test.jsx b/tests/unit/CardStack.test.jsx
index e13dc13..5dd74d2 100644
--- a/tests/unit/CardStack.test.jsx
+++ b/tests/unit/CardStack.test.jsx
@@ -126,6 +126,18 @@ describe("CardStack Component", () => {
).toBeInTheDocument();
});
+ test("single-stack See all / Show less is centered, not end-aligned", () => {
+ render(
+ ,
+ );
+
+ const toggle = screen.getByRole("button", {
+ name: "See all communication approaches",
+ });
+ expect(toggle.className).toMatch(/\bself-center\b/);
+ expect(toggle.className).not.toMatch(/\bself-end\b/);
+ });
+
test("calls onCardSelect when a card is clicked", () => {
const onCardSelect = vi.fn();
render();
diff --git a/tests/unit/Selection.test.jsx b/tests/unit/Selection.test.jsx
index 97a8cfa..4d7a0ed 100644
--- a/tests/unit/Selection.test.jsx
+++ b/tests/unit/Selection.test.jsx
@@ -54,6 +54,33 @@ describe("Selection Component", () => {
const card = screen.getByRole("button");
expect(card).toHaveClass("flex-row");
+ expect(card).toHaveAttribute("data-selection-size", "l");
+ });
+
+ it("maps size s to a chip with accessible selected state", () => {
+ render(
+ ,
+ );
+
+ const chip = screen.getByRole("button", {
+ name: "Open membership: Anyone can join",
+ });
+ expect(chip).toHaveAttribute("aria-pressed", "true");
+ expect(chip).toHaveTextContent("Open membership");
+ expect(screen.queryByText("Anyone can join")).not.toBeInTheDocument();
+ });
+
+ it("uses size m for compact tiles and exposes aria-pressed", () => {
+ render();
+
+ const card = screen.getByRole("button");
+ expect(card).toHaveAttribute("data-selection-size", "m");
+ expect(card).toHaveAttribute("aria-pressed", "true");
});
it("does not render a helper icon by default", () => {
diff --git a/tests/unit/createFlowLayoutTokens.test.ts b/tests/unit/createFlowLayoutTokens.test.ts
index bc829e5..a010719 100644
--- a/tests/unit/createFlowLayoutTokens.test.ts
+++ b/tests/unit/createFlowLayoutTokens.test.ts
@@ -8,6 +8,7 @@ import {
CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
CREATE_FLOW_PAGE_GUTTER_CLASS,
CREATE_FLOW_FIXED_TOP_BANNER_OFFSET_CLASS,
+ CREATE_FLOW_SCROLL_END_PAD_CLASS,
CREATE_FLOW_VIEWPORT_FRAME_CLASS,
getCreateFlowContentMaxClass,
} from "../../app/(app)/create/components/createFlowLayoutTokens";
@@ -39,7 +40,11 @@ describe("createFlowLayoutTokens", () => {
expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("max-h-dvh");
});
- it("centers lockup+card and card-stack steps in the nav–footer band from md", () => {
+ it("pads option scrollports past the footer scrim", () => {
+ expect(CREATE_FLOW_SCROLL_END_PAD_CLASS).toBe("pb-12");
+ });
+
+ it("centers review lockup+card steps in the nav–footer band from md", () => {
expect(CREATE_FLOW_MD_CENTERED_MAIN_CLASS).toBe(
"items-start justify-center overflow-y-auto",
);
@@ -55,7 +60,7 @@ describe("createFlowLayoutTokens", () => {
);
expect(
getCreateFlowContentMaxClass({ step: "communication-methods" }),
- ).toBe(CREATE_FLOW_WIDE_MAX_CLASS);
+ ).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
expect(getCreateFlowContentMaxClass({ step: "final-review" })).toBe(
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
);
diff --git a/tests/unit/createFlowRegistryScreenAlignment.test.ts b/tests/unit/createFlowRegistryScreenAlignment.test.ts
index 608ad88..933a82c 100644
--- a/tests/unit/createFlowRegistryScreenAlignment.test.ts
+++ b/tests/unit/createFlowRegistryScreenAlignment.test.ts
@@ -1,5 +1,8 @@
import { describe, expect, it } from "vitest";
-import { CREATE_FLOW_SCREEN_REGISTRY } from "../../app/(app)/create/utils/createFlowScreenRegistry";
+import {
+ CREATE_FLOW_SCREEN_REGISTRY,
+ createFlowStepUsesCardLayout,
+} from "../../app/(app)/create/utils/createFlowScreenRegistry";
import { VALID_STEPS } from "../../app/(app)/create/utils/flowSteps";
describe("create flow registry vs valid steps (CR-92 §3)", () => {
@@ -10,4 +13,11 @@ describe("create flow registry vs valid steps (CR-92 §3)", () => {
}
expect(keys.size).toBe(VALID_STEPS.length);
});
+
+ it("keeps Figma card-kind ids on the method-card steps", () => {
+ expect(createFlowStepUsesCardLayout("communication-methods")).toBe(true);
+ expect(createFlowStepUsesCardLayout("membership-methods")).toBe(true);
+ expect(createFlowStepUsesCardLayout("conflict-management")).toBe(true);
+ expect(createFlowStepUsesCardLayout("decision-approaches")).toBe(false);
+ });
});
diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts
index f92c797..5bff5ac 100644
--- a/tests/unit/flowSteps.test.ts
+++ b/tests/unit/flowSteps.test.ts
@@ -234,10 +234,19 @@ describe("flowSteps", () => {
expect(isDirectTemplateReviewEntry(null)).toBe(false);
});
- it("uses split-column scroll for select, right-rail, and stakeholders", () => {
+ it("uses split-column scroll for select, method-card, right-rail, and stakeholders", () => {
expect(createFlowStepUsesSelectSplitScroll("community-structure")).toBe(
true,
);
+ expect(createFlowStepUsesSelectSplitScroll("communication-methods")).toBe(
+ true,
+ );
+ expect(createFlowStepUsesSelectSplitScroll("membership-methods")).toBe(
+ true,
+ );
+ expect(createFlowStepUsesSelectSplitScroll("conflict-management")).toBe(
+ true,
+ );
expect(createFlowStepUsesSelectSplitScroll("confirm-stakeholders")).toBe(
true,
);