# Stepper

To implement Stepper component into your project you'll need to add the import:

```jsx
import Stepper from "@kiwicom/orbit-components/lib/Stepper";
```

After adding import into your project you can use it simply like:

```jsx
<Stepper />
```

## Props

Table below contains all types of the props available in Stepper component.

| Name           | Type                        | Default | Description                                                                   |
| :------------- | :-------------------------- | :------ | :---------------------------------------------------------------------------- |
| dataTest       | `string`                    |         | Optional prop for testing purposes.                                           |
| defaultValue   | `number`                    | `0`     | Specifies the value of the Stepper. [See Functional specs](#functional-specs) |
| disabled       | `boolean`                   | `false` | If `true`, the Stepper will be disabled.                                      |
| maxValue       | `number`                    | `∞`     | Specifies the maximum value for the Stepper.                                  |
| minValue       | `number`                    | `-∞`    | Specifies the minimum value for the Stepper.                                  |
| name           | `string`                    |         | The name for the Stepper.                                                     |
| onBlur         | `event => void \| Promise`  |         | Function for handling onBlur event.                                           |
| onChange       | `number => void \| Promise` |         | Function for handling onClick event.                                          |
| onFocus        | `event => void \| Promise`  |         | Function for handling onFocus event.                                          |
| step           | `number`                    | `1`     | Specifies the value of step to increment and decrement.                       |
| titleDecrement | `string | (any => string)`  |         | Specifies `title` property on decrement `Button`.                             |
| titleIncrement | `string | (any => string)`  |         | Specifies `title` property on increment `Button`.                             |

## Functional specs

- The prop `defaultValue` sets up the default value when component mounts. If you need to get the current value of Stepper, use arrow function for it. The second parameter `name` is optional. The code may look like this:

```jsx
<Stepper onChange={(value, name) => doSomething(value, name)} />
```

# StepperStateless

InputStepper offers a stateless version for your custom solutions. To use `StepperStateless` you'll need to add the import

```jsx
import StepperStateless from "@kiwicom/orbit-components/lib/Stepper/StepperStateless";
```

## Props

Table below contains all types of the props available in `StepperStateless` component.

| Name              | Type                        | Default | Description                                                                   |
| :---------------- | :-------------------------- | :------ | :---------------------------------------------------------------------------- |
| dataTest          | `string`                    |         | Optional prop for testing purposes.                                           |
| defaultValue      | `number`                    | `0`     | Specifies the value of the Stepper. [See Functional specs](#functional-specs) |
| disabled          | `boolean`                   | `false` | If `true`, the Stepper will be disabled.                                      |
| disabledIncrement | `boolean`                   |         | If `true`, the increment `Button` will be disabled.                           |
| disabledDecrement | `boolean`                   |         | If `true`, the decrement `Button` will be disabled.                           |
| maxValue          | `number`                    | `∞`     | Specifies the maximum value for the Stepper.                                  |
| minValue          | `number`                    | `-∞`    | Specifies the minimum value for the Stepper.                                  |
| name              | `string`                    |         | The name for the Stepper.                                                     |
| onBlur            | `event => void \| Promise`  |         | Function for handling onBlur event.                                           |
| onChange          | `number => void \| Promise` |         | Function for handling onClick event.                                          |
| onDecrement       | `event => void \| Promise`  |         | Function for handling decrement event.l                                       |
| onFocus           | `event => void \| Promise`  |         | Function for handling onFocus event.                                          |
| onIncrement       | `event => void \| Promise`  |         | Function for handling increment event.                                        |
| onKeyDown         | `event => void \| Promise`  |         | Function for handling onKeyDown event present on input.                       |
| step              | `number`                    | `1`     | Specifies the value of step to increment and decrement.                       |
| titleDecrement    | `string | (any => string)`  |         | Specifies `title` property on decrement `Button`.                             |
| titleIncrement    | `string | (any => string)`  |         | Specifies `title` property on increment `Button`.                             |
| value             | `number | string`           |         | Specifies the value of the StepperStateless.                                  |

### Usage:

```jsx
<StepperStateless value={"2 adults"} />
```

## Helper functions

We provide you with helpers function for validation they can be imported like this:

```jsx
import validateIncrement from "@kiwicom/orbit-components/lib/utils/validateIncrement";
import validateDecrement from "@kiwicom/orbit-components/lib/utils/validateDecrement";
```

### ValidateIncrement

Helper function for validating increment. Can be used with Stateless Stepper to make custom validation easier.

#### Arguments

| Name     | Type     | Default | Description                                                |
| :------- | :------- | :------ | :--------------------------------------------------------- |
| value    | `number` |         | Specifies the the current value.                           |
| maxValue | `number` | `∞`     | Specifies the maximum value for the InputStepperStateless. |
| step     | `number` | `1`     | Specifies the value of step to increment and decrement.    |

#### Usage

```js
validateIncrement({ value, maxValue, step });
```

### ValidateDecrement

Helper function for validating decrement. Can be used with Stateless Stepper to make custom validation easier.

#### Arguments

| Name     | Type     | Default | Description                                                |
| :------- | :------- | :------ | :--------------------------------------------------------- |
| value    | `number` |         | Specifies the the current value.                           |
| minValue | `number` | `-∞`    | Specifies the minimum value for the InputStepperStateless. |
| step     | `number` | `1`     | Specifies the value of step to increment and decrement.    |

#### Usage

```js
validateDecrement({ value, minValue, step });
```