Apply the FAQ Small, Medium, and Large variants at the matching breakpoints so the About accordion is not using desktop inset and type on tablet.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-19 17:21:47 -06:00
parent 846af91240
commit 9e698e7ab6
6 changed files with 69 additions and 14 deletions
@@ -0,0 +1,27 @@
+import "@testing-library/jest-dom/vitest";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import FaqAccordion from "../../../app/components/sections/Accordion";
+
+describe("FaqAccordion", () => {
+  it("uses Figma section inset per breakpoint and does not cap the inner stack at 1440", () => {
+    const { container } = render(
+      <FaqAccordion
+        title="Get answers to your questions"
+        items={[{ title: "What is CommunityRule, and who is it for?", answer: "Groups." }]}
+      />,
+    );
+
+    const section = container.querySelector("section");
+    expect(section).toBeTruthy();
+    expect(section).toHaveClass("px-[var(--spacing-scale-004)]");
+    expect(section).toHaveClass("py-[var(--spacing-scale-032)]");
+    expect(section).toHaveClass("md:px-[var(--spacing-scale-096)]");
+    expect(section).toHaveClass("md:py-[var(--spacing-scale-064)]");
+    expect(section).toHaveClass("lg:px-[var(--spacing-scale-160)]");
+    expect(section).toHaveClass("lg:py-[var(--spacing-scale-096)]");
+    expect(section).not.toHaveClass("md:px-[var(--spacing-scale-160)]");
+    expect(section).not.toHaveClass("md:py-[var(--spacing-scale-096)]");
+    expect(section?.firstElementChild).not.toHaveClass("max-w-[1440px]");
+  });
+});