@nationaldesignstudio/react 0.0.14 → 0.0.16

package/src/components/atoms/accordion/accordion.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { cn } from "@/lib/utils";
+
+// =============================================================================
+// Accordion Variants
+// =============================================================================
+
+const accordionVariants = tv({
+	base: "flex flex-col",
+	variants: {
+		variant: {
+			dark: "",
+			light: "",
+		},
+	},
+	defaultVariants: {
+		variant: "dark",
+	},
+});
+
+const accordionItemVariants = tv({
+	base: "border-b overflow-hidden",
+	variants: {
+		variant: {
+			dark: "border-gray-300",
+			light: "border-gray-500",
+		},
+	},
+	defaultVariants: {
+		variant: "dark",
+	},
+});
+
+const accordionTriggerVariants = tv({
+	base: [
+		// Uses primitive spacing tokens
+		"flex w-full items-center justify-between py-spacing-24 text-left",
+		"typography-body-large transition-colors cursor-pointer",
+	],
+	variants: {
+		variant: {
+			dark: "text-gray-100 data-[open]:text-white",
+			light: "text-gray-800 data-[open]:text-gray-900",
+		},
+	},
+	defaultVariants: {
+		variant: "dark",
+	},
+});
+
+const accordionPanelVariants = tv({
+	// Uses primitive spacing tokens
+	base: "typography-body-large pb-spacing-24",
+	variants: {
+		variant: {
+			dark: "text-gray-100",
+			light: "text-gray-800",
+		},
+	},
+	defaultVariants: {
+		variant: "dark",
+	},
+});
+
+// =============================================================================
+// Accordion Context
+// =============================================================================
+
+const AccordionContext = React.createContext<{
+	variant: "dark" | "light";
+}>({
+	variant: "dark",
+});
+
+// =============================================================================
+// Accordion
+// =============================================================================
+
+export interface AccordionProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof accordionVariants> {
+	/**
+	 * Allow multiple items to be expanded at once
+	 * @default false
+	 */
+	allowMultiple?: boolean;
+	/**
+	 * The ID(s) of items that should be expanded by default
+	 */
+	defaultExpanded?: string | string[];
+	children: React.ReactNode;
+}
+
+/**
+ * Accordion component for expandable/collapsible content sections.
+ * Built on Base UI's Accordion primitive.
+ *
+ * Variants:
+ * - dark: Dark theme styling (default)
+ * - light: Light theme styling
+ *
+ * @example
+ * ```tsx
+ * <Accordion defaultExpanded="item-1" variant="dark">
+ *   <AccordionItem id="item-1" title="Question 1">
+ *     Answer to question 1
+ *   </AccordionItem>
+ *   <AccordionItem id="item-2" title="Question 2">
+ *     Answer to question 2
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+	(
+		{
+			className,
+			allowMultiple = false,
+			defaultExpanded,
+			variant = "light",
+			children,
+		},
+		ref,
+	) => {
+		// Normalize defaultExpanded to array format for Base UI
+		const defaultValue = React.useMemo((): string[] | undefined => {
+			if (!defaultExpanded) return undefined;
+			if (Array.isArray(defaultExpanded)) return defaultExpanded;
+			return [defaultExpanded];
+		}, [defaultExpanded]);
+
+		return (
+			<AccordionContext.Provider value={{ variant: variant ?? "dark" }}>
+				<BaseAccordion.Root
+					ref={ref}
+					className={accordionVariants({ variant, class: className })}
+					defaultValue={defaultValue}
+					multiple={allowMultiple}
+				>
+					{children}
+				</BaseAccordion.Root>
+			</AccordionContext.Provider>
+		);
+	},
+);
+Accordion.displayName = "Accordion";
+
+// =============================================================================
+// AccordionItem
+// =============================================================================
+
+export interface AccordionItemProps
+	extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+	/**
+	 * Unique identifier for this item
+	 */
+	id: string;
+	/**
+	 * The question/title displayed in the header
+	 */
+	title: string;
+	/**
+	 * The answer/content revealed when expanded
+	 */
+	children: React.ReactNode;
+}
+
+/**
+ * Individual accordion item with collapsible content.
+ * Must be used within an Accordion component.
+ */
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+	({ className, id, title, children }, ref) => {
+		const { variant } = React.useContext(AccordionContext);
+
+		return (
+			<BaseAccordion.Item
+				ref={ref}
+				value={id}
+				className={accordionItemVariants({ variant, class: className })}
+			>
+				{/* Header - always visible */}
+				<BaseAccordion.Header>
+					<BaseAccordion.Trigger
+						className={accordionTriggerVariants({ variant })}
+					>
+						<span>{title}</span>
+						<span
+							className={cn(
+								"text-base transition-transform duration-200",
+								"[[data-open]_&]:rotate-45",
+							)}
+						>
+							+
+						</span>
+					</BaseAccordion.Trigger>
+				</BaseAccordion.Header>
+
+				{/* Content - collapsible */}
+				<BaseAccordion.Panel
+					className={cn(
+						"h-[var(--accordion-panel-height)] overflow-hidden",
+						"transition-[height] duration-300 ease-out",
+						"[&[data-starting-style]]:h-0 [&[data-ending-style]]:h-0",
+					)}
+				>
+					<div className={accordionPanelVariants({ variant })}>{children}</div>
+				</BaseAccordion.Panel>
+			</BaseAccordion.Item>
+		);
+	},
+);
+AccordionItem.displayName = "AccordionItem";
+
+export { Accordion, AccordionItem, accordionVariants };

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

