Right rail template

tests/unit/Card.test.jsx

@@ -89,10 +89,7 @@ describe("Card Component", () => {
     render(<Card {...defaultProps} />);
 
     const card = screen.getByRole("button");
-    expect(card).toHaveAttribute(
-      "aria-label",
-      "Label: Support text here",
-    );
+    expect(card).toHaveAttribute("aria-label", "Label: Support text here");
     expect(card).toHaveAttribute("tabIndex", "0");
   });
 
@@ -100,6 +97,9 @@ describe("Card Component", () => {
     render(<Card label="Label only" orientation="horizontal" />);
 
     expect(screen.getByText("Label only")).toBeInTheDocument();
-    expect(screen.getByRole("button")).toHaveAttribute("aria-label", "Label only");
+    expect(screen.getByRole("button")).toHaveAttribute(
+      "aria-label",
+      "Label only",
+    );
   });
 });

tests/unit/CardStack.test.jsx

@@ -9,9 +9,24 @@ import { vi, describe, test, expect, afterEach } from "vitest";
 import CardStack from "../../app/components/utility/CardStack";
 
 const SAMPLE_CARDS = [
-  { id: "1", label: "Option A", supportText: "Description A", recommended: true },
-  { id: "2", label: "Option B", supportText: "Description B", recommended: false },
-  { id: "3", label: "Option C", supportText: "Description C", recommended: true },
+  {
+    id: "1",
+    label: "Option A",
+    supportText: "Description A",
+    recommended: true,
+  },
+  {
+    id: "2",
+    label: "Option B",
+    supportText: "Description B",
+    recommended: false,
+  },
+  {
+    id: "3",
+    label: "Option C",
+    supportText: "Description C",
+    recommended: true,
+  },
 ];
 
 afterEach(() => {
@@ -62,7 +77,9 @@ describe("CardStack Component", () => {
     render(<CardStack cards={SAMPLE_CARDS} hasMore={false} />);
 
     expect(
-      screen.queryByRole("button", { name: "See all communication approaches" }),
+      screen.queryByRole("button", {
+        name: "See all communication approaches",
+      }),
     ).not.toBeInTheDocument();
   });
 
@@ -82,9 +99,7 @@ describe("CardStack Component", () => {
 
   test("calls onCardSelect when a card is clicked", () => {
     const onCardSelect = vi.fn();
-    render(
-      <CardStack cards={SAMPLE_CARDS} onCardSelect={onCardSelect} />,
-    );
+    render(<CardStack cards={SAMPLE_CARDS} onCardSelect={onCardSelect} />);
 
     const cardButtons = screen.getAllByRole("button", {
       name: "Option A: Description A",

tests/unit/NumberCard.test.jsx

@@ -39,7 +39,16 @@ describe("NumberCard Component", () => {
     const card = screen
       .getByText("Test Card Text")
       .closest("div").parentElement;
-    expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "sm:items-center", "lg:flex-col", "lg:items-start", "lg:justify-end", "lg:relative");
+    expect(card).toHaveClass(
+      "flex",
+      "flex-col",
+      "sm:flex-row",
+      "sm:items-center",
+      "lg:flex-col",
+      "lg:items-start",
+      "lg:justify-end",
+      "lg:relative",
+    );
   });
 
   it("applies proper responsive spacing when size is not specified", () => {
@@ -194,9 +203,7 @@ describe("NumberCard Component", () => {
     render(<NumberCard {...defaultProps} size="Small" />);
 
     // For Small size, text is directly in card div (no wrapper), so use closest("div")
-    const card = screen
-      .getByText("Test Card Text")
-      .closest("div");
+    const card = screen.getByText("Test Card Text").closest("div");
     expect(card).toHaveClass(
       "flex",
       "flex-col",

tests/unit/RuleCard.test.jsx

@@ -148,7 +148,9 @@ describe("RuleCard Component", () => {
 
     const heading = screen.getByRole("heading", { level: 3 });
     // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold
-    expect(heading?.className).toMatch(/min-\[1440px\]:font-bricolage-grotesque/);
+    expect(heading?.className).toMatch(
+      /min-\[1440px\]:font-bricolage-grotesque/,
+    );
     expect(heading?.className).toMatch(/min-\[1440px\]:font-extrabold/);
   });
 
@@ -162,11 +164,7 @@ describe("RuleCard Component", () => {
       },
     ];
     render(
-      <RuleCard
-        {...defaultProps}
-        expanded={true}
-        categories={categories}
-      />,
+      <RuleCard {...defaultProps} expanded={true} categories={categories} />,
     );
 
     expect(screen.getByText("Values")).toBeInTheDocument();
@@ -186,12 +184,7 @@ describe("RuleCard Component", () => {
   });
 
   it("renders with community initials fallback", () => {
-    render(
-      <RuleCard
-        {...defaultProps}
-        communityInitials="CE"
-      />,
-    );
+    render(<RuleCard {...defaultProps} communityInitials="CE" />);
 
     expect(screen.getByText("CE")).toBeInTheDocument();
   });

tests/unit/RuleStack.test.jsx

@@ -147,8 +147,12 @@ describe("RuleStack Component", () => {
       "/assets/Icon_Sociocracy.svg",
     );
     // Check for responsive icon size classes
-    expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:w-\[56px\]/);
-    expect(sociocracyIcon?.className).toMatch(/min-\[640px\]:max-\[1023px\]:h-\[56px\]/);
+    expect(sociocracyIcon?.className).toMatch(
+      /min-\[640px\]:max-\[1023px\]:w-\[56px\]/,
+    );
+    expect(sociocracyIcon?.className).toMatch(
+      /min-\[640px\]:max-\[1023px\]:h-\[56px\]/,
+    );
     expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:w-\[90px\]/);
     expect(sociocracyIcon?.className).toMatch(/min-\[1440px\]:h-\[90px\]/);
   });