import { h, Fragment } from 'preact';
import { Meta, Story, Canvas, Source, ArgsTable } from '@storybook/addon-docs';
import ArticleHeader from '../../src/templates/components/article-header';
import Textblock from '../../src/templates/components/text-block';
import ImageBlock from '../../src/templates/components/image-block';
import Block from '../../src/templates/components/block';
import Blockquote from '../../src/templates/components/blockquote';
import DownloadLink from '../../src/templates/components/download-link';
import Breakout from '../../src/templates/components/breakout';
import Table from '../../src/templates/components/table';
import Main from '../../src/templates/components/main';
import Header from '../../src/templates/components/header';
import Footer from '../../src/templates/components/footer';

<Meta title="Content types/Article" />

# Article
<p class="subtitle">An example of an article page content type</p>

<section class="layout">

<Canvas>
    <Header>
    </Header>
    <Main>
        <article class="block-list">
            <div class="wrap">
                <ArticleHeader
                    dateLabel={'Last updated'}
                    date={'11 May 2022'}
                    title={'Example article'}
                    summary={'This is an example article content type, surfacing components available within a block list editor.'}
                />
            </div>
            <Block className={''}>
                <div class="wrap">
                    <div class="col xs-12 md-9 push-3-col">
                        <Textblock
                            className={''}
                            editor={<Fragment>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                            <h2>Example heading</h2>
                            <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                            <ul>
                                <li>First item</li>
                                <li>Second item</li>
                                <li>Third item</li>
                            </ul>
                            </Fragment>}>
                        </Textblock>
                    </div>
                </div>
            </Block>
            <Block className={'block--bg block--bg-light'}>
                <div class="wrap">
                    <div class="col xs-12">
                        <ImageBlock imageAlt="Lorem ipsum" caption="Dolor sit amet" sources={[
                            {path: '/img/sample/1600x900.png', media: '(min-width: 1200px)'},
                            {path: '/img/sample/1200x675.png', media: '(min-width: 600px)'},
                            {path: '/img/sample/800x450.png', media: '(min-width: 0px)'}
                        ]}/>
                    </div>
                </div>
            </Block>
            <Block className={'block--bg block--bg-light'}>
                <div class="wrap">
                    <div class="col xs-12 md-9 push-3-col">
                        <Blockquote author="Lorem ipsum" authorTitle="Dolor sit amet">
                            Duis eu convallis erat. Integer libero eros,semper et turpis eget, ultricies varius elit. Nam lacinia porta augue eu posuere.
                        </Blockquote>
                    </div>
                </div>
            </Block>
            <Block className={''}>
                <div class="wrap">
                    <div class="col xs-12 md-9 push-3-col">
                        <Breakout text="Duis eu convallis erat. Integer libero eros, semper et turpis eget, ultricies varius elit. Nam lacinia porta augue eu posuere. Vivamus pulvinar tincidunt est, ut maximus ex tincidunt sit amet." icon="/static/img/sample/sample-icon.svg" />
                    </div>
                </div>
            </Block>
            <Block className={''}>
                <div class="wrap">
                    <div class="col xs-12 md-9 push-3-col">
                        <Breakout text="Duis eu convallis erat. Integer libero eros, semper et turpis eget, ultricies varius elit. Nam lacinia porta augue eu posuere. Vivamus pulvinar tincidunt est, ut maximus ex tincidunt sit amet." />
                    </div>
                </div>
            </Block>
            <Block className={''}>
                <div class="wrap">
                    <div class="col xs-12 md-9 push-3-col">
                        <Table
                            caption={''}
                            head={[
                                { value: 'Name' },
                                { value: 'City' },
                                { value: 'Country' }
                            ]}
                            body={[
                                {
                                    columns: [
                                        { value: 'Massimo Vignelli' },
                                        { value: 'New york' },
                                        { value: 'United States' }
                                    ]
                                },
                                {
                                    columns: [
                                        { value: 'Armin Hoffman ' },
                                        { value: 'Basel' },
                                        { value: 'Switzerland' }
                                    ]
                                },
                                {
                                    columns: [
                                        { value: 'Michael Beirut' },
                                        { value: 'New york' },
                                        { value: 'United States' }
                                    ]
                                }
                            ]}
                        />
                    </div>
                </div>
            </Block>
            <Block className={''}>
                <div class="wrap">
                    <div class="col xs-12 md-9 push-3-col">
                        <DownloadLink text="Duis eu convallis erat" href="#" format="PDF" size="256KB" />
                    </div>
                </div>
            </Block>
            <Block className={'block--bg block--bg-light'}>
                <div class="wrap">
                    <div class="col xs-12 md-9 push-3-col">
                        <Fragment>
                            <DownloadLink type="list" text="Duis eu convallis erat" href="#" format="PDF" size="256KB" />
                            <DownloadLink type="list" text="Duis eu convallis erat" href="#" format="PDF" size="256KB" />
                            <DownloadLink type="list" text="Duis eu convallis erat" href="#" format="PDF" size="256KB" />
                        </Fragment>            
                    </div>
                </div>
            </Block>
        </article>
    </Main>
    <Footer />
</Canvas>

</section>