@blockhub/styleguide/stories/index.stories.js

BlockHub Style Guide

/* eslint-disable react/react-in-jsx-scope, react/no-this-in-sfc */

import Vue from 'vue'
import {storiesOf, addDecorator} from '@storybook/vue'
import {action} from '@storybook/addon-actions'
import {linkTo} from '@storybook/addon-links'
import StoryRouter from 'storybook-vue-router'
import {withViewport} from '@storybook/addon-viewport'
import {withKnobs, text, boolean, number, object} from '@storybook/addon-knobs/vue'

import '@/css/styles.scss'
import filters from '@/plugins/filters'
import directives from '@/plugins/directives'
import '@/plugins/components'

filters({})
directives({})

import * as data from './components-data'


const StoreDummy = {
    install(Vue, options) {
        Vue.prototype.$store = {
            state: {
                profiles: {
                    keyedById: {}
                },
                application: {
                    desktopMode: true,
                    settings: {
                        client: {
                            autoplay: false
                        }
                    },
                    video: {
                        src: null
                    }
                }
            },
            dispatch: () => {},
            commit: () => {}
        }
    }
}

Vue.use(StoreDummy)


Vue.component('nuxt-link', {
    props: ['to'],
    methods: {
        log() {
            action('link target')(this.to)
        },
    },
    template: '<div @click="log()"><slot /></div>',
})


Vue.component('router-link', {
    props: ['to'],
    methods: {
        log() {
            action('link target')(this.to)
        },
    },
    template: '<div @click="log()"><slot /></div>',
})

Vue.component('nuxt-link', {
    props: ['to'],
    methods: {
        log() {
            action('link target')(this.to)
        },
    },
    template: '<div @click="log()"><slot /></div>',
})

// addDecorator(withViewport('desktop'))
//addDecorator(StoryRouter())


import PromotionItem from '@/components/promotion-box/item'
import PromotionList from '@/components/promotion-box/list'

storiesOf('Promotion Box', module)
    .add('item', () => ({
        components: {
            'c-promotion-item': PromotionItem
        },
        data() {
            return {
                title: 'test',
                price: '10.00'
            }
        },
        template: '<div class="row"><div class="col-6 p-5"><c-promotion-item :title="title" :price="price"></c-promotion-item></div></div>'
    }))
    .add('list', () => ({
        components: {
            'c-promotion-list': PromotionList,
            'c-promotion-item': PromotionItem
        },
        data: () => data.PromotionBoxData ,
        template: `<div class="row"><div class="col-6 p-5">
                        <c-promotion-list title="Packages" >
                            <template v-for="(promotion, index) in promotions">
                                <c-promotion-item :title="promotion.title" :price="promotion.price" :basic="promotion.basic" :border="true"></c-promotion-item>
                            </template>
                        </c-promotion-list>
                    </div></div>`
    }))

import AssetsImporter from '@/components/asset-importer'

storiesOf('Assets Importer', module)
    .add('default', () => ({
        components: {
            'c-assets-importer': AssetsImporter
        },
        data() {
            return {
                show_skipped: true
            }
        },
        template: '<div class="row"><div class="col-8"><c-assets-importer show_skipped="show_skipped" /></div></div>'
    }))

import Notification from '@/components/notification'
import NotificationInline from '@/components/notification/inline'

storiesOf('Notifications', module)
    .add('default', () => ({
        components: {
            'c-notification': Notification
        },
		    data: () => data.NotifsData ,
        template: `
            <div class="row m-0">
                <div class="col-4 pt-3 text-white d-flex flex-column">
                    Single:
                    <c-notification :notification="notif"/>
                </div>
                <div class="col-4 pt-3 text-white d-flex flex-column">
                    Multiple:
                    <c-notification v-for="(notif, index) in notifs" :key="index" :notification="notif"/>
                </div>
            </div>
        `
    }))
    .add('inline', () => ({
        components: {
            'c-notification-inline': NotificationInline
        },
		    data: () => data.NotifsData ,
        template: `
            <div class="row m-0">
                <div class="col-4 pt-3 text-white">
                    Single:
                    <c-notification-inline :notification="notif">
                        {{ notif.text }}
                    </c-notification-inline>
                    <hr />
                    Single medium:
                    <c-notification-inline :notification="notif" size="md">
                        {{ notif.text }}
                    </c-notification-inline>
                    <hr />
                    Multiple:
                    <c-notification-inline v-for="(notif, index) in notifs" :key="index" class="my-3" :notification="notif" :type="notif.type">
                        {{ notif.text }}
                    </c-notification-inline>
                </div>
            </div>
        `
    }))

import Searcher from '@/components/searcher';

storiesOf('Searcher', module)
    .add('default', () => ({
        components: {
            'c-searcher': Searcher
        },
		    data: () => data.SearchData ,
        methods: {
            search() {
                this.results = this.phrase.length ? this.getByVal(this.phrase) : []
            },
            getByVal(val){
                let arr = [];
                this.items.forEach( (el) => {
                    console.log('first', el)
                    if( el.name.includes(val) ){
                        arr.push(el);
                        console.log('second', arr)
                    }
                });
                return arr;
            }
        },
        computed: {
        },
        watch: {
            results() {
                console.log(this.results)
            }
        },
        template: `<div class="p-5 col-4">
                <c-searcher  @input="search" :results="results" v-model="phrase">
                    <template slot-scope="props">
                        <span class="text-white">
                            {{ props.result.name }}
                        </span>
                    </template>
                </c-searcher>
            </div>`
    }))

