import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { Box } from '../..';

<Meta title="System|Stacking" />

# Stacking

Stacking allows you to control the layout of a `<Box>`'s child components. Controlled with the `stacked`, `justify`, and `align` properties.

**stacked**: Legal values:

- `row`: stack children horizontally
- `column`: stack children vertically.

**justify**: Legal values:

- `start`: anchor children to the left (`row`) or top (`column`)
- `end`: anchor children to the right (`row`) or bottom (`column`)
- `center`: center children horizontally (`row`) or vertically (`column`)
- `space-between`: anchor outside children to the edges and distribute extra space between then.

**align**: Legal values:

- `start`: anchor children to the top (`row`) or left (`column')
- `end`: anchor children to the bottom (`row`) or right (`column')
- `center`: center children vertically (`row`) or horizontally (`column`)

## Row Examples

### Justify

<Preview withToolbar>
  {['start', 'center', 'end', 'space-between'].map((v) => (
    <Box>
      <code>
        <b>stacking="row" justify={v}:</b>
      </code>
      <Story id={`system-stacking--row-justify-${v}`}></Story>
    </Box>
  ))}
</Preview>

### Align

<Preview withToolbar>
  {['start', 'center', 'end'].map((v) => (
    <Box>
      <code>
        <b>stacking="row" align="{v}":</b>
      </code>
      <Story id={`system-stacking--row-align-${v}`}></Story>
    </Box>
  ))}
</Preview>

## Column Examples

### Justify

<Preview withToolbar>
  {['start', 'center', 'end', 'space-between'].map((v) => (
    <Box>
      <code>
        <b>stacking="column" justify={v}:</b>
      </code>
      <Story id={`system-stacking--column-justify-${v}`}></Story>
    </Box>
  ))}
</Preview>

### Align

<Preview withToolbar>
  {['start', 'center', 'end'].map((v) => (
    <Box>
      <code>
        <b>stacking="column" align={v}:</b>
      </code>
      <Story id={`system-stacking--column-align-${v}`}></Story>
    </Box>
  ))}
</Preview>
