@nationaldesignstudio/react 0.0.10 → 0.0.12

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

@@ -1,293 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../../atoms/button";
-import {
-	Card,
-	CardActions,
-	CardBody,
-	CardContent,
-	CardDescription,
-	CardEyebrow,
-	CardImage,
-	CardTitle,
-} from ".";
-
-const meta: Meta<typeof Card> = {
-	title: "Organisms/Card",
-	component: Card,
-	parameters: {
-		layout: "centered",
-	},
-} as Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-// =============================================================================
-// Default
-// =============================================================================
-
-export const Default: Story = {
-	render: () => (
-		<div className="w-[418px]">
-			<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, either
-								to jump to a more detailed page or absorb short information.
-							</CardDescription>
-						</div>
-					</CardBody>
-					<CardActions>
-						<Button size="default" variant="charcoal">
-							Primary
-						</Button>
-						<Button size="default" variant="charcoalOutline">
-							Secondary
-						</Button>
-					</CardActions>
-				</CardContent>
-			</Card>
-		</div>
-	),
-};
-
-// =============================================================================
-// Layouts
-// =============================================================================
-
-export const Vertical: Story = {
-	render: () => (
-		<div className="w-[418px]">
-			<Card layout="vertical">
-				<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, either
-								to jump to a more detailed page or absorb short information.
-							</CardDescription>
-						</div>
-					</CardBody>
-					<CardActions>
-						<Button size="default" variant="charcoal">
-							Primary
-						</Button>
-						<Button size="default" variant="charcoalOutline">
-							Secondary
-						</Button>
-					</CardActions>
-				</CardContent>
-			</Card>
-		</div>
-	),
-};
-
-export const Horizontal: Story = {
-	render: () => (
-		<div className="w-[700px]">
-			<Card layout="horizontal">
-				<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, either
-								to jump to a more detailed page or absorb short information.
-							</CardDescription>
-						</div>
-					</CardBody>
-					<CardActions>
-						<Button size="sm" variant="charcoal">
-							Primary
-						</Button>
-						<Button size="sm" variant="charcoalOutline">
-							Secondary
-						</Button>
-					</CardActions>
-				</CardContent>
-			</Card>
-		</div>
-	),
-};
-
-// =============================================================================
-// Variations
-// =============================================================================
-
-export const WithoutImage: Story = {
-	render: () => (
-		<div className="w-[418px]">
-			<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>
-	),
-};
-
-export const WithoutEyebrow: Story = {
-	render: () => (
-		<div className="w-[418px]">
-			<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>
-	),
-};
-
-export const WithoutActions: Story = {
-	render: () => (
-		<div className="w-[418px]">
-			<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 that doesn't require user interaction.
-							</CardDescription>
-						</div>
-					</CardBody>
-				</CardContent>
-			</Card>
-		</div>
-	),
-};
-
-export const Minimal: Story = {
-	render: () => (
-		<div className="w-[418px]">
-			<Card>
-				<CardContent>
-					<CardBody>
-						<CardTitle>Minimal Card</CardTitle>
-						<CardDescription>
-							A minimal card with just title and description.
-						</CardDescription>
-					</CardBody>
-				</CardContent>
-			</Card>
-		</div>
-	),
-};
-
-// =============================================================================
-// Grid Example
-// =============================================================================
-
-export const CardGrid: Story = {
-	render: () => (
-		<div className="grid max-w-[900px] grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-			{[1, 2, 3].map((i) => (
-				<Card key={i}>
-					<CardImage />
-					<CardContent>
-						<CardBody>
-							<CardEyebrow>Category {i}</CardEyebrow>
-							<div className="flex flex-col gap-[6px]">
-								<CardTitle>Card Title {i}</CardTitle>
-								<CardDescription>
-									Brief description of the card content goes here.
-								</CardDescription>
-							</div>
-						</CardBody>
-						<CardActions>
-							<Button size="sm" variant="charcoal">
-								Action
-							</Button>
-						</CardActions>
-					</CardContent>
-				</Card>
-			))}
-		</div>
-	),
-	parameters: {
-		layout: "padded",
-	},
-};
-
-// =============================================================================
-// Playground
-// =============================================================================
-
-export const Playground: Story = {
-	render: (args) => (
-		<div className="w-[418px]">
-			<Card {...args}>
-				<CardImage />
-				<CardContent>
-					<CardBody>
-						<CardEyebrow>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>
-	),
-};
-Playground.argTypes = {
-	layout: {
-		control: { type: "radio" },
-		options: ["vertical", "horizontal"],
-	},
-};
-Playground.args = {
-	layout: "vertical",
-};

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

