hypnagaga/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
2023-04-26 15:07:27 +01:00

71 lines
1.4 KiB
Svelte

<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore
import quickitDocs from './stories/docs/quickit.md?raw';
// @ts-ignore
import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
import FeaturePhoto from './FeaturePhoto.svelte';
// @ts-ignore
import sharkSrc from './stories/shark.jpg';
import {
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const metaProps = {
...withComponentDocs(componentDocs),
argTypes: {
width: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
},
},
};
</script>
<Meta
title="Components/FeaturePhoto"
component="{FeaturePhoto}"
{...metaProps}
/>
<Template let:args>
<FeaturePhoto {...args} />
</Template>
<Story
name="Default"
args="{{
src: sharkSrc,
altText: 'A shark!',
width: 'normal',
caption: 'Carcharodon carcharias - REUTERS',
}}"
/>
<Story
name="🚀 QUICKIT"
args="{{
src: sharkSrc,
altText: 'A shark!',
width: 'normal',
caption: 'Carcharodon carcharias - REUTERS',
}}"
{...withStoryDocs(quickitDocs)}
/>
<Story
name="Missing altText"
args="{{
src: sharkSrc,
width: 'normal',
caption: 'Carcharodon carcharias - REUTERS',
}}"
{...withStoryDocs(missingAltTextDocs)}
/>