fbredius/storybook

View on GitHub
docs/snippets/svelte/button-story-using-args.native-format.mdx

Summary

Maintainability
Test Coverage
```html
<!-- Button.stories.svelte -->

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

  import Button from './Button.svelte';
</script>

<Meta
  title="Button"
  component={Button}
  argTypes={{
    label: { control: 'text' },
    primary: { control: 'boolean' },
  }}
/>

<!-- πŸ‘‡ We create a β€œtemplate” of how args map to rendering -->
<Template let:args>
  <Button {...args} />
</Template>

<!-- πŸ‘‡ Each story then reuses that template -->
<Story
  name="Primary"
  args={{
    background: '#ff0',
    label: 'Button'
  }}
/>

<Story
  name="Secondary"
  args={{
    background: '#ff0',
    label: 'πŸ˜„πŸ‘πŸ˜πŸ’―'
  }}
/>
<Story
  name="Tertiary"
  args={{
    background: '#ff0',
    label: 'πŸ“šπŸ“•πŸ“ˆπŸ€“'
  }}
/>
```