import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';

import Card from '../Card';
import Row from './Row';
import Col from './Col';

<Meta title="Layout|Grid" component={Row} />

# Grid System

12 Grids System。

## How to use

- Wrap _Col_ inside _Row_
- Specify _Span_ (1 - 12)
- default gutter is 24

<Preview>
  <Story name="Row & Col">
    <Row>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={3}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 3</div></Col>
      <Col span={3}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 3</div></Col>
      <Col span={3}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 3</div></Col>
      <Col span={3}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 3</div></Col>
      <Col span={4}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 4</div></Col>
      <Col span={4}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 4</div></Col>
      <Col span={4}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 4</div></Col>
      <Col span={5}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 5</div></Col>
      <Col span={5}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 5</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={6}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 6</div></Col>
      <Col span={6}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 6</div></Col>
      <Col span={7}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 7</div></Col>
      <Col span={5}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 5</div></Col>
      <Col span={8}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 8</div></Col>
      <Col span={4}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 4</div></Col>
      <Col span={9}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 9</div></Col>
      <Col span={3}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 3</div></Col>
      <Col span={10}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 10</div></Col>
      <Col span={2}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 2</div></Col>
      <Col span={11}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 11</div></Col>
      <Col span={1}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 1</div></Col>
      <Col span={12}><div style={{ background: '#000', color: '#fff', textAlign: 'center' }}>col 12</div></Col>
    </Row>
  </Story>
</Preview>

### Flexible Col

<Preview>
  <Story name="Flexible Col">
    <Row>
      <Col span={8}>
        <Row>
          <Col span={12}>
            <Card
              title="Section 1.10.32"
              description="Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC"
            >
              "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam."
            </Card>
          </Col>
                    <Col span={12}>
            <Card
              title="Section 1.10.32"
              description="Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC"
            >
              "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam."
            </Card>
          </Col>
        </Row>
      </Col>
      <Col span={4}>
        <Row>
          <Col span={12}>
            <Card
              title="Section 1.10.32"
              description="Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC"
            >
              "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam."
            </Card>
          </Col>
          <Col span={12}>
            <Card
              title="Section 1.10.32"
              description="Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC"
            >
              "Cullam corporis suscipit laboriosam."
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  </Story>
</Preview>

#### Props

<Props of={Row} />