fbredius/storybook

View on GitHub
docs/snippets/svelte/button-story-default-docs-code.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';

  //👇 Some function to demonstrate the behavior
  function someFunction(someValue) {
    return `i am a ${someValue}`;
  }
</script>

<!--👇 Creates specific argTypes -->
<Meta
  title="Button"
  component={Button}  
  argTypes={{
    backgroundColor: { control: 'color' },
  }}
/>

<!-- 👇 Assigns the function result to a variable and pass it as a prop into the component -->
<Template let:args>
  <Button {...args} label={someFunction(args.label)} />
</Template>

<Story
  name="ExampleStory"
  args={{
    primary: true,
    size:'small',
    label: 'Button',
  }}
/>
```