import { Meta, Story, Props } from '@storybook/addon-docs/blocks';

import imgPreventSpace from './images/prevent-space.jpg';
import imgContainer from './images/container.jpg';

<Meta title='1.Docs|07-Layout'/>

# Layout
They are very useful for structuring components in a view.

## Head Up
Use this object to put elements on different places in a container.

<Preview> 
    <Story name='Head Up'>
        <div>
            <div className='o-head-up' style={{ minHeight: '200px', border: '2px solid' }}>
                <p className='o-head-up__item o-head-up__item--bottom-left'>Bottom Left</p>
                <p className='o-head-up__item o-head-up__item--bottom-right'>Bottom Right</p>
                <p className='o-head-up__item o-head-up__item--middle'>Middle</p>
                <p className='o-head-up__item o-head-up__item--top-left'>Top Left</p>
                <p className='o-head-up__item o-head-up__item--top-right'>Top Right</p>
            </div>
        </div>
    </Story>
</Preview>

    <div>
        <div className='o-head-up' style={{ minHeight: '200px', border: '2px solid' }}>
            <p className='o-head-up__item o-head-up__item--bottom-left'>Bottom Left</p>
            <p className='o-head-up__item o-head-up__item--bottom-right'>Bottom Right</p>
            <p className='o-head-up__item o-head-up__item--middle'>Middle</p>
            <p className='o-head-up__item o-head-up__item--top-left'>Top Left</p>
            <p className='o-head-up__item o-head-up__item--top-right'>Top Right</p>
        </div>
    </div>

## Container
A simple container center your content horizontally

| Class         | Default width | Description    
| ------------- |:-------------:
| `.o-container` | 1000px | The default center container for putting elements in
| `.o-container-medium` | 640px | The medium center container for putting elements in
| `.o-container-small` | 480px | The small center container for putting elements in

### Default Container
<Preview> 
    <Story name='Container'>
        <div className='o-container' style={{ minHeight: '200px', background: '#EBCA9E', textAlign: 'center'}}>Container</div>
    </Story>
</Preview>

```html
<div className='o-container'>Container</div>
```

### Medium Container
<Preview> 
    <Story name='Container Medium'>
        <div className='o-container-medium' style={{ minHeight: '200px', background: '#EBCA9E', textAlign: 'center'}}>Container</div>
    </Story>
</Preview>

```html
<div className='o-container-medium'>Container</div>
```

### Small Container
<Preview> 
    <Story name='Container Small'>
        <div className='o-container-small' style={{ minHeight: '200px', background: '#EBCA9E', textAlign: 'center'}}>Container</div>
    </Story>
</Preview>

```html
<div className='o-container-small'>Container</div>
```

## List Inline
Show items in a line
<Preview> 
    <Story name='List Inline'>
        <div>
            <ul className='o-list-inline'>
                <li className='o-list-inline__item'>Item</li>
                <li className='o-list-inline__item'>Item</li>
                <li className='o-list-inline__item'>Item</li>
            </ul>
        </div>
    </Story>
</Preview>

```html
<ul className='o-list-inline'>
    <li className='o-list-inline__item'>Item</li>
    <li className='o-list-inline__item'>Item</li>
    <li className='o-list-inline__item'>Item</li>
</ul>
```

## List Bare
Show items among themselves

<Preview> 
    <Story name='List Bare'>
        <div>
            <ul className='o-list-bare'>
                <li className='o-list-bare__item'>Item</li>
                <li className='o-list-bare__item'>Item</li>
                <li className='o-list-bare__item'>Item</li>
            </ul>
        </div>
    </Story>
</Preview>

```html
<ul className='o-list-bare'>
    <li className='o-list-bare__item'>Item</li>
    <li className='o-list-bare__item'>Item</li>
    <li className='o-list-bare__item'>Item</li>
</ul>
```

## List Bare Divided
Show items among themselves with divider

<Preview> 
    <Story name='List Bare Divided'>
        <ul className='o-list-bare'>
            <li className='o-list-bare__item'>Item</li>
            <li className='o-list-bare__item' aria-hidden='true'><span className='c-divider' /></li>
            <li className='o-list-bare__item'>Item</li>
            <li className='o-list-bare__item' aria-hidden='true'><span className='c-divider' /></li>
            <li className='o-list-bare__item'>Item</li>
            <li className='o-list-bare__item' aria-hidden='true'><span className='c-divider' /></li>
        </ul>
    </Story>
</Preview>

```html
<ul className='o-list-bare'>
    <li className='o-list-bare__item'>Item</li>
    <li className='o-list-bare__item' aria-hidden='true'><span className='c-divider' /></li>
    <li className='o-list-bare__item'>Item</li>
    <li className='o-list-bare__item' aria-hidden='true'><span className='c-divider' /></li>
    <li className='o-list-bare__item'>Item</li>
    <li className='o-list-bare__item' aria-hidden='true'><span className='c-divider' /></li>
</ul>
```

## Distances
There are a lot of classes to handle distances between items. **Distances used margin-top.**

| Class         | Default value | Description    
| ------------- |:-------------:
| `.o-distance` | 32px | Standard space. Mostly use between rows or sections.
| `.o-distance-xs` | 4px | Create the smallest space.
| `.o-distance-s` | 8px | Create a small space.
| `.o-distance-m` | 16px | Create a medium space
| `.o-distance-l` | 32px | Create a large space
| `.o-distance-xl` | 64px | Create a x-large space

## Flexbox
There are a lot of classes to handle distances between items. **Distances used margin-top.**

| Class         | Description    
| ------------- |:-------------:
| `.o-flex` | Put items in a row
| `.o-flex--end` | Align items and justify content to the end
| `.o-flex--center` | Align items to center
| `.o-flex--justify-center` | Justify content to center
| `.o-flex--justified` | Justify items to space-between
| `.o-flex--large-justified` | Justify item to space-between from large breakpoint to up

## Prevent space
Prevent elements to move on the left or right edge of the browser window.

| Class         | Default value | Description    
| ------------- |:-------------:
| `.o-prevent-space` | 16px | Prevent items to be on the left and right edge of the browser.

<Preview> 
    <Story name='Prevent Space'>
      <div style={{display: 'flex'}}>
          <div style={{width: '16px', height: '40px', background: '#EBCA9E'}}></div>
          <div style={{width: '100%', height: '40px', background: '#f2f2f2'}}></div>
          <div style={{width: '16px', height: '40px', background: '#EBCA9E'}}></div>
      </div>
    </Story>
</Preview>

```html
<div className='o-prevent-space'></div>
```