@nationaldesignstudio/react 0.0.14 → 0.0.16

package/src/components/atoms/button/button.visual.test.tsx

@@ -0,0 +1,102 @@
+import { render } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { Button } from "./button";
+
+describe("Button Visual Regression", () => {
+	test("charcoal variant renders correctly", async () => {
+		render(<Button variant="charcoal">Charcoal Button</Button>);
+
+		await expect(
+			page.getByRole("button", { name: "Charcoal Button" }),
+		).toMatchScreenshot("button-charcoal");
+	});
+
+	test("charcoalOutline variant renders correctly", async () => {
+		render(<Button variant="charcoalOutline">Charcoal Outline Button</Button>);
+
+		await expect(
+			page.getByRole("button", { name: "Charcoal Outline Button" }),
+		).toMatchScreenshot("button-charcoal-outline");
+	});
+
+	test("charcoalOutlineQuiet variant renders correctly", async () => {
+		render(
+			<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Charcoal Outline Quiet" }),
+		).toMatchScreenshot("button-charcoal-outline-quiet");
+	});
+
+	test("ivory variant renders correctly", async () => {
+		render(
+			<div style={{ background: "#1a1a1a", padding: "20px" }}>
+				<Button variant="ivory">Ivory Button</Button>
+			</div>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Ivory Button" }),
+		).toMatchScreenshot("button-ivory");
+	});
+
+	test("ivoryOutline variant renders correctly", async () => {
+		render(
+			<div style={{ background: "#1a1a1a", padding: "20px" }}>
+				<Button variant="ivoryOutline">Ivory Outline Button</Button>
+			</div>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Ivory Outline Button" }),
+		).toMatchScreenshot("button-ivory-outline");
+	});
+
+	test("ivoryOutlineQuiet variant renders correctly", async () => {
+		render(
+			<div style={{ background: "#1a1a1a", padding: "20px" }}>
+				<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+			</div>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Ivory Outline Quiet" }),
+		).toMatchScreenshot("button-ivory-outline-quiet");
+	});
+
+	// Size variants
+	test("small size renders correctly", async () => {
+		render(<Button size="sm">Small Button</Button>);
+
+		await expect(
+			page.getByRole("button", { name: "Small Button" }),
+		).toMatchScreenshot("button-size-small");
+	});
+
+	test("medium (default) size renders correctly", async () => {
+		render(<Button size="default">Medium Button</Button>);
+
+		await expect(
+			page.getByRole("button", { name: "Medium Button" }),
+		).toMatchScreenshot("button-size-medium");
+	});
+
+	test("large size renders correctly", async () => {
+		render(<Button size="lg">Large Button</Button>);
+
+		await expect(
+			page.getByRole("button", { name: "Large Button" }),
+		).toMatchScreenshot("button-size-large");
+	});
+
+	// Disabled state
+	test("disabled state renders correctly", async () => {
+		render(<Button disabled>Disabled Button</Button>);
+
+		await expect(
+			page.getByRole("button", { name: "Disabled Button" }),
+		).toMatchScreenshot("button-disabled");
+	});
+});

