@mekari/mekari-ui-vue/src/components/Badge/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, iconList } from '@/.storybook/story-config';import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-icons.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-badge.css';

export default {
  // Props
  size: {
    control: {
      type: 'select',
      options: ['default', 'slim'],
    },
    table: {
      type: {
        summary: 'string',
        detail: '"default" | "slim"',
      },
    },
    defaultValue: 'reset',
    description: 'Set the size of badge. Can be `default` or `slim`.',
  },
  rounded: {
    description: 'When set `true`, it will make the badge circle if the content inside is less than 2 char, and will be rounded if the content is more than 2 char.',
  },
  variant: {
    control: {
      type: 'select',
      options: [...colorList],
    },
    description: 'Set the variant of badge.',
  },
  label: {
    control: {
      type: 'text',
    },
    defaultValue: '9',
    description: 'Label that will be shown inside badge.',
  },
  iconPosition: {
    control: {
      type: 'select',
      options: [null, 'left', 'right'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'null | "left" | "right"',
      },
    },
    description: 'Set the position of icon inside badge.',
  },
  iconVariant: {
    control: {
      type: 'select',
      options: [...iconList],
    },
    defaultValue: 'reset',
    description: 'Set the variant of icon inside badge.',
  },
  showBadge: {
    description: 'If set to `true`, it will show the badge. If set to `false`, it will hide the badge.',
  },
  // Slot
  default: {
    table: {
      type: null,
    },
    description: 'Default slot will be set as content or label of badge.',
  },
};