@desynova-digital/components 8.19.63 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/atoms/avatar/avatar.js +1 -1
  2. package/atoms/avatar/avatar.story.js +46 -14
  3. package/atoms/badge/badge.js +13 -13
  4. package/atoms/badge/badge.story.js +91 -29
  5. package/atoms/button/button.js +81 -85
  6. package/atoms/button/button.story.js +342 -2
  7. package/atoms/card/card.js +43 -39
  8. package/atoms/card/card.story.js +74 -48
  9. package/atoms/cardStack/cardStack.js +182 -155
  10. package/atoms/cardStack/cardStack.story.js +131 -18
  11. package/atoms/cardV2/cardV2.js +23 -23
  12. package/atoms/cardV2/cardV2.story.js +196 -45
  13. package/atoms/cardV2/content.js +109 -87
  14. package/atoms/cardV2/thumbnail.js +85 -72
  15. package/atoms/cardV2/timeline.js +119 -107
  16. package/atoms/checkbox/checkbox.js +41 -32
  17. package/atoms/checkbox/checkbox.story.js +220 -99
  18. package/atoms/customSelect/customSelect.story.js +820 -582
  19. package/atoms/datePicker/datePicker.js +77 -83
  20. package/atoms/datePicker/datePicker.story.js +167 -1
  21. package/atoms/dateTime/dateTime.story.js +26 -1
  22. package/atoms/draftInputText/draftInputText.js +358 -0
  23. package/atoms/draftInputText/draftInputText.story.js +251 -0
  24. package/atoms/draftInputText/index.js +13 -0
  25. package/atoms/dropdown/dropdown.story.js +146 -18
  26. package/atoms/dropdownList/dropdownList.story.js +1598 -1091
  27. package/atoms/graphs/barGraph/barGraph.js +143 -130
  28. package/atoms/graphs/barGraph/barGraph.story.js +74 -40
  29. package/atoms/graphs/circleDonut/circleDonut.story.js +374 -220
  30. package/atoms/graphs/circleGraph/circleGraph.js +84 -80
  31. package/atoms/graphs/circleGraph/circleGraph.story.js +38 -26
  32. package/atoms/graphs/circleNested/circleNested.story.js +98 -103
  33. package/atoms/graphs/pieChart/pieChart.story.js +160 -81
  34. package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js +30 -28
  35. package/atoms/icon/icon.story.js +220 -163
  36. package/atoms/inputText/inputText.js +52 -49
  37. package/atoms/label/label.js +29 -29
  38. package/atoms/label/label.story.js +42 -30
  39. package/atoms/loader/CircleLoader.js +13 -4
  40. package/atoms/loader/CircleLoader.jsx +10 -4
  41. package/atoms/loader/ThreeDotLoader.js +8 -4
  42. package/atoms/loader/ThreeDotLoader.jsx +4 -4
  43. package/atoms/loader/loader.js +29 -30
  44. package/atoms/loader/loader.story.js +38 -23
  45. package/atoms/loader/spinningLoader.js +7 -4
  46. package/atoms/loader/spinningLoader.jsx +5 -5
  47. package/atoms/popup/popup.js +11 -11
  48. package/atoms/popup/popup.story.js +36 -4
  49. package/atoms/radio/radio.story.js +140 -2
  50. package/atoms/sideBar/sidebar.js +19 -5
  51. package/atoms/sideBar/sidebar.jsx +13 -8
  52. package/atoms/switch/switch.js +72 -66
  53. package/atoms/switch/switch.story.js +323 -78
  54. package/atoms/tag/tag.js +39 -39
  55. package/atoms/tag/tag.story.js +83 -2
  56. package/atoms/textarea/textarea.js +36 -34
  57. package/atoms/timeCodeInput/timCodeInput.story.js +10 -9
  58. package/atoms/timeCodeInput/timeCodeInput.js +107 -100
  59. package/atoms/timer/timer.js +127 -126
  60. package/atoms/toast/toast.js +24 -14
  61. package/atoms/toast/toast.story.js +22 -0
  62. package/atoms/videoCard/videoCard.js +226 -203
  63. package/atoms/videoCard/videoCard.story.js +547 -186
  64. package/components.js +69 -66
  65. package/index.js +5 -4
  66. package/molecules/carousel/carousel.js +55 -67
  67. package/molecules/filter/filter.js +133 -106
  68. package/molecules/filter/filter.story.js +215 -173
  69. package/molecules/graphCard/graphCard.js +34 -24
  70. package/molecules/graphCard/graphCard.story.js +169 -82
  71. package/molecules/graphDetailCard/graphDetailCard.js +207 -182
  72. package/molecules/pageHeader/pageHeader.js +3 -2
  73. package/molecules/pageHeader/pageHeader.story.js +40 -18
  74. package/molecules/pagination/pagination.js +66 -14
  75. package/molecules/pagination/pagination.story.js +24 -2
  76. package/molecules/table/table.js +367 -315
  77. package/molecules/table/table.story.js +404 -208
  78. package/molecules/tabs/tabs.js +15 -6
  79. package/molecules/tabs/tabs.story.js +26 -0
  80. package/package.json +2 -2
package/atoms/customSelect/customSelect.story.js CHANGED
@@ -13,606 +13,844 @@ var _components = require('../../components');
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
 