import RatingStars from '@/components/rating-stars';
import RatingBlock from '@/components/rating-block';

storiesOf('Rating', module)
    .add('Stars', () => ({
        components: {
            'c-rating-stars': RatingStars
        },
        template: '<div class="text-white p-5"><c-rating-stars :number="3.5"/></div>'
    }))
    .add('Rating Block', () => ({
        components: {
            'c-rating-block': RatingBlock
        },
		    data: () => data.RatingData ,
        template: `
        <div class="row p-5">
            <div class="col-8">
                <c-rating-block :items="items" fullReviewsPath="/" rateGamePath="/" />
            </div>
        </div>
        `
    }))

import Author from '@/components/author';

storiesOf('Author', module)
    .add('Author', () => ({
        components: {Author},
        data() {
            return {
                    name: 'SatoSan',
                    img: 'https://via.placeholder.com/150'
            }
        },
        template: `<div class="text-white p-5"><author :name="name" :img="img"/></div>`
    }))

import Tags from '@/components/tags';

storiesOf('Tags', module)
    .add('Tags', () => ({
        components: {Tags},
        template: `<div class="text-white p-5"><tags :tags="['RPG', 'Open-World']"/></div>`
    }))

import LoadingLine from '@/components/loading-bar';
import LoadingCircle from '@/components/loading-bar/circle';

storiesOf('LoadingBar', module)
    .add('line', () => ({
        components: {
            'c-loading-bar': LoadingLine
        },
        template: `<c-loading-bar/>`
    }))
    .add('circle', () => ({
        components: {
            'c-loading-bar-circle': LoadingCircle
        },
        template: `<div class="position-relative" style="width: 300px; height: 300px"><c-loading-bar-circle /></div>`
    }))


import NavigationAccount from '@/components/navigation/account';
import NavigationAsset from '@/components/navigation/asset';
import NavigationFunding from '@/components/navigation/funding';
import NavigationHelp from '@/components/navigation/help';
import NavigationProduct from '@/components/navigation/product';
import NavigationProject from '@/components/navigation/project';
import NavigationSettings from '@/components/navigation/settings';
import NavigationWallet from '@/components/navigation/wallet';

storiesOf('Navigation', module)
    .add('account', () => ({
        components: {NavigationAccount}, template: `<div class="col-2 py-3"><NavigationAccount /></div>`
    }))
    .add('asset', () => ({
        components: {NavigationAsset}, template: `<div class="col-2 py-3"><NavigationAsset /></div>`
    }))
    .add('funding', () => ({
        components: {NavigationFunding}, template: `<div class="col-2 py-3"><NavigationFunding /></div>`
    }))
    .add('help', () => ({
        components: {NavigationHelp}, template: `<div class="col-2 py-3"><NavigationHelp /></div>`
    }))
    .add('product', () => ({
        components: {NavigationProduct}, template: `<div class="col-2 py-3"><NavigationProduct /></div>`
    }))
    .add('project', () => ({
        components: {NavigationProject}, template: `<div class="col-2 py-3"><NavigationProject /></div>`
    }))
    .add('settings', () => ({
        components: {NavigationSettings}, template: `<div class="col-2 py-3"><NavigationSettings /></div>`
    }))
    .add('wallet', () => ({
        components: {NavigationWallet}, template: `<div class="col-2 py-3"><NavigationWallet /></div>`
    }))


import Card from '@/components/project/card';
import Badges from '@/components/project/badges';
import Milestone from '@/components/project/milestone';
import UpdatesCount from '@/components/project/updates-count';

storiesOf('Projects', module)
    .add('card', () => ({
        components: {
            'c-project-card': Card
        },
		    data: () => data.ProjectsData,
        template: `
                <div class="row">
                    <div class="col-4" v-for="(project, index) in projects" :key="index">
                        <c-project-card
                            :image="project.img"
                            :description="project.description"
                            :funds="project.funds"
                            :parentImage="project.game.img"
                            :parentName="project.game.title"
                            :parentDeveloper="project.game.developer"
                            :id="project.id"
                            customClass="project"
                        />
                    </div>
                </div>
        `
    }))
    .add('badges', () => ({
        components: {
            'c-badges': Badges
        },
        template: `<c-badges :icons="['trophy','gem']" />`
    }))
    .add('milestone', () => ({
        components: {
            'c-milestone': Milestone
        },
		    data: () => data.MilestoneData,
        template: `<div class="row">
                <c-milestone
                                    v-for="(milestone, index) in milestones"
                                    :key="index"
                                    :milestone="milestone"
                                />
            </div>`
    }))
    .add('updates-count', () => ({
        components: {
            'c-updates-count': UpdatesCount
        },
        template: `<div class="p-5">
                    <c-updates-count>
                        5
                    </c-updates-count>
                </div>`
    }))


