66 lines
1.9 KiB
Svelte
66 lines
1.9 KiB
Svelte
|
<script module>
|
||
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||
|
|
import BreadcrumbHeader from './BreadcrumbHeader.svelte';
|
||
|
|
|
||
|
|
const { Story } = defineMeta({
|
||
|
|
title: 'Entities/BreadcrumbHeader',
|
||
|
|
component: BreadcrumbHeader,
|
||
|
|
tags: ['autodocs'],
|
||
|
|
parameters: {
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component:
|
||
|
|
'Fixed header that slides in when the user scrolls past tracked page sections. Reads `scrollBreadcrumbsStore.scrolledPastItems` — renders nothing when the list is empty. Requires the `responsive` context provided by `Providers`.',
|
||
|
|
},
|
||
|
|
story: { inline: false },
|
||
|
|
},
|
||
|
|
layout: 'fullscreen',
|
||
|
|
},
|
||
|
|
argTypes: {},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Providers from '$shared/lib/storybook/Providers.svelte';
|
||
|
|
import BreadcrumbHeaderSeeded from './BreadcrumbHeaderSeeded.svelte';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="With Breadcrumbs"
|
||
|
|
parameters={{
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
story:
|
||
|
|
'Three sections are registered with the breadcrumb store. The story scrolls the iframe so the IntersectionObserver marks them as scrolled-past, revealing the fixed header.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<Providers>
|
||
|
|
<BreadcrumbHeaderSeeded />
|
||
|
|
</Providers>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Empty"
|
||
|
|
parameters={{
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
story:
|
||
|
|
'No sections registered — BreadcrumbHeader renders nothing. This is the initial state before the user scrolls past any tracked section.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{#snippet template()}
|
||
|
|
<Providers>
|
||
|
|
<div style="padding: 2rem; color: #888; font-size: 0.875rem;">
|
||
|
|
BreadcrumbHeader renders nothing when scrolledPastItems is empty.
|
||
|
|
</div>
|
||
|
|
<BreadcrumbHeader />
|
||
|
|
</Providers>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|