import { h, Fragment } from 'preact';
import { Meta, Story, Canvas} from '@storybook/addon-docs';
import { useEffect } from '@storybook/client-api';
import scrollSpy from '../../src/js/modules/scroll-spy';
import toggle from '../../src/js/modules/toggle';
import Main from '../../src/templates/components/main';
import Header from '../../src/templates/components/header';
import Footer from '../../src/templates/components/footer';
import ArticleHeader from '../../src/templates/components/article-header';
import PageGroup from '../../src/templates/components/page-group';

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

<style>
  {`
    .guide-content{
        padding-bottom: 48px;
    }
    
    .guide-content__title{
        font-size: 1.5rem;;
        line-height: 1.33333333333;
        color: #333;
        font-weight: 500;
        margin-bottom: 12px;
    }
    
    .guide-content__inner{
        padding-top: 24px;
    }

    .article-header{
        border:none;
        margin:0;
    }

    @media(min-width: 768px) {
        .guide-content__inner{
            border-top:1px solid hsl(0, 0%, 90%);   
        }
    }
}
  `}
</style>

# Guide
<p class="subtitle">An example of a guide page content type</p>

<section class="layout">

<Canvas>
        <Header>
        </Header>
        <Main>
            <div class="wrap">
                <ArticleHeader
                    dateLabel={'Last updated'}
                    date={'22 June 2021'}
                    title={'Guide example'}
                    summary={'Example guide content type with jump navigation'}
                />
            </div>
            <div class="wrap">
                <div id="contents" class="grid">
                    <PageGroup
                        type={'bullets'}
                        title={'Sections in this page'}
                        modifier={''}
                        links={[
                            {
                                title: "Section one",
                                url:'#one',
                            },
                            {
                                title: 'Section two',
                                url:'#two'
                            },
                            {
                                title: 'Section three',
                                url:'#three'
                            },
                            {
                                title: 'Section four',
                                url:'#four'
                            },
                            {
                                title: 'Section five',
                                url:'#five'
                            }
                        ]}
                    />
                    <div class="guide-content col xs-12 md-9">
                        <div class="guide-content__inner">
                            <div id="one">
                                <h2 class="guide-content__title">Section one</h2>
                                <div class="text-block rte">
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                                    <h3>Example heading</h3>
                                    <p>In hac habitasse platea dictumst. Donec et quam pretium, interdum massa in, ullamcorper velit. Pellentesque tristique lectus nisl, non hendrerit tortor semper id. Proin ex neque, imperdiet a interdum ac, blandit consectetur tellus. Cras facilisis felis sed lorem malesuada ornare. Vestibulum tempus mauris in enim auctor auctor. Integer et purus erat. Morbi quis euismod dolor, malesuada elementum felis. Proin a lacus varius, sollicitudin nibh a, fermentum nunc.</p>
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                                    <p>In hac habitasse platea dictumst. Donec et quam pretium, interdum massa in, ullamcorper velit. Pellentesque tristique lectus nisl, non hendrerit tortor semper id. Proin ex neque, imperdiet a interdum ac, blandit consectetur tellus. Cras facilisis felis sed lorem malesuada ornare. Vestibulum tempus mauris in enim auctor auctor. Integer et purus erat. Morbi quis euismod dolor, malesuada elementum felis. Proin a lacus varius, sollicitudin nibh a, fermentum nunc.</p>
                                </div>
                            </div>
                            <div id="two">
                                <h2 class="guide-content__title">Section two</h2>
                               <div class="text-block rte">
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                                </div>
                            </div>
                            <div id="three">
                                <h2 class="guide-content__title">Section three</h2>
                                <div class="text-block rte">
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                                    <ul>
                                        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                                        <li>Aliquam tincidunt mauris eu risus.</li>
                                        <li>Vestibulum auctor dapibus neque.</li>
                                    </ul>
                                    <p>In hac habitasse platea dictumst. Donec et quam pretium, interdum massa in, ullamcorper velit. Pellentesque tristique lectus nisl, non hendrerit tortor semper id. Proin ex neque, imperdiet a interdum ac, blandit consectetur tellus. Cras facilisis felis sed lorem malesuada ornare. Vestibulum tempus mauris in enim auctor auctor. Integer et purus erat. Morbi quis euismod dolor, malesuada elementum felis. Proin a lacus varius, sollicitudin nibh a, fermentum nunc.</p>
                                </div>
                            </div>
                            <div id="four">
                                <h2 class="guide-content__title">Section four</h2>
                                <div class="text-block rte">
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                                </div>
                            </div>
                            <div id="five">
                                <h2 class="guide-content__title">Section five</h2>
                               <div class="text-block rte">
                                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="back-to-contents back-to-contents--footnote" href="#contents">
                        <svg class="back-to-contents__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17" aria-hidden="true" focusable="false">
                        <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
                        </svg>
                        Contents
                    </a>
                </div>
            </div>
        </Main>
        <Footer />
</Canvas>

</section>