55 lines
1.6 KiB
Svelte
55 lines
1.6 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 withChatterDocs from './stories/docs/withChatter.md?raw';
|
|
|
|
import DatawrapperChart from './DatawrapperChart.svelte';
|
|
|
|
import {
|
|
withComponentDocs,
|
|
withStoryDocs,
|
|
} from '$lib/docs/utils/withParams.js';
|
|
|
|
const meta = {
|
|
title: 'Components/DatawrapperChart',
|
|
component: DatawrapperChart,
|
|
...withComponentDocs(componentDocs),
|
|
argTypes: {
|
|
width: {
|
|
control: 'select',
|
|
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<Meta {...meta} />
|
|
|
|
<Template let:args>
|
|
<DatawrapperChart {...args} />
|
|
</Template>
|
|
|
|
<Story
|
|
name="Default"
|
|
args="{{
|
|
src: 'https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html',
|
|
id: 'abortion-rights-map',
|
|
ariaLabel: 'map',
|
|
frameTitle: 'Global abortion access',
|
|
}}"
|
|
/>
|
|
|
|
<Story name="With chatter" {...withStoryDocs(withChatterDocs)}>
|
|
<DatawrapperChart
|
|
frameTitle="Global abortion access"
|
|
ariaLabel="map"
|
|
id="abortion-rights-map"
|
|
src="https://graphics.reuters.com/USA-ABORTION/lgvdwemlbpo/media-embed.html"
|
|
title="Global abortion access"
|
|
description="A map of worldwide access to abortion."
|
|
notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}"
|
|
/>
|
|
</Story>
|