import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs/blocks";
import { NumberField } from "./NumberField";
import * as NumberFieldStories from "./NumberField.stories";

<Meta of={NumberFieldStories} />

# NumberField

The `NumberField` component is used for creating a numeric input field. It can be customised by providing any of the valid
[Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)
options as the `formatOptions` prop.

## Install

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

## Usage

```js
import { NumberField } from "@simplybusiness/mobius";
```

### Default

<Canvas of={NumberFieldStories.Default} />

### Limited range

<Canvas of={NumberFieldStories.LimitedRange} />

### Valid

<Canvas of={NumberFieldStories.Valid} />

### Invalid

<Canvas of={NumberFieldStories.Invalid} />

### Disabled

<Canvas of={NumberFieldStories.Disabled} />

### ReadOnly

<Canvas of={NumberFieldStories.ReadOnly} />

## Props

<ArgTypes of={NumberField} />

## Component HTML Structure and Class names

The following HTML is rendered for a NumberField:

```html
<div class="mobius-number-field">
  <label class="mobius-number-field__label" id=":ssr-id:" for="test">
    My Number Label
  </label>
  <div class="mobius-number-field__input-wrapper">
    <input
      class="mobius-number-field__input"
      id="test"
      type="number"
      value="10"
      min="10"
      max="100"
      step="5"
      aria-labelledby=":ssr-id:"
    />
  </div>
</div>
```

Class names are augmented with the following flags if true:

- \--is-disabled
- \--is-valid
- \--is-invalid
- \--is-required
- \--is-optional
