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

<Meta title="Atoms/GridContainer" component={GridContainer} />

# GridContainer
<br />

## `GridContainers` are used as layout containers.
<br />

### Default
<Canvas>
    <Story name="Default">
        <GridContainer>
            <section className="test" style={{ margin: '0 auto', width: 'calc(100% / 12 * 8)' }}>
                <div style={{ padding: '10px', border: '1px solid red' }}>
                    <p>Use this css rule on your wrapper to set the number of column.</p>
                    <p>This is an example for 8 columns wide</p>
                    <code>
                        width: calc(100% / 12 * 8)
                    </code>
                </div>
            </section>
        </GridContainer>
    </Story>
</Canvas>

### Content + sidebar
<Canvas>
    <Story name="Content + sidebar">
        <GridContainer>
            <div style={{ width: 'calc(100% / 12 * 8)' }}>
                <div style={{ padding: '10px', border: '1px solid red' }}>
                    <span>Content</span>
                    <code style={{ display: 'block', margin: '25px 0 10px' }}>
                        width: calc(100% / 12 * 8)
                    </code>
                </div>
            </div>
            <div style={{ width: 'calc(100% / 12 * 4)' }}>
                <div style={{ padding: '10px', border: '1px solid red' }}>
                    <span>Sidebar</span>
                    <code style={{ display: 'block', margin: '25px 0 10px' }}>
                        width: calc(100% / 12 * 4)
                    </code>
                </div>
            </div>
        </GridContainer>
    </Story>
</Canvas>

## Usage Example

```jsx
import GridContainer from '@appdirect/sfb-theme-components/src/atoms/grid-container/GridContainer';

<GridContainer>
    <section className="test" style={{ margin: '0 auto', width: `calc(100% / 12 * 8)` }}>
        <div style={{ padding: '10px', border: '1px solid red' }}>
            <p>Use this css rule on your wrapper to set the number of column.</p>
            <p>This is an example for 8 columns wide</p>
            <code>
                {`width: calc(100% / 12 * 8)`}
            </code>
        </div>
    </section>
</GridContainer>
```
## Props

<ArgsTable of={GridContainer} />
