frontend-svelte/src/entities/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.stories.svelte

<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
import NavigationWrapper from './NavigationWrapper.svelte';

const { Story } = defineMeta({
    title: 'Entities/NavigationWrapper',
    component: NavigationWrapper,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Thin wrapper that registers an HTML section with `scrollBreadcrumbsStore` via a Svelte use-directive action. Has no visual output of its own — renders `{@render content(registerBreadcrumb)}` where `registerBreadcrumb` is the action to attach with `use:`. On destroy the section is automatically removed from the store.',
            },
            story: { inline: false },
        },
        layout: 'fullscreen',
    },
    argTypes: {
        index: {
            control: { type: 'number', min: 0 },
            description: 'Unique index used for ordering in the breadcrumb trail',
        },
        title: {
            control: 'text',
            description: 'Display title shown in the breadcrumb header',
        },
        offset: {
            control: { type: 'number', min: 0 },
            description: 'Scroll offset in pixels to account for sticky headers',
        },
    },
});
</script>

<script lang="ts">
import type { ComponentProps } from 'svelte';
</script>

<Story
    name="Single Section"
    args={{ index: 0, title: 'Introduction', offset: 96 }}
    parameters={{
        docs: {
            description: {
                story:
                    'A single section registered with NavigationWrapper. The `content` snippet receives the `register` action and applies it via `use:register`.',
            },
        },
    }}
>
    {#snippet template(args: ComponentProps<typeof NavigationWrapper>)}
        <NavigationWrapper {...args}>
            {#snippet content(register)}
                <section use:register style="padding: 2rem; background: #f5f5f5; min-height: 200px;">
                    <p style="font-size: 0.875rem; color: #555;">
                        Section registered as <strong>{args.title}</strong> at index {args.index}. Scroll past this
                        section to see it appear in the breadcrumb header.
                    </p>
                </section>
            {/snippet}
        </NavigationWrapper>
    {/snippet}
</Story>

<Story
    name="Multiple Sections"
    parameters={{
        docs: {
            description: {
                story:
                    'Three sequential sections each wrapped in NavigationWrapper with distinct indices and titles. Demonstrates how the breadcrumb trail builds as the user scrolls.',
            },
        },
    }}
>
    {#snippet template()}
        <div style="display: flex; flex-direction: column; gap: 0;">
            <NavigationWrapper index={0} title="Introduction" offset={96}>
                {#snippet content(register)}
                    <section use:register style="padding: 2rem; background: #f5f5f5; min-height: 300px;">
                        <h2 style="margin: 0 0 0.5rem;">Introduction</h2>
                        <p style="font-size: 0.875rem; color: #555;">
                            Registered as section 0. Scroll down to build the breadcrumb trail.
                        </p>
                    </section>
                {/snippet}
            </NavigationWrapper>

            <NavigationWrapper index={1} title="Typography" offset={96}>
                {#snippet content(register)}
                    <section use:register style="padding: 2rem; background: #ebebeb; min-height: 300px;">
                        <h2 style="margin: 0 0 0.5rem;">Typography</h2>
                        <p style="font-size: 0.875rem; color: #555;">Registered as section 1.</p>
                    </section>
                {/snippet}
            </NavigationWrapper>

            <NavigationWrapper index={2} title="Spacing" offset={96}>
                {#snippet content(register)}
                    <section use:register style="padding: 2rem; background: #e0e0e0; min-height: 300px;">
                        <h2 style="margin: 0 0 0.5rem;">Spacing</h2>
                        <p style="font-size: 0.875rem; color: #555;">Registered as section 2.</p>
                    </section>
                {/snippet}
            </NavigationWrapper>
        </div>
    {/snippet}
</Story>