15
15
  (0, _react3.storiesOf)('CustomSelect').add('light theme z', function () {
16
- return _react2.default.createElement(
17
- _storyHelpers.Example,
18
- { title: 'Appearances Light', background: 'default' },
16
+ return _react2.default.createElement(
17
+ _storyHelpers.Example,
18
+ { title: 'Appearances Light', background: 'default' },
19
+ _react2.default.createElement(
20
+ _storyHelpers.Stack,
21
+ null,
22
+ _react2.default.createElement(
23
+ 'div',
24
+ { style: { width: '150px' } },
25
+ _react2.default.createElement(_components.CustomSelect, {
26
+ theme: 'light',
27
+ required: true,
28
+ name: 'select1',
29
+ type: 'select',
30
+ label: 'Movies',
31
+ placeholder: '-Select-',
32
+ minchar: '4',
33
+ selectionChangeCallback: function selectionChangeCallback(e, data) {
34
+ console.log('selectionChangeCallback', e, data);
35
+ },
36
+ textChangeCallback: function textChangeCallback(e) {
37
+ console.log('textChangeCallback');
38
+ }
39
+ //error={"invalid selection"}
40
+ , options: [{
41
+ type: 'selectable',
42
+ value: '1',
43
+ label: 'One',
44
+ display: 'item',
45
+ data: {
46
+ name: 'One>name',
47
+ id: 'One>id'
48
+ }
49
+ }, {
50
+ type: 'selectable',
51
+ value: '2',
52
+ label: 'two',
53
+ display: 'item',
54
+ data: {
55
+ name: 'two>name',
56
+ id: 'two>id'
57
+ }
58
+ }, {
59
+ type: 'disabled',
60
+ value: '21',
61
+ label: 'two1',
62
+ display: 'item',
63
+ data: {
64
+ name: 'two1>name',
65
+ id: 'two1>id'
66
+ }
67
+ }, {
68
+ display: 'divider'
69
+ }, {
70
+ type: 'selectable',
71
+ value: '3',
72
+ label: 'Three',
73
+ display: 'item',
74
+ data: {
75
+ name: 'Three>name',
76
+ id: 'Three>id'
77
+ }
78
+ }]
79
+ })
80
+ ),
81
+ _react2.default.createElement(
82
+ 'div',
83
+ { style: { width: '150px' } },
84
+ _react2.default.createElement(_components.CustomSelect, {
85
+ theme: 'light',
86
+ required: true,
87
+ name: 'select2',
88
+ type: 'select',
89
+ label: 'Movies',
90
+ placeholder: '-Select-',
91
+ minchar: '4',
92
+ selectionChangeCallback: function selectionChangeCallback(e, data) {
93
+ console.log('selectionChangeCallback', e, data);
94
+ },
95
+ textChangeCallback: function textChangeCallback(e) {
96
+ console.log('textChangeCallback');
97
+ }
98
+ // error={"invalid selection"}
99
+ , options: [{
100
+ type: 'selectable',
101
+ value: '1',
102
+ label: 'One',
103
+ display: 'item',
104
+ data: {
105
+ name: 'One>name',
106
+ id: 'One>id'
107
+ }
108
+ }, {
109
+ type: 'selectable',
110
+ value: '2',
111
+ label: 'two',
112
+ display: 'item',
113
+ data: {
114
+ name: 'two>name',
115
+ id: 'two>id'
116
+ }
117
+ }, {
118
+ type: 'disabled',
119
+ value: '21',
120
+ label: 'two1',
121
+ display: 'item',
122
+ data: {
123
+ name: 'two1>name',
124
+ id: 'two1>id'
125
+ }
126
+ }, {
127
+ display: 'divider'
128
+ }, {
129
+ type: 'selectable',
130
+ value: '3',
131
+ label: 'Three',
132
+ display: 'item',
133
+ data: {
134
+ name: 'Three>name',
135
+ id: 'Three>id'
136
+ }
137
+ }]
138
+ })
139
+ )
140
+ )
141
+ );
142
+ });
143
+ (0, _react3.storiesOf)('CustomSelect').add('light theme', function () {
144
+ return _react2.default.createElement(
145
+ _storyHelpers.Example,
146
+ { title: 'Appearances Light', background: 'default' },
147
+ _react2.default.createElement(
148
+ _storyHelpers.Stack,
149
+ null,
150
+ _react2.default.createElement(
151
+ 'div',
152
+ { style: { width: '150px' } },
19
153
  _react2.default.createElement(
20
- _storyHelpers.Stack,
21
- null,
154
+ _components.CustomSelect,
155
+ {
156
+ type: 'dropdown',
157
+ label: 'Movies',
158
+ placeholder: '-Select-',
159
+ minchar: '4',
160
+ selectionChangeCallback: function selectionChangeCallback(e, a, s) {
161
+ console.log('selectionChangeCallback', e, a, s);
162
+ },
163
+ textChangeCallback: function textChangeCallback(e) {
164
+ console.log('textChangeCallback');
165
+ },
166
+ keyboardAction: true,
167
+ options: [{
168
+ type: 'selectable',
169
+ value: '1',
170
+ label: 'One',
171
+ display: 'item'
172
+ }, {
173
+ label: 'group1',
174
+ children: [{
175
+ type: 'selectable',
176
+ value: '122',
177
+ label: 'One2 1',
178
+ display: 'item'
179
+ }, {
180
+ type: 'selectable',
181
+ value: '123',
182
+ label: 'One2 2',
183
+ display: 'item'
184
+ }, {
185
+ label: 'group1 2',
186
+ children: [{
187
+ type: 'selectable',
188
+ value: '1221',
189
+ label: 'One2 11',
190
+ display: 'item'
191
+ }, {
192
+ type: 'selectable',
193
+ value: '1232',
194
+ label: 'One2 22',
195
+ display: 'item'
196
+ }]
197
+ }, {
198
+ type: 'selectable',
199
+ value: '125',
200
+ label: 'One2 4',
201
+ display: 'item'
202
+ }]
203
+ }, {
204
+ type: 'disabled',
205
+ value: '21',
206
+ label: 'two1',
207
+ display: 'item'
208
+ }, {
209
+ display: 'divider'
210
+ }, {
211
+ type: 'selectable',
212
+ value: '3',
213
+ label: 'Three',
214
+ display: 'item'
215
+ }]
216
+ },
217
+ _react2.default.createElement(
218
+ 'div',
219
+ { style: { width: '100%', background: 'teal' } },
22
220
  _react2.default.createElement(
23
- 'div',
24
- { style: { width: '150px' } },
25
- _react2.default.createElement(_components.CustomSelect, {
26
- theme: 'light',
27
- required: true,
28
- name: 'select1',
29
- type: 'select',
30
- label: 'Movies',
31
- placeholder: '-Select-',
32
- minchar: '4',
33
- selectionChangeCallback: function selectionChangeCallback(e, data) {
34
- console.log("selectionChangeCallback", e, data);
35
- },
36
- textChangeCallback: function textChangeCallback(e) {
37
- console.log("textChangeCallback");
38
- }
39
- //error={"invalid selection"}
40
- , options: [{
41
- type: 'selectable',
42
- value: '1',
43
- label: 'One',
44
- display: 'item',
45
- data: {
46
- name: "One>name",
47
- id: "One>id"
48
- }
49
- }, {
50
- type: 'selectable',
51
- value: '2',
52
- label: 'two',
53
- display: 'item',
54
- data: {
55
- name: "two>name",
56
- id: "two>id"
57
- }
58
- }, {
59
- type: 'disabled',
60
- value: '21',
61
- label: 'two1',
62
- display: 'item',
63
- data: {
64
- name: "two1>name",
65
- id: "two1>id"
66
- }
67
- }, {
68
- display: 'divider'
69
- }, {
70
- type: 'selectable',
71
- value: '3',
72
- label: 'Three',
73
- display: 'item',
74
- data: {
75
- name: "Three>name",
76
- id: "Three>id"
77
- }
78
- }]
79
- })
221
+ 'div',
222
+ null,
223
+ 'Some DOM elements'
80
224
  ),
81
225
  _react2.default.createElement(
82
- 'div',
83
- { style: { width: '150px' } },
84
- _react2.default.createElement(_components.CustomSelect, {
85
- theme: 'light',
86
- required: true,
87
- name: 'select2',
88
- type: 'select',
89
- label: 'Movies',
90
- placeholder: '-Select-',
91
- minchar: '4',
92
- selectionChangeCallback: function selectionChangeCallback(e, data) {
93
- console.log("selectionChangeCallback", e, data);
94
- },
95
- textChangeCallback: function textChangeCallback(e) {
96
- console.log("textChangeCallback");
97
- }
98
- // error={"invalid selection"}
99
- , options: [{
100
- type: 'selectable',
101
- value: '1',
102
- label: 'One',
103
- display: 'item',
104
- data: {
105
- name: "One>name",
106
- id: "One>id"
107
- }
108
- }, {
109
- type: 'selectable',
110
- value: '2',
111
- label: 'two',
112
- display: 'item',
113
- data: {
114
- name: "two>name",
115
- id: "two>id"
116
- }
117
- }, {
118
- type: 'disabled',
119
- value: '21',
120
- label: 'two1',
121
- display: 'item',
122
- data: {
123
- name: "two1>name",
124
- id: "two1>id"
125
- }
126
- }, {
127
- display: 'divider'
128
- }, {
129
- type: 'selectable',
130
- value: '3',
131
- label: 'Three',
132
- display: 'item',
133
- data: {
134
- name: "Three>name",
135
- id: "Three>id"
136
- }
137
- }]
138
- })
226
+ 'ul',
227
+ null,
228
+ _react2.default.createElement(
229
+ 'li',
230
+ null,
231
+ 'hello'
232
+ )
139
233
  )
234
+ )
140
235
  )
141
- );
236
+ )
237
+ ),
238
+ _react2.default.createElement(
239
+ _storyHelpers.Stack,
240
+ null,
241
+ _react2.default.createElement(
242
+ 'div',
243
+ { style: { width: '300px' } },
244
+ _react2.default.createElement(_components.CustomSelect, {
245
+ type: 'select',
246
+ label: 'Groups',
247
+ placeholder: '-- Choose --',
248
+ minchar: '4',
249
+ selectionChangeCallback: function selectionChangeCallback(e) {
250
+ console.log('selectionChangeCallback');
251
+ },
252
+ textChangeCallback: function textChangeCallback(e) {
253
+ console.log('textChangeCallback');
254
+ },
255
+ options: [{
256
+ type: 'selectable',
257
+ value: '',
258
+ label: 'All',
259
+ display: 'item'
260
+ }, {
261
+ label: 'INGEST',
262
+ value: '110',
263
+ children: [{
264
+ type: 'selectable',
265
+ value: '10',
266
+ label: 'All',
267
+ display: 'item'
268
+ }]
269
+ }, {
270
+ label: 'ONBOARDING',
271
+ value: '210',
272
+ children: [{
273
+ type: 'selectable',
274
+ value: '20',
275
+ label: 'All',
276
+ display: 'item'
277
+ }, {
278
+ type: 'selectable',
279
+ value: '21',
280
+ label: 'Add Promo',
281
+ display: 'item'
282
+ }, {
283
+ type: 'selectable',
284
+ value: '22',
285
+ label: 'Add Tvc',
286
+ display: 'item'
287
+ }, {
288
+ type: 'selectable',
289
+ value: '23',
290
+ label: 'Add Clip',
291
+ display: 'item'
292
+ }]
293
+ }, {
294
+ label: 'TAGGING',
295
+ value: '310',
296
+ children: [{
297
+ type: 'selectable',
298
+ value: '30',
299
+ label: 'All',
300
+ display: 'item'
301
+ }]
302
+ }, {
303
+ label: 'SCHEDULER',
304
+ value: '410',
305
+ children: [{
306
+ type: 'selectable',
307
+ value: '40',
308
+ label: 'All',
309
+ display: 'item'
310
+ }, {
311
+ type: 'selectable',
312
+ value: '41',
313
+ label: 'Some Label Text',
314
+ display: 'item'
315
+ }, {
316
+ type: 'selectable',
317
+ value: '42',
318
+ label: 'Some Label Text',
319
+ display: 'item'
320
+ }]
321
+ }]
322
+ })
323
+ )
324
+ ),
325
+ _react2.default.createElement(
326
+ _storyHelpers.Stack,
327
+ null,
328
+ _react2.default.createElement(
329
+ 'div',
330
+ { style: { width: '150px' } },
331
+ _react2.default.createElement(_components.CustomSelect, {
332
+ type: 'multiselect',
333
+ label: 'Movies',
334
+ placeholder: '-Select-',
335
+ minchar: '4',
336
+ selectionChangeCallback: function selectionChangeCallback(e) {
337
+ console.log('selectionChangeCallback');
338
+ },
339
+ textChangeCallback: function textChangeCallback(e) {
340
+ console.log('textChangeCallback');
341
+ },
342
+ searchable: true,
343
+ options: [{
344
+ type: 'selectable',
345
+ value: '1',
346
+ label: 'One',
347
+ display: 'item'
348
+ }, {
349
+ type: 'selectable',
350
+ value: '2',
351
+ label: 'two',
352
+ display: 'item'
353
+ }, {
354
+ type: 'disabled',
355
+ value: '21',
356
+ label: 'two1',
357
+ display: 'item'
358
+ }, {
359
+ display: 'divider'
360
+ }, {
361
+ type: 'selectable',
362
+ value: '3',
363
+ label: 'Three',
364
+ display: 'item'
365
+ }]
366
+ })
367
+ )
368
+ )
369
+ );
142
370
  });
