alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import ChevronDown from "$icon/chevron-down";
4 import Pencil from "$icon/pencil";
5 import Settings from "$icon/settings";
6 import LogOut from "$icon/log-out";
7 import Dropdown from "./Dropdown.svelte";
8 import DropdownItem from "./DropdownItem.svelte";
9
10 const { Story } = defineMeta({
11 title: "UI/Dropdown",
12 component: Dropdown,
13 tags: ["autodocs"]
14 });
15</script>
16
17<!-- Dropdown's `trigger` and `children` are snippet props, so the trigger content is
18 declared once below and passed by reference; every story renders via `asChild` rather
19 than through the args table. Click the trigger in the canvas to open the menu —
20 `open` is internal state, not a prop. -->
21
22{#snippet menuTrigger()}
23 <span>Menu</span>
24 <ChevronDown class="size-4" />
25{/snippet}
26
27{#snippet actionsTrigger()}
28 <span>Actions</span>
29 <ChevronDown class="size-4" />
30{/snippet}
31
32{#snippet firstTrigger()}
33 <span>First</span>
34 <ChevronDown class="size-4" />
35{/snippet}
36
37{#snippet secondTrigger()}
38 <span>Second</span>
39 <ChevronDown class="size-4" />
40{/snippet}
41
42<Story name="Plain trigger" asChild>
43 <Dropdown trigger={menuTrigger} label="Menu">
44 <DropdownItem icon={Pencil}>Edit</DropdownItem>
45 <DropdownItem icon={Settings}>Settings</DropdownItem>
46 <DropdownItem icon={LogOut} danger>Log out</DropdownItem>
47 </Dropdown>
48</Story>
49
50<Story name="Button trigger" asChild>
51 <Dropdown variant="button" trigger={actionsTrigger} label="Actions">
52 <DropdownItem icon={Pencil}>Edit</DropdownItem>
53 <DropdownItem icon={Settings}>Settings</DropdownItem>
54 </Dropdown>
55</Story>
56
57<!-- `align="right"` anchors the menu's right edge to the trigger, for triggers near
58 the right edge of the viewport (e.g. the topbar profile menu). Default is left. -->
59<Story name="Right aligned" asChild>
60 <div class="flex justify-end">
61 <Dropdown align="right" trigger={menuTrigger} label="Menu">
62 <DropdownItem icon={Pencil}>Edit</DropdownItem>
63 <DropdownItem icon={Settings}>Settings</DropdownItem>
64 </Dropdown>
65 </div>
66</Story>
67
68<!-- DropdownItem states: plain text, with icon, as a link (href), and the danger variant. -->
69<Story name="Item states" asChild>
70 <Dropdown trigger={menuTrigger} label="Menu">
71 <DropdownItem>Plain item</DropdownItem>
72 <DropdownItem icon={Settings}>With icon</DropdownItem>
73 <DropdownItem href="/">Link item</DropdownItem>
74 <DropdownItem icon={LogOut} danger>Danger item</DropdownItem>
75 </Dropdown>
76</Story>
77
78<!-- Dropdowns sharing a `group` close their siblings when one opens. -->
79<Story name="Grouped" asChild>
80 <div class="flex gap-3">
81 <Dropdown group="story-group" trigger={firstTrigger} label="First">
82 <DropdownItem>One</DropdownItem>
83 <DropdownItem>Two</DropdownItem>
84 </Dropdown>
85 <Dropdown group="story-group" trigger={secondTrigger} label="Second">
86 <DropdownItem>Three</DropdownItem>
87 <DropdownItem>Four</DropdownItem>
88 </Dropdown>
89 </div>
90</Story>