import Tabs from '@/components/tab/tabs.vue'
import Tab from '@/components/tab/tab.vue'

storiesOf('Tabs', module)
    .add('default', () => ({
        components: {
            'c-tabs': Tabs,
            'c-tab': Tab
        },
        template: `
            <div class="padding-50">
                <c-tabs style="color: #fff;">
                    <c-tab :tab_id="0">
                        First tab
                    </c-tab>
                    <c-tab :tab_id="1">
                        Wwww
                    </c-tab>
                    <c-tab :tab_id="2">
                        12345
                    </c-tab>
                </c-tabs>
            </div>`
    }))
    .add('Tabs Names', () => ({
        components: {
            'c-tabs': Tabs,
            'c-tab': Tab
        },
        template: `
            <div class="padding-50">
                <c-tabs
                    style="color: #fff;"
                    :tab_names="['Custom tab One', 'Second', 'Im third tab']"
                >
                    <c-tab :tab_id="0">
                        First tab
                    </c-tab>
                    <c-tab :tab_id="1">
                        Wwww
                    </c-tab>
                    <c-tab :tab_id="2">
                        12345
                    </c-tab>
                </c-tabs>
            </div>`
    }))
    .add('Custom Navigation', () => ({
        components: {
            'c-tabs': Tabs,
            'c-tab': Tab
        },
        data() {
            return {
                activeTab: 1
            }
        },
        template: `
            <div class="padding-50">
                <c-tabs
                    style="color: #fff;"
                    :activeTabProp="activeTab"
                >
                    <template slot="nav">
                        <button @click="activeTab = 1">Tab 1</button>
                        <button @click="activeTab = 2">Tab 2</button>
                        <button @click="activeTab = 3">Tab 3</button>
                        <button @click="activeTab = 4">Tab 4</button>
                    </template>
                    <c-tab :tab_id="1">
                        First tab
                    </c-tab>
                    <c-tab :tab_id="2">
                        Wwww
                    </c-tab>
                    <c-tab :tab_id="3">
                        12345
                    </c-tab>
                    <c-tab :tab_id="4">
                        Fourth tab
                    </c-tab>
                </c-tabs>
            </div>`
    }))
    .add('Locked Tab', () => ({
        components: {
            'c-tabs': Tabs,
            'c-tab': Tab
        },
        data() {
            return {
                locked_step: 1,
                lockedTab: 1
            }
        },
        methods: {
            changeLockedTab() {
                this.lockedTab = Math.floor(Math.random() * 3);
            }
        },
        template: `
            <div class="padding-50">
                <c-tabs
                    style="color: #fff;"
                    :lockedTab="lockedTab"
                >
                    <c-tab :tab_id="0">
                        First tab
                    </c-tab>
                    <c-tab :tab_id="1">
                        Second tab
                    </c-tab>
                    <c-tab :tab_id="2">
                        Third tab
                    </c-tab>
                    <c-tab :tab_id="3">
                        Fourth tab
                    </c-tab>
                </c-tabs>
                <button
                    @click="changeLockedTab"
                    class="margin-top-50"
                >
                    Change locked tab
                </button>
            </div>`
    }))
    .add('Locked Step', () => ({
        components: {
            'c-tabs': Tabs,
            'c-tab': Tab
        },
        data() {
            return {
                locked_step: 1
            }
        },
        template: `
            <div class="padding-50">
                <c-tabs
                    style="color: #fff;"
                    :locked_step="locked_step"
                >
                    <c-tab :tab_id="0">
                        First tab
                    </c-tab>
                    <c-tab :tab_id="1">
                        Second tab
                    </c-tab>
                    <c-tab :tab_id="2">
                        Third tab
                    </c-tab>
                    <c-tab :tab_id="3">
                        Fourth tab
                    </c-tab>
                </c-tabs>
                <button
                    @click="locked_step++"
                    class="margin-top-50"
                >
                    Unlock next step
                </button>
            </div>`
    }))

import SystemRequirements from '@/components/product-overview/system-requirements';

import MilestonesLine from '@/components/milestones-line'

storiesOf('Milestones Line', module)
    .addDecorator(withKnobs)
    .add('default', () => ({
        components: {
            'c-milestones-line': MilestonesLine
        },
        data: () => object('Data', data.MilestonesLine),
        template: `<div class="row m-0">
                <div class="col-8 p-4">
                    <c-milestones-line :milestones="milestones" />
                </div>
            </div>`
    }))


import SidebarMenu from '@/components/sidebar-menu'
import SidebarMenuLink from '@/components/sidebar-menu/menu-item'

