import { Meta, Story, Preview, Source } from '@storybook/addon-docs/blocks';
import { View, Selectable } from '@tedconf/monterey';
import { number, text, boolean, select } from '@storybook/addon-knobs';

<Meta title="Forms|Selectable" component={Selectable} />

# Checkbox

## Import the Checkbox component

<Source
  code={`
import { Selectable } from '@tedconf/monterey';
`}
/>

## Use the Selectable

Pick the appropriate Selectable for your situation.

<Story name="kitchen sink">
  <View
    sx={{
      '& > *': { marginBottom: 1 },
      width: '100%',
      maxWidth: '50%',
      padding: 5
    }}
  >
    <Selectable
      defaultChecked
      type={select('checkbox', ['radio', 'checkbox'])}
      label="Name"
      name="hasName"
      value="yes"
      variant={select('variant', ['onBlack', 'onWhite'], 'onWhite')}
      disabled={boolean('disabled', false)}
      label="I have a name"
    />
    <Selectable
      label="Name"
      name="hasName"
      value="no"
      type={select('checkbox', ['radio', 'checkbox'])}
      variant={select('variant', ['onBlack', 'onWhite'], 'onWhite')}
      disabled={boolean('disabled', false)}
      label="I don't have a name"
    />
  </View>
</Story>

## Props

### type

which kind of control does your situation call for?

#### checkbox

a user can choose multiple options

<Preview withSource="open">
  <Story name="checkbox">
  <View
    sx={{
      '& > *': { marginBottom: 1 },
      padding: 4,
    }}
  >
      <Selectable
        defaultChecked
        type="checkbox"
        label="Name"
        name="hasName"
        value="yes"
        variant="onWhite"
        label="I have a name"
      />
      <Selectable
        label="Name"
        name="hasName"
        value="no"
        type="checkbox"
        variant="onWhite"
        label="I don't have a name"
      />
    </View>
  </Story>
</Preview>

#### radio

a user must select a single option

<Preview withSource="open">
  <Story name="radio">
    <View
      sx={{
        '& > *': { marginBottom: 1 },
        padding: 4, backgroundColor: 'white'
      }}
    >
      <Selectable
        defaultChecked
        type="radio"
        label="Name"
        name="hasName"
        value="yes"
        variant="onWhite"
        label="I have a name"
      />
      <Selectable
        label="Name"
        name="hasName"
        value="no"
        type="radio"
        variant="onWhite"
        label="I don't have a name"
      />
    </View>
  </Story>
</Preview>

### variant

on what color background is your control?

#### onWhite

<Preview withSource="open">
  <Story name="onWhite">
    <View
      sx={{
        '& > *': { marginBottom: 1 },
        padding: 4,
        backgroundColor: 'white'
      }}
    >
      <Selectable
        defaultChecked
        type="radio"
        label="Name"
        name="hasName (onWhite)"
        value="yes"
        variant="onWhite"
        label="I have a name"
      />
      <Selectable
        label="Name"
        name="hasName (onWhite)"
        value="no"
        type="radio"
        variant="onWhite"
        label="I don't have a name"
      />
    </View>
  </Story>
</Preview>

#### onBlack

<Preview withSource="open">
  <Story name="onBlack">
    <View
      sx={{
        '& > *': { marginBottom: 1 },
        padding: 4,
        backgroundColor: 'black'
      }}
    >
      <Selectable
        defaultChecked
        type="radio"
        label="Name"
        name="hasName (onBlack)"
        value="yes"
        variant="onBlack"
        label="I have a name"
      />
      <Selectable
        label="Name"
        name="hasName (onBlack)"
        value="no"
        type="radio"
        variant="onBlack"
        label="I don't have a name"
      />
    </View>
  </Story>
</Preview>