Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<script module lang="ts"> import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf"; import { expect } from "storybook/test"; import CopyButton from "$lib/components/ui/CopyButton.svelte";
const SHA = "013b7330f0a2a7f4d0d1d6f4c9d51d1f3a0e1b2c";
type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas" | "userEvent">;
const stubClipboard = (writeText: (text: string) => Promise<void>) => { Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true }); };
const copies = async ({ canvas, userEvent }: PlayContext) => { const written: string[] = []; stubClipboard(async (text) => void written.push(text)); await userEvent.click(canvas.getByRole("button", { name: "Copy SHA" })); await expect(written).toEqual([SHA]); await expect(canvas.getByRole("status")).toHaveTextContent("Copied"); };
const reportsFailure = async ({ canvas, userEvent }: PlayContext) => { stubClipboard(() => Promise.reject(new Error("denied"))); await userEvent.click(canvas.getByRole("button", { name: "Copy SHA" })); await expect(canvas.getByRole("status")).toHaveTextContent("Failed"); };
const { Story } = defineMeta({ title: "UI/CopyButton", component: CopyButton, tags: ["autodocs"], argTypes: { variant: { control: "inline-radio", options: ["default", "primary", "ghost", "danger", "success", "warning"] }, size: { control: "inline-radio", options: ["mini", "small", "regular", "large"] }, showLabel: { control: "boolean" }, disabled: { control: "boolean" }, timeout: { control: "number" } }, args: { value: SHA, label: "Copy SHA", showLabel: false, variant: "ghost", size: "small", disabled: false, timeout: 2000 } });</script>
<Story name="Default" />
<Story name="With label" args={{ showLabel: true, variant: "default" }} />
<Story name="Copies" args={{ showLabel: true, variant: "default" }} play={copies} />
<Story name="Failure" args={{ showLabel: true, variant: "default" }} play={reportsFailure} />
<Story name="Disabled" args={{ showLabel: true, variant: "default", disabled: true }} />
<Story name="Sizes"> <div class="flex items-center gap-sm"> <CopyButton value={SHA} size="mini" showLabel variant="default" /> <CopyButton value={SHA} size="small" showLabel variant="default" /> <CopyButton value={SHA} size="regular" showLabel variant="default" /> <CopyButton value={SHA} size="large" showLabel variant="default" /> </div></Story>
<Story name="Variants"> <div class="flex items-center gap-sm"> <CopyButton value={SHA} showLabel variant="default" /> <CopyButton value={SHA} showLabel variant="primary" /> <CopyButton value={SHA} showLabel variant="ghost" /> <CopyButton value={SHA} showLabel variant="danger" /> </div></Story>
<Story name="In a row"> <div class="flex w-96 items-center gap-xs rounded-sm border border-border-default p-2xs pl-sm"> <code class="min-w-0 flex-1 truncate typography-monospace-small text-foreground-muted"> {SHA} </code> <CopyButton value={SHA} label="Copy SHA" showLabel /> </div></Story>