@nationaldesignstudio/react 0.3.0 → 0.5.1

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

@@ -0,0 +1,348 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button";
+import {
+	Tooltip,
+	TooltipArrow,
+	TooltipParts,
+	TooltipPopup,
+	TooltipPortal,
+	TooltipPositioner,
+	TooltipProvider,
+	TooltipTrigger,
+} from ".";
+
+const meta: Meta<typeof Tooltip> = {
+	title: "Atoms/Tooltip",
+	component: Tooltip,
+	argTypes: {
+		side: {
+			control: { type: "select" },
+			options: ["top", "bottom", "left", "right"],
+		},
+		align: {
+			control: { type: "select" },
+			options: ["start", "center", "end"],
+		},
+		sideOffset: {
+			control: { type: "number" },
+		},
+		delay: {
+			control: { type: "number" },
+		},
+		closeDelay: {
+			control: { type: "number" },
+		},
+		showArrow: {
+			control: { type: "boolean" },
+		},
+	},
+	args: {
+		side: "top",
+		align: "center",
+		sideOffset: 8,
+		showArrow: true,
+	},
+	decorators: [
+		(Story) => (
+			<div className="flex min-h-[200px] items-center justify-center p-48">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+// =============================================================================
+// Playground
+// =============================================================================
+
+export const Playground: Story = {
+	render: (args) => (
+		<Tooltip {...args} content="This is a tooltip">
+			<Button>Hover me</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// Basic Examples
+// =============================================================================
+
+/**
+ * Basic tooltip with default settings.
+ */
+export const Default: Story = {
+	render: () => (
+		<Tooltip content="Save your changes">
+			<Button>Save</Button>
+		</Tooltip>
+	),
+};
+
+/**
+ * Tooltip without arrow.
+ */
+export const NoArrow: Story = {
+	render: () => (
+		<Tooltip content="No arrow here" showArrow={false}>
+			<Button>Hover me</Button>
+		</Tooltip>
+	),
+};
+
+/**
+ * Tooltip with longer content.
+ */
+export const LongContent: Story = {
+	render: () => (
+		<Tooltip content="This is a longer tooltip that provides more detailed information about the element.">
+			<Button>Hover for details</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// Positioning
+// =============================================================================
+
+/**
+ * Tooltip positioned on all four sides.
+ */
+export const AllPositions: Story = {
+	render: () => (
+		<div className="flex flex-col items-center gap-48">
+			<Tooltip content="Top tooltip" side="top">
+				<Button variant="outline">Top</Button>
+			</Tooltip>
+			<div className="flex items-center gap-48">
+				<Tooltip content="Left tooltip" side="left">
+					<Button variant="outline">Left</Button>
+				</Tooltip>
+				<Tooltip content="Right tooltip" side="right">
+					<Button variant="outline">Right</Button>
+				</Tooltip>
+			</div>
+			<Tooltip content="Bottom tooltip" side="bottom">
+				<Button variant="outline">Bottom</Button>
+			</Tooltip>
+		</div>
+	),
+};
+
+export const Top: Story = {
+	render: () => (
+		<Tooltip content="Top position" side="top">
+			<Button>Top</Button>
+		</Tooltip>
+	),
+};
+
+export const Bottom: Story = {
+	render: () => (
+		<Tooltip content="Bottom position" side="bottom">
+			<Button>Bottom</Button>
+		</Tooltip>
+	),
+};
+
+export const Left: Story = {
+	render: () => (
+		<Tooltip content="Left position" side="left">
+			<Button>Left</Button>
+		</Tooltip>
+	),
+};
+
+export const Right: Story = {
+	render: () => (
+		<Tooltip content="Right position" side="right">
+			<Button>Right</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// Alignment
+// =============================================================================
+
+/**
+ * Tooltip alignment options.
+ */
+export const Alignment: Story = {
+	render: () => (
+		<div className="flex flex-col gap-24">
+			<div className="flex items-center gap-24">
+				<Tooltip content="Aligned to start" side="bottom" align="start">
+					<Button variant="secondary" className="w-144">
+						Start
+					</Button>
+				</Tooltip>
+				<Tooltip content="Aligned to center" side="bottom" align="center">
+					<Button variant="secondary" className="w-144">
+						Center
+					</Button>
+				</Tooltip>
+				<Tooltip content="Aligned to end" side="bottom" align="end">
+					<Button variant="secondary" className="w-144">
+						End
+					</Button>
+				</Tooltip>
+			</div>
+		</div>
+	),
+};
+
+// =============================================================================
+// Delays
+// =============================================================================
+
+/**
+ * Tooltip with custom open delay.
+ */
+export const CustomDelay: Story = {
+	render: () => (
+		<Tooltip content="Appears after 1 second" delay={1000}>
+			<Button>1s delay</Button>
+		</Tooltip>
+	),
+};
+
+/**
+ * Tooltip with close delay.
+ */
+export const CloseDelay: Story = {
+	render: () => (
+		<Tooltip content="Stays visible for 500ms" closeDelay={500}>
+			<Button>Close delay</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// With Provider (Shared Delays)
+// =============================================================================
+
+/**
+ * Multiple tooltips with shared delay using TooltipProvider.
+ * After opening one tooltip, others open instantly.
+ */
+export const WithProvider: Story = {
+	render: () => (
+		<TooltipProvider delay={300} closeDelay={0}>
+			<div className="flex items-center gap-16">
+				<Tooltip content="First tooltip">
+					<Button variant="outline">First</Button>
+				</Tooltip>
+				<Tooltip content="Second tooltip">
+					<Button variant="outline">Second</Button>
+				</Tooltip>
+				<Tooltip content="Third tooltip">
+					<Button variant="outline">Third</Button>
+				</Tooltip>
+			</div>
+		</TooltipProvider>
+	),
+};
+
+// =============================================================================
+// Compound Component API
+// =============================================================================
+
+/**
+ * Using the compound component API for full control.
+ */
+export const CompoundAPI: Story = {
+	render: () => (
+		<TooltipParts>
+			<TooltipTrigger>
+				<Button variant="primary">Custom Tooltip</Button>
+			</TooltipTrigger>
+			<TooltipPortal>
+				<TooltipPositioner side="bottom" sideOffset={12}>
+					<TooltipPopup>
+						<TooltipArrow />
+						Built with compound components
+					</TooltipPopup>
+				</TooltipPositioner>
+			</TooltipPortal>
+		</TooltipParts>
+	),
+};
+
+// =============================================================================
+// On Different Elements
+// =============================================================================
+
+/**
+ * Tooltip on various trigger elements.
+ */
+export const OnDifferentElements: Story = {
+	render: () => (
+		<div className="flex items-center gap-24">
+			<Tooltip content="Button tooltip">
+				<Button>Button</Button>
+			</Tooltip>
+
+			<Tooltip content="Icon tooltip">
+				<button
+					type="button"
+					className="flex size-36 items-center justify-center rounded-surface-ui-small bg-bg-section text-text-primary hover:bg-bg-section-secondary"
+				>
+					<svg
+						className="size-20"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<span className="sr-only">Info</span>
+				</button>
+			</Tooltip>
+
+			<Tooltip content="Text tooltip">
+				<span className="cursor-help border-b border-dashed border-fg-muted text-text-secondary">
+					Hover this text
+				</span>
+			</Tooltip>
+		</div>
+	),
+};
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+/**
+ * Controlled tooltip with external state management.
+ */
+export const Controlled: Story = {
+	render: function ControlledStory() {
+		const [open, setOpen] = React.useState(false);
+
+		return (
+			<div className="flex flex-col items-center gap-16">
+				<Tooltip
+					content="Controlled tooltip"
+					open={open}
+					onOpenChange={setOpen}
+				>
+					<Button>Hover or click button below</Button>
+				</Tooltip>
+				<Button variant="outline" onClick={() => setOpen(!open)}>
+					{open ? "Close tooltip" : "Open tooltip"}
+				</Button>
+			</div>
+		);
+	},
+};
+
+import * as React from "react";

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

@@ -0,0 +1,363 @@
+import { describe, expect, test, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Button } from "../button";
+import {
+	Tooltip,
+	TooltipArrow,
+	TooltipParts,
+	TooltipPopup,
+	TooltipPortal,
+	TooltipPositioner,
+	TooltipProvider,
+	TooltipTrigger,
+} from "./tooltip";
+
+describe("Tooltip", () => {
+	describe("Accessibility", () => {
+		test("trigger element is accessible", async () => {
+			render(
+				<Tooltip content="Helpful tip">
+					<Button>Hover me</Button>
+				</Tooltip>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Hover me" }))
+				.toBeInTheDocument();
+		});
+
+		test("tooltip has correct role when visible", async () => {
+			render(
+				<Tooltip content="Helpful tip" defaultOpen>
+					<Button>Hover me</Button>
+				</Tooltip>,
+			);
+			await expect
+				.element(page.getByRole("tooltip", { name: "Helpful tip" }))
+				.toBeInTheDocument();
+		});
+
+		test("trigger element is focusable", async () => {
+			render(
+				<Tooltip content="Helpful tip">
+					<Button>Focus me</Button>
+				</Tooltip>,
+			);
+			await userEvent.keyboard("{Tab}");
+			await expect
+				.element(page.getByRole("button", { name: "Focus me" }))
+				.toHaveFocus();
+		});
+	});
+
+	describe("Interactions", () => {
+		test("shows tooltip on hover", async () => {
+			render(
+				<Tooltip content="Hover tooltip">
+					<Button>Hover me</Button>
+				</Tooltip>,
+			);
+
+			// Tooltip should not be visible initially
+			await expect
+				.element(page.getByRole("tooltip", { name: "Hover tooltip" }))
+				.not.toBeInTheDocument();
+
+			// Hover over the trigger
+			await page.getByRole("button", { name: "Hover me" }).hover();
+
+			// Tooltip should now be visible
+			await expect
+				.element(page.getByRole("tooltip", { name: "Hover tooltip" }))
+				.toBeInTheDocument();
+		});
+
+		test("shows tooltip on focus", async () => {
+			render(
+				<Tooltip content="Focus tooltip">
+					<Button>Focus me</Button>
+				</Tooltip>,
+			);
+
+			// Tooltip should not be visible initially
+			await expect
+				.element(page.getByRole("tooltip", { name: "Focus tooltip" }))
+				.not.toBeInTheDocument();
+
+			// Focus the trigger
+			page.getByRole("button", { name: "Focus me" }).element().focus();
+
+			// Tooltip should now be visible
+			await expect
+				.element(page.getByRole("tooltip", { name: "Focus tooltip" }))
+				.toBeInTheDocument();
+		});
+
+		test("hides tooltip on blur", async () => {
+			render(
+				<>
+					<Tooltip content="Focus tooltip">
+						<Button>Focus me</Button>
+					</Tooltip>
+					<Button>Other button</Button>
+				</>,
+			);
+
+			// Focus the trigger to show tooltip
+			page.getByRole("button", { name: "Focus me" }).element().focus();
+			await expect
+				.element(page.getByRole("tooltip", { name: "Focus tooltip" }))
+				.toBeInTheDocument();
+
+			// Blur by focusing another element
+			page.getByRole("button", { name: "Other button" }).element().focus();
+
+			// Tooltip should be hidden
+			await expect
+				.element(page.getByRole("tooltip", { name: "Focus tooltip" }))
+				.not.toBeInTheDocument();
+		});
+	});
+
+	describe("Controlled State", () => {
+		test("respects controlled open state", async () => {
+			render(
+				<Tooltip content="Controlled tooltip" open={true}>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			// Tooltip should be visible when open=true
+			await expect
+				.element(page.getByRole("tooltip", { name: "Controlled tooltip" }))
+				.toBeInTheDocument();
+		});
+
+		test("respects controlled closed state", async () => {
+			render(
+				<Tooltip content="Controlled tooltip" open={false}>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			// Tooltip should not be visible when open=false
+			await expect
+				.element(page.getByRole("tooltip", { name: "Controlled tooltip" }))
+				.not.toBeInTheDocument();
+
+			// Should not show on hover when controlled
+			await page.getByRole("button", { name: "Trigger" }).hover();
+			await expect
+				.element(page.getByRole("tooltip", { name: "Controlled tooltip" }))
+				.not.toBeInTheDocument();
+		});
+
+		test("calls onOpenChange callback", async () => {
+			const handleOpenChange = vi.fn();
+			render(
+				<Tooltip content="Callback tooltip" onOpenChange={handleOpenChange}>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			// Hover to trigger open
+			await page.getByRole("button", { name: "Trigger" }).hover();
+
+			// Wait for tooltip to appear (ensures callback has been called)
+			await expect
+				.element(page.getByRole("tooltip", { name: "Callback tooltip" }))
+				.toBeInTheDocument();
+
+			// Callback should have been called with true as first argument
+			// (Base UI passes additional context as second argument)
+			expect(handleOpenChange).toHaveBeenCalled();
+			expect(handleOpenChange.mock.calls[0][0]).toBe(true);
+		});
+
+		test("defaultOpen shows tooltip initially", async () => {
+			render(
+				<Tooltip content="Default open tooltip" defaultOpen>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			// Tooltip should be visible initially
+			await expect
+				.element(page.getByRole("tooltip", { name: "Default open tooltip" }))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("Content", () => {
+		test("displays text content", async () => {
+			render(
+				<Tooltip content="Simple text" defaultOpen>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			await expect.element(page.getByText("Simple text")).toBeInTheDocument();
+		});
+
+		test("displays React node content", async () => {
+			render(
+				<Tooltip
+					content={
+						<span data-testid="custom-content">
+							<strong>Bold</strong> text
+						</span>
+					}
+					defaultOpen
+				>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			await expect
+				.element(page.getByTestId("custom-content"))
+				.toBeInTheDocument();
+			await expect.element(page.getByText("Bold")).toBeInTheDocument();
+		});
+	});
+
+	describe("Arrow", () => {
+		test("shows arrow by default", async () => {
+			render(
+				<Tooltip content="With arrow" defaultOpen>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			// The arrow is an SVG element rendered by Base UI
+			const tooltip = page.getByRole("tooltip");
+			await expect.element(tooltip).toBeInTheDocument();
+		});
+
+		test("hides arrow when showArrow is false", async () => {
+			render(
+				<Tooltip content="Without arrow" defaultOpen showArrow={false}>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			const tooltip = page.getByRole("tooltip");
+			await expect.element(tooltip).toBeInTheDocument();
+		});
+	});
+
+	describe("Compound Components", () => {
+		test("renders with compound component API", async () => {
+			render(
+				<TooltipParts defaultOpen>
+					<TooltipTrigger>
+						<Button>Compound trigger</Button>
+					</TooltipTrigger>
+					<TooltipPortal>
+						<TooltipPositioner>
+							<TooltipPopup>
+								<TooltipArrow />
+								Compound tooltip content
+							</TooltipPopup>
+						</TooltipPositioner>
+					</TooltipPortal>
+				</TooltipParts>,
+			);
+
+			await expect
+				.element(page.getByRole("button", { name: "Compound trigger" }))
+				.toBeInTheDocument();
+			await expect
+				.element(page.getByText("Compound tooltip content"))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("Provider", () => {
+		test("TooltipProvider wraps children", async () => {
+			render(
+				<TooltipProvider>
+					<Tooltip content="Provider tooltip" defaultOpen>
+						<Button>Trigger</Button>
+					</Tooltip>
+				</TooltipProvider>,
+			);
+
+			await expect
+				.element(page.getByRole("tooltip", { name: "Provider tooltip" }))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("Styles", () => {
+		test("tooltip popup has dark background", async () => {
+			render(
+				<Tooltip content="Styled tooltip" defaultOpen>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			const tooltip = page.getByRole("tooltip");
+			await expect.element(tooltip).toBeInTheDocument();
+
+			const element = tooltip.element();
+			const styles = window.getComputedStyle(element);
+
+			// Tooltip should have a light background (not transparent)
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("tooltip has border radius", async () => {
+			render(
+				<Tooltip content="Styled tooltip" defaultOpen>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			const tooltip = page.getByRole("tooltip");
+			await expect.element(tooltip).toBeInTheDocument();
+
+			const element = tooltip.element();
+			const styles = window.getComputedStyle(element);
+
+			// Should have border radius
+			const borderRadius = parseFloat(styles.borderRadius);
+			expect(borderRadius).toBeGreaterThan(0);
+		});
+
+		test("tooltip has shadow", async () => {
+			render(
+				<Tooltip content="Styled tooltip" defaultOpen>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			const tooltip = page.getByRole("tooltip");
+			await expect.element(tooltip).toBeInTheDocument();
+
+			const element = tooltip.element();
+			const styles = window.getComputedStyle(element);
+
+			// Should have a box shadow
+			expect(styles.boxShadow).not.toBe("none");
+		});
+
+		test("tooltip has high z-index", async () => {
+			render(
+				<Tooltip content="Styled tooltip" defaultOpen>
+					<Button>Trigger</Button>
+				</Tooltip>,
+			);
+
+			const tooltip = page.getByRole("tooltip");
+			await expect.element(tooltip).toBeInTheDocument();
+
+			const element = tooltip.element();
+			const styles = window.getComputedStyle(element);
+
+			// Should have z-index of 50 or higher
+			const zIndex = parseInt(styles.zIndex, 10);
+			expect(zIndex).toBeGreaterThanOrEqual(50);
+		});
+	});
+});