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

<Meta title="Components/Grid" component={Grid} />

# Grid

The `<Grid/>` component is a direct export of [styled-components-grid](https://github.com/jameslnewell/styled-components-grid). If you are using this component within the `<ThemeProvider/>` you're grid is automatically configured with breakpoints.

## Import

```js
import { Grid } from '@firstclasspostcodes/sw14';
// or
import { Grid } from '@firstclasspostcodes/sw14/lib/components/Grid';
```

<Preview>
  <Story name="Grid">
    <Grid>
      <Grid.Unit as={Pane} background="black" spacing={{ p: 1 }} grow={true}>
      </Grid.Unit>
      <Grid.Unit as={Pane} background="brand" spacing={{ p: 1 }} shrink={{ xs: true }}>
      </Grid.Unit>
    </Grid>
  </Story>
</Preview>