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 <Field label="Label" subtitle="Subtitle" for="field-default">
26 <input
27 id="field-default"
28 type="text"
29 placeholder="Placeholder"
30 class="w-full rounded 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"
31 />
32 </Field>
33</Story>
34
35<Story name="LabelOnly">
36 <Field label="Label" for="field-label-only">
37 <input
38 id="field-label-only"
39 type="text"
40 placeholder="Placeholder"
41 class="w-full rounded 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"
42 />
43 </Field>
44</Story>
45
46<Story name="Required">
47 <Field label="Label" subtitle="Subtitle" required for="field-required">
48 <input
49 id="field-required"
50 type="text"
51 placeholder="Placeholder"
52 class="w-full rounded 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"
53 />
54 </Field>
55</Story>
56
57<Story name="WithSelect">
58 <Field label="Label" subtitle="Subtitle" for="field-select">
59 <Select id="field-select">
60 <option value="" disabled selected>Select</option>
61 <option value="one">One</option>
62 <option value="two">Two</option>
63 </Select>
64 </Field>
65</Story>
66
67<Story name="WithInput">
68 <Field label="Label" subtitle="Subtitle" for="field-input">
69 <input
70 id="field-input"
71 type="text"
72 placeholder="Placeholder"
73 class="w-full rounded 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"
74 />
75 </Field>
76</Story>