/**
 * @author Stéphane LaFlèche <stephane.l@vanillaforums.com>
 * @copyright 2009-2019 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

import { StoryHeading } from "@library/storybook/StoryHeading";
import { storiesOf } from "@storybook/react";
import React from "react";
import Paragraph from "@library/layout/Paragraph";
import { StoryUnorderedList } from "@library/storybook/StoryUnorderedList";
import { StoryListItem } from "@library/storybook/StoryListItem";
import { StoryLink } from "@library/storybook/StoryLink";
import { StoryContent } from "@library/storybook/StoryContent";
import { StoryParagraph } from "@library/storybook/StoryParagraph";

const story = storiesOf("Intro", module);

story.add("Quick Start", () => {
    return (
        <StoryContent>
            <StoryHeading depth={1}>Quick Start</StoryHeading>

            <StoryParagraph>
                Welcome to the Vanilla&quot;s Knowledge Base - Storybook. Our storybook was created to help you
                understand, compose and produce new design elements with the same rules and consistency. It was based in
                our Knowledge Base but the goal is to help in all our systems and products. It was designed to help you
                with new products as well.
            </StoryParagraph>
            <StoryParagraph>
                If you want to check it out the Design System:
                <StoryLink newTab={true} href="https://projects.invisionapp.com/dsm/vanilla-forums/kb-design-system">
                    Design System.
                </StoryLink>
            </StoryParagraph>
            <StoryParagraph>
                The Knowledge Base - StoryBook & the Design System provides a range of resources for designers,
                developers and who wants to know more about our product.
            </StoryParagraph>

            <StoryHeading>Philosophy</StoryHeading>
            <StoryParagraph>
                As our clients grow, it becomes increasingly difficult to update our product. With so many
                customizations, it is very difficult to know the impact of updates. In the future, we want less
                customization, but we want to allow options to our clients. We would like requests from clients to
                become options or new features that will be available to everyone. This requires us to cut down as much
                as possible on one off changes.
            </StoryParagraph>
            <StoryParagraph>
                With components in Storybook, we can run automated tests for regressions. We will be able to update more
                easily. Cut down on support.
            </StoryParagraph>

            <StoryHeading>Colors</StoryHeading>
            <StoryHeading depth={3}>Main Colors</StoryHeading>
            <StoryParagraph>
                These colors <strong>must</strong> have good contrast with themselves. These colors will set your color
                scheme.
            </StoryParagraph>
            <StoryHeading depth={4}>Foreground (fg)</StoryHeading>
            <StoryParagraph>This color is primarily used for text, icons and border colors.</StoryParagraph>
            <StoryHeading depth={4}>Background (bg)</StoryHeading>
            <StoryParagraph>This color is the main background color we&quot;ll find on the site.</StoryParagraph>
            <StoryHeading depth={4}>Primary</StoryHeading>
            <StoryParagraph>
                This is your brand colors. It&quot;s used as a call to action and for decoration.
            </StoryParagraph>
            <StoryHeading depth={4}>Secondary</StoryHeading>
            <StoryParagraph>
                By default this is a variation on your brand color. It&quot;s mainly used for hover/focus states on
                elements with the brand color. If you have a second brand color, you may set it here as well.
            </StoryParagraph>
            <StoryHeading depth={3}>Derived Colors</StoryHeading>
            <StoryParagraph>
                Almost all other colors are generated by mixing your main colors. If you are not satisfied with the
                result, you can then overwrite the generated colors. However, this system allows for generating a new
                theme quick and easy, while still giving you flexibility.
            </StoryParagraph>
            <StoryHeading depth={3}>Color variation</StoryHeading>
            <StoryParagraph>
                Colors that are calculated to be a variation of another one, may be darker <strong>OR</strong> lighter
                depending on where they lie on the lightness scale. Example. If we have a color 80% dark and we want to
                vary it by 30%, it will overflow on the scale. In that case we flip the direction and end up with a
                color 50% dark. This ensures the desired contrast.
            </StoryParagraph>
            <StoryUnorderedList>
                <>
                    <StoryListItem>
                        <StoryLink
                            newTab={true}
                            href="https://projects.invisionapp.com/dsm/vanilla-forums/kb-design-system"
                        >
                            Design System
                        </StoryLink>
                    </StoryListItem>
                    <StoryListItem>
                        <StoryLink newTab={true} href="https://staff.vanillaforums.com/kb/articles/100-styling">
                            Styling
                        </StoryLink>
                    </StoryListItem>
                    <StoryListItem>
                        <StoryLink newTab={true} href="https://staff.vanillaforums.com/kb/articles/101-theming">
                            Theming
                        </StoryLink>
                    </StoryListItem>
                </>
            </StoryUnorderedList>
        </StoryContent>
    );
});
