summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/GridStyling.stories.js342
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>
+ ));