Gitiles
Code Review Sign In
gerrit.nordix.org / onap / sdc / 1a64c83fc436e17f93e468f7d46ff9f5fcb081ce / . / openecomp-ui / src / sdc-app / onboarding / GridStyling.stories.js
blob: 7b8c87e62c08505d2a204407a4bd52591a66a556 [file] [log] [blame]
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame]1import React from 'react';
Einav Weiss Keidar7fdf7332018-03-20 14:45:40 +0200[diff] [blame]2import { storiesOf } from '@kadira/storybook';
3import { withKnobs } from '@kadira/storybook-addon-knobs';
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame]4
5import GridSection from 'nfvo-components/grid/GridSection.jsx';
6import GridItem from 'nfvo-components/grid/GridItem.jsx';
7
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame]8const stories = storiesOf('GridColumns', module);
9stories.addDecorator(withKnobs);
10
11var divStyle = {
Einav Weiss Keidar7fdf7332018-03-20 14:45:40 +0200[diff] [blame]12 'border-style': 'solid',
13 'border-size': 1
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame]14};
15
Einav Weiss Keidar7fdf7332018-03-20 14:45:40 +0200[diff] [blame]16const myDiv = <div style={divStyle}>Text Text Text</div>;
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame]17
18stories
Einav Weiss Keidar7fdf7332018-03-20 14:45:40 +0200[diff] [blame]19 .add('Grid Options', () => (
20 <div>
21 <GridSection title="No last column set on item">
22 <GridItem colSpan={2}>{myDiv}</GridItem>
23 <GridItem colSpan={2}>{myDiv}</GridItem>
24 </GridSection>
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame]25
Einav Weiss Keidar7fdf7332018-03-20 14:45:40 +0200[diff] [blame]26 <GridSection
27 hasLastColSet={true}
28 title="With last column set on item and gridsection">
29 <GridItem colSpan={2}>{myDiv}</GridItem>
30 <GridItem colSpan={2} lastColInRow={true}>
31 {myDiv}
32 </GridItem>
33 </GridSection>
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame]34
Einav Weiss Keidar7fdf7332018-03-20 14:45:40 +0200[diff] [blame]35 <GridSection title="With last column set on item and NOT on gridsection">
36 <GridItem colSpan={2}>{myDiv}</GridItem>
37 <GridItem colSpan={2} lastColInRow={true}>
38 {myDiv}
39 </GridItem>
40 </GridSection>
41 </div>
42 ))
43 .add('Last Column', () => (
44 <div>
45 <GridSection
46 hasLastColSet={true}
47 title="Testing different configurations with all settings">
48 <GridItem colSpan={2}>{myDiv}</GridItem>
49 <GridItem colSpan={2} lastColInRow={true}>
50 {myDiv}
51 </GridItem>
52 </GridSection>
53 <GridSection hasLastColSet={true}>
54 <GridItem colSpan={1}>{myDiv}</GridItem>
55 <GridItem colSpan={1}>{myDiv}</GridItem>
56 <GridItem colSpan={1}>{myDiv}</GridItem>
57 <GridItem colSpan={1} lastColInRow={true}>
58 {myDiv}
59 </GridItem>
60 </GridSection>
61 <GridSection hasLastColSet={true}>
62 <GridItem colSpan={1}>{myDiv}</GridItem>
63 <GridItem colSpan={1}>{myDiv}</GridItem>
64 <GridItem colSpan={2} lastColInRow={true}>
65 {myDiv}
66 </GridItem>
67 </GridSection>
68 <GridSection hasLastColSet={true}>
69 <GridItem colSpan={2}>{myDiv}</GridItem>
70 <GridItem colSpan={1}>{myDiv}</GridItem>
71 <GridItem colSpan={1} lastColInRow={true}>
72 {myDiv}
73 </GridItem>
74 </GridSection>
75 <GridSection hasLastColSet={true}>
76 <GridItem colSpan={4} lastColInRow={true}>
77 {myDiv}
78 </GridItem>
79 </GridSection>
80 <GridSection hasLastColSet={true}>
81 <GridItem colSpan={3}>{myDiv}</GridItem>
82 <GridItem colSpan={1} lastColInRow={true}>
83 {myDiv}
84 </GridItem>
85 </GridSection>
86 <GridSection hasLastColSet={true}>
87 <GridItem colSpan={1}>{myDiv}</GridItem>
88 <GridItem colSpan={3} lastColInRow={true}>
89 {myDiv}
90 </GridItem>
91 </GridSection>
92 </div>
93 ))
94 .add('No Last Column', () => (
95 <div>
96 <GridSection title="Testing different configurations">
97 <GridItem colSpan={2}>{myDiv}</GridItem>
98 <GridItem colSpan={2}>{myDiv}</GridItem>
99 </GridSection>
100 <GridSection>
101 <GridItem colSpan={1}>{myDiv}</GridItem>
102 <GridItem colSpan={1}>{myDiv}</GridItem>
103 <GridItem colSpan={1}>{myDiv}</GridItem>
104 <GridItem colSpan={1}>{myDiv}</GridItem>
105 </GridSection>
106 <GridSection>
107 <GridItem colSpan={1}>{myDiv}</GridItem>
108 <GridItem colSpan={1}>{myDiv}</GridItem>
109 <GridItem colSpan={2}>{myDiv}</GridItem>
110 </GridSection>
111 <GridSection>
112 <GridItem colSpan={2}>{myDiv}</GridItem>
113 <GridItem colSpan={1}>{myDiv}</GridItem>
114 <GridItem colSpan={1}>{myDiv}</GridItem>
115 </GridSection>
116 <GridSection>
117 <GridItem colSpan={4}>{myDiv}</GridItem>
118 </GridSection>
119 <GridSection>
120 <GridItem colSpan={3}>{myDiv}</GridItem>
121 <GridItem colSpan={1}>{myDiv}</GridItem>
122 </GridSection>
123 <GridSection>
124 <GridItem colSpan={1}>{myDiv}</GridItem>
125 <GridItem colSpan={3}>{myDiv}</GridItem>
126 </GridSection>
127 </div>
128 ))
129 .add('Test LKG form', () => (
130 <div>
131 <GridSection title="Testing VLM LKG configurations">
132 <GridItem colSpan={2}>{myDiv}</GridItem>
133 <GridItem colSpan={2} lastColInRow={true}>
134 {myDiv}
135 </GridItem>
136 <GridItem colSpan={2}>{myDiv}</GridItem>
137 <GridItem colSpan={2} lastColInRow={true}>
138 {myDiv}
139 </GridItem>
140 <GridItem colSpan={1}>{myDiv}</GridItem>
141 <GridItem colSpan={1}>{myDiv}</GridItem>
142 <GridItem colSpan={1}>{myDiv}</GridItem>
143 <GridItem colSpan={1} lastColInRow={true}>
144 {myDiv}
145 </GridItem>
146 <GridItem colSpan={2}>
147 <div style={divStyle}>1</div>
148 </GridItem>
149 </GridSection>
150 </div>
151 ));