storiesOf('Sidebar Menu', module)
    .add('Main title', () => ({
        components: {
            'c-sidebar-menu': SidebarMenu
        },
        data() {
            return {
                links: [
                    {to: {path: '/'}, title: 'Suggesting Features'},
                    {to: {path: '/'}, title: 'Voting and Curating Updates'},
                    {to: {path: '/'}, title: 'MORE ...'}
                ],
            }
        },
        template: '<div class="row m-0">' +
            '<div class="col-3 p-4">' +
            '<c-sidebar-menu title="Menu Big Title" icon="fab fa-angellist" :links="links" />' +
            '</div>' +
            '</div>'
    }))
    .add('Sub title', () => ({
        components: {
            'c-sidebar-menu': SidebarMenu
        },
        data() {
            return {
                links: [
                    {to: {path: '/'}, title: 'Suggesting Features'},
                    {to: {path: '/'}, title: 'Voting and Curating Updates'},
                    {to: {path: '/'}, title: 'MORE ...'}
                ],
            }
        },
        template: `<div class="row m-0">
                <div class="col-3 p-4">
                    <c-sidebar-menu subTitle="This sub title" subIcon="fas fa-info-circle" :links="links" />
                </div>
            </div>`
    }))
    .add('Single element', () => ({
        components: {
            'c-sidebar-menu-link': SidebarMenuLink
        },
        template: `<div class="row m-0">
                <div class="col-3 p-4">
                    <c-sidebar-menu-link
                                 :to="{ path: '/' }"
                                 title="Suggesting Features">
                                 Suggesting Features
                    </c-sidebar-menu-link>
                </div>
            </div>`
    }));
;

const injectButtonTemplate = code => `
    <div class="row m-0 p-3">
        <div class="col-12">
            ${code}
        </div>
    </div>
`;

import Buttons from '@/components/buttons'
import LoadMore from '@/components/buttons/load-more'
import ButtonArrows from '@/components/buttons/arrows'

