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

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

# Radio

<Canvas>
  <Story name="default">
    <Radio
      label="Label"
      helpText="Help description"
      disabled={boolean('disabled', false)}
      kind={select('Kind', { custom: 'custom', default: 'default' }, 'default')}
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Radio} />

### Stories

#### In a group

<Canvas>
  <Story name="In a group">
    <ChoiceGroup multiSelect={false}>
      <Radio
        label="Derek"
        value="derek"
        name="derek"
        helpText="Help description"
        disabled={boolean('disabled', false)}
        stacked={boolean('stacked', false)}
        kind={select(
          'Kind',
          { custom: 'custom', default: 'default' },
          'default'
        )}
      />
      <Radio
        label="Hansel"
        value="hansel"
        name="hansel"
        helpText="Help description"
        disabled={boolean('disabled', false)}
        stacked={boolean('stacked', false)}
        kind={select(
          'Kind',
          { custom: 'custom', default: 'default' },
          'default'
        )}
      />
      <Radio
        label="Mugatu"
        value="mugatu"
        name="mugatu"
        helpText="Help description"
        disabled={boolean('disabled', false)}
        stacked={boolean('stacked', false)}
        kind={select(
          'Kind',
          { custom: 'custom', default: 'default' },
          'default'
        )}
      />
    </ChoiceGroup>
  </Story>
</Canvas>
