From 9e698e7ab60818338c547357ecc1bd321f5a147e Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 19 Aug 2026 17:21:47 -0600 Subject: [PATCH] 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 --- .../layout/Accordion/Accordion.view.tsx | 18 ++++++++----- .../Accordion/Accordion.container.tsx | 2 +- .../sections/Accordion/Accordion.view.tsx | 12 +++++---- stories/sections/Accordion.stories.js | 2 +- tests/components/layout/Accordion.test.tsx | 22 +++++++++++++++ tests/components/sections/Accordion.test.tsx | 27 +++++++++++++++++++ 6 files changed, 69 insertions(+), 14 deletions(-) create mode 100644 tests/components/sections/Accordion.test.tsx diff --git a/app/components/layout/Accordion/Accordion.view.tsx b/app/components/layout/Accordion/Accordion.view.tsx index 65e409e..e44cfe4 100644 --- a/app/components/layout/Accordion/Accordion.view.tsx +++ b/app/components/layout/Accordion/Accordion.view.tsx @@ -11,22 +11,22 @@ const SIZE_CLASSES: Record< > = { s: { header: - "gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center", + "min-h-[88px] gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center", title: "text-[14px] font-medium leading-[18px]", subhead: "text-x-small-label", }, /** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */ m: { header: - "gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center", - title: "text-large-label", + "min-h-[104px] gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center", + title: "text-large-label font-medium leading-6", subhead: "text-[14px] leading-[18px] font-medium", }, l: { header: - "gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center", + "min-h-[135px] gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center", /** Figma Large: X Large Label 24 Regular, lh 28 (21842-2869). */ - title: "text-x-large-label", + title: "text-x-large-label font-normal leading-7", subhead: "text-large-label", }, }; @@ -137,10 +137,14 @@ function AccordionView({ ) : null} - + + + diff --git a/app/components/sections/Accordion/Accordion.container.tsx b/app/components/sections/Accordion/Accordion.container.tsx index c3db272..9e6299a 100644 --- a/app/components/sections/Accordion/Accordion.container.tsx +++ b/app/components/sections/Accordion/Accordion.container.tsx @@ -6,7 +6,7 @@ import type { FaqAccordionProps, FaqAccordionViewProps } from "./Accordion.types import type { AccordionSizeValue } from "../../layout/Accordion"; /** - * Figma: "Sections / Accordion" (22130-889248). Rows: **s** / **m** at `lg` (22135-890258); **Large** (`l`) at `xl` (22135:890328). + * Figma: "Sections / Accordion" (22130-889248). Rows: **s** through `md` (22130:889249); **m** at `lg` (22135-890258); **l** at `xl` (22135:890328). */ const FaqAccordionContainer = memo( ({ size: sizeProp = "s", lgSize: lgSizeProp = "m", xlSize: xlSizeProp = "l", ...props }) => { diff --git a/app/components/sections/Accordion/Accordion.view.tsx b/app/components/sections/Accordion/Accordion.view.tsx index ee103f2..42fc96f 100644 --- a/app/components/sections/Accordion/Accordion.view.tsx +++ b/app/components/sections/Accordion/Accordion.view.tsx @@ -5,8 +5,10 @@ import LayoutAccordion from "../../layout/Accordion"; import type { FaqAccordionViewProps } from "./Accordion.types"; /** - * Figma: "Sections / Accordion" (22130-889248; mobile FAQ 22132-889380). **xl** rows **Large** via `xlSize` (22135:890328). - * Section title: Large Heading (32px, lh 40) below `lg`; X Large Heading (36px, lh 44) at `lg`; XX Large Heading (40px, lh 52) at `xl` (Figma desktop frame 22135:890398). + * Figma: "Sections / Accordion" (22130-889248; mobile FAQ 22132-889380). + * Inset: **4/32** stacked, **96/64** from `md` (22130:889249), **160/96** from `lg` (22130:889247 / 22135:890328). + * Rows: **s** below `lg`, **m** at `lg`, **l** at `xl` via `xlSize`. + * Section title: Large Heading below `lg`; X Large Heading at `lg`; XX Large Heading at `xl` (22135:890398). */ function FaqAccordionView({ title, @@ -20,12 +22,12 @@ function FaqAccordionView({ return (
-
+

{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]"); + }); +});