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
+39 -2
2 changed files with 39 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 99c5c28a51 - Show all commits
app/components/type/SectionHeader/SectionHeader.tsx
+2 -2
View File
@@ -68,8 +68,8 @@ const SectionHeader = memo<SectionHeaderProps>(
variant === "multi-line"
? ruleStackDesktopTypeScale
? splitFromMd
? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-none md:text-left md:text-large-heading xl:text-xx-large-heading"
: "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-none lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
? "font-bricolage-grotesque text-medium-heading text-[var(--color-content-default-primary)] md:w-full md:max-w-[571px] md:text-left md:text-large-heading xl:text-xx-large-heading"
: "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-full lg:max-w-[571px] lg:text-left lg:text-large-heading xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
: "font-bricolage-grotesque text-medium-heading md:text-large-heading lg:w-[410px] lg:text-left xl:text-xx-large-heading text-[var(--color-content-default-primary)]"
: "font-bricolage-grotesque text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-096)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-096)] text-[var(--color-content-default-primary)]"
}
tests/components/SectionHeader.test.tsx
+37
View File
@@ -42,3 +42,40 @@ describe("SectionHeader twoColumnsFromMd", () => {
expect(container.firstElementChild).toHaveClass("md:flex-row");
});
});
describe("SectionHeader rule stack title max width", () => {
it("caps the title at the Figma 3-line width from lg", () => {
render(
<SectionHeader
title="Get Templates that help your community run smoothly"
subtitle="Start from a proven pattern."
variant="multi-line"
ruleStackDesktopTypeScale
/>,
);
expect(
screen.getByRole("heading", {
name: /get templates that help your community run smoothly/i,
}),
).toHaveClass("lg:max-w-[571px]");
});
it("caps the title at the Figma 3-line width from md when twoColumnsFromMd is set", () => {
render(
<SectionHeader
title="Get Templates that help your community run smoothly"
subtitle="Start from a proven pattern."
variant="multi-line"
ruleStackDesktopTypeScale
twoColumnsFromMd
/>,
);
expect(
screen.getByRole("heading", {
name: /get templates that help your community run smoothly/i,
}),
).toHaveClass("md:max-w-[571px]");
});
});