@nationaldesignstudio/react 0.5.1 → 0.5.3

package/src/components/organisms/navbar/navbar.test.tsx

@@ -1,190 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Button } from "../../atoms/button";
-import {
-	Navbar,
-	NavbarActions,
-	NavbarBrand,
-	NavbarLink,
-	NavbarLinks,
-} from "./navbar";
-
-describe("Navbar", () => {
-	describe("Accessibility", () => {
-		test("renders as nav landmark", async () => {
-			render(
-				<Navbar>
-					<NavbarBrand>Logo</NavbarBrand>
-				</Navbar>,
-			);
-
-			await expect.element(page.getByRole("navigation")).toBeInTheDocument();
-		});
-
-		test("links are accessible", async () => {
-			// NavbarLinks is hidden at mobile viewport, set to desktop
-			await page.viewport(1280, 800);
-
-			render(
-				<Navbar>
-					<NavbarLinks>
-						<NavbarLink href="/home">Home</NavbarLink>
-						<NavbarLink href="/about">About</NavbarLink>
-					</NavbarLinks>
-				</Navbar>,
-			);
-
-			await expect
-				.element(page.getByRole("link", { name: "Home" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("link", { name: "About" }))
-				.toBeInTheDocument();
-		});
-
-		test("links have correct href attributes", async () => {
-			// NavbarLinks is hidden at mobile viewport, set to desktop
-			await page.viewport(1280, 800);
-
-			render(
-				<Navbar>
-					<NavbarLinks>
-						<NavbarLink href="/test-page">Test Link</NavbarLink>
-					</NavbarLinks>
-				</Navbar>,
-			);
-
-			await expect
-				.element(page.getByRole("link", { name: "Test Link" }))
-				.toHaveAttribute("href", "/test-page");
-		});
-
-		test("buttons in actions are accessible", async () => {
-			render(
-				<Navbar>
-					<NavbarActions>
-						<Button>Sign In</Button>
-					</NavbarActions>
-				</Navbar>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Sign In" }))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("NavbarLink", () => {
-		test("active link has different styling", async () => {
-			// NavbarLinks is hidden at mobile viewport, set to desktop
-			await page.viewport(1280, 800);
-
-			render(
-				<Navbar>
-					<NavbarLinks>
-						<NavbarLink href="#" active data-testid="active-link">
-							Active
-						</NavbarLink>
-						<NavbarLink href="#" data-testid="inactive-link">
-							Inactive
-						</NavbarLink>
-					</NavbarLinks>
-				</Navbar>,
-			);
-
-			const activeLink = page.getByTestId("active-link");
-			await expect.element(activeLink).toHaveClass(/text-gray-1100/);
-		});
-
-		test("supports asChild prop for router links", async () => {
-			// NavbarLinks is hidden at mobile viewport, set to desktop
-			await page.viewport(1280, 800);
-
-			render(
-				<Navbar>
-					<NavbarLinks>
-						<NavbarLink asChild>
-							<a href="/custom">Custom Link</a>
-						</NavbarLink>
-					</NavbarLinks>
-				</Navbar>,
-			);
-
-			await expect
-				.element(page.getByRole("link", { name: "Custom Link" }))
-				.toHaveAttribute("href", "/custom");
-		});
-	});
-
-	describe("NavbarBrand", () => {
-		test("renders brand content", async () => {
-			render(
-				<Navbar>
-					<NavbarBrand>
-						<span>My Brand</span>
-					</NavbarBrand>
-				</Navbar>,
-			);
-
-			await expect.element(page.getByText("My Brand")).toBeInTheDocument();
-		});
-
-		test("supports asChild for link brands", async () => {
-			render(
-				<Navbar>
-					<NavbarBrand asChild>
-						<a href="/">Home Brand</a>
-					</NavbarBrand>
-				</Navbar>,
-			);
-
-			await expect
-				.element(page.getByRole("link", { name: "Home Brand" }))
-				.toHaveAttribute("href", "/");
-		});
-	});
-
-	describe("Composition", () => {
-		test("renders complete navbar with all components", async () => {
-			// NavbarLinks is hidden at mobile viewport, set to desktop
-			await page.viewport(1280, 800);
-
-			render(
-				<Navbar>
-					<NavbarBrand>Logo</NavbarBrand>
-					<NavbarLinks>
-						<NavbarLink href="#">Link 1</NavbarLink>
-						<NavbarLink href="#">Link 2</NavbarLink>
-					</NavbarLinks>
-					<NavbarActions>
-						<Button>Action</Button>
-					</NavbarActions>
-				</Navbar>,
-			);
-
-			await expect.element(page.getByRole("navigation")).toBeInTheDocument();
-			await expect.element(page.getByText("Logo")).toBeInTheDocument();
-			await expect
-				.element(page.getByRole("link", { name: "Link 1" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("link", { name: "Link 2" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("button", { name: "Action" }))
-				.toBeInTheDocument();
-		});
-
-		test("supports custom className on Navbar", async () => {
-			render(
-				<Navbar className="custom-navbar" data-testid="navbar">
-					<NavbarBrand>Logo</NavbarBrand>
-				</Navbar>,
-			);
-
-			const navbar = page.getByTestId("navbar");
-			await expect.element(navbar).toHaveClass(/custom-navbar/);
-		});
-	});
-});

package/src/components/organisms/navbar/navbar.visual.test.tsx

@@ -1,85 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Button } from "../../atoms/button";
-import {
-	Navbar,
-	NavbarActions,
-	NavbarBrand,
-	NavbarLink,
-	NavbarLinks,
-} from "./navbar";
-
-describe("Navbar Visual Regression", () => {
-	test("default navbar renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(
-			<Navbar data-testid="navbar">
-				<NavbarBrand>
-					<span className="text-xl font-bold">Logo</span>
-				</NavbarBrand>
-				<NavbarLinks>
-					<NavbarLink href="#">Home</NavbarLink>
-					<NavbarLink href="#">About</NavbarLink>
-					<NavbarLink href="#">Services</NavbarLink>
-					<NavbarLink href="#">Contact</NavbarLink>
-				</NavbarLinks>
-				<NavbarActions>
-					<Button size="sm" variant="primary">
-						Sign In
-					</Button>
-				</NavbarActions>
-			</Navbar>,
-		);
-
-		await expect(page.getByTestId("navbar")).toMatchScreenshot(
-			"navbar-default",
-		);
-	});
-
-	test("navbar with active link renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(
-			<Navbar data-testid="navbar">
-				<NavbarBrand>
-					<span className="text-xl font-bold">Logo</span>
-				</NavbarBrand>
-				<NavbarLinks>
-					<NavbarLink href="#" active>
-						Home
-					</NavbarLink>
-					<NavbarLink href="#">About</NavbarLink>
-					<NavbarLink href="#">Services</NavbarLink>
-					<NavbarLink href="#">Contact</NavbarLink>
-				</NavbarLinks>
-				<NavbarActions>
-					<Button size="sm" variant="primary">
-						Sign In
-					</Button>
-				</NavbarActions>
-			</Navbar>,
-		);
-
-		await expect(page.getByTestId("navbar")).toMatchScreenshot(
-			"navbar-active-link",
-		);
-	});
-
-	test("navbar brand only renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(
-			<Navbar data-testid="navbar">
-				<NavbarBrand>
-					<span className="text-xl font-bold">Brand Only</span>
-				</NavbarBrand>
-			</Navbar>,
-		);
-
-		await expect(page.getByTestId("navbar")).toMatchScreenshot(
-			"navbar-brand-only",
-		);
-	});
-});

package/src/components/organisms/us-gov-banner/index.ts

@@ -1,5 +0,0 @@
-export {
-	USGovBanner,
-	type USGovBannerProps,
-	usGovBannerVariants,
-} from "./us-gov-banner";

package/src/components/organisms/us-gov-banner/us-gov-banner.stories.tsx

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { USGovBanner } from ".";
-
-const meta: Meta<typeof USGovBanner> = {
-	title: "Organisms/USGovBanner",
-	component: USGovBanner,
-	parameters: {
-		layout: "fullscreen",
-	},
-} as Meta<typeof USGovBanner>;
-
-export default meta;
-type Story = StoryObj<typeof USGovBanner>;
-
-export const Default: Story = {
-	render: () => <USGovBanner />,
-};
-
-export const CustomText: Story = {
-	render: () => (
-		<USGovBanner text="An official website of the U.S. Department of State" />
-	),
-};
-
-export const Playground: Story = {
-	render: (args) => <USGovBanner {...args} />,
-};
-Playground.argTypes = {
-	text: {
-		control: { type: "text" },
-	},
-};
-Playground.args = {
-	text: "An official website of the United States government",
-};

package/src/components/organisms/us-gov-banner/us-gov-banner.test.tsx

@@ -1,107 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { USGovBanner } from "./us-gov-banner";
-
-describe("USGovBanner", () => {
-	describe("Accessibility", () => {
-		test("banner text is readable", async () => {
-			render(<USGovBanner />);
-
-			await expect
-				.element(
-					page.getByText("An official website of the United States government"),
-				)
-				.toBeInTheDocument();
-		});
-
-		test("flag icon is hidden from screen readers", async () => {
-			render(<USGovBanner data-testid="banner" />);
-
-			// The default flag SVG has aria-hidden="true"
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toBeInTheDocument();
-
-			// Verify the SVG is present but decorative
-			const svg = banner.element().querySelector("svg");
-			expect(svg?.getAttribute("aria-hidden")).toBe("true");
-		});
-
-		test("custom text is readable", async () => {
-			render(<USGovBanner text="Custom government message" />);
-
-			await expect
-				.element(page.getByText("Custom government message"))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Props", () => {
-		test("renders default text when no text prop provided", async () => {
-			render(<USGovBanner />);
-
-			await expect
-				.element(
-					page.getByText("An official website of the United States government"),
-				)
-				.toBeInTheDocument();
-		});
-
-		test("renders custom text when provided", async () => {
-			render(<USGovBanner text="An official California website" />);
-
-			await expect
-				.element(page.getByText("An official California website"))
-				.toBeInTheDocument();
-		});
-
-		test("renders custom flag icon when provided", async () => {
-			render(
-				<USGovBanner flagIcon={<span data-testid="custom-icon">🏛️</span>} />,
-			);
-
-			await expect.element(page.getByTestId("custom-icon")).toBeInTheDocument();
-		});
-
-		test("supports custom className", async () => {
-			render(<USGovBanner className="custom-banner" data-testid="banner" />);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toHaveClass(/custom-banner/);
-		});
-
-		test("spreads additional props", async () => {
-			render(
-				<USGovBanner data-testid="banner" aria-label="Government banner" />,
-			);
-
-			const banner = page.getByTestId("banner");
-			await expect
-				.element(banner)
-				.toHaveAttribute("aria-label", "Government banner");
-		});
-	});
-
-	describe("Styling", () => {
-		test("has light background by default", async () => {
-			render(<USGovBanner data-testid="banner" />);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toHaveClass(/bg-gray-50/);
-		});
-
-		test("is centered", async () => {
-			render(<USGovBanner data-testid="banner" />);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toHaveClass(/justify-center/);
-		});
-
-		test("spans full width", async () => {
-			render(<USGovBanner data-testid="banner" />);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toHaveClass(/w-full/);
-		});
-	});
-});

package/src/components/organisms/us-gov-banner/us-gov-banner.visual.test.tsx

@@ -1,46 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { USGovBanner } from "./us-gov-banner";
-
-describe("USGovBanner Visual Regression", () => {
-	test("default banner renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(<USGovBanner data-testid="banner" />);
-
-		await expect(page.getByTestId("banner")).toMatchScreenshot(
-			"us-gov-banner-default",
-		);
-	});
-
-	test("banner with custom text renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(
-			<USGovBanner
-				data-testid="banner"
-				text="An official website of the State of California"
-			/>,
-		);
-
-		await expect(page.getByTestId("banner")).toMatchScreenshot(
-			"us-gov-banner-custom-text",
-		);
-	});
-
-	test("banner with custom flag icon renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(
-			<USGovBanner
-				data-testid="banner"
-				flagIcon={<span aria-hidden="true">🏛️</span>}
-			/>,
-		);
-
-		await expect(page.getByTestId("banner")).toMatchScreenshot(
-			"us-gov-banner-custom-icon",
-		);
-	});
-});

