import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
import { Select } from "./Select";
import * as SelectStories from "./Select.stories";

<Meta of={SelectStories} />

# Select

Select allows to pick a single option from a list.

## Install

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

## Usage

```js
import { Select, Option } from "@simplybusiness/mobius";
```

## Examples

### Default

<Story of={SelectStories.Default} />

{/* prettier-ignore */}
```jsx
import { Select, Option } from "@simplybusiness/mobius";

<Select name="color" label="Colors" defaultValue="">
  <Option key="none" value="" isDisabled>
    Please select a color
  </Option>
  <Option key="red" value="red">
    Red
  </Option>
  <Option key="blue" value="blue">
    Blue
  </Option>
  <Option key="green" value="green">
    Green
  </Option>
</Select>
```

### Controlled Value

<Story of={SelectStories.ControlledValue} />

{/* prettier-ignore */}
```jsx
import { Select, Option } from "@simplybusiness/mobius";

<Select name="color" label="Colors" value="green">
  <Option key="none" value="" isDisabled>
    Please select a color
  </Option>
  <Option key="red" value="red">
    Red
  </Option>
  <Option key="blue" value="blue">
    Blue
  </Option>
  <Option key="green" value="green">
    Green
  </Option>
</Select>
```

### Disabled

<Story of={SelectStories.Disabled} />

{/* prettier-ignore */}
```jsx
import { Select, Option } from "@simplybusiness/mobius";

<Select name="color" label="Colors" defaultValue="green" isDisabled={true}>
  <Option key="none" value="">
    Please select a color
  </Option>
  <Option key="red" value="red">
    Red
  </Option>
  <Option key="blue" value="blue">
    Blue
  </Option>
  <Option key="green" value="green">
    Green
  </Option>
</Select>
```

### Valid

<Story of={SelectStories.Valid} />

{/* prettier-ignore */}
```jsx
import { Select, Option } from "@simplybusiness/mobius";

<Select
  name="color"
  label="Colors"
  defaultValue="green"
  isInvalid={false}
>
  <Option key="none" value="" isDisabled>
    Please select a color
  </Option>
  <Option key="red" value="red">
    Red
  </Option>
  <Option key="blue" value="blue">
    Blue
  </Option>
  <Option key="green" value="green">
    Green
  </Option>
</Select>
```

### Invalid

<Story of={SelectStories.Invalid} />

{/* prettier-ignore */}
```jsx
import { Select, Option } from "@simplybusiness/mobius";

<Select
  name="color"
  label="Colors"
  defaultValue="green"
  isInvalid
  errorMessage="Unacceptable color"
>
  <Option key="none" value="" isDisabled>
    Please select a color
  </Option>
  <Option key="red" value="red">
    Red
  </Option>
  <Option key="blue" value="blue">
    Blue
  </Option>
  <Option key="green" value="green">
    Green
  </Option>
</Select>
```

## Accessibility

When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the select 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 option state of the select. See the prop table for the complete list of events supported.

## Props

<ArgTypes of={Select} />

## Component HTML Structure and Class names

The following HTML is rendered for a Select:

```html
<div>
  <label class="mobius-label" for="{select-id}" id="{label-id}"> Color </label>
  <div class="mobius-select__wrapper">
    <select class="mobius-select" id="{select-id}" aria-labelledby="{label-id}">
      <option>Red</option>
      <option>Blue</option>
    </select>
    <span class="mobius-select__icon"></span>
  </div>
</div>
```

The span allows for an image overlay to replace the standard select UX in browsers. Class names are augmented with the following flags if true:

- \--is-disabled
- \--is-selected
- \--is-valid
- \--is-invalid
- \--is-optional
