@nationaldesignstudio/react 0.0.10 → 0.0.11

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

@@ -1,237 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../../atoms/button";
-import { River } from ".";
-
-const meta: Meta<typeof River> = {
-	title: "Sections/River",
-	component: River,
-	parameters: {
-		layout: "fullscreen",
-	},
-	argTypes: {
-		variant: {
-			control: "select",
-			options: ["A", "B"],
-			description: "Layout variant",
-		},
-		headline: {
-			control: "text",
-			description: "The headline text",
-		},
-		body: {
-			control: "text",
-			description: "The body text",
-		},
-	},
-	decorators: [
-		(Story) => (
-			<div className="grid-container">
-				<Story />
-			</div>
-		),
-	],
-} as Meta<typeof River>;
-
-export default meta;
-type Story = StoryObj<typeof River>;
-
-const PlaceholderImage = () => (
-	<div className="bg-gray-200 w-full aspect-[4/3] rounded-lg flex items-center justify-center">
-		<span className="text-gray-500 typography-body-small">
-			Image Placeholder
-		</span>
-	</div>
-);
-
-export const Playground: Story = {
-	render: (args) => <River {...args} />,
-};
-Playground.args = {
-	variant: "A",
-	headline: "Feature Headline",
-	body: "Use rivers to present content with supporting media. They work great for feature highlights, product showcases, and storytelling sections.",
-	primaryAction: <Button>Primary Action</Button>,
-	secondaryAction: <Button variant="charcoalOutline">Secondary</Button>,
-	media: <PlaceholderImage />,
-};
-
-// =============================================================================
-// Variants
-// =============================================================================
-
-/**
- * Variant A: Text on left, media on right (desktop)
- */
-export const VariantA: Story = {
-	render: () => (
-		<River
-			variant="A"
-			headline="Text Left, Media Right"
-			body="Variant A places the text content on the left (9 columns) and media on the right (15 columns) on desktop viewports. On mobile and tablet, they stack vertically."
-			primaryAction={<Button>Primary Action</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
-			media={<PlaceholderImage />}
-		/>
-	),
-};
-
-/**
- * Variant B: Media on left, text on right (desktop)
- */
-export const VariantB: Story = {
-	render: () => (
-		<River
-			variant="B"
-			headline="Media Left, Text Right"
-			body="Variant B places the media on the left (15 columns) and text content on the right (9 columns) on desktop viewports. On mobile and tablet, they stack vertically with text first."
-			primaryAction={<Button>Primary Action</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
-			media={<PlaceholderImage />}
-		/>
-	),
-};
-
-// =============================================================================
-// Responsive Variants
-// =============================================================================
-
-export const VariantADesktop: Story = {
-	render: () => (
-		<River
-			variant="A"
-			headline="Desktop View"
-			body="On desktop (lg, 1440px), the content spans 9 columns and the media spans 15 columns in a horizontal layout."
-			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
-			media={<PlaceholderImage />}
-		/>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const VariantATablet: Story = {
-	render: () => (
-		<River
-			variant="A"
-			headline="Tablet View"
-			body="On tablet (md, 768px), the content and media stack vertically with the text above the media."
-			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
-			media={<PlaceholderImage />}
-		/>
-	),
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const VariantAMobile: Story = {
-	render: () => (
-		<River
-			variant="A"
-			headline="Mobile View"
-			body="On mobile (sm, 320px), content is stacked with smaller button sizing."
-			primaryAction={<Button size="sm">Primary</Button>}
-			secondaryAction={
-				<Button size="sm" variant="charcoalOutline">
-					Secondary
-				</Button>
-			}
-			media={<PlaceholderImage />}
-		/>
-	),
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-export const VariantBDesktop: Story = {
-	render: () => (
-		<River
-			variant="B"
-			headline="Desktop View - Reversed"
-			body="Variant B reverses the layout, placing media on the left and content on the right."
-			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
-			media={<PlaceholderImage />}
-		/>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Examples
-// =============================================================================
-
-/**
- * Without secondary action
- */
-export const SingleAction: Story = {
-	render: () => (
-		<River
-			variant="A"
-			headline="Single Action Button"
-			body="Rivers can also be used with just a primary action button when a secondary action isn't needed."
-			primaryAction={<Button>Learn More</Button>}
-			media={<PlaceholderImage />}
-		/>
-	),
-};
-
-/**
- * Alternating rivers for visual rhythm
- */
-export const AlternatingRivers: Story = {
-	render: () => (
-		<>
-			<River
-				variant="A"
-				headline="First Feature"
-				body="Start with text on the left for the first section."
-				primaryAction={<Button>Explore</Button>}
-				media={<PlaceholderImage />}
-			/>
-			<River
-				variant="B"
-				headline="Second Feature"
-				body="Alternate to media on the left for visual variety."
-				primaryAction={<Button>Discover</Button>}
-				media={<PlaceholderImage />}
-				className="bg-gray-100"
-			/>
-			<River
-				variant="A"
-				headline="Third Feature"
-				body="Return to the original layout to create rhythm."
-				primaryAction={<Button>Learn More</Button>}
-				media={<PlaceholderImage />}
-			/>
-		</>
-	),
-};
-
-/**
- * With actual image
- */
-export const WithImage: Story = {
-	render: () => (
-		<River
-			variant="A"
-			headline="Real World Example"
-			body="Rivers work great with actual images, videos, or any media content. The media column is designed to accommodate various aspect ratios."
-			primaryAction={<Button>Get Started</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
-			media={
-				<img
-					src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop"
-					alt="Team collaboration"
-					className="rounded-lg object-cover"
-				/>
-			}
-		/>
-	),
-};

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-spacing-20/);
-			await expect.element(river).toHaveClass(/pt-spacing-72/);
-			await expect.element(river).toHaveClass(/pb-spacing-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-headline-small/);
-			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/river/river.tsx

@@ -1,175 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-/**
- * River component for content sections with text and media
- *
- * Variants:
- * - A: Text on left (9 cols), media on right (15 cols) on desktop
- * - B: Media on left (15 cols), text on right (9 cols) on desktop
- *
- * Uses the 24-column grid system. Must be placed inside a `grid-container`.
- */
-const riverVariants = cva(
-	// Base styles - col-full within parent grid, responsive padding
-	[
-		"col-full",
-		// Small (mobile): 20px x, 72px top, 20px bottom
-		"px-spacing-20 pt-spacing-72 pb-spacing-20",
-		// Medium (tablet): 56px x, 96px y
-		"md:px-spacing-56 md:py-spacing-96",
-		// Large (desktop): 72px x, 128px y
-		"lg:px-spacing-72 lg:py-spacing-128",
-	],
-	{
-		variants: {
-			variant: {
-				A: "",
-				B: "",
-			},
-		},
-		defaultVariants: {
-			variant: "A",
-		},
-	},
-);
-
-export interface RiverProps
-	extends React.HTMLAttributes<HTMLElement>,
-		VariantProps<typeof riverVariants> {
-	/**
-	 * The headline text
-	 */
-	headline: string;
-	/**
-	 * The body text
-	 */
-	body: string;
-	/**
-	 * Primary action button (required)
-	 */
-	primaryAction: React.ReactNode;
-	/**
-	 * Secondary action button (optional)
-	 */
-	secondaryAction?: React.ReactNode;
-	/**
-	 * Media content (image, video, etc.)
-	 */
-	media: React.ReactNode;
-}
-
-/**
- * River component for content sections with text and media.
- *
- * Uses the 24-column grid system - must be placed inside a `grid-container`.
- *
- * Layout:
- * - Mobile/Tablet: Stacked (text above media)
- * - Desktop (lg+):
- *   - Variant A: Text (9 cols) | Media (15 cols)
- *   - Variant B: Media (15 cols) | Text (9 cols)
- *
- * @example
- * ```tsx
- * <div className="grid-container">
- *   <River
- *     variant="A"
- *     headline="Feature Headline"
- *     body="Description of the feature..."
- *     primaryAction={<Button>Primary</Button>}
- *     secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
- *     media={<img src="..." alt="Feature" />}
- *   />
- * </div>
- * ```
- */
-const River = React.forwardRef<HTMLElement, RiverProps>(
-	(
-		{
-			className,
-			variant,
-			headline,
-			body,
-			primaryAction,
-			secondaryAction,
-			media,
-			...props
-		},
-		ref,
-	) => {
-		const contentColumn = (
-			<div
-				className={cn(
-					"flex flex-col",
-					// Full width on mobile/tablet, 9 cols on desktop
-					"lg:col-span-9",
-				)}
-			>
-				{/* Text content with 16px gap */}
-				<div className="flex flex-col gap-spacing-16">
-					<h2 className="typography-headline-small text-gray-900">
-						{headline}
-					</h2>
-					<p className="typography-body-small text-gray-800">{body}</p>
-				</div>
-
-				{/* Buttons with 36px gap from text, responsive sizes */}
-				<div
-					className={cn(
-						"flex flex-row gap-spacing-16 mt-spacing-36",
-						"[&>*]:flex-shrink-0",
-					)}
-				>
-					{primaryAction}
-					{secondaryAction}
-				</div>
-			</div>
-		);
-
-		const mediaColumn = (
-			<div
-				className={cn(
-					// Full width on mobile/tablet, 15 cols on desktop
-					"lg:col-span-15",
-					// Ensure media fills the container
-					"[&>*]:w-full [&>*]:h-auto",
-				)}
-			>
-				{media}
-			</div>
-		);
-
-		return (
-			<section
-				ref={ref}
-				className={cn(riverVariants({ variant }), className)}
-				{...props}
-			>
-				{/* Inner grid container for 24-col layout */}
-				<div
-					className={cn(
-						"grid grid-cols-1 gap-spacing-36",
-						"lg:grid-cols-24 lg:gap-spacing-36",
-					)}
-				>
-					{variant === "B" ? (
-						<>
-							{mediaColumn}
-							{contentColumn}
-						</>
-					) : (
-						<>
-							{contentColumn}
-							{mediaColumn}
-						</>
-					)}
-				</div>
-			</section>
-		);
-	},
-);
-River.displayName = "River";
-
-export { River, riverVariants };

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

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