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

import {
  iconColors,
  parametersDefault,
  argTypesDefault,
} from './config';

import MFormGroup from '../../FormGroup';
import MLabel from '../../Label';
import MFormInput from '../../FormInput';
import MFormGroupCounterLabel from '../components/FormGroupCounterLabel';

<Meta title="Form Group" component={MFormGroup} />

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MFormGroup, MLabel, MFormInput, MFormGroupCounterLabel },
  data() {
    return {
      defaultModel: ''
    }
  },
  template: `
    <m-form-group
      :id="id"
      :content-cols="contentCols"
      :content-cols-lg="contentColsLg"
      :content-cols-md="contentColsMd"
      :content-cols-sm="contentColsSm"
      :content-cols-xl="contentColsXl"
      :description="description"
      :disabled="disabled"
      :feedback-aria-live="feedbackAriaLive"
      :invalid-feedback="invalidFeedback"
      :label="label"
      :label-align="labelAlign"
      :label-align-lg="labelAlignLg"
      :label-align-md="labelAlignMd"
      :label-align-sm="labelAlignSm"
      :label-align-xl="labelAlignXl"
      :label-class="labelClass"
      :label-cols="labelCols"
      :label-cols-lg="labelColsLg"
      :label-cols-md="labelColsMd"
      :label-cols-sm="labelColsSm"
      :label-cols-xl="labelColsXl"
      :label-for="labelFor"
      :label-size="labelSize"
      :label-sr-only="labelSrOnly"
      :state="state"
      :tooltip="tooltip"
      :valid-feedback="validFeedback"
      :validated="validated"
      :max-input-length="maxInputLength"
    >
      <template v-slot="{ setInputLength, inputRemaining, limitInput }">
        <m-form-group-counter-label :label="inputRemaining" />
        <m-label>Label</m-label>
        <m-form-input
          ref="inputCounter"
          v-model="defaultModel"
          @input="setInputLength($event)"
          :formatter="limitInput"
        />
        <small>Caption</small>
      </template>
    </m-form-group>
  `,
  mounted() {
    this.$refs.inputCounter.$emit('input', this.defaultModel);
  }
});

# FormGroup

<FormGroupIntroduction />

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

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

<ArgsTable story="Default" />