@mekari/mekari-ui-vue/src/components/FormInput/stories/FormInput.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 FormInputIntroduction from './content/FormInputIntroduction.mdx';
import { Template, TemplateWithIcon } from './content/FormInputTemplate';

import argTypesDefault from './config';

import MLabel from '../../Label';
import MFormInput from '../../FormInput';

<Meta title="Form Input" component={MFormInput} />

# Form Input

<FormInputIntroduction />

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

## Default

<Canvas>
  <Story
    name="Default"
    argTypes={{ ...argTypesDefault }}
    args={{
      placeholder: 'Default Input'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

<Anchor storyId="form-input--with-icon"></Anchor>

## With Icon

Form Input can have icon as a prefix or suffix inside the input. This can be done to set the props `has-prefix-icon`, `has-suffix-icon`, or `has-double-suffix-icon` to `true`.
- `has-prefix-icon`: when this props set to `true`, the input can have a prefix icon.
- `has-suffix-icon`: when this props set to `true`, the input can have a suffix icon.
- `has-double-prefix-icon`: when this props set to `true`, the input can have a double suffix icon. This is a special when you need two suffix icon. For example, in Datepicker component has a suffix icon of calendar and another suffix icon of reset-fill.

After set the props on input, make sure also to set `.is-prefix-icon`, `.is-suffix-icon`, or `.is-double-suffix-icon` to `true` in Icon component.
- `is-prefix-icon`: when this props set to `true`, the icon will act as prefix icon.
- `is-suffix-icon`: when this props set to `true`, the icon will act as suffix icon.
- `is-double-prefix-icon`: when this props set to `true`, the icon act as another suffix icon. The first suffix icon will be on the right most. The second suffix icon will be on left of the first suffix icon.

To make the Form Input and Icon component work as a Input with icon, The Input Group needed to be added as a wrapper for them. Here is the example of the usage of input with icon:

<Canvas>
  <Story
    name="With Icon"
    argTypes={{ ...argTypesDefault }}
    args={{
      placeholder: 'Input with icon'
    }}
  >
    {TemplateWithIcon.bind({})}
  </Story>
</Canvas>