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

import Button from 'js/patterns/atoms/buttons/button'

import Promobox from 'js/patterns/molecules/promobox/promobox'
import PromoboxWithPositioning from 'js/patterns/molecules/promobox/promobox-with-positioning'

export const image = {
    title: {
        'en_GB@EUR': 'Dress Red Valentino multi'
    },
    ratio: '16:9',
    media: {
        _type: 'Frontastic\Backstage\MediaApiBundle\Domain\MediaApi\Media',
        mediaId: 'cpu6utizt6fvvsvkcsk8',
        name: 'Test',
        tags: ['__none'],
        file: 'https://s3-eu-west-1.amazonaws.com/commercetools-maximilian/products/073328_1_large.jpg',
        size: 2130695,
        width: 2200,
        height: 1237,
        format: 'jpg',
        created: '2019-12-19T05:00:16+00:00',
        metaData: "_FILTERED_"
    },
    gravity: {
        mode: 'faces'
    }
}

<Meta title='4.Organisms|Boxes' />

# Boxes
A piece of the user interface which are small blocks to present content a little bit different to normal content. So this content should get more attention.

## Promobox
A very prominent box with background to present important content

<Preview withToolbar>
    <Story name='Promobox'>
        <Promobox />
    </Story>
</Preview>


## Promobox with Positioning

<Preview withToolbar>
    <Story name='Positioning'>
        <PromoboxWithPositioning vertical='top' horizontal='right' image={image}>
            <p className='c-topic'>Jetzt für den Sommer</p>
            <h1 className='c-title'>Viele Angebote bei Levi´s </h1>
            <Button type='primary'>
            Jetzt shoppen
            </Button>
        </PromoboxWithPositioning>
        <PromoboxWithPositioning vertical='bottom' horizontal='left' image={{}}>
            <p className='c-topic'>Jetzt für den Sommer</p>
            <h1 className='c-title'>Viele Angebote bei Levi´s </h1>
            <Button type='primary'>
          Jetzt shoppen
            </Button>
        </PromoboxWithPositioning>
        <PromoboxWithPositioning vertical='middle' horizontal='center' image={{}}>
            <p className='c-topic'>Jetzt für den Sommer</p>
            <h1 className='c-title'>Viele Angebote bei Levi´s </h1>
            <Button type='primary'>
          Jetzt shoppen
            </Button>
        </PromoboxWithPositioning>
        <PromoboxWithPositioning image={{}}>
            <p className='c-topic'>Jetzt für den Sommer</p>
            <h1 className='c-title'>Viele Angebote bei Levi´s </h1>
            <Button type='primary'>
          Jetzt shoppen
            </Button>
        </PromoboxWithPositioning>
    </Story>
</Preview>

## Boxes

### Default
<Preview withToolbar>
    <Story name='Box Default'>
        <div className='c-box t-quietlight'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>

### Small
<Preview withToolbar>
    <Story name='Box Small'>
        <div className='c-box c-box--s t-quietlight'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>

### Large
<Preview withToolbar>
    <Story name='Box Large'>
        <div className='c-box c-box--l t-quietlight'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>

### X-Large
<Preview withToolbar>
    <Story name='Box X-Large'>
        <div className='c-box c-box--xl t-quietlight'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>

## Frames

### Default
<Preview withToolbar>
    <Story name='Frame Default'>
        <div className='c-frame'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>

### Small
<Preview withToolbar>
    <Story name='Frame Small'>
        <div className='c-frame c-frame--s'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>

### Large
<Preview withToolbar>
    <Story name='Frame Large'>
        <div className='c-frame c-frame--l'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>

### X-Large
<Preview withToolbar>
    <Story name='Frame X-Large'>
        <div className='c-frame c-frame--xl'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, tenetur! Vero provident necessitatibus animi. Laborum, ullam qui placeat esse dolores eligendi ipsa nemo impedit sint ducimus omnis, ad repellat aliquam!
        </div>
    </Story>
</Preview>
