@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/checkbox/checkbox.story.js CHANGED
@@ -1,248 +1,369 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
- var _react = require("react");
3
+ var _react = require('react');
4
4
 
5
5
  var _react2 = _interopRequireDefault(_react);
6
6
 
7
- var _react3 = require("@storybook/react");
7
+ var _react3 = require('@storybook/react');
8
8
 
9
- var _storyHelpers = require("../../_helpers/story-helpers");
9
+ var _storyHelpers = require('../../_helpers/story-helpers');
10
10
 
11
- var _components = require("../../components");
11
+ var _components = require('../../components');
12
12
 
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
 
15
- (0, _react3.storiesOf)("Checkbox").add("light", function () {
15
+ (0, _react3.storiesOf)('Checkbox').add('light theme', function () {
16
16
  return _react2.default.createElement(
17
17
  _storyHelpers.Example,
18
18
  null,
19
19
  _react2.default.createElement(
20
20
  _components.Checkbox.Group,
21
- {
22
- name: "example2",
23
- readOnly: true,
24
- align: "horizontal",
25
- selected: ["one", "two"]
26
- },
21
+ { name: 'example2', readOnly: true, align: 'horizontal', selected: ['one', 'two'] },
27
22
  _react2.default.createElement(
28
23
  _components.Checkbox,
29
- { value: "one" },
30
- "Option 1"
24
+ { value: 'one' },
25
+ 'Option 1'
31
26
  ),
32
27
  _react2.default.createElement(
33
28
  _components.Checkbox,
34
- { value: "two" },
35
- "Option 2"
29
+ { value: 'two' },
30
+ 'Option 2'
36
31
  ),
37
32
  _react2.default.createElement(
38
33
  _components.Checkbox,
39
- { value: "three" },
40
- "Option 3"
34
+ { value: 'three' },
35
+ 'Option 3'
41
36
  ),
42
37
  _react2.default.createElement(
43
38
  _components.Checkbox,
44
- { value: "four" },
45
- "Option 4"
39
+ { value: 'four' },
40
+ 'Option 4'
46
41
  )
47
42
  ),
48
43
  _react2.default.createElement(
49
44
  _components.Checkbox.Group,
50
45
  {
51
- name: "example2",
52
- type: "label",
46
+ name: 'example2',
47
+ type: 'label',
53
48
  onChange: function onChange(e) {
54
49
  console.log(e.target.value, e.target.checked);
55
50
  },
56
- align: "horizontal",
57
- selected: ["one", "two"]
51
+ align: 'horizontal',
52
+ selected: ['one', 'two']
58
53
  },
59
54
  _react2.default.createElement(
60
55
  _components.Checkbox,
61
- { value: "one" },
62
- "ONE"
56
+ { value: 'one' },
57
+ 'ONE'
63
58
  ),
64
59
  _react2.default.createElement(
65
60
  _components.Checkbox,
66
- { value: "two" },
67
- "TWO"
61
+ { value: 'two' },
62
+ 'TWO'
68
63
  ),
69
64
  _react2.default.createElement(
70
65
  _components.Checkbox,
71
- { value: "three" },
72
- "THREE"
66
+ { value: 'three' },
67
+ 'THREE'
73
68
  ),
74
69
  _react2.default.createElement(
75
70
  _components.Checkbox,
76
- { value: "four" },
77
- "FOUR"
71
+ { value: 'four' },
72
+ 'FOUR'
78
73
  )
79
74
  ),
80
75
  _react2.default.createElement(
81
76
  _components.Checkbox.Group,
82
77
  {
83
- name: "example2",
78
+ name: 'example2',
84
79
  onChange: function onChange(e) {
85
80
  console.log(e.target.value, e.target.checked);
86
81
  },
87
- align: "vertical",
88
- selected: ["one", "two", "three"]
82
+ align: 'vertical',
83
+ selected: ['one', 'two', 'three']
89
84
  },
90
85
  _react2.default.createElement(
91
86
  _components.Checkbox,
92
- { value: "one" },
93
- "Option 1"
87
+ { value: 'one' },
88
+ 'Option 1'
94
89
  ),
95
90
  _react2.default.createElement(
96
91
  _components.Checkbox,
97
- { value: "two" },
98
- "Option 2"
92
+ { value: 'two' },
93
+ 'Option 2'
99
94
  ),
100
95
  _react2.default.createElement(
101
96
  _components.Checkbox,
102
- { value: "three", readOnly: true },
103
- "Option 3"
97
+ { value: 'three', readOnly: true },
98
+ 'Option 3'
104
99
  ),
105
100
  _react2.default.createElement(
106
101
  _components.Checkbox,
107
- { value: "four" },
108
- "Option 4"
102
+ { value: 'four' },
103
+ 'Option 4'
109
104
  )
110
105
  )
111
106
  );
112
107
  });
113
108
 
114
- (0, _react3.storiesOf)("Checkbox").add("dark", function () {
109
+ (0, _react3.storiesOf)('Checkbox').add('dark theme', function () {
115
110
  return _react2.default.createElement(
116
111
  _storyHelpers.Example,
117
- { background: "dark" },
112
+ { background: 'dark' },
113
+ _react2.default.createElement(
114
+ _components.Checkbox.Group,
115
+ { theme: 'dark', name: 'example3', align: 'horizontal', selected: ['one', 'two'] },
116
+ _react2.default.createElement(
117
+ _components.Checkbox,
118
+ { value: 'one' },
119
+ 'Option 1'
120
+ ),
121
+ _react2.default.createElement(
122
+ _components.Checkbox,
123
+ { value: 'two' },
124
+ 'Option 2'
125
+ ),
126
+ _react2.default.createElement(
127
+ _components.Checkbox,
128
+ { value: 'three' },
129
+ 'Option 3'
130
+ ),
131
+ _react2.default.createElement(
132
+ _components.Checkbox,
133
+ { value: 'four' },
134
+ 'Option 4'
135
+ )
136
+ ),
137
+ _react2.default.createElement(
138
+ _components.Checkbox.Group,
139
+ {
140
+ theme: 'dark',
141
+ name: 'example4',
142
+ type: 'label',
143
+ onChange: function onChange(e) {
144
+ console.log(e.target.value, e.target.checked);
145
+ },
146
+ align: 'horizontal',
147
+ selected: ['one', 'two']
148
+ },
149
+ _react2.default.createElement(
150
+ _components.Checkbox,
151
+ { value: 'one' },
152
+ 'ONE'
153
+ ),
154
+ _react2.default.createElement(
155
+ _components.Checkbox,
156
+ { value: 'two' },
157
+ 'TWO'
158
+ ),
159
+ _react2.default.createElement(
160
+ _components.Checkbox,
161
+ { value: 'three' },
162
+ 'THREE'
163
+ ),
164
+ _react2.default.createElement(
165
+ _components.Checkbox,
166
+ { value: 'four' },
167
+ 'FOUR'
168
+ )
169
+ ),
170
+ _react2.default.createElement(
171
+ _components.Checkbox.Group,
172
+ {
173
+ theme: 'dark',
174
+ name: 'example2',
175
+ onChange: function onChange(e) {
176
+ console.log(e.target.value, e.target.checked);
177
+ },
178
+ align: 'vertical',
179
+ selected: ['one', 'two', 'three']
180
+ },
181
+ _react2.default.createElement(
182
+ _components.Checkbox,
183
+ { value: 'one' },
184
+ 'Option 1'
185
+ ),
186
+ _react2.default.createElement(
187
+ _components.Checkbox,
188
+ { value: 'two' },
189
+ 'Option 2'
190
+ ),
191
+ _react2.default.createElement(
192
+ _components.Checkbox,
193
+ { value: 'three', readOnly: true },
194
+ 'Option 3'
195
+ ),
196
+ _react2.default.createElement(
197
+ _components.Checkbox,
198
+ { value: 'four' },
199
+ 'Option 4'
200
+ )
201
+ ),
118
202
  _react2.default.createElement(
119
203
  _components.Checkbox.Group,
120
204
  {
121
- theme: "dark",
122
- name: "example3",
123
- align: "horizontal",
124
- selected: ["one", "two"]
205
+ theme: 'dark',
206
+ name: 'example5',
207
+ onChange: function onChange(e) {
208
+ console.log(e.target.value, e.target.checked);
209
+ },
210
+ align: 'horizontal',
211
+ selected: ['text_aligned_left'],
212
+ type: 'icon'
125
213
  },
214
+ _react2.default.createElement(_components.Checkbox, { value: 'text_aligned_left' }),
215
+ _react2.default.createElement(_components.Checkbox, { value: 'text_aligned_center' }),
216
+ _react2.default.createElement(_components.Checkbox, { value: 'text_aligned_right' })
217
+ ),
218
+ _react2.default.createElement(
219
+ _components.Checkbox.Group,
220
+ {
221
+ theme: 'dark',
222
+ name: 'example6',
223
+ onChange: function onChange(e) {
224
+ console.log(e.target.value, e.target.checked);
225
+ },
226
+ align: 'horizontal',
227
+ selected: ['text_position_bottom'],
228
+ type: 'icon',
229
+ width: 24,
230
+ height: 16,
231
+ fillRule: 'evenodd'
232
+ },
233
+ _react2.default.createElement(_components.Checkbox, { value: 'text_position_top' }),
234
+ _react2.default.createElement(_components.Checkbox, { value: 'text_position_center' }),
235
+ _react2.default.createElement(_components.Checkbox, { value: 'text_position_bottom' })
236
+ )
237
+ );
238
+ });
239
+
240
+ (0, _react3.storiesOf)('Checkbox').add('nexc theme', function () {
241
+ return _react2.default.createElement(
242
+ _storyHelpers.Example,
243
+ { background: 'dark' },
244
+ _react2.default.createElement(
245
+ _components.Checkbox.Group,
246
+ { theme: 'nexc', name: 'example3', align: 'horizontal', selected: ['one', 'two'] },
126
247
  _react2.default.createElement(
127
248
  _components.Checkbox,
128
- { value: "one" },
129
- "Option 1"
249
+ { theme: 'nexc', value: 'one' },
250
+ 'Option 1'
130
251
  ),
131
252
  _react2.default.createElement(
132
253
  _components.Checkbox,
133
- { value: "two" },
134
- "Option 2"
254
+ { value: 'two' },
255
+ 'Option 2'
135
256
  ),
136
257
  _react2.default.createElement(
137
258
  _components.Checkbox,
138
- { value: "three" },
139
- "Option 3"
259
+ { theme: 'nexc', value: 'three' },
260
+ 'Option 3'
140
261
  ),
141
262
  _react2.default.createElement(
142
263
  _components.Checkbox,
143
- { value: "four" },
144
- "Option 4"
264
+ { theme: 'nexc', value: 'four' },
265
+ 'Option 4'
145
266
  )
146
267
  ),
147
268
  _react2.default.createElement(
148
269
  _components.Checkbox.Group,
149
270
  {
150
- theme: "dark",
151
- name: "example4",
152
- type: "label",
271
+ theme: 'nexc',
272
+ name: 'example4',
273
+ type: 'label',
153
274
  onChange: function onChange(e) {
154
275
  console.log(e.target.value, e.target.checked);
155
276
  },
156
- align: "horizontal",
157
- selected: ["one", "two"]
277
+ align: 'horizontal',
278
+ selected: ['one', 'two']
158
279
  },
159
280
  _react2.default.createElement(
160
281
  _components.Checkbox,
161
- { value: "one" },
162
- "ONE"
282
+ { theme: 'nexc', value: 'one' },
283
+ 'ONE'
163
284
  ),
164
285
  _react2.default.createElement(
165
286
  _components.Checkbox,
166
- { value: "two" },
167
- "TWO"
287
+ { theme: 'nexc', value: 'two' },
288
+ 'TWO'
168
289
  ),
169
290
  _react2.default.createElement(
170
291
  _components.Checkbox,
171
- { value: "three" },
172
- "THREE"
292
+ { theme: 'nexc', value: 'three' },
293
+ 'THREE'
173
294
  ),
174
295
  _react2.default.createElement(
175
296
  _components.Checkbox,
176
- { value: "four" },
177
- "FOUR"
297
+ { theme: 'nexc', value: 'four' },
298
+ 'FOUR'
178
299
  )
179
300
  ),
180
301
  _react2.default.createElement(
181
302
  _components.Checkbox.Group,
182
303
  {
183
- theme: "dark",
184
- name: "example2",
304
+ theme: 'nexc',
305
+ name: 'example2',
185
306
  onChange: function onChange(e) {
186
307
  console.log(e.target.value, e.target.checked);
187
308
  },
188
- align: "vertical",
189
- selected: ["one", "two", "three"]
309
+ align: 'vertical',
310
+ selected: ['one', 'two', 'three']
190
311
  },
191
312
  _react2.default.createElement(
192
313
  _components.Checkbox,
193
- { value: "one" },
194
- "Option 1"
314
+ { theme: 'nexc', value: 'one' },
315
+ 'Option 1'
195
316
  ),
196
317
  _react2.default.createElement(
197
318
  _components.Checkbox,
198
- { value: "two" },
199
- "Option 2"
319
+ { theme: 'nexc', value: 'two' },
320
+ 'Option 2'
200
321
  ),
201
322
  _react2.default.createElement(
202
323
  _components.Checkbox,
203
- { value: "three", readOnly: true },
204
- "Option 3"
324
+ { theme: 'nexc', value: 'three', readOnly: true },
325
+ 'Option 3'
205
326
  ),
206
327
  _react2.default.createElement(
207
328
  _components.Checkbox,
208
- { value: "four" },
209
- "Option 4"
329
+ { value: 'four' },
330
+ 'Option 4'
210
331
  )
211
332
  ),
212
333
  _react2.default.createElement(
213
334
  _components.Checkbox.Group,
214
335
  {
215
- theme: "dark",
216
- name: "example5",
336
+ theme: 'nexc',
337
+ name: 'example5',
217
338
  onChange: function onChange(e) {
218
339
  console.log(e.target.value, e.target.checked);
219
340
  },
220
- align: "horizontal",
221
- selected: ["text_aligned_left"],
222
- type: "icon"
341
+ align: 'horizontal',
342
+ selected: ['text_aligned_left'],
343
+ type: 'icon'
223
344
  },
224
- _react2.default.createElement(_components.Checkbox, { value: "text_aligned_left" }),
225
- _react2.default.createElement(_components.Checkbox, { value: "text_aligned_center" }),
226
- _react2.default.createElement(_components.Checkbox, { value: "text_aligned_right" })
345
+ _react2.default.createElement(_components.Checkbox, { theme: 'nexc', value: 'text_aligned_left' }),
346
+ _react2.default.createElement(_components.Checkbox, { theme: 'nexc', value: 'text_aligned_center' }),
347
+ _react2.default.createElement(_components.Checkbox, { theme: 'nexc', value: 'text_aligned_right' })
227
348
  ),
228
349
  _react2.default.createElement(
229
350
  _components.Checkbox.Group,
230
351
  {
231
- theme: "dark",
232
- name: "example6",
352
+ theme: 'nexc',
353
+ name: 'example6',
233
354
  onChange: function onChange(e) {
234
355
  console.log(e.target.value, e.target.checked);
235
356
  },
236
- align: "horizontal",
237
- selected: ["text_position_bottom"],
238
- type: "icon",
357
+ align: 'horizontal',
358
+ selected: ['text_position_bottom'],
359
+ type: 'icon',
239
360
  width: 24,
240
361
  height: 16,
241
- fillRule: "evenodd"
362
+ fillRule: 'evenodd'
242
363
  },
243
- _react2.default.createElement(_components.Checkbox, { value: "text_position_top" }),
244
- _react2.default.createElement(_components.Checkbox, { value: "text_position_center" }),
245
- _react2.default.createElement(_components.Checkbox, { value: "text_position_bottom" })
364
+ _react2.default.createElement(_components.Checkbox, { theme: 'nexc', value: 'text_position_top' }),
365
+ _react2.default.createElement(_components.Checkbox, { theme: 'nexc', value: 'text_position_center' }),
366
+ _react2.default.createElement(_components.Checkbox, { theme: 'nexc', value: 'text_position_bottom' })
246
367
  )
247
368
  );
248
369
  });