@nationaldesignstudio/react 0.3.0 → 0.5.0

package/src/components/atoms/button/button.test.tsx

@@ -3,6 +3,28 @@ import { page, userEvent } from "vitest/browser";
 import { render } from "vitest-browser-react";
 import { Button } from "./button";
 
+/**
+ * Helper to get computed styles of an element
+ */
+function getStyles(element: HTMLElement) {
+	return window.getComputedStyle(element);
+}
+
+/**
+ * Helper to convert rgb/rgba to hex for easier comparison
+ */
+function _rgbToHex(rgb: string): string {
+	// Handle rgba format
+	const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
+	if (!match) return rgb;
+
+	const r = parseInt(match[1], 10);
+	const g = parseInt(match[2], 10);
+	const b = parseInt(match[3], 10);
+
+	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
 describe("Button", () => {
 	describe("Accessibility", () => {
 		test("has correct button role", async () => {
@@ -124,12 +146,274 @@ describe("Button", () => {
 		});
 	});
 
-	describe("Variants", () => {
-		test("applies primary variant classes by default", async () => {
-			render(<Button>Default</Button>);
+	describe("Variant Styles", () => {
+		test("default variant has dark background", async () => {
+			render(<Button variant="default">Default</Button>);
 			const button = page.getByRole("button", { name: "Default" });
-			// Button uses semantic token classes
-			await expect.element(button).toHaveClass(/bg-ui-button-primary-bg/);
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Default variant should have a dark background (gray-1200)
+			// The actual color depends on CSS variables, but it should not be transparent
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("primary variant has blue background", async () => {
+			render(<Button variant="primary">Primary</Button>);
+			const button = page.getByRole("button", { name: "Primary" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Primary variant should have a visible background
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("destructive variant has red-tinted background", async () => {
+			render(<Button variant="destructive">Delete</Button>);
+			const button = page.getByRole("button", { name: "Delete" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Destructive variant should have a visible background
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("ghost variant has transparent background", async () => {
+			render(<Button variant="ghost">Ghost</Button>);
+			const button = page.getByRole("button", { name: "Ghost" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Ghost variant should have transparent background
+			expect(
+				styles.backgroundColor === "rgba(0, 0, 0, 0)" ||
+					styles.backgroundColor === "transparent",
+			).toBe(true);
+		});
+
+		test("link variant has no background and underline on hover behavior", async () => {
+			render(<Button variant="link">Link</Button>);
+			const button = page.getByRole("button", { name: "Link" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Link variant should have transparent background
+			expect(
+				styles.backgroundColor === "rgba(0, 0, 0, 0)" ||
+					styles.backgroundColor === "transparent",
+			).toBe(true);
+		});
+
+		test("outline variant has visible border", async () => {
+			render(<Button variant="outline">Outline</Button>);
+			const button = page.getByRole("button", { name: "Outline" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Outline variant should have a visible border
+			const borderWidth = parseFloat(styles.borderWidth) || 0;
+			expect(borderWidth).toBeGreaterThan(0);
+		});
+
+		test("secondary variant has light gray background with border", async () => {
+			render(<Button variant="secondary">Secondary</Button>);
+			const button = page.getByRole("button", { name: "Secondary" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Secondary variant should have a visible background
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+
+			// Secondary should also have a border
+			const borderWidth = parseFloat(styles.borderWidth) || 0;
+			expect(borderWidth).toBeGreaterThan(0);
+		});
+	});
+
+	describe("Size Styles", () => {
+		test("small size has 32px height", async () => {
+			render(<Button size="sm">Small</Button>);
+			const button = page.getByRole("button", { name: "Small" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Small button should be 32px height
+			expect(styles.height).toBe("32px");
+		});
+
+		test("default size has 36px height", async () => {
+			render(<Button size="default">Default</Button>);
+			const button = page.getByRole("button", { name: "Default" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Default button should be 36px height
+			expect(styles.height).toBe("36px");
+		});
+
+		test("large size has 40px height", async () => {
+			render(<Button size="lg">Large</Button>);
+			const button = page.getByRole("button", { name: "Large" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Large button should be 40px height
+			expect(styles.height).toBe("40px");
+		});
+
+		test("size affects padding appropriately", async () => {
+			render(
+				<>
+					<Button size="sm">Small</Button>
+					<Button size="lg">Large</Button>
+				</>,
+			);
+			const smallButton = page.getByRole("button", { name: "Small" });
+			const largeButton = page.getByRole("button", { name: "Large" });
+
+			const smallStyles = getStyles(smallButton.element());
+			const largeStyles = getStyles(largeButton.element());
+
+			const smallPaddingLeft = parseFloat(smallStyles.paddingLeft);
+			const largePaddingLeft = parseFloat(largeStyles.paddingLeft);
+
+			// Large should have more padding than small
+			expect(largePaddingLeft).toBeGreaterThan(smallPaddingLeft);
+		});
+
+		test("size affects border radius appropriately", async () => {
+			render(
+				<>
+					<Button size="sm">Small</Button>
+					<Button size="lg">Large</Button>
+				</>,
+			);
+			const smallButton = page.getByRole("button", { name: "Small" });
+			const largeButton = page.getByRole("button", { name: "Large" });
+
+			const smallStyles = getStyles(smallButton.element());
+			const largeStyles = getStyles(largeButton.element());
+
+			const smallRadius = parseFloat(smallStyles.borderRadius);
+			const largeRadius = parseFloat(largeStyles.borderRadius);
+
+			// Large should have more border radius than small
+			// Figma: sm=4px, default=6px, lg=10px
+			expect(largeRadius).toBeGreaterThan(smallRadius);
+		});
+	});
+
+	describe("Disabled State Styles", () => {
+		test("disabled button has reduced opacity", async () => {
+			render(<Button disabled>Disabled</Button>);
+			const button = page.getByRole("button", { name: "Disabled" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Disabled button should have opacity of 0.5
+			expect(parseFloat(styles.opacity)).toBe(0.5);
+		});
+
+		test("disabled button has pointer-events none", async () => {
+			render(<Button disabled>Disabled</Button>);
+			const button = page.getByRole("button", { name: "Disabled" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			expect(styles.pointerEvents).toBe("none");
+		});
+	});
+
+	describe("Data Attributes", () => {
+		test("button has correct data-variant attribute", async () => {
+			render(<Button variant="destructive">Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+
+			await expect
+				.element(button)
+				.toHaveAttribute("data-variant", "destructive");
+		});
+
+		test("button has correct data-size attribute", async () => {
+			render(<Button size="lg">Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+
+			await expect.element(button).toHaveAttribute("data-size", "lg");
+		});
+
+		test("default variant and size are reflected in data attributes", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+
+			await expect.element(button).toHaveAttribute("data-variant", "default");
+			await expect.element(button).toHaveAttribute("data-size", "default");
+		});
+	});
+
+	describe("Layout Styles", () => {
+		test("button uses flexbox for content alignment", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			expect(styles.display).toBe("inline-flex");
+			expect(styles.alignItems).toBe("center");
+			expect(styles.justifyContent).toBe("center");
+		});
+
+		test("button has cursor pointer", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			expect(styles.cursor).toBe("pointer");
+		});
+
+		test("button has gap for icon-text spacing", async () => {
+			render(<Button>Test</Button>);
+			const button = page.getByRole("button", { name: "Test" });
+			await expect.element(button).toBeInTheDocument();
+
+			const element = button.element();
+			const styles = getStyles(element);
+
+			// Gap should be set (6px from Figma)
+			const gap = parseFloat(styles.gap);
+			expect(gap).toBeGreaterThan(0);
 		});
 	});
 });

package/src/components/atoms/button/button.tsx

@@ -12,17 +12,18 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  * Button component based on Figma Button component
  *
  * Variants (matches Figma):
- * - primary: Filled brand button (indigo background)
- * - primary-outline: Outlined brand button (indigo border/text)
- * - secondary: Filled neutral button (white background, for dark backgrounds)
- * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
- * - ghost: Transparent button with subtle hover (for light backgrounds)
- * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
+ * - primary: Blue filled button for primary actions
+ * - default: Dark filled button for secondary prominence
+ * - secondary: Light gray filled button with subtle border
+ * - destructive: Red filled button for destructive actions
+ * - outline: Bordered button with transparent background
+ * - ghost: Transparent button with subtle hover
+ * - link: Text-only button with underline on hover
  *
- * Sizes:
- * - lg: Large buttons (56px height)
- * - md: Medium buttons (40px height) - default
- * - sm: Small buttons (28px height)
+ * Sizes (matches Figma):
+ * - sm: Small buttons (32px height)
+ * - default: Default buttons (36px height)
+ * - lg: Large buttons (40px height)
  *
  * For icon-only buttons, use the IconButton component instead.
  *
@@ -30,40 +31,43 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  * Pass a `theme` prop to override default colors via CSS custom properties.
  */
 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center gap-6 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-solid",
+	base: "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
-			// Primary - filled brand button
+			// Primary - blue filled button
 			primary:
-				"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover hover:text-button-primary-text-hover border-transparent focus-visible:ring-button-primary-bg",
-			// Primary Outline - outlined brand button
-			"primary-outline":
-				"bg-button-primary-outline-bg text-button-primary-outline-text border border-button-primary-outline-border hover:bg-button-primary-outline-bg-hover hover:text-button-primary-outline-text-hover hover:border-button-primary-outline-border-hover focus-visible:ring-button-primary-outline-border",
-			// Secondary - filled neutral button (for dark backgrounds)
+				"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover active:bg-button-primary-bg-active border-transparent",
+			// Default - dark filled button
+			default:
+				"bg-button-default-bg text-button-default-text hover:bg-button-default-bg-hover active:bg-button-default-bg-active border-transparent",
+			// Secondary - light gray filled with subtle border
 			secondary:
-				"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover hover:text-button-secondary-text-hover border-transparent focus-visible:ring-button-secondary-bg focus-visible:ring-offset-gray-1000",
-			// Secondary Outline - outlined neutral button (for dark backgrounds)
-			"secondary-outline":
-				"bg-button-secondary-outline-bg text-button-secondary-outline-text border border-button-secondary-outline-border hover:bg-button-secondary-outline-bg-hover hover:text-button-secondary-outline-text-hover hover:border-button-secondary-outline-border-hover focus-visible:ring-button-secondary-outline-border focus-visible:ring-offset-gray-1000",
-			// Ghost - transparent button (for light backgrounds)
+				"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover active:bg-button-secondary-bg-active border border-button-secondary-border",
+			// Destructive - red filled button
+			destructive:
+				"bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg-hover active:bg-button-destructive-bg-active border-transparent",
+			// Outline - bordered with transparent background
+			outline:
+				"bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg-hover active:bg-button-outline-bg-active border border-button-outline-border hover:border-button-outline-border-hover",
+			// Ghost - transparent with subtle hover
 			ghost:
-				"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover hover:text-button-ghost-text-hover border-transparent focus-visible:ring-gray-1000",
-			// Ghost Inverse - transparent button (for dark backgrounds)
-			"ghost-inverse":
-				"bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
+				"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover active:bg-button-ghost-bg-active border-transparent",
+			// Link - text only with underline on hover
+			link: "bg-transparent text-button-link-text hover:text-button-link-text-hover hover:underline active:text-button-link-text-hover border-transparent underline-offset-4",
 			// Themed - uses CSS custom properties for styling
 			themed:
 				"[background:var(--btn-bg)] [color:var(--btn-text)] [border-color:var(--btn-border-color,transparent)] hover:[background:var(--btn-bg-hover,var(--btn-bg))] active:[background:var(--btn-bg-active,var(--btn-bg-hover,var(--btn-bg)))]",
 		},
 		size: {
-			lg: "px-32 py-20 h-56 rounded-10 typography-large-button-large",
-			md: "px-20 py-12 h-40 rounded-6 typography-medium-button-medium",
-			sm: "px-12 py-8 h-28 rounded-4 typography-small-button-small",
+			sm: "typography-ui-text-xs h-spatial-ui-button-height-small px-spatial-ui-button-padding-x-small py-spatial-ui-button-padding-y-small rounded-surface-button-small",
+			default:
+				"typography-ui-text-sm h-spatial-ui-button-height-medium px-spatial-ui-button-padding-x-medium py-spatial-ui-button-padding-y-medium rounded-surface-button-medium",
+			lg: "typography-ui-text-md h-spatial-ui-button-height-large px-spatial-ui-button-padding-x-large py-spatial-ui-button-padding-y-large rounded-surface-button-large",
 		},
 	},
 	defaultVariants: {
-		variant: "primary",
-		size: "md",
+		variant: "default",
+		size: "default",
 	},
 });
 
@@ -100,8 +104,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
 
 		// Resolve actual values for data attributes
-		const resolvedVariant = effectiveVariant ?? "primary";
-		const resolvedSize = size ?? "md";
+		const resolvedVariant = effectiveVariant ?? "default";
+		const resolvedSize = size ?? "default";
 
 		return (
 			<BaseButton

package/src/components/atoms/button/button.visual.test.tsx

@@ -4,115 +4,66 @@ import { page } from "vitest/browser";
 import { Button } from "./button";
 
 describe("Button Visual Regression", () => {
-	// Solid variants
-	test("solid dark variant renders correctly", async () => {
-		render(
-			<Button variant="solid" colorScheme="dark">
-				Solid Dark Button
-			</Button>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Solid Dark Button" }),
-		).toMatchScreenshot("button-solid-dark");
-	});
-
-	test("solid light variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="solid" colorScheme="light">
-					Solid Light Button
-				</Button>
-			</div>,
-		);
+	test("primary variant renders correctly", async () => {
+		render(<Button variant="primary">Primary Button</Button>);
 
 		await expect(
-			page.getByRole("button", { name: "Solid Light Button" }),
-		).toMatchScreenshot("button-solid-light");
+			page.getByRole("button", { name: "Primary Button" }),
+		).toMatchScreenshot("button-primary");
 	});
 
-	// Outline variants
-	test("outline dark variant renders correctly", async () => {
-		render(
-			<Button variant="outline" colorScheme="dark">
-				Outline Dark Button
-			</Button>,
-		);
+	test("primary-outline variant renders correctly", async () => {
+		render(<Button variant="primary-outline">Primary Outline Button</Button>);
 
 		await expect(
-			page.getByRole("button", { name: "Outline Dark Button" }),
-		).toMatchScreenshot("button-outline-dark");
+			page.getByRole("button", { name: "Primary Outline Button" }),
+		).toMatchScreenshot("button-primary-outline");
 	});
 
-	test("outline light variant renders correctly", async () => {
+	test("secondary variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="outline" colorScheme="light">
-					Outline Light Button
-				</Button>
+				<Button variant="secondary">Secondary Button</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Outline Light Button" }),
-		).toMatchScreenshot("button-outline-light");
-	});
-
-	// Ghost variants
-	test("ghost dark variant renders correctly", async () => {
-		render(
-			<Button variant="ghost" colorScheme="dark">
-				Ghost Dark Button
-			</Button>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Ghost Dark Button" }),
-		).toMatchScreenshot("button-ghost-dark");
+			page.getByRole("button", { name: "Secondary Button" }),
+		).toMatchScreenshot("button-secondary");
 	});
 
-	test("ghost light variant renders correctly", async () => {
+	test("secondary-outline variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ghost" colorScheme="light">
-					Ghost Light Button
-				</Button>
+				<Button variant="secondary-outline">Secondary Outline Button</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ghost Light Button" }),
-		).toMatchScreenshot("button-ghost-light");
+			page.getByRole("button", { name: "Secondary Outline Button" }),
+		).toMatchScreenshot("button-secondary-outline");
 	});
 
-	// Subtle variants
-	test("subtle dark variant renders correctly", async () => {
-		render(
-			<Button variant="subtle" colorScheme="dark">
-				Subtle Dark Button
-			</Button>,
-		);
+	test("ghost variant renders correctly", async () => {
+		render(<Button variant="ghost">Ghost Button</Button>);
 
 		await expect(
-			page.getByRole("button", { name: "Subtle Dark Button" }),
-		).toMatchScreenshot("button-subtle-dark");
+			page.getByRole("button", { name: "Ghost Button" }),
+		).toMatchScreenshot("button-ghost");
 	});
 
-	test("subtle light variant renders correctly", async () => {
+	test("ghost-inverse variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="subtle" colorScheme="light">
-					Subtle Light Button
-				</Button>
+				<Button variant="ghost-inverse">Ghost Inverse Button</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Subtle Light Button" }),
-		).toMatchScreenshot("button-subtle-light");
+			page.getByRole("button", { name: "Ghost Inverse Button" }),
+		).toMatchScreenshot("button-ghost-inverse");
 	});
 
-	// Size variants
 	test("small size renders correctly", async () => {
 		render(<Button size="sm">Small Button</Button>);
 
@@ -121,8 +72,8 @@ describe("Button Visual Regression", () => {
 		).toMatchScreenshot("button-size-small");
 	});
 
-	test("medium (default) size renders correctly", async () => {
-		render(<Button size="default">Medium Button</Button>);
+	test("medium size renders correctly", async () => {
+		render(<Button size="md">Medium Button</Button>);
 
 		await expect(
 			page.getByRole("button", { name: "Medium Button" }),
@@ -137,7 +88,6 @@ describe("Button Visual Regression", () => {
 		).toMatchScreenshot("button-size-large");
 	});
 
-	// Disabled state
 	test("disabled state renders correctly", async () => {
 		render(<Button disabled>Disabled Button</Button>);