import CheckBox from '../CheckBox';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';

export const argTypes = {
  component: CheckBox,
  title: 'Components/CheckBox',
};

<Meta
  title="Components/CheckBox"
  component={CheckBox}
/>

export const CheckBoxTemplate = args => <CheckBox {...args} />;

<Heading
  title="CheckBox"
  componentRelativePath="CheckBox/CheckBox.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Contribute](#contribute)

## Overview

CheckBox is a component that allows you to use as a boolean value

<Canvas>
  <Story
    name="Overview"
    args={{
      checked: false,
      onChange: () => console.log('on change callback'),
      label: 'checkBoxLabel',
      labelClassName: 'text-black text-sm',
    }}
  >
    {CheckBoxTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={CheckBox} />

## Contribute

<Footer componentRelativePath="CheckBox/__stories__/CheckBox.stories.mdx" />
