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

import {
  argTypesDefault,
  argTypesGroup
} from './config';

import {
  MFormCheckboxGroup
} from '../../../../src';
import MFormCheckbox from '../../FormCheckbox';
import MFormGroup from '../../FormGroup';
import MLabel from '../../Label';

<Meta title="Form Checkbox" component={MFormCheckbox} />

export const TemplateDefault = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MFormCheckbox },
  data() {
    return {
      localValue: true
    }
  },
  template: `
    <div>
      <m-form-checkbox
        :checked="localValue"
        @change="$event => (localValue = $event)"
      >
        Checkbox Value: <strong>(Checked: {{ localValue }})</strong>
      </m-form-checkbox>
    </div>
  `
});

# Form Checkbox

<FormCheckboxIntroduction />

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

## Default

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

<ArgsTable story="Default" />

## Switch
### Default size
<Canvas>
  <Story
    name="Switch Mode"
    argTypes={{ ...argTypesDefault }}
    args={{
      enableSwitch: true
    }}
  >
    {TemplateDefault.bind({})}
  </Story>
</Canvas>

### Small size
<Canvas>
  <Story
    name="example-switch-small"
    argTypes={{ ...argTypesDefault }}
    args={{
      enableSwitch: true,
      switchSize: 'small'
    }}
  >
    {TemplateDefault.bind({})}
  </Story>
</Canvas>

export const TemplateGroup = (args) => ({
  props: Object.keys(argTypesGroup),
  components: { MFormGroup, MFormCheckboxGroup, MLabel },
  data() {
    return {
      selected: []
    }
  },
  template: `
    <m-form-group>
      <m-label>Label</m-label>
      <m-form-checkbox-group
        v-model="selected"
        :aria-invalid="ariaInvalid"
        :autofocus="autofocus"
        :checked="checked"
        :disabled="disabled"
        :disabled-field="disabledField"
        :form="form"
        :html-field="htmlField"
        :id="id"
        :name="name"
        :options="options"
        :plain="plain"
        :required="required"
        :size="size"
        :stacked="stacked"
        :state="state"
        :switches="switches"
        :text-field="textField"
        :validated="validated"
        :value-field="valueField"
      />
    </m-form-group>
  `
});

<Anchor storyId="form-checkbox--grouped"></Anchor>

## Grouped

<Canvas>
  <Story
    name="Grouped"
    argTypes={{ ...argTypesGroup }}
  >
    {TemplateGroup.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Grouped" />