@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/atoms/button/icon-button.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { IconButton } from ".";
 
-// Simple placeholder icons for stories
 const SearchIcon = () => (
 	<svg
 		width="16"
@@ -66,7 +65,7 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: ["sm", "default", "lg"],
+		options: ["sm", "md", "lg"],
 	},
 	disabled: {
 		control: {
@@ -77,42 +76,38 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: ["solid", "outline", "ghost", "subtle"],
-	},
-	colorScheme: {
-		control: {
-			type: "radio",
-		},
-		options: ["dark", "light"],
+		options: [
+			"primary",
+			"primary-outline",
+			"secondary",
+			"secondary-outline",
+			"ghost",
+			"ghost-inverse",
+		],
 	},
 	rounded: {
 		control: {
 			type: "radio",
 		},
-		options: ["default", "sm", "full"],
+		options: ["default", "full"],
 	},
 };
 Playground.args = {
-	size: "default",
+	size: "md",
 	disabled: false,
-	variant: "solid",
-	colorScheme: "dark",
+	variant: "primary",
 	rounded: "default",
 	"aria-label": "Search",
 };
 
-// =============================================================================
-// Variants (Dark Color Scheme - for light backgrounds)
-// =============================================================================
-
-export const Solid = () => (
-	<IconButton variant="solid" aria-label="Search">
+export const Primary = () => (
+	<IconButton variant="primary" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const Outline = () => (
-	<IconButton variant="outline" aria-label="Search">
+export const PrimaryOutline = () => (
+	<IconButton variant="primary-outline" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
@@ -123,92 +118,64 @@ export const Ghost = () => (
 	</IconButton>
 );
 
-export const Subtle = () => (
-	<IconButton variant="subtle" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-// =============================================================================
-// Variants (Light Color Scheme - for dark backgrounds)
-// =============================================================================
-
 const DarkBackground = ({ children }: { children: React.ReactNode }) => (
-	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
-);
-
-export const SolidLight = () => (
-	<DarkBackground>
-		<IconButton variant="solid" colorScheme="light" aria-label="Navigate">
-			<ArrowRightIcon />
-		</IconButton>
-	</DarkBackground>
+	<div className="rounded-radius-12 bg-gray-1200 p-32">{children}</div>
 );
 
-export const OutlineLight = () => (
+export const Secondary = () => (
 	<DarkBackground>
-		<IconButton variant="outline" colorScheme="light" aria-label="Navigate">
+		<IconButton variant="secondary" aria-label="Navigate">
 			<ArrowRightIcon />
 		</IconButton>
 	</DarkBackground>
 );
 
-export const GhostLight = () => (
+export const SecondaryOutline = () => (
 	<DarkBackground>
-		<IconButton variant="ghost" colorScheme="light" aria-label="Navigate">
+		<IconButton variant="secondary-outline" aria-label="Navigate">
 			<ArrowRightIcon />
 		</IconButton>
 	</DarkBackground>
 );
 
-export const SubtleLight = () => (
+export const GhostInverse = () => (
 	<DarkBackground>
-		<IconButton variant="subtle" colorScheme="light" aria-label="Navigate">
+		<IconButton variant="ghost-inverse" aria-label="Navigate">
 			<ArrowRightIcon />
 		</IconButton>
 	</DarkBackground>
 );
 
-// =============================================================================
-// All Variants Comparison
-// =============================================================================
-
 export const AllVariants = () => (
-	<div className="flex flex-col gap-spacing-32">
+	<div className="flex flex-col gap-32">
 		<div>
-			<h3 className="mb-spacing-16 text-14 font-medium text-text-secondary">
-				Dark Color Scheme (for light backgrounds)
+			<h3 className="mb-16 text-14 font-medium text-text-secondary">
+				For Light Backgrounds
 			</h3>
-			<div className="flex gap-spacing-16">
-				<IconButton variant="solid" aria-label="Solid">
+			<div className="flex gap-16">
+				<IconButton variant="primary" aria-label="Primary">
 					<SearchIcon />
 				</IconButton>
-				<IconButton variant="outline" aria-label="Outline">
+				<IconButton variant="primary-outline" aria-label="Primary Outline">
 					<SearchIcon />
 				</IconButton>
 				<IconButton variant="ghost" aria-label="Ghost">
 					<SearchIcon />
 				</IconButton>
-				<IconButton variant="subtle" aria-label="Subtle">
-					<SearchIcon />
-				</IconButton>
 			</div>
 		</div>
 		<DarkBackground>
-			<h3 className="mb-spacing-16 text-14 font-medium text-gray-400">
-				Light Color Scheme (for dark backgrounds)
+			<h3 className="mb-16 text-14 font-medium text-gray-400">
+				For Dark Backgrounds
 			</h3>
-			<div className="flex gap-spacing-16">
-				<IconButton variant="solid" colorScheme="light" aria-label="Solid">
-					<ArrowRightIcon />
-				</IconButton>
-				<IconButton variant="outline" colorScheme="light" aria-label="Outline">
+			<div className="flex gap-16">
+				<IconButton variant="secondary" aria-label="Secondary">
 					<ArrowRightIcon />
 				</IconButton>
-				<IconButton variant="ghost" colorScheme="light" aria-label="Ghost">
+				<IconButton variant="secondary-outline" aria-label="Secondary Outline">
 					<ArrowRightIcon />
 				</IconButton>
-				<IconButton variant="subtle" colorScheme="light" aria-label="Subtle">
+				<IconButton variant="ghost-inverse" aria-label="Ghost Inverse">
 					<ArrowRightIcon />
 				</IconButton>
 			</div>
@@ -216,22 +183,12 @@ export const AllVariants = () => (
 	</div>
 );
 
-// =============================================================================
-// Rounded Variants
-// =============================================================================
-
 export const RoundedDefault = () => (
 	<IconButton rounded="default" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const RoundedSm = () => (
-	<IconButton rounded="sm" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
 export const RoundedFull = () => (
 	<IconButton rounded="full" aria-label="Search">
 		<SearchIcon />
@@ -239,32 +196,22 @@ export const RoundedFull = () => (
 );
 
 export const AllRounded = () => (
-	<div className="flex gap-spacing-16">
+	<div className="flex gap-16">
 		<div className="text-center">
 			<IconButton rounded="default" aria-label="Default rounded">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">default</p>
-		</div>
-		<div className="text-center">
-			<IconButton rounded="sm" aria-label="Small rounded">
-				<SearchIcon />
-			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">sm</p>
+			<p className="mt-8 text-12 text-text-muted">default</p>
 		</div>
 		<div className="text-center">
 			<IconButton rounded="full" aria-label="Full rounded">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">full</p>
+			<p className="mt-8 text-12 text-text-muted">full</p>
 		</div>
 	</div>
 );
 
-// =============================================================================
-// Sizes
-// =============================================================================
-
 export const Small = () => (
 	<IconButton size="sm" aria-label="Search">
 		<ArrowRightIcon />
@@ -272,7 +219,7 @@ export const Small = () => (
 );
 
 export const Medium = () => (
-	<IconButton size="default" aria-label="Search">
+	<IconButton size="md" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
@@ -284,32 +231,28 @@ export const Large = () => (
 );
 
 export const AllSizes = () => (
-	<div className="flex items-center gap-spacing-16">
+	<div className="flex items-center gap-16">
 		<div className="text-center">
 			<IconButton size="sm" aria-label="Small">
 				<ArrowRightIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">sm (32px)</p>
+			<p className="mt-8 text-12 text-text-muted">sm (28px)</p>
 		</div>
 		<div className="text-center">
-			<IconButton size="default" aria-label="Default">
+			<IconButton size="md" aria-label="Default">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">default (40px)</p>
+			<p className="mt-8 text-12 text-text-muted">md (40px)</p>
 		</div>
 		<div className="text-center">
 			<IconButton size="lg" aria-label="Large">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">lg (48px)</p>
+			<p className="mt-8 text-12 text-text-muted">lg (56px)</p>
 		</div>
 	</div>
 );
 
-// =============================================================================
-// States
-// =============================================================================
-
 export const Disabled = () => (
 	<IconButton disabled aria-label="Search">
 		<SearchIcon />

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

@@ -3,7 +3,6 @@ import { page, userEvent } from "vitest/browser";
 import { render } from "vitest-browser-react";
 import { IconButton } from "./icon-button";
 
-// Simple icon for testing
 const TestIcon = () => (
 	// biome-ignore lint/a11y/noSvgWithoutTitle: Test component doesn't need accessibility title
 	<svg data-testid="test-icon" width="24" height="24" viewBox="0 0 24 24">
@@ -139,116 +138,49 @@ describe("IconButton", () => {
 		});
 	});
 
-	describe("Data attributes", () => {
-		test("includes data-variant attribute", async () => {
-			render(
-				<IconButton variant="ghost" aria-label="Ghost variant">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Ghost variant" }))
-				.toHaveAttribute("data-variant", "ghost");
-		});
-
-		test("includes data-size attribute", async () => {
-			render(
-				<IconButton size="lg" aria-label="Large size">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Large size" }))
-				.toHaveAttribute("data-size", "lg");
-		});
-
-		test("includes data-color-scheme attribute", async () => {
-			render(
-				<IconButton colorScheme="light" aria-label="Light scheme">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Light scheme" }))
-				.toHaveAttribute("data-color-scheme", "light");
-		});
-
-		test("includes data-rounded attribute", async () => {
-			render(
-				<IconButton rounded="full" aria-label="Full rounded">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Full rounded" }))
-				.toHaveAttribute("data-rounded", "full");
-		});
-
-		test("has default data attributes when not specified", async () => {
-			render(
-				<IconButton aria-label="Defaults">
-					<TestIcon />
-				</IconButton>,
-			);
-			const button = page.getByRole("button", { name: "Defaults" });
-			await expect.element(button).toHaveAttribute("data-variant", "solid");
-			await expect.element(button).toHaveAttribute("data-size", "default");
-			await expect.element(button).toHaveAttribute("data-color-scheme", "dark");
-			await expect.element(button).toHaveAttribute("data-rounded", "default");
-		});
-	});
-
 	describe("Variants", () => {
-		test("applies solid variant classes by default", async () => {
+		test("primary variant has visible background color", async () => {
 			render(
 				<IconButton aria-label="Default">
 					<TestIcon />
 				</IconButton>,
 			);
 			const button = page.getByRole("button", { name: "Default" });
-			await expect.element(button).toHaveClass(/bg-gray-1200/);
-		});
+			await expect.element(button).toBeInTheDocument();
 
-		test("applies ghost variant classes", async () => {
-			render(
-				<IconButton variant="ghost" aria-label="Ghost">
-					<TestIcon />
-				</IconButton>,
-			);
-			const button = page.getByRole("button", { name: "Ghost" });
-			await expect.element(button).toHaveClass(/text-gray-700/);
+			const element = button.element();
+			const bgColor = window.getComputedStyle(element).backgroundColor;
+			expect(bgColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(bgColor).not.toBe("transparent");
 		});
 	});
 
 	describe("Sizes", () => {
-		test("applies small size classes", async () => {
+		test("different sizes have different dimensions", async () => {
 			render(
-				<IconButton size="sm" aria-label="Small">
-					<TestIcon />
-				</IconButton>,
+				<>
+					<IconButton size="sm" aria-label="Small">
+						<TestIcon />
+					</IconButton>
+					<IconButton size="lg" aria-label="Large">
+						<TestIcon />
+					</IconButton>
+				</>,
 			);
-			const button = page.getByRole("button", { name: "Small" });
-			await expect.element(button).toHaveClass(/size-32/);
-		});
 
-		test("applies default size classes", async () => {
-			render(
-				<IconButton size="default" aria-label="Default">
-					<TestIcon />
-				</IconButton>,
-			);
-			const button = page.getByRole("button", { name: "Default" });
-			await expect.element(button).toHaveClass(/size-40/);
-		});
+			const smallBtn = page.getByRole("button", { name: "Small" });
+			const largeBtn = page.getByRole("button", { name: "Large" });
+			await expect.element(smallBtn).toBeInTheDocument();
+			await expect.element(largeBtn).toBeInTheDocument();
 
-		test("applies large size classes", async () => {
-			render(
-				<IconButton size="lg" aria-label="Large">
-					<TestIcon />
-				</IconButton>,
+			const smallWidth = Number.parseFloat(
+				window.getComputedStyle(smallBtn.element()).width,
+			);
+			const largeWidth = Number.parseFloat(
+				window.getComputedStyle(largeBtn.element()).width,
 			);
-			const button = page.getByRole("button", { name: "Large" });
-			await expect.element(button).toHaveClass(/size-48/);
+
+			expect(largeWidth).toBeGreaterThan(smallWidth);
 		});
 	});
 });