import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import GridContainer from '../GridContainer';
import * as GridContainerStories from './GridContainer.stories';

<Meta of={GridContainerStories} />

# GridContainer

<br />

## `GridContainers` are used as layout containers.

<br />

### Default

<Canvas>
  <Story of={GridContainerStories.Default} />
</Canvas>

### Content + sidebar

<Canvas>
  <Story of={GridContainerStories.ContentSidebar} />
</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} />
