@nationaldesignstudio/react 0.5.1 → 0.5.3

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

@@ -1,6 +0,0 @@
-export {
-	Prose,
-	type ProseProps,
-	ProseSection,
-	type ProseSectionProps,
-} from "./prose";

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

@@ -1,144 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Prose, ProseSection } from ".";
-
-const meta: Meta<typeof Prose> = {
-	title: "Sections/Prose",
-	component: Prose,
-	parameters: {
-		layout: "centered",
-	},
-} as Meta<typeof Prose>;
-
-export default meta;
-type Story = StoryObj<typeof Prose>;
-
-const sampleIntro =
-	"On the modern web, typography is not decoration; it's the cognitive interface. Before a user understands your product, policy, or program, they're unconsciously reading the structure of your type: the hierarchy of headings, the discipline of your spacing, the confidence or hesitation in your line lengths.";
-
-const sampleParagraph1 =
-	"Style here isn't about clever fonts, it's about creating a system of visual cues that makes thinking easier. A consistent scale, clear contrast between roles, and careful use of weight and size become a kind of mental exoskeleton for the reader. Done well, typography lowers the friction of understanding to the point where attention can be spent on the content itself rather than on decoding the layout.";
-
-const sampleParagraph2 =
-	'Rhythm is where that structure turns into a voice. Online, people experience your text as a sequence of micro-moments: the way a headline sits in space, how paragraphs breathe, where the eye can rest. Tight, compressed leading and dense blocks say, "this is serious, pay attention." Generous white space and measured line lengths say, "you have room to think." Over time, those choices form a recognizable persona, just as surely as a writing style does. When the rhythm is intentional, your site speaks with a calm, authoritative cadence that users begin to trust. When it\'s sloppy or inconsistent, the voice fractures, and so does the sense that there\'s a clear, competent mind behind the interface.';
-
-// =============================================================================
-// Default
-// =============================================================================
-
-export const Default: Story = {
-	render: () => (
-		<Prose>
-			<ProseSection heading="Headline - Medium" as="h2">
-				<p>{sampleIntro}</p>
-			</ProseSection>
-			<ProseSection heading="Headline - Small" as="h3">
-				<p>{sampleParagraph1}</p>
-				<p>{sampleParagraph2}</p>
-			</ProseSection>
-		</Prose>
-	),
-};
-
-// =============================================================================
-// Responsive Variants
-// =============================================================================
-
-export const Desktop: Story = {
-	render: () => (
-		<Prose>
-			<ProseSection heading="Headline - Medium" as="h2">
-				<p>{sampleIntro}</p>
-			</ProseSection>
-			<ProseSection heading="Headline - Small" as="h3">
-				<p>{sampleParagraph1}</p>
-				<p>{sampleParagraph2}</p>
-			</ProseSection>
-		</Prose>
-	),
-	globals: {
-		viewport: { value: "lg", isRotated: false },
-	},
-};
-
-export const Tablet: Story = {
-	render: () => (
-		<Prose>
-			<ProseSection heading="Headline - Medium" as="h2">
-				<p>{sampleIntro}</p>
-			</ProseSection>
-			<ProseSection heading="Headline - Small" as="h3">
-				<p>{sampleParagraph1}</p>
-				<p>{sampleParagraph2}</p>
-			</ProseSection>
-		</Prose>
-	),
-	globals: {
-		viewport: { value: "md", isRotated: false },
-	},
-};
-
-export const Mobile: Story = {
-	render: () => (
-		<Prose>
-			<ProseSection heading="Headline - Medium" as="h2">
-				<p>{sampleIntro}</p>
-			</ProseSection>
-			<ProseSection heading="Headline - Small" as="h3">
-				<p>{sampleParagraph1}</p>
-				<p>{sampleParagraph2}</p>
-			</ProseSection>
-		</Prose>
-	),
-	globals: {
-		viewport: { value: "sm", isRotated: false },
-	},
-};
-
-// =============================================================================
-// Playground
-// =============================================================================
-
-export const Playground: Story = {
-	render: (args) => (
-		<Prose {...args}>
-			<ProseSection heading="Main Heading" as="h2">
-				<p>{sampleIntro}</p>
-			</ProseSection>
-			<ProseSection heading="Subheading" as="h3">
-				<p>{sampleParagraph1}</p>
-				<p>{sampleParagraph2}</p>
-			</ProseSection>
-		</Prose>
-	),
-};
-
-// =============================================================================
-// Examples
-// =============================================================================
-
-export const SingleSection: Story = {
-	render: () => (
-		<Prose>
-			<ProseSection heading="About Our Mission" as="h2">
-				<p>{sampleIntro}</p>
-				<p>{sampleParagraph1}</p>
-			</ProseSection>
-		</Prose>
-	),
-};
-
-export const MultipleSections: Story = {
-	render: () => (
-		<Prose>
-			<ProseSection heading="Introduction" as="h2">
-				<p>{sampleIntro}</p>
-			</ProseSection>
-			<ProseSection heading="The Importance of Style" as="h3">
-				<p>{sampleParagraph1}</p>
-			</ProseSection>
-			<ProseSection heading="Finding Your Rhythm" as="h3">
-				<p>{sampleParagraph2}</p>
-			</ProseSection>
-		</Prose>
-	),
-};

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

