@nationaldesignstudio/react 0.0.10 → 0.0.11

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

@@ -1,313 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconButton } from "../../atoms/button/icon-button";
-import { USGovBanner } from "../us-gov-banner";
-import {
-	Navbar,
-	NavbarActions,
-	NavbarBrand,
-	NavbarLink,
-	NavbarLinks,
-	NavbarMobileMenu,
-	NavbarMobileMenuButton,
-	NavbarMobileMenuLink,
-} from ".";
-
-const meta: Meta<typeof Navbar> = {
-	title: "Organisms/Navbar",
-	component: Navbar,
-	parameters: {
-		layout: "fullscreen",
-	},
-} as Meta<typeof Navbar>;
-
-export default meta;
-type Story = StoryObj<typeof Navbar>;
-
-const SearchIcon = () => (
-	<svg
-		width="17"
-		height="17"
-		viewBox="0 0 17 17"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.5" />
-		<path
-			d="M11 11L15 15"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-		/>
-	</svg>
-);
-
-const MenuIcon = () => (
-	<svg
-		width="20"
-		height="20"
-		viewBox="0 0 20 20"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M3 5H17M3 10H17M3 15H17"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-		/>
-	</svg>
-);
-
-const BrandPlaceholder = () => (
-	<div className="size-[46px] rounded-[8px] bg-gray-300" />
-);
-
-// =============================================================================
-// Default
-// =============================================================================
-
-export const Default: Story = {
-	render: () => (
-		<Navbar>
-			<NavbarBrand>
-				<BrandPlaceholder />
-			</NavbarBrand>
-			<NavbarLinks>
-				<NavbarLink href="#">Link</NavbarLink>
-				<NavbarLink href="#">Link</NavbarLink>
-				<NavbarLink href="#">Link</NavbarLink>
-				<NavbarLink href="#">Link</NavbarLink>
-				<NavbarLink href="#">Link</NavbarLink>
-				<NavbarLink href="#">Link</NavbarLink>
-				<NavbarLink href="#">Link</NavbarLink>
-			</NavbarLinks>
-			<NavbarActions>
-				<IconButton variant="ghost" size="lg" aria-label="Search">
-					<SearchIcon />
-				</IconButton>
-			</NavbarActions>
-		</Navbar>
-	),
-};
-
-// =============================================================================
-// With US Gov Banner
-// =============================================================================
-
-export const WithUSGovBanner: Story = {
-	render: () => (
-		<div className="flex w-full flex-col">
-			<USGovBanner />
-			<Navbar>
-				<NavbarBrand>
-					<BrandPlaceholder />
-				</NavbarBrand>
-				<NavbarLinks>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-				</NavbarLinks>
-				<NavbarActions>
-					<IconButton variant="ivoryOutlineQuiet" size="lg" aria-label="Search">
-						<SearchIcon />
-					</IconButton>
-				</NavbarActions>
-			</Navbar>
-		</div>
-	),
-};
-
-// =============================================================================
-// Responsive Variants
-// =============================================================================
-
-export const Desktop: Story = {
-	render: () => (
-		<div className="flex w-full flex-col">
-			<USGovBanner />
-			<Navbar>
-				<NavbarBrand>
-					<BrandPlaceholder />
-				</NavbarBrand>
-				<NavbarLinks>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-				</NavbarLinks>
-				<NavbarActions>
-					<IconButton variant="ivoryOutlineQuiet" size="lg" aria-label="Search">
-						<SearchIcon />
-					</IconButton>
-				</NavbarActions>
-			</Navbar>
-		</div>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const Tablet: Story = {
-	render: () => (
-		<div className="flex w-full flex-col">
-			<USGovBanner />
-			<Navbar>
-				<NavbarBrand>
-					<BrandPlaceholder />
-				</NavbarBrand>
-				<NavbarLinks>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-				</NavbarLinks>
-				<NavbarActions>
-					<IconButton variant="ghost" size="default" aria-label="Search">
-						<SearchIcon />
-					</IconButton>
-				</NavbarActions>
-			</Navbar>
-		</div>
-	),
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const Mobile: Story = {
-	render: () => (
-		<div className="flex w-full flex-col">
-			<USGovBanner />
-			<Navbar>
-				<NavbarBrand>
-					<div className="size-[26px] rounded-[8px] bg-gray-300" />
-				</NavbarBrand>
-				<NavbarLinks>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-					<NavbarLink href="#">Link</NavbarLink>
-				</NavbarLinks>
-				<NavbarActions>
-					<NavbarMobileMenuButton asChild>
-						<IconButton variant="ghost" size="default" aria-label="Menu">
-							<MenuIcon />
-						</IconButton>
-					</NavbarMobileMenuButton>
-				</NavbarActions>
-				<NavbarMobileMenu>
-					<NavbarMobileMenuLink href="#">Home</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">About</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">Services</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">Resources</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">News</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">Careers</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">Contact</NavbarMobileMenuLink>
-				</NavbarMobileMenu>
-			</Navbar>
-		</div>
-	),
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// With Active Link
-// =============================================================================
-
-export const WithActiveLink: Story = {
-	render: () => (
-		<Navbar>
-			<NavbarBrand>
-				<BrandPlaceholder />
-			</NavbarBrand>
-			<NavbarLinks>
-				<NavbarLink href="#" active>
-					Home
-				</NavbarLink>
-				<NavbarLink href="#">About</NavbarLink>
-				<NavbarLink href="#">Services</NavbarLink>
-				<NavbarLink href="#">Contact</NavbarLink>
-			</NavbarLinks>
-			<NavbarActions>
-				<IconButton variant="ghost" size="lg" aria-label="Search">
-					<SearchIcon />
-				</IconButton>
-			</NavbarActions>
-		</Navbar>
-	),
-};
-
-// =============================================================================
-// Responsive with Mobile Menu
-// =============================================================================
-
-/**
- * Complete responsive navbar example.
- * - Desktop: Shows inline links
- * - Mobile: Shows hamburger menu that opens a full-screen navigation
- *
- * Resize the viewport or view in different viewport sizes to see the responsive behavior.
- */
-export const ResponsiveWithMobileMenu: Story = {
-	render: () => (
-		<div className="flex w-full flex-col">
-			<USGovBanner />
-			<Navbar>
-				<NavbarBrand>
-					<BrandPlaceholder />
-				</NavbarBrand>
-				<NavbarLinks>
-					<NavbarLink href="#" active>
-						Home
-					</NavbarLink>
-					<NavbarLink href="#">About</NavbarLink>
-					<NavbarLink href="#">Services</NavbarLink>
-					<NavbarLink href="#">Resources</NavbarLink>
-					<NavbarLink href="#">Contact</NavbarLink>
-				</NavbarLinks>
-				<NavbarActions>
-					<IconButton
-						variant="ghost"
-						size="lg"
-						aria-label="Search"
-						className="hidden md:flex"
-					>
-						<SearchIcon />
-					</IconButton>
-					<NavbarMobileMenuButton asChild>
-						<IconButton variant="ghost" size="default" aria-label="Menu">
-							<MenuIcon />
-						</IconButton>
-					</NavbarMobileMenuButton>
-				</NavbarActions>
-				<NavbarMobileMenu>
-					<NavbarMobileMenuLink href="#" active>
-						Home
-					</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">About</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">Services</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">Resources</NavbarMobileMenuLink>
-					<NavbarMobileMenuLink href="#">Contact</NavbarMobileMenuLink>
-				</NavbarMobileMenu>
-			</Navbar>
-		</div>
-	),
-};

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/);
-		});
-	});
-});