import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, select } from '@storybook/addon-knobs'
import Checkbox from './'
import { ChoiceGroup } from '../'

<Meta
  title="Components/Forms/Checkbox"
  component={Checkbox}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A8637',
    },
  }}
/>

# Checkbox

A Checkbox component is an enhanced version of the default HTML `<input>` `checkbox`. Checkbox uses the `Choice` component as a smart wrapper.

<Canvas>
  <Story name="default">
    <ChoiceGroup
      value={select(
        'Value from props',
        {
          zero: [],
          one: ['hansel'],
          two: ['hansel', 'mugatu'],
          three: ['hansel', 'mugatu', 'derek'],
        },
        ['hansel', 'mugatu']
      )}
    >
      <Checkbox label="Derek" value="derek" />
      <Checkbox label="Hansel" value="hansel" />
      <Checkbox label="Mugatu" value="mugatu" />
      <Checkbox label="Matilda" value="matilda" />
    </ChoiceGroup>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: HSDS (ActionSelect), HsApp (Beacon)

<br />
<br />

### Props

<ArgsTable of={Checkbox} />

### Stories

#### Disabled

<Canvas>
  <Story name="Disabled">
    <ChoiceGroup value={['derek', 'hansel']}>
      <Checkbox label="Derek (Disable)" value="derek" disabled checked />
      <Checkbox label="Hansel" value="hansel" />
    </ChoiceGroup>
  </Story>
</Canvas>

#### With selection limits

<Canvas>
  <Story name="with selection limits">
    <ChoiceGroup multiSelectLimit={number('multiSelectLimit', 2)}>
      <Checkbox label="Derek" value="derek" />
      <Checkbox label="Hansel" value="hansel" />
      <Checkbox label="Mugatu" value="mugatu" />
      <Checkbox label="Matilda" value="matilda" />
    </ChoiceGroup>
  </Story>
</Canvas>
