Match Rule card type and section gaps to the template grid.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-08-18 20:56:02 -06:00
co-authored by Cursor
parent b6cf980d23
commit 73cb73a5af
4 changed files with 59 additions and 22 deletions
+35
View File
@@ -195,6 +195,41 @@ describe("Rule Component", () => {
expect(heading?.className).toMatch(/min-\[1440px\]:text-x-large-heading/);
});
it("applies template-grid title and description type scales", () => {
render(
<Rule
{...defaultProps}
templateGridFigmaShell
description="Important decisions require unanimous agreement."
/>,
);
const heading = screen.getByRole("heading", { level: 3 });
expect(heading).toHaveClass("font-bricolage-grotesque");
expect(heading.className).toMatch(/max-\[639px\]:text-small-heading/);
expect(heading.className).toMatch(
/min-\[640px\]:max-\[767px\]:text-x-large-heading/,
);
expect(heading.className).toMatch(
/min-\[768px\]:max-\[1023px\]:text-small-heading/,
);
expect(heading.className).toMatch(/min-\[1024px\]:text-x-large-heading/);
expect(heading.className).not.toMatch(/text-x-small-heading/);
const description = screen.getByText(
"Important decisions require unanimous agreement.",
);
expect(description.className).toMatch(/max-\[639px\]:text-small-label/);
expect(description.className).toMatch(
/min-\[640px\]:max-\[767px\]:text-large-label/,
);
expect(description.className).toMatch(
/min-\[768px\]:max-\[1023px\]:text-small-label/,
);
expect(description.className).toMatch(/min-\[1024px\]:text-large-label/);
expect(description.className).not.toMatch(/text-x-small-label/);
});
it("renders expanded state with categories", () => {
const categories = [
{