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

QA pass: layout, create-flow, and About books #68

Merged
an.di merged 38 commits from adilallo/fix/CR-129-create-rule-button into main 2026-08-26 15:46:56 +00:00
Conversation 0 Commits 38 Files Changed 202
+24 -14
2 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 55915fd364 - Show all commits
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); * 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**; * **`xl`** [22085:860414](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22085-860414&m=dev);
* lg 3-col **22128:888715**; xl **22135:889705** (default preset). * **`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({ function TripleTextBlockView({
title = "", title = "",
@@ -135,16 +136,12 @@ function TripleTextBlockView({
<section <section
{...(isUseCases ? { "data-figma-node": "22085-860414" } : {})} {...(isUseCases ? { "data-figma-node": "22085-860414" } : {})}
aria-labelledby={hasSectionTitle ? headingId : undefined} aria-labelledby={hasSectionTitle ? headingId : undefined}
className={`bg-black py-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] ${ 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()}
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()}
> >
<div <div
className={ className={
isUseCases 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)]" : "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} id={headingId}
className={ className={
isUseCases 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)]" : "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); 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 { container } = render(
<TripleTextBlock <TripleTextBlock
columns={[ columns={[
@@ -69,7 +69,15 @@ describe("TripleTextBlock", () => {
const section = container.querySelector("section"); const section = container.querySelector("section");
expect(section).toBeTruthy(); expect(section).toBeTruthy();
expect(section).toHaveClass("px-[var(--spacing-scale-032)]"); 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", () => { 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"]'); const section = container.querySelector('[data-figma-node="22085-860414"]');
expect(section).toBeTruthy(); expect(section).toBeTruthy();
expect(section).toHaveClass("px-[var(--spacing-scale-032)]"); 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( expect(
screen.getByRole("heading", { screen.getByRole("heading", {
level: 2, level: 2,
name: "Why Horizontal groups need CommunityRule", name: "Why Horizontal groups need CommunityRule",
}), }),
).toBeInTheDocument(); ).toHaveClass("xl:max-w-none");
expect( expect(
screen.getByRole("heading", { screen.getByRole("heading", {
level: 3, level: 3,