@nationaldesignstudio/react 0.0.17 → 0.0.19

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Hero, HeroBackground } from ".";
+import { Hero, HeroBackground, HeroContent, HeroHeader } from ".";
 
 const meta: Meta<typeof Hero> = {
 	title: "Sections/Hero",
@@ -30,6 +30,11 @@ const meta: Meta<typeof Hero> = {
 			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>;
 
@@ -146,6 +151,124 @@ export const WithCloudflareStream: Story = {
 	),
 };
 
+// =============================================================================
+// Composition - Top Slot & Border Radius
+// =============================================================================
+
+/**
+ * Mock banner component for story demonstration
+ */
+const MockBanner = () => (
+	<div className="bg-gray-1200 px-spacing-16 py-spacing-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-spacing-56 py-spacing-16">
+		<div className="flex items-center gap-spacing-24">
+			<div className="size-48 rounded-full bg-gray-50" />
+			<div className="flex gap-spacing-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-spacing-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-spacing-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-spacing-16 text-20 text-text-inverted">
+					Using HeroHeader and HeroContent sub-components
+				</p>
+			</HeroContent>
+		</section>
+	),
+};
+
 // =============================================================================
 // Responsive Variants - A1 (Content at bottom)
 // =============================================================================

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

@@ -63,73 +63,76 @@ describe("Hero", () => {
 	});
 
 	describe("Styling", () => {
-		test("applies default background color", async () => {
+		test("applies default background color when no background provided", async () => {
 			render(<Hero title="Default" data-testid="hero" />);
 
 			const hero = page.getByTestId("hero");
-			await expect.element(hero).toHaveClass(/bg-gray-1000/);
+			// Uses semantic token bg-bg-overlay for default background
+			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
 		});
 
-		test("applies responsive height classes", async () => {
+		test("applies minimum height for viewport coverage", async () => {
 			render(<Hero title="Responsive" data-testid="hero" />);
 
 			const hero = page.getByTestId("hero");
-			// Mobile height
-			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+			// Uses min-h-[80vh] for all variants
+			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
 		});
 	});
 
 	describe("Variants", () => {
-		test("A1 variant applies items-end alignment (default)", async () => {
+		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(/items-end/);
+			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");
-			await expect.element(hero).toHaveClass(/items-end/);
+			// 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 items-start alignment", async () => {
+		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(/items-start/);
+			await expect.element(hero).toHaveClass(/flex-col/);
 		});
 
-		test("A3 variant applies items-center alignment", async () => {
+		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(/items-center/);
+			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-gray-1000/);
-			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
+			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-gray-1000/);
-			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
+			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-gray-1000/);
-			await expect.element(hero).toHaveClass(/h-\[500px\]/);
+			await expect.element(hero).toHaveClass(/bg-bg-overlay/);
+			await expect.element(hero).toHaveClass(/min-h-\[80vh\]/);
 		});
 	});
 });