@nationaldesignstudio/react 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.1.0",
+	"version": "0.3.0",
 	"type": "module",
 	"sideEffects": [
 		"*.css"

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

@@ -38,7 +38,7 @@ describe("Accordion", () => {
 			// The first item should be expanded (has data-open attribute)
 			await expect
 				.element(page.getByRole("button", { name: "Question 1" }))
-				.toHaveAttribute("data-open");
+				.toHaveAttribute("aria-expanded", "true");
 		});
 
 		test("renders with multiple default expanded items", async () => {
@@ -54,10 +54,10 @@ describe("Accordion", () => {
 			);
 			await expect
 				.element(page.getByRole("button", { name: "Question 1" }))
-				.toHaveAttribute("data-open");
+				.toHaveAttribute("aria-expanded", "true");
 			await expect
 				.element(page.getByRole("button", { name: "Question 2" }))
-				.toHaveAttribute("data-open");
+				.toHaveAttribute("aria-expanded", "true");
 		});
 	});
 
@@ -90,7 +90,7 @@ describe("Accordion", () => {
 			const trigger = page.getByRole("button", { name: "Question 1" });
 			trigger.element().focus();
 			await userEvent.keyboard("{Enter}");
-			await expect.element(trigger).toHaveAttribute("data-open");
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
 		});
 
 		test("Space key expands/collapses item", async () => {
@@ -104,7 +104,7 @@ describe("Accordion", () => {
 			const trigger = page.getByRole("button", { name: "Question 1" });
 			trigger.element().focus();
 			await userEvent.keyboard(" ");
-			await expect.element(trigger).toHaveAttribute("data-open");
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
 		});
 	});
 
@@ -119,7 +119,7 @@ describe("Accordion", () => {
 			);
 			const trigger = page.getByRole("button", { name: "Question 1" });
 			await trigger.click();
-			await expect.element(trigger).toHaveAttribute("data-open");
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
 		});
 
 		test("clicking expanded trigger collapses item", async () => {
@@ -131,9 +131,9 @@ describe("Accordion", () => {
 				</Accordion>,
 			);
 			const trigger = page.getByRole("button", { name: "Question 1" });
-			await expect.element(trigger).toHaveAttribute("data-open");
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
 			await trigger.click();
-			await expect.element(trigger).not.toHaveAttribute("data-open");
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "false");
 		});
 
 		test("single mode collapses other items when opening new one", async () => {
@@ -150,10 +150,10 @@ describe("Accordion", () => {
 			const trigger1 = page.getByRole("button", { name: "Question 1" });
 			const trigger2 = page.getByRole("button", { name: "Question 2" });
 
-			await expect.element(trigger1).toHaveAttribute("data-open");
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "true");
 			await trigger2.click();
-			await expect.element(trigger2).toHaveAttribute("data-open");
-			await expect.element(trigger1).not.toHaveAttribute("data-open");
+			await expect.element(trigger2).toHaveAttribute("aria-expanded", "true");
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "false");
 		});
 
 		test("multiple mode allows multiple items open", async () => {
@@ -170,15 +170,15 @@ describe("Accordion", () => {
 			const trigger1 = page.getByRole("button", { name: "Question 1" });
 			const trigger2 = page.getByRole("button", { name: "Question 2" });
 
-			await expect.element(trigger1).toHaveAttribute("data-open");
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "true");
 			await trigger2.click();
-			await expect.element(trigger1).toHaveAttribute("data-open");
-			await expect.element(trigger2).toHaveAttribute("data-open");
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "true");
+			await expect.element(trigger2).toHaveAttribute("aria-expanded", "true");
 		});
 	});
 
