110 lines
4.3 KiB
Svelte
110 lines
4.3 KiB
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>
|