@nationaldesignstudio/react 0.5.1 → 0.5.3

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

@@ -1,268 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { River } from "./river";
-
-const PlaceholderMedia = () => <div data-testid="media">Media</div>;
-
-describe("River", () => {
-	describe("Accessibility", () => {
-		test("renders as section landmark", async () => {
-			render(
-				<River
-					headline="Test Headline"
-					body="Test body"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					data-testid="river"
-				/>,
-			);
-
-			const river = page.getByTestId("river");
-			await expect.element(river).toBeInTheDocument();
-		});
-
-		test("headline renders as h2", async () => {
-			render(
-				<River
-					headline="River Headline"
-					body="Test body"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-				/>,
-			);
-
-			await expect
-				.element(
-					page.getByRole("heading", { level: 2, name: "River Headline" }),
-				)
-				.toBeInTheDocument();
-		});
-
-		test("body text is accessible", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Accessible body text"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByText("Accessible body text"))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Props", () => {
-		test("renders with required props", async () => {
-			render(
-				<River
-					headline="Required Headline"
-					body="Required body"
-					primaryAction={<button type="button">Primary</button>}
-					media={<PlaceholderMedia />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByText("Required Headline"))
-				.toBeInTheDocument();
-			await expect.element(page.getByText("Required body")).toBeInTheDocument();
-			await expect
-				.element(page.getByRole("button", { name: "Primary" }))
-				.toBeInTheDocument();
-			await expect.element(page.getByTestId("media")).toBeInTheDocument();
-		});
-
-		test("renders secondary action when provided", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Primary</button>}
-					secondaryAction={<button type="button">Secondary</button>}
-					media={<PlaceholderMedia />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Primary" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("button", { name: "Secondary" }))
-				.toBeInTheDocument();
-		});
-
-		test("does not render secondary action when not provided", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Primary</button>}
-					media={<PlaceholderMedia />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Primary" }))
-				.toBeInTheDocument();
-			// Should only have one button
-			const buttons = page.getByRole("button");
-			await expect.element(buttons).toBeInTheDocument();
-		});
-
-		test("supports custom className", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					className="custom-class"
-					data-testid="river"
-				/>,
-			);
-
-			const river = page.getByTestId("river");
-			await expect.element(river).toHaveClass(/custom-class/);
-		});
-
-		test("spreads additional props to section element", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					data-testid="river"
-					aria-label="River section"
-				/>,
-			);
-
-			const river = page.getByTestId("river");
-			await expect
-				.element(river)
-				.toHaveAttribute("aria-label", "River section");
-		});
-	});
-
-	describe("Styling", () => {
-		test("applies col-full for grid alignment", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					data-testid="river"
-				/>,
-			);
-
-			const river = page.getByTestId("river");
-			await expect.element(river).toHaveClass(/col-full/);
-		});
-
-		test("applies responsive padding classes", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					data-testid="river"
-				/>,
-			);
-
-			const river = page.getByTestId("river");
-			// Mobile padding
-			await expect.element(river).toHaveClass(/px-20/);
-			await expect.element(river).toHaveClass(/pt-72/);
-			await expect.element(river).toHaveClass(/pb-20/);
-		});
-	});
-
-	describe("Variants", () => {
-		test("variant A is default", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					data-testid="river"
-				/>,
-			);
-
-			const river = page.getByTestId("river");
-			await expect.element(river).toBeInTheDocument();
-		});
-
-		test("variant A renders content before media", async () => {
-			render(
-				<River
-					variant="A"
-					headline="Test Headline"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					data-testid="river"
-				/>,
-			);
-
-			// Both should be present
-			await expect.element(page.getByText("Test Headline")).toBeInTheDocument();
-			await expect.element(page.getByTestId("media")).toBeInTheDocument();
-		});
-
-		test("variant B renders media before content", async () => {
-			render(
-				<River
-					variant="B"
-					headline="Test Headline"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-					data-testid="river"
-				/>,
-			);
-
-			// Both should be present
-			await expect.element(page.getByText("Test Headline")).toBeInTheDocument();
-			await expect.element(page.getByTestId("media")).toBeInTheDocument();
-		});
-	});
-
-	describe("Content", () => {
-		test("headline has correct styling", async () => {
-			render(
-				<River
-					headline="Styled Headline"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-				/>,
-			);
-
-			const headline = page.getByRole("heading", { level: 2 });
-			await expect.element(headline).toHaveClass(/typography-h4/);
-			await expect.element(headline).toHaveClass(/text-gray-900/);
-		});
-
-		test("body has correct styling", async () => {
-			render(
-				<River
-					headline="Test"
-					body="Styled body text"
-					primaryAction={<button type="button">Action</button>}
-					media={<PlaceholderMedia />}
-				/>,
-			);
-
-			const body = page.getByText("Styled body text");
-			await expect.element(body).toHaveClass(/typography-body-small/);
-			await expect.element(body).toHaveClass(/text-gray-800/);
-		});
-	});
-});

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

