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

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

# Stackee

The 'Stackee' mixin allow you to control the relative sizes of elements that are contained in a layout stack using the `grow`, `shrink`, and `basis` properties.

## Grow

The `grow` property applies when the parent is bigger than the size of all its children.
It specifies how much a stacked element expands relative to its siblings when there is extra space to fill.

<Canvas>
  <Box spacing="p1">
    <p><b>Row:</b></p>
    <Story id="design-system-layout-stackee--row-grow" />
  </Box>


  <Box spacing="p1">
    <p><b>Column:</b></p>
    <Story id="design-system-layout-stackee--column-grow" />
  </Box>
</Canvas>


## Basis

The `basis` property specifies a default size, in pixels, to use when children don't need to be expanded or shrunk to fit in their parent containers.

<Canvas>
  <Box spacing="p1">
    <p><b>Row:</b></p>
    <Story id="design-system-layout-stackee--row-basis" />
  </Box>


  <Box spacing="p1">
    <p><b>Column:</b></p>
    <Story id="design-system-layout-stackee--column-basis" />
  </Box>
</Canvas>


## Shrink

The `shrink` property applies when the parent is not big enough to contain the all its children at their 'normal' or 'basis' sizes, and must therefore shink them. It specifies how much a stacked element shrinks relative to its siblings when there is not enough space.

<Canvas>
  <Box spacing="p1">
    <p><b>Row:</b></p>
    <Story id="design-system-layout-stackee--row-shrink" />
  </Box>


  <Box spacing="p1">
    <p><b>Column:</b></p>
    <Story id="design-system-layout-stackee--column-shrink" />
  </Box>
</Canvas>


## Reponsive Stackees

All of the above props can also be tailored to different breakpoints, for responsive layouts:

<Canvas>
  <Box>
    <code>
      <pre>
        <b>
          {`basis={{ md: 100, lg: 200, xl: 500 }}\n`}
          {`grow={{ sm: 1, md: 0 }}`}
        </b>
      </pre>
    </code>
    <Story id="design-system-layout-stackee--responsive"></Story>
  </Box>
</Canvas>
