@nationaldesignstudio/react 0.5.2 → 0.5.3

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

@@ -1,348 +0,0 @@
-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

@@ -1,363 +0,0 @@
-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);
-		});
-	});
-});