@nationaldesignstudio/react 0.5.2 → 0.5.3

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

@@ -1,260 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconButton } from ".";
-
-const SearchIcon = () => (
-	<svg
-		width="16"
-		height="16"
-		viewBox="0 0 16 16"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-		<path
-			d="M14 14L11.1 11.1"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-);
-
-const ArrowRightIcon = () => (
-	<svg
-		width="12"
-		height="12"
-		viewBox="0 0 12 12"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M2.5 6H9.5M9.5 6L6 2.5M9.5 6L6 9.5"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-);
-
-const meta: Meta<typeof IconButton> = {
-	title: "Atoms/IconButton",
-} as Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof IconButton>;
-
-export const Playground: Story = {
-	render: (args) => (
-		<IconButton {...args}>
-			<SearchIcon />
-		</IconButton>
-	),
-};
-Playground.argTypes = {
-	size: {
-		control: {
-			type: "radio",
-		},
-		options: ["sm", "md", "lg"],
-	},
-	disabled: {
-		control: {
-			type: "boolean",
-		},
-	},
-	variant: {
-		control: {
-			type: "radio",
-		},
-		options: [
-			"primary",
-			"primary-outline",
-			"secondary",
-			"secondary-outline",
-			"ghost",
-			"ghost-inverse",
-		],
-	},
-	rounded: {
-		control: {
-			type: "radio",
-		},
-		options: ["default", "full"],
-	},
-};
-Playground.args = {
-	size: "md",
-	disabled: false,
-	variant: "primary",
-	rounded: "default",
-	"aria-label": "Search",
-};
-
-export const Primary = () => (
-	<IconButton variant="primary" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const PrimaryOutline = () => (
-	<IconButton variant="primary-outline" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const Ghost = () => (
-	<IconButton variant="ghost" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-const DarkBackground = ({ children }: { children: React.ReactNode }) => (
-	<div className="rounded-radius-12 bg-gray-1200 p-32">{children}</div>
-);
-
-export const Secondary = () => (
-	<DarkBackground>
-		<IconButton variant="secondary" aria-label="Navigate">
-			<ArrowRightIcon />
-		</IconButton>
-	</DarkBackground>
-);
-
-export const SecondaryOutline = () => (
-	<DarkBackground>
-		<IconButton variant="secondary-outline" aria-label="Navigate">
-			<ArrowRightIcon />
-		</IconButton>
-	</DarkBackground>
-);
-
-export const GhostInverse = () => (
-	<DarkBackground>
-		<IconButton variant="ghost-inverse" aria-label="Navigate">
-			<ArrowRightIcon />
-		</IconButton>
-	</DarkBackground>
-);
-
-export const AllVariants = () => (
-	<div className="flex flex-col gap-32">
-		<div>
-			<h3 className="mb-16 text-14 font-medium text-text-secondary">
-				For Light Backgrounds
-			</h3>
-			<div className="flex gap-16">
-				<IconButton variant="primary" aria-label="Primary">
-					<SearchIcon />
-				</IconButton>
-				<IconButton variant="primary-outline" aria-label="Primary Outline">
-					<SearchIcon />
-				</IconButton>
-				<IconButton variant="ghost" aria-label="Ghost">
-					<SearchIcon />
-				</IconButton>
-			</div>
-		</div>
-		<DarkBackground>
-			<h3 className="mb-16 text-14 font-medium text-gray-400">
-				For Dark Backgrounds
-			</h3>
-			<div className="flex gap-16">
-				<IconButton variant="secondary" aria-label="Secondary">
-					<ArrowRightIcon />
-				</IconButton>
-				<IconButton variant="secondary-outline" aria-label="Secondary Outline">
-					<ArrowRightIcon />
-				</IconButton>
-				<IconButton variant="ghost-inverse" aria-label="Ghost Inverse">
-					<ArrowRightIcon />
-				</IconButton>
-			</div>
-		</DarkBackground>
-	</div>
-);
-
-export const RoundedDefault = () => (
-	<IconButton rounded="default" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const RoundedFull = () => (
-	<IconButton rounded="full" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const AllRounded = () => (
-	<div className="flex gap-16">
-		<div className="text-center">
-			<IconButton rounded="default" aria-label="Default rounded">
-				<SearchIcon />
-			</IconButton>
-			<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-8 text-12 text-text-muted">full</p>
-		</div>
-	</div>
-);
-
-export const Small = () => (
-	<IconButton size="sm" aria-label="Search">
-		<ArrowRightIcon />
-	</IconButton>
-);
-
-export const Medium = () => (
-	<IconButton size="md" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const Large = () => (
-	<IconButton size="lg" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const AllSizes = () => (
-	<div className="flex items-center gap-16">
-		<div className="text-center">
-			<IconButton size="sm" aria-label="Small">
-				<ArrowRightIcon />
-			</IconButton>
-			<p className="mt-8 text-12 text-text-muted">sm (28px)</p>
-		</div>
-		<div className="text-center">
-			<IconButton size="md" aria-label="Default">
-				<SearchIcon />
-			</IconButton>
-			<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-8 text-12 text-text-muted">lg (56px)</p>
-		</div>
-	</div>
-);
-
-export const Disabled = () => (
-	<IconButton disabled aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);

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

@@ -1,186 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { page, userEvent } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { IconButton } from "./icon-button";
-
-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">
-		<path d="M12 2L2 7l10 5 10-5-10-5z" />
-	</svg>
-);
-
-describe("IconButton", () => {
-	describe("Accessibility", () => {
-		test("has correct button role", async () => {
-			render(
-				<IconButton aria-label="Test action">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Test action" }))
-				.toBeInTheDocument();
-		});
-
-		test("is focusable via keyboard", async () => {
-			render(
-				<IconButton aria-label="Focusable">
-					<TestIcon />
-				</IconButton>,
-			);
-			await userEvent.keyboard("{Tab}");
-			await expect
-				.element(page.getByRole("button", { name: "Focusable" }))
-				.toHaveFocus();
-		});
-
-		test("disabled button has disabled attribute", async () => {
-			render(
-				<IconButton disabled aria-label="Disabled">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Disabled" }))
-				.toBeDisabled();
-		});
-
-		test("disabled button is not focusable", async () => {
-			render(
-				<>
-					<IconButton disabled aria-label="Disabled">
-						<TestIcon />
-					</IconButton>
-					<IconButton aria-label="After">
-						<TestIcon />
-					</IconButton>
-				</>,
-			);
-			await userEvent.keyboard("{Tab}");
-			await expect
-				.element(page.getByRole("button", { name: "After" }))
-				.toHaveFocus();
-		});
-
-		test("renders icon inside button", async () => {
-			render(
-				<IconButton aria-label="With icon">
-					<TestIcon />
-				</IconButton>,
-			);
-			const icon = page.getByTestId("test-icon");
-			await expect.element(icon).toBeInTheDocument();
-		});
-	});
-
-	describe("Interactions", () => {
-		test("calls onClick when clicked", async () => {
-			const handleClick = vi.fn();
-			render(
-				<IconButton onClick={handleClick} aria-label="Clickable">
-					<TestIcon />
-				</IconButton>,
-			);
-			await page.getByRole("button", { name: "Clickable" }).click();
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("responds to Enter key when focused", async () => {
-			const handleClick = vi.fn();
-			render(
-				<IconButton onClick={handleClick} aria-label="Enter key">
-					<TestIcon />
-				</IconButton>,
-			);
-			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(
-				<IconButton onClick={handleClick} aria-label="Space key">
-					<TestIcon />
-				</IconButton>,
-			);
-			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(
-				<IconButton disabled onClick={handleClick} aria-label="Disabled">
-					<TestIcon />
-				</IconButton>,
-			);
-			await page
-				.getByRole("button", { name: "Disabled" })
-				.click({ force: true });
-			expect(handleClick).not.toHaveBeenCalled();
-		});
-	});
-
-	describe("render prop", () => {
-		test("renders as anchor element when render prop is used", async () => {
-			render(
-				// biome-ignore lint/a11y/useAnchorContent: Content is provided via IconButton children
-				<IconButton render={<a href="/test" />} aria-label="Link button">
-					<TestIcon />
-				</IconButton>,
-			);
-			const element = page.getByRole("link", { name: "Link button" });
-			await expect.element(element).toBeInTheDocument();
-			await expect.element(element).toHaveAttribute("href", "/test");
-		});
-	});
-
-	describe("Variants", () => {
-		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).toBeInTheDocument();
-
-			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("different sizes have different dimensions", async () => {
-			render(
-				<>
-					<IconButton size="sm" aria-label="Small">
-						<TestIcon />
-					</IconButton>
-					<IconButton size="lg" aria-label="Large">
-						<TestIcon />
-					</IconButton>
-				</>,
-			);
-
-			const smallBtn = page.getByRole("button", { name: "Small" });
-			const largeBtn = page.getByRole("button", { name: "Large" });
-			await expect.element(smallBtn).toBeInTheDocument();
-			await expect.element(largeBtn).toBeInTheDocument();
-
-			const smallWidth = Number.parseFloat(
-				window.getComputedStyle(smallBtn.element()).width,
-			);
-			const largeWidth = Number.parseFloat(
-				window.getComputedStyle(largeBtn.element()).width,
-			);
-
-			expect(largeWidth).toBeGreaterThan(smallWidth);
-		});
-	});
-});

package/src/components/atoms/button/index.ts

@@ -1,6 +0,0 @@
-export { Button, type ButtonProps, buttonVariants } from "./button";
-export {
-	IconButton,
-	type IconButtonProps,
-	iconButtonVariants,
-} from "./icon-button";

package/src/components/atoms/input/index.ts

@@ -1,17 +0,0 @@
-export { Input, type InputProps, inputVariants } from "./input";
-export {
-	InputGroup,
-	InputGroupAddon,
-	type InputGroupAddonProps,
-	InputGroupButton,
-	type InputGroupButtonProps,
-	InputGroupInput,
-	type InputGroupInputProps,
-	type InputGroupProps,
-	InputGroupText,
-	InputGroupTextarea,
-	type InputGroupTextareaProps,
-	type InputGroupTextProps,
-	inputGroupAddonVariants,
-	inputGroupVariants,
-} from "./input-group";