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 Button from "./Button.svelte";
4 import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
5
6 const { Story } = defineMeta({
7 title: "UI/ButtonGroup",
8 component: ButtonGroup,
9 tags: ["autodocs"],
10 argTypes: {
11 spaced: { control: "boolean" }
12 },
13 args: {
14 spaced: false
15 }
16 });
17</script>
18
19<!-- ButtonGroup content comes through its `children` snippet, provided here as Story slot content. -->
20<Story name="Joined">
21 <ButtonGroup>
22 <Button>Button</Button>
23 <Button>Button</Button>
24 <Button>Button</Button>
25 </ButtonGroup>
26</Story>
27
28<Story name="Spaced" args={{ spaced: true }}>
29 <ButtonGroup spaced>
30 <Button>Button</Button>
31 <Button>Button</Button>
32 <Button>Button</Button>
33 </ButtonGroup>
34</Story>
35
36<Story name="Comparison">
37 <div class="flex flex-col gap-4">
38 <ButtonGroup spaced>
39 <Button>Button</Button>
40 <Button>Button</Button>
41 <Button>Button</Button>
42 </ButtonGroup>
43 <ButtonGroup>
44 <Button>Button</Button>
45 <Button>Button</Button>
46 <Button>Button</Button>
47 </ButtonGroup>
48 </div>
49</Story>
50
51<!--
52 The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs):
53 the selected segment gets the `default` variant + insetShadow, unselected segments are
54 `ghost`. Never plain `default` for unselected — that reads as the hovered state.
55-->
56<Story name="Tab Switcher">
57 <div class="flex flex-col items-start gap-4">
58 <ButtonGroup>
59 <Button {...segmentProps(true)}>Open</Button>
60 <Button {...segmentProps(false)}>Closed</Button>
61 </ButtonGroup>
62 <!-- selected in the middle: hovering either neighbour used to rub out the border on the
63 edge they share, so this is the case to check when touching the group's layering -->
64 <ButtonGroup>
65 <Button {...segmentProps(false)}>All</Button>
66 <Button {...segmentProps(true)}>Push</Button>
67 <Button {...segmentProps(false)}>Pull request</Button>
68 </ButtonGroup>
69 </div>
70</Story>