@@ -1,178 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Prose, ProseSection } from "./prose";
-
-describe("Prose", () => {
-	describe("Accessibility", () => {
-		test("ProseSection renders as section landmark", async () => {
-			render(
-				<Prose>
-					<ProseSection heading="Test Section" data-testid="section">
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			const section = page.getByTestId("section");
-			await expect.element(section).toBeInTheDocument();
-		});
-
-		test("ProseSection heading renders as h2 by default", async () => {
-			render(
-				<Prose>
-					<ProseSection heading="Default Heading">
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			await expect
-				.element(
-					page.getByRole("heading", { level: 2, name: "Default Heading" }),
-				)
-				.toBeInTheDocument();
-		});
-
-		test("ProseSection heading renders as h3 when specified", async () => {
-			render(
-				<Prose>
-					<ProseSection heading="H3 Heading" as="h3">
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			await expect
-				.element(page.getByRole("heading", { level: 3, name: "H3 Heading" }))
-				.toBeInTheDocument();
-		});
-
-		test("prose content is readable", async () => {
-			render(
-				<Prose>
-					<ProseSection heading="Readable Content">
-						<p>This is some readable body text.</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			await expect
-				.element(page.getByText("This is some readable body text."))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Props", () => {
-		test("Prose renders children", async () => {
-			render(
-				<Prose data-testid="prose">
-					<ProseSection heading="Child Section">
-						<p>Child content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			await expect.element(page.getByText("Child content")).toBeInTheDocument();
-		});
-
-		test("Prose supports custom className", async () => {
-			render(
-				<Prose className="custom-prose" data-testid="prose">
-					<ProseSection heading="Test">
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			const prose = page.getByTestId("prose");
-			await expect.element(prose).toHaveClass(/custom-prose/);
-		});
-
-		test("ProseSection supports custom className", async () => {
-			render(
-				<Prose>
-					<ProseSection
-						heading="Test"
-						className="custom-section"
-						data-testid="section"
-					>
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			const section = page.getByTestId("section");
-			await expect.element(section).toHaveClass(/custom-section/);
-		});
-	});
-
-	describe("Styling", () => {
-		test("Prose has max-width constraint", async () => {
-			render(
-				<Prose data-testid="prose">
-					<ProseSection heading="Test">
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			const prose = page.getByTestId("prose");
-			await expect.element(prose).toHaveClass(/max-w-\[700px\]/);
-		});
-
-		test("h2 heading has correct typography class", async () => {
-			render(
-				<Prose>
-					<ProseSection heading="H2 Test">
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			const heading = page.getByRole("heading", { name: "H2 Test" });
-			await expect.element(heading).toHaveClass(/typography-h3/);
-		});
-
-		test("h3 heading has correct typography class", async () => {
-			render(
-				<Prose>
-					<ProseSection heading="H3 Test" as="h3">
-						<p>Content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			const heading = page.getByRole("heading", { name: "H3 Test" });
-			await expect.element(heading).toHaveClass(/typography-h4/);
-		});
-	});
-
-	describe("Composition", () => {
-		test("renders multiple sections", async () => {
-			render(
-				<Prose>
-					<ProseSection heading="First">
-						<p>First content</p>
-					</ProseSection>
-					<ProseSection heading="Second">
-						<p>Second content</p>
-					</ProseSection>
-					<ProseSection heading="Third">
-						<p>Third content</p>
-					</ProseSection>
-				</Prose>,
-			);
-
-			await expect
-				.element(page.getByRole("heading", { name: "First" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("heading", { name: "Second" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByRole("heading", { name: "Third" }))
-				.toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,105 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { Prose, ProseSection } from "./prose";
-
-describe("Prose Visual Regression", () => {
-	test("prose with single section renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "800px", backgroundColor: "#ffffff", padding: "40px" }}
-			>
-				<Prose data-testid="prose">
-					<ProseSection heading="Section Heading">
-						<p>
-							This is a paragraph of body text that demonstrates the prose
-							component's typography and spacing. It should be easy to read and
-							properly formatted.
-						</p>
-					</ProseSection>
-				</Prose>
-			</div>,
-		);
-
-		await expect(page.getByTestId("prose")).toMatchScreenshot(
-			"prose-single-section",
-		);
-	});
-
-	test("prose with multiple sections renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "800px", backgroundColor: "#ffffff", padding: "40px" }}
-			>
-				<Prose data-testid="prose">
-					<ProseSection heading="First Section">
-						<p>
-							This is the first section of content with some body text to
-							demonstrate spacing between sections.
-						</p>
-					</ProseSection>
-					<ProseSection heading="Second Section">
-						<p>
-							This is the second section showing how multiple sections stack
-							with proper gaps between them.
-						</p>
-					</ProseSection>
-				</Prose>
-			</div>,
-		);
-
-		await expect(page.getByTestId("prose")).toMatchScreenshot(
-			"prose-multiple-sections",
-		);
-	});
-
-	test("prose with h3 heading renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "800px", backgroundColor: "#ffffff", padding: "40px" }}
-			>
-				<Prose data-testid="prose">
-					<ProseSection heading="H3 Heading" as="h3">
-						<p>
-							This section uses an h3 heading which has smaller typography than
-							the default h2.
-						</p>
-					</ProseSection>
-				</Prose>
-			</div>,
-		);
-
-		await expect(page.getByTestId("prose")).toMatchScreenshot(
-			"prose-h3-heading",
-		);
-	});
-
-	test("prose with multiple paragraphs renders correctly", async () => {
-		render(
-			<div
-				style={{ width: "800px", backgroundColor: "#ffffff", padding: "40px" }}
-			>
-				<Prose data-testid="prose">
-					<ProseSection heading="Long Content">
-						<p>
-							First paragraph with some content to show how multiple paragraphs
-							are spaced within a prose section.
-						</p>
-						<p>
-							Second paragraph demonstrating the gap between paragraphs in the
-							prose component.
-						</p>
-						<p>
-							Third paragraph to show consistent spacing throughout the content
-							area.
-						</p>
-					</ProseSection>
-				</Prose>
-			</div>,
-		);
-
-		await expect(page.getByTestId("prose")).toMatchScreenshot(
-			"prose-multiple-paragraphs",
-		);
-	});
-});

package/src/components/sections/quote-block/index.ts

@@ -1,5 +0,0 @@
-export {
-	QuoteBlock,
-	type QuoteBlockProps,
-	quoteBlockVariants,
-} from "./quote-block";

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

@@ -1 +0,0 @@
-export { River, type RiverProps, riverVariants } from "./river";

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="outline">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="outline">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="outline">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="outline">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="outline">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="outline">
-					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="outline">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="outline">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"
-				/>
-			}
-		/>
-	),
-};