feat: add missing storybook files and type template arguments properly
This commit is contained in:
@@ -0,0 +1,109 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user