openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { withKnobs } from '@kadira/storybook-addon-knobs';

import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';

const stories = storiesOf('GridColumns', module);
stories.addDecorator(withKnobs);

var divStyle = {
    'border-style': 'solid',
    'border-size': 1
};

const myDiv = <div style={divStyle}>Text Text Text</div>;

stories
    .add('Grid Options', () => (
        <div>
            <GridSection title="No last column set on item">
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={2}>{myDiv}</GridItem>
            </GridSection>

            <GridSection
                hasLastColSet={true}
                title="With last column set on item and gridsection">
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={2} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>

            <GridSection title="With last column set on item and NOT on gridsection">
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={2} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
        </div>
    ))
    .add('Last Column', () => (
        <div>
            <GridSection
                hasLastColSet={true}
                title="Testing different configurations with all settings">
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={2} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
            <GridSection hasLastColSet={true}>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
            <GridSection hasLastColSet={true}>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={2} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
            <GridSection hasLastColSet={true}>
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
            <GridSection hasLastColSet={true}>
                <GridItem colSpan={4} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
            <GridSection hasLastColSet={true}>
                <GridItem colSpan={3}>{myDiv}</GridItem>
                <GridItem colSpan={1} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
            <GridSection hasLastColSet={true}>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={3} lastColInRow={true}>
                    {myDiv}
                </GridItem>
            </GridSection>
        </div>
    ))
    .add('No Last Column', () => (
        <div>
            <GridSection title="Testing different configurations">
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={2}>{myDiv}</GridItem>
            </GridSection>
            <GridSection>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
            </GridSection>
            <GridSection>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={2}>{myDiv}</GridItem>
            </GridSection>
            <GridSection>
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
            </GridSection>
            <GridSection>
                <GridItem colSpan={4}>{myDiv}</GridItem>
            </GridSection>
            <GridSection>
                <GridItem colSpan={3}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
            </GridSection>
            <GridSection>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={3}>{myDiv}</GridItem>
            </GridSection>
        </div>
    ))
    .add('Test LKG form', () => (
        <div>
            <GridSection title="Testing VLM LKG configurations">
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={2} lastColInRow={true}>
                    {myDiv}
                </GridItem>
                <GridItem colSpan={2}>{myDiv}</GridItem>
                <GridItem colSpan={2} lastColInRow={true}>
                    {myDiv}
                </GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1}>{myDiv}</GridItem>
                <GridItem colSpan={1} lastColInRow={true}>
                    {myDiv}
                </GridItem>
                <GridItem colSpan={2}>
                    <div style={divStyle}>1</div>
                </GridItem>
            </GridSection>
        </div>
    ));