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

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

import Vue from 'vue';
import ToastPlugin from '../../../plugins/Toast';
Vue.use(ToastPlugin);

export const Template = args => ({
  props: ['type', 'icon', 'size', 'title', 'description', 'toast', 'dismissible', 'prefixClass', 'linksText', 'linksHref', 'linksTarget'],
  components: { MAlert },
  template: `
    <m-alert
      :type="type"
      :icon="icon"
      :size="size"
      :title="title"
      :description="description"
      :toast="toast"
      :dismissible="dismissible"
      :prefix-class="prefixClass"
      :linksText="linksText"
      :linksHref="linksHref"
      :linksTarget="linksTarget"
    />
  `,
});

<Meta title="Alert" component={MAlert} argTypes={argTypesDefault} />

# Alert

<AlertIntroduction />

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

## Default

<Canvas>
  <Story name="Default" argTypes={{ ...argTypesDefault }}>
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

<Anchor storyId="alert--small"></Anchor>

## Small

<Canvas>
  <Story
    name="Small"
    argTypes={{ ...argTypesDefault }}
    args={{
      title: null,
      description: 'This is small alert',
      size: 'small',
      dismissible: true
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>