package/src/components/atoms/button/icon-button.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { IconButton } from ".";
+
+// Simple placeholder icons for stories
+const SearchIcon = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M14 14L11.1 11.1"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+const ArrowRightIcon = () => (
+	<svg
+		width="12"
+		height="12"
+		viewBox="0 0 12 12"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M2.5 6H9.5M9.5 6L6 2.5M9.5 6L6 9.5"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+const meta: Meta<typeof IconButton> = {
+	title: "Atoms/IconButton",
+} as Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Playground: Story = {
+	render: (args) => (
+		<IconButton {...args}>
+			<SearchIcon />
+		</IconButton>
+	),
+};
+Playground.argTypes = {
+	size: {
+		control: {
+			type: "radio",
+		},
+		options: ["sm", "default", "lg"],
+	},
+	disabled: {
+		control: {
+			type: "boolean",
+		},
+	},
+	variant: {
+		control: {
+			type: "radio",
+		},
+		options: [
+			"charcoal",
+			"charcoalOutline",
+			"charcoalOutlineQuiet",
+			"ivory",
+			"ivoryOutline",
+			"ivoryOutlineQuiet",
+		],
+	},
+};
+Playground.args = {
+	size: "default",
+	disabled: false,
+	variant: "charcoal",
+};
+
+// =============================================================================
+// Variants
+// =============================================================================
+
+export const Charcoal = () => (
+	<IconButton variant="charcoal">
+		<SearchIcon />
+	</IconButton>
+);
+
+export const CharcoalOutline = () => (
+	<IconButton variant="charcoalOutline">
+		<SearchIcon />
+	</IconButton>
+);
+
+export const CharcoalOutlineQuiet = () => (
+	<IconButton variant="charcoalOutlineQuiet">
+		<SearchIcon />
+	</IconButton>
+);
+
+export const Ivory = () => (
+	<IconButton variant="ivory">
+		<SearchIcon />
+	</IconButton>
+);
+
+export const IvoryOutline = () => (
+	<IconButton variant="ivoryOutline">
+		<ArrowRightIcon />
+	</IconButton>
+);
+
+export const IvoryOutlineQuiet = () => (
+	<IconButton variant="ivoryOutlineQuiet">
+		<ArrowRightIcon />
+	</IconButton>
+);
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+export const Small = () => (
+	<IconButton size="sm">
+		<ArrowRightIcon />
+	</IconButton>
+);
+
+export const Medium = () => (
+	<IconButton size="default">
+		<SearchIcon />
+	</IconButton>
+);
+
+export const Large = () => (
+	<IconButton size="lg">
+		<SearchIcon />
+	</IconButton>
+);
+
+// =============================================================================
+// States
+// =============================================================================
+
+export const Disabled = () => (
+	<IconButton disabled>
+		<SearchIcon />
+	</IconButton>
+);

package/src/components/atoms/button/icon-button.tsx

