import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { Card, FormGroup, Input } from '../'
import Grid from './'

<Meta title="Utilities/UI Convenience/Grid" component={Grid} />

# Grid

A Grid component provide layout-based styles to help structure UI elements.

<Canvas>
  <Story name="default">
    <Grid>
      <Grid.Col size="8, 6@lg">
        <Card hover>Hello</Card>
      </Grid.Col>
      <Grid.Col size="4, 6@lg">
        <Card hover>There</Card>
      </Grid.Col>
    </Grid>
  </Story>
</Canvas>

#### Reference

- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Grid} />

## Grid.Container

<ArgsTable of={Grid.Container} />

## Grid.Col

<ArgsTable of={Grid.Col} />

## Grid.Row

<ArgsTable of={Grid.Row} />

### Stories

#### Sizes

<Canvas>
  <Story name="Sizes">
    <div>
      <Grid style={{ marginBottom: 10 }}>
        <Grid.Col size="6@md">
          <Card hover>6</Card>
        </Grid.Col>
        <Grid.Col size="6@md">
          <Card hover>6</Card>
        </Grid.Col>
      </Grid>
      <Grid style={{ marginBottom: 10 }}>
        <Grid.Col size="4@md">
          <Card hover>4</Card>
        </Grid.Col>
        <Grid.Col size="4@md">
          <Card hover>4</Card>
        </Grid.Col>
        <Grid.Col size="4@md">
          <Card hover>4</Card>
        </Grid.Col>
      </Grid>
      <Grid style={{ marginBottom: 10 }}>
        <Grid.Col size="2@md">
          <Card hover>2</Card>
        </Grid.Col>
        <Grid.Col size="2@md">
          <Card hover>2</Card>
        </Grid.Col>
        <Grid.Col size="2@md">
          <Card hover>2</Card>
        </Grid.Col>
        <Grid.Col size="2@md">
          <Card hover>2</Card>
        </Grid.Col>
        <Grid.Col size="2@md">
          <Card hover>2</Card>
        </Grid.Col>
        <Grid.Col size="2@md">
          <Card hover>2</Card>
        </Grid.Col>
      </Grid>
    </div>
  </Story>
</Canvas>

#### In a Form

<Canvas>
  <Story name="In a Form">
    <form>
      <FormGroup.Grid>
        <Grid.Col size="4">
          <Input.Static align="right">First name</Input.Static>
        </Grid.Col>
        <Grid.Col size="8">
          <Input placeholder="Ron Burgundy" />
        </Grid.Col>
      </FormGroup.Grid>
      <FormGroup.Grid>
        <Grid.Col size="4">
          <Input.Static align="right">Last name</Input.Static>
        </Grid.Col>
        <Grid.Col size="8">
          <Input placeholder="Is the best" />
        </Grid.Col>
      </FormGroup.Grid>
    </form>
  </Story>
</Canvas>