storiesOf('Buttons', module)
    .add('default', () => ({
        components: {'c-button': Buttons},
        methods: {
            testFunction: function () {
                console.log('BOOOOOOOOOOOM!')
            }
        },
        template: injectButtonTemplate(`
            <c-button @click="testFunction">default</c-button>
            <c-button size="md" @click="testFunction">default</c-button>
            <c-button size="lg" @click="testFunction">default</c-button>
            <hr />
            <c-button status="info">info</c-button>
            <c-button status="info" size="md">info</c-button>
            <c-button status="info" size="lg">info</c-button>
            <hr />
            <c-button status="success">success</c-button>
            <c-button status="success" size="md">success</c-button>
            <c-button status="success" size="lg">success</c-button>
            <hr />
            <c-button status="warning">danger</c-button>
            <c-button status="warning" size="md">danger</c-button>
            <c-button status="warning" size="lg">danger</c-button>
            <hr />
            <c-button status="danger">danger</c-button>
            <c-button status="danger" size="md">danger</c-button>
            <c-button status="danger" size="lg">danger</c-button>
            <hr />
            <c-button status="share">share</c-button>
            <c-button status="share" size="md">share</c-button>
            <c-button status="share" size="lg">share</c-button>
            <hr />
            <c-button status="support">support</c-button>
            <c-button status="support" size="md">support</c-button>
            <c-button status="support" size="lg">support</c-button>
        `)
    }))
    .add('second type', () => ({
        components: {'c-button': Buttons},
        methods: {
            testFunction: function () {
                console.log('BOOOOOOOOOOOM!')
            }
        },
        template: injectButtonTemplate(`
            <c-button status="second-info">info</c-button>
            <c-button status="second-info" size="md">info</c-button>
            <c-button status="second-info" size="lg">info</c-button>
            <hr />
            <c-button status="second-success">success</c-button>
            <c-button status="second-success" size="md">success</c-button>
            <c-button status="second-success" size="lg">success</c-button>
            <hr />
            <c-button status="second-warning">danger</c-button>
            <c-button status="second-warning" size="md">danger</c-button>
            <c-button status="second-warning" size="lg">danger</c-button>
            <hr />
            <c-button status="second-danger">danger</c-button>
            <c-button status="second-danger" size="md">danger</c-button>
            <c-button status="second-danger" size="lg">danger</c-button>
        `)
    }))
    .add('outline', () => ({
        components: {'c-button': Buttons},
        methods: {
            testFunction: function () {
                console.log('BOOOOOOOOOOOM!')
            }
        },
        template: injectButtonTemplate(`
            <c-button status="outline-white">white</c-button>
            <c-button status="outline-white" size="md">white</c-button>
            <c-button status="outline-white" size="lg">white</c-button>
            <hr />
            <c-button status="outline-info">info</c-button>
            <c-button status="outline-info" size="md">info</c-button>
            <c-button status="outline-info" size="lg">info</c-button>
            <hr />
            <c-button status="outline-success">success</c-button>
            <c-button status="outline-success" size="md">success</c-button>
            <c-button status="outline-success" size="lg">success</c-button>
            <hr />
            <c-button status="outline-warning">danger</c-button>
            <c-button status="outline-warning" size="md">danger</c-button>
            <c-button status="outline-warning" size="lg">danger</c-button>
            <hr />
            <c-button status="outline-danger">danger</c-button>
            <c-button status="outline-danger" size="md">danger</c-button>
            <c-button status="outline-danger" size="lg">danger</c-button>
            <hr />
            <c-button status="outline-share">share</c-button>
            <c-button status="outline-share" size="md">share</c-button>
            <c-button status="outline-share" size="lg">share</c-button>
            <hr />
            <c-button status="outline-support">support</c-button>
            <c-button status="outline-support" size="md">support</c-button>
            <c-button status="outline-support" size="lg">support</c-button>
        `)
    }))
    .add('gradient', () => ({
        components: {'c-button': Buttons},
        methods: {
            testFunction: function () {
                console.log('BOOOOOOOOOOOM!')
            }
        },
        template: injectButtonTemplate(`
            <c-button status="gradient-info">info</c-button>
            <c-button status="gradient-info" size="md">info</c-button>
            <c-button status="gradient-info" size="lg">info</c-button>
            <hr />
            <c-button status="gradient-success">success</c-button>
            <c-button status="gradient-success" size="md">success</c-button>
            <c-button status="gradient-success" size="lg">success</c-button>
            <hr />
            <c-button status="gradient-warning">danger</c-button>
            <c-button status="gradient-warning" size="md">danger</c-button>
            <c-button status="gradient-warning" size="lg">danger</c-button>
            <hr />
            <c-button status="gradient-danger">danger</c-button>
            <c-button status="gradient-danger" size="md">danger</c-button>
            <c-button status="gradient-danger" size="lg">danger</c-button>
        `)
    }))
    .add('[options] - swap direction', () => ({
        components: {'c-button': Buttons},
        template: injectButtonTemplate(`
            <c-button status="info" swapDirection>direction swapped</c-button>
            <c-button status="info" size="md" swapDirection>direction swapped</c-button>
            <c-button status="info" size="lg" swapDirection>direction swapped</c-button>
        `)
    }))
    .add('[options] - swap order', () => ({
        components: {'c-button': Buttons},
        template: injectButtonTemplate(`
            <c-button status="success" swapOrder>success</c-button>
        `)
    }))
    .add('[options] - swap order & direction', () => ({
        components: {'c-button': Buttons},
        template: injectButtonTemplate(`
            <c-button status="info" size="lg" swapDirection swapOrder>order & direction swapped</c-button>
        `)
    }))
    .add('[options] - hide icon', () => ({
        components: {'c-button': Buttons},
        template: injectButtonTemplate(`
            <c-button status="success" iconHide>success</c-button>
        `)
    }))
    .add('[options] - emoji', () => ({
        components: {'c-button': Buttons},
        template: injectButtonTemplate(`
            <c-button status="success">Message 👺👻👽</c-button>
        `)
    }))
    .add('[options] - custom icon', () => ({
        components: {'c-button': Buttons},
        template: injectButtonTemplate(`
            <c-button status="success" icon="anchor">success!</c-button>
        `)
    }))
    .add('[options] - button tag', () => ({
        components: {'c-button': Buttons},
        template: injectButtonTemplate(`
            <c-button status="danger" tag="button">Im button</c-button>
        `)
    }))
    .add('read more', () => ({
        components: {
            'c-load-more': LoadMore
        },
        template: `
            <div class="p-5" style="width: 400px"><c-load-more></c-load-more></div>
        `
    }))
    .add('arrows', () => ({
        components: {
            'c-button-arrows': ButtonArrows
        },
        template: `
            <div class="padding-50">
                <c-button-arrows size="sm"/>
                <c-button-arrows/>
                <c-button-arrows size="lg"/>
                <c-button-arrows size="xl"/>
            </div>
        `
    }))
    .add('arrows - colorized', () => ({
        components: {
            'c-button-arrows': ButtonArrows
        },
        template: `
            <div class="padding-50">
                <c-button-arrows colorized/>
            </div>
        `
    }))
    .add('arrows - content', () => ({
        components: {
            'c-button-arrows': ButtonArrows
        },
        template: `
            <div class="padding-50">
                <c-button-arrows colorized>
                    +319
                </c-button-arrows>
            </div>
        `
    }))


import MoneyInfo from '@/components/money-info'

storiesOf('Money Info', module)
    .add('default', () => ({
        components: {
            'c-money-info': MoneyInfo
        },
        template: `
        <div class="row m-0 p-3">
            <c-money-info label="Spent" percent="63" amount="555.999" goal="1555.999" />
        </div>
        `
    }));

import Checkbox from '@/components/checkbox';
import CheckboxGroup from '@/components/checkbox/group.vue';

storiesOf('Checkbox', module)
    .add('Single checkbox', () => ({
        components: {
            'c-checkbox': Checkbox
        },
        data() {
            return {
                value: true
            }
        },
        template: `
        <div class="row m-0 p-3">
            <c-checkbox id="test_check" v-model="value">This is the test checkbox</c-checkbox>
        </div>
        `
    }))
    .add('Checkbox Group', () => ({
        components: {
            'c-checkbox': Checkbox,
            'c-checkbox-group': CheckboxGroup,
        },
        template: `
        <div class="row m-0 p-3">
            <c-checkbox-group title="Group Title">
            <c-checkbox id="test_check_1">This is the test checkbox</c-checkbox>
            <c-checkbox id="test_check_2">This is the test checkbox</c-checkbox>
            <c-checkbox id="test_check_3">This is the test checkbox</c-checkbox>
            <c-checkbox id="test_check_4">This is the test checkbox</c-checkbox>
            </c-checkbox-group>
        </div>
        `
    }));

