73 lines
1.6 KiB
Svelte
73 lines
1.6 KiB
Svelte
<script context="module" lang="ts">
|
|
// @ts-ignore raw
|
|
import componentDocs from './stories/docs/component.md?raw';
|
|
// @ts-ignore raw
|
|
import quickitDocs from './stories/docs/quickit.md?raw';
|
|
// @ts-ignore raw
|
|
import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
|
|
|
|
import FeaturePhoto from './FeaturePhoto.svelte';
|
|
|
|
import {
|
|
withComponentDocs,
|
|
withStoryDocs,
|
|
} from '$lib/docs/utils/withParams.js';
|
|
|
|
export const meta = {
|
|
title: 'Components/FeaturePhoto',
|
|
component: FeaturePhoto,
|
|
...withComponentDocs(componentDocs),
|
|
argTypes: {
|
|
width: {
|
|
control: 'select',
|
|
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
|
},
|
|
textWidth: {
|
|
control: 'select',
|
|
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<script>
|
|
import { Template, Story } from '@storybook/addon-svelte-csf';
|
|
|
|
// @ts-ignore jpg
|
|
import sharkSrc from './stories/shark.jpg';
|
|
</script>
|
|
|
|
<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)}
|
|
/>
|