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
+26 -4
3 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c0342a3b2d - Show all commits
app/components/type/ContentLockup/ContentLockup.container.tsx
+3 -3
View File
@@ -36,11 +36,11 @@ const ContentLockupContainer = memo<ContentLockupProps>(
titleContainer:
"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
title:
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[32px] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)]",
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
subtitle:
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[32px] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)]",
"font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
description:
"text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-inverse-primary)]",
"text-small-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-inverse-primary)]",
shape:
"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
},
app/layout.tsx
+2 -1
View File
@@ -26,7 +26,8 @@ const inter = Inter({
const bricolageGrotesque = Bricolage_Grotesque({
subsets: ["latin"],
weight: ["400", "500", "700", "800"],
weight: "variable",
axes: ["opsz"],
variable: "--font-bricolage-grotesque",
display: "swap",
preload: true,
tests/components/type/ContentLockup.test.tsx
+21
View File
@@ -24,4 +24,25 @@ describe("ContentLockup", () => {
screen.getByText("Help your community make important decisions."),
).toBeInTheDocument();
});
it("uses Display line-height and Small/Paragraph on the hero lockup", () => {
renderWithProviders(
<ContentLockup
variant="hero"
title="Collaborate"
subtitle="with clarity"
description="Help your community make important decisions."
/>,
);
const title = screen.getByRole("heading", { name: "Collaborate" });
expect(title.className).toContain("max-sm:leading-[110%]");
expect(title.className).toContain("font-medium");
const description = screen.getByText(
"Help your community make important decisions.",
);
expect(description.className).toContain("text-small-paragraph");
expect(description.className).toContain("sm:text-large-paragraph");
});
});