Ilia Mashkov
92 lines
3.0 KiB
Svelte
92 lines
3.0 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import FontApplicator from './FontApplicator.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Entities/FontApplicator',
|
|
component: FontApplicator,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Loads a font and applies it to children. Shows blur/scale loading state until font is ready, then reveals with a smooth transition.',
|
|
},
|
|
story: { inline: false },
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
weight: { control: 'number' },
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { mockUnifiedFont } from '$entities/Font/lib/mocks';
|
|
import type { ComponentProps } from 'svelte';
|
|
|
|
const fontUnknown = mockUnifiedFont({ id: 'nonexistent-font-xk92z', name: 'Nonexistent Font Xk92z' });
|
|
|
|
const fontArial = mockUnifiedFont({ id: 'arial', name: 'Arial' });
|
|
|
|
const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
|
|
</script>
|
|
|
|
<Story
|
|
name="Loading State"
|
|
parameters={{
|
|
docs: {
|
|
description: {
|
|
story:
|
|
'Font that has never been loaded by appliedFontsManager. The component renders in its pending state: blurred, scaled down, and semi-transparent.',
|
|
},
|
|
},
|
|
}}
|
|
args={{ font: fontUnknown, weight: 400 }}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof FontApplicator>)}
|
|
<FontApplicator {...args}>
|
|
<p class="text-xl">The quick brown fox jumps over the lazy dog</p>
|
|
</FontApplicator>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Loaded State"
|
|
parameters={{
|
|
docs: {
|
|
description: {
|
|
story:
|
|
'Uses Arial, a system font available in all browsers. Because appliedFontsManager has not loaded it via FontFace, the manager status may remain pending — meaning the blur/scale state may still show. In a real app the manager would load the font and transition to the revealed state.',
|
|
},
|
|
},
|
|
}}
|
|
args={{ font: fontArial, weight: 400 }}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof FontApplicator>)}
|
|
<FontApplicator {...args}>
|
|
<p class="text-xl">The quick brown fox jumps over the lazy dog</p>
|
|
</FontApplicator>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="Custom Weight"
|
|
parameters={{
|
|
docs: {
|
|
description: {
|
|
story:
|
|
'Demonstrates passing a custom weight (700). The weight is forwarded to appliedFontsManager for font resolution; visually identical to the loaded state story until the manager confirms the font.',
|
|
},
|
|
},
|
|
}}
|
|
args={{ font: fontArialBold, weight: 700 }}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof FontApplicator>)}
|
|
<FontApplicator {...args}>
|
|
<p class="text-xl">The quick brown fox jumps over the lazy dog</p>
|
|
</FontApplicator>
|
|
{/snippet}
|
|
</Story>
|