diff options
| author |   talig <talig@amdocs.com> | 2017-12-20 14:30:43 +0200 |
|---|---|---|
| committer |   Vitaly Emporopulo <Vitaliy.Emporopulo@amdocs.com> | 2017-12-21 11:12:33 +0000 |
| commit | 8e9c0653dd6c6862123c9609ae34e1206d86456e (patch) | |
| tree | 5eeef00ec0677133baa439ca8d7ffd7aca4804b6 /openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js | |
| parent | 785ebcc95de3e064e843bec04ba7a209d854fc7c (diff) | |
Add collaboration feature
Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
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 |