@mekari/mekari-ui-vue/src/components/Badge/stories/Badge.stories.mdx

--- 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 { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import BadgeIntroduction from './content/BadgeIntroduction.mdx';
import argTypesDefault from './config';
import MBadge from '../index.vue';

<Meta title="Badge" component={MBadge} argTypes={argTypesDefault}/>

<Anchor storyId="badge--default-story"></Anchor>

# Badge

<BadgeIntroduction />

## Default

export const BadgeDefault = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MBadge },
  template: `
    <m-badge
      :show-badge="showBadge"
      :size="size"
      :variant="variant"
      :label="label"
      :icon-position="iconPosition"
      :icon-variant="iconVariant"
      :rounded="rounded"
      @click="showBadge = !showBadge"
    />
  `
});

export const BadgeDefaultCode = `
components: { ${Object.keys(BadgeDefault.bind({})().components)} },
template: \`${BadgeDefault.bind({})().template}\`
`

<Canvas>
  <Story
    name="Default"
    parameters={{
      docs: {
        source: {
          code: BadgeDefaultCode
        }
      }
     }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

<Anchor storyId="badge--default-slim"></Anchor>

## Default Slim

<Canvas>
  <Story
    name="Default Slim"
    args={{
      size: 'slim'
    }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>

<Anchor storyId="badge--default-removable"></Anchor>

## Default Removable Badge

<Canvas>
  <Story
    name="Default Removable"
    args={{
      iconPosition: 'right',
      label: 'Default Removable'
    }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>

<Anchor storyId="badge--default-slim-removable"></Anchor>

## Default Slim Removable

<Canvas>
  <Story
    name="Default Slim Removable"
    args={{
      size: 'slim',
      iconPosition: 'right',
      label: 'Default Slim Removable'
    }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>

<Anchor storyId="badge--rounded"></Anchor>

## Rounded

<Canvas>
  <Story
    name="Rounded"
    args={{
      rounded: true
    }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>

<Anchor storyId="badge--rounded-slim"></Anchor>

## Rounded Slim

<Canvas>
  <Story
    name="Rounded Slim"
    args={{
      rounded: true,
      size: 'slim',
    }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>

<Anchor storyId="badge--rounded-removable"></Anchor>

## Rounded Removable

<Canvas>
  <Story
    name="Rounded Removable"
    args={{
      rounded: true,
      iconPosition: 'right',
      label: 'Rounded Removable'
    }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>

<Anchor storyId="badge--rounded-slim-removable"></Anchor>

## Rounded Slim Removable

<Canvas>
  <Story
    name="Rounded Slim Removable"
    args={{
      rounded: true,
      size: 'slim',
      iconPosition: 'right',
      label: 'Rounded Slim Removable'
    }}
  >
    {BadgeDefault.bind({})}
  </Story>
</Canvas>