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 | 342 |
1 files changed, 136 insertions, 206 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js index 81a29cf046..7b8c87e62c 100644 --- a/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js +++ b/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js @@ -1,221 +1,151 @@ import React from 'react'; -import {storiesOf} from '@kadira/storybook'; -import {withKnobs} from '@kadira/storybook-addon-knobs'; +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 + 'border-style': 'solid', + 'border-size': 1 }; -const myDiv = (<div style={divStyle}>Text Text Text</div>); +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> + .add('Grid Options', () => ( + <div> + <GridSection title="No last column set on item"> + <GridItem colSpan={2}>{myDiv}</GridItem> + <GridItem colSpan={2}>{myDiv}</GridItem> + </GridSection> - </div> - )) - .add('Last Column', () => ( + <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> - <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 + <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> + )); |