import React from 'react';
import { storiesOf } from '@storybook/react';
import './story.scss';

const titles = ['xxLarge', 'xLarge', 'large', 1, 2, 3, 4, 5, 6, 7];
const grays = ['deepGray', 'darkGray', 'gray', 'midGray', 'lightGray', 'faintGray'];
const paddedBox = {
    style: { padding: '4px 8px', margin: '4px' }
};

storiesOf('Styles/Typography', module)
    .add('Titles', () => (
        <React.Fragment>
            {titles.map(title => (
                <React.Fragment>
                    <div className={`story_title--${title}`}>{`@include title-${title}`}</div>
                    <div className="story_color--darkGray story_background--lightGray" {...paddedBox}>content</div>
                </React.Fragment>
            ))}
        </React.Fragment>
    ))
    .add('Texts', () => (
        <React.Fragment>
            {titles.map(title => (
                <React.Fragment>
                    <div className={`story_text--${title}`}>{`@include text-${title}`}</div>
                </React.Fragment>
            ))}
            <div className="story_text--lower">@include Text-LOWER</div>
            <div className="story_text--upper">@include Text-UPPER</div>
        </React.Fragment>
    ))
    .add('Paragraph', () => (
        <React.Fragment>
            <p className="story_paragraph">
                @include paragraph
                <br />
                The AppDirect ecosystem connects channels, developers, and customers through its platform to simplify
                the digital supply chain by enabling the onboarding and sale of products with third-party services,
                for any channel, on any device, with support. Powering millions of cloud subscriptions worldwide,
                AppDirect helps organizations, including Jaguar Land Rover, Comcast, ADP, and Deutsche Telekom connect
                their customers to the solutions they need to reach their full potential in the digital economy.
            </p>
            <p className="story_paragraph">
                @include paragraph
                <br />
                We build technology that helps millions of people to find, buy, and manage the software assets they
                need to run their businesses. Our ecosystem connects channels, developers, and customers through the
                AppDirect platform to simplify the digital supply chain by enabling the onboarding and sale of products
                with third-party services, for any channel, on any device.
            </p>
        </React.Fragment>
    ))
    .add('Quote', () => (
        <React.Fragment>
            <blockquote className="story_blockquote">
                @include blockquote
                <br />
                The AppDirect ecosystem connects channels, developers, and customers through its platform to simplify
                the digital supply chain by enabling the onboarding and sale of products with third-party services,
                for any channel, on any device, with support. Powering millions of cloud subscriptions worldwide,
                AppDirect helps organizations, including Jaguar Land Rover, Comcast, ADP, and Deutsche Telekom connect
                their customers to the solutions they need to reach their full potential in the digital economy.
            </blockquote>
            <blockquote className="story_blockquote">
                @include blockquote
                <br />
                We build technology that helps millions of people to find, buy, and manage the software assets they
                need to run their businesses. Our ecosystem connects channels, developers, and customers through the
                AppDirect platform to simplify the digital supply chain by enabling the onboarding and sale of products
                with third-party services, for any channel, on any device.
            </blockquote>
        </React.Fragment>
    ))
    .add('Colors', () => (
        <React.Fragment>
            {grays.map(gray => (
                <div className={`story_color--${gray}`} key={`color-${gray}`} {...paddedBox}>
                    {`@include color-${gray}`}
                </div>
            ))}
            {grays.map(gray => (
                <div className={`story_background--${gray}`} key={`background-${gray}`} {...paddedBox}>
                    {`@include background-${gray}`}
                </div>
            ))}
            <div className="story_background--white" key="background-white" {...paddedBox}>
                @include background-white
            </div>
            {grays.map(gray => (
                <div className={`story_border--${gray}`} key={`border-${gray}`} {...paddedBox}>
                    {`@include border-${gray}`}
                </div>
            ))}
        </React.Fragment>
    ));
