fbredius/storybook

View on GitHub
docs/snippets/vue/component-story-custom-args-icons.3.js.mdx

Summary

Maintainability
Test Coverage
```js
// YourComponent.stories.js

import YourComponent from './YourComponent.vue';

import { IconA, IconB, IconC, IconD, IconE } from './icons';

//👇 Maps the icons to a JSON serializable object to be safely used with the argTypes
const iconMap = { IconA, IconB, IconC, IconD, IconE };

export default {
  title: 'My Story with Icons',
  component: YourComponent,
  //👇 Creates specific argTypes with options
  argTypes: {
    icon: {
      options: Object.keys(iconMap),
    },
  },
};

const Template = (args) => {
  return {
    components: { YourComponent },
    setup() {
      //👇 The args will now be passed down to the template
      return {
        args: {
          ...args,
          //👇 Replaces the local variable with the override (without mutating it)
          icon: iconMap[args.icon],
        },
      };
    },
    template: '<YourComponent v-bind="args" />',
  };
};
```