import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { Box } from '../../index';

<Meta title="Design System/Layout/Stack" />

# Stacking

A `layout stack` allows you to control how a container components lays out its children. You can do this using 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

<Canvas>
  {[
    'start',
    'center',
    'end',
    'space-between',
    'space-around',
    'space-evenly',
  ].map((v) => (
    <Box>
      <code>
        <b>stacked="row" justify={v}:</b>
      </code>
      <Story id={`design-system-layout-stack--row-justify-${v}`}></Story>
    </Box>
  ))}
</Canvas>

### Align

<Canvas>
  {['start', 'center', 'end'].map((v) => (
    <Box key={v}>
      <code>
        <b>stacked="row" align="{v}":</b>
      </code>
      <Story id={`design-system-layout-stack--row-align-${v}`}></Story>
    </Box>
  ))}
</Canvas>

### Wrap

<Canvas>
  <Story id={`design-system-layout-stack--row-wrap`}></Story>
</Canvas>

## Column Examples

### Justify

<Canvas>
  {[
    'start',
    'center',
    'end',
    'space-between',
    'space-around',
    'space-evenly',
  ].map((v) => (
    <Box>
      <code>
        <b>stacked="column" justify={v}:</b>
      </code>
      <Story id={`design-system-layout-stack--column-justify-${v}`}></Story>
    </Box>
  ))}
</Canvas>

### Align

<Canvas>
  {['start', 'center', 'end'].map((v) => (
    <Box key={v}>
      <code>
        <b>stacked="column" align={v}:</b>
      </code>
      <Story id={`design-system-layout-stack--column-align-${v}`}></Story>
    </Box>
  ))}
</Canvas>

### Wrap

<Canvas>
  <Story id={`design-system-layout-stack--column-wrap`}></Story>
</Canvas>

## Responsive Stacking

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

<Canvas>
  <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="design-system-layout-stack--responsive-row-md-and-up"></Story>
  </Box>
</Canvas>