package/src/components/sections/banner/banner.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../../atoms/button";
-import { Banner } from ".";
-
-const meta: Meta<typeof Banner> = {
-	title: "Sections/Banner",
-	component: Banner,
-	parameters: {
-		layout: "fullscreen",
-	},
-	argTypes: {
-		heading: {
-			control: "text",
-			description: "The heading text displayed in the banner",
-		},
-		description: {
-			control: "text",
-			description: "The description text displayed below the heading",
-		},
-	},
-} as Meta<typeof Banner>;
-
-export default meta;
-type Story = StoryObj<typeof Banner>;
-
-export const Playground: Story = {
-	render: (args) => <Banner {...args} />,
-};
-Playground.args = {
-	heading: "Important Update",
-	description:
-		"Use banners to surface short, important updates or a single key action without disrupting the main page content.",
-	action: <Button>Learn More</Button>,
-};
-
-// =============================================================================
-// Default
-// =============================================================================
-
-/**
- * Default banner with heading, description, and action button.
- * Responsive across all breakpoints.
- */
-export const Default: Story = {
-	render: () => (
-		<Banner
-			heading="Important Update"
-			description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
-			action={<Button>Learn More</Button>}
-		/>
-	),
-};
-
-/**
- * Banner without an action button.
- */
-export const WithoutAction: Story = {
-	render: () => (
-		<Banner
-			heading="Announcement"
-			description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
-		/>
-	),
-};
-
-// =============================================================================
-// Responsive Variants
-// =============================================================================
-
-/**
- * Desktop viewport (lg breakpoint, 1440px)
- * Horizontal layout with 72px padding
- */
-export const Desktop: Story = {
-	render: () => (
-		<Banner
-			heading="Desktop Banner"
-			description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
-			action={<Button>Learn More</Button>}
-		/>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-/**
- * Tablet viewport (md breakpoint, 768px)
- * Horizontal layout with 56px padding
- */
-export const Tablet: Story = {
-	render: () => (
-		<Banner
-			heading="Tablet Banner"
-			description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
-			action={<Button>Learn More</Button>}
-		/>
-	),
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-/**
- * Mobile viewport (sm breakpoint, 320px)
- * Stacked layout with 20x32px padding
- */
-export const Mobile: Story = {
-	render: () => (
-		<Banner
-			heading="Mobile Banner"
-			description="Use banners to surface short, important updates or a single key action without disruption."
-			action={<Button size="sm">Learn More</Button>}
-		/>
-	),
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Examples
-// =============================================================================
-
-/**
- * Banner with a longer description that wraps
- */
-export const LongDescription: Story = {
-	render: () => (
-		<Banner
-			heading="New Features Available"
-			description="We've made significant improvements to our platform including enhanced security features, faster load times, improved accessibility across all components, and a redesigned dashboard experience. Check out the documentation for more details on how to take advantage of these updates."
-			action={<Button>View Documentation</Button>}
-		/>
-	),
-};
-
-/**
- * Banner with custom styling
- */
-export const CustomBackground: Story = {
-	render: () => (
-		<Banner
-			heading="Custom Styled Banner"
-			description="This banner has a custom background color applied via className."
-			action={<Button variant="secondary-outline">Action</Button>}
-			className="bg-gray-1000 text-gray-50 [&_h2]:text-gray-50 [&_p]:text-gray-200"
-		/>
-	),
-};