import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components'
import { Row, Col } from 'components'

export const meta = {
  title: 'layout',
  group: 'layout',
}

## Layout

Smart and simple layout components.

<Playground
  desc="`Row` can create basic row container."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row style={{ marginBottom: '10px' }}> <ExampleBlock /> </Row>
  <Row> <ExampleBlock /> </Row>
</>
`}
/>

<Playground
  title="column"
  desc="`Col` can create columns of different widths."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row style={{ marginBottom: '15px' }}>
    <Col><ExampleBlock plain={2} /></Col>
    <Col><ExampleBlock plain={4} /></Col>
  </Row>

  <Row>
    <Col span={8}><ExampleBlock plain={2} /></Col>
    <Col><ExampleBlock plain={4} /></Col>
  </Row>
</>
`} />

<Playground
  title="gap"
  desc="`Row` provides `gap` prop to specify spacings between columns."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
  </Row>

  <Row gap={.8}>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
    <Col><ExampleBlock /></Col>
  </Row>
</>
`} />

<Playground
  title="compose"
  desc="Create compose layout by combining the basic 1/24 columns."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
    <Col span={8}><ExampleBlock /></Col>
  </Row>
  <Row gap={0.8} style={{ marginBottom: '15px' }}>
    <Col span={8}>
      <ExampleBlock />
    </Col>
    <Col span={8}>
      <ExampleBlock />
    </Col>
    <Col span={4}>
      <ExampleBlock />
    </Col>
    <Col span={4}>
      <ExampleBlock />
    </Col>
  </Row>
  <Row gap={.8}>
    <Col span={4}><ExampleBlock /></Col>
    <Col span={16}><ExampleBlock /></Col>
    <Col span={4}><ExampleBlock /></Col>
  </Row>
</>
`}
/>

<Playground
  title="alignment"
  desc="Use `justify` and `align` make to alignment of columns."
  scope={{ Row, Col, ExampleBlock }}
  code={`
<>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={16}><ExampleBlock /></Col>
  </Row>
  <Row gap={0.8} justify="center" style={{ marginBottom: '15px' }}>
    <Col span={16}>
      <ExampleBlock />
    </Col>
  </Row>
  <Row gap={0.8} justify="end" style={{ marginBottom: '15px' }}>
    <Col span={16}>
      <ExampleBlock />
    </Col>
  </Row>
  <Row gap={.8} style={{ marginBottom: '15px' }}>
    <Col span={9}><ExampleBlock style={{ height: '60px' }}/></Col>
    <Col span={5}>
      <Row align="top" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
    <Col span={5}>
      <Row align="middle" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
    <Col span={5}>
      <Row align="bottom" style={{ height: '100%' }}>
        <Col><ExampleBlock /></Col>
      </Row>
    </Col>
  </Row>
</>
`}
/>

<Attributes edit="/pages/en-us/components/layout.mdx">
<Attributes.Title>Row.Props</Attributes.Title>

| Attribute     | Description          | Type                          | Accepted values                                             | Default |
| ------------- | -------------------- | ----------------------------- | ----------------------------------------------------------- | ------- |
| **gap**       | grid spacing         | `number`                      | -                                                           | 0       |
| **justify**   | horizontal alignment | `Justify`                     | `'start', 'end', 'center', 'space-around', 'space-between'` | `start` |
| **align**     | vertical alignment   | `Align`                       | `'top', 'middle', 'bottom'`                                 | `top`   |
| **component** | component name       | `keyof JSX.IntrinsicElements` | -                                                           | `div`   |
| ...           | native props         | `HTMLAttributes`              | `'autoFocus', 'name', 'className', ...`                     | -       |

<Attributes.Title>Col.Props</Attributes.Title>

| Attribute     | Description                     | Type                          | Accepted values            | Default |
| ------------- | ------------------------------- | ----------------------------- | -------------------------- | ------- |
| **span**      | number of column the grid spans | `number`                      | 0 - 24                     | 24      |
| **offset**    | current column offset           | `number`                      | -                          | 0       |
| **component** | component name                  | `keyof JSX.IntrinsicElements` | -                          | `div`   |
| ...           | native props                    | `HTMLAttributes`              | `'name', 'className', ...` | -       |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
