@nationaldesignstudio/react 0.5.2 → 0.5.4

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

@@ -1,213 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import {
-	Background,
-	BackgroundGradient,
-	BackgroundImage,
-	BackgroundOverlay,
-	BackgroundVideo,
-} from "./background";
-
-describe("Background", () => {
-	describe("Background Container", () => {
-		test("renders as a div with absolute positioning", async () => {
-			render(<Background data-testid="bg-container">Content</Background>);
-			const container = page.getByTestId("bg-container");
-			await expect.element(container).toBeInTheDocument();
-			await expect.element(container).toHaveClass(/absolute/);
-			await expect.element(container).toHaveClass(/inset-0/);
-		});
-
-		test("has aria-hidden attribute", async () => {
-			render(<Background data-testid="bg-container" />);
-			await expect
-				.element(page.getByTestId("bg-container"))
-				.toHaveAttribute("aria-hidden", "true");
-		});
-
-		test("accepts custom className", async () => {
-			render(<Background data-testid="bg" className="custom-class" />);
-			await expect.element(page.getByTestId("bg")).toHaveClass(/custom-class/);
-		});
-	});
-
-	describe("BackgroundImage", () => {
-		test("renders an img element with src", async () => {
-			render(<BackgroundImage src="/test-image.jpg" data-testid="bg-img" />);
-			const img = page.getByTestId("bg-img");
-			await expect.element(img).toBeInTheDocument();
-			await expect.element(img).toHaveAttribute("src", "/test-image.jpg");
-		});
-
-		test("has object-cover class for proper fitting", async () => {
-			render(<BackgroundImage src="/test.jpg" data-testid="bg-img" />);
-			await expect
-				.element(page.getByTestId("bg-img"))
-				.toHaveClass(/object-cover/);
-		});
-
-		test("sets default alt to empty string for decorative images", async () => {
-			render(<BackgroundImage src="/test.jpg" data-testid="bg-img" />);
-			await expect
-				.element(page.getByTestId("bg-img"))
-				.toHaveAttribute("alt", "");
-		});
-
-		test("accepts custom alt text", async () => {
-			render(
-				<BackgroundImage
-					src="/test.jpg"
-					alt="Custom alt text"
-					data-testid="bg-img"
-				/>,
-			);
-			await expect
-				.element(page.getByTestId("bg-img"))
-				.toHaveAttribute("alt", "Custom alt text");
-		});
-
-		test("applies custom position via style", async () => {
-			render(
-				<BackgroundImage
-					src="/test.jpg"
-					position="top left"
-					data-testid="bg-img"
-				/>,
-			);
-			const img = page.getByTestId("bg-img");
-			// Check the style attribute contains the position
-			await expect.element(img).toHaveStyle({ objectPosition: "top left" });
-		});
-
-		test("supports render prop for custom element", async () => {
-			render(
-				<BackgroundImage
-					src="/test.jpg"
-					// biome-ignore lint/a11y/useAltText: Test case for custom element
-					render={<img className="custom-img-class" />}
-					data-testid="bg-img"
-				/>,
-			);
-			await expect
-				.element(page.getByTestId("bg-img"))
-				.toHaveClass(/custom-img-class/);
-		});
-	});
-
-	describe("BackgroundVideo", () => {
-		test("renders a video element", async () => {
-			render(<BackgroundVideo src="/test-video.mp4" data-testid="bg-video" />);
-			const video = page.getByTestId("bg-video");
-			await expect.element(video).toBeInTheDocument();
-		});
-
-		test("has autoplay and loop by default", async () => {
-			render(<BackgroundVideo src="/test.mp4" data-testid="bg-video" />);
-			const video = page.getByTestId("bg-video");
-			await expect.element(video).toHaveAttribute("autoplay");
-			await expect.element(video).toHaveAttribute("loop");
-			// Note: muted is a boolean prop in React that may not render as an HTML attribute
-		});
-
-		test("has object-cover class", async () => {
-			render(<BackgroundVideo src="/test.mp4" data-testid="bg-video" />);
-			await expect
-				.element(page.getByTestId("bg-video"))
-				.toHaveClass(/object-cover/);
-		});
-
-		test("accepts poster prop", async () => {
-			render(
-				<BackgroundVideo
-					src="/test.mp4"
-					poster="/poster.jpg"
-					data-testid="bg-video"
-				/>,
-			);
-			await expect
-				.element(page.getByTestId("bg-video"))
-				.toHaveAttribute("poster", "/poster.jpg");
-		});
-	});
-
-	describe("BackgroundOverlay", () => {
-		test("renders with default opacity", async () => {
-			render(<BackgroundOverlay data-testid="bg-overlay" />);
-			const overlay = page.getByTestId("bg-overlay");
-			await expect.element(overlay).toBeInTheDocument();
-			await expect.element(overlay).toHaveStyle({ opacity: "0.4" });
-		});
-
-		test("accepts custom opacity", async () => {
-			render(<BackgroundOverlay opacity={0.7} data-testid="bg-overlay" />);
-			await expect
-				.element(page.getByTestId("bg-overlay"))
-				.toHaveStyle({ opacity: "0.7" });
-		});
-
-		test("has aria-hidden attribute", async () => {
-			render(<BackgroundOverlay data-testid="bg-overlay" />);
-			await expect
-				.element(page.getByTestId("bg-overlay"))
-				.toHaveAttribute("aria-hidden", "true");
-		});
-	});
-
-	describe("BackgroundGradient", () => {
-		test("renders with default gradient direction", async () => {
-			render(<BackgroundGradient data-testid="bg-gradient" />);
-			const gradient = page.getByTestId("bg-gradient");
-			await expect.element(gradient).toBeInTheDocument();
-		});
-
-		test("has aria-hidden attribute", async () => {
-			render(<BackgroundGradient data-testid="bg-gradient" />);
-			await expect
-				.element(page.getByTestId("bg-gradient"))
-				.toHaveAttribute("aria-hidden", "true");
-		});
-
-		test("accepts custom gradient via gradient prop", async () => {
-			render(
-				<BackgroundGradient
-					gradient="linear-gradient(45deg, red, blue)"
-					data-testid="bg-gradient"
-				/>,
-			);
-			await expect
-				.element(page.getByTestId("bg-gradient"))
-				.toHaveStyle({ backgroundImage: "linear-gradient(45deg, red, blue)" });
-		});
-	});
-
-	describe("Compound Component", () => {
-		test("Background.Image is accessible via dot notation", async () => {
-			render(
-				<Background data-testid="bg-container">
-					<Background.Image src="/test.jpg" data-testid="bg-img" />
-				</Background>,
-			);
-			await expect
-				.element(page.getByTestId("bg-container"))
-				.toBeInTheDocument();
-			await expect.element(page.getByTestId("bg-img")).toBeInTheDocument();
-		});
-
-		test("can compose multiple background layers", async () => {
-			render(
-				<Background data-testid="bg-container">
-					<Background.Image src="/test.jpg" data-testid="bg-img" />
-					<Background.Overlay data-testid="bg-overlay" />
-					<Background.Gradient data-testid="bg-gradient" />
-				</Background>,
-			);
-			await expect
-				.element(page.getByTestId("bg-container"))
-				.toBeInTheDocument();
-			await expect.element(page.getByTestId("bg-img")).toBeInTheDocument();
-			await expect.element(page.getByTestId("bg-overlay")).toBeInTheDocument();
-			await expect.element(page.getByTestId("bg-gradient")).toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,22 +0,0 @@
-export type {
-	BackgroundGradientProps,
-	BackgroundImageProps,
-	BackgroundOverlayProps,
-	BackgroundProps,
-	BackgroundStreamProps,
-	BackgroundVideoProps,
-} from "./background";
-export {
-	Background,
-	BackgroundGradient,
-	BackgroundImage,
-	BackgroundOverlay,
-	BackgroundStream,
-	BackgroundVideo,
-	backgroundGradientVariants,
-	backgroundImageVariants,
-	backgroundOverlayVariants,
-	backgroundStreamVariants,
-	backgroundVariants,
-	backgroundVideoVariants,
-} from "./background";

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

@@ -1,289 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from ".";
-
-const meta: Meta<typeof Button> = {
-	title: "Atoms/Button",
-	component: Button,
-	argTypes: {
-		variant: {
-			control: { type: "select" },
-			options: [
-				"primary",
-				"default",
-				"secondary",
-				"destructive",
-				"outline",
-				"ghost",
-				"link",
-			],
-		},
-		size: {
-			control: { type: "select" },
-			options: ["sm", "default", "lg"],
-		},
-		disabled: {
-			control: { type: "boolean" },
-		},
-	},
-	args: {
-		variant: "default",
-		size: "default",
-		disabled: false,
-	},
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-// =============================================================================
-// Playground
-// =============================================================================
-
-export const Playground: Story = {
-	render: (args) => <Button {...args}>Button</Button>,
-};
-
-// =============================================================================
-// All Variants
-// =============================================================================
-
-/**
- * All button variants in a single view.
- * Matches Figma Button component variants.
- */
-export const AllVariants: Story = {
-	render: () => (
-		<div className="flex flex-col gap-24">
-			<div className="flex items-center gap-16">
-				<Button variant="primary">Primary</Button>
-				<Button variant="default">Default</Button>
-				<Button variant="secondary">Secondary</Button>
-				<Button variant="destructive">Destructive</Button>
-				<Button variant="outline">Outline</Button>
-				<Button variant="ghost">Ghost</Button>
-				<Button variant="link">Link</Button>
-			</div>
-		</div>
-	),
-};
-
-// =============================================================================
-// Individual Variants
-// =============================================================================
-
-/**
- * Primary button - Blue filled for primary actions.
- * Use for the main call-to-action.
- */
-export const Primary: Story = {
-	render: () => <Button variant="primary">Primary</Button>,
-};
-
-/**
- * Default button - Dark filled for secondary prominence.
- * Use for important but not primary actions.
- */
-export const Default: Story = {
-	render: () => <Button variant="default">Default</Button>,
-};
-
-/**
- * Secondary button - Light gray filled with subtle border.
- * Use for less prominent actions.
- */
-export const Secondary: Story = {
-	render: () => <Button variant="secondary">Secondary</Button>,
-};
-
-/**
- * Destructive button - Red filled for destructive actions.
- * Use for delete, remove, or other destructive actions.
- */
-export const Destructive: Story = {
-	render: () => <Button variant="destructive">Destructive</Button>,
-};
-
-/**
- * Outline button - Bordered with transparent background.
- * Use for secondary actions that need clear boundaries.
- */
-export const Outline: Story = {
-	render: () => <Button variant="outline">Outline</Button>,
-};
-
-/**
- * Ghost button - Transparent with subtle hover.
- * Use for tertiary actions or in toolbars.
- */
-export const Ghost: Story = {
-	render: () => <Button variant="ghost">Ghost</Button>,
-};
-
-/**
- * Link button - Text only with underline on hover.
- * Use for navigation or inline actions.
- */
-export const Link: Story = {
-	render: () => <Button variant="link">Link</Button>,
-};
-
-// =============================================================================
-// Sizes
-// =============================================================================
-
-/**
- * All button sizes.
- * Matches Figma Button component sizes: sm (32px), default (36px), lg (40px).
- */
-export const AllSizes: Story = {
-	render: () => (
-		<div className="flex items-center gap-16">
-			<Button size="sm">Small</Button>
-			<Button size="default">Default</Button>
-			<Button size="lg">Large</Button>
-		</div>
-	),
-};
-
-export const Small: Story = {
-	render: () => <Button size="sm">Small</Button>,
-};
-
-export const Medium: Story = {
-	render: () => <Button size="default">Default</Button>,
-};
-
-export const Large: Story = {
-	render: () => <Button size="lg">Large</Button>,
-};
-
-// =============================================================================
-// States
-// =============================================================================
-
-/**
- * Disabled state for all variants.
- */
-export const Disabled: Story = {
-	render: () => <Button disabled>Disabled</Button>,
-};
-
-export const DisabledVariants: Story = {
-	render: () => (
-		<div className="flex items-center gap-16">
-			<Button variant="primary" disabled>
-				Primary
-			</Button>
-			<Button variant="default" disabled>
-				Default
-			</Button>
-			<Button variant="secondary" disabled>
-				Secondary
-			</Button>
-			<Button variant="destructive" disabled>
-				Destructive
-			</Button>
-			<Button variant="outline" disabled>
-				Outline
-			</Button>
-			<Button variant="ghost" disabled>
-				Ghost
-			</Button>
-			<Button variant="link" disabled>
-				Link
-			</Button>
-		</div>
-	),
-};
-
-// =============================================================================
-// Size Variants Matrix
-// =============================================================================
-
-/**
- * Matrix showing all variants at all sizes.
- */
-export const VariantSizeMatrix: Story = {
-	render: () => (
-		<div className="flex flex-col gap-24">
-			<div>
-				<h3 className="mb-12 text-14 font-medium text-gray-600">Small</h3>
-				<div className="flex items-center gap-12">
-					<Button variant="primary" size="sm">
-						Primary
-					</Button>
-					<Button variant="default" size="sm">
-						Default
-					</Button>
-					<Button variant="secondary" size="sm">
-						Secondary
-					</Button>
-					<Button variant="destructive" size="sm">
-						Destructive
-					</Button>
-					<Button variant="outline" size="sm">
-						Outline
-					</Button>
-					<Button variant="ghost" size="sm">
-						Ghost
-					</Button>
-					<Button variant="link" size="sm">
-						Link
-					</Button>
-				</div>
-			</div>
-			<div>
-				<h3 className="mb-12 text-14 font-medium text-gray-600">Default</h3>
-				<div className="flex items-center gap-12">
-					<Button variant="primary" size="default">
-						Primary
-					</Button>
-					<Button variant="default" size="default">
-						Default
-					</Button>
-					<Button variant="secondary" size="default">
-						Secondary
-					</Button>
-					<Button variant="destructive" size="default">
-						Destructive
-					</Button>
-					<Button variant="outline" size="default">
-						Outline
-					</Button>
-					<Button variant="ghost" size="default">
-						Ghost
-					</Button>
-					<Button variant="link" size="default">
-						Link
-					</Button>
-				</div>
-			</div>
-			<div>
-				<h3 className="mb-12 text-14 font-medium text-gray-600">Large</h3>
-				<div className="flex items-center gap-12">
-					<Button variant="primary" size="lg">
-						Primary
-					</Button>
-					<Button variant="default" size="lg">
-						Default
-					</Button>
-					<Button variant="secondary" size="lg">
-						Secondary
-					</Button>
-					<Button variant="destructive" size="lg">
-						Destructive
-					</Button>
-					<Button variant="outline" size="lg">
-						Outline
-					</Button>
-					<Button variant="ghost" size="lg">
-						Ghost
-					</Button>
-					<Button variant="link" size="lg">
-						Link
-					</Button>
-				</div>
-			</div>
-		</div>
-	),
-};