fbredius/storybook

View on GitHub
docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx

Summary

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

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

  //👇 Some function to demonstrate the behavior
  function someFunction(valuePropertyA, valuePropertyB) {
    // Makes some computations and returns something
  }
</script>

<!--👇 Creates specific argTypes and automatically infers them when 'options' is defined -->

<Meta
  title="YourComponent"
  component={YourComponent}
  argTypes={{
    propertyA: {
      options: ['Item One', 'Item Two', 'Item Three'],
      control: { type: 'select' }, 
    },
    propertyB: {
      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
    },
  }}
/>

<Template let:args>
  <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
</Template>
```