@nationaldesignstudio/react 0.3.0 → 0.5.1

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

@@ -0,0 +1,531 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { Button } from "../button";
+import {
+	Popover,
+	PopoverArrow,
+	PopoverBackdrop,
+	PopoverClose,
+	PopoverDescription,
+	PopoverParts,
+	PopoverPopup,
+	PopoverPortal,
+	PopoverPositioner,
+	PopoverTitle,
+	PopoverTrigger,
+} from ".";
+
+const meta: Meta<typeof Popover> = {
+	title: "Atoms/Popover",
+	component: Popover,
+	argTypes: {
+		side: {
+			control: { type: "select" },
+			options: ["top", "bottom", "left", "right"],
+		},
+		align: {
+			control: { type: "select" },
+			options: ["start", "center", "end"],
+		},
+		sideOffset: {
+			control: { type: "number" },
+		},
+		showArrow: {
+			control: { type: "boolean" },
+		},
+		showClose: {
+			control: { type: "boolean" },
+		},
+	},
+	args: {
+		side: "bottom",
+		align: "center",
+		sideOffset: 8,
+		showArrow: true,
+		showClose: false,
+	},
+	decorators: [
+		(Story) => (
+			<div className="flex min-h-[300px] items-center justify-center p-48">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+// =============================================================================
+// Playground
+// =============================================================================
+
+export const Playground: Story = {
+	render: (args) => (
+		<Popover
+			{...args}
+			trigger={<Button>Click me</Button>}
+			title="Popover Title"
+		>
+			This is the popover content. You can put any content here including text,
+			forms, or other components.
+		</Popover>
+	),
+};
+
+// =============================================================================
+// Basic Examples
+// =============================================================================
+
+/**
+ * Basic popover with title and description.
+ */
+export const Default: Story = {
+	render: () => (
+		<Popover trigger={<Button>Open Popover</Button>} title="Information">
+			This popover provides additional context about the action.
+		</Popover>
+	),
+};
+
+/**
+ * Popover without title - just content.
+ */
+export const NoTitle: Story = {
+	render: () => (
+		<Popover trigger={<Button>Open Popover</Button>}>
+			<p className="typography-body-sm-md">
+				Simple popover content without a title.
+			</p>
+		</Popover>
+	),
+};
+
+/**
+ * Popover without arrow.
+ */
+export const NoArrow: Story = {
+	render: () => (
+		<Popover
+			trigger={<Button>Open Popover</Button>}
+			title="No Arrow"
+			showArrow={false}
+		>
+			This popover has no arrow pointing to the trigger.
+		</Popover>
+	),
+};
+
+/**
+ * Popover with close button.
+ */
+export const WithCloseButton: Story = {
+	render: () => (
+		<Popover
+			trigger={<Button>Open Popover</Button>}
+			title="Closeable"
+			showClose={true}
+		>
+			Click the X button or click outside to close.
+		</Popover>
+	),
+};
+
+// =============================================================================
+// Positioning
+// =============================================================================
+
+/**
+ * Popover positioned on all four sides.
+ */
+export const AllPositions: Story = {
+	render: () => (
+		<div className="flex flex-col items-center gap-48">
+			<Popover
+				trigger={<Button variant="outline">Top</Button>}
+				side="top"
+				title="Top Position"
+			>
+				Popover above the trigger
+			</Popover>
+			<div className="flex items-center gap-48">
+				<Popover
+					trigger={<Button variant="outline">Left</Button>}
+					side="left"
+					title="Left Position"
+				>
+					Popover to the left
+				</Popover>
+				<Popover
+					trigger={<Button variant="outline">Right</Button>}
+					side="right"
+					title="Right Position"
+				>
+					Popover to the right
+				</Popover>
+			</div>
+			<Popover
+				trigger={<Button variant="outline">Bottom</Button>}
+				side="bottom"
+				title="Bottom Position"
+			>
+				Popover below the trigger
+			</Popover>
+		</div>
+	),
+};
+
+export const Top: Story = {
+	render: () => (
+		<Popover
+			trigger={<Button>Top Position</Button>}
+			side="top"
+			title="Top Popover"
+		>
+			This popover appears above the trigger.
+		</Popover>
+	),
+};
+
+export const Bottom: Story = {
+	render: () => (
+		<Popover
+			trigger={<Button>Bottom Position</Button>}
+			side="bottom"
+			title="Bottom Popover"
+		>
+			This popover appears below the trigger.
+		</Popover>
+	),
+};
+
+export const Left: Story = {
+	render: () => (
+		<Popover
+			trigger={<Button>Left Position</Button>}
+			side="left"
+			title="Left Popover"
+		>
+			This popover appears to the left.
+		</Popover>
+	),
+};
+
+export const Right: Story = {
+	render: () => (
+		<Popover
+			trigger={<Button>Right Position</Button>}
+			side="right"
+			title="Right Popover"
+		>
+			This popover appears to the right.
+		</Popover>
+	),
+};
+
+// =============================================================================
+// Alignment
+// =============================================================================
+
+/**
+ * Popover alignment options.
+ */
+export const Alignment: Story = {
+	render: () => (
+		<div className="flex flex-col gap-24">
+			<div className="flex items-center gap-24">
+				<Popover
+					trigger={
+						<Button variant="secondary" className="w-144">
+							Start
+						</Button>
+					}
+					side="bottom"
+					align="start"
+					title="Start Aligned"
+				>
+					Popover aligned to start
+				</Popover>
+				<Popover
+					trigger={
+						<Button variant="secondary" className="w-144">
+							Center
+						</Button>
+					}
+					side="bottom"
+					align="center"
+					title="Center Aligned"
+				>
+					Popover aligned to center
+				</Popover>
+				<Popover
+					trigger={
+						<Button variant="secondary" className="w-144">
+							End
+						</Button>
+					}
+					side="bottom"
+					align="end"
+					title="End Aligned"
+				>
+					Popover aligned to end
+				</Popover>
+			</div>
+		</div>
+	),
+};
+
+// =============================================================================
+// Rich Content
+// =============================================================================
+
+/**
+ * Popover with form content.
+ */
+export const WithForm: Story = {
+	render: () => (
+		<Popover trigger={<Button>Edit Settings</Button>} showClose={true}>
+			<div className="flex flex-col gap-spatial-component-overlay-gap">
+				<h3 className="typography-body-md-md font-semibold">Quick Settings</h3>
+				<div className="flex flex-col gap-8">
+					<label className="typography-body-sm-md">
+						Name
+						<input
+							type="text"
+							placeholder="Enter name"
+							className="mt-4 w-full rounded-surface-ui-small border border-overlay-border bg-overlay-background px-12 py-8 typography-body-sm-md focus:outline-none focus:ring-2 focus:ring-border-focus"
+						/>
+					</label>
+					<label className="typography-body-sm-md">
+						Email
+						<input
+							type="email"
+							placeholder="Enter email"
+							className="mt-4 w-full rounded-surface-ui-small border border-overlay-border bg-overlay-background px-12 py-8 typography-body-sm-md focus:outline-none focus:ring-2 focus:ring-border-focus"
+						/>
+					</label>
+				</div>
+				<div className="flex justify-end gap-8">
+					<Button variant="secondary" size="sm">
+						Cancel
+					</Button>
+					<Button size="sm">Save</Button>
+				</div>
+			</div>
+		</Popover>
+	),
+};
+
+/**
+ * Popover with list content.
+ */
+export const WithList: Story = {
+	render: () => (
+		<Popover trigger={<Button variant="outline">Options</Button>}>
+			<div className="flex flex-col gap-4">
+				<button
+					type="button"
+					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md hover:bg-bg-section"
+				>
+					Edit profile
+				</button>
+				<button
+					type="button"
+					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md hover:bg-bg-section"
+				>
+					Settings
+				</button>
+				<button
+					type="button"
+					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md hover:bg-bg-section"
+				>
+					Help & support
+				</button>
+				<hr className="border-overlay-border" />
+				<button
+					type="button"
+					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md text-button-destructive-bg hover:bg-bg-section"
+				>
+					Sign out
+				</button>
+			</div>
+		</Popover>
+	),
+};
+
+/**
+ * Popover with media content.
+ */
+export const WithMedia: Story = {
+	render: () => (
+		<Popover trigger={<Button>View Profile</Button>} showClose={true}>
+			<div className="flex gap-16">
+				<div className="size-48 shrink-0 rounded-full bg-bg-section-secondary" />
+				<div className="flex flex-col gap-4">
+					<h3 className="typography-body-md-md font-semibold">Jane Smith</h3>
+					<p className="typography-body-sm-md text-overlay-text-muted">
+						Product Designer
+					</p>
+					<p className="typography-body-sm-md text-overlay-text-muted">
+						San Francisco, CA
+					</p>
+				</div>
+			</div>
+		</Popover>
+	),
+};
+
+// =============================================================================
+// Compound Component API
+// =============================================================================
+
+/**
+ * Using the compound component API for full control.
+ */
+export const CompoundAPI: Story = {
+	render: () => (
+		<PopoverParts>
+			<PopoverTrigger>
+				<Button variant="primary">Custom Popover</Button>
+			</PopoverTrigger>
+			<PopoverPortal>
+				<PopoverPositioner side="bottom" sideOffset={12}>
+					<PopoverPopup>
+						<PopoverArrow />
+						<PopoverClose>
+							<svg
+								width="12"
+								height="12"
+								viewBox="0 0 12 12"
+								fill="none"
+								aria-hidden="true"
+							>
+								<path
+									d="M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5"
+									stroke="currentColor"
+									strokeWidth="1.5"
+									strokeLinecap="round"
+								/>
+							</svg>
+							<span className="sr-only">Close</span>
+						</PopoverClose>
+						<PopoverTitle>Custom Title</PopoverTitle>
+						<PopoverDescription>
+							Built with compound components for maximum flexibility.
+						</PopoverDescription>
+					</PopoverPopup>
+				</PopoverPositioner>
+			</PopoverPortal>
+		</PopoverParts>
+	),
+};
+
+/**
+ * Compound API with backdrop.
+ */
+export const WithBackdrop: Story = {
+	render: () => (
+		<PopoverParts>
+			<PopoverTrigger>
+				<Button>With Backdrop</Button>
+			</PopoverTrigger>
+			<PopoverPortal>
+				<PopoverBackdrop className="bg-alpha-black-20" />
+				<PopoverPositioner side="bottom">
+					<PopoverPopup>
+						<PopoverArrow />
+						<PopoverTitle>Modal-like Popover</PopoverTitle>
+						<PopoverDescription>
+							This popover has a backdrop that dims the background.
+						</PopoverDescription>
+					</PopoverPopup>
+				</PopoverPositioner>
+			</PopoverPortal>
+		</PopoverParts>
+	),
+};
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+/**
+ * Controlled popover 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">
+				<Popover
+					trigger={<Button>Controlled Popover</Button>}
+					title="Controlled"
+					open={open}
+					onOpenChange={setOpen}
+				>
+					This popover is controlled externally.
+				</Popover>
+				<Button variant="outline" onClick={() => setOpen(!open)}>
+					{open ? "Close popover" : "Open popover"}
+				</Button>
+			</div>
+		);
+	},
+};
+
+// =============================================================================
+// On Different Elements
+// =============================================================================
+
+/**
+ * Popover on various trigger elements.
+ */
+export const OnDifferentElements: Story = {
+	render: () => (
+		<div className="flex items-center gap-24">
+			<Popover trigger={<Button>Button</Button>} title="Button Trigger">
+				Triggered by a button
+			</Popover>
+
+			<Popover
+				trigger={
+					<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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+							/>
+						</svg>
+						<span className="sr-only">More options</span>
+					</button>
+				}
+				title="Icon Trigger"
+			>
+				Triggered by an icon button
+			</Popover>
+
+			<Popover
+				trigger={
+					<span className="cursor-pointer border-b border-dashed border-fg-muted text-text-secondary">
+						Click this text
+					</span>
+				}
+				title="Text Trigger"
+			>
+				Triggered by text
+			</Popover>
+		</div>
+	),
+};