@nationaldesignstudio/react 0.0.15 → 0.0.16

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(" ");
+}

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

@@ -0,0 +1,130 @@
+import { describe, expect, test, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { PagerControl } from "./pager-control";
+
+describe("PagerControl", () => {
+	describe("Accessibility", () => {
+		test("has correct tablist role", async () => {
+			render(<PagerControl count={4} autoPlay={false} />);
+			await expect
+				.element(page.getByRole("tablist", { name: "Page indicators" }))
+				.toBeInTheDocument();
+		});
+
+		test("renders correct number of tab buttons", async () => {
+			render(<PagerControl count={4} autoPlay={false} />);
+			const tabs = page.getByRole("tab").all();
+			expect(await tabs).toHaveLength(4);
+		});
+
+		test("active tab has aria-selected true", async () => {
+			render(<PagerControl count={4} activeIndex={1} autoPlay={false} />);
+			const tabs = page.getByRole("tab").all();
+			const tabElements = await tabs;
+			await expect
+				.element(tabElements[0])
+				.toHaveAttribute("aria-selected", "false");
+			await expect
+				.element(tabElements[1])
+				.toHaveAttribute("aria-selected", "true");
+		});
+
+		test("tabs have accessible labels", async () => {
+			render(<PagerControl count={3} activeIndex={0} autoPlay={false} />);
+			await expect
+				.element(page.getByRole("tab", { name: "Page 1 of 3, current" }))
+				.toBeInTheDocument();
+			await expect
+				.element(page.getByRole("tab", { name: "Go to page 2 of 3" }))
+				.toBeInTheDocument();
+		});
+
+		test("is focusable via keyboard", async () => {
+			render(<PagerControl count={4} autoPlay={false} />);
+			await userEvent.keyboard("{Tab}");
+			const firstTab = page.getByRole("tab").all();
+			await expect.element((await firstTab)[0]).toHaveFocus();
+		});
+	});
+
+	describe("Interactions", () => {
+		test("calls onChange when dot is clicked", async () => {
+			const handleChange = vi.fn();
+			render(
+				<PagerControl
+					count={4}
+					activeIndex={0}
+					onChange={handleChange}
+					autoPlay={false}
+				/>,
+			);
+			await page.getByRole("tab", { name: "Go to page 3 of 4" }).click();
+			expect(handleChange).toHaveBeenCalledWith(2);
+		});
+
+		test("clicking active dot calls onChange with same index", async () => {
+			const handleChange = vi.fn();
+			render(
+				<PagerControl
+					count={4}
+					activeIndex={1}
+					onChange={handleChange}
+					autoPlay={false}
+				/>,
+			);
+			await page.getByRole("tab", { name: "Page 2 of 4, current" }).click();
+			expect(handleChange).toHaveBeenCalledWith(1);
+		});
+
+		test("updates internal state when uncontrolled", async () => {
+			render(<PagerControl count={4} autoPlay={false} />);
+			// Initially first is active
+			await expect
+				.element(page.getByRole("tab", { name: "Page 1 of 4, current" }))
+				.toBeInTheDocument();
+
+			// Click third dot
+			await page.getByRole("tab", { name: "Go to page 3 of 4" }).click();
+
+			// Now third should be active
+			await expect
+				.element(page.getByRole("tab", { name: "Page 3 of 4, current" }))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("Variants", () => {
+		test("applies charcoal variant classes by default", async () => {
+			render(<PagerControl count={4} autoPlay={false} />);
+			const tabs = await page.getByRole("tab").all();
+			// Active dot track should have bg-alpha-black-30
+			await expect.element(tabs[0]).toHaveClass(/bg-alpha-black-30/);
+			// Inactive dots should have bg-alpha-black-30
+			await expect.element(tabs[1]).toHaveClass(/bg-alpha-black-30/);
+		});
+
+		test("applies ivory variant classes", async () => {
+			render(<PagerControl count={4} variant="ivory" autoPlay={false} />);
+			const tabs = await page.getByRole("tab").all();
+			// Active dot track should have bg-alpha-white-30
+			await expect.element(tabs[0]).toHaveClass(/bg-alpha-white-30/);
+			// Inactive dots should have bg-alpha-white-30
+			await expect.element(tabs[1]).toHaveClass(/bg-alpha-white-30/);
+		});
+	});
+
+	describe("Count", () => {
+		test("renders correct number of dots for count=2", async () => {
+			render(<PagerControl count={2} autoPlay={false} />);
+			const tabs = await page.getByRole("tab").all();
+			expect(tabs).toHaveLength(2);
+		});
+
+		test("renders correct number of dots for count=8", async () => {
+			render(<PagerControl count={8} autoPlay={false} />);
+			const tabs = await page.getByRole("tab").all();
+			expect(tabs).toHaveLength(8);
+		});
+	});
+});