{title}
diff --git a/stories/sections/Accordion.stories.js b/stories/sections/Accordion.stories.js
index 5f6ab49..22e52c5 100644
--- a/stories/sections/Accordion.stories.js
+++ b/stories/sections/Accordion.stories.js
@@ -9,7 +9,7 @@ export default {
docs: {
description: {
component:
- "About-page FAQ wrapper over layout/Accordion. Sizes: s below lg, m at lg, l at xl.",
+ "About-page FAQ wrapper over layout/Accordion. Rows: s below lg, m at lg, l at xl. Section inset: 4/32, 96/64 from md, 160/96 from lg.",
},
},
},
diff --git a/tests/components/layout/Accordion.test.tsx b/tests/components/layout/Accordion.test.tsx
index f45d643..9438bed 100644
--- a/tests/components/layout/Accordion.test.tsx
+++ b/tests/components/layout/Accordion.test.tsx
@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom/vitest";
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
@@ -19,4 +20,25 @@ describe("Accordion", () => {
expect(screen.getByText("Answer copy")).toBeInTheDocument();
});
+
+ it("stacks FAQ size variants at lg and xl", () => {
+ render(
+
+ Answer copy
+ ,
+ );
+
+ const button = screen.getByRole("button", { name: "Question" });
+ expect(button).toHaveClass("min-h-[88px]");
+ expect(button).toHaveClass("lg:min-h-[104px]");
+ expect(button).toHaveClass("xl:min-h-[135px]");
+ expect(button).toHaveClass("xl:gap-[var(--spacing-scale-048)]");
+
+ const title = screen.getByText("Question");
+ expect(title).toHaveClass("text-[14px]");
+ expect(title).toHaveClass("lg:text-large-label");
+ expect(title).toHaveClass("xl:text-x-large-label");
+ expect(title).toHaveClass("xl:font-normal");
+ expect(title).toHaveClass("xl:leading-7");
+ });
});
diff --git a/tests/components/sections/Accordion.test.tsx b/tests/components/sections/Accordion.test.tsx
new file mode 100644
index 0000000..4e0fcaa
--- /dev/null
+++ b/tests/components/sections/Accordion.test.tsx
@@ -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(
+
,
+ );
+
+ 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]");
+ });
+});