@nationaldesignstudio/react 0.0.14 → 0.0.16

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

@@ -0,0 +1,274 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Hero, HeroBackground } 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",
+		},
+	},
+} 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}
+		/>
+	),
+};
+
+// =============================================================================
+// 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

@@ -0,0 +1,135 @@
+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", async () => {
+			render(<Hero title="Default" data-testid="hero" />);
+
+			const hero = page.getByTestId("hero");
+			await expect.element(hero).toHaveClass(/bg-gray-1000/);
+		});
+
+		test("applies responsive height classes", async () => {
+			render(<Hero title="Responsive" data-testid="hero" />);
+
+			const hero = page.getByTestId("hero");
+			// Mobile height
+			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+		});
+	});
+
+	describe("Variants", () => {
+		test("A1 variant applies items-end alignment (default)", async () => {
+			render(<Hero title="A1 Hero" variant="A1" data-testid="hero" />);
+
+			const hero = page.getByTestId("hero");
+			await expect.element(hero).toHaveClass(/items-end/);
+		});
+
+		test("A1 variant is default when no variant specified", async () => {
+			render(<Hero title="Default Hero" data-testid="hero" />);
+
+			const hero = page.getByTestId("hero");
+			await expect.element(hero).toHaveClass(/items-end/);
+		});
+
+		test("A2 variant applies items-start alignment", async () => {
+			render(<Hero title="A2 Hero" variant="A2" data-testid="hero" />);
+
+			const hero = page.getByTestId("hero");
+			await expect.element(hero).toHaveClass(/items-start/);
+		});
+
+		test("A3 variant applies items-center alignment", async () => {
+			render(<Hero title="A3 Hero" variant="A3" data-testid="hero" />);
+
+			const hero = page.getByTestId("hero");
+			await expect.element(hero).toHaveClass(/items-center/);
+		});
+
+		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-gray-1000/);
+			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+		});
+
+		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-gray-1000/);
+			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+		});
+
+		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-gray-1000/);
+			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+		});
+	});
+});