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

import argTypesDefault from './config';

import { BFormSelect as MFormSelect } from 'bootstrap-vue';
import { BFormSelectOption as MFormSelectOption } from 'bootstrap-vue';
import { BFormSelectOptionGroup as MFormSelectOptionGroup } from 'bootstrap-vue';
import { MFormFile } from '@/src';

<Meta title="Form File" component={MFormFile} />

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MFormFile },
  template: `
    <m-form-file
      :id="id"
      :aria-describedby="ariaDescribedby"
      :accept="accept"
      :capture="capture"
      :value="value"
      :button-text="buttonText"
      :label="label"
      :placeholder="placeholder"
      :state="state"
      :helper-text="helperText"
      :error-text="errorText"
      :multiple="multiple"
    />
  `
});

# Form Select

<FormFileIntroduction />

<Anchor storyId="form-file--default-story"></Anchor>

## Default

<Canvas>
  <Story
    name="Default"
    args={{
      label: 'Label',
      placeholder: 'No file selected'
    }}
    argTypes={{ ...argTypesDefault }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Multiple File

<Canvas>
  <Story
    name="Multiple File"
    args={{
      label: 'Multiple File',
      placeholder: 'No file selected',
      multiple: true
    }}
    argTypes={{ ...argTypesDefault }}
  >
    {Template.bind({})}
  </Story>
</Canvas>