@nationaldesignstudio/react 0.5.1 → 0.5.3

package/src/components/sections/hero/hero.stories.tsx

@@ -1,397 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Hero, HeroBackground, HeroContent, HeroHeader } from ".";
-
-const meta: Meta<typeof Hero> = {
-	title: "Sections/Hero",
-	component: Hero,
-	parameters: {
-		layout: "fullscreen",
-	},
-	argTypes: {
-		variant: {
-			control: "select",
-			options: ["A1", "A2", "A3"],
-			description: "Hero variant controlling content alignment",
-		},
-		title: {
-			control: "text",
-			description: "The title text displayed in the hero",
-		},
-		background: {
-			control: "text",
-			description:
-				"Background color (hex/rgb) or use HeroBackground components",
-		},
-		overlayOpacity: {
-			control: { type: "range", min: 0, max: 1, step: 0.1 },
-			description: "Opacity of the overlay (0-1)",
-		},
-		overlayColor: {
-			control: "color",
-			description: "Color of the overlay",
-		},
-		borderRadius: {
-			control: "text",
-			description:
-				"Border radius for the hero container (e.g., '0 0 20px 20px')",
-		},
-	},
-} as Meta<typeof Hero>;
-
-export default meta;
-type Story = StoryObj<typeof Hero>;
-
-export const Playground: Story = {
-	render: (args) => <Hero {...args} />,
-};
-Playground.args = {
-	title: "Hero Title",
-	variant: "A1",
-	background: "#1a1a1a",
-};
-
-// =============================================================================
-// Variants
-// =============================================================================
-
-/**
- * A1 variant: Content aligned at the bottom of the hero.
- * This is the default variant.
- */
-export const A1: Story = {
-	render: () => <Hero variant="A1" title="Hero A1" />,
-};
-
-/**
- * A2 variant: Content aligned at the top of the hero.
- */
-export const A2: Story = {
-	render: () => <Hero variant="A2" title="Hero A2" />,
-};
-
-/**
- * A3 variant: Content centered vertically in the hero.
- */
-export const A3: Story = {
-	render: () => <Hero variant="A3" title="Hero A3" />,
-};
-
-// =============================================================================
-// Background Types
-// =============================================================================
-
-/**
- * Hero with solid color background using hex code
- */
-export const WithColorBackground: Story = {
-	render: () => (
-		<Hero variant="A1" title="Color Background" background="#2563eb" />
-	),
-};
-
-/**
- * Hero with background image using HeroBackground.Image
- */
-export const WithImageBackground: Story = {
-	render: () => (
-		<Hero
-			variant="A1"
-			title="Image Background"
-			background={
-				<HeroBackground.Image
-					src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
-					position="center"
-					alt="Earth from space"
-				/>
-			}
-			overlayOpacity={0.4}
-		/>
-	),
-};
-
-/**
- * Hero with HTML5 video background using HeroBackground.Video
- */
-export const WithVideoBackground: Story = {
-	render: () => (
-		<Hero
-			variant="A1"
-			title="Video Background"
-			background={
-				<HeroBackground.Video
-					src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
-					poster="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
-				/>
-			}
-			overlayOpacity={0.3}
-		/>
-	),
-};
-
-/**
- * Hero with Cloudflare Stream video background
- *
- * Note: Replace with a valid Cloudflare Stream video ID for actual use
- */
-export const WithCloudflareStream: Story = {
-	render: () => (
-		<Hero
-			variant="A1"
-			title="Stream Background"
-			background={
-				<HeroBackground.Stream
-					videoId="5d5bc37ffcf54c9b82e996823bffbb81"
-					muted
-					autoplay
-					loop
-				/>
-			}
-			overlayOpacity={0.4}
-		/>
-	),
-};
-
-// =============================================================================
-// Composition - Top Slot & Border Radius
-// =============================================================================
-
-/**
- * Mock banner component for story demonstration
- */
-const MockBanner = () => (
-	<div className="bg-gray-1200 px-16 py-8 text-center text-14 text-text-inverted">
-		An official website of the United States government
-	</div>
-);
-
-/**
- * Mock navigation component for story demonstration
- */
-const MockNavigation = () => (
-	<nav className="flex items-center justify-between px-56 py-16">
-		<div className="flex items-center gap-24">
-			<div className="size-48 rounded-full bg-gray-50" />
-			<div className="flex gap-24 text-14 text-text-inverted">
-				<span className="cursor-pointer hover:opacity-80">Link 1</span>
-				<span className="cursor-pointer hover:opacity-80">Link 2</span>
-			</div>
-		</div>
-		<div className="text-14 text-text-inverted">Actions</div>
-	</nav>
-);
-
-/**
- * Hero with top slot containing a banner
- */
-export const WithTopSlot: Story = {
-	render: () => (
-		<Hero
-			variant="A1"
-			title="Hero with Top Slot"
-			background="#1a1a1a"
-			top={<MockBanner />}
-		/>
-	),
-};
-
-/**
- * Hero with rounded bottom corners
- */
-export const WithRoundedCorners: Story = {
-	render: () => (
-		<div className="bg-bg-page p-32">
-			<Hero
-				variant="A1"
-				title="Rounded Corners"
-				background="#1a1a1a"
-				borderRadius="0 0 20px 20px"
-			/>
-		</div>
-	),
-};
-
-/**
- * Hero with both top slot and rounded corners
- */
-export const WithTopAndRoundedCorners: Story = {
-	render: () => (
-		<div className="bg-bg-page">
-			<Hero
-				variant="A1"
-				title="Full Composition"
-				background={
-					<HeroBackground.Image
-						src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
-						position="center"
-					/>
-				}
-				overlayOpacity={0.5}
-				borderRadius="0 0 20px 20px"
-				top={
-					<>
-						<MockBanner />
-						<MockNavigation />
-					</>
-				}
-			>
-				<p className="mt-16 max-w-[560px] text-20 text-text-inverted">
-					A subtitle or description can be added as children
-				</p>
-			</Hero>
-		</div>
-	),
-};
-
-// =============================================================================
-// Sub-components
-// =============================================================================
-
-/**
- * Using Hero.Header and Hero.Content sub-components directly
- * for more control over the layout
- */
-export const UsingSubComponents: Story = {
-	render: () => (
-		<section className="relative flex min-h-[80vh] flex-col bg-gray-1200">
-			<HeroHeader>
-				<MockBanner />
-				<MockNavigation />
-			</HeroHeader>
-			<HeroContent className="flex-1 justify-end">
-				<h1 className="text-64 font-medium text-text-inverted lg:text-128">
-					Custom Layout
-				</h1>
-				<p className="mt-16 text-20 text-text-inverted">
-					Using HeroHeader and HeroContent sub-components
-				</p>
-			</HeroContent>
-		</section>
-	),
-};
-
-// =============================================================================
-// Responsive Variants - A1 (Content at bottom)
-// =============================================================================
-
-export const A1Desktop: Story = {
-	render: () => <Hero variant="A1" title="Hero A1" />,
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const A1Tablet: Story = {
-	render: () => <Hero variant="A1" title="Hero A1" />,
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const A1Mobile: Story = {
-	render: () => <Hero variant="A1" title="Hero A1" />,
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Responsive Variants - A2 (Content at top)
-// =============================================================================
-
-export const A2Desktop: Story = {
-	render: () => <Hero variant="A2" title="Hero A2" />,
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const A2Tablet: Story = {
-	render: () => <Hero variant="A2" title="Hero A2" />,
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const A2Mobile: Story = {
-	render: () => <Hero variant="A2" title="Hero A2" />,
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Responsive Variants - A3 (Content centered)
-// =============================================================================
-
-export const A3Desktop: Story = {
-	render: () => <Hero variant="A3" title="Hero A3" />,
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const A3Tablet: Story = {
-	render: () => <Hero variant="A3" title="Hero A3" />,
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const A3Mobile: Story = {
-	render: () => <Hero variant="A3" title="Hero A3" />,
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Examples
-// =============================================================================
-
-export const WithLongTitle: Story = {
-	render: () => <Hero title="A Much Longer Hero Title That Wraps" />,
-};
-
-export const WithCustomClassName: Story = {
-	render: () => <Hero title="Custom Background" className="bg-blue-600" />,
-};
-
-/**
- * Hero with image and high overlay for better text contrast
- */
-export const WithHighOverlay: Story = {
-	render: () => (
-		<Hero
-			variant="A3"
-			title="High Contrast"
-			background={
-				<HeroBackground.Image
-					src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80"
-					position="center bottom"
-				/>
-			}
-			overlayOpacity={0.7}
-			overlayColor="#000000"
-		/>
-	),
-};
-
-/**
- * Hero with gradient-style overlay color
- */
-export const WithColoredOverlay: Story = {
-	render: () => (
-		<Hero
-			variant="A1"
-			title="Tinted Overlay"
-			background={
-				<HeroBackground.Image
-					src="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1920&q=80"
-					position="center"
-				/>
-			}
-			overlayOpacity={0.5}
-			overlayColor="#1e3a5f"
-		/>
-	),
-};

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

@@ -1,138 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Hero } from "./hero";
-
-describe("Hero", () => {
-	describe("Accessibility", () => {
-		test("renders as section landmark", async () => {
-			render(<Hero title="Test Hero" data-testid="hero" />);
-
-			// Section is a region landmark when it has an accessible name
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toBeInTheDocument();
-		});
-
-		test("title renders as h1 heading", async () => {
-			render(<Hero title="Hero Title" />);
-
-			await expect
-				.element(page.getByRole("heading", { level: 1, name: "Hero Title" }))
-				.toBeInTheDocument();
-		});
-
-		test("title is accessible to screen readers", async () => {
-			render(<Hero title="Accessible Title" />);
-
-			await expect
-				.element(page.getByText("Accessible Title"))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Props", () => {
-		test("renders with required title prop", async () => {
-			render(<Hero title="Required Title" />);
-
-			await expect
-				.element(page.getByText("Required Title"))
-				.toBeInTheDocument();
-		});
-
-		test("supports custom className", async () => {
-			render(
-				<Hero title="Custom" className="custom-class" data-testid="hero" />,
-			);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/custom-class/);
-		});
-
-		test("spreads additional props to section element", async () => {
-			render(
-				<Hero
-					title="Props Test"
-					data-testid="hero"
-					aria-label="Hero section"
-				/>,
-			);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveAttribute("aria-label", "Hero section");
-		});
-	});
-
-	describe("Styling", () => {
-		test("applies default background color when no background provided", async () => {
-			render(<Hero title="Default" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			// Uses semantic token bg-bg-page for default dark colorScheme
-			await expect.element(hero).toHaveClass(/bg-bg-page/);
-		});
-
-		test("applies minimum height for viewport coverage", async () => {
-			render(<Hero title="Responsive" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			// Uses min-h-[80vh] for all variants
-			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
-		});
-	});
-
-	describe("Variants", () => {
-		test("A1 variant applies flex column layout", async () => {
-			render(<Hero title="A1 Hero" variant="A1" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/flex-col/);
-		});
-
-		test("A1 variant is default when no variant specified", async () => {
-			render(<Hero title="Default Hero" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			// Default variant still applies min-height and flex layout
-			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
-			await expect.element(hero).toHaveClass(/flex-col/);
-		});
-
-		test("A2 variant applies flex column layout", async () => {
-			render(<Hero title="A2 Hero" variant="A2" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/flex-col/);
-		});
-
-		test("A3 variant applies flex column layout", async () => {
-			render(<Hero title="A3 Hero" variant="A3" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/flex-col/);
-		});
-
-		test("A1 variant maintains common styles", async () => {
-			render(<Hero title="A1 Hero" variant="A1" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/bg-bg-page/);
-			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
-		});
-
-		test("A2 variant maintains common styles", async () => {
-			render(<Hero title="A2 Hero" variant="A2" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/bg-bg-page/);
-			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
-		});
-
-		test("A3 variant maintains common styles", async () => {
-			render(<Hero title="A3 Hero" variant="A3" data-testid="hero" />);
-
-			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/bg-bg-page/);
-			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
-		});
-	});
-});

package/src/components/sections/hero/hero.visual.test.tsx

@@ -1,140 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Hero } from "./hero";
-
-describe("Hero Visual Regression", () => {
-	// =========================================================================
-	// Variant A1 (Content at bottom) - Default
-	// =========================================================================
-	describe("Variant A1", () => {
-		test("A1 desktop renders correctly", async () => {
-			await page.viewport(1440, 900);
-
-			render(<Hero data-testid="hero" variant="A1" title="Hero A1" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a1-desktop",
-			);
-		});
-
-		test("A1 tablet renders correctly", async () => {
-			await page.viewport(834, 700);
-
-			render(<Hero data-testid="hero" variant="A1" title="Hero A1" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a1-tablet",
-			);
-		});
-
-		test("A1 mobile renders correctly", async () => {
-			await page.viewport(393, 600);
-
-			render(<Hero data-testid="hero" variant="A1" title="Hero A1" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a1-mobile",
-			);
-		});
-	});
-
-	// =========================================================================
-	// Variant A2 (Content at top)
-	// =========================================================================
-	describe("Variant A2", () => {
-		test("A2 desktop renders correctly", async () => {
-			await page.viewport(1440, 900);
-
-			render(<Hero data-testid="hero" variant="A2" title="Hero A2" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a2-desktop",
-			);
-		});
-
-		test("A2 tablet renders correctly", async () => {
-			await page.viewport(834, 700);
-
-			render(<Hero data-testid="hero" variant="A2" title="Hero A2" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a2-tablet",
-			);
-		});
-
-		test("A2 mobile renders correctly", async () => {
-			await page.viewport(393, 600);
-
-			render(<Hero data-testid="hero" variant="A2" title="Hero A2" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a2-mobile",
-			);
-		});
-	});
-
-	// =========================================================================
-	// Variant A3 (Content centered)
-	// =========================================================================
-	describe("Variant A3", () => {
-		test("A3 desktop renders correctly", async () => {
-			await page.viewport(1440, 900);
-
-			render(<Hero data-testid="hero" variant="A3" title="Hero A3" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a3-desktop",
-			);
-		});
-
-		test("A3 tablet renders correctly", async () => {
-			await page.viewport(834, 700);
-
-			render(<Hero data-testid="hero" variant="A3" title="Hero A3" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a3-tablet",
-			);
-		});
-
-		test("A3 mobile renders correctly", async () => {
-			await page.viewport(393, 600);
-
-			render(<Hero data-testid="hero" variant="A3" title="Hero A3" />);
-
-			await expect(page.getByTestId("hero")).toMatchScreenshot(
-				"hero-a3-mobile",
-			);
-		});
-	});
-
-	// =========================================================================
-	// Additional tests
-	// =========================================================================
-	test("hero with long title renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(
-			<Hero data-testid="hero" title="A Much Longer Hero Title That Wraps" />,
-		);
-
-		await expect(page.getByTestId("hero")).toMatchScreenshot("hero-long-title");
-	});
-
-	test("hero with custom className renders correctly", async () => {
-		await page.viewport(1280, 800);
-
-		render(
-			<Hero
-				data-testid="hero"
-				title="Custom Background"
-				className="bg-blue-600"
-			/>,
-		);
-
-		await expect(page.getByTestId("hero")).toMatchScreenshot(
-			"hero-custom-class",
-		);
-	});
-});

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

@@ -1,23 +0,0 @@
-export {
-	DEFAULT_TITLE_TYPOGRAPHY,
-	Hero,
-	HeroBackground,
-	HeroBackgroundImage,
-	type HeroBackgroundImageProps,
-	HeroBackgroundStream,
-	type HeroBackgroundStreamProps,
-	HeroBackgroundVideo,
-	type HeroBackgroundVideoProps,
-	HeroContent,
-	type HeroContentProps,
-	HeroGradient,
-	type HeroGradientProps,
-	HeroHeader,
-	type HeroHeaderProps,
-	HeroOverlay,
-	type HeroOverlayProps,
-	type HeroProps,
-	heroContentVariants,
-	heroHeaderVariants,
-	heroVariants,
-} from "./hero";