diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js')
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js new file mode 100644 index 0000000000..81a29cf046 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js @@ -0,0 +1,221 @@ +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> +));
\ No newline at end of file |