@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/graphs/circleDonut/circleDonut.story.js CHANGED
@@ -12,233 +12,387 @@ var _components = require('../../../../components');
12
12
 
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
 
15
- (0, _react3.storiesOf)('CircleDonut').add('CircleDonut', function () {
16
- return _react2.default.createElement(
17
- _storyHelpers.Example,
18
- { title: 'Appearances' },
15
+ (0, _react3.storiesOf)('CircleDonut').add('light theme', function () {
16
+ return _react2.default.createElement(
17
+ _storyHelpers.Example,
18
+ { title: 'Appearances' },
19
+ _react2.default.createElement(
20
+ _storyHelpers.Stack,
21
+ null,
22
+ _react2.default.createElement(
23
+ 'div',
24
+ null,
19
25
  _react2.default.createElement(
20
- _storyHelpers.Stack,
21
- null,
22
- _react2.default.createElement(
23
- 'div',
24
- null,
25
- _react2.default.createElement(
26
- 'div',
27
- { style: { width: '295px', height: '295px' } },
28
- _react2.default.createElement(_components.CircleDonut, {
29
- data: {
30
- graph_name: "vertical-bar",
31
- graph_type: "donutThin",
32
- data: {
33
- "from_date": 1609698600000,
34
- "to_date": 1610389799000,
35
- "name": "Ingest",
36
- "total": 10,
37
- "values": [{
38
- "name": "Finished",
39
- "value": "ingested",
40
- "index": 1,
41
- "data": 3,
42
- "processed": 66
43
- }, {
44
- "name": "In Progress",
45
- "value": "started",
46
- "index": 2,
47
- "data": 5,
48
- "inprogress": 7
49
- }, {
50
- "name": "In Queue",
51
- "value": "inqueue",
52
- "index": 3,
53
- "data": 4,
54
- "pending": 0
55
- }, {
56
- "name": "Failed",
57
- "value": "failed",
58
- "index": 4,
59
- "data": 1,
60
- "pending": 17
61
- }]
62
- }
63
- },
64
-
65
- graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
66
-
67
- graphPlaceholder: false,
68
-
69
- valueSub: 'Assets'
70
- })
71
- )
72
- )
26
+ 'div',
27
+ { style: { width: '295px', height: '295px' } },
28
+ _react2.default.createElement(_components.CircleDonut, {
29
+ data: {
30
+ graph_name: 'vertical-bar',
31
+ graph_type: 'donutThin',
32
+ data: {
33
+ from_date: 1609698600000,
34
+ to_date: 1610389799000,
35
+ name: 'Ingest',
36
+ total: 10,
37
+ values: [{
38
+ name: 'Finished',
39
+ value: 'ingested',
40
+ index: 1,
41
+ data: 3,
42
+ processed: 66
43
+ }, {
44
+ name: 'In Progress',
45
+ value: 'started',
46
+ index: 2,
47
+ data: 5,
48
+ inprogress: 7
49
+ }, {
50
+ name: 'In Queue',
51
+ value: 'inqueue',
52
+ index: 3,
53
+ data: 4,
54
+ pending: 0
55
+ }, {
56
+ name: 'Failed',
57
+ value: 'failed',
58
+ index: 4,
59
+ data: 1,
60
+ pending: 17
61
+ }]
62
+ }
63
+ },
64
+ graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
65
+ graphPlaceholder: false,
66
+ valueSub: 'Assets'
67
+ })
73
68
  )
74
- );
69
+ )
70
+ )
71
+ );
75
72
  });
76
73
 
77
- (0, _react3.storiesOf)('CircleDonut').add('CircleDonut dark theme', function () {
78
- return _react2.default.createElement(
79
- _storyHelpers.Example,
80
- { title: 'Tag', background: 'dark' },
74
+ (0, _react3.storiesOf)('CircleDonut').add('dark theme', function () {
75
+ return _react2.default.createElement(
76
+ _storyHelpers.Example,
77
+ { title: 'Tag', background: 'dark' },
78
+ _react2.default.createElement(
79
+ _storyHelpers.Stack,
80
+ null,
81
+ _react2.default.createElement(
82
+ 'div',
83
+ null,
81
84
  _react2.default.createElement(
82
- _storyHelpers.Stack,
83
- null,
84
- _react2.default.createElement(
85
- 'div',
86
- null,
87
- _react2.default.createElement(
88
- 'div',
89
- { style: { width: '295px', height: '295px' } },
90
- _react2.default.createElement(_components.CircleDonut, {
91
- data: {
92
- graph_name: "circle-donut",
93
- graph_type: "donutDefault",
94
- data: {
95
- "from_date": 1609698600000,
96
- "to_date": 1610389799000,
97
- "name": "Ingest",
98
- "total": 10,
99
- "values": [{
100
- "name": "Finished",
101
- "value": "ingested",
102
- "index": 1,
103
- "data": 3,
104
- "processed": 66
105
- }, {
106
- "name": "In Progress",
107
- "value": "started",
108
- "index": 2,
109
- "data": 2,
110
- "inprogress": 7
111
- }, {
112
- "name": "In Queue",
113
- "value": "inqueue",
114
- "index": 3,
115
- "data": 4,
116
- "pending": 0
117
- }, {
118
- "name": "Failed",
119
- "value": "failed",
120
- "index": 4,
121
- "data": 1,
122
- "pending": 17
123
- }]
124
- }
125
- },
126
-
127
- graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
128
-
129
- graphPlaceholder: false,
130
- valueSub: 'Asset'
131
- })
132
- )
133
- )
134
- ),
85
+ 'div',
86
+ { style: { width: '295px', height: '295px' } },
87
+ _react2.default.createElement(_components.CircleDonut, {
88
+ data: {
89
+ graph_name: 'circle-donut',
90
+ graph_type: 'donutDefault',
91
+ data: {
92
+ from_date: 1609698600000,
93
+ to_date: 1610389799000,
94
+ name: 'Ingest',
95
+ total: 10,
96
+ values: [{
97
+ name: 'Finished',
98
+ value: 'ingested',
99
+ index: 1,
100
+ data: 3,
101
+ processed: 66
102
+ }, {
103
+ name: 'In Progress',
104
+ value: 'started',
105
+ index: 2,
106
+ data: 2,
107
+ inprogress: 7
108
+ }, {
109
+ name: 'In Queue',
110
+ value: 'inqueue',
111
+ index: 3,
112
+ data: 4,
113
+ pending: 0
114
+ }, {
115
+ name: 'Failed',
116
+ value: 'failed',
117
+ index: 4,
118
+ data: 1,
119
+ pending: 17
120
+ }]
121
+ }
122
+ },
123
+ graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
124
+ graphPlaceholder: false,
125
+ valueSub: 'Asset'
126
+ })
127
+ )
128
+ )
129
+ ),
130
+ _react2.default.createElement(
131
+ _storyHelpers.Stack,
132
+ null,
133
+ _react2.default.createElement(
134
+ 'div',
135
+ null,
135
136
  _react2.default.createElement(
136
- _storyHelpers.Stack,
137
- null,
138
- _react2.default.createElement(
139
- 'div',
140
- null,
141
- _react2.default.createElement(
142
- 'div',
143
- { style: { width: '295px', height: '295px' } },
144
- _react2.default.createElement(_components.CircleDonut, {
145
- data: {
146
- graph_name: "circle-donut",
147
- graph_type: "donutThin",
148
- data: {
149
- "from_date": 1609698600000,
150
- "to_date": 1610389799000,
151
- "name": "Ingest",
152
- "total": 10,
153
- "values": [{
154
- "name": "Finished",
155
- "value": "ingested",
156
- "index": 1,
157
- "data": 3,
158
- "processed": 66
159
- }, {
160
- "name": "In Progress",
161
- "value": "started",
162
- "index": 2,
163
- "data": 2,
164
- "inprogress": 7
165
- }, {
166
- "name": "In Queue",
167
- "value": "inqueue",
168
- "index": 3,
169
- "data": 4,
170
- "pending": 0
171
- }, {
172
- "name": "Failed",
173
- "value": "failed",
174
- "index": 4,
175
- "data": 1,
176
- "pending": 17
177
- }]
178
- }
179
- },
180
-
181
- graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
182
-
183
- graphPlaceholder: false,
184
- valueSub: 'Asset'
185
- })
186
- )
187
- )
188
- ),
137
+ 'div',
138
+ { style: { width: '295px', height: '295px' } },
139
+ _react2.default.createElement(_components.CircleDonut, {
140
+ data: {
141
+ graph_name: 'circle-donut',
142
+ graph_type: 'donutThin',
143
+ data: {
144
+ from_date: 1609698600000,
145
+ to_date: 1610389799000,
146
+ name: 'Ingest',
147
+ total: 10,
148
+ values: [{
149
+ name: 'Finished',
150
+ value: 'ingested',
151
+ index: 1,
152
+ data: 3,
153
+ processed: 66
154
+ }, {
155
+ name: 'In Progress',
156
+ value: 'started',
157
+ index: 2,
158
+ data: 2,
159
+ inprogress: 7
160
+ }, {
161
+ name: 'In Queue',
162
+ value: 'inqueue',
163
+ index: 3,
164
+ data: 4,
165
+ pending: 0
166
+ }, {
167
+ name: 'Failed',
168
+ value: 'failed',
169
+ index: 4,
170
+ data: 1,
171
+ pending: 17
172
+ }]
173
+ }
174
+ },
175
+ graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
176
+ graphPlaceholder: false,
177
+ valueSub: 'Asset'
178
+ })
179
+ )
180
+ )
181
+ ),
182
+ _react2.default.createElement(
183
+ _storyHelpers.Stack,
184
+ null,
185
+ _react2.default.createElement(
186
+ 'div',
187
+ null,
189
188
  _react2.default.createElement(
190
- _storyHelpers.Stack,
191
- null,
192
- _react2.default.createElement(
193
- 'div',
194
- null,
195
- _react2.default.createElement(
196
- 'div',
197
- { style: { width: '295px', height: '295px' } },
198
- _react2.default.createElement(_components.CircleDonut, {
199
- data: {
200
- graph_name: "circle-donut",
201
- graph_type: "donutThick",
202
- data: {
203
- "from_date": 1609698600000,
204
- "to_date": 1610389799000,
205
- "name": "Ingest",
206
- "total": 10,
207
- "values": [{
208
- "name": "Finished",
209
- "value": "ingested",
210
- "index": 1,
211
- "data": 3,
212
- "processed": 66
213
- }, {
214
- "name": "In Progress",
215
- "value": "started",
216
- "index": 2,
217
- "data": 2,
218
- "inprogress": 7
219
- }, {
220
- "name": "In Queue",
221
- "value": "inqueue",
222
- "index": 3,
223
- "data": 4,
224
- "pending": 0
225
- }, {
226
- "name": "Failed",
227
- "value": "failed",
228
- "index": 4,
229
- "data": 1,
230
- "pending": 17
231
- }]
232
- }
233
- },
234
-
235
- graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
189
+ 'div',
190
+ { style: { width: '295px', height: '295px' } },
191
+ _react2.default.createElement(_components.CircleDonut, {
192
+ data: {
193
+ graph_name: 'circle-donut',
194
+ graph_type: 'donutThick',
195
+ data: {
196
+ from_date: 1609698600000,
197
+ to_date: 1610389799000,
198
+ name: 'Ingest',
199
+ total: 10,
200
+ values: [{
201
+ name: 'Finished',
202
+ value: 'ingested',
203
+ index: 1,
204
+ data: 3,
205
+ processed: 66
206
+ }, {
207
+ name: 'In Progress',
208
+ value: 'started',
209
+ index: 2,
210
+ data: 2,
211
+ inprogress: 7
212
+ }, {
213
+ name: 'In Queue',
214
+ value: 'inqueue',
215
+ index: 3,
216
+ data: 4,
217
+ pending: 0
218
+ }, {
219
+ name: 'Failed',
220
+ value: 'failed',
221
+ index: 4,
222
+ data: 1,
223
+ pending: 17
224
+ }]
225
+ }
226
+ },
227
+ graphColors: [['#00C8E7', '#00E6B9'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
228
+ graphPlaceholder: false,
229
+ valueSub: 'Asset'
230
+ })
231
+ )
232
+ )
233
+ )
234
+ );
235
+ });
236
236
 
237
- graphPlaceholder: false,
238
- valueSub: 'Asset'
239
- })
240
- )
241
- )
237
+ (0, _react3.storiesOf)('CircleDonut').add('nexc theme', function () {
238
+ return _react2.default.createElement(
239
+ _storyHelpers.Example,
240
+ { title: 'Tag', background: 'dark' },
241
+ _react2.default.createElement(
242
+ _storyHelpers.Stack,
243
+ null,
244
+ _react2.default.createElement(
245
+ 'div',
246
+ null,
247
+ _react2.default.createElement(
248
+ 'div',
249
+ { style: { width: '295px', height: '295px' } },
250
+ _react2.default.createElement(_components.CircleDonut, {
251
+ data: {
252
+ graph_name: 'circle-donut',
253
+ graph_type: 'donutDefault',
254
+ data: {
255
+ from_date: 1609698600000,
256
+ to_date: 1610389799000,
257
+ name: 'Ingest',
258
+ total: 10,
259
+ values: [{
260
+ name: 'Finished',
261
+ value: 'ingested',
262
+ index: 1,
263
+ data: 3,
264
+ processed: 66
265
+ }, {
266
+ name: 'In Progress',
267
+ value: 'started',
268
+ index: 2,
269
+ data: 2,
270
+ inprogress: 7
271
+ }, {
272
+ name: 'In Queue',
273
+ value: 'inqueue',
274
+ index: 3,
275
+ data: 4,
276
+ pending: 0
277
+ }, {
278
+ name: 'Failed',
279
+ value: 'failed',
280
+ index: 4,
281
+ data: 1,
282
+ pending: 17
283
+ }]
284
+ }
285
+ },
286
+ graphColors: [['#60BEF8', '#60BEF8'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
287
+ graphPlaceholder: false,
288
+ valueSub: 'Asset'
289
+ })
290
+ )
291
+ )
292
+ ),
293
+ _react2.default.createElement(
294
+ _storyHelpers.Stack,
295
+ null,
296
+ _react2.default.createElement(
297
+ 'div',
298
+ null,
299
+ _react2.default.createElement(
300
+ 'div',
301
+ { style: { width: '295px', height: '295px' } },
302
+ _react2.default.createElement(_components.CircleDonut, {
303
+ data: {
304
+ graph_name: 'circle-donut',
305
+ graph_type: 'donutThin',
306
+ data: {
307
+ from_date: 1609698600000,
308
+ to_date: 1610389799000,
309
+ name: 'Ingest',
310
+ total: 10,
311
+ values: [{
312
+ name: 'Finished',
313
+ value: 'ingested',
314
+ index: 1,
315
+ data: 3,
316
+ processed: 66
317
+ }, {
318
+ name: 'In Progress',
319
+ value: 'started',
320
+ index: 2,
321
+ data: 2,
322
+ inprogress: 7
323
+ }, {
324
+ name: 'In Queue',
325
+ value: 'inqueue',
326
+ index: 3,
327
+ data: 4,
328
+ pending: 0
329
+ }, {
330
+ name: 'Failed',
331
+ value: 'failed',
332
+ index: 4,
333
+ data: 1,
334
+ pending: 17
335
+ }]
336
+ }
337
+ },
338
+ graphColors: [['#60BEF8', '#60BEF8'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
339
+ graphPlaceholder: false,
340
+ valueSub: 'Asset'
341
+ })
342
+ )
343
+ )
344
+ ),
345
+ _react2.default.createElement(
346
+ _storyHelpers.Stack,
347
+ null,
348
+ _react2.default.createElement(
349
+ 'div',
350
+ null,
351
+ _react2.default.createElement(
352
+ 'div',
353
+ { style: { width: '295px', height: '295px' } },
354
+ _react2.default.createElement(_components.CircleDonut, {
355
+ data: {
356
+ graph_name: 'circle-donut',
357
+ graph_type: 'donutThick',
358
+ data: {
359
+ from_date: 1609698600000,
360
+ to_date: 1610389799000,
361
+ name: 'Ingest',
362
+ total: 10,
363
+ values: [{
364
+ name: 'Finished',
365
+ value: 'ingested',
366
+ index: 1,
367
+ data: 3,
368
+ processed: 66
369
+ }, {
370
+ name: 'In Progress',
371
+ value: 'started',
372
+ index: 2,
373
+ data: 2,
374
+ inprogress: 7
375
+ }, {
376
+ name: 'In Queue',
377
+ value: 'inqueue',
378
+ index: 3,
379
+ data: 4,
380
+ pending: 0
381
+ }, {
382
+ name: 'Failed',
383
+ value: 'failed',
384
+ index: 4,
385
+ data: 1,
386
+ pending: 17
387
+ }]
388
+ }
389
+ },
390
+ graphColors: [['#60BEF8', '#60BEF8'], ['#FFE259', '#FFA751'], ['#FF8D29', '#F6462C'], ['#FFFFFF', '#DDDDDD']],
391
+ graphPlaceholder: false,
392
+ valueSub: 'Asset'
393
+ })
242
394
  )
243
- );
395
+ )
396
+ )
397
+ );
244
398
  });