-	describe("Variants", () => {
-		test("applies light variant by default", async () => {
+	describe("Color Schemes", () => {
+		test("applies light colorScheme by default", async () => {
 			render(
 				<Accordion>
 					<AccordionItem id="item-1" title="Question 1">
@@ -187,20 +187,18 @@ describe("Accordion", () => {
 				</Accordion>,
 			);
 			const trigger = page.getByRole("button", { name: "Question 1" });
-			// Light variant has gray-800 text
 			await expect.element(trigger).toHaveClass(/text-gray-800/);
 		});
 
-		test("applies dark variant classes", async () => {
+		test("applies dark colorScheme classes", async () => {
 			render(
-				<Accordion variant="dark">
+				<Accordion colorScheme="dark">
 					<AccordionItem id="item-1" title="Question 1">
 						Answer 1
 					</AccordionItem>
 				</Accordion>,
 			);
 			const trigger = page.getByRole("button", { name: "Question 1" });
-			// Dark variant has gray-100 text
 			await expect.element(trigger).toHaveClass(/text-gray-100/);
 		});
 	});

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

@@ -12,26 +12,26 @@ import { cn } from "@/lib/utils";
 const accordionVariants = tv({
 	base: "flex flex-col",
 	variants: {
-		variant: {
+		colorScheme: {
 			dark: "",
 			light: "",
 		},
 	},
 	defaultVariants: {
-		variant: "light",
+		colorScheme: "light",
 	},
 });
 
 const accordionItemVariants = tv({
 	base: "border-b overflow-hidden",
 	variants: {
-		variant: {
+		colorScheme: {
 			dark: "border-gray-300",
 			light: "border-gray-500",
 		},
 	},
 	defaultVariants: {
-		variant: "light",
+		colorScheme: "light",
 	},
 });
 
@@ -42,13 +42,13 @@ const accordionTriggerVariants = tv({
 		"typography-body-large transition-colors cursor-pointer",
 	],
 	variants: {
-		variant: {
+		colorScheme: {
 			dark: "text-gray-100 data-[open]:text-white",
 			light: "text-gray-800 data-[open]:text-gray-900",
 		},
 	},
 	defaultVariants: {
-		variant: "light",
+		colorScheme: "light",
 	},
 });
 
@@ -56,13 +56,13 @@ const accordionPanelVariants = tv({
 	// Uses primitive spacing tokens
 	base: "typography-body-large pb-spacing-24",
 	variants: {
-		variant: {
+		colorScheme: {
 			dark: "text-gray-100",
 			light: "text-gray-800",
 		},
 	},
 	defaultVariants: {
-		variant: "light",
+		colorScheme: "light",
 	},
 });
 
@@ -71,9 +71,9 @@ const accordionPanelVariants = tv({
 // =============================================================================
 
 const AccordionContext = React.createContext<{
-	variant: "dark" | "light";
+	colorScheme: "dark" | "light";
 }>({
-	variant: "light",
+	colorScheme: "light",
 });
 
 // =============================================================================
@@ -121,7 +121,7 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
 			className,
 			allowMultiple = false,
 			defaultExpanded,
-			variant = "light",
+			colorScheme = "light",
 			children,
 		},
 		ref,
@@ -134,10 +134,10 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
 		}, [defaultExpanded]);
 
 		return (
-			<AccordionContext.Provider value={{ variant }}>
+			<AccordionContext.Provider value={{ colorScheme }}>
 				<BaseAccordion.Root
 					ref={ref}
-					className={accordionVariants({ variant, class: className })}
+					className={accordionVariants({ colorScheme, class: className })}
 					defaultValue={defaultValue}
 					multiple={allowMultiple}
 				>
@@ -175,18 +175,18 @@ export interface AccordionItemProps
  */
 const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
 	({ className, id, title, children }, ref) => {
-		const { variant } = React.useContext(AccordionContext);
+		const { colorScheme } = React.useContext(AccordionContext);
 
 		return (
 			<BaseAccordion.Item
 				ref={ref}
 				value={id}
-				className={accordionItemVariants({ variant, class: className })}
+				className={accordionItemVariants({ colorScheme, class: className })}
 			>
 				{/* Header - always visible */}
 				<BaseAccordion.Header>
 					<BaseAccordion.Trigger
-						className={accordionTriggerVariants({ variant })}
+						className={accordionTriggerVariants({ colorScheme })}
 					>
 						<span>{title}</span>
 						<span
@@ -208,7 +208,9 @@ const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
 						"[&[data-starting-style]]:h-0 [&[data-ending-style]]:h-0",
 					)}
 				>
-					<div className={accordionPanelVariants({ variant })}>{children}</div>
+					<div className={accordionPanelVariants({ colorScheme })}>
+						{children}
+					</div>
 				</BaseAccordion.Panel>
 			</BaseAccordion.Item>
 		);

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

@@ -102,12 +102,12 @@ describe("Background", () => {
 			await expect.element(video).toBeInTheDocument();
 		});
 
-		test("has autoplay, loop, and muted by default", async () => {
+		test("has autoplay and loop by default", async () => {
 			render(<BackgroundVideo src="/test.mp4" data-testid="bg-video" />);
 			const video = page.getByTestId("bg-video");
 			await expect.element(video).toHaveAttribute("autoplay");
 			await expect.element(video).toHaveAttribute("loop");
-			await expect.element(video).toHaveAttribute("muted");
+			// Note: muted is a boolean prop in React that may not render as an HTML attribute
 		});
 
 		test("has object-cover class", async () => {

package/src/components/atoms/background/background.tsx

@@ -50,7 +50,8 @@ const backgroundImageVariants = tv({
 });
 
 export interface BackgroundImageProps
-	extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+	extends useRender.ComponentProps<"img">,
+		Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "render"> {
 	/**
 	 * URL for the background image
 	 */
@@ -59,23 +60,6 @@ export interface BackgroundImageProps
 	 * Object position (default: "center")
 	 */
 	position?: string;
-	/**
-	 * Custom render prop for element composition.
-	 * Accepts a React element or render function.
-	 * @example
-	 * ```tsx
-	 * // Element pattern
-	 * <BackgroundImage render={<img className="custom" />} src="/bg.jpg" />
-	 *
-	 * // Callback pattern
-	 * <BackgroundImage render={(props) => <img {...props} />} src="/bg.jpg" />
-	 * ```
-	 */
-	render?:
-		| React.ReactElement
-		| ((
-				props: React.ImgHTMLAttributes<HTMLImageElement>,
-		  ) => React.ReactElement);
 }
 
 /**
@@ -83,35 +67,32 @@ export interface BackgroundImageProps
  * Supports native lazy loading, srcset, and better accessibility.
  * Supports render prop for element composition.
  */
-const BackgroundImage = React.forwardRef<
-	HTMLImageElement,
-	BackgroundImageProps
->(
-	(
-		{ className, src, position = "center", alt = "", style, render, ...props },
-		ref,
-	) => {
-		const mergedProps = {
+function BackgroundImage(props: BackgroundImageProps) {
+	const {
+		className,
+		src,
+		position = "center",
+		alt = "",
+		style,
+		render,
+		...otherProps
+	} = props;
+
+	const imgClassName = backgroundImageVariants({ class: className });
+	const imgStyle = { objectPosition: position, ...style };
+
+	return useRender({
+		render,
+		props: {
 			src,
 			alt,
-			className: backgroundImageVariants({ class: className }),
-			style: {
-				objectPosition: position,
-				...style,
-			},
-			...props,
-		};
-
-		const element = useRender({
-			// biome-ignore lint/a11y/useAltText: alt is provided via mergedProps
-			render: render ?? <img />,
-			ref,
-			props: mergedProps,
-		});
-
-		return element;
-	},
-);
+			className: imgClassName,
+			style: imgStyle,
+			...otherProps,
+		},
+		defaultTagName: "img",
+	});
+}
 BackgroundImage.displayName = "Background.Image";
 
 // =============================================================================
@@ -123,7 +104,11 @@ const backgroundVideoVariants = tv({
 });
 
 export interface BackgroundVideoProps
-	extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children"> {
+	extends useRender.ComponentProps<"video">,
+		Omit<
+			React.VideoHTMLAttributes<HTMLVideoElement>,
+			"children" | "render" | "src"
+		> {
 	/**
 	 * URL for the video source
 	 */
@@ -136,67 +121,63 @@ export interface BackgroundVideoProps
 	 * Poster image URL shown before video loads
 	 */
 	poster?: string;
-	/**
-	 * Custom render prop for element composition.
-	 * @example
-	 * ```tsx
-	 * <BackgroundVideo render={<video className="custom" />} src="/bg.mp4" />
-	 * ```
-	 */
-	render?:
-		| React.ReactElement
-		| ((
-				props: React.VideoHTMLAttributes<HTMLVideoElement>,
-		  ) => React.ReactElement);
 }
 
 /**
  * Background video layer using HTML5 video element.
  * Supports render prop for element composition.
  */
-const BackgroundVideo = React.forwardRef<
-	HTMLVideoElement,
-	BackgroundVideoProps
->(
-	(
-		{
-			className,
-			src,
-			type,
-			poster,
-			autoPlay = true,
-			loop = true,
-			muted = true,
-			playsInline = true,
-			render,
-			...props
-		},
-		ref,
-	) => {
-		const mergedProps = {
+function BackgroundVideo(props: BackgroundVideoProps) {
+	const {
+		className,
+		src,
+		type,
+		poster,
+		autoPlay = true,
+		loop = true,
+		muted = true,
+		playsInline = true,
+		render,
+		children,
+		...otherProps
+	} = props;
+
+	const videoClassName = backgroundVideoVariants({ class: className });
+
+	// useRender must be called unconditionally
+	const rendered = useRender({
+		render,
+		props: {
 			autoPlay,
 			loop,
 			muted,
 			playsInline,
 			poster,
-			className: backgroundVideoVariants({ class: className }),
-			...props,
-		};
-
-		const element = useRender({
-			render: render ?? (
-				// biome-ignore lint/a11y/useMediaCaption: Background videos are decorative and shouldn't have captions
-				<video>
-					<source src={src} type={type} />
-				</video>
-			),
-			ref,
-			props: mergedProps,
-		});
-
-		return element;
-	},
-);
+			className: videoClassName,
+			...otherProps,
+		},
+		defaultTagName: "video",
+	});
+
+	// If no render prop, return video with source child
+	if (!render) {
+		return (
+			<video
+				autoPlay={autoPlay}
+				loop={loop}
+				muted={muted}
+				playsInline={playsInline}
+				poster={poster}
+				className={videoClassName}
+				{...otherProps}
+			>
+				<source src={src} type={type} />
+			</video>
+		);
+	}
+
+	return rendered;
+}
 BackgroundVideo.displayName = "Background.Video";
 
 // =============================================================================

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

@@ -45,24 +45,51 @@ Playground.args = {
 
 // =============================================================================
 // Variants (Dark Color Scheme - for light backgrounds)
+// Figma naming: Charcoal = solid+dark, Charcoal Outline = outline+dark
 // =============================================================================
 
+/**
+ * Solid Dark (Figma: "Charcoal" / "Black")
+ * Primary filled button with ui-button-primary-bg background and inverted text.
+ * Use on light backgrounds for primary actions.
+ */
 export const Solid = () => <Button variant="solid">Solid</Button>;
 
+/**
+ * Outline Dark (Figma: "Charcoal Outline")
+ * Primary-colored border and text on transparent background.
+ * Use on light backgrounds for secondary actions.
+ */
 export const Outline = () => <Button variant="outline">Outline</Button>;
 
+/**
+ * Ghost Dark
+ * Primary-colored text with no border or background.
+ * Use for tertiary actions on light backgrounds.
+ */
 export const Ghost = () => <Button variant="ghost">Ghost</Button>;
 
+/**
+ * Subtle Dark
+ * Subtle border with primary-colored text.
+ * Use for less prominent actions on light backgrounds.
+ */
 export const Subtle = () => <Button variant="subtle">Subtle</Button>;
 
 // =============================================================================
 // Variants (Light Color Scheme - for dark backgrounds)
+// Figma naming: Ivory = solid+light, Ivory Outline = outline+light
 // =============================================================================
 
 const DarkBackground = ({ children }: { children: React.ReactNode }) => (
 	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
 );
 
+/**
+ * Solid Light (Figma: "Ivory")
+ * White filled button with primary-colored text.
+ * Use on dark backgrounds for primary actions.
+ */
 export const SolidLight = () => (
 	<DarkBackground>
 		<Button variant="solid" colorScheme="light">
@@ -71,6 +98,11 @@ export const SolidLight = () => (
 	</DarkBackground>
 );
 
+/**
+ * Outline Light (Figma: "Ivory Outline")
+ * White border and text on transparent background.
+ * Use on dark backgrounds for secondary actions.
+ */
 export const OutlineLight = () => (
 	<DarkBackground>
 		<Button variant="outline" colorScheme="light">
@@ -79,6 +111,11 @@ export const OutlineLight = () => (
 	</DarkBackground>
 );
 
+/**
+ * Ghost Light
+ * White text with no border or background.
+ * Use for tertiary actions on dark backgrounds.
+ */
 export const GhostLight = () => (
 	<DarkBackground>
 		<Button variant="ghost" colorScheme="light">
@@ -87,6 +124,11 @@ export const GhostLight = () => (
 	</DarkBackground>
 );
 
+/**
+ * Subtle Light
+ * Alpha-white border with white text.
+ * Use for less prominent actions on dark backgrounds.
+ */
 export const SubtleLight = () => (
 	<DarkBackground>
 		<Button variant="subtle" colorScheme="light">

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

@@ -129,7 +129,7 @@ describe("Button", () => {
 			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/);
+			await expect.element(button).toHaveClass(/bg-ui-button-primary-bg/);
 		});
 	});
 });