@mekari/mekari-ui-vue/src/components/Toast/stories/Toast.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 ToastIntroduction from './content/ToastIntroduction.mdx';

import argTypes from './config';
import MAlert from '../../Alert';
import MButton from '../../Button';
import MToast from '../../Toast';

import Vue from 'vue';
import { MToastPlugin } from '@/index.js';
Vue.use(MToastPlugin);

<Meta title="Toast" component={MToast} argTypes={argTypes} />

# Toast

<ToastIntroduction />

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

export const TemplateToast = (args) => ({
  props: Object.keys(argTypes),
  components: { MButton },
  methods: {
    showToast() {
      this.$toastPlugin.open({
        title: this.title,
        description: this.description,
        type: this.type,
        icon: this.icon,
        position: this.position,
        duration: this.duration,
        singleToast: this.singleToast,
        linksText: this.linksText,
        linksHref: this.linksHref,
        linksTarget: this.linksTarget,
      });
    }
  },
  template: `
    <m-button @click="showToast">
      Button
    </m-button>
  `,
});

<Canvas>
  <Story name="Default">
    {TemplateToast.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />