@nationaldesignstudio/react 0.5.1 → 0.5.3

package/src/components/sections/banner/banner.test.tsx

@@ -1,185 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Banner } from "./banner";
-
-describe("Banner", () => {
-	describe("Accessibility", () => {
-		test("renders as section landmark", async () => {
-			render(
-				<Banner
-					heading="Test Banner"
-					description="Test description"
-					data-testid="banner"
-				/>,
-			);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toBeInTheDocument();
-		});
-
-		test("heading renders as h2", async () => {
-			render(
-				<Banner heading="Banner Heading" description="Test description" />,
-			);
-
-			await expect
-				.element(
-					page.getByRole("heading", { level: 2, name: "Banner Heading" }),
-				)
-				.toBeInTheDocument();
-		});
-
-		test("description is accessible to screen readers", async () => {
-			render(
-				<Banner heading="Test" description="Accessible description text" />,
-			);
-
-			await expect
-				.element(page.getByText("Accessible description text"))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Props", () => {
-		test("renders with required heading and description props", async () => {
-			render(
-				<Banner
-					heading="Required Heading"
-					description="Required description"
-				/>,
-			);
-
-			await expect
-				.element(page.getByText("Required Heading"))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByText("Required description"))
-				.toBeInTheDocument();
-		});
-
-		test("renders action when provided", async () => {
-			render(
-				<Banner
-					heading="With Action"
-					description="Description"
-					action={<button type="button">Click Me</button>}
-				/>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Click Me" }))
-				.toBeInTheDocument();
-		});
-
-		test("does not render action slot when not provided", async () => {
-			render(
-				<Banner
-					heading="Without Action"
-					description="Description"
-					data-testid="banner"
-				/>,
-			);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toBeInTheDocument();
-			// Only heading and description should be present
-			await expect.element(page.getByRole("button")).not.toBeInTheDocument();
-		});
-
-		test("supports custom className", async () => {
-			render(
-				<Banner
-					heading="Custom"
-					description="Description"
-					className="custom-class"
-					data-testid="banner"
-				/>,
-			);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toHaveClass(/custom-class/);
-		});
-
-		test("spreads additional props to section element", async () => {
-			render(
-				<Banner
-					heading="Props Test"
-					description="Description"
-					data-testid="banner"
-					aria-label="Banner section"
-				/>,
-			);
-
-			const banner = page.getByTestId("banner");
-			await expect
-				.element(banner)
-				.toHaveAttribute("aria-label", "Banner section");
-		});
-	});
-
-	describe("Styling", () => {
-		test("applies default background color", async () => {
-			render(
-				<Banner
-					heading="Default"
-					description="Description"
-					data-testid="banner"
-				/>,
-			);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toHaveClass(/bg-gray-50/);
-		});
-
-		test("applies col-full for grid alignment", async () => {
-			render(
-				<Banner
-					heading="Grid Test"
-					description="Description"
-					data-testid="banner"
-				/>,
-			);
-
-			const banner = page.getByTestId("banner");
-			await expect.element(banner).toHaveClass(/col-full/);
-		});
-
-		test("applies responsive padding classes", async () => {
-			render(
-				<Banner
-					heading="Responsive"
-					description="Description"
-					data-testid="banner"
-				/>,
-			);
-
-			const banner = page.getByTestId("banner");
-			// Mobile padding
-			await expect.element(banner).toHaveClass(/px-20/);
-			await expect.element(banner).toHaveClass(/py-32/);
-		});
-	});
-
-	describe("Content", () => {
-		test("heading has correct text color", async () => {
-			render(<Banner heading="Styled Heading" description="Description" />);
-
-			const heading = page.getByRole("heading", { level: 2 });
-			await expect.element(heading).toHaveClass(/text-gray-900/);
-		});
-
-		test("description has correct text color", async () => {
-			render(
-				<Banner
-					heading="Test"
-					description="Styled description"
-					data-testid="banner"
-				/>,
-			);
-
-			const description = page.getByText("Styled description");
-			await expect.element(description).toHaveClass(/text-gray-800/);
-		});
-	});
-});

package/src/components/sections/banner/index.ts

@@ -1,2 +0,0 @@
-export type { BannerProps } from "./banner";
-export { Banner, bannerVariants } from "./banner";

package/src/components/sections/card-grid/card-grid.stories.tsx

@@ -1,351 +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 "../../organisms/card";
-import { CardGrid } from ".";
-
-const meta: Meta<typeof CardGrid> = {
-	title: "Sections/CardGrid",
-	component: CardGrid,
-	parameters: {
-		layout: "fullscreen",
-	},
-	argTypes: {
-		variant: {
-			control: "select",
-			options: ["A", "B"],
-			description:
-				"Layout variant: A = 3 cols on desktop, B = 2 cols on desktop",
-		},
-		title: {
-			control: "text",
-			description: "The title text displayed above the cards",
-		},
-	},
-} as Meta<typeof CardGrid>;
-
-export default meta;
-type Story = StoryObj<typeof CardGrid>;
-
-const SampleCard = ({
-	title,
-	description,
-}: {
-	title: string;
-	description: string;
-}) => (
-	<Card>
-		<CardImage src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=450&fit=crop" />
-		<CardContent>
-			<CardBody>
-				<CardEyebrow>Category</CardEyebrow>
-				<CardTitle>{title}</CardTitle>
-				<CardDescription>{description}</CardDescription>
-			</CardBody>
-			<CardActions>
-				<Button size="sm">Learn More</Button>
-			</CardActions>
-		</CardContent>
-	</Card>
-);
-
-const PlaceholderCard = ({
-	title,
-	description,
-}: {
-	title: string;
-	description: string;
-}) => (
-	<Card>
-		<CardImage>
-			<div className="absolute inset-0 bg-gray-200 flex items-center justify-center">
-				<span className="text-gray-500 typography-body-small">
-					Image Placeholder
-				</span>
-			</div>
-		</CardImage>
-		<CardContent>
-			<CardBody>
-				<CardEyebrow>Category</CardEyebrow>
-				<CardTitle>{title}</CardTitle>
-				<CardDescription>{description}</CardDescription>
-			</CardBody>
-			<CardActions>
-				<Button size="sm">Learn More</Button>
-			</CardActions>
-		</CardContent>
-	</Card>
-);
-
-const sampleCards = [
-	<PlaceholderCard
-		key="1"
-		title="First Card"
-		description="This is a sample card description that provides context about the content."
-	/>,
-	<PlaceholderCard
-		key="2"
-		title="Second Card"
-		description="Another card with a brief description explaining its purpose."
-	/>,
-	<PlaceholderCard
-		key="3"
-		title="Third Card"
-		description="A third card to demonstrate the grid layout behavior."
-	/>,
-	<PlaceholderCard
-		key="4"
-		title="Fourth Card"
-		description="The final card in this example grid layout."
-	/>,
-];
-
-export const Playground: Story = {
-	render: (args) => <CardGrid {...args} />,
-};
-Playground.args = {
-	variant: "A",
-	title: "Featured Content",
-	cards: sampleCards,
-};
-
-// =============================================================================
-// Variants
-// =============================================================================
-
-/**
- * Variant A: 3 columns on desktop, 2 on tablet, 1 on mobile
- */
-export const VariantA: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Our Services"
-			cards={sampleCards.slice(0, 4)}
-		/>
-	),
-};
-
-/**
- * Variant B: 2 columns on desktop/tablet, 1 on mobile
- */
-export const VariantB: Story = {
-	render: () => (
-		<CardGrid
-			variant="B"
-			title="Featured Articles"
-			cards={sampleCards.slice(0, 4)}
-		/>
-	),
-};
-
-export const VariantBDesktop: Story = {
-	render: () => (
-		<CardGrid
-			variant="B"
-			title="Desktop View (Variant B)"
-			cards={[
-				<PlaceholderCard
-					key="1"
-					title="Card One"
-					description="Variant B displays 2 columns on desktop instead of 3."
-				/>,
-				<PlaceholderCard
-					key="2"
-					title="Card Two"
-					description="This is useful for larger card layouts or featured content."
-				/>,
-			]}
-		/>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Responsive Variants
-// =============================================================================
-
-export const VariantADesktop: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Desktop View"
-			cards={[
-				<PlaceholderCard
-					key="1"
-					title="Card One"
-					description="On desktop (lg, 1440px), cards are displayed in a 2-column grid with 12 columns each."
-				/>,
-				<PlaceholderCard
-					key="2"
-					title="Card Two"
-					description="The layout uses 128px vertical padding and 64px gap between title and cards."
-				/>,
-				<PlaceholderCard
-					key="3"
-					title="Card Three"
-					description="The layout uses 128px vertical padding and 64px gap between title and cards."
-				/>,
-			]}
-		/>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const VariantATablet: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Tablet View"
-			cards={[
-				<PlaceholderCard
-					key="1"
-					title="Card One"
-					description="On tablet (md, 768px), cards are in a 2-column layout with 56px gap from title."
-				/>,
-				<PlaceholderCard
-					key="2"
-					title="Card Two"
-					description="Cards maintain the 12/12 column split on tablet viewports."
-				/>,
-			]}
-		/>
-	),
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const VariantAMobile: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Mobile View"
-			cards={[
-				<PlaceholderCard
-					key="1"
-					title="Card One"
-					description="On mobile (sm, 320px), cards stack in a single column."
-				/>,
-				<PlaceholderCard
-					key="2"
-					title="Card Two"
-					description="Each card takes full width on mobile devices."
-				/>,
-			]}
-		/>
-	),
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Examples
-// =============================================================================
-
-/**
- * Two cards in grid
- */
-export const TwoCards: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Two Card Layout"
-			cards={sampleCards.slice(0, 2)}
-		/>
-	),
-};
-
-/**
- * Four cards in grid (2 rows)
- */
-export const FourCards: Story = {
-	render: () => (
-		<CardGrid variant="A" title="Four Card Layout" cards={sampleCards} />
-	),
-};
-
-/**
- * Six cards in grid (3 rows)
- */
-export const SixCards: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Six Card Layout"
-			cards={[
-				...sampleCards,
-				<PlaceholderCard
-					key="5"
-					title="Fifth Card"
-					description="Additional card to show multiple rows."
-				/>,
-				<PlaceholderCard
-					key="6"
-					title="Sixth Card"
-					description="The grid handles any number of cards."
-				/>,
-			]}
-		/>
-	),
-};
-
-/**
- * With actual images
- */
-export const WithImages: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Featured Resources"
-			cards={[
-				<SampleCard
-					key="1"
-					title="Getting Started Guide"
-					description="Learn the basics and get up and running quickly with our comprehensive guide."
-				/>,
-				<SampleCard
-					key="2"
-					title="Best Practices"
-					description="Discover proven strategies and techniques to maximize your results."
-				/>,
-				<SampleCard
-					key="3"
-					title="Advanced Topics"
-					description="Deep dive into advanced features and configurations."
-				/>,
-				<SampleCard
-					key="4"
-					title="Case Studies"
-					description="See how others have achieved success with real-world examples."
-				/>,
-			]}
-		/>
-	),
-};
-
-/**
- * Odd number of cards
- */
-export const OddNumberOfCards: Story = {
-	render: () => (
-		<CardGrid
-			variant="A"
-			title="Three Card Layout"
-			cards={sampleCards.slice(0, 3)}
-		/>
-	),
-};

package/src/components/sections/card-grid/index.ts

@@ -1 +0,0 @@
-export { CardGrid, type CardGridProps, cardGridVariants } from "./card-grid";