import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Container from '../Container';
import Row from '../Row';
import Col from '../Col';

<Meta
  title="Components/Grid/Demos"
  decorators={[(storyFn) => <div className="show-grid">{storyFn()}</div>]}
  parameters={{ layout: 'padded' }}
/>

## Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

<Canvas>
  <Story name="Equal-width">
    <Container>
      <Row>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  </Story>
</Canvas>

## Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

<Canvas>
  <Story name="Setting one column width">
    <Container>
      <Row>
        <Col>1 of 3</Col>
        <Col xs="6">2 of 3 (wider)</Col>
        <Col>3 of 3</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col xs="5">2 of 3 (wider)</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  </Story>
</Canvas>

## Mix and match

<Canvas>
  <Story name="Mix and match">
    <Container>
      <Row>
        <Col md="8">.ods-col-md-8</Col>
        <Col xs="6" md="4">
          .ods-col-6 .ods-col-md-4
        </Col>
      </Row>
      <Row>
        <Col xs="6" md="4">
          .ods-col-6 .ods-col-md-4
        </Col>
        <Col xs="6" md="4">
          .ods-col-6 .ods-col-md-4
        </Col>
        <Col xs="6" md="4">
          .ods-col-6 .ods-col-md-4
        </Col>
      </Row>
      <Row>
        <Col xs="6">.ods-col-6</Col>
        <Col xs="6">.ods-col-6</Col>
      </Row>
    </Container>
  </Story>
</Canvas>

## Row columns

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

<Canvas>
  <Story name="Row columns">
    <Container>
      <Row xs="1" sm="2" md="4">
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
      </Row>
    </Container>
  </Story>
</Canvas>

## Offsetting columns

<Canvas>
  <Story name="Offsetting columns">
    <Container>
      <Row>
        <Col md="4">.ods-col-md-4</Col>
        <Col md={{ span: '4', offset: '4' }}>
          .ods-col-md-4 .ods-offset-md-4
        </Col>
      </Row>
      <Row>
        <Col md={{ span: '3', offset: '3' }}>
          .ods.col-md-3 .ods.offset-md-3
        </Col>
        <Col md={{ span: '3', offset: '3' }}>
          .ods.col-md-3 .ods.offset-md-3
        </Col>
      </Row>
      <Row>
        <Col md={{ span: '6', offset: '3' }}>
          .ods-col-md-6 .ods-offset-md-3
        </Col>
      </Row>
    </Container>
  </Story>
</Canvas>

## Nesting

To nest your content with the default grid, add a new .ods-row and set of .ods-col-sm-\* columns within an existing .ods-col-sm-\* column.

Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<Canvas>
  <Story name="Nesting">
    <Container>
      <Row>
        <Col sm="9">
          Level 1: .ods-col-sm-9
          <Row>
            <Col xs="8" sm="6">
              Level 2: .ods-col-8 .ods-col-sm-6
            </Col>
            <Col xs="4" sm="6">
              Level 2: .ods-col-4 .ods-col-sm-6
            </Col>
          </Row>
        </Col>
      </Row>
    </Container>
  </Story>
</Canvas>
