@nationaldesignstudio/react 0.5.2 → 0.5.3

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

@@ -1,197 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { Button } from "../../atoms/button";
-import {
-	Card,
-	CardActions,
-	CardBody,
-	CardContent,
-	CardDescription,
-	CardEyebrow,
-	CardImage,
-	CardTitle,
-} from "./card";
-
-describe("Card Visual Regression", () => {
-	test("default vertical layout renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "418px", backgroundColor: "#1a1a1a", padding: "20px" }}
-			>
-				<Card data-testid="card">
-					<CardImage />
-					<CardContent>
-						<CardBody>
-							<CardEyebrow>Optional Eyebrow</CardEyebrow>
-							<div className="flex flex-col gap-6">
-								<CardTitle>Card Title</CardTitle>
-								<CardDescription>
-									Use cards when citizens need to scan items at a glance.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="md" variant="primary">
-								Primary
-							</Button>
-							<Button size="md" variant="primary-outline">
-								Secondary
-							</Button>
-						</CardActions>
-					</CardContent>
-				</Card>
-			</div>,
-		);
-
-		await expect(page.getByTestId("card")).toMatchScreenshot(
-			"card-default-vertical",
-		);
-	});
-
-	test("horizontal layout renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "700px", backgroundColor: "#1a1a1a", padding: "20px" }}
-			>
-				<Card layout="horizontal" data-testid="card">
-					<CardImage />
-					<CardContent>
-						<CardBody>
-							<CardEyebrow>Eyebrow</CardEyebrow>
-							<div className="flex flex-col gap-8">
-								<CardTitle>
-									Cards can support multi line headings easily.
-								</CardTitle>
-								<CardDescription>
-									Use cards when citizens need to scan items at a glance.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="sm" variant="primary">
-								Primary
-							</Button>
-							<Button size="sm" variant="primary-outline">
-								Secondary
-							</Button>
-						</CardActions>
-					</CardContent>
-				</Card>
-			</div>,
-		);
-
-		await expect(page.getByTestId("card")).toMatchScreenshot("card-horizontal");
-	});
-
-	test("without image renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "418px", backgroundColor: "#1a1a1a", padding: "20px" }}
-			>
-				<Card data-testid="card">
-					<CardContent>
-						<CardBody>
-							<CardEyebrow>Category</CardEyebrow>
-							<div className="flex flex-col gap-6">
-								<CardTitle>Card Without Image</CardTitle>
-								<CardDescription>
-									Cards can be used without images for text-focused content.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="md" variant="primary">
-								Learn More
-							</Button>
-						</CardActions>
-					</CardContent>
-				</Card>
-			</div>,
-		);
-
-		await expect(page.getByTestId("card")).toMatchScreenshot(
-			"card-without-image",
-		);
-	});
-
-	test("without eyebrow renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "418px", backgroundColor: "#1a1a1a", padding: "20px" }}
-			>
-				<Card data-testid="card">
-					<CardImage />
-					<CardContent>
-						<CardBody>
-							<div className="flex flex-col gap-6">
-								<CardTitle>Card Title</CardTitle>
-								<CardDescription>
-									The eyebrow is optional and can be omitted when not needed.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="md" variant="primary">
-								Primary
-							</Button>
-						</CardActions>
-					</CardContent>
-				</Card>
-			</div>,
-		);
-
-		await expect(page.getByTestId("card")).toMatchScreenshot(
-			"card-without-eyebrow",
-		);
-	});
-
-	test("without actions renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "418px", backgroundColor: "#1a1a1a", padding: "20px" }}
-			>
-				<Card data-testid="card">
-					<CardImage />
-					<CardContent>
-						<CardBody>
-							<CardEyebrow>Information</CardEyebrow>
-							<div className="flex flex-col gap-6">
-								<CardTitle>Informational Card</CardTitle>
-								<CardDescription>
-									Cards without actions can be used for purely informational
-									content.
-								</CardDescription>
-							</div>
-						</CardBody>
-					</CardContent>
-				</Card>
-			</div>,
-		);
-
-		await expect(page.getByTestId("card")).toMatchScreenshot(
-			"card-without-actions",
-		);
-	});
-
-	test("minimal card renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "418px", backgroundColor: "#1a1a1a", padding: "20px" }}
-			>
-				<Card data-testid="card">
-					<CardContent>
-						<CardBody>
-							<CardTitle>Minimal Card</CardTitle>
-							<CardDescription>
-								A minimal card with just title and description.
-							</CardDescription>
-						</CardBody>
-					</CardContent>
-				</Card>
-			</div>,
-		);
-
-		await expect(page.getByTestId("card")).toMatchScreenshot("card-minimal");
-	});
-});

package/src/components/organisms/card/index.ts

@@ -1,26 +0,0 @@
-export {
-	Card,
-	CardActions,
-	type CardActionsProps,
-	CardBody,
-	type CardBodyProps,
-	CardContent,
-	type CardContentProps,
-	CardDescription,
-	type CardDescriptionProps,
-	CardEyebrow,
-	type CardEyebrowProps,
-	CardImage,
-	type CardImageProps,
-	type CardProps,
-	CardTitle,
-	type CardTitleProps,
-	cardActionsVariants,
-	cardBodyVariants,
-	cardContentVariants,
-	cardDescriptionVariants,
-	cardEyebrowVariants,
-	cardImageVariants,
-	cardTitleVariants,
-	cardVariants,
-} from "./card";

package/src/components/organisms/navbar/index.ts

@@ -1,18 +0,0 @@
-export {
-	Navbar,
-	NavbarActions,
-	type NavbarActionsProps,
-	NavbarBrand,
-	type NavbarBrandProps,
-	NavbarLink,
-	type NavbarLinkProps,
-	NavbarLinks,
-	type NavbarLinksProps,
-	NavbarMobileMenu,
-	NavbarMobileMenuButton,
-	type NavbarMobileMenuButtonProps,
-	NavbarMobileMenuLink,
-	type NavbarMobileMenuLinkProps,
-	type NavbarMobileMenuProps,
-	type NavbarProps,
-} from "./navbar";

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