Benjamin Palko
c001cc4907
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #1
80 lines
No EOL
2.2 KiB
Svelte
80 lines
No EOL
2.2 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import { User } from 'lucide-svelte';
|
|
import InputField from './InputField.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Data Input/Input Field',
|
|
component: InputField,
|
|
argTypes: {
|
|
block: {
|
|
control: 'boolean',
|
|
},
|
|
color: {
|
|
control: 'select',
|
|
options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
|
|
},
|
|
disabled: {
|
|
control: 'boolean',
|
|
},
|
|
start: { control: 'text' },
|
|
end: { control: 'text' },
|
|
placeholder: { control: 'text' },
|
|
size: {
|
|
control: 'select',
|
|
options: ['xs', 'sm', 'md', 'lg', 'xl'],
|
|
},
|
|
style: {
|
|
control: 'radio',
|
|
options: [undefined, 'ghost'],
|
|
},
|
|
type: {
|
|
control: 'select',
|
|
options: ['email', 'password', 'search', 'tel', 'text', 'url'],
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<Story name="Default" args={{ name: 'text' }} />
|
|
|
|
<Story name="Labels">
|
|
<div class="flex flex-col gap-2">
|
|
<InputField name="text" start="Label" />
|
|
<InputField name="text">
|
|
{#snippet start()}
|
|
<User />
|
|
{/snippet}
|
|
</InputField>
|
|
<InputField name="text">
|
|
{#snippet end()}
|
|
<User />
|
|
{/snippet}
|
|
</InputField>
|
|
</div>
|
|
</Story>
|
|
|
|
<Story name="Colors">
|
|
<div class="flex flex-col gap-2">
|
|
<InputField name="text" color="primary" placeholder="Primary" />
|
|
<InputField name="text" color="secondary" placeholder="Secondary" />
|
|
<InputField name="text" color="accent" placeholder="Accent" />
|
|
<InputField name="text" color="neutral" placeholder="Neutral" />
|
|
<InputField name="text" color="info" placeholder="Info" />
|
|
<InputField name="text" color="success" placeholder="Success" />
|
|
<InputField name="text" color="warning" placeholder="Warning" />
|
|
<InputField name="text" color="error" placeholder="Error" />
|
|
</div>
|
|
</Story>
|
|
|
|
<Story name="Sizes">
|
|
<div class="flex flex-col gap-2">
|
|
<InputField name="text" size="xs" placeholder="XS" />
|
|
<InputField name="text" size="sm" placeholder="SM" />
|
|
<InputField name="text" size="md" placeholder="MD" />
|
|
<InputField name="text" size="lg" placeholder="LG" />
|
|
<InputField name="text" size="xl" placeholder="XL" />
|
|
</div>
|
|
</Story>
|
|
|
|
<Story name="Disabled" args={{ name: 'text', placeholder: 'Disabled', disabled: true }} /> |