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 Field from "./Field.svelte";
4 import Select from "./Select.svelte";
5
6 const { Story } = defineMeta({
7 title: "UI/Field",
8 component: Field,
9 tags: ["autodocs"],
10 argTypes: {
11 label: { control: "text" },
12 subtitle: { control: "text" },
13 required: { control: "boolean" }
14 },
15 args: {
16 label: "Label",
17 subtitle: "Subtitle",
18 required: false
19 }
20 });
21</script>
22
23<!-- Field wraps any form control via its `children` snippet. -->
24<Story name="Default">
25 {#snippet template(args)}
26 <Field {...args} for="field-default">
27 <input
28 id="field-default"
29 type="text"
30 placeholder="Placeholder"
31 class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
32 />
33 </Field>
34 {/snippet}
35</Story>
36
37<Story name="LabelOnly" args={{ subtitle: undefined }}>
38 {#snippet template(args)}
39 <Field {...args} for="field-label-only">
40 <input
41 id="field-label-only"
42 type="text"
43 placeholder="Placeholder"
44 class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
45 />
46 </Field>
47 {/snippet}
48</Story>
49
50<Story name="Required" args={{ required: true }}>
51 {#snippet template(args)}
52 <Field {...args} for="field-required">
53 <input
54 id="field-required"
55 type="text"
56 placeholder="Placeholder"
57 class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
58 />
59 </Field>
60 {/snippet}
61</Story>
62
63<Story name="WithSelect">
64 {#snippet template(args)}
65 <Field {...args} for="field-select">
66 <Select id="field-select">
67 <option value="" disabled selected>Select</option>
68 <option value="one">One</option>
69 <option value="two">Two</option>
70 </Select>
71 </Field>
72 {/snippet}
73</Story>
74
75<Story name="WithInput">
76 {#snippet template(args)}
77 <Field {...args} for="field-input">
78 <input
79 id="field-input"
80 type="text"
81 placeholder="Placeholder"
82 class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
83 />
84 </Field>
85 {/snippet}
86</Story>