@mekari/mekari-ui-vue/src/components/Icon/stories/config/index.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import { colorList, iconBlankslateList, iconList } from '@/.storybook/story-config';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-icons.css';

export const iconColors = [...colorList];

export const argTypesDefault = {
  // Props
  size: {
    control: {
      type: 'select',
      options: ['small', 'regular', 'medium', 'large'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'small | regular | medium | large',
      },
    },
    description: 'Set the size of the icon. If you don\'t define the size, the icon size will be set to `regular`.',
  },
  color: {
    control: {
      type: 'select',
      options: [...iconColors],
    },
    description: 'Set the color of the icon. If you don\'t define the color, the icon will be shown in `$slate`. On blankslate, the color is set on variant directly.',
  },
  variant: {
    control: {
      type: 'select',
      options: [...iconList],
    },
    defaultValue: 'activity',
    description: 'Set the variant of the icon.',
  },
  isPrefixIcon: {
    description: 'If this prop value is `true`, will add  `.ic-input-prefix` class to component. This will make the component can be used inside FormInput component as prefix icon.',
  },
  isSuffixIcon: {
    description: 'If this prop value is `true`, will add  `.ic-input-suffix` class to component. This will make the component can be used inside FormInput component as suffix icon.',
  },
  isDoubleSuffixIcon: {
    description: 'If this prop value is `true`, will add  `.ic-input-suffix--double` class to component. This will make the component can be used inside FormInput component as second suffix icon. Need to set prop `isSuffixIcon` to true FormInput component can show two suffix icon.',
  },
};

export const argTypesBlankslate = {
  // Props
  size: {
    control: {
      type: 'select',
      options: ['blankslate'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'blankslate',
      },
    },
    defaultValue: 'blankslate',
    description: 'Set the size of the icon. If you don\'t define the size, the icon size will be set to `regular`.',
  },
  color: {
    control: { type: null },
    description: 'Set the color of the icon. If you don\'t define the color, the icon will be shown in `$slate`. On blankslate, the color is set on variant directly.',
  },
  variant: {
    control: {
      type: 'select',
      options: [...iconBlankslateList],
    },
    defaultValue: 'activity',
    description: 'Set the variant of the icon.',
  },
};

const codeDefault = `
<m-icon
  :color="params.color"
  :size="params.size"
  :variant="params.variant"
>
</m-icon>
`;

const codeBlankslate = `
<m-icon
  :size="params.size"
  :variant="params.variant"
>
</m-icon>
`;

export const parametersDefault = {
  docs: { source: { code: codeDefault } },
};
export const parametersBlankslate =  {
  docs: { source: { code: codeBlankslate } },
};