import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { ORIENTATION } from "../..";
import { Radio } from "./Radio";

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

<ComponentHeading
  componentName="Radio"
  description=""
  sourcePath="src/components/Radio/Radio.tsx"
/>

```jsx
import { Radio } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Radio">
    <Radio.Group>
      <Radio name="default" label="Choice One" />
      <Radio name="default" label="Choice Two" />
      <Radio name="default" label="Choice Three" />
    </Radio.Group>
  </Story>
</Preview>

## Props

<Props of={Radio} />

## Demos

### Disabled

<Preview withSource={SourceState.OPEN}>
  <Story name="Disabled">
    <Radio.Group>
      <Radio label="Unchecked" />
      <Radio label="Checked" checked />
      <Radio label="Disabled" disabled />
      <Radio label="Checked + Disabled" checked disabled />
    </Radio.Group>
  </Story>
</Preview>

### Hidden Label

<Preview withSource={SourceState.OPEN}>
  <Story name="Hidden Label">
    <Radio label="Hide me" isLabelHidden />
  </Story>
</Preview>

### Group Vertical

<Preview withSource={SourceState.OPEN}>
  <Story name="Group - Vertical">
    <Radio.Group>
      <Radio name="default" label="Choice One" />
      <Radio name="default" label="Choice Two" />
      <Radio name="default" label="Choice Three" />
    </Radio.Group>
  </Story>
</Preview>

### Group Horizontal

<Preview withSource={SourceState.OPEN}>
  <Story name="Group - Horizontal">
    <Radio.Group orientation={ORIENTATION.HORIZONTAL}>
      <Radio name="default" label="Choice One" />
      <Radio name="default" label="Choice Two" />
      <Radio name="default" label="Choice Three" />
    </Radio.Group>
  </Story>
</Preview>