@nationaldesignstudio/react 0.0.7 → 0.0.9

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

@@ -0,0 +1,313 @@
+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

@@ -0,0 +1,190 @@
+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/);
+		});
+	});
+});