@nationaldesignstudio/react 0.0.7 → 0.0.8

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

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

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

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

@@ -0,0 +1,18 @@
+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";