@mekari/mekari-ui-vue/src/components/Button/stories/Button.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 { action } from '@storybook/addon-actions';

import { argTypes, parameters } from './config';
import MButton from '../../Button';
import MButtonWithBadgeWrapper from '../components/ButtonWithBadgeWrapper';
import MIcon from '../../Icon';
import MTooltip from '../../Tooltip';

import ButtonIntroduction from './content/ButtonIntroduction.mdx';

<Meta title="Button" component={MButton} argTypes={argTypes}/>

export const actionsData = { onClick: action('onClick') };

export const Template = (args) => ({
  props: [
    'variant',
    'size',
    'theme',
    'iconVariant',
    'buttonType',
    'label',
    'disabled'
  ],
  components: { MButton, MTooltip },
  methods: actionsData,
  template: `
    <div>
      <m-tooltip
        trigger="hover"
        content="Content"
        v-if="variant === 'icon-only'"
        target="target-example"
      />
      <m-button
        :size="size"
        :variant="variant"
        :theme="theme"
        :iconVariant="iconVariant"
        :buttonType="buttonType"
        :label="label"
        :disabled="disabled"
        id="target-example"
        @click="onClick"
      />
    </div>
`
});

# Button

<ButtonIntroduction />

<Canvas>
  <Story name="example-button" parameters={parameters}>
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="example-button" />

export const TextOnlyTemplate = (args) => ({
  components: { MButton },
  template: `
    <div class="d-flex">
      <m-button>
        Primary
      </m-button>
      <m-button theme="secondary" class="ml-1">
        Secondary
      </m-button>
      <m-button theme="danger" class="ml-1">
        Destructive
      </m-button>
      <m-button theme="ghost" class="ml-1">
        Ghost
      </m-button>
      <m-button :disabled="true" class="ml-1">
        Disabled
      </m-button>
    </div>
`
});

## Text Only
<Canvas>
  <Story name='Text Only'>
    {TextOnlyTemplate.bind({})}
  </Story>
</Canvas>

export const WithIconTemplate = (args) => ({
  components: { MButton, MTooltip },
  template: `
    <div class="d-flex pt-4">
      <m-button variant="icon-left" icon-variant="search" class="ml-1">
        Icon Left
      </m-button>
      <m-button variant="icon-right" icon-variant="search" class="ml-1">
        Icon Right
      </m-button>
      <m-tooltip
        trigger="hover"
        content="Icon Only"
        target="button-1"
      />
      <m-button
        variant="icon-only"
        icon-variant="search"
        class="ml-1"
        id="button-1"
      />
    </div>
`
});

## With Icon
<Canvas>
  <Story name='With Icon'>
    {WithIconTemplate.bind({})}
  </Story>
</Canvas>