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

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

# Pane

The `<Pane/>` component.

## Import

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

## Spacing

The `<Pane/>` component has several ways to define flexible margins and padding through the `spacing={}` property.

You can specify combinatory paddings and margins with optional breakpoints, see the example below:

```js
const spacing = {
  // apply margin vertically (y axis)
  my: {
    // spacing 2 @ sm and 3 @ md breakpoints
    sm: 2,
    md: 3,
  },
  // apply unit 4 padding to all sides 
  p: 4,
  // override padding-bottom with unit 1 @ xs breakpoint
  pb: {
    xs: 1
  }
}
```

<Preview>
  <Story name="Pane">
    <Pane spacing={{ m: 1, p: 1 }} background={["gray", 1]}>
      Text inside the pane
    </Pane>
  </Story>
</Preview>

<Preview>
  <Story name="Constrained Pane">
    <Pane.Constrained spacing={{ m: 1, p: 1 }} background={["gray", 1]}>
      Constrained panes are used to set a max width on the contained content.
    </Pane.Constrained>
  </Story>
</Preview>