fbredius/storybook

View on GitHub
docs/snippets/vue/component-story-custom-args-icons.2.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, { argTypes }) => {
  //👇 Retrieves the appropriate icon passes it as a component prop
  const oldArgs = args;
  const { icon } = oldArgs;

  //👇 Sets the new icon
  const selectedIcon = iconMap[icon];

  //👇 Updates the args with the new icon
  args.icon = selectedIcon;

  return {
    props: Object.keys(argTypes),
    components: { YourComponent },
    template: '<YourComponent v-bind="$props"/>',
  };
};
```