chore: rewrite existing shared/ui stories using snippet template pattern
This commit is contained in:
Ilia Mashkov
@@ -65,9 +65,13 @@ const selectedFilter = createFilter({
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
<CheckboxFilter filter={defaultFilter} displayedLabel="Zoo" />
|
||||
{#snippet template(args)}
|
||||
<CheckboxFilter filter={defaultFilter} displayedLabel="Zoo" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Selected">
|
||||
<CheckboxFilter filter={selectedFilter} displayedLabel="Shopping list" />
|
||||
{#snippet template(args)}
|
||||
<CheckboxFilter filter={selectedFilter} displayedLabel="Shopping list" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -51,7 +51,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
|
||||
control: defaultControl,
|
||||
}}
|
||||
>
|
||||
<ComboControl control={defaultControl} />
|
||||
{#snippet template(args)}
|
||||
<ComboControl control={defaultControl} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -60,7 +62,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
|
||||
control: atMinimumControl,
|
||||
}}
|
||||
>
|
||||
<ComboControl control={atMinimumControl} />
|
||||
{#snippet template(args)}
|
||||
<ComboControl control={atMinimumControl} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -69,7 +73,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
|
||||
control: atMaximumControl,
|
||||
}}
|
||||
>
|
||||
<ComboControl control={atMaximumControl} />
|
||||
{#snippet template(args)}
|
||||
<ComboControl control={atMaximumControl} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -78,7 +84,9 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
|
||||
control: withFloatControl,
|
||||
}}
|
||||
>
|
||||
<ComboControl control={withFloatControl} />
|
||||
{#snippet template(args)}
|
||||
<ComboControl control={withFloatControl} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -90,10 +98,13 @@ const customLabelsControl = createTypographyControl({ value: 50, min: 0, max: 10
|
||||
controlLabel: 'Open font size controls',
|
||||
}}
|
||||
>
|
||||
<ComboControl
|
||||
control={customLabelsControl}
|
||||
decreaseLabel="Decrease font size"
|
||||
increaseLabel="Increase font size"
|
||||
controlLabel="Open font size controls"
|
||||
/>
|
||||
{#snippet template(args)}
|
||||
<ComboControl
|
||||
control={customLabelsControl}
|
||||
decreaseLabel="Decrease font size"
|
||||
increaseLabel="Increase font size"
|
||||
controlLabel="Open font size controls"
|
||||
{...args}
|
||||
/>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -52,7 +52,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
|
||||
label: 'Size',
|
||||
}}
|
||||
>
|
||||
<ComboControlV2 control={horizontalControl} orientation="horizontal" label="Size" />
|
||||
{#snippet template(args)}
|
||||
<ComboControlV2 control={horizontalControl} orientation="horizontal" label="Size" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -63,7 +65,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
|
||||
label: 'Size',
|
||||
}}
|
||||
>
|
||||
<ComboControlV2 control={verticalControl} orientation="vertical" class="h-48" label="Size" />
|
||||
{#snippet template(args)}
|
||||
<ComboControlV2 control={verticalControl} orientation="vertical" class="h-48" label="Size" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -74,7 +78,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
|
||||
label: 'Opacity',
|
||||
}}
|
||||
>
|
||||
<ComboControlV2 control={floatControl} orientation="vertical" class="h-48" label="Opacity" />
|
||||
{#snippet template(args)}
|
||||
<ComboControlV2 control={floatControl} orientation="vertical" class="h-48" label="Opacity" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -85,7 +91,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
|
||||
label: 'Size',
|
||||
}}
|
||||
>
|
||||
<ComboControlV2 control={atMinControl} orientation="horizontal" label="Size" />
|
||||
{#snippet template(args)}
|
||||
<ComboControlV2 control={atMinControl} orientation="horizontal" label="Size" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -96,7 +104,9 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
|
||||
label: 'Size',
|
||||
}}
|
||||
>
|
||||
<ComboControlV2 control={atMaxControl} orientation="horizontal" label="Size" />
|
||||
{#snippet template(args)}
|
||||
<ComboControlV2 control={atMaxControl} orientation="horizontal" label="Size" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -107,5 +117,7 @@ const largeRangeControl = createTypographyControl({ min: 0, max: 1000, step: 10,
|
||||
label: 'Scale',
|
||||
}}
|
||||
>
|
||||
<ComboControlV2 control={largeRangeControl} orientation="horizontal" label="Scale" />
|
||||
{#snippet template(args)}
|
||||
<ComboControlV2 control={largeRangeControl} orientation="horizontal" label="Scale" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -55,7 +55,9 @@ let longValue = $state(
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
<ContentEditable bind:text={value} />
|
||||
{#snippet template(args)}
|
||||
<ContentEditable bind:text={value} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -67,7 +69,9 @@ let longValue = $state(
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
<ContentEditable bind:text={smallValue} />
|
||||
{#snippet template(args)}
|
||||
<ContentEditable bind:text={smallValue} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -79,7 +83,9 @@ let longValue = $state(
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
<ContentEditable bind:text={largeValue} />
|
||||
{#snippet template(args)}
|
||||
<ContentEditable bind:text={largeValue} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -91,7 +97,9 @@ let longValue = $state(
|
||||
letterSpacing: 0.3,
|
||||
}}
|
||||
>
|
||||
<ContentEditable bind:text={spacedValue} />
|
||||
{#snippet template(args)}
|
||||
<ContentEditable bind:text={spacedValue} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -103,5 +111,7 @@ let longValue = $state(
|
||||
letterSpacing: 0,
|
||||
}}
|
||||
>
|
||||
<ContentEditable bind:text={longValue} />
|
||||
{#snippet template(args)}
|
||||
<ContentEditable bind:text={longValue} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -59,7 +59,7 @@ const { Story } = defineMeta({
|
||||
</script>
|
||||
{/* @ts-ignore */ null}
|
||||
<Story name="With hidden content">
|
||||
{#snippet children(args)}
|
||||
{#snippet template(args)}
|
||||
<div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
|
||||
<ExpandableWrapper
|
||||
{...args}
|
||||
@@ -71,7 +71,7 @@ const { Story } = defineMeta({
|
||||
|
||||
{/* @ts-ignore */ null}
|
||||
<Story name="Disabled" args={{ disabled: true }}>
|
||||
{#snippet children(args)}
|
||||
{#snippet template(args)}
|
||||
<div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
|
||||
<ExpandableWrapper
|
||||
{...args}
|
||||
@@ -84,7 +84,7 @@ const { Story } = defineMeta({
|
||||
|
||||
{/* @ts-ignore */ null}
|
||||
<Story name="With badge" args={{ badge: badgeSnippet }}>
|
||||
{#snippet children(args)}
|
||||
{#snippet template(args)}
|
||||
<div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
|
||||
<ExpandableWrapper
|
||||
{...args}
|
||||
|
||||
@@ -17,15 +17,19 @@ const { Story } = defineMeta({
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
<Footnote>
|
||||
Footnote
|
||||
</Footnote>
|
||||
{#snippet template(args)}
|
||||
<Footnote {...args}>
|
||||
Footnote
|
||||
</Footnote>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With custom render">
|
||||
<Footnote>
|
||||
{#snippet render({ class: className })}
|
||||
<span class={className}>Footnote</span>
|
||||
{/snippet}
|
||||
</Footnote>
|
||||
{#snippet template(args)}
|
||||
<Footnote {...args}>
|
||||
{#snippet render({ class: className })}
|
||||
<span class={className}>Footnote</span>
|
||||
{/snippet}
|
||||
</Footnote>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -77,11 +77,13 @@ import XIcon from '@lucide/svelte/icons/x';
|
||||
icon: chevronRightIcon,
|
||||
}}
|
||||
>
|
||||
<IconButton onclick={() => console.log('Default clicked')}>
|
||||
{#snippet icon({ className })}
|
||||
<ChevronRight class={className} />
|
||||
{/snippet}
|
||||
</IconButton>
|
||||
{#snippet template(args)}
|
||||
<IconButton onclick={() => console.log('Default clicked')} {...args}>
|
||||
{#snippet icon({ className })}
|
||||
<ChevronRight class={className} />
|
||||
{/snippet}
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -91,11 +93,13 @@ import XIcon from '@lucide/svelte/icons/x';
|
||||
disabled: true,
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<IconButton disabled>
|
||||
{#snippet icon({ className })}
|
||||
<ChevronRight class={className} />
|
||||
{/snippet}
|
||||
</IconButton>
|
||||
</div>
|
||||
{#snippet template(args)}
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<IconButton disabled {...args}>
|
||||
{#snippet icon({ className })}
|
||||
<ChevronRight class={className} />
|
||||
{/snippet}
|
||||
</IconButton>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -50,33 +50,47 @@ const placeholder = 'Enter text';
|
||||
|
||||
<!-- Default Story -->
|
||||
<Story name="Default" args={{ placeholder }}>
|
||||
<Input bind:value={valueDefault} {placeholder} />
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueDefault} {placeholder} {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!-- Size Variants -->
|
||||
<Story name="Small" args={{ placeholder }}>
|
||||
<Input bind:value={valueSm} {placeholder} size="sm" />
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueSm} {placeholder} size="sm" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Medium" args={{ placeholder }}>
|
||||
<Input bind:value={valueMd} {placeholder} size="md" />
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueMd} {placeholder} size="md" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Large" args={{ placeholder }}>
|
||||
<Input bind:value={valueLg} {placeholder} size="lg" />
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueLg} {placeholder} size="lg" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!-- Ghost Variant with Sizes -->
|
||||
<Story name="Ghost Small" args={{ placeholder }}>
|
||||
<Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" />
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Ghost Medium" args={{ placeholder }}>
|
||||
<Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" />
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Ghost Large" args={{ placeholder }}>
|
||||
<Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" />
|
||||
{#snippet template(args)}
|
||||
<Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<!-- Size Comparison -->
|
||||
|
||||
@@ -29,5 +29,7 @@ const { Story } = defineMeta({
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
<Loader />
|
||||
{#snippet template(args)}
|
||||
<Loader {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -17,5 +17,7 @@ const { Story } = defineMeta({
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
<Logo />
|
||||
{#snippet template(args)}
|
||||
<Logo {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -39,5 +39,7 @@ let defaultSearchValue = $state('');
|
||||
placeholder: 'Type here...',
|
||||
}}
|
||||
>
|
||||
<SearchBar bind:value={defaultSearchValue} placeholder="Type here..." />
|
||||
{#snippet template(args)}
|
||||
<SearchBar bind:value={defaultSearchValue} placeholder="Type here..." {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -192,21 +192,23 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
content: welcomeContent,
|
||||
}}
|
||||
>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section index={1}>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Welcome</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
This is the default section layout with a title and content area. The section uses a 2-column
|
||||
grid layout with the title on the left and content on the right.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{#snippet template(args)}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section index={1} {...args}>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Welcome</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
This is the default section layout with a title and content area. The section uses a
|
||||
2-column grid layout with the title on the left and content on the right.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -216,50 +218,53 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
content: stickyContent,
|
||||
}}
|
||||
>
|
||||
<div class="h-[200vh]">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section
|
||||
id="sticky-section"
|
||||
index={1}
|
||||
stickyTitle={true}
|
||||
stickyOffset="20px"
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Sticky Title</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted mb-4">
|
||||
This section has a sticky title that stays fixed while you scroll through the content. Try
|
||||
scrolling down to see the effect.
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<p class="text-text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollim anim id est laborum.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
|
||||
laudantium.
|
||||
{#snippet template(args)}
|
||||
<div class="h-[200vh]">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section
|
||||
id="sticky-section"
|
||||
index={1}
|
||||
stickyTitle={true}
|
||||
stickyOffset="20px"
|
||||
{...args}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Sticky Title</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted mb-4">
|
||||
This section has a sticky title that stays fixed while you scroll through the content.
|
||||
Try scrolling down to see the effect.
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<p class="text-text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||
ex ea commodo consequat.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollim anim id est laborum.
|
||||
</p>
|
||||
<p class="text-text-muted">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque laudantium.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -271,103 +276,110 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
content: searchFontsContent,
|
||||
}}
|
||||
>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section index={1}>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Search Fonts</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<SearchIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Find your perfect typeface</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Use the search bar to find fonts by name, or use the filters to browse by category, subset, or
|
||||
provider.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{#snippet template(args)}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section index={1} {...args}>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Search Fonts</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<SearchIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Find your perfect typeface</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Use the search bar to find fonts by name, or use the filters to browse by category, subset,
|
||||
or provider.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Multiple Sections" tags={['!autodocs']}>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section
|
||||
id="section-1"
|
||||
index={1}
|
||||
stickyTitle={true}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Typography</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<SettingsIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Adjust text appearance</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Control the size, weight, and line height of your text. These settings apply across the
|
||||
comparison view.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
{#snippet template(args)}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section
|
||||
id="section-1"
|
||||
index={1}
|
||||
stickyTitle={true}
|
||||
{...args}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Typography</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<SettingsIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Adjust text appearance</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Control the size, weight, and line height of your text. These settings apply across the
|
||||
comparison view.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
id="section-2"
|
||||
index={2}
|
||||
stickyTitle={true}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Font Search</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<SearchIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Browse available typefaces</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Search through our collection of fonts from Google Fonts and Fontshare. Use filters to narrow
|
||||
down your selection.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
<Section
|
||||
id="section-2"
|
||||
index={2}
|
||||
stickyTitle={true}
|
||||
{...args}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Font Search</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<SearchIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Browse available typefaces</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Search through our collection of fonts from Google Fonts and Fontshare. Use filters to
|
||||
narrow down your selection.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
id="section-3"
|
||||
index={3}
|
||||
stickyTitle={true}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Sample List</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<ListIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Preview font samples</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Browse through font samples with your custom text. The list is virtualized for optimal
|
||||
performance.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
<Section
|
||||
id="section-3"
|
||||
index={3}
|
||||
stickyTitle={true}
|
||||
{...args}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Sample List</h2>
|
||||
{/snippet}
|
||||
{#snippet icon({ className })}
|
||||
<ListIcon class={className} />
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>Preview font samples</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-lg text-text-muted">
|
||||
Browse through font samples with your custom text. The list is virtualized for optimal
|
||||
performance.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -377,44 +389,48 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
content: longContent,
|
||||
}}
|
||||
>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section
|
||||
index={1}
|
||||
stickyTitle={true}
|
||||
stickyOffset="0px"
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Long Content</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<div class="space-y-6">
|
||||
<p class="text-lg text-text-muted">
|
||||
This section demonstrates how the sticky title behaves with longer content. As you scroll
|
||||
through this content, the title remains visible at the top of the viewport.
|
||||
</p>
|
||||
<div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
|
||||
<span class="text-text-muted">Content block 1</span>
|
||||
</div>
|
||||
<p class="text-text-muted">
|
||||
The sticky position is achieved using CSS position: sticky with a configurable top offset.
|
||||
This is useful for long sections where you want to maintain context while scrolling.
|
||||
</p>
|
||||
<div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
|
||||
<span class="text-text-muted">Content block 2</span>
|
||||
</div>
|
||||
<p class="text-text-muted">
|
||||
The Intersection Observer API is used to detect when the section title scrolls out of view,
|
||||
triggering the optional onTitleStatusChange callback.
|
||||
</p>
|
||||
<div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
|
||||
<span class="text-text-muted">Content block 3</span>
|
||||
{#snippet template(args)}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section
|
||||
index={1}
|
||||
stickyTitle={true}
|
||||
stickyOffset="0px"
|
||||
{...args}
|
||||
>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Long Content</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<div class="space-y-6">
|
||||
<p class="text-lg text-text-muted">
|
||||
This section demonstrates how the sticky title behaves with longer content. As you
|
||||
scroll through this content, the title remains visible at the top of the viewport.
|
||||
</p>
|
||||
<div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
|
||||
<span class="text-text-muted">Content block 1</span>
|
||||
</div>
|
||||
<p class="text-text-muted">
|
||||
The sticky position is achieved using CSS position: sticky with a configurable top
|
||||
offset. This is useful for long sections where you want to maintain context while
|
||||
scrolling.
|
||||
</p>
|
||||
<div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
|
||||
<span class="text-text-muted">Content block 2</span>
|
||||
</div>
|
||||
<p class="text-text-muted">
|
||||
The Intersection Observer API is used to detect when the section title scrolls out of
|
||||
view, triggering the optional onTitleStatusChange callback.
|
||||
</p>
|
||||
<div class="h-64 bg-background-40 rounded-lg flex items-center justify-center">
|
||||
<span class="text-text-muted">Content block 3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -424,20 +440,22 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
content: minimalContent,
|
||||
}}
|
||||
>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Minimal Section</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-text-muted">
|
||||
A minimal section without index, icon, or description. Just the essentials.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{#snippet template(args)}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section {...args}>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Minimal Section</h2>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<p class="text-text-muted">
|
||||
A minimal section without index, icon, or description. Just the essentials.
|
||||
</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
@@ -448,28 +466,30 @@ import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
content: customContent,
|
||||
}}
|
||||
>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section index={42}>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Custom Content</h2>
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>With interactive elements</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-background-40 rounded-lg">
|
||||
<h3 class="font-semibold mb-2">Card 1</h3>
|
||||
<p class="text-sm text-text-muted">Some content here</p>
|
||||
</div>
|
||||
<div class="p-4 bg-background-40 rounded-lg">
|
||||
<h3 class="font-semibold mb-2">Card 2</h3>
|
||||
<p class="text-sm text-text-muted">More content here</p>
|
||||
{#snippet template(args)}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-x-6 sm:gap-x-8 md:gap-x-10 lg:gap-x-12 p-8 max-w-6xl mx-auto">
|
||||
<Section index={42} {...args}>
|
||||
{#snippet title({ className })}
|
||||
<h2 class={className}>Custom Content</h2>
|
||||
{/snippet}
|
||||
{#snippet description({ className })}
|
||||
<span class={className}>With interactive elements</span>
|
||||
{/snippet}
|
||||
{#snippet content({ className })}
|
||||
<div class={cn(className, 'min-w-128')}>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-background-40 rounded-lg">
|
||||
<h3 class="font-semibold mb-2">Card 1</h3>
|
||||
<p class="text-sm text-text-muted">Some content here</p>
|
||||
</div>
|
||||
<div class="p-4 bg-background-40 rounded-lg">
|
||||
<h3 class="font-semibold mb-2">Card 2</h3>
|
||||
<p class="text-sm text-text-muted">More content here</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Section>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -29,13 +29,15 @@ const { Story } = defineMeta({
|
||||
animate: true,
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col gap-4 p-4 w-full">
|
||||
<div class="flex flex-col gap-2 p-4 border rounded-xl border-border-subtle bg-background-40">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<Skeleton class="h-8 w-1/3" />
|
||||
<Skeleton class="h-8 w-8 rounded-full" />
|
||||
{#snippet template(args)}
|
||||
<div class="flex flex-col gap-4 p-4 w-full">
|
||||
<div class="flex flex-col gap-2 p-4 border rounded-xl border-border-subtle bg-background-40">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<Skeleton class="h-8 w-1/3" {...args} />
|
||||
<Skeleton class="h-8 w-8 rounded-full" {...args} />
|
||||
</div>
|
||||
<Skeleton class="h-32 w-full" {...args} />
|
||||
</div>
|
||||
<Skeleton class="h-32 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -44,13 +44,19 @@ let value = $state(50);
|
||||
</script>
|
||||
|
||||
<Story name="Horizontal" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
|
||||
<Slider bind:value />
|
||||
{#snippet template(args)}
|
||||
<Slider bind:value {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Vertical" args={{ orientation: 'vertical', min: 0, max: 100, step: 1, value }}>
|
||||
<Slider bind:value />
|
||||
{#snippet template(args)}
|
||||
<Slider bind:value {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value, label: 'SIZE' }}>
|
||||
<Slider bind:value />
|
||||
{#snippet template(args)}
|
||||
<Slider bind:value {...args} />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -46,29 +46,35 @@ const emptyDataSet: string[] = [];
|
||||
</script>
|
||||
|
||||
<Story name="Small Dataset">
|
||||
<div class="h-[400px]">
|
||||
<VirtualList items={smallDataSet} itemHeight={40}>
|
||||
{#snippet children({ item })}
|
||||
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
|
||||
{/snippet}
|
||||
</VirtualList>
|
||||
</div>
|
||||
{#snippet template(args)}
|
||||
<div class="h-[400px]">
|
||||
<VirtualList items={smallDataSet} itemHeight={40} {...args}>
|
||||
{#snippet children({ item })}
|
||||
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
|
||||
{/snippet}
|
||||
</VirtualList>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Medium Dataset (200 items)">
|
||||
<div class="h-[400px]">
|
||||
<VirtualList items={mediumDataSet} itemHeight={40}>
|
||||
{#snippet template(args)}
|
||||
<div class="h-[400px]">
|
||||
<VirtualList items={mediumDataSet} itemHeight={40} {...args}>
|
||||
{#snippet children({ item })}
|
||||
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
|
||||
{/snippet}
|
||||
</VirtualList>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Empty Dataset">
|
||||
{#snippet template(args)}
|
||||
<VirtualList items={emptyDataSet} itemHeight={40} {...args}>
|
||||
{#snippet children({ item })}
|
||||
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
|
||||
{/snippet}
|
||||
</VirtualList>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Empty Dataset">
|
||||
<VirtualList items={emptyDataSet} itemHeight={40}>
|
||||
{#snippet children({ item })}
|
||||
<div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
|
||||
{/snippet}
|
||||
</VirtualList>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
Reference in New Issue
Block a user