@nationaldesignstudio/react 0.5.2 → 0.5.4

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

@@ -1,419 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-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 () => {
-			render(<Button>Click me</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Click me" }))
-				.toBeInTheDocument();
-		});
-
-		test("is focusable via keyboard", async () => {
-			render(<Button>Focusable</Button>);
-			await userEvent.keyboard("{Tab}");
-			await expect
-				.element(page.getByRole("button", { name: "Focusable" }))
-				.toHaveFocus();
-		});
-
-		test("disabled button has disabled attribute", async () => {
-			render(<Button disabled>Disabled</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Disabled" }))
-				.toBeDisabled();
-		});
-
-		test("disabled button is not focusable", async () => {
-			render(
-				<>
-					<Button disabled>Disabled</Button>
-					<Button>After</Button>
-				</>,
-			);
-			await userEvent.keyboard("{Tab}");
-			// Focus should skip the disabled button and go to the next one
-			await expect
-				.element(page.getByRole("button", { name: "After" }))
-				.toHaveFocus();
-		});
-
-		test("button with aria-label has accessible name", async () => {
-			render(<Button aria-label="Close dialog">×</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Close dialog" }))
-				.toBeInTheDocument();
-		});
-
-		test("button type defaults to button (not submit)", async () => {
-			render(<Button>Click me</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Click me" }))
-				.toHaveAttribute("type", "button");
-		});
-
-		test("button type can be set explicitly to submit", async () => {
-			render(<Button type="submit">Submit</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Submit" }))
-				.toHaveAttribute("type", "submit");
-		});
-	});
-
-	describe("Interactions", () => {
-		test("calls onClick when clicked", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Click me</Button>);
-			await page.getByRole("button", { name: "Click me" }).click();
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("responds to Enter key when focused", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Enter key</Button>);
-			page.getByRole("button", { name: "Enter key" }).element().focus();
-			await userEvent.keyboard("{Enter}");
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("responds to Space key when focused", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Space key</Button>);
-			page.getByRole("button", { name: "Space key" }).element().focus();
-			await userEvent.keyboard(" ");
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("does not fire onClick when disabled", async () => {
-			const handleClick = vi.fn();
-			render(
-				<Button disabled onClick={handleClick}>
-					Disabled
-				</Button>,
-			);
-			await page
-				.getByRole("button", { name: "Disabled" })
-				.click({ force: true });
-			expect(handleClick).not.toHaveBeenCalled();
-		});
-
-		test("supports multiple clicks", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Multi click</Button>);
-			const button = page.getByRole("button", { name: "Multi click" });
-			await button.click();
-			await button.click();
-			await button.click();
-			expect(handleClick).toHaveBeenCalledTimes(3);
-		});
-	});
-
-	describe("render prop", () => {
-		test("renders as anchor element with button role when render prop is used", async () => {
-			render(
-				// biome-ignore lint/a11y/useAnchorContent: Content provided via Button children
-				<Button render={<a href="/test" />}>Link Button</Button>,
-			);
-			// Base UI keeps role="button" for accessibility when rendering as another element
-			const button = page.getByRole("button", { name: "Link Button" });
-			await expect.element(button).toBeInTheDocument();
-			await expect.element(button).toHaveAttribute("href", "/test");
-		});
-	});
-
-	describe("Variant Styles", () => {
-		test("default variant has dark background", async () => {
-			render(<Button variant="default">Default</Button>);
-			const button = page.getByRole("button", { name: "Default" });
-			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.visual.test.tsx

@@ -1,98 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { Button } from "./button";
-
-describe("Button Visual Regression", () => {
-	test("primary variant renders correctly", async () => {
-		render(<Button variant="primary">Primary Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Primary Button" }),
-		).toMatchScreenshot("button-primary");
-	});
-
-	test("primary-outline variant renders correctly", async () => {
-		render(<Button variant="primary-outline">Primary Outline Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Primary Outline Button" }),
-		).toMatchScreenshot("button-primary-outline");
-	});
-
-	test("secondary variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="secondary">Secondary Button</Button>
-			</div>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Secondary Button" }),
-		).toMatchScreenshot("button-secondary");
-	});
-
-	test("secondary-outline variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="secondary-outline">Secondary Outline Button</Button>
-			</div>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Secondary Outline Button" }),
-		).toMatchScreenshot("button-secondary-outline");
-	});
-
-	test("ghost variant renders correctly", async () => {
-		render(<Button variant="ghost">Ghost Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Ghost Button" }),
-		).toMatchScreenshot("button-ghost");
-	});
-
-	test("ghost-inverse variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ghost-inverse">Ghost Inverse Button</Button>
-			</div>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Ghost Inverse Button" }),
-		).toMatchScreenshot("button-ghost-inverse");
-	});
-
-	test("small size renders correctly", async () => {
-		render(<Button size="sm">Small Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Small Button" }),
-		).toMatchScreenshot("button-size-small");
-	});
-
-	test("medium size renders correctly", async () => {
-		render(<Button size="md">Medium Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Medium Button" }),
-		).toMatchScreenshot("button-size-medium");
-	});
-
-	test("large size renders correctly", async () => {
-		render(<Button size="lg">Large Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Large Button" }),
-		).toMatchScreenshot("button-size-large");
-	});
-
-	test("disabled state renders correctly", async () => {
-		render(<Button disabled>Disabled Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Disabled Button" }),
-		).toMatchScreenshot("button-disabled");
-	});
-});