@@ -0,0 +1,6 @@
+export {
+	Accordion,
+	AccordionItem,
+	type AccordionItemProps,
+	type AccordionProps,
+} from "./accordion";

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

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from ".";
+
+const meta: Meta<typeof Button> = {
+	title: "Atoms/Button",
+} as Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Playground: Story = {
+	render: (args) => <Button {...args}>Button</Button>,
+};
+Playground.argTypes = {
+	size: {
+		control: {
+			type: "radio",
+		},
+		options: ["sm", "default", "lg"],
+	},
+	disabled: {
+		control: {
+			type: "boolean",
+		},
+	},
+	variant: {
+		control: {
+			type: "radio",
+		},
+		options: [
+			"primary",
+			"primaryOutline",
+			"secondary",
+			"charcoal",
+			"charcoalOutline",
+			"charcoalOutlineQuiet",
+			"ivory",
+			"ivoryOutline",
+			"ivoryOutlineQuiet",
+			"gray",
+		],
+	},
+};
+Playground.args = {
+	size: "default",
+	disabled: false,
+	variant: "primary",
+};
+
+// =============================================================================
+// Semantic Variants (recommended)
+// =============================================================================
+
+export const Primary = () => <Button variant="primary">Primary</Button>;
+
+export const PrimaryOutline = () => (
+	<Button variant="primaryOutline">Primary Outline</Button>
+);
+
+export const Secondary = () => <Button variant="secondary">Secondary</Button>;
+
+// =============================================================================
+// Legacy Variants
+// =============================================================================
+
+export const Charcoal = () => <Button variant="charcoal">Charcoal</Button>;
+
+export const CharcoalOutline = () => (
+	<Button variant="charcoalOutline">Charcoal Outline</Button>
+);
+
+export const CharcoalOutlineQuiet = () => (
+	<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>
+);
+
+export const Ivory = () => <Button variant="ivory">Ivory</Button>;
+
+export const IvoryOutline = () => (
+	<Button variant="ivoryOutline">Ivory Outline</Button>
+);
+
+export const IvoryOutlineQuiet = () => (
+	<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+);
+
+export const Gray = () => <Button variant="gray">Gray</Button>;
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+export const Small = () => <Button size="sm">Small</Button>;
+
+export const Medium = () => <Button size="default">Medium</Button>;
+
+export const Large = () => <Button size="lg">Large</Button>;
+
+// =============================================================================
+// States
+// =============================================================================
+
+export const Disabled = () => <Button disabled>Disabled</Button>;

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

