From 55915fd3644ec033102e1b0a283cf8bbe74bee45 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 19 Aug 2026 13:43:03 -0600 Subject: [PATCH] Match Triple Text padding and title width to the Figma frames so the section does not over-inset or cap too early. Co-authored-by: Cursor --- .../TripleTextBlock/TripleTextBlock.view.tsx | 17 +++++++-------- .../components/type/TripleTextBlock.test.tsx | 21 +++++++++++++++---- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx b/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx index 1107911..efc437b 100644 --- a/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx +++ b/app/components/type/TripleTextBlock/TripleTextBlock.view.tsx @@ -112,11 +112,12 @@ function TripleTextBlockColumnLockup({ } /** - * Section horizontal padding adds **+ Scale/096** below `xl` (outer frame inset); **use cases `xl`** uses **Scale/160** only ([22085:860414](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22085-860414&m=dev)). + * Horizontal padding matches the Figma frames: **32** stacked, **96** from `md`/`lg`, **160** at `xl`. * * Figma: use cases **`lg`** [22037:26994](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22037-26994&m=dev); - * baseline **22112:871529** / **22085:860366**; **`md`** [22085:862437](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22085-862437&m=dev); stacked **22137:890676**; - * lg 3-col **22128:888715**; xl **22135:889705** (default preset). + * **`xl`** [22085:860414](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22085-860414&m=dev); + * **`md`** [22085:862437](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22085-862437&m=dev); + * baseline **22112:871529**; default lg **22128:888715**; default xl **22135:889705**. */ function TripleTextBlockView({ title = "", @@ -135,16 +136,12 @@ function TripleTextBlockView({
@@ -153,7 +150,7 @@ function TripleTextBlockView({ id={headingId} className={ isUseCases - ? "w-full text-left font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary,white)] md:text-large-heading lg:mx-auto lg:max-w-[693px] lg:text-center lg:text-x-large-heading xl:text-xx-large-heading" + ? "w-full text-left font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary,white)] md:text-large-heading lg:mx-auto lg:max-w-[693px] lg:text-center lg:text-x-large-heading xl:max-w-none xl:text-xx-large-heading" : "w-full text-left font-bricolage-grotesque text-[32px] font-medium leading-[1.1] text-[var(--color-content-default-primary,white)]" } > diff --git a/tests/components/type/TripleTextBlock.test.tsx b/tests/components/type/TripleTextBlock.test.tsx index c6cfa93..d406cb3 100644 --- a/tests/components/type/TripleTextBlock.test.tsx +++ b/tests/components/type/TripleTextBlock.test.tsx @@ -54,7 +54,7 @@ describe("TripleTextBlock", () => { expect(screen.getAllByText("Only body.")).toHaveLength(2); }); - it("default preset uses use-cases-matched baseline horizontal padding", () => { + it("default preset uses Figma frame horizontal padding", () => { const { container } = render( { const section = container.querySelector("section"); expect(section).toBeTruthy(); expect(section).toHaveClass("px-[var(--spacing-scale-032)]"); - expect(section).not.toHaveClass("px-[calc(var(--spacing-scale-032)+var(--spacing-scale-096))]"); + expect(section).toHaveClass("md:px-[var(--spacing-scale-096)]"); + expect(section).toHaveClass("lg:px-[var(--spacing-scale-096)]"); + expect(section).toHaveClass("xl:px-[var(--spacing-scale-160)]"); + expect(section).not.toHaveClass( + "md:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))]", + ); + expect(section).not.toHaveClass( + "xl:px-[calc(var(--spacing-scale-160)+var(--spacing-scale-096))]", + ); }); it("useCases preset renders persistent section heading, column h3 titles, dual paragraphs, outline CTA", () => { @@ -92,14 +100,19 @@ describe("TripleTextBlock", () => { const section = container.querySelector('[data-figma-node="22085-860414"]'); expect(section).toBeTruthy(); expect(section).toHaveClass("px-[var(--spacing-scale-032)]"); - expect(section).not.toHaveClass("px-[calc(var(--spacing-scale-032)+var(--spacing-scale-096))]"); + expect(section).toHaveClass("lg:px-[var(--spacing-scale-096)]"); + expect(section).toHaveClass("xl:px-[var(--spacing-scale-160)]"); + expect(section).not.toHaveClass( + "lg:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))]", + ); + expect(section?.firstElementChild).not.toHaveClass("max-w-[1440px]"); expect( screen.getByRole("heading", { level: 2, name: "Why Horizontal groups need CommunityRule", }), - ).toBeInTheDocument(); + ).toHaveClass("xl:max-w-none"); expect( screen.getByRole("heading", { level: 3,