CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Match Triple Text padding and title width to the Figma frames so the section does not over-inset or cap too early.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-19 13:43:03 -06:00
co-authored by Cursor
parent d427d96a83
commit 55915fd364
2 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/type/TripleTextBlock/TripleTextBlock.view.tsx
+7 -10
View File
@@ -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({
<section
{...(isUseCases ? { "data-figma-node": "22085-860414" } : {})}
aria-labelledby={hasSectionTitle ? headingId : undefined}
className={`bg-black py-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] ${
isUseCases
? "px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] lg:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] xl:px-[var(--spacing-scale-160)]"
: "px-[var(--spacing-scale-032)] md:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] lg:px-[calc(var(--spacing-scale-096)+var(--spacing-scale-096))] xl:px-[calc(var(--spacing-scale-160)+var(--spacing-scale-096))]"
} ${className}`.trim()}
className={`bg-black py-[var(--spacing-scale-064)] px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-096)] xl:px-[var(--spacing-scale-160)] ${className}`.trim()}
>
<div
className={
isUseCases
? "mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-048)] lg:items-center lg:gap-[var(--spacing-scale-064)]"
? "mx-auto flex w-full flex-col items-start gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-048)] lg:items-center lg:gap-[var(--spacing-scale-064)]"
: "mx-auto flex w-full max-w-[1440px] flex-col items-start gap-[var(--spacing-scale-032)]"
}
>
@@ -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)]"
}
>
tests/components/type/TripleTextBlock.test.tsx
+17 -4
View File
@@ -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(
<TripleTextBlock
columns={[
@@ -69,7 +69,15 @@ describe("TripleTextBlock", () => {
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,