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

<Meta of={BoxStories} />

# Box

`<Box>` is a basic layout component, great for wrapping other components that need space around them.

`<Box>` mostly uses `padding`, but not `margin` to ensure consistent spacing, particularly when nesting.

However, `style` prop can be used to overwrite this behaviour, if required.

When using the component as a container, props such as `minWidth`, `maxWidth`, `minHeight` and `maxHeight` can be applied to achieve the desired layout effect.

## Install

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

## Usage

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

### Default

<Canvas of={BoxStories.Default} />

### With Custom Element

<Canvas of={BoxStories.CustomElement} />

## Props

<ArgTypes of={Box} />

## Component HTML Structure and Class names

The following HTML is rendered for a Box:

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