55 lines
1.5 KiB
Svelte
55 lines
1.5 KiB
Svelte
|
<script module>
|
||
|
|
import Providers from '$shared/lib/storybook/Providers.svelte';
|
||
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||
|
|
import TypographyMenu from './TypographyMenu.svelte';
|
||
|
|
|
||
|
|
const { Story } = defineMeta({
|
||
|
|
title: 'Features/TypographyMenu',
|
||
|
|
component: TypographyMenu,
|
||
|
|
tags: ['autodocs'],
|
||
|
|
parameters: {
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component:
|
||
|
|
'Floating typography controls. Mobile/tablet: settings button that opens a popover. Desktop: inline bar with combo controls.',
|
||
|
|
},
|
||
|
|
story: { inline: false },
|
||
|
|
},
|
||
|
|
layout: 'centered',
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
hidden: { control: 'boolean' },
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Story name="Desktop">
|
||
|
|
{#snippet template()}
|
||
|
|
<Providers>
|
||
|
|
<div class="relative h-20 flex items-end justify-center p-4">
|
||
|
|
<TypographyMenu />
|
||
|
|
</div>
|
||
|
|
</Providers>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story name="Mobile">
|
||
|
|
{#snippet template()}
|
||
|
|
<Providers initialWidth={375}>
|
||
|
|
<div class="relative h-20 flex items-end justify-end p-4">
|
||
|
|
<TypographyMenu />
|
||
|
|
</div>
|
||
|
|
</Providers>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
<Story name="Hidden">
|
||
|
|
{#snippet template()}
|
||
|
|
<Providers>
|
||
|
|
<div class="relative h-20 flex items-end justify-center p-4">
|
||
|
|
<TypographyMenu hidden={true} />
|
||
|
|
</div>
|
||
|
|
</Providers>
|
||
|
|
{/snippet}
|
||
|
|
</Story>
|