Fix featured grid

2026-05-22 13:50:55 -06:00
parent 3dbb6b61d2
commit 5863a256f6
23 changed files with 243 additions and 88 deletions
@@ -73,4 +73,73 @@ describe("FeatureGrid (behavioral tests)", () => {
    const section = document.querySelector("section");
    expect(section).toBeInTheDocument();
  });
+
+  it("uses Figma invert surface colors on mini tiles", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+    expect(
+      document.querySelector(
+        '[class*="bg-[var(--color-surface-invert-brand-royal)]"]',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector(
+        '[class*="bg-[var(--color-surface-invert-brand-lime)]"]',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector(
+        '[class*="bg-[var(--color-surface-invert-brand-rust)]"]',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector(
+        '[class*="bg-[var(--color-surface-invert-brand-teal)]"]',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("marks the content block with the Figma node id", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+    expect(
+      document.querySelector('[data-figma-node="18847-22410"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("uses Figma responsive typography on the feature lockup", () => {
+    render(<FeatureGrid title="Test Title" subtitle="Test Subtitle" />);
+    const title = screen.getByRole("heading", { name: "Test Title" });
+    expect(title.className).toMatch(/text-\[18px\]/);
+    expect(title.className).toMatch(/md:text-\[length:var\(--sizing-600,24px\)\]/);
+    const subtitle = screen.getByRole("heading", { name: "Test Subtitle" });
+    expect(subtitle.className).toMatch(/text-\[length:var\(--sizing-350,14px\)\]/);
+    expect(subtitle.className).toMatch(/md:text-\[length:var\(--sizing-400,16px\)\]/);
+  });
+
+  it("applies grain texture to feature grid icons", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+    const icons = document.querySelectorAll("section img");
+    expect(icons.length).toBeGreaterThanOrEqual(4);
+    icons.forEach((icon) => {
+      expect(icon.getAttribute("style")).toContain("#grain");
+    });
+  });
+
+  it("preserves per-icon aspect ratios from Figma layout", () => {
+    render(<FeatureGrid title="Test" subtitle="Test" />);
+    const icons = Array.from(document.querySelectorAll("section img"));
+    expect(icons.map((icon) => icon.getAttribute("width"))).toEqual([
+      "48",
+      "55",
+      "56",
+      "50",
+    ]);
+    expect(icons.map((icon) => icon.getAttribute("height"))).toEqual([
+      "48",
+      "48",
+      "39",
+      "47",
+    ]);
+    expect(icons[3]?.className).toContain("rotate-180");
+    expect(icons[3]?.className).toContain("-scale-x-100");
+  });
 });