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

import argTypesDefault from './config';

import MFormInput from '../../FormInput';
import MIcon from '../../Icon';
import MInputGroup from '../../InputGroup';
import { MInputGroupText, MInputGroupAppend, MInputGroupPrepend } from '../../../../src';

<Meta title="Input Group" component={MInputGroup} />

# Input Group

<InputGroupIntroduction />

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

export const DefaultExample = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MFormInput, MIcon, MInputGroup },
  template: `
    <m-input-group
      :id="id"
      :append="append"
      :append-html="appendHtml"
      :prepend="prepend"
      :prepend-html="prependHtml"
      :size="size"
      :tag="tag"
    >
      <m-form-input placeholder="Placeholder of input" />
    </m-input-group>
  `
});

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

<ArgsTable story="Default" />

## Input 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:

export const InputWithIconExample = (args) => ({
  components: { MFormInput, MIcon, MInputGroup },
  template: `
    <m-input-group>
      <m-form-input
        placeholder="Placeholder of input"
        :has-prefix-icon="true"
        :has-suffix-icon="true"
        :has-double-suffix-icon="true"
      />
      <m-icon
        variant="calendar"
        :is-prefix-icon="true"
      />
      <m-icon
        variant="calendar"
        :is-suffix-icon="true"
      />
      <m-icon
        variant="reset-fill"
        :is-double-suffix-icon="true"
      />
    </m-input-group>
  `
});

<Canvas>
  <Story
    name="Input With Icon"
    argTypes={{ ...argTypesDefault }}
  >
    {InputWithIconExample.bind({})}
  </Story>
</Canvas>

## Append

export const appendTemplate = `
<m-input-group>
  <template #append>
    <m-input-group-append>
      <m-input-group-text>
        <m-icon variant="calendar" />
      </m-input-group-text>
    </m-input-group-append>
  </template>
  <m-form-input
    placeholder="Placeholder of input"
  />
</m-input-group>
`

export const AppendExample = (args) => ({
  components: { MFormInput, MIcon, MInputGroup, MInputGroupAppend, MInputGroupText },
  template: `${appendTemplate}`
});

<Canvas>
  <Story
    name="Append"
    argTypes={{ ...argTypesDefault }}
    parameters={{
      docs: {
        source: {
          code: appendTemplate
        }
      }
    }}
  >
    {AppendExample.bind({})}
  </Story>
</Canvas>

## Prepend

export const prependTemplate = `
<m-input-group>
  <template #prepend>
    <m-input-group-prepend>
      <m-input-group-text>
        <m-icon variant="calendar" />
      </m-input-group-text>
    </m-input-group-prepend>
  </template>
  <m-form-input
    placeholder="Placeholder of input"
  />
</m-input-group>
`

export const PrependExample = (args) => ({
  components: { MFormInput, MIcon, MInputGroup, MInputGroupPrepend, MInputGroupText },
  template: `${prependTemplate}`
});

<Canvas>
  <Story
    name="Prepend"
    argTypes={{ ...argTypesDefault }}
    parameters={{
      docs: {
        source: {
          code: prependTemplate
        }
      }
    }}
  >
    {PrependExample.bind({})}
  </Story>
</Canvas>