6344a513ce
Second step of the visual-redesign (tokens -> primitives -> surfaces): a small set of shared, token-driven primitives in @trails-cool/ui so both apps compose from one styled vocabulary instead of hand-rolling bg-white/text-gray-* per screen. - @trails-cool/ui now ships React components (Button variants+sizes, Badge tones, Card raised/subtle, Input) plus a tiny cn() helper. React is a peer dep; package builds with no bundling step. - Co-located jsdom unit tests (@testing-library/react) assert roles, token classes, variant switching, and behavior — run in the existing Unit Tests gate, cross-platform, no snapshot baseline needed. - Tailwind @source directive in both apps' styles.css so the package's token utility classes get generated. - Dev-only /dev/ui gallery route in the planner renders every primitive in all states — a zero-dependency stand-in for Storybook. Excluded from production builds (NODE_ENV guard in routes.ts). No app surfaces are refactored yet; adopting the primitives in the topbar/sidebar/etc. is the surface task groups. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
22 lines
742 B
TypeScript
22 lines
742 B
TypeScript
// @vitest-environment jsdom
|
|
import { describe, it, expect, afterEach } from "vitest";
|
|
import { render, screen, cleanup } from "@testing-library/react";
|
|
import { Card } from "./Card.tsx";
|
|
|
|
afterEach(cleanup);
|
|
|
|
describe("Card", () => {
|
|
it("renders a subtle surface by default", () => {
|
|
render(<Card>body</Card>);
|
|
const card = screen.getByText("body");
|
|
expect(card.className).toContain("bg-bg-subtle");
|
|
expect(card.className).not.toContain("shadow-sm");
|
|
});
|
|
|
|
it("renders a raised surface with a shadow when raised", () => {
|
|
render(<Card raised>panel</Card>);
|
|
const card = screen.getByText("panel");
|
|
expect(card.className).toContain("bg-bg-raised");
|
|
expect(card.className).toContain("shadow-sm");
|
|
});
|
|
});
|