@nationaldesignstudio/react 0.0.10 → 0.0.11

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

@@ -1,317 +0,0 @@
-import { Dialog } from "@base-ui-components/react/dialog";
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-// Context for mobile menu state
-const NavbarContext = React.createContext<{
-	isMobileMenuOpen: boolean;
-	setIsMobileMenuOpen: (open: boolean) => void;
-}>({
-	isMobileMenuOpen: false,
-	setIsMobileMenuOpen: () => {},
-});
-
-export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {}
-
-/**
- * Main navigation bar container.
- * Provides responsive layout for brand, links, and actions.
- */
-const Navbar = React.forwardRef<HTMLElement, NavbarProps>(
-	({ className, children, ...props }, ref) => {
-		const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
-		const navRef = React.useRef<HTMLElement>(null);
-
-		// Set navbar height CSS variable for mobile menu positioning
-		React.useEffect(() => {
-			const updateHeight = () => {
-				if (navRef.current) {
-					const height = navRef.current.offsetHeight;
-					document.documentElement.style.setProperty(
-						"--navbar-height",
-						`${height}px`,
-					);
-				}
-			};
-
-			updateHeight();
-			window.addEventListener("resize", updateHeight);
-			return () => window.removeEventListener("resize", updateHeight);
-		}, []);
-
-		// Merge refs
-		const mergedRef = React.useCallback(
-			(node: HTMLElement | null) => {
-				(navRef as React.MutableRefObject<HTMLElement | null>).current = node;
-				if (typeof ref === "function") {
-					ref(node);
-				} else if (ref) {
-					ref.current = node;
-				}
-			},
-			[ref],
-		);
-
-		return (
-			<NavbarContext.Provider value={{ isMobileMenuOpen, setIsMobileMenuOpen }}>
-				<nav
-					ref={mergedRef}
-					className={cn("relative z-50 w-full bg-gray-50", className)}
-					{...props}
-				>
-					<div
-						className={cn(
-							"flex w-full items-center justify-between",
-							// Mobile
-							"px-spacing-20 py-spacing-8",
-							// Tablet
-							"md:px-spacing-32 md:py-spacing-16",
-							// Desktop
-							"xl:px-spacing-32 xl:py-spacing-24",
-						)}
-					>
-						{children}
-					</div>
-				</nav>
-			</NavbarContext.Provider>
-		);
-	},
-);
-Navbar.displayName = "Navbar";
-
-export interface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {
-	asChild?: boolean;
-}
-
-/**
- * Brand/logo area of the navbar.
- * Use asChild to render as a link.
- */
-const NavbarBrand = React.forwardRef<HTMLDivElement, NavbarBrandProps>(
-	({ className, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "div";
-		return <Comp ref={ref} className={cn("shrink-0", className)} {...props} />;
-	},
-);
-NavbarBrand.displayName = "NavbarBrand";
-
-export interface NavbarLinksProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Container for navigation links.
- * Centers links on desktop, hidden on mobile (use NavbarMobileMenu instead).
- */
-const NavbarLinks = React.forwardRef<HTMLDivElement, NavbarLinksProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn("hidden items-center gap-spacing-40 md:flex", className)}
-				{...props}
-			/>
-		);
-	},
-);
-NavbarLinks.displayName = "NavbarLinks";
-
-export interface NavbarLinkProps
-	extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-	asChild?: boolean;
-	active?: boolean;
-}
-
-/**
- * Individual navigation link.
- * Use asChild to render with a router Link component.
- */
-const NavbarLink = React.forwardRef<HTMLAnchorElement, NavbarLinkProps>(
-	({ className, asChild = false, active, ...props }, ref) => {
-		const Comp = asChild ? Slot : "a";
-		return (
-			<Comp
-				ref={ref}
-				className={cn(
-					"typography-brand-medium-link-small text-gray-900 transition-colors hover:text-gray-700",
-					active && "text-gray-1100",
-					className,
-				)}
-				{...props}
-			/>
-		);
-	},
-);
-NavbarLink.displayName = "NavbarLink";
-
-export interface NavbarActionsProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Container for navbar action items (search, menu button, etc).
- */
-const NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn("flex items-center gap-spacing-8", className)}
-				{...props}
-			/>
-		);
-	},
-);
-NavbarActions.displayName = "NavbarActions";
-
-export interface NavbarMobileMenuProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Mobile menu container that displays navigation links on mobile devices.
- * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.
- * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).
- */
-const NavbarMobileMenu = React.forwardRef<
-	HTMLDivElement,
-	NavbarMobileMenuProps
->(({ className, children, ...props }, ref) => {
-	const { isMobileMenuOpen, setIsMobileMenuOpen } =
-		React.useContext(NavbarContext);
-
-	return (
-		<Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
-			<Dialog.Portal>
-				<Dialog.Popup
-					ref={ref}
-					className={cn(
-						"fixed inset-0 z-50 bg-gray-50 md:hidden",
-						// Position below navbar
-						"pt-[calc(var(--navbar-height,60px)+1px)]",
-						// Smooth transition
-						"transition-opacity duration-200",
-						className,
-					)}
-					{...props}
-				>
-					<Dialog.Title className="sr-only">Navigation menu</Dialog.Title>
-					<div
-						className={cn(
-							"flex flex-col",
-							// Padding matching navbar
-							"px-spacing-20 py-spacing-16",
-							// Gap between links
-							"gap-spacing-8",
-						)}
-					>
-						{children}
-					</div>
-				</Dialog.Popup>
-			</Dialog.Portal>
-		</Dialog.Root>
-	);
-});
-NavbarMobileMenu.displayName = "NavbarMobileMenu";
-
-export interface NavbarMobileMenuButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	asChild?: boolean;
-}
-
-/**
- * Button to toggle the mobile menu.
- * Should be placed in NavbarActions on mobile.
- * Use asChild to render as a custom button component (e.g., IconButton).
- */
-const NavbarMobileMenuButton = React.forwardRef<
-	HTMLButtonElement,
-	NavbarMobileMenuButtonProps
->(({ className, asChild = false, children, ...props }, ref) => {
-	const { isMobileMenuOpen, setIsMobileMenuOpen } =
-		React.useContext(NavbarContext);
-
-	const handleClick = () => {
-		setIsMobileMenuOpen(!isMobileMenuOpen);
-	};
-
-	if (asChild) {
-		return (
-			<Slot
-				ref={ref}
-				aria-label="Toggle navigation menu"
-				aria-expanded={isMobileMenuOpen}
-				aria-controls="navbar-mobile-menu"
-				onClick={handleClick}
-				className={className}
-				{...props}
-			>
-				{children}
-			</Slot>
-		);
-	}
-
-	return (
-		<button
-			ref={ref}
-			type="button"
-			aria-label="Toggle navigation menu"
-			aria-expanded={isMobileMenuOpen}
-			aria-controls="navbar-mobile-menu"
-			onClick={handleClick}
-			className={cn("transition-colors", className)}
-			{...props}
-		>
-			{children}
-		</button>
-	);
-});
-NavbarMobileMenuButton.displayName = "NavbarMobileMenuButton";
-
-export interface NavbarMobileMenuLinkProps
-	extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-	asChild?: boolean;
-	active?: boolean;
-}
-
-/**
- * Navigation link for the mobile menu.
- * Automatically closes the mobile menu when clicked.
- * Use asChild to render with a router Link component.
- */
-const NavbarMobileMenuLink = React.forwardRef<
-	HTMLAnchorElement,
-	NavbarMobileMenuLinkProps
->(({ className, asChild = false, active, onClick, ...props }, ref) => {
-	const { setIsMobileMenuOpen } = React.useContext(NavbarContext);
-	const Comp = asChild ? Slot : "a";
-
-	const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-		setIsMobileMenuOpen(false);
-		onClick?.(event);
-	};
-
-	return (
-		<Comp
-			ref={ref}
-			className={cn(
-				"typography-brand-medium-link-medium text-gray-900 transition-colors hover:text-gray-700",
-				"py-spacing-8",
-				active && "text-gray-1100",
-				className,
-			)}
-			onClick={handleClick}
-			{...props}
-		/>
-	);
-});
-NavbarMobileMenuLink.displayName = "NavbarMobileMenuLink";
-
-export {
-	Navbar,
-	NavbarBrand,
-	NavbarLinks,
-	NavbarLink,
-	NavbarActions,
-	NavbarMobileMenu,
-	NavbarMobileMenuButton,
-	NavbarMobileMenuLink,
-};

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="charcoal">
-						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="charcoal">
-						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 +0,0 @@
-export { USGovBanner, type USGovBannerProps } 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.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-export interface USGovBannerProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Custom flag icon element. Defaults to a US flag SVG.
-	 */
-	flagIcon?: React.ReactNode;
-	/**
-	 * Banner text content
-	 * @default "An official website of the United States government"
-	 */
-	text?: string;
-}
-
-/**
- * US Government official website banner.
- * Displays the official government website notice with flag icon.
- * Commonly placed at the very top of government websites.
- */
-const USGovBanner = React.forwardRef<HTMLDivElement, USGovBannerProps>(
-	(
-		{
-			className,
-			flagIcon,
-			text = "An official website of the United States government",
-			...props
-		},
-		ref,
-	) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex w-full items-center justify-center bg-gray-50 py-spacing-12",
-					className,
-				)}
-				{...props}
-			>
-				<div className="flex items-center gap-spacing-8 opacity-70">
-					{flagIcon ?? <DefaultUSFlag />}
-					<p className="text-[11px] leading-[13px] tracking-[0.17px] text-gray-900">
-						{text}
-					</p>
-				</div>
-			</div>
-		);
-	},
-);
-USGovBanner.displayName = "USGovBanner";
-
-function DefaultUSFlag() {
-	return (
-		<svg
-			width="16"
-			height="12"
-			viewBox="0 0 16 12"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-		>
-			<path d="M0 0H16V12H0V0Z" fill="#212121" fillOpacity="0.1" />
-			<path
-				d="M0 0H16V0.923077H0V0ZM0 1.84615H16V2.76923H0V1.84615ZM0 3.69231H16V4.61538H0V3.69231ZM0 5.53846H16V6.46154H0V5.53846ZM0 7.38462H16V8.30769H0V7.38462ZM0 9.23077H16V10.1538H0V9.23077ZM0 11.0769H16V12H0V11.0769Z"
-				fill="#BF0A30"
-				fillOpacity="0.8"
-			/>
-			<path d="M0 0H8V6.46154H0V0Z" fill="#002868" fillOpacity="0.8" />
-		</svg>
-	);
-}
-
-export { USGovBanner };

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",
-		);
-	});
-});