import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import VerticalStepper from './index';
import {
    text,
    boolean,
    number,
    object,
    array,
    selectV2,
    date,
    color,
    button,
    select
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
class Comp1 extends React.Component {
    render() {
        return (<div>I am component 1</div>)
    }
}
class Comp2 extends React.Component {
    render() {
        return (<div>I am component 2</div>)
    }
}
storiesOf('VerticalStepper', module)
    .add('VerticalStepper Component',
        withInfo('This is a VerticalStepper components that is configured from outside , it provides you with the Tabs UX and the click functionality on tabs and also the selected state of the tabs .')(
            () => {
                var steps = [{
                    title: "1",
                    headerTitle: 'Informed To'
                }, {
                    title: "2",
                    headerTitle: 'Work Started'
                }, {
                    title: "3",
                    headerTitle: 'Work Completed'
                }];
                debugger
                return <VerticalStepper steps={steps}/>
            }
        ))