143
- (0, _react3.storiesOf)('CustomSelect').add('light theme', function () {
144
- return _react2.default.createElement(
145
- _storyHelpers.Example,
146
- { title: 'Appearances Light', background: 'default' },
147
- _react2.default.createElement(
148
- _storyHelpers.Stack,
149
- null,
150
- _react2.default.createElement(
151
- 'div',
152
- { style: { width: '150px' } },
153
- _react2.default.createElement(
154
- _components.CustomSelect,
155
- {
156
371
 
157
- type: 'dropdown',
158
- label: 'Movies',
159
- placeholder: '-Select-',
160
- minchar: '4',
161
- selectionChangeCallback: function selectionChangeCallback(e, a, s) {
162
- console.log("selectionChangeCallback", e, a, s);
163
- },
164
- textChangeCallback: function textChangeCallback(e) {
165
- console.log("textChangeCallback");
166
- },
167
- keyboardAction: true,
168
- options: [{
169
- type: 'selectable',
170
- value: '1',
171
- label: 'One',
172
- display: 'item'
173
- }, {
174
- label: 'group1',
175
- children: [{
176
- type: 'selectable',
177
- value: '122',
178
- label: 'One2 1',
179
- display: 'item'
180
- }, {
181
- type: 'selectable',
182
- value: '123',
183
- label: 'One2 2',
184
- display: 'item'
185
- }, {
186
- label: 'group1 2',
187
- children: [{
188
- type: 'selectable',
189
- value: '1221',
190
- label: 'One2 11',
191
- display: 'item'
192
- }, {
193
- type: 'selectable',
194
- value: '1232',
195
- label: 'One2 22',
196
- display: 'item'
197
- }]
198
- }, {
199
- type: 'selectable',
200
- value: '125',
201
- label: 'One2 4',
202
- display: 'item'
203
- }]
204
- }, {
205
- type: 'disabled',
206
- value: '21',
207
- label: 'two1',
208
- display: 'item'
209
- }, {
210
- display: 'divider'
211
- }, {
212
- type: 'selectable',
213
- value: '3',
214
- label: 'Three',
215
- display: 'item'
216
- }]
217
- },
218
- _react2.default.createElement(
219
- 'div',
220
- { style: { "width": '100%', "background": "teal" } },
221
- _react2.default.createElement(
222
- 'div',
223
- null,
224
- 'Some DOM elements'
225
- ),
226
- _react2.default.createElement(
227
- 'ul',
228
- null,
229
- _react2.default.createElement(
230
- 'li',
231
- null,
232
- 'hello'
233
- )
234
- )
235
- )
236
- )
237
- )
238
- ),
372
+ (0, _react3.storiesOf)('CustomSelect').add('dark theme', function () {
373
+ return _react2.default.createElement(
374
+ _storyHelpers.Example,
375
+ { title: 'Appearances Light', background: 'dark' },
376
+ _react2.default.createElement(
377
+ _storyHelpers.Stack,
378
+ null,
379
+ _react2.default.createElement(
380
+ 'div',
381
+ { style: { width: '150px' } },
239
382
  _react2.default.createElement(
240
- _storyHelpers.Stack,
241
- null,
383
+ _components.CustomSelect,
384
+ {
385
+ theme: 'dark',
386
+ type: 'dropdown',
387
+ label: 'Movies',
388
+ placeholder: '-Select-',
389
+ minchar: '4',
390
+ selectionChangeCallback: function selectionChangeCallback(e) {
391
+ console.log('selectionChangeCallback');
392
+ },
393
+ textChangeCallback: function textChangeCallback(e) {
394
+ console.log('textChangeCallback');
395
+ },
396
+ keyboardAction: true,
397
+ options: [{
398
+ type: 'selectable',
399
+ value: '1',
400
+ label: 'One',
401
+ display: 'item'
402
+ }, {
403
+ label: 'group1',
404
+ children: [{
405
+ type: 'selectable',
406
+ value: '122',
407
+ label: 'One2 1',
408
+ display: 'item'
409
+ }, {
410
+ type: 'selectable',
411
+ value: '123',
412
+ label: 'One2 2',
413
+ display: 'item'
414
+ }, {
415
+ label: 'group1 2',
416
+ children: [{
417
+ type: 'selectable',
418
+ value: '1221',
419
+ label: 'One2 11',
420
+ display: 'item'
421
+ }, {
422
+ type: 'selectable',
423
+ value: '1232',
424
+ label: 'One2 22',
425
+ display: 'item'
426
+ }]
427
+ }, {
428
+ type: 'selectable',
429
+ value: '125',
430
+ label: 'One2 4',
431
+ display: 'item'
432
+ }]
433
+ }, {
434
+ type: 'disabled',
435
+ value: '21',
436
+ label: 'two1',
437
+ display: 'item'
438
+ }, {
439
+ display: 'divider'
440
+ }, {
441
+ type: 'selectable',
442
+ value: '3',
443
+ label: 'Three',
444
+ display: 'item'
445
+ }]
446
+ },
447
+ _react2.default.createElement(
448
+ 'div',
449
+ { style: { width: '100%', background: 'teal' } },
242
450
  _react2.default.createElement(
243
- 'div',
244
- { style: { width: '300px' } },
245
- _react2.default.createElement(_components.CustomSelect, {
246
- type: 'select',
247
- label: 'Groups',
248
- placeholder: '-- Choose --',
249
- minchar: '4',
250
- selectionChangeCallback: function selectionChangeCallback(e) {
251
- console.log("selectionChangeCallback");
252
- },
253
- textChangeCallback: function textChangeCallback(e) {
254
- console.log("textChangeCallback");
255
- },
256
-
257
- options: [{
258
- type: 'selectable',
259
- value: '',
260
- label: 'All',
261
- display: 'item'
262
- }, {
263
- label: 'INGEST',
264
- value: '110',
265
- children: [{
266
- type: 'selectable',
267
- value: '10',
268
- label: 'All',
269
- display: 'item'
270
- }]
271
- }, {
272
- label: 'ONBOARDING',
273
- value: '210',
274
- children: [{
275
- type: 'selectable',
276
- value: '20',
277
- label: 'All',
278
- display: 'item'
279
- }, {
280
- type: 'selectable',
281
- value: '21',
282
- label: 'Add Promo',
283
- display: 'item'
284
- }, {
285
- type: 'selectable',
286
- value: '22',
287
- label: 'Add Tvc',
288
- display: 'item'
289
- }, {
290
- type: 'selectable',
291
- value: '23',
292
- label: 'Add Clip',
293
- display: 'item'
294
- }]
295
- }, {
296
- label: 'TAGGING',
297
- value: '310',
298
- children: [{
299
- type: 'selectable',
300
- value: '30',
301
- label: 'All',
302
- display: 'item'
303
- }]
304
- }, {
305
- label: 'SCHEDULER',
306
- value: '410',
307
- children: [{
308
- type: 'selectable',
309
- value: '40',
310
- label: 'All',
311
- display: 'item'
312
- }, {
313
- type: 'selectable',
314
- value: '41',
315
- label: 'Some Label Text',
316
- display: 'item'
317
- }, {
318
- type: 'selectable',
319
- value: '42',
320
- label: 'Some Label Text',
321
- display: 'item'
322
- }]
323
- }]
324
- })
325
- )
326
- ),
327
- _react2.default.createElement(
328
- _storyHelpers.Stack,
329
- null,
451
+ 'div',
452
+ null,
453
+ 'Some DOM elements'
454
+ ),
330
455
  _react2.default.createElement(
331
- 'div',
332
- { style: { width: '150px' } },
333
- _react2.default.createElement(_components.CustomSelect, {
334
-
335
- type: 'multiselect',
336
- label: 'Movies',
337
- placeholder: '-Select-',
338
- minchar: '4',
339
- selectionChangeCallback: function selectionChangeCallback(e) {
340
- console.log("selectionChangeCallback");
341
- },
342
- textChangeCallback: function textChangeCallback(e) {
343
- console.log("textChangeCallback");
344
- },
345
- searchable: true,
346
- options: [{
347
- type: 'selectable',
348
- value: '1',
349
- label: 'One',
350
- display: 'item'
351
- }, {
352
- type: 'selectable',
353
- value: '2',
354
- label: 'two',
355
- display: 'item'
356
- }, {
357
- type: 'disabled',
358
- value: '21',
359
- label: 'two1',
360
- display: 'item'
361
- }, {
362
- display: 'divider'
363
- }, {
364
- type: 'selectable',
365
- value: '3',
366
- label: 'Three',
367
- display: 'item'
368
- }]
369
- })
456
+ 'ul',
457
+ null,
458
+ _react2.default.createElement(
459
+ 'li',
460
+ null,
461
+ 'hello'
462
+ )
370
463
  )
464
+ )
371
465
  )
372
- );
466
+ )
467
+ ),
468
+ _react2.default.createElement(
469
+ _storyHelpers.Stack,
470
+ null,
471
+ _react2.default.createElement(
472
+ 'div',
473
+ { style: { width: '300px' } },
474
+ _react2.default.createElement(_components.CustomSelect, {
475
+ theme: 'dark',
476
+ type: 'select',
477
+ label: 'Groups',
478
+ placeholder: '-- Choose --',
479
+ minchar: '4',
480
+ selectionChangeCallback: function selectionChangeCallback(e) {
481
+ console.log('selectionChangeCallback');
482
+ },
483
+ textChangeCallback: function textChangeCallback(e) {
484
+ console.log('textChangeCallback');
485
+ },
486
+ options: [{
487
+ label: 'INGEST',
488
+ value: '110',
489
+ children: [{
490
+ type: 'selectable',
491
+ value: '10',
492
+ label: 'All',
493
+ display: 'item'
494
+ }]
495
+ }, {
496
+ label: 'ONBOARDING',
497
+ value: '210',
498
+ children: [{
499
+ type: 'selectable',
500
+ value: '20',
501
+ label: 'All',
502
+ display: 'item'
503
+ }, {
504
+ type: 'selectable',
505
+ value: '21',
506
+ label: 'Add Promo',
507
+ display: 'item'
508
+ }, {
509
+ type: 'selectable',
510
+ value: '22',
511
+ label: 'Add Tvc',
512
+ display: 'item'
513
+ }, {
514
+ type: 'selectable',
515
+ value: '23',
516
+ label: 'Add Clip',
517
+ display: 'item'
518
+ }]
519
+ }, {
520
+ label: 'TAGGING',
521
+ value: '310',
522
+ children: [{
523
+ type: 'selectable',
524
+ value: '30',
525
+ label: 'All',
526
+ display: 'item'
527
+ }]
528
+ }, {
529
+ label: 'SCHEDULER',
530
+ value: '410',
531
+ children: [{
532
+ type: 'selectable',
533
+ value: '40',
534
+ label: 'All',
535
+ display: 'item'
536
+ }, {
537
+ type: 'selectable',
538
+ value: '41',
539
+ label: 'Some Label Text',
540
+ display: 'item'
541
+ }, {
542
+ type: 'selectable',
543
+ value: '42',
544
+ label: 'Some Label Text',
545
+ display: 'item'
546
+ }]
547
+ }]
548
+ })
549
+ )
550
+ ),
551
+ _react2.default.createElement(
552
+ _storyHelpers.Stack,
553
+ null,
554
+ _react2.default.createElement(
555
+ 'div',
556
+ { style: { width: '150px' } },
557
+ _react2.default.createElement(_components.CustomSelect, {
558
+ theme: 'dark',
559
+ type: 'multiselect',
560
+ label: 'Movies',
561
+ placeholder: '-Select-',
562
+ minchar: '4',
563
+ selectionChangeCallback: function selectionChangeCallback(e) {
564
+ console.log('selectionChangeCallback');
565
+ },
566
+ textChangeCallback: function textChangeCallback(e) {
567
+ console.log('textChangeCallback');
568
+ },
569
+ searchable: true,
570
+ options: [{
571
+ type: 'selectable',
572
+ value: '1',
573
+ label: 'One',
574
+ display: 'item',
575
+ data: {
576
+ name: 'One>name',
577
+ id: 'One>id'
578
+ }
579
+ }, {
580
+ type: 'selectable',
581
+ value: '2',
582
+ label: 'two',
583
+ display: 'item',
584
+ data: {
585
+ name: 'two>name',
586
+ id: 'two>id'
587
+ }
588
+ }, {
589
+ type: 'disabled',
590
+ value: '21',
591
+ label: 'two1',
592
+ display: 'item',
593
+ data: {
594
+ name: 'two1>name',
595
+ id: 'two1>id'
596
+ }
597
+ }, {
598
+ display: 'divider'
599
+ }, {
600
+ type: 'selectable',
601
+ value: '3',
602
+ label: 'Three',
603
+ display: 'item',
604
+ data: {
605
+ name: 'Three>name',
606
+ id: 'Three>id'
607
+ }
608
+ }]
609
+ })
610
+ )
611
+ )
612
+ );
373
613
  });
374
614
 
375
- (0, _react3.storiesOf)('CustomSelect').add('dark theme', function () {
376
- return _react2.default.createElement(
377
- _storyHelpers.Example,
378
- { title: 'Appearances Light', background: 'dark' },
379
- _react2.default.createElement(
380
- _storyHelpers.Stack,
381
- null,
382
- _react2.default.createElement(
383
- 'div',
384
- { style: { width: '150px' } },
385
- _react2.default.createElement(
386
- _components.CustomSelect,
387
- {
388
- theme: 'dark',
389
- type: 'dropdown',
390
- label: 'Movies',
391
- placeholder: '-Select-',
392
- minchar: '4',
393
- selectionChangeCallback: function selectionChangeCallback(e) {
394
- console.log("selectionChangeCallback");
395
- },
396
- textChangeCallback: function textChangeCallback(e) {
397
- console.log("textChangeCallback");
398
- },
399
- keyboardAction: true,
400
- options: [{
401
- type: 'selectable',
402
- value: '1',
403
- label: 'One',
404
- display: 'item'
405
- }, {
406
- label: 'group1',
407
- children: [{
408
- type: 'selectable',
409
- value: '122',
410
- label: 'One2 1',
411
- display: 'item'
412
- }, {
413
- type: 'selectable',
414
- value: '123',
415
- label: 'One2 2',
416
- display: 'item'
417
- }, {
418
- label: 'group1 2',
419
- children: [{
420
- type: 'selectable',
421
- value: '1221',
422
- label: 'One2 11',
423
- display: 'item'
424
- }, {
425
- type: 'selectable',
426
- value: '1232',
427
- label: 'One2 22',
428
- display: 'item'
429
- }]
430
- }, {
431
- type: 'selectable',
432
- value: '125',
433
- label: 'One2 4',
434
- display: 'item'
435
- }]
436
- }, {
437
- type: 'disabled',
438
- value: '21',
439
- label: 'two1',
440
- display: 'item'
441
- }, {
442
- display: 'divider'
443
- }, {
444
- type: 'selectable',
445
- value: '3',
446
- label: 'Three',
447
- display: 'item'
448
- }]
449
- },
450
- _react2.default.createElement(
451
- 'div',
452
- { style: { "width": '100%', "background": "teal" } },
453
- _react2.default.createElement(
454
- 'div',
455
- null,
456
- 'Some DOM elements'
457
- ),
458
- _react2.default.createElement(
459
- 'ul',
460
- null,
461
- _react2.default.createElement(
462
- 'li',
463
- null,
464
- 'hello'
465
- )
466
- )
467
- )
468
- )
469
- )
470
- ),
615
+ (0, _react3.storiesOf)('CustomSelect').add('nexc theme', function () {
616
+ return _react2.default.createElement(
617
+ _storyHelpers.Example,
618
+ { title: 'Appearances Light', background: 'dark' },
619
+ _react2.default.createElement(
620
+ _storyHelpers.Stack,
621
+ null,
622
+ _react2.default.createElement(
623
+ 'div',
624
+ { style: { width: '150px' } },
471
625
  _react2.default.createElement(
472
- _storyHelpers.Stack,
473
- null,
626
+ _components.CustomSelect,
627
+ {
628
+ theme: 'nexc',
629
+ type: 'dropdown',
630
+ label: 'Movies',
631
+ placeholder: '-Select-',
632
+ minchar: '4',
633
+ selectionChangeCallback: function selectionChangeCallback(e) {
634
+ console.log('selectionChangeCallback');
635
+ },
636
+ textChangeCallback: function textChangeCallback(e) {
637
+ console.log('textChangeCallback');
638
+ },
639
+ keyboardAction: true,
640
+ options: [{
641
+ type: 'selectable',
642
+ value: '1',
643
+ label: 'One',
644
+ display: 'item'
645
+ }, {
646
+ label: 'group1',
647
+ children: [{
648
+ type: 'selectable',
649
+ value: '122',
650
+ label: 'One2 1',
651
+ display: 'item'
652
+ }, {
653
+ type: 'selectable',
654
+ value: '123',
655
+ label: 'One2 2',
656
+ display: 'item'
657
+ }, {
658
+ label: 'group1 2',
659
+ children: [{
660
+ type: 'selectable',
661
+ value: '1221',
662
+ label: 'One2 11',
663
+ display: 'item'
664
+ }, {
665
+ type: 'selectable',
666
+ value: '1232',
667
+ label: 'One2 22',
668
+ display: 'item'
669
+ }]
670
+ }, {
671
+ type: 'selectable',
672
+ value: '125',
673
+ label: 'One2 4',
674
+ display: 'item'
675
+ }]
676
+ }, {
677
+ type: 'disabled',
678
+ value: '21',
679
+ label: 'two1',
680
+ display: 'item'
681
+ }, {
682
+ display: 'divider'
683
+ }, {
684
+ type: 'selectable',
685
+ value: '3',
686
+ label: 'Three',
687
+ display: 'item'
688
+ }]
689
+ },
690
+ _react2.default.createElement(
691
+ 'div',
692
+ { style: { width: '100%', background: 'teal' } },
474
693
  _react2.default.createElement(
475
- 'div',
476
- { style: { width: '300px' } },
477
- _react2.default.createElement(_components.CustomSelect, {
478
- theme: 'dark',
479
- type: 'select',
480
- label: 'Groups',
481
- placeholder: '-- Choose --',
482
- minchar: '4',
483
- selectionChangeCallback: function selectionChangeCallback(e) {
484
- console.log("selectionChangeCallback");
485
- },
486
- textChangeCallback: function textChangeCallback(e) {
487
- console.log("textChangeCallback");
488
- },
489
-
490
- options: [{
491
- label: 'INGEST',
492
- value: '110',
493
- children: [{
494
- type: 'selectable',
495
- value: '10',
496
- label: 'All',
497
- display: 'item'
498
- }]
499
- }, {
500
- label: 'ONBOARDING',
501
- value: '210',
502
- children: [{
503
- type: 'selectable',
504
- value: '20',
505
- label: 'All',
506
- display: 'item'
507
- }, {
508
- type: 'selectable',
509
- value: '21',
510
- label: 'Add Promo',
511
- display: 'item'
512
- }, {
513
- type: 'selectable',
514
- value: '22',
515
- label: 'Add Tvc',
516
- display: 'item'
517
- }, {
518
- type: 'selectable',
519
- value: '23',
520
- label: 'Add Clip',
521
- display: 'item'
522
- }]
523
- }, {
524
- label: 'TAGGING',
525
- value: '310',
526
- children: [{
527
- type: 'selectable',
528
- value: '30',
529
- label: 'All',
530
- display: 'item'
531
- }]
532
- }, {
533
- label: 'SCHEDULER',
534
- value: '410',
535
- children: [{
536
- type: 'selectable',
537
- value: '40',
538
- label: 'All',
539
- display: 'item'
540
- }, {
541
- type: 'selectable',
542
- value: '41',
543
- label: 'Some Label Text',
544
- display: 'item'
545
- }, {
546
- type: 'selectable',
547
- value: '42',
548
- label: 'Some Label Text',
549
- display: 'item'
550
- }]
551
- }]
552
- })
553
- )
554
- ),
555
- _react2.default.createElement(
556
- _storyHelpers.Stack,
557
- null,
694
+ 'div',
695
+ null,
696
+ 'Some DOM elements'
697
+ ),
558
698
  _react2.default.createElement(
559
- 'div',
560
- { style: { width: '150px' } },
561
- _react2.default.createElement(_components.CustomSelect, {
562
- theme: 'dark',
563
-
564
- type: 'multiselect',
565
- label: 'Movies',
566
- placeholder: '-Select-',
567
- minchar: '4',
568
- selectionChangeCallback: function selectionChangeCallback(e) {
569
- console.log("selectionChangeCallback");
570
- },
571
- textChangeCallback: function textChangeCallback(e) {
572
- console.log("textChangeCallback");
573
- },
574
- searchable: true,
575
- options: [{
576
- type: 'selectable',
577
- value: '1',
578
- label: 'One',
579
- display: 'item',
580
- data: {
581
- name: "One>name",
582
- id: "One>id"
583
- }
584
- }, {
585
- type: 'selectable',
586
- value: '2',
587
- label: 'two',
588
- display: 'item',
589
- data: {
590
- name: "two>name",
591
- id: "two>id"
592
- }
593
- }, {
594
- type: 'disabled',
595
- value: '21',
596
- label: 'two1',
597
- display: 'item',
598
- data: {
599
- name: "two1>name",
600
- id: "two1>id"
601
- }
602
- }, {
603
- display: 'divider'
604
- }, {
605
- type: 'selectable',
606
- value: '3',
607
- label: 'Three',
608
- display: 'item',
609
- data: {
610
- name: "Three>name",
611
- id: "Three>id"
612
- }
613
- }]
614
- })
699
+ 'ul',
700
+ null,
701
+ _react2.default.createElement(
702
+ 'li',
703
+ null,
704
+ 'hello'
705
+ )
615
706
  )
707
+ )
616
708
  )
617
- );
709
+ )
710
+ ),
711
+ _react2.default.createElement(
712
+ _storyHelpers.Stack,
713
+ null,
714
+ _react2.default.createElement(
715
+ 'div',
716
+ { style: { width: '300px' } },
717
+ _react2.default.createElement(_components.CustomSelect, {
718
+ theme: 'nexc',
719
+ type: 'select',
720
+ label: 'Groups',
721
+ placeholder: '-- Choose --',
722
+ minchar: '4',
723
+ selectionChangeCallback: function selectionChangeCallback(e) {
724
+ console.log('selectionChangeCallback');
725
+ },
726
+ textChangeCallback: function textChangeCallback(e) {
727
+ console.log('textChangeCallback');
728
+ },
729
+ options: [{
730
+ label: 'INGEST',
731
+ value: '110',
732
+ children: [{
733
+ type: 'selectable',
734
+ value: '10',
735
+ label: 'All',
736
+ display: 'item'
737
+ }]
738
+ }, {
739
+ label: 'ONBOARDING',
740
+ value: '210',
741
+ children: [{
742
+ type: 'selectable',
743
+ value: '20',
744
+ label: 'All',
745
+ display: 'item'
746
+ }, {
747
+ type: 'selectable',
748
+ value: '21',
749
+ label: 'Add Promo',
750
+ display: 'item'
751
+ }, {
752
+ type: 'selectable',
753
+ value: '22',
754
+ label: 'Add Tvc',
755
+ display: 'item'
756
+ }, {
757
+ type: 'selectable',
758
+ value: '23',
759
+ label: 'Add Clip',
760
+ display: 'item'
761
+ }]
762
+ }, {
763
+ label: 'TAGGING',
764
+ value: '310',
765
+ children: [{
766
+ type: 'selectable',
767
+ value: '30',
768
+ label: 'All',
769
+ display: 'item'
770
+ }]
771
+ }, {
772
+ label: 'SCHEDULER',
773
+ value: '410',
774
+ children: [{
775
+ type: 'selectable',
776
+ value: '40',
777
+ label: 'All',
778
+ display: 'item'
779
+ }, {
780
+ type: 'selectable',
781
+ value: '41',
782
+ label: 'Some Label Text',
783
+ display: 'item'
784
+ }, {
785
+ type: 'selectable',
786
+ value: '42',
787
+ label: 'Some Label Text',
788
+ display: 'item'
789
+ }]
790
+ }]
791
+ })
792
+ )
793
+ ),
794
+ _react2.default.createElement(
795
+ _storyHelpers.Stack,
796
+ null,
797
+ _react2.default.createElement(
798
+ 'div',
799
+ { style: { width: '150px' } },
800
+ _react2.default.createElement(_components.CustomSelect, {
801
+ theme: 'nexc',
802
+ type: 'multiselect',
803
+ label: 'Movies',
804
+ placeholder: '-Select-',
805
+ minchar: '4',
806
+ selectionChangeCallback: function selectionChangeCallback(e) {
807
+ console.log('selectionChangeCallback');
808
+ },
809
+ textChangeCallback: function textChangeCallback(e) {
810
+ console.log('textChangeCallback');
811
+ },
812
+ searchable: true,
813
+ options: [{
814
+ type: 'selectable',
815
+ value: '1',
816
+ label: 'One',
817
+ display: 'item',
818
+ data: {
819
+ name: 'One>name',
820
+ id: 'One>id'
821
+ }
822
+ }, {
823
+ type: 'selectable',
824
+ value: '2',
825
+ label: 'two',
826
+ display: 'item',
827
+ data: {
828
+ name: 'two>name',
829
+ id: 'two>id'
830
+ }
831
+ }, {
832
+ type: 'disabled',
833
+ value: '21',
834
+ label: 'two1',
835
+ display: 'item',
836
+ data: {
837
+ name: 'two1>name',
838
+ id: 'two1>id'
839
+ }
840
+ }, {
841
+ display: 'divider'
842
+ }, {
843
+ type: 'selectable',
844
+ value: '3',
845
+ label: 'Three',
846
+ display: 'item',
847
+ data: {
848
+ name: 'Three>name',
849
+ id: 'Three>id'
850
+ }
851
+ }]
852
+ })
853
+ )
854
+ )
855
+ );
618
856
  });