@nationaldesignstudio/react 0.0.19 → 0.2.0

package/dist/tokens.css

@@ -1448,26 +1448,26 @@
 
 :root {
   /* Semantic Color Tokens */
-  --color-accent-brand-soft: color(srgb 0.7686 0.6588 0.4392);
-  --color-accent-brand: color(srgb 0.651 0.5451 0.3686);
-  --color-bg-muted: color(srgb 0.9961 0.9922 0.9765);
-  --color-bg-page: color(srgb 0.9961 0.9922 0.9765);
-  --color-bg-section: color(srgb 0.9608 0.9569 0.9373);
-  --color-border-divider: color(srgb 0.149 0.1569 0.2941 / 0.1);
-  --color-border-focus: color(srgb 0.651 0.5451 0.3686);
-  --color-border-strong: color(srgb 0.149 0.1569 0.2941 / 0.2);
-  --color-border-subtle: color(srgb 0.149 0.1569 0.2941 / 0.1);
-  --color-button-primary-bg-hover: color(srgb 0.149 0.1569 0.2941);
-  --color-button-primary-bg: color(srgb 0.0667 0.0745 0.149);
+  --color-accent-brand-soft: color(srgb 0.9686 0.8078 0.749);
+  --color-accent-brand: color(srgb 0.9216 0.3098 0.1529);
+  --color-bg-muted: color(srgb 1 1 1);
+  --color-bg-page: color(srgb 0.9804 0.9804 0.9804);
+  --color-bg-section: color(srgb 0.9608 0.9608 0.9608);
+  --color-border-divider: color(srgb 0 0 0 / 0.1);
+  --color-border-focus: color(srgb 0.9216 0.3098 0.1529);
+  --color-border-strong: color(srgb 0 0 0 / 0.2);
+  --color-border-subtle: color(srgb 0 0 0 / 0.1);
+  --color-button-primary-bg-hover: color(srgb 0.4588 0.4588 0.4588);
+  --color-button-primary-bg: color(srgb 0.0784 0.0784 0.0784);
   --color-button-secondary-bg-hover: color(srgb 1 1 1);
   --color-button-secondary-bg: color(srgb 1 1 1);
-  --color-card-background: color(srgb 0.5412 0.4353 0.2588);
-  --color-text-inverted: color(srgb 0.9961 0.9922 0.9765);
+  --color-card-background: color(srgb 1 1 1);
+  --color-text-inverted: color(srgb 0.9608 0.9608 0.9608);
   --color-text-link-hover: color(srgb 0.3804 0.3804 0.3804);
   --color-text-link: color(srgb 0.0784 0.0784 0.0784);
-  --color-text-muted: color(srgb 0.651 0.5451 0.3686);
-  --color-text-primary: color(srgb 0.0667 0.0745 0.149);
-  --color-text-secondary: color(srgb 0.0667 0.0745 0.149);
+  --color-text-muted: color(srgb 0.4588 0.4588 0.4588);
+  --color-text-primary: color(srgb 0.0784 0.0784 0.0784);
+  --color-text-secondary: color(srgb 0.2588 0.2588 0.2588);
   --radius-surface-button: var(--radius-6);
   --radius-surface-card: var(--radius-4);
   --surface-button-stroke: 1px;

package/package.json

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

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

@@ -0,0 +1,231 @@
+import { describe, expect, test } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Accordion, AccordionItem } from "./accordion";
+
+describe("Accordion", () => {
+	describe("Rendering", () => {
+		test("renders accordion with items", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toBeInTheDocument();
+			await expect
+				.element(page.getByRole("button", { name: "Question 2" }))
+				.toBeInTheDocument();
+		});
+
+		test("renders with default expanded item", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			// The first item should be expanded (has data-open attribute)
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveAttribute("aria-expanded", "true");
+		});
+
+		test("renders with multiple default expanded items", async () => {
+			render(
+				<Accordion allowMultiple defaultExpanded={["item-1", "item-2"]}>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveAttribute("aria-expanded", "true");
+			await expect
+				.element(page.getByRole("button", { name: "Question 2" }))
+				.toHaveAttribute("aria-expanded", "true");
+		});
+	});
+
+	describe("Keyboard Navigation", () => {
+		test("items are focusable via Tab", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await userEvent.keyboard("{Tab}");
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveFocus();
+		});
+
+		test("Enter key expands/collapses item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			trigger.element().focus();
+			await userEvent.keyboard("{Enter}");
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
+		});
+
+		test("Space key expands/collapses item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			trigger.element().focus();
+			await userEvent.keyboard(" ");
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
+		});
+	});
+
+	describe("Click Interactions", () => {
+		test("clicking trigger expands item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await trigger.click();
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
+		});
+
+		test("clicking expanded trigger collapses item", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "true");
+			await trigger.click();
+			await expect.element(trigger).toHaveAttribute("aria-expanded", "false");
+		});
+
+		test("single mode collapses other items when opening new one", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger1 = page.getByRole("button", { name: "Question 1" });
+			const trigger2 = page.getByRole("button", { name: "Question 2" });
+
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "true");
+			await trigger2.click();
+			await expect.element(trigger2).toHaveAttribute("aria-expanded", "true");
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "false");
+		});
+
+		test("multiple mode allows multiple items open", async () => {
+			render(
+				<Accordion allowMultiple defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger1 = page.getByRole("button", { name: "Question 1" });
+			const trigger2 = page.getByRole("button", { name: "Question 2" });
+
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "true");
+			await trigger2.click();
+			await expect.element(trigger1).toHaveAttribute("aria-expanded", "true");
+			await expect.element(trigger2).toHaveAttribute("aria-expanded", "true");
+		});
+	});
+
+	describe("Color Schemes", () => {
+		test("applies light colorScheme by default", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await expect.element(trigger).toHaveClass(/text-gray-800/);
+		});
+
+		test("applies dark colorScheme classes", async () => {
+			render(
+				<Accordion colorScheme="dark">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await expect.element(trigger).toHaveClass(/text-gray-100/);
+		});
+	});
+
+	describe("Content", () => {
+		test("displays title text in trigger", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Custom Title">
+						Content here
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect.element(page.getByText("Custom Title")).toBeInTheDocument();
+		});
+
+		test("displays content when expanded", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer content here
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByText("Answer content here"))
+				.toBeInTheDocument();
+		});
+	});
+});

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: "dark",
+		colorScheme: "light",
 	},
 });
 
 const accordionItemVariants = tv({
 	base: "border-b overflow-hidden",
 	variants: {
-		variant: {
+		colorScheme: {
 			dark: "border-gray-300",
 			light: "border-gray-500",
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		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: "dark",
+		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: "dark",
+		colorScheme: "light",
 	},
 });
 
@@ -71,9 +71,9 @@ const accordionPanelVariants = tv({
 // =============================================================================
 
 const AccordionContext = React.createContext<{
-	variant: "dark" | "light";
+	colorScheme: "dark" | "light";
 }>({
-	variant: "dark",
+	colorScheme: "light",
 });
 
 // =============================================================================
@@ -100,8 +100,8 @@ export interface AccordionProps
  * Built on Base UI's Accordion primitive.
  *
  * Variants:
- * - dark: Dark theme styling (default)
- * - light: Light theme styling
+ * - light: Light theme styling (default)
+ * - dark: Dark theme styling
  *
  * @example
  * ```tsx
@@ -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: variant ?? "dark" }}>
+			<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

@@ -0,0 +1,213 @@
+import { describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import {
+	Background,
+	BackgroundGradient,
+	BackgroundImage,
+	BackgroundOverlay,
+	BackgroundVideo,
+} from "./background";
+
+describe("Background", () => {
+	describe("Background Container", () => {
+		test("renders as a div with absolute positioning", async () => {
+			render(<Background data-testid="bg-container">Content</Background>);
+			const container = page.getByTestId("bg-container");
+			await expect.element(container).toBeInTheDocument();
+			await expect.element(container).toHaveClass(/absolute/);
+			await expect.element(container).toHaveClass(/inset-0/);
+		});
+
+		test("has aria-hidden attribute", async () => {
+			render(<Background data-testid="bg-container" />);
+			await expect
+				.element(page.getByTestId("bg-container"))
+				.toHaveAttribute("aria-hidden", "true");
+		});
+
+		test("accepts custom className", async () => {
+			render(<Background data-testid="bg" className="custom-class" />);
+			await expect.element(page.getByTestId("bg")).toHaveClass(/custom-class/);
+		});
+	});
+
+	describe("BackgroundImage", () => {
+		test("renders an img element with src", async () => {
+			render(<BackgroundImage src="/test-image.jpg" data-testid="bg-img" />);
+			const img = page.getByTestId("bg-img");
+			await expect.element(img).toBeInTheDocument();
+			await expect.element(img).toHaveAttribute("src", "/test-image.jpg");
+		});
+
+		test("has object-cover class for proper fitting", async () => {
+			render(<BackgroundImage src="/test.jpg" data-testid="bg-img" />);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveClass(/object-cover/);
+		});
+
+		test("sets default alt to empty string for decorative images", async () => {
+			render(<BackgroundImage src="/test.jpg" data-testid="bg-img" />);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveAttribute("alt", "");
+		});
+
+		test("accepts custom alt text", async () => {
+			render(
+				<BackgroundImage
+					src="/test.jpg"
+					alt="Custom alt text"
+					data-testid="bg-img"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveAttribute("alt", "Custom alt text");
+		});
+
+		test("applies custom position via style", async () => {
+			render(
+				<BackgroundImage
+					src="/test.jpg"
+					position="top left"
+					data-testid="bg-img"
+				/>,
+			);
+			const img = page.getByTestId("bg-img");
+			// Check the style attribute contains the position
+			await expect.element(img).toHaveStyle({ objectPosition: "top left" });
+		});
+
+		test("supports render prop for custom element", async () => {
+			render(
+				<BackgroundImage
+					src="/test.jpg"
+					// biome-ignore lint/a11y/useAltText: Test case for custom element
+					render={<img className="custom-img-class" />}
+					data-testid="bg-img"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveClass(/custom-img-class/);
+		});
+	});
+
+	describe("BackgroundVideo", () => {
+		test("renders a video element", async () => {
+			render(<BackgroundVideo src="/test-video.mp4" data-testid="bg-video" />);
+			const video = page.getByTestId("bg-video");
+			await expect.element(video).toBeInTheDocument();
+		});
+
+		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");
+			// Note: muted is a boolean prop in React that may not render as an HTML attribute
+		});
+
+		test("has object-cover class", async () => {
+			render(<BackgroundVideo src="/test.mp4" data-testid="bg-video" />);
+			await expect
+				.element(page.getByTestId("bg-video"))
+				.toHaveClass(/object-cover/);
+		});
+
+		test("accepts poster prop", async () => {
+			render(
+				<BackgroundVideo
+					src="/test.mp4"
+					poster="/poster.jpg"
+					data-testid="bg-video"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-video"))
+				.toHaveAttribute("poster", "/poster.jpg");
+		});
+	});
+
+	describe("BackgroundOverlay", () => {
+		test("renders with default opacity", async () => {
+			render(<BackgroundOverlay data-testid="bg-overlay" />);
+			const overlay = page.getByTestId("bg-overlay");
+			await expect.element(overlay).toBeInTheDocument();
+			await expect.element(overlay).toHaveStyle({ opacity: "0.4" });
+		});
+
+		test("accepts custom opacity", async () => {
+			render(<BackgroundOverlay opacity={0.7} data-testid="bg-overlay" />);
+			await expect
+				.element(page.getByTestId("bg-overlay"))
+				.toHaveStyle({ opacity: "0.7" });
+		});
+
+		test("has aria-hidden attribute", async () => {
+			render(<BackgroundOverlay data-testid="bg-overlay" />);
+			await expect
+				.element(page.getByTestId("bg-overlay"))
+				.toHaveAttribute("aria-hidden", "true");
+		});
+	});
+
+	describe("BackgroundGradient", () => {
+		test("renders with default gradient direction", async () => {
+			render(<BackgroundGradient data-testid="bg-gradient" />);
+			const gradient = page.getByTestId("bg-gradient");
+			await expect.element(gradient).toBeInTheDocument();
+		});
+
+		test("has aria-hidden attribute", async () => {
+			render(<BackgroundGradient data-testid="bg-gradient" />);
+			await expect
+				.element(page.getByTestId("bg-gradient"))
+				.toHaveAttribute("aria-hidden", "true");
+		});
+
+		test("accepts custom gradient via gradient prop", async () => {
+			render(
+				<BackgroundGradient
+					gradient="linear-gradient(45deg, red, blue)"
+					data-testid="bg-gradient"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-gradient"))
+				.toHaveStyle({ backgroundImage: "linear-gradient(45deg, red, blue)" });
+		});
+	});
+
+	describe("Compound Component", () => {
+		test("Background.Image is accessible via dot notation", async () => {
+			render(
+				<Background data-testid="bg-container">
+					<Background.Image src="/test.jpg" data-testid="bg-img" />
+				</Background>,
+			);
+			await expect
+				.element(page.getByTestId("bg-container"))
+				.toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-img")).toBeInTheDocument();
+		});
+
+		test("can compose multiple background layers", async () => {
+			render(
+				<Background data-testid="bg-container">
+					<Background.Image src="/test.jpg" data-testid="bg-img" />
+					<Background.Overlay data-testid="bg-overlay" />
+					<Background.Gradient data-testid="bg-gradient" />
+				</Background>,
+			);
+			await expect
+				.element(page.getByTestId("bg-container"))
+				.toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-img")).toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-overlay")).toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-gradient")).toBeInTheDocument();
+		});
+	});
+});