@@ -0,0 +1,135 @@
+import { describe, expect, test, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Button } from "./button";
+
+describe("Button", () => {
+	describe("Accessibility", () => {
+		test("has correct button role", async () => {
+			render(<Button>Click me</Button>);
+			await expect
+				.element(page.getByRole("button", { name: "Click me" }))
+				.toBeInTheDocument();
+		});
+
+		test("is focusable via keyboard", async () => {
+			render(<Button>Focusable</Button>);
+			await userEvent.keyboard("{Tab}");
+			await expect
+				.element(page.getByRole("button", { name: "Focusable" }))
+				.toHaveFocus();
+		});
+
+		test("disabled button has disabled attribute", async () => {
+			render(<Button disabled>Disabled</Button>);
+			await expect
+				.element(page.getByRole("button", { name: "Disabled" }))
+				.toBeDisabled();
+		});
+
+		test("disabled button is not focusable", async () => {
+			render(
+				<>
+					<Button disabled>Disabled</Button>
+					<Button>After</Button>
+				</>,
+			);
+			await userEvent.keyboard("{Tab}");
+			// Focus should skip the disabled button and go to the next one
+			await expect
+				.element(page.getByRole("button", { name: "After" }))
+				.toHaveFocus();
+		});
+
+		test("button with aria-label has accessible name", async () => {
+			render(<Button aria-label="Close dialog">×</Button>);
+			await expect
+				.element(page.getByRole("button", { name: "Close dialog" }))
+				.toBeInTheDocument();
+		});
+
+		test("button type defaults to button (not submit)", async () => {
+			render(<Button>Click me</Button>);
+			await expect
+				.element(page.getByRole("button", { name: "Click me" }))
+				.toHaveAttribute("type", "button");
+		});
+
+		test("button type can be set explicitly to submit", async () => {
+			render(<Button type="submit">Submit</Button>);
+			await expect
+				.element(page.getByRole("button", { name: "Submit" }))
+				.toHaveAttribute("type", "submit");
+		});
+	});
+
+	describe("Interactions", () => {
+		test("calls onClick when clicked", async () => {
+			const handleClick = vi.fn();
+			render(<Button onClick={handleClick}>Click me</Button>);
+			await page.getByRole("button", { name: "Click me" }).click();
+			expect(handleClick).toHaveBeenCalledOnce();
+		});
+
+		test("responds to Enter key when focused", async () => {
+			const handleClick = vi.fn();
+			render(<Button onClick={handleClick}>Enter key</Button>);
+			page.getByRole("button", { name: "Enter key" }).element().focus();
+			await userEvent.keyboard("{Enter}");
+			expect(handleClick).toHaveBeenCalledOnce();
+		});
+
+		test("responds to Space key when focused", async () => {
+			const handleClick = vi.fn();
+			render(<Button onClick={handleClick}>Space key</Button>);
+			page.getByRole("button", { name: "Space key" }).element().focus();
+			await userEvent.keyboard(" ");
+			expect(handleClick).toHaveBeenCalledOnce();
+		});
+
+		test("does not fire onClick when disabled", async () => {
+			const handleClick = vi.fn();
+			render(
+				<Button disabled onClick={handleClick}>
+					Disabled
+				</Button>,
+			);
+			await page
+				.getByRole("button", { name: "Disabled" })
+				.click({ force: true });
+			expect(handleClick).not.toHaveBeenCalled();
+		});
+
+		test("supports multiple clicks", async () => {
+			const handleClick = vi.fn();
+			render(<Button onClick={handleClick}>Multi click</Button>);
+			const button = page.getByRole("button", { name: "Multi click" });
+			await button.click();
+			await button.click();
+			await button.click();
+			expect(handleClick).toHaveBeenCalledTimes(3);
+		});
+	});
+
+	describe("render prop", () => {
+		test("renders as anchor element with button role when render prop is used", async () => {
+			render(
+				// biome-ignore lint/a11y/useAnchorContent: Content provided via Button children
+				<Button render={<a href="/test" />}>Link Button</Button>,
+			);
+			// Base UI keeps role="button" for accessibility when rendering as another element
+			const button = page.getByRole("button", { name: "Link Button" });
+			await expect.element(button).toBeInTheDocument();
+			await expect.element(button).toHaveAttribute("href", "/test");
+		});
+	});
+
+	describe("Variants", () => {
+		test("applies primary variant classes by default", async () => {
+			render(<Button>Default</Button>);
+			const button = page.getByRole("button", { name: "Default" });
+			// Button uses semantic token classes
+			await expect.element(button).toHaveClass(/bg-button-primary-bg/);
+		});
+	});
+});

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

