95 lines
2.7 KiB
Svelte
95 lines
2.7 KiB
Svelte
<script module lang="ts">
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import { createRawSnippet } from 'svelte';
|
|
import ExpandableWrapper from './ExpandableWrapper.svelte';
|
|
|
|
const visibleSnippet = createRawSnippet(() => ({
|
|
render: () =>
|
|
`<div class="w-48 p-2 font-bold text-indigo-600">
|
|
Always visible
|
|
</div>`,
|
|
}));
|
|
|
|
const hiddenSnippet = createRawSnippet(() => ({
|
|
render: () =>
|
|
`<div class="p-4 space-y-2 border-t border-indigo-100 mt-2">
|
|
<div class="h-4 w-full bg-indigo-100 rounded animate-pulse"></div>
|
|
<div class="h-4 w-2/3 bg-indigo-50 rounded animate-pulse"></div>
|
|
</div>`,
|
|
}));
|
|
|
|
const badgeSnippet = createRawSnippet(() => ({
|
|
render: () =>
|
|
`<div class="">
|
|
<span class="badge badge-primary">*</span>
|
|
</div>`,
|
|
}));
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/ExpandableWrapper',
|
|
component: ExpandableWrapper,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Animated styled wrapper for content that can be expanded and collapsed.',
|
|
},
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
|
},
|
|
},
|
|
args: {
|
|
expanded: false,
|
|
disabled: false,
|
|
rotation: 'clockwise',
|
|
visibleContent: visibleSnippet,
|
|
hiddenContent: hiddenSnippet,
|
|
},
|
|
argTypes: {
|
|
expanded: { control: 'boolean' },
|
|
disabled: { control: 'boolean' },
|
|
rotation: {
|
|
control: 'select',
|
|
options: ['clockwise', 'counterclockwise'],
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
</script>
|
|
|
|
<Story name="With hidden content">
|
|
{#snippet children(args)}
|
|
<div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
|
|
<ExpandableWrapper
|
|
{...args}
|
|
bind:expanded={args.expanded}
|
|
/>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Disabled" args={{ disabled: true }}>
|
|
{#snippet children(args)}
|
|
<div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
|
|
<ExpandableWrapper
|
|
{...args}
|
|
bind:expanded={args.expanded}
|
|
disabled={args.disabled}
|
|
/>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="With badge" args={{ badge: badgeSnippet }}>
|
|
{#snippet children(args)}
|
|
<div class="p-12 bg-slate-100 min-h-[300px] flex justify-center items-start">
|
|
<ExpandableWrapper
|
|
{...args}
|
|
bind:expanded={args.expanded}
|
|
/>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|