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 typography-paragraph-small 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 typography-paragraph-small 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 typography-paragraph-small 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
67 id="field-select"
68 placeholder="Select"
69 options={[
70 { value: "one", label: "One" },
71 { value: "two", label: "Two" }
72 ]}
73 />
74 </Field>
75 {/snippet}
76</Story>
77
78<Story name="WithInput">
79 {#snippet template(args)}
80 <Field {...args} for="field-input">
81 <input
82 id="field-input"
83 type="text"
84 placeholder="Placeholder"
85 class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
86 />
87 </Field>
88 {/snippet}
89</Story>