import Tooltips from '@/components/tooltips';

storiesOf('Tooltips', module)
    .add('dark', () => ({
        components: {
            'c-tooltips': Tooltips
        },
        template: `
            <div class="row p-5">
                <div class="col-4 text-center">
                    <c-tooltips name="Hover Me(left Position)!" position="left" :lightStyle='false'>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </c-tooltips>
                </div>
                <div class="col-4 text-center">
                    <c-tooltips name="Hover Me(Center Position)!" position="center" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." :lightStyle='false'>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </c-tooltips>
                </div>
                <div class="col-4 text-center">
                    <c-tooltips name="Hover Me(Right Position)!" position="right" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." :lightStyle='false'>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </c-tooltips>
                </div>
            </div>
        `
    }))
    .add('light', () => ({
        components: {
            'c-tooltips': Tooltips
        },
        template: `
            <div class="row p-5">
                <div class="col-4 text-center">
                    <c-tooltips name="Hover Me(left Position)!" position="left" :lightStyle='true' >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </c-tooltips>
                </div>
                <div class="col-4 text-center">
                    <c-tooltips name="Hover Me(Center Position)!" position="center" :lightStyle='true' >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </c-tooltips>
                </div>
                <div class="col-4 text-center">
                    <c-tooltips name="Hover Me(Right Position)!" position="right" :lightStyle='true' >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </c-tooltips>
                </div>
            </div>
        `
    }))
    .add('custom content', () => ({
        components: {
            'c-tooltips': Tooltips
        },
        template: `
            <div class="row p-5">
                <div class="col-6 text-center">
                    <c-tooltips name="Click Me(Custom content)!" type="click" position="left" :lightStyle='true'>
                        <p class="p-0">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
                        <p class="p-0 m-0">Lipsum generator.</p>
                        <a href="#" class="btn btn-sm btn-danger mt-2">Some link</a>
                    <c-tooltips/>
                </div>
                <div class="col-6 text-center">
                    <c-tooltips name="Hover Me(Custom content)!" position="center" :lightStyle='true'>
                        <p class="p-0">Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</p>
                        <p class="p-0 m-0">Lipsum generator.</p>
                    <c-tooltips/>
                </div>
            </div>
        `
    }))

import TooltipUniversal from '@/components/tooltips/universal';

storiesOf('Tooltip Universal', module)
    .add('default', () => ({
        components: {'c-tooltip-universal': TooltipUniversal},
        template: `
            <div class="padding-50">
                <c-tooltip-universal
                    title="Some epic title!"
                    text="Tooltip description goes here :) 👻👽"
                    class="margin-top-50"
                >
                    This content was wrapped around 'tooltip-universal' component tags
                </c-tooltip-universal>
            </div>
        `
    }))
    .add('themes', () => ({
        components: {'c-tooltip-universal': TooltipUniversal},
        template: `
            <div class="padding-50">
                <div>
                    <c-tooltip-universal
                        title="Some epic title!"
                        text="Tooltip description goes here :) 👻👽"
                        position="bottom"
                    >
                        <h2>Light (by default)</h2>
                    </c-tooltip-universal>
                </div>
                <div>
                    <c-tooltip-universal
                        title="Some epic title!"
                        text="Tooltip description goes here :) 👻👽"
                        theme="dark"
                        position="bottom"
                    >
                        <h2>Dark</h2>
                    </c-tooltip-universal>
                </div>
            </div>
        `
    }))
    .add('positions', () => ({
        components: {'c-tooltip-universal': TooltipUniversal},
        template: `
            <div class="padding-50">
                <div>
                    <c-tooltip-universal
                        title="Some epic title!"
                        text="Tooltip description goes here :) 👻👽"
                        class="margin-top-50"
                    >
                        <h2>Top (by default)</h2>
                    </c-tooltip-universal>
                </div>
                <div>
                    <c-tooltip-universal
                        title="Some epic title!"
                        text="Tooltip description goes here :) 👻👽"
                        position="right"
                    >
                        <h2>Right</h2>
                    </c-tooltip-universal>
                </div>
                <div>
                    <c-tooltip-universal
                        title="Some epic title!"
                        text="Tooltip description goes here :) 👻👽"
                        position="bottom"
                    >
                        <h2>Bottom</h2>
                    </c-tooltip-universal>
                </div>
                <div>
                    <c-tooltip-universal
                        title="Some epic title!"
                        text="Tooltip description goes here :) 👻👽"
                        position="left"
                    >
                        <h2>Left</h2>
                    </c-tooltip-universal>
                </div>
            </div>
        `
    }))
    .add('without icon', () => ({
        components: {'c-tooltip-universal': TooltipUniversal},
        template: `
            <div class="padding-50">
                <c-tooltip-universal
                    title="Some epic title!"
                    text="Tooltip description goes here :) 👻👽"
                    position="bottom"
                    iconHide
                >
                    <h2>I have no questionmark icon</h2>
                </c-tooltip-universal>
            </div>
        `
    }))
    .add('any content', () => ({
        components: {'c-tooltip-universal': TooltipUniversal},
        template: `
            <div class="padding-50">
                <h2>Tooltip can take any content between its tags, like the image below or other components</h2>
                <c-tooltip-universal
                    title="Some epic title!"
                    text="Tooltip description goes here :) 👻👽"
                    position="bottom"
                >
                    <img
                        width="150px"
                        src="https://steamcdn-a.akamaihd.net/steam/apps/292030/ss_eda99e7f705a113d04ab2a7a36068f3e7b343d17.1920x1080.jpg?t=1529405012"
                    />
                </c-tooltip-universal>
            </div>
        `
    }))
    .add('custom tooltip', () => ({
        components: {'c-tooltip-universal': TooltipUniversal},
        template: `
            <div class="padding-50">
                <h2>You create custom tooltip with template slot</h2>
                <c-tooltip-universal position="right">
                    <img
                        width="150px"
                        src="https://steamcdn-a.akamaihd.net/steam/apps/292030/ss_eda99e7f705a113d04ab2a7a36068f3e7b343d17.1920x1080.jpg?t=1529405012"
                    />
                    <template slot="tooltip">
                        <div :style="{ backgroundColor: '#6365a0' }">
                            This is custom tooltip content
                            <img
                                width="150px"
                                src="https://steamcdn-a.akamaihd.net/steam/apps/292030/ss_107600c1337accc09104f7a8aa7f275f23cad096.600x338.jpg?t=1529405012"
                            />
                            1234
                        </div>
                    </template>
                </c-tooltip-universal>
            </div>
        `
    }))


