71 lines
1.9 KiB
Svelte
71 lines
1.9 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import SearchBar from './SearchBar.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/SearchBar',
|
|
component: SearchBar,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Search input with popover dropdown for results/suggestions. Features keyboard navigation (ArrowDown/Up/Enter) and auto-focus prevention on popover open. The input field serves as the popover trigger.',
|
|
},
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
|
},
|
|
},
|
|
argTypes: {
|
|
value: {
|
|
control: 'text',
|
|
description: 'Current search value (two-way bindable)',
|
|
},
|
|
placeholder: {
|
|
control: 'text',
|
|
description: 'Placeholder text for the input',
|
|
},
|
|
label: {
|
|
control: 'text',
|
|
description: 'Optional label displayed above the input',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
let defaultSearchValue = $state('');
|
|
let withLabelValue = $state('');
|
|
let noChildrenValue = $state('');
|
|
</script>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
value: defaultSearchValue,
|
|
placeholder: 'Type here...',
|
|
}}
|
|
>
|
|
<SearchBar bind:value={defaultSearchValue} placeholder="Type here..."> </SearchBar>
|
|
</Story>
|
|
|
|
<Story
|
|
name="With Label"
|
|
args={{
|
|
value: withLabelValue,
|
|
placeholder: 'Search products...',
|
|
label: 'Search',
|
|
}}
|
|
>
|
|
<SearchBar bind:value={withLabelValue} placeholder="Search products..." label="Search"> </SearchBar>
|
|
</Story>
|
|
|
|
<Story
|
|
name="Minimal Content"
|
|
args={{
|
|
value: noChildrenValue,
|
|
placeholder: 'Quick search...',
|
|
}}
|
|
>
|
|
<SearchBar bind:value={noChildrenValue} placeholder="Quick search..."> </SearchBar>
|
|
</Story>
|