import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Radio from 'components/Radio';
import RadioGroup from 'components/RadioGroup';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';

<Meta title="Components API/Radio" component={Radio} />

# Radio & RadioGroup

Allows the user to select one option among a group of options.

<Canvas>
  <Story name="Radio">
    <RadioGroup name="group">
      <Radio label="Casting Director" value="director" />
      <Radio label="Agent" value="agent" />
      <Radio disabled label="Actor" value="actor" />
    </RadioGroup>
  </Story>
</Canvas>

<Source code="import { Radio, RadioGroup } from 'cwb-react';" />

## Usage

Radios must always appear inside a RadioGroup. The purpose of a group is to ensure that only one radio option is selected at a time.

In an uncontrolled RadioGroup, you don't need to pass the `value` and `onChange` props.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <>
      <RadioGroup name="uncontrolled">
        <Radio label="Click here!" value="one" />
        <Radio label="Or here!" value="two" />
      </RadioGroup>
    </>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<RadioGroup name="uncontrolled">\n' +
        '  <Radio label="Click here!" value="one" />\n' +
        '  <Radio label="Or here!" value="two" />\n' +
        '</RadioGroup>'
      }
    />
  </div>
</ThemeProvider>

In a controlled RadioGroup, you need to pass the `value` and `onChange` props. Here, the `onChange` handler doesn't set the value, so clicking on the second option does not change which radio option is selected.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <>
      <RadioGroup
        name="controlled"
        value="one"
        onChange={(value) => console.log(value)}
      >
        <Radio label="Selected" value="one" />
        <Radio label="Cannot be selected" value="two" />
      </RadioGroup>
    </>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<RadioGroup\n' +
        '  name="controlled"\n' +
        '  value="one"\n' +
        '  onChange={(value) => console.log(value)}\n' +
        '>\n' +
        '  <Radio label="Selected" value="one" />\n' +
        '  <Radio label="Cannot be selected" value="two" />\n' +
        '</RadioGroup>'
      }
    />
  </div>
</ThemeProvider>

## Radio Props

<ArgsTable of={Radio} />

## RadioGroup Props

<ArgsTable of={RadioGroup} />