import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { Button } from '../../components/react-demo';

<Meta
  title="Core/Layout MDX"
  component={Button}
  id="core-layout-mdx"
  decorators={[(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
/>

# Layout parameter

This tests Storybook's built-in `layout` parameter, both as its applied in the canvas, and also how it's handled by the `Canvas` block in `addon-docs`.

## Default

<Canvas withToolbar>
  <Story name="defaultValue">
    <Button>Hello world</Button>
  </Story>
</Canvas>

## Padded

<Canvas withToolbar>
  <Story name="padded" parameters={{ layout: 'padded' }}>
    <Button>Hello world</Button>
  </Story>
</Canvas>

## Fullscreen

<Canvas withToolbar>
  <Story name="fullscreen" parameters={{ layout: 'fullscreen' }}>
    <Button>Hello world</Button>
  </Story>
</Canvas>

## Centered

<Canvas withToolbar>
  <Story name="centered" parameters={{ layout: 'centered' }}>
    <Button>Hello world</Button>
  </Story>
</Canvas>