import ActivityChart from '@/components/activity-chart'

storiesOf('Activity Chart', module)
    .add('default', () => ({
        components: {
            'c-activity-chart': ActivityChart
        },
        data: () => data.ActivityChart,
        template: `
            <div class="col-6 py-4">
                <c-activity-chart title="Activity Chart" :years="years" />
            </div>
        `
    }))
    .add('medium size', () => ({
        components: {
            'c-activity-chart': ActivityChart
        },
        data: () => data.ActivityChart,
        template: `
            <div class="col-6 py-4">
                <c-activity-chart title="Activity Chart" :years="years" size="md" />
            </div>
        `
    }))
    .add('small size', () => ({
        components: {
            'c-activity-chart': ActivityChart
        },
        data: () => data.ActivityChart,
        template: `
            <div class="col-6 py-4">
                <c-activity-chart title="Activity Chart" :years="years" size="sm" />
            </div>
        `
    }))
    .add('extra small size', () => ({
        components: {
            'c-activity-chart': ActivityChart
        },
        data: () => data.ActivityChart,
        template: `
            <div class="col-6 py-4">
                <c-activity-chart title="Activity Chart" :years="years" size="xs" />
            </div>
        `
    }))

import PopUps from '@/components/popups'
import BasicPopup from '@/components/popups/basic'
import TermsPopup from '@/components/popups/terms'