@@ -1,245 +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 {
-	Card,
-	CardActions,
-	CardBody,
-	CardContent,
-	CardDescription,
-	CardEyebrow,
-	CardImage,
-	CardTitle,
-} from "./card";
-
-describe("Card", () => {
-	describe("Accessibility", () => {
-		test("CardTitle renders as h3 heading by default", async () => {
-			render(
-				<Card>
-					<CardContent>
-						<CardBody>
-							<CardTitle>Test Title</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			await expect
-				.element(page.getByRole("heading", { level: 3, name: "Test Title" }))
-				.toBeInTheDocument();
-		});
-
-		test("CardTitle supports as prop to change heading level", async () => {
-			render(
-				<Card>
-					<CardContent>
-						<CardBody>
-							<CardTitle as="h2">H2 Title</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			await expect
-				.element(page.getByRole("heading", { level: 2, name: "H2 Title" }))
-				.toBeInTheDocument();
-		});
-
-		test("CardImage renders img with alt text when src provided", async () => {
-			render(
-				<Card>
-					<CardImage
-						src="https://example.com/image.jpg"
-						alt="Test image description"
-					/>
-					<CardContent>
-						<CardBody>
-							<CardTitle>Card with Image</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			await expect
-				.element(page.getByRole("img", { name: "Test image description" }))
-				.toBeInTheDocument();
-		});
-
-		test("CardImage does not render img when no src provided", async () => {
-			render(
-				<Card>
-					<CardImage />
-					<CardContent>
-						<CardBody>
-							<CardTitle>Card without Image Source</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			// Should not have an img element
-			const images = page.getByRole("img");
-			await expect.element(images).not.toBeInTheDocument();
-		});
-
-		test("buttons in CardActions are accessible", async () => {
-			render(
-				<Card>
-					<CardContent>
-						<CardBody>
-							<CardTitle>Card with Actions</CardTitle>
-						</CardBody>
-						<CardActions>
-							<Button>Primary Action</Button>
-							<Button variant="charcoalOutline">Secondary Action</Button>
-						</CardActions>
-					</CardContent>
-				</Card>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Primary Action" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("button", { name: "Secondary Action" }))
-				.toBeInTheDocument();
-		});
-
-		test("Card structure is semantically correct", async () => {
-			render(
-				<Card data-testid="card">
-					<CardContent>
-						<CardBody>
-							<CardEyebrow>Eyebrow Text</CardEyebrow>
-							<CardTitle>Card Title</CardTitle>
-							<CardDescription>Card description text</CardDescription>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			// Verify all text content is present and readable
-			await expect.element(page.getByText("Eyebrow Text")).toBeInTheDocument();
-			await expect.element(page.getByText("Card Title")).toBeInTheDocument();
-			await expect
-				.element(page.getByText("Card description text"))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Layout Variants", () => {
-		test("vertical layout applies correct classes", async () => {
-			render(
-				<Card layout="vertical" data-testid="card">
-					<CardContent>
-						<CardBody>
-							<CardTitle>Vertical Card</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			const card = page.getByTestId("card");
-			await expect.element(card).toHaveClass(/flex-col/);
-		});
-
-		test("horizontal layout applies correct classes", async () => {
-			render(
-				<Card layout="horizontal" data-testid="card">
-					<CardContent>
-						<CardBody>
-							<CardTitle>Horizontal Card</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			const card = page.getByTestId("card");
-			await expect.element(card).toHaveClass(/flex-row/);
-		});
-
-		test("default layout is vertical", async () => {
-			render(
-				<Card data-testid="card">
-					<CardContent>
-						<CardBody>
-							<CardTitle>Default Card</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			const card = page.getByTestId("card");
-			await expect.element(card).toHaveClass(/flex-col/);
-		});
-	});
-
-	describe("Component Composition", () => {
-		test("renders complete card with all sub-components", async () => {
-			render(
-				<Card>
-					<CardImage src="https://example.com/test.jpg" alt="Test" />
-					<CardContent>
-						<CardBody>
-							<CardEyebrow>Category</CardEyebrow>
-							<CardTitle>Full Card Example</CardTitle>
-							<CardDescription>
-								This is a complete card with all components.
-							</CardDescription>
-						</CardBody>
-						<CardActions>
-							<Button>Action</Button>
-						</CardActions>
-					</CardContent>
-				</Card>,
-			);
-
-			await expect
-				.element(page.getByRole("img", { name: "Test" }))
-				.toBeInTheDocument();
-			await expect.element(page.getByText("Category")).toBeInTheDocument();
-			await expect
-				.element(page.getByRole("heading", { name: "Full Card Example" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByText("This is a complete card with all components."))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("button", { name: "Action" }))
-				.toBeInTheDocument();
-		});
-
-		test("renders minimal card with only required components", async () => {
-			render(
-				<Card>
-					<CardContent>
-						<CardBody>
-							<CardTitle>Minimal</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			await expect
-				.element(page.getByRole("heading", { name: "Minimal" }))
-				.toBeInTheDocument();
-		});
-
-		test("supports custom className on Card", async () => {
-			render(
-				<Card className="custom-class" data-testid="card">
-					<CardContent>
-						<CardBody>
-							<CardTitle>Custom Card</CardTitle>
-						</CardBody>
-					</CardContent>
-				</Card>,
-			);
-
-			const card = page.getByTestId("card");
-			await expect.element(card).toHaveClass(/custom-class/);
-		});
-	});
-});