@@ -1 +0,0 @@
-export { Tout, type ToutProps } from "./tout";

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

@@ -1,171 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../../atoms/button";
-import { NdstudioFooter } from "../../atoms/ndstudio-footer";
-import { Tout } from ".";
-
-const meta: Meta<typeof Tout> = {
-	title: "Sections/Tout",
-	component: Tout,
-	parameters: {
-		layout: "fullscreen",
-	},
-	argTypes: {
-		headline: {
-			control: "text",
-			description: "The headline text",
-		},
-		body: {
-			control: "text",
-			description: "The body text",
-		},
-	},
-} as Meta<typeof Tout>;
-
-export default meta;
-type Story = StoryObj<typeof Tout>;
-
-const PlaceholderBackground = () => (
-	<div className="absolute inset-0 bg-gradient-to-br from-gray-300 to-gray-400" />
-);
-
-const ImageBackground = () => (
-	<img
-		src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1600&h=900&fit=crop"
-		alt=""
-		className="absolute inset-0 w-full h-full object-cover"
-	/>
-);
-
-export const Playground: Story = {
-	render: (args) => <Tout {...args} />,
-};
-Playground.args = {
-	headline: "Brand-Large/Headline/Small",
-	body: "A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action.",
-	primaryAction: <Button>Primary</Button>,
-	secondaryAction: <Button variant="secondary-outline">Secondary</Button>,
-	backgroundMedia: <PlaceholderBackground />,
-};
-
-// =============================================================================
-// Responsive Variants
-// =============================================================================
-
-export const Desktop: Story = {
-	render: () => (
-		<Tout
-			headline="Brand-Large/Headline/Small"
-			body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
-			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="secondary-outline">Secondary</Button>}
-			backgroundMedia={<PlaceholderBackground />}
-		/>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const Tablet: Story = {
-	render: () => (
-		<Tout
-			headline="Brand-Large/Headline/Small"
-			body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
-			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="secondary-outline">Secondary</Button>}
-			backgroundMedia={<PlaceholderBackground />}
-		/>
-	),
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const Mobile: Story = {
-	render: () => (
-		<Tout
-			headline="Brand-Large/Headline/Small"
-			body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
-			primaryAction={<Button size="sm">Primary</Button>}
-			secondaryAction={
-				<Button size="sm" variant="secondary-outline">
-					Secondary
-				</Button>
-			}
-			backgroundMedia={<PlaceholderBackground />}
-		/>
-	),
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Examples
-// =============================================================================
-
-/**
- * With actual background image
- */
-export const WithImage: Story = {
-	render: () => (
-		<Tout
-			headline="Work with Purpose"
-			body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
-			primaryAction={<Button>View Careers</Button>}
-			secondaryAction={<Button variant="secondary-outline">Learn More</Button>}
-			backgroundMedia={<ImageBackground />}
-		/>
-	),
-};
-
-/**
- * Without secondary action
- */
-export const SingleAction: Story = {
-	render: () => (
-		<Tout
-			headline="Get Started Today"
-			body="Begin your journey with our comprehensive onboarding process designed to help you succeed from day one."
-			primaryAction={<Button>Start Now</Button>}
-			backgroundMedia={<PlaceholderBackground />}
-		/>
-	),
-};
-
-/**
- * With video background (placeholder)
- */
-export const WithVideoPlaceholder: Story = {
-	render: () => (
-		<Tout
-			headline="Experience Innovation"
-			body="See how modern technology is transforming the way government serves its citizens."
-			primaryAction={<Button>Watch Video</Button>}
-			secondaryAction={<Button variant="secondary-outline">Learn More</Button>}
-			backgroundMedia={
-				<div className="absolute inset-0 bg-gray-800 flex items-center justify-center">
-					<span className="text-gray-400 typography-body-small">
-						Video Background
-					</span>
-				</div>
-			}
-		/>
-	),
-};
-
-/**
- * With NdstudioFooter - shows the National Design Studio branding at the bottom
- */
-export const WithNdstudioFooter: Story = {
-	render: () => (
-		<Tout
-			headline="Work with Purpose"
-			body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
-			primaryAction={<Button>View Careers</Button>}
-			secondaryAction={<Button variant="secondary-outline">Learn More</Button>}
-			backgroundMedia={<ImageBackground />}
-			footer={<NdstudioFooter />}
-		/>
-	),
-};

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

@@ -1,242 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Tout } from "./tout";
-
-const PlaceholderBackground = () => (
-	<div data-testid="background" className="absolute inset-0 bg-gray-300" />
-);
-
-describe("Tout", () => {
-	describe("Accessibility", () => {
-		test("renders as section landmark", async () => {
-			render(
-				<Tout
-					headline="Test Headline"
-					body="Test body"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-					data-testid="tout"
-				/>,
-			);
-
-			const tout = page.getByTestId("tout");
-			await expect.element(tout).toBeInTheDocument();
-		});
-
-		test("headline renders as h2", async () => {
-			render(
-				<Tout
-					headline="Tout Headline"
-					body="Test body"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByRole("heading", { level: 2, name: "Tout Headline" }))
-				.toBeInTheDocument();
-		});
-
-		test("body text is accessible", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Accessible body text"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByText("Accessible body text"))
-				.toBeInTheDocument();
-		});
-
-		test("background is hidden from screen readers", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-					data-testid="tout"
-				/>,
-			);
-
-			const tout = page.getByTestId("tout");
-			await expect.element(tout).toBeInTheDocument();
-		});
-	});
-
-	describe("Props", () => {
-		test("renders with required props", async () => {
-			render(
-				<Tout
-					headline="Required Headline"
-					body="Required body"
-					primaryAction={<button type="button">Primary</button>}
-					backgroundMedia={<PlaceholderBackground />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByText("Required Headline"))
-				.toBeInTheDocument();
-			await expect.element(page.getByText("Required body")).toBeInTheDocument();
-			await expect
-				.element(page.getByRole("button", { name: "Primary" }))
-				.toBeInTheDocument();
-			await expect.element(page.getByTestId("background")).toBeInTheDocument();
-		});
-
-		test("renders secondary action when provided", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Primary</button>}
-					secondaryAction={<button type="button">Secondary</button>}
-					backgroundMedia={<PlaceholderBackground />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Primary" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("button", { name: "Secondary" }))
-				.toBeInTheDocument();
-		});
-
-		test("does not render secondary action when not provided", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Primary</button>}
-					backgroundMedia={<PlaceholderBackground />}
-				/>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Primary" }))
-				.toBeInTheDocument();
-			// Should only have one button
-			const buttons = page.getByRole("button");
-			await expect.element(buttons).toBeInTheDocument();
-		});
-
-		test("supports custom className", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-					className="custom-class"
-					data-testid="tout"
-				/>,
-			);
-
-			const tout = page.getByTestId("tout");
-			await expect.element(tout).toHaveClass(/custom-class/);
-		});
-
-		test("spreads additional props to section element", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-					data-testid="tout"
-					aria-label="Tout section"
-				/>,
-			);
-
-			const tout = page.getByTestId("tout");
-			await expect.element(tout).toHaveAttribute("aria-label", "Tout section");
-		});
-	});
-
-	describe("Styling", () => {
-		test("applies full width class", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-					data-testid="tout"
-				/>,
-			);
-
-			const tout = page.getByTestId("tout");
-			await expect.element(tout).toHaveClass(/w-full/);
-		});
-
-		test("applies responsive height classes", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-					data-testid="tout"
-				/>,
-			);
-
-			const tout = page.getByTestId("tout");
-			await expect.element(tout).toHaveClass(/h-\[600px\]/);
-		});
-
-		test("applies relative positioning for z-index context", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-					data-testid="tout"
-				/>,
-			);
-
-			const tout = page.getByTestId("tout");
-			await expect.element(tout).toHaveClass(/relative/);
-		});
-	});
-
-	describe("Content", () => {
-		test("headline has correct styling", async () => {
-			render(
-				<Tout
-					headline="Styled Headline"
-					body="Test"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-				/>,
-			);
-
-			const headline = page.getByRole("heading", { level: 2 });
-			await expect.element(headline).toHaveClass(/typography-h4/);
-			await expect.element(headline).toHaveClass(/text-gray-900/);
-		});
-
-		test("body has correct styling", async () => {
-			render(
-				<Tout
-					headline="Test"
-					body="Styled body text"
-					primaryAction={<button type="button">Action</button>}
-					backgroundMedia={<PlaceholderBackground />}
-				/>,
-			);
-
-			const body = page.getByText("Styled body text");
-			await expect.element(body).toHaveClass(/typography-body-small/);
-			await expect.element(body).toHaveClass(/text-gray-800/);
-		});
-	});
-});

package/src/components/sections/two-column-section/index.ts

@@ -1,5 +0,0 @@
-export {
-	TwoColumnSection,
-	type TwoColumnSectionProps,
-	twoColumnSectionVariants,
-} from "./two-column-section";