storiesOf('Popups', module)
    .add('default', () => ({
        components: {
            'c-popup': PopUps,
            'c-button': Buttons
        },
        data() {
            return {
                modalActive: false
            }
        },
        methods: {
            showModalHandler: function () {
                this.modalActive = !this.modalActive;
            },
            close() {
                console.log('PopUp was closed!!!!!!!!!');
                this.showModalHandler()
            }
        },
        template: `
            <div class="col-12 p-5 text-white">
                <h3 class="text-white">This is dafault popup</h3>
                <c-button @click="showModalHandler">Show modal</c-button>
                <c-popup :activated="modalActive" @close="close" ref="modal" title="Default" subTitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                Praesent nec urna non libero lobortis sagittis. Etiam quis pellentesque dolor.Aenean semper fermentum lorem, ac cursus metus mollis eget.
                    <template slot="footer">
                        <div class="text-right w-100">
                            <c-button status="danger">Cancel</c-button>
                            <c-button status="success">Confirm</c-button>
                        </div>
                    </template>
                </c-popup>
            </div>
        `
    }))
    .add('warning', () => ({
        components: {
            'c-popup': PopUps,
            'c-button': Buttons
        },
        data() {
            return {
                modalActive: false
            }
        },
        methods: {
            showModalHandler() {
                this.modalActive = !this.modalActive;
            },
            close() {
                console.log('PopUp was closed!!!!!!!!!');
                this.showModalHandler()
            }
        },
        template: `
            <div class="col-12 p-5 text-white">
                <h3 class="text-white">This is warning popup</h3>
                <c-button @click="showModalHandler">Show modal</c-button>
                <c-popup :activated="modalActive" @close="close" ref="modal" title="Warning" type="warning" subTitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                Praesent nec urna non libero lobortis sagittis. Etiam quis pellentesque dolor.Aenean semper fermentum lorem, ac cursus metus mollis eget.
                    <template slot="footer">
                        <div class="text-right w-100">
                            <c-button status="danger">Cancel</c-button>
                            <c-button status="success">Confirm</c-button>
                        </div>
                    </template>
                </c-popup>
            </div>
        `
    }))
    .add('danger', () => ({
        components: {
            'c-popup': PopUps,
            'c-button': Buttons
        },
        data() {
            return {
                modalActive: false
            }
        },
        methods: {
            showModalHandler: function () {
                this.modalActive = !this.modalActive;
            },
            close() {
                console.log('PopUp was closed!!!!!!!!!');
                this.showModalHandler()
            }
        },
        template: `
            <div class="col-12 p-5 text-white">
                <h3 class="text-white">This is danger popup</h3>
                <c-button @click="showModalHandler">Show modal</c-button>
                <c-popup :activated="modalActive" @close="close" ref="modal" title="Danger" type="danger" subTitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                Praesent nec urna non libero lobortis sagittis. Etiam quis pellentesque dolor.Aenean semper fermentum lorem, ac cursus metus mollis eget.
                    <template slot="footer">
                        <div class="text-right w-100">
                            <c-button status="danger">Cancel</c-button>
                            <c-button status="success">Confirm</c-button>
                        </div>
                    </template>
                </c-popup>
            </div>
        `
    }))
    .add('info', () => ({
        components: {
            'c-popup': PopUps,
            'c-button': Buttons
        },
        data() {
            return {
                modalActive: false
            }
        },
        methods: {
            showModalHandler: function () {
                this.modalActive = !this.modalActive;
            },
            close() {
                console.log('PopUp was closed!!!!!!!!!');
                this.showModalHandler()
            }
        },
        template: `
            <div class="col-12 p-5 text-white">
                <h3 class="text-white">This is info popup</h3>
                <c-button @click="showModalHandler">Show modal</c-button>
                <c-popup :activated="modalActive" @close="close" ref="modal" title="Info" type="info" subTitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                Praesent nec urna non libero lobortis sagittis. Etiam quis pellentesque dolor.Aenean semper fermentum lorem, ac cursus metus mollis eget.
                    <template slot="footer">
                        <div class="text-right w-100">
                            <c-button status="danger">Cancel</c-button>
                            <c-button status="success">Confirm</c-button>
                        </div>
                    </template>
                </c-popup>
            </div>
        `
    }))
    .add('success', () => ({
        components: {
            'c-popup': PopUps,
            'c-button': Buttons
        },
        data() {
            return {
                modalActive: false
            }
        },
        methods: {
            showModalHandler: function () {
                this.modalActive = !this.modalActive;
            },
            close() {
                console.log('PopUp was closed!!!!!!!!!');
                this.showModalHandler()
            }
        },
        template: `
            <div class="col-12 p-5 text-white">
                <h3 class="text-white">This is success popup</h3>
                <c-button @click="showModalHandler">Show modal</c-button>
                <c-popup :activated="modalActive" @close="close" ref="modal" type="success" title="Success" subTitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
                        text="Praesent nec urna non libero lobortis sagittis. Etiam quis pellentesque dolor.Aenean semper fermentum lorem, ac cursus metus mollis eget.">
                    <template slot="footer">
                        <div class="text-right w-100">
                            <c-button status="danger">Cancel</c-button>
                            <c-button status="success">Confirm</c-button>
                        </div>
                    </template>
                </c-popup>
            </div>
        `
    }))
    .add('changelog', () => ({
        components: {
            'c-basic-popup': BasicPopup,
            'c-dotted-list': List,
            'c-heading-bar-color': BlockHeadersColor,
            'c-emoji-single': EmojiSingle
        },
        data() {
            return {
                pensive: 0,
                smile: 0,
                neutral_face: 0
            }
        },
        template: `
        <div class="row p-5">
            <div class="col-4">
                <c-basic-popup :activated="true">
                    <div class="h4" slot="header">Our Updates</div>
                    <template slot="body">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida arcu quis tellus imperdiet tincidunt.
                            Sed iaculis mauris vitae eros fringilla, id congue libero mattis.
                        </p>

                        <c-heading-bar-color colorCode="#5EA72B" textAlign="left" class="margin-bottom-15 margin-top-10">
                            <strong>This is the Title</strong>
                        </c-heading-bar-color>
                        <c-dotted-list>
                            <li>Donec sapien velit, vulputate</li>
                            <li>Nulla ut fermentum turpis, a fermentum enim.</li>
                            <li>Praesent feugiat erat diam, tincidunt cursus ligula pulvinar id.</li>
                        </c-dotted-list>

                        <c-heading-bar-color colorCode="#FADC72" textAlign="left" class="margin-bottom-15 margin-top-20">
                            <strong>Aliquam nulla mi, mattis ut nisl nec</strong>
                        </c-heading-bar-color>
                        <c-dotted-list>
                            <li>Praesent in mauris nec felis dignissim viverra in at diam. Mauris congue aliquet tempus.</li>
                            <li>Morbi ut consequat eros</li>
                            <li>Aenean imperdiet lobortis tristique.</li>
                        </c-dotted-list>