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> ));