import { Meta, ArgTypes, Canvas, Story } from "@storybook/addon-docs/blocks";
import { Radio } from "./Radio";
import { RadioGroup } from "./RadioGroup";
import * as RadioStories from "./Radio.stories";

<Meta of={RadioStories} />

# Radio

Radio is a component for creating radio buttons. It must be contained within a
`<RadioGroup />` component to handle the ARIA attributes correctly.

It can be used to wrap one or more other components while ensuring consistency with the current theme.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Radio, RadioGroup } from "@simplybusiness/mobius";
```

## Examples

### Default

For a radio to appear selected use `value` prop which expects a string.

For example, `<RadioGroup defaultValue="blue">`

<Canvas of={RadioStories.Default} />

### Disabled

<Canvas of={RadioStories.Disabled} />

### Disabled Individual Radios

<Canvas of={RadioStories.DisabledIndividualRadios} />

### Valid

<Canvas of={RadioStories.Valid} />

### Invalid

<Canvas of={RadioStories.Invalid} />

### Complex label

<Story of={RadioStories.ComplexLabel} />

```jsx
<RadioGroup>
  <Radio value="annual" label="Pay annually">
    <Flex
      style={{
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
      }}
    >
      <div>To pay today</div>
      <div>$1265.00</div>
    </Flex>
  </Radio>
  <Radio value="monthly" label="Pay monthly">
    <Flex
      style={{
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: "var(--size-xs)",
      }}
    >
      <div>To pay today</div>
      <div>$316.25</div>
    </Flex>
    <Flex
      style={{
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
      }}
    >
      <div>10 monthly payments of</div>
      <div>$94.88</div>
    </Flex>
    <Divider />
    <Flex
      style={{
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
      }}
    >
      <div>
        <strong>Total</strong>
      </div>
      <div>
        <strong>$1265.00</strong>
      </div>
    </Flex>
  </Radio>
</RadioGroup>
```

### Horizontal Layout

<Canvas of={RadioStories.HorizontalLayout} />

## Accessibility

When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the radio group is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.

## Events

The `onChange` prop can be used to listen to changes of the selected radio button. See the prop table for the complete list of events supported.

## Radio Props

<ArgTypes
  of={{ ...RadioGroup, ...Radio }}
  exclude={["name", "groupDisabled", "selected", "setSelected"]}
/>

## Component HTML Structure and Class names

The following HTML is rendered for a Radio Group:

```html
<div class="mobius-radio-group --is-vertical" role="radiogroup">
  <label class="mobius-label --is-vertical">Color</label>
  <div class="mobius-radio__wrapper">
    <label class="mobius-radio__label">
      <input class="mobius-radio__input" type="radio" value="red" />
      <div class="mobius-radio__content">Red</div>
    </label>
    <label class="mobius-radio__label">
      <input class="mobius-radio__input" type="radio" value="blue" checked />
      <div class="mobius-radio__content">Blue</div>
    </label>
  </div>
</div>
```

Class names are augmented with the following flags if true (affected classes shown above):

- \--is-disabled
- \--is-selected
- \--is-multiline
- \--is-required

Class names for `<RadioGroup />`:

- \--is-disabled
- \--is-valid
- \--is-invalid
- \--is-required
- \--is-optional
- \--is-horizontal OR --is-vertical
