Gitiles
Code Review Sign In
gerrit.nordix.org / onap / sdc / 8e9c0653dd6c6862123c9609ae34e1206d86456e / . / openecomp-ui / src / sdc-app / onboarding / GridStyling.stories.js
blob: 81a29cf04642f2ec39739b0a74ea147b8234f44e [file] [log] [blame]
talig8e9c0652017-12-20 14:30:43 +0200[diff] [blame^]1import React from 'react';
2import {storiesOf} from '@kadira/storybook';
3import {withKnobs} from '@kadira/storybook-addon-knobs';
4
5import GridSection from 'nfvo-components/grid/GridSection.jsx';
6import GridItem from 'nfvo-components/grid/GridItem.jsx';
7
8
9const stories = storiesOf('GridColumns', module);
10stories.addDecorator(withKnobs);
11
12var divStyle = {
13 'border-style': 'solid',
14 'border-size': 1
15};
16
17const myDiv = (<div style={divStyle}>Text Text Text</div>);
18
19stories
20 .add('Grid Options', () => (
21 <div>
22 <GridSection title='No last column set on item'>
23 <GridItem colSpan={2}>
24 {myDiv}
25 </GridItem>
26 <GridItem colSpan={2}>
27 {myDiv}
28 </GridItem>
29 </GridSection>
30
31 <GridSection hasLastColSet={true} title='With last column set on item and gridsection'>
32 <GridItem colSpan={2}>
33 {myDiv}
34 </GridItem>
35 <GridItem colSpan={2} lastColInRow={true}>
36 {myDiv}
37 </GridItem>
38 </GridSection>
39
40 <GridSection title='With last column set on item and NOT on gridsection'>
41 <GridItem colSpan={2}>
42 {myDiv}
43 </GridItem>
44 <GridItem colSpan={2} lastColInRow={true}>
45 {myDiv}
46 </GridItem>
47 </GridSection>
48
49 </div>
50 ))
51 .add('Last Column', () => (
52
53 <div>
54 <GridSection hasLastColSet={true} title='Testing different configurations with all settings'>
55 <GridItem colSpan={2}>
56 {myDiv}
57 </GridItem>
58 <GridItem colSpan={2} lastColInRow={true}>
59 {myDiv}
60 </GridItem>
61 </GridSection>
62 <GridSection hasLastColSet={true}>
63 <GridItem colSpan={1}>
64 {myDiv}
65 </GridItem>
66 <GridItem colSpan={1}>
67 {myDiv}
68 </GridItem>
69 <GridItem colSpan={1}>
70 {myDiv}
71 </GridItem>
72 <GridItem colSpan={1} lastColInRow={true}>
73 {myDiv}
74 </GridItem>
75 </GridSection>
76 <GridSection hasLastColSet={true}>
77 <GridItem colSpan={1}>
78 {myDiv}
79 </GridItem>
80 <GridItem colSpan={1}>
81 {myDiv}
82 </GridItem>
83 <GridItem colSpan={2} lastColInRow={true}>
84 {myDiv}
85 </GridItem>
86 </GridSection>
87 <GridSection hasLastColSet={true}>
88 <GridItem colSpan={2}>
89 {myDiv}
90 </GridItem>
91 <GridItem colSpan={1}>
92 {myDiv}
93 </GridItem>
94 <GridItem colSpan={1} lastColInRow={true}>
95 {myDiv}
96 </GridItem>
97 </GridSection>
98 <GridSection hasLastColSet={true}>
99 <GridItem colSpan={4} lastColInRow={true}>
100 {myDiv}
101 </GridItem>
102 </GridSection>
103 <GridSection hasLastColSet={true}>
104 <GridItem colSpan={3}>
105 {myDiv}
106 </GridItem>
107 <GridItem colSpan={1} lastColInRow={true}>
108 {myDiv}
109 </GridItem>
110 </GridSection>
111 <GridSection hasLastColSet={true}>
112 <GridItem colSpan={1}>
113 {myDiv}
114 </GridItem>
115 <GridItem colSpan={3} lastColInRow={true}>
116 {myDiv}
117 </GridItem>
118 </GridSection>
119 </div>
120 ))
121 .add('No Last Column', () => (
122 <div>
123 <GridSection title='Testing different configurations'>
124 <GridItem colSpan={2}>
125 {myDiv}
126 </GridItem>
127 <GridItem colSpan={2}>
128 {myDiv}
129 </GridItem>
130 </GridSection>
131 <GridSection>
132 <GridItem colSpan={1}>
133 {myDiv}
134 </GridItem>
135 <GridItem colSpan={1}>
136 {myDiv}
137 </GridItem>
138 <GridItem colSpan={1}>
139 {myDiv}
140 </GridItem>
141 <GridItem colSpan={1}>
142 {myDiv}
143 </GridItem>
144 </GridSection>
145 <GridSection>
146 <GridItem colSpan={1}>
147 {myDiv}
148 </GridItem>
149 <GridItem colSpan={1}>
150 {myDiv}
151 </GridItem>
152 <GridItem colSpan={2}>
153 {myDiv}
154 </GridItem>
155 </GridSection>
156 <GridSection>
157 <GridItem colSpan={2}>
158 {myDiv}
159 </GridItem>
160 <GridItem colSpan={1}>
161 {myDiv}
162 </GridItem>
163 <GridItem colSpan={1}>
164 {myDiv}
165 </GridItem>
166 </GridSection>
167 <GridSection>
168 <GridItem colSpan={4}>
169 {myDiv}
170 </GridItem>
171 </GridSection>
172 <GridSection>
173 <GridItem colSpan={3}>
174 {myDiv}
175 </GridItem>
176 <GridItem colSpan={1}>
177 {myDiv}
178 </GridItem>
179 </GridSection>
180 <GridSection>
181 <GridItem colSpan={1}>
182 {myDiv}
183 </GridItem>
184 <GridItem colSpan={3}>
185 {myDiv}
186 </GridItem>
187 </GridSection>
188 </div>
189 )) .add('Test LKG form', () => (
190 <div>
191 <GridSection title='Testing VLM LKG configurations'>
192 <GridItem colSpan={2}>
193 {myDiv}
194 </GridItem>
195 <GridItem colSpan={2} lastColInRow={true}>
196 {myDiv}
197 </GridItem>
198 <GridItem colSpan={2}>
199 {myDiv}
200 </GridItem>
201 <GridItem colSpan={2} lastColInRow={true}>
202 {myDiv}
203 </GridItem>
204 <GridItem colSpan={1}>
205 {myDiv}
206 </GridItem>
207 <GridItem colSpan={1}>
208 {myDiv}
209 </GridItem>
210 <GridItem colSpan={1}>
211 {myDiv}
212 </GridItem>
213 <GridItem colSpan={1} lastColInRow={true}>
214 {myDiv}
215 </GridItem>
216 <GridItem colSpan={2}>
217 <div style={divStyle}>1</div>
218 </GridItem>
219 </GridSection>
220 </div>
221));