import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { boolean, number, text } from '@storybook/addon-knobs';
import Grid from '../Grid';

export const entries = [
    { label: 'one', color: '#EAEAEA' },
    { label: 'two', color: '#CACACA' },
    { label: 'three', color: '#F4F4F4' },
    { label: 'four', color: '#009DDB' },
    { label: 'five', color: '#707070' },
    { label: 'six', color: '#F4F4F4' },
    { label: 'seven', color: '#EAEAEA' }
];

export const getEntry = entry => (
    <div
        key={entry.label}
        style={{ backgroundColor: entry.color, minHeight: '150px', padding: '7px' }}
    >
        {entry.label}
    </div>
);

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

# Grid
<br />

## `Grids` are used to build layouts.
<br />

### Generic columns
<Canvas>
    <Story name="Generic columns">
        <Grid
            maxCol={number('Max number of columns', 3)}
            stretch={boolean('Items should stretch', false)}
        >
            {entries.map(getEntry)}
        </Grid>
    </Story>
</Canvas>

### With item min width
<Canvas>
    <Story name="With item min width">
        <Grid
            maxCol={number('Max number of columns', 4)}
            minWidth={text('minWidth', '302px')}
            stretch={boolean('Items should stretch', false)}
        >
            {entries.map(getEntry)}
        </Grid>
    </Story>
</Canvas>

## Usage Example

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

<Grid maxCol={3} stretch={false}>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</Grid>
```
## Props

<ArgsTable of={Grid} />