@@ -0,0 +1,120 @@
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+
+/**
+ * IconButton component based on Figma BaseKit / Interface / Icon Button
+ *
+ * **IMPORTANT: Accessibility Requirement**
+ * Icon-only buttons MUST have an accessible label. Provide one of:
+ * - `aria-label`: A text description of the button's action (recommended)
+ * - `aria-labelledby`: Reference to an element containing the label
+ * - `title`: Tooltip text (less preferred, but provides a label)
+ *
+ * @example
+ * ```tsx
+ * // Correct usage with aria-label
+ * <IconButton aria-label="Close menu">
+ *   <CloseIcon />
+ * </IconButton>
+ *
+ * // Correct usage with aria-labelledby
+ * <IconButton aria-labelledby="close-label">
+ *   <CloseIcon />
+ * </IconButton>
+ * <span id="close-label" className="sr-only">Close menu</span>
+ * ```
+ *
+ * Variants:
+ * - charcoal: Dark filled button (for light backgrounds)
+ * - charcoalOutline: Dark outlined button (for light backgrounds)
+ * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
+ * - ghost: No background/border, just icon (for light backgrounds)
+ * - ghostDark: No background/border, just icon (for dark backgrounds)
+ * - ivory: Light filled button (for dark backgrounds)
+ * - ivoryOutline: Light outlined button (for dark backgrounds)
+ * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
+ *
+ * Sizes:
+ * - lg: Large (46x46)
+ * - default: Medium (36x36)
+ * - sm: Small (29x29)
+ */
+const iconButtonVariants = tv({
+	base: "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			// Charcoal (dark filled) - primary dark
+			charcoal:
+				"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 focus-visible:ring-gray-1000",
+			// Charcoal Outline - outlined dark (for light backgrounds)
+			charcoalOutline:
+				"border border-alpha-black-30 text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
+			// Charcoal Outline Quiet - subtle outlined dark (for light backgrounds)
+			charcoalOutlineQuiet:
+				"border border-alpha-black-20 text-alpha-black-60 hover:border-alpha-black-30 hover:text-alpha-black-80 active:bg-alpha-black-5 focus-visible:ring-gray-1000",
+			// Ghost - no background/border (for light backgrounds)
+			ghost:
+				"text-gray-700 hover:text-gray-900 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
+			// Ghost Dark - no background/border (for dark backgrounds)
+			ghostDark:
+				"text-gray-300 hover:text-gray-100 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
+			// Ivory (light filled) - primary light (for dark backgrounds)
+			ivory:
+				"bg-gray-50 text-gray-1000 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
+			// Ivory Outline - outlined light (for dark backgrounds)
+			ivoryOutline:
+				"border border-gray-50 text-gray-50 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
+			// Ivory Outline Quiet - subtle light outline (for dark backgrounds)
+			ivoryOutlineQuiet:
+				"border border-alpha-white-20 text-alpha-white-60 hover:border-alpha-white-30 hover:text-alpha-white-80 active:bg-alpha-white-5 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
+		},
+		size: {
+			// Large (48x48) - uses primitive spacing tokens
+			lg: "rounded-radius-12 size-spacing-48",
+			// Medium (40x40) - default - uses primitive spacing tokens
+			default: "rounded-radius-12 size-spacing-40",
+			// Small (32x32) - uses primitive spacing tokens
+			sm: "rounded-radius-10 size-spacing-32",
+		},
+	},
+	defaultVariants: {
+		variant: "charcoal",
+		size: "default",
+	},
+});
+
+export interface IconButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof iconButtonVariants> {
+	asChild?: boolean;
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		// Development warning for missing accessible label
+		React.useEffect(() => {
+			if (import.meta.env?.DEV) {
+				const hasAccessibleLabel =
+					props["aria-label"] || props["aria-labelledby"] || props.title;
+				if (!hasAccessibleLabel) {
+					console.warn(
+						"IconButton: Missing accessible label. Icon-only buttons must have an aria-label, aria-labelledby, or title attribute for screen reader users.",
+					);
+				}
+			}
+		}, [props["aria-label"], props["aria-labelledby"], props.title]);
+
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				className={iconButtonVariants({ variant, size, class: className })}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+IconButton.displayName = "IconButton";
+
+export { IconButton, iconButtonVariants };

package/src/components/atoms/button/index.ts

@@ -0,0 +1,6 @@
+export { Button, type ButtonProps, buttonVariants } from "./button";
+export {
+	IconButton,
+	type IconButtonProps,
+	iconButtonVariants,
+} from "./icon-button";

package/src/components/atoms/ndstudio-footer/index.ts

@@ -0,0 +1 @@
+export { NdstudioFooter, type NdstudioFooterProps } from "./ndstudio-footer";

package/src/components/atoms/ndstudio-footer/ndstudio-footer.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface NdstudioFooterProps
+	extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * The URL to link to
+	 * @default "https://ndstudio.gov"
+	 */
+	href?: string;
+}
+
+/**
+ * NdstudioFooter component displays a "Designed and Engineered in DC by National Design Studio" footer link.
+ *
+ * This component is designed to be used as a footer within other components like Tout,
+ * but can also be used standalone.
+ *
+ * @example
+ * ```tsx
+ * // Used within a Tout component via footer slot
+ * <Tout
+ *   headline="Feature Headline"
+ *   primaryAction={<Button>Primary</Button>}
+ *   backgroundMedia={<img src="/bg.jpg" alt="" />}
+ *   footer={<NdstudioFooter />}
+ * />
+ *
+ * // Standalone usage
+ * <NdstudioFooter className="my-custom-class" />
+ * ```
+ */
+const NdstudioFooter = React.forwardRef<HTMLDivElement, NdstudioFooterProps>(
+	({ className, href = "https://ndstudio.gov", ...props }, ref) => {
+		return (
+			<div ref={ref} className={cn("text-center", className)} {...props}>
+				<p className="typography-label-large uppercase text-ivory-alpha-75">
+					Designed and Engineered in DC by{" "}
+					<a
+						href={href}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:underline"
+					>
+						National Design Studio
+						<span className="sr-only"> (opens in new tab)</span>
+					</a>
+				</p>
+			</div>
+		);
+	},
+);
+NdstudioFooter.displayName = "NdstudioFooter";
+
+export { NdstudioFooter };

package/src/components/atoms/pager-control/index.ts

@@ -0,0 +1,5 @@
+export {
+	PagerControl,
+	type PagerControlProps,
+	pagerControlVariants,
+} from "./pager-control";

