@nationaldesignstudio/react 0.0.10 → 0.0.12

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

@@ -1,227 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-const cardVariants = cva("flex overflow-hidden rounded-[24px] bg-white", {
-	variants: {
-		layout: {
-			vertical: "w-full flex-col",
-			horizontal: "w-full flex-row",
-		},
-	},
-	defaultVariants: {
-		layout: "vertical",
-	},
-});
-
-export interface CardProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof cardVariants> {}
-
-/**
- * Card component for displaying content in a contained, scannable format.
- *
- * Layouts:
- * - vertical: Image on top, content below (default)
- * - horizontal: Image on left, content on right
- *
- * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
- */
-const Card = React.forwardRef<HTMLDivElement, CardProps>(
-	({ className, layout, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(cardVariants({ layout, className }))}
-				{...props}
-			/>
-		);
-	},
-);
-Card.displayName = "Card";
-
-export interface CardImageProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * The image source URL
-	 */
-	src?: string;
-	/**
-	 * Alt text for the image
-	 */
-	alt?: string;
-}
-
-/**
- * Card image area. For vertical layout, displays with 16:9 aspect ratio.
- * For horizontal layout, takes up ~40% width and stretches to content height.
- */
-const CardImage = React.forwardRef<HTMLDivElement, CardImageProps>(
-	({ className, src, alt = "", ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"relative shrink-0 bg-gray-500",
-					// Vertical: full width with aspect ratio
-					"aspect-video w-full",
-					// When in horizontal card (parent has flex-row), override
-					"[.flex-row>&]:aspect-auto [.flex-row>&]:w-2/5 [.flex-row>&]:self-stretch",
-					className,
-				)}
-				{...props}
-			>
-				{src && (
-					<img
-						src={src}
-						alt={alt}
-						className="absolute inset-0 size-full object-cover"
-					/>
-				)}
-			</div>
-		);
-	},
-);
-CardImage.displayName = "CardImage";
-
-export interface CardContentProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Card content container with proper padding and spacing.
- */
-const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn(
-					"flex w-full flex-1 flex-col gap-spacing-24 p-spacing-24",
-					className,
-				)}
-				{...props}
-			/>
-		);
-	},
-);
-CardContent.displayName = "CardContent";
-
-export interface CardEyebrowProps
-	extends React.HTMLAttributes<HTMLParagraphElement> {}
-
-/**
- * Optional eyebrow text above the card title.
- */
-const CardEyebrow = React.forwardRef<HTMLParagraphElement, CardEyebrowProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<p
-				ref={ref}
-				className={cn(
-					"typography-brand-large-caption-large text-gray-500",
-					className,
-				)}
-				{...props}
-			/>
-		);
-	},
-);
-CardEyebrow.displayName = "CardEyebrow";
-
-export interface CardTitleProps
-	extends React.HTMLAttributes<HTMLHeadingElement> {
-	/**
-	 * The heading level to render (h1-h6). Defaults to h3.
-	 */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}
-
-/**
- * Card title/heading. Use the `as` prop to change the heading level.
- */
-const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
-	({ className, as: Component = "h3", ...props }, ref) => {
-		return (
-			<Component
-				ref={ref}
-				className={cn(
-					"typography-brand-large-subheading-small text-gray-1100",
-					className,
-				)}
-				{...props}
-			/>
-		);
-	},
-);
-CardTitle.displayName = "CardTitle";
-
-export interface CardDescriptionProps
-	extends React.HTMLAttributes<HTMLParagraphElement> {}
-
-/**
- * Card body/description text.
- */
-const CardDescription = React.forwardRef<
-	HTMLParagraphElement,
-	CardDescriptionProps
->(({ className, ...props }, ref) => {
-	return (
-		<p
-			ref={ref}
-			className={cn(
-				"typography-brand-large-body-small text-gray-800",
-				className,
-			)}
-			{...props}
-		/>
-	);
-});
-CardDescription.displayName = "CardDescription";
-
-export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Container for card text content (eyebrow, title, description).
- */
-const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn("flex w-full flex-col gap-spacing-14", className)}
-				{...props}
-			/>
-		);
-	},
-);
-CardBody.displayName = "CardBody";
-
-export interface CardActionsProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Container for card action buttons.
- */
-const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				className={cn("flex gap-spacing-11", className)}
-				{...props}
-			/>
-		);
-	},
-);
-CardActions.displayName = "CardActions";
-
-export {
-	Card,
-	cardVariants,
-	CardImage,
-	CardContent,
-	CardEyebrow,
-	CardTitle,
-	CardDescription,
-	CardBody,
-	CardActions,
-};

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-[6px]">
-								<CardTitle>Card Title</CardTitle>
-								<CardDescription>
-									Use cards when citizens need to scan items at a glance.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="default" variant="charcoal">
-								Primary
-							</Button>
-							<Button size="default" variant="charcoalOutline">
-								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-[9px]">
-								<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="charcoal">
-								Primary
-							</Button>
-							<Button size="sm" variant="charcoalOutline">
-								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-[6px]">
-								<CardTitle>Card Without Image</CardTitle>
-								<CardDescription>
-									Cards can be used without images for text-focused content.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="default" variant="charcoal">
-								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-[6px]">
-								<CardTitle>Card Title</CardTitle>
-								<CardDescription>
-									The eyebrow is optional and can be omitted when not needed.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="default" variant="charcoal">
-								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-[6px]">
-								<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,19 +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,
-	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";