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>

## Responsive Stacking

You can also achieve responsive layouts by specifying different stacking attributes in different breakpoints:

<Preview withToolbar>
  <Box>
    <code>
      <pre>
        <b>
          {"stacked={{ sm: 'column', md: 'row' }}\n"}
          {"align={{ sm: 'stretch', md: 'start' }}\n"}
          {"justify={{ sm: 'start', md: 'center' }}\n"}
        </b>
      </pre>
    </code>
    <Story id="system-stacking--responsive-row-md-and-up"></Story>
  </Box>
</Preview>