package/src/components/atoms/pager-control/pager-control.stories.tsx

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { PagerControl } from ".";
+
+const meta: Meta<typeof PagerControl> = {
+	title: "Atoms/PagerControl",
+} as Meta<typeof PagerControl>;
+
+export default meta;
+type Story = StoryObj<typeof PagerControl>;
+
+export const Playground: Story = {
+	render: (args) => <PagerControl {...args} />,
+};
+Playground.argTypes = {
+	count: {
+		control: {
+			type: "number",
+			min: 1,
+			max: 10,
+		},
+	},
+	activeIndex: {
+		control: {
+			type: "number",
+			min: 0,
+		},
+	},
+	duration: {
+		control: {
+			type: "number",
+			min: 0,
+			max: 10000,
+			step: 500,
+		},
+	},
+	autoPlay: {
+		control: {
+			type: "boolean",
+		},
+	},
+	pauseOnHover: {
+		control: {
+			type: "boolean",
+		},
+	},
+	loop: {
+		control: {
+			type: "boolean",
+		},
+	},
+	size: {
+		control: {
+			type: "radio",
+		},
+		options: ["sm", "default", "lg"],
+	},
+	variant: {
+		control: {
+			type: "radio",
+		},
+		options: ["charcoal", "ivory"],
+	},
+};
+Playground.args = {
+	count: 4,
+	duration: 5000,
+	autoPlay: true,
+	pauseOnHover: true,
+	loop: true,
+	size: "default",
+	variant: "charcoal",
+};
+
+// =============================================================================
+// Variants
+// =============================================================================
+
+export const Charcoal = () => <PagerControl count={4} variant="charcoal" />;
+
+export const Ivory = () => <PagerControl count={4} variant="ivory" />;
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+export const Small = () => <PagerControl count={4} size="sm" />;
+
+export const Default = () => <PagerControl count={4} size="default" />;
+
+export const Large = () => <PagerControl count={4} size="lg" />;
+
+// =============================================================================
+// Counts
+// =============================================================================
+
+export const TwoPages = () => <PagerControl count={2} />;
+
+export const FivePages = () => <PagerControl count={5} />;
+
+export const EightPages = () => <PagerControl count={8} />;
+
+// =============================================================================
+// Durations
+// =============================================================================
+
+export const FastDuration = () => <PagerControl count={4} duration={2000} />;
+
+export const SlowDuration = () => <PagerControl count={4} duration={8000} />;
+
+// =============================================================================
+// Controls
+// =============================================================================
+
+export const NoAutoPlay = () => <PagerControl count={4} autoPlay={false} />;
+
+export const NoLoop = () => (
+	<PagerControl count={4} loop={false} duration={3000} />
+);
+
+export const NoPauseOnHover = () => (
+	<PagerControl count={4} pauseOnHover={false} />
+);
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+export const Controlled = () => {
+	const [activeIndex, setActiveIndex] = React.useState(0);
+
+	return (
+		<div className="flex flex-col items-center gap-spacing-24">
+			<PagerControl
+				count={4}
+				activeIndex={activeIndex}
+				onChange={setActiveIndex}
+				autoPlay={false}
+			/>
+			<div className="flex gap-spacing-10">
+				<button
+					type="button"
+					onClick={() => setActiveIndex((prev) => Math.max(0, prev - 1))}
+					className="rounded bg-gray-200 px-spacing-12 py-spacing-6"
+				>
+					Previous
+				</button>
+				<span className="px-spacing-12 py-spacing-6">
+					Page {activeIndex + 1} of 4
+				</span>
+				<button
+					type="button"
+					onClick={() => setActiveIndex((prev) => Math.min(3, prev + 1))}
+					className="rounded bg-gray-200 px-spacing-12 py-spacing-6"
+				>
+					Next
+				</button>
+			</div>
+		</div>
+	);
+};
+
+// =============================================================================
+// Integration Example
+// =============================================================================
+
+export const WithCarousel = () => {
+	const [activeIndex, setActiveIndex] = React.useState(0);
+	const slides = [
+		{ id: 1, color: "bg-blue-100", title: "Slide 1" },
+		{ id: 2, color: "bg-green-100", title: "Slide 2" },
+		{ id: 3, color: "bg-yellow-100", title: "Slide 3" },
+		{ id: 4, color: "bg-purple-100", title: "Slide 4" },
+	];
+
+	return (
+		<div className="flex w-[400px] flex-col gap-spacing-16">
+			<div className="relative h-[200px] overflow-hidden rounded-radius-12">
+				{slides.map((slide, index) => (
+					<div
+						key={slide.id}
+						className={cn(
+							"absolute inset-0 flex items-center justify-center transition-transform duration-500",
+							slide.color,
+						)}
+						style={{
+							transform: `translateX(${(index - activeIndex) * 100}%)`,
+						}}
+					>
+						<span className="text-xl font-semibold">{slide.title}</span>
+					</div>
+				))}
+			</div>
+			<div className="flex justify-center">
+				<PagerControl
+					count={slides.length}
+					activeIndex={activeIndex}
+					onChange={setActiveIndex}
+					duration={5000}
+				/>
+			</div>
+		</div>
+	);
+};
+
+// Helper for carousel story
+function cn(...classes: (string | boolean | undefined)[]) {
+	return classes.filter(Boolean).join(" ");
+}