# Stack
To implement Stack component into your project you'll need to add the import:
```jsx
import Stack from "@kiwicom/orbit-components/lib/Stack";
```
After adding import into your project you can use it simply like:
```jsx
<Stack>
  <Button>My button</Button>
  <Button iconRight={<ChevronDown />} />
</Stack>
```
## Props
Table below contains all types of the props available in Stack component.

| Name          | Type                        | Default      | Description                      |
| :------------ | :-------------------------- | :----------- | :------------------------------- |
| align         | [`enum`](#enum)             | `"start"`    | The `align-items` and `align-content` of the Stack.
| basis         | `string`                    | `auto`       | Specifies the basis value of `flex-basis`.
| **children**  | `React.Node`                |              | Content of the Stack.
| dataTest      | `string`                    |              | Optional prop for testing purposes.
| desktop       | [`Object`](#media-queries)  |              | Object for setting up properties for the desktop viewport. [See Media queries](#media-queries)
| direction     | [`enum`](#enum)             | `"row"`      | The `flex-direction` of the Stack. [See Functional specs](#functional-specs)
| element       | `string`                    | `"div"`      | The string used for the root node.
| flex          | `boolean`                   | `false`      | If `true` or you specify some flex attribute, the Stack will use flex attributes.
| grow          | `boolean`                   | `false`      | If `true`, the Stack will have `flex-grow` set to `1`, otherwise it will be `0`.
| inline        | `boolean`                   | `false`      | If `true`, the Stack will have `display` set to `inline-flex`, otherwise it will be `flex`.
| justify       | [`enum`](#enum)             | `"start"`    | The `justify-content` of the Stack.
| largeDesktop  | [`Object`](#media-queries)  |              | Object for setting up properties for the largeDesktop viewport. [See Media queries](#media-queries)
| largeMobile   | [`Object`](#media-queries)  |              | Object for setting up properties for the largeMobile viewport. [See Media queries](#media-queries)
| mediumMobile  | [`Object`](#media-queries)  |              | Object for setting up properties for the mediumMobile viewport. [See Media queries](#media-queries)
| shrink        | `boolean`                   | `false`      | If `true`, the Stack will have `flex-shrink` set to `1`.
| spacing       | [`spacing`](#spacing)       | `"natural"`  | The spacing between its children.
| spaceAfter    | `enum`                      |              | Additional `padding` to bottom of the Stack. [See this doc](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken)
| tablet        | [`Object`](#media-queries)  |              | Object for setting up properties for the tablet viewport. [See Media queries](#media-queries)
| wrap          | `boolean`                   | `false`      | If `true`, the Stack will have `flex-wrap` set to `wrap`, otherwise it will be `nowrap`.

### Media Queries
When you need to specify some different behaviour of the Stack component on different viewport, you can use properties for it.
There are `mediumMobile`, `largeMobile`, `tablet`, `desktop` and `largeDesktop` available and it behaves the same as [mediaQueries](https://github.com/kiwicom/orbit-components/tree/master/src/utils/mediaQuery) functions.
All this properties - objects have the some own properties and none is required.

| Name          | Type                        | Default      | Description                      |
| :------------ | :-------------------------- | :----------- | :------------------------------- |
| align         | [`enum`](#enum)             | `"start"`    | The `align-items` and `align-content` of the Stack.
| basis         | `string`                    | `auto`       | Specifies the basis value of `flex-basis`.
| direction     | [`enum`](#enum)             | `"row"`      | The `flex-direction` of the Stack.
| grow          | `boolean`                   | `false`      | If `true`, the Stack will have `flex-grow` set to `1`, otherwise it will be `0`.
| inline        | `boolean`                   | `false`      | If `true`, the Stack will have `display` set to `inline-flex`, otherwise it will be `flex`.
| justify       | [`enum`](#enum)             | `"start"`    | The `justify-content` of the Stack.
| shrink        | `boolean`                   | `true`       | If `false`, the Stack will have `flex-shrink` set to `0`.
| spacing       | [`spacing`](#spacing)       | `"natural"`  | The spacing between its children.
| spaceAfter    | `enum`                      |              | Additional `padding` to bottom of the Stack. [See this doc](https://github.com/kiwicom/orbit-components/tree/master/src/common/getSpacingToken)
| wrap          | `boolean`                   | `false`      | If `true`, the Stack will have `flex-wrap` set to `wrap`, otherwise it will be `nowrap`.

## Functional specs
* The default behaviour for the `Stack` component is to not be a `flexbox` container. It means that by default it's nesting children natively (below each other) and it won't use any `flex` CSS properties.

* If you specify some property (except children, spaceAfter, dataTest and spacing) it will become a `flexbox` container and the `flex-direction: row` will be used.

### enum

| justify     | direction           | align       |
| :---------- | :------------------ | :---------- |
| `"start"`   | `"row"`             | `"start"`   |
| `"end"`     | `"column"`          | `"end"`     | 
| `"center"`  | `"row-reverse"`     | `"center"`  |
| `"between"` | `"column-reverse"`  | `"stretch"` |
| `"around"`  |

### spacing

| name              | size on `0 - 991px` | size on `992px - ∞` |
| :---------------- | :------------------ | :------------------ |
| `"none"`          | `null`              | `null`              |
| `"extraTight"`    | `2px`               | `2px`               |
| `"tight"`         | `4px`               | `4px`               |
| `"condensed"`     | `8px`               | `8px`               |
| `"compact"`       | `12px`              | `12px`              |
| `"natural"`       | `16px`              | `16px`              |
| `"comfy"`         | `20px`              | `24px`              |
| `"loose"`         | `28px`              | `32px`              |
| `"extraLoose"`    | `36px`              | `40px`              |