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

<Meta of={StackStories} />

# Stack

The `Stack` component is used for creating a stack of components, with an optional gap between each component. It is useful for creating vertical layouts of components.

## Install

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

## Usage

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

### Default

<Canvas of={StackStories.Default} />

### Nested

<Canvas of={StackStories.Nested} />

## Props

<ArgTypes of={Stack} />

## Component HTML Structure and Class names

The following HTML is rendered for a Stack:

```html
<div class="mobius mobius-stack">{children}</div>
```