@@ -0,0 +1,139 @@
+import {
+	Button as BaseButton,
+	type ButtonProps as BaseButtonProps,
+} from "@base-ui-components/react/button";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
+
+/**
+ * Button component based on Figma BaseKit / Interface / Buttons
+ *
+ * Variants:
+ * - primary: Primary filled button using semantic color tokens
+ * - primaryOutline: Outlined primary button (for light backgrounds)
+ * - secondary: Secondary button using semantic color tokens
+ * - charcoal: Dark filled button (for light backgrounds) - legacy
+ * - charcoalOutline: Dark outlined button (for light backgrounds)
+ * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
+ * - ivory: Light filled button (for dark backgrounds)
+ * - ivoryOutline: Light outlined button (for dark backgrounds)
+ * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
+ * - gray: Gray filled button (for dark backgrounds)
+ *
+ * Sizes:
+ * - lg: Large buttons
+ * - default: Medium buttons
+ * - sm: Small buttons
+ *
+ * For icon-only buttons, use the IconButton component instead.
+ *
+ * Theme Support:
+ * Pass a `theme` prop to override default colors via CSS custom properties.
+ * Surface tokens (--radius-surface-button, --surface-button-stroke) control
+ * border radius and stroke width across all variants.
+ */
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center gap-spacing-8 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 rounded-surface-button stroke-surface-button border-solid",
+	variants: {
+		variant: {
+			// Primary - uses semantic color tokens
+			primary:
+				"bg-button-primary-bg text-text-inverted hover:bg-button-primary-bg-hover border-transparent focus-visible:ring-button-primary-bg",
+			// Primary Outline - outlined primary (for light backgrounds)
+			primaryOutline:
+				"bg-transparent text-text-primary border-border-strong hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-button-primary-bg",
+			// Secondary - uses semantic color tokens
+			secondary:
+				"bg-button-secondary-bg text-text-primary border-border-subtle hover:bg-button-secondary-bg-hover focus-visible:ring-button-primary-bg",
+			// Charcoal (dark filled) - primary dark (legacy)
+			charcoal:
+				"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 border-transparent focus-visible:ring-gray-1000",
+			// Charcoal Outline - outlined dark (for light backgrounds)
+			charcoalOutline:
+				"border-border-strong 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-subtle text-alpha-black-60 hover:border-border-strong hover:text-alpha-black-80 active:bg-alpha-black-5 focus-visible:ring-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 border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
+			// Ivory Outline - outlined light (for dark backgrounds)
+			ivoryOutline:
+				"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-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",
+			// Gray - gray filled button (for dark backgrounds)
+			gray: "bg-gray-800 text-gray-100 hover:bg-gray-700 active:bg-gray-600 border-transparent focus-visible:ring-gray-700 focus-visible:ring-offset-gray-1000",
+			// Themed - uses CSS custom properties for styling
+			themed:
+				"[background:var(--btn-bg)] [color:var(--btn-text)] [border-color:var(--btn-border-color,transparent)] hover:[background:var(--btn-bg-hover,var(--btn-bg))] active:[background:var(--btn-bg-active,var(--btn-bg-hover,var(--btn-bg)))]",
+		},
+		size: {
+			// Large button - uses primitive spacing tokens
+			lg: "px-spacing-24 py-spacing-12 typography-brand-large-button-large h-spacing-48",
+			// Medium button (default) - uses primitive spacing tokens
+			default:
+				"px-spacing-20 py-spacing-10 typography-brand-medium-button-medium h-spacing-40",
+			// Small button - uses primitive spacing tokens
+			sm: "px-spacing-16 py-spacing-8 typography-brand-small-button-small h-spacing-32",
+		},
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "default",
+	},
+});
+
+export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonProps = BaseButtonProps &
+	VariantProps<typeof buttonVariants> &
+	HTMLButtonProps & {
+		/**
+		 * Theme overrides for button styling via CSS custom properties
+		 */
+		theme?: ButtonTheme;
+	};
+
+/**
+ * Check if a ButtonTheme has any actual values set
+ */
+function hasThemeValues(theme: ButtonTheme | undefined): boolean {
+	if (!theme) return false;
+	return Object.values(theme).some((v) => v !== undefined && v !== null);
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(
+		{ className, variant, size, render, nativeButton, theme, style, ...props },
+		ref,
+	) => {
+		// When render prop is provided, default nativeButton to false to suppress warnings
+		const isNativeButton = nativeButton ?? render === undefined;
+
+		// If theme has actual values, use "themed" variant to enable CSS custom property styling
+		const hasTheme = hasThemeValues(theme);
+		const effectiveVariant = hasTheme ? "themed" : variant;
+		const themeStyles = buttonThemeToStyleVars(theme);
+		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
+
+		return (
+			<BaseButton
+				className={buttonVariants({
+					variant: effectiveVariant,
+					size,
+					class: className,
+				})}
+				ref={ref}
+				render={render}
+				nativeButton={isNativeButton}
+				style={combinedStyles}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };