@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/switch/switch.story.js CHANGED
@@ -13,7 +13,7 @@ var _components = require('../../components');
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
 
15
15
  //console.log(RadioGroup);
16
- (0, _react3.storiesOf)('Switch').add('default', function () {
16
+ (0, _react3.storiesOf)('Switch').add('light theme', function () {
17
17
  return _react2.default.createElement(
18
18
  _storyHelpers.Example,
19
19
  null,
@@ -25,69 +25,107 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
25
25
  null,
26
26
  _react2.default.createElement(
27
27
  'div',
28
- { style: {
29
- 'background': '#fff',
30
- 'padding': '10px'
31
- } },
32
- _react2.default.createElement(_components.Switch, { checked: true, theme: 'light', onChangeCheck: function onChangeCheck(value) {
28
+ {
29
+ style: {
30
+ background: '#fff',
31
+ padding: '10px'
32
+ }
33
+ },
34
+ _react2.default.createElement(_components.Switch, {
35
+ checked: true,
36
+ theme: 'light',
37
+ onChangeCheck: function onChangeCheck(value) {
33
38
  console.log(value);
34
- } })
39
+ }
40
+ })
35
41
  ),
36
42
  _react2.default.createElement(
37
43
  'div',
38
- { style: {
39
- 'background': '#fff',
40
- 'padding': '10px'
41
- } },
42
- _react2.default.createElement(_components.Switch, { checked: false, theme: 'light', onChangeCheck: function onChangeCheck(value) {
44
+ {
45
+ style: {
46
+ background: '#fff',
47
+ padding: '10px'
48
+ }
49
+ },
50
+ _react2.default.createElement(_components.Switch, {
51
+ checked: false,
52
+ theme: 'light',
53
+ onChangeCheck: function onChangeCheck(value) {
43
54
  console.log(value);
44
- } })
55
+ }
56
+ })
45
57
  ),
46
58
  _react2.default.createElement(
47
59
  'div',
48
- { style: {
49
- 'background': '#fff',
50
- 'padding': '10px'
51
- } },
52
- _react2.default.createElement(_components.Switch, { checked: false, theme: 'light', onChangeCheck: function onChangeCheck(value) {
60
+ {
61
+ style: {
62
+ background: '#fff',
63
+ padding: '10px'
64
+ }
65
+ },
66
+ _react2.default.createElement(_components.Switch, {
67
+ checked: false,
68
+ theme: 'light',
69
+ onChangeCheck: function onChangeCheck(value) {
53
70
  console.log(value);
54
- } })
71
+ }
72
+ })
55
73
  ),
56
74
  _react2.default.createElement(
57
75
  'div',
58
- { style: {
59
- 'background': '#fff',
60
- 'padding': '10px'
61
- } },
62
- _react2.default.createElement(_components.Switch, { checked: true, theme: 'light', onChangeCheck: function onChangeCheck(value) {
76
+ {
77
+ style: {
78
+ background: '#fff',
79
+ padding: '10px'
80
+ }
81
+ },
82
+ _react2.default.createElement(_components.Switch, {
83
+ checked: true,
84
+ theme: 'light',
85
+ onChangeCheck: function onChangeCheck(value) {
63
86
  console.log(value);
64
- } })
87
+ }
88
+ })
65
89
  ),
66
90
  _react2.default.createElement(
67
91
  'div',
68
- { style: {
69
- 'background': '#fff',
70
- 'padding': '10px'
71
- } },
72
- _react2.default.createElement(_components.Switch, { checked: true, disabled: true, theme: 'light', onChangeCheck: function onChangeCheck(value) {
92
+ {
93
+ style: {
94
+ background: '#fff',
95
+ padding: '10px'
96
+ }
97
+ },
98
+ _react2.default.createElement(_components.Switch, {
99
+ checked: true,
100
+ disabled: true,
101
+ theme: 'light',
102
+ onChangeCheck: function onChangeCheck(value) {
73
103
  console.log(value);
74
- } })
104
+ }
105
+ })
75
106
  ),
76
107
  _react2.default.createElement(
77
108
  'div',
78
- { style: {
79
- 'background': '#fff',
80
- 'padding': '10px'
81
- } },
82
- _react2.default.createElement(_components.Switch, { checked: false, disabled: true, theme: 'light', onChangeCheck: function onChangeCheck(value) {
109
+ {
110
+ style: {
111
+ background: '#fff',
112
+ padding: '10px'
113
+ }
114
+ },
115
+ _react2.default.createElement(_components.Switch, {
116
+ checked: false,
117
+ disabled: true,
118
+ theme: 'light',
119
+ onChangeCheck: function onChangeCheck(value) {
83
120
  console.log(value);
84
- } })
121
+ }
122
+ })
85
123
  )
86
124
  )
87
125
  )
88
126
  );
89
127
  });
90
- (0, _react3.storiesOf)('Switch').add('dark', function () {
128
+ (0, _react3.storiesOf)('Switch').add('dark theme', function () {
91
129
  return _react2.default.createElement(
92
130
  _storyHelpers.Example,
93
131
  { background: 'dark' },
@@ -99,75 +137,282 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
99
137
  null,
100
138
  _react2.default.createElement(
101
139
  'div',
102
- { style: {
103
- 'padding': '10px'
104
- } },
105
- _react2.default.createElement(_components.Switch, { checked: true, theme: 'dark', onChangeCheck: function onChangeCheck(value) {
140
+ {
141
+ style: {
142
+ padding: '10px'
143
+ }
144
+ },
145
+ _react2.default.createElement(_components.Switch, {
146
+ checked: true,
147
+ theme: 'dark',
148
+ onChangeCheck: function onChangeCheck(value) {
106
149
  console.log(value);
107
- } })
150
+ }
151
+ })
108
152
  ),
109
153
  _react2.default.createElement(
110
154
  'div',
111
- { style: {
112
- 'padding': '10px'
113
- } },
114
- _react2.default.createElement(_components.Switch, { checked: false, theme: 'dark', onChangeCheck: function onChangeCheck(value) {
155
+ {
156
+ style: {
157
+ padding: '10px'
158
+ }
159
+ },
160
+ _react2.default.createElement(_components.Switch, {
161
+ checked: false,
162
+ theme: 'dark',
163
+ onChangeCheck: function onChangeCheck(value) {
115
164
  console.log(value);
116
- } })
165
+ }
166
+ })
117
167
  ),
118
168
  _react2.default.createElement(
119
169
  'div',
120
- { style: {
121
- 'padding': '10px'
122
- } },
123
- _react2.default.createElement(_components.Switch, { checked: true, label: 'Notification', key: 'notify1', theme: 'dark', onChangeCheck: function onChangeCheck(value) {
170
+ {
171
+ style: {
172
+ padding: '10px'
173
+ }
174
+ },
175
+ _react2.default.createElement(_components.Switch, {
176
+ checked: true,
177
+ label: 'Notification',
178
+ key: 'notify1',
179
+ theme: 'dark',
180
+ onChangeCheck: function onChangeCheck(value) {
124
181
  console.log(value);
125
- } })
182
+ }
183
+ })
126
184
  ),
127
185
  _react2.default.createElement(
128
186
  'div',
129
- { style: {
130
- 'padding': '10px'
131
- } },
132
- _react2.default.createElement(_components.Switch, { checked: false, label: 'Notification', key: 'notify2', theme: 'dark', onChangeCheck: function onChangeCheck(value) {
187
+ {
188
+ style: {
189
+ padding: '10px'
190
+ }
191
+ },
192
+ _react2.default.createElement(_components.Switch, {
193
+ checked: false,
194
+ label: 'Notification',
195
+ key: 'notify2',
196
+ theme: 'dark',
197
+ onChangeCheck: function onChangeCheck(value) {
133
198
  console.log(value);
134
- } })
199
+ }
200
+ })
135
201
  ),
136
202
  _react2.default.createElement(
137
203
  'div',
138
- { style: {
139
- 'padding': '10px'
140
- } },
141
- _react2.default.createElement(_components.Switch, { checked: true, disabled: true, label: 'Notification', key: 'notify1', theme: 'dark', onChangeCheck: function onChangeCheck(value) {
204
+ {
205
+ style: {
206
+ padding: '10px'
207
+ }
208
+ },
209
+ _react2.default.createElement(_components.Switch, {
210
+ checked: true,
211
+ disabled: true,
212
+ label: 'Notification',
213
+ key: 'notify1',
214
+ theme: 'dark',
215
+ onChangeCheck: function onChangeCheck(value) {
142
216
  console.log(value);
143
- } })
217
+ }
218
+ })
144
219
  ),
145
220
  _react2.default.createElement(
146
221
  'div',
147
- { style: {
148
- 'padding': '10px'
149
- } },
150
- _react2.default.createElement(_components.Switch, { checked: false, disabled: true, label: 'Notification', key: 'notify2', theme: 'dark', onChangeCheck: function onChangeCheck(value) {
222
+ {
223
+ style: {
224
+ padding: '10px'
225
+ }
226
+ },
227
+ _react2.default.createElement(_components.Switch, {
228
+ checked: false,
229
+ disabled: true,
230
+ label: 'Notification',
231
+ key: 'notify2',
232
+ theme: 'dark',
233
+ onChangeCheck: function onChangeCheck(value) {
151
234
  console.log(value);
152
- } })
235
+ }
236
+ })
153
237
  ),
154
238
  _react2.default.createElement(
155
239
  'div',
156
- { style: {
157
- 'padding': '10px'
158
- } },
159
- _react2.default.createElement(_components.Switch, { checked: true, disabled: true, theme: 'dark', onChangeCheck: function onChangeCheck(value) {
240
+ {
241
+ style: {
242
+ padding: '10px'
243
+ }
244
+ },
245
+ _react2.default.createElement(_components.Switch, {
246
+ checked: true,
247
+ disabled: true,
248
+ theme: 'dark',
249
+ onChangeCheck: function onChangeCheck(value) {
160
250
  console.log(value);
161
- } })
251
+ }
252
+ })
162
253
  ),
163
254
  _react2.default.createElement(
164
255
  'div',
165
- { style: {
166
- 'padding': '10px'
167
- } },
168
- _react2.default.createElement(_components.Switch, { checked: false, disabled: true, theme: 'dark', onChangeCheck: function onChangeCheck(value) {
256
+ {
257
+ style: {
258
+ padding: '10px'
259
+ }
260
+ },
261
+ _react2.default.createElement(_components.Switch, {
262
+ checked: false,
263
+ disabled: true,
264
+ theme: 'dark',
265
+ onChangeCheck: function onChangeCheck(value) {
169
266
  console.log(value);
170
- } })
267
+ }
268
+ })
269
+ )
270
+ )
271
+ )
272
+ );
273
+ });
274
+
275
+ (0, _react3.storiesOf)('Switch').add('nexc theme', function () {
276
+ return _react2.default.createElement(
277
+ _storyHelpers.Example,
278
+ { background: 'nexc' },
279
+ _react2.default.createElement(
280
+ 'div',
281
+ null,
282
+ _react2.default.createElement(
283
+ 'div',
284
+ null,
285
+ _react2.default.createElement(
286
+ 'div',
287
+ {
288
+ style: {
289
+ padding: '10px'
290
+ }
291
+ },
292
+ _react2.default.createElement(_components.Switch, {
293
+ checked: true,
294
+ theme: 'nexc',
295
+ onChangeCheck: function onChangeCheck(value) {
296
+ console.log(value);
297
+ }
298
+ })
299
+ ),
300
+ _react2.default.createElement(
301
+ 'div',
302
+ {
303
+ style: {
304
+ padding: '10px'
305
+ }
306
+ },
307
+ _react2.default.createElement(_components.Switch, {
308
+ checked: false,
309
+ theme: 'nexc',
310
+ onChangeCheck: function onChangeCheck(value) {
311
+ console.log(value);
312
+ }
313
+ })
314
+ ),
315
+ _react2.default.createElement(
316
+ 'div',
317
+ {
318
+ style: {
319
+ padding: '10px'
320
+ }
321
+ },
322
+ _react2.default.createElement(_components.Switch, {
323
+ checked: true,
324
+ label: 'Notification',
325
+ key: 'notify1',
326
+ theme: 'nexc',
327
+ onChangeCheck: function onChangeCheck(value) {
328
+ console.log(value);
329
+ }
330
+ })
331
+ ),
332
+ _react2.default.createElement(
333
+ 'div',
334
+ {
335
+ style: {
336
+ padding: '10px'
337
+ }
338
+ },
339
+ _react2.default.createElement(_components.Switch, {
340
+ checked: false,
341
+ label: 'Notification',
342
+ key: 'notify2',
343
+ theme: 'nexc',
344
+ onChangeCheck: function onChangeCheck(value) {
345
+ console.log(value);
346
+ }
347
+ })
348
+ ),
349
+ _react2.default.createElement(
350
+ 'div',
351
+ {
352
+ style: {
353
+ padding: '10px'
354
+ }
355
+ },
356
+ _react2.default.createElement(_components.Switch, {
357
+ checked: true,
358
+ disabled: true,
359
+ label: 'Notification',
360
+ key: 'notify1',
361
+ theme: 'nexc',
362
+ onChangeCheck: function onChangeCheck(value) {
363
+ console.log(value);
364
+ }
365
+ })
366
+ ),
367
+ _react2.default.createElement(
368
+ 'div',
369
+ {
370
+ style: {
371
+ padding: '10px'
372
+ }
373
+ },
374
+ _react2.default.createElement(_components.Switch, {
375
+ checked: false,
376
+ disabled: true,
377
+ label: 'Notification',
378
+ key: 'notify2',
379
+ theme: 'nexc',
380
+ onChangeCheck: function onChangeCheck(value) {
381
+ console.log(value);
382
+ }
383
+ })
384
+ ),
385
+ _react2.default.createElement(
386
+ 'div',
387
+ {
388
+ style: {
389
+ padding: '10px'
390
+ }
391
+ },
392
+ _react2.default.createElement(_components.Switch, {
393
+ checked: true,
394
+ disabled: true,
395
+ theme: 'nexc',
396
+ onChangeCheck: function onChangeCheck(value) {
397
+ console.log(value);
398
+ }
399
+ })
400
+ ),
401
+ _react2.default.createElement(
402
+ 'div',
403
+ {
404
+ style: {
405
+ padding: '10px'
406
+ }
407
+ },
408
+ _react2.default.createElement(_components.Switch, {
409
+ checked: false,
410
+ disabled: true,
411
+ theme: 'nexc',
412
+ onChangeCheck: function onChangeCheck(value) {
413
+ console.log(value);
414
+ }
415
+ })
171
416
  )
172
417
  )
173
418
  )
package/atoms/tag/tag.js CHANGED
@@ -1,15 +1,15 @@
1
1
  'use strict';
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
- value: true
4
+ value: true
5
5
  });
6
6
  exports.StyledTag = undefined;
7
7
 
8
8
  var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
9
9
 
10
- var _templateObject = _taggedTemplateLiteral(['\n display: inline-block;\n font-size: 12px;\n background: ', ';\n color: ', ';\n line-height: 1;\n padding: ', ';\n border-radius: 20px;\n font-family: \'SFUIText-Regular\';\n position: relative;\n min-width: 40px;\n text-align: center;\n cursor: ', ';\n &:hover {\n color: ', ';\n a{\n path{\n fill: ', ';\n }\n }\n }\n'], ['\n display: inline-block;\n font-size: 12px;\n background: ', ';\n color: ', ';\n line-height: 1;\n padding: ', ';\n border-radius: 20px;\n font-family: \'SFUIText-Regular\';\n position: relative;\n min-width: 40px;\n text-align: center;\n cursor: ', ';\n &:hover {\n color: ', ';\n a{\n path{\n fill: ', ';\n }\n }\n }\n']),
11
- _templateObject2 = _taggedTemplateLiteral(['\n ', ' {\n margin-right: 5px;\n margin-bottom: 5px;\n &:last-child {\n margin-right: 0;\n }\n }\n'], ['\n ', ' {\n margin-right: 5px;\n margin-bottom: 5px;\n &:last-child {\n margin-right: 0;\n }\n }\n']),
12
- _templateObject3 = _taggedTemplateLiteral(['\n cursor: ', ';\n position: absolute;\n right: 4px;\n top: 6px;\n'], ['\n cursor: ', ';\n position: absolute;\n right: 4px;\n top: 6px;\n']);
10
+ var _templateObject = _taggedTemplateLiteral(['\n display: inline-block;\n font-size: 12px;\n background: ', ';\n color: ', ';\n line-height: 1;\n padding: ', ';\n border-radius: 20px;\n font-family: \'SFUIText-Regular\';\n position: relative;\n min-width: 40px;\n text-align: center;\n cursor: ', ';\n &:hover {\n color: ', ';\n a {\n path {\n fill: ', ';\n }\n }\n }\n'], ['\n display: inline-block;\n font-size: 12px;\n background: ', ';\n color: ', ';\n line-height: 1;\n padding: ', ';\n border-radius: 20px;\n font-family: \'SFUIText-Regular\';\n position: relative;\n min-width: 40px;\n text-align: center;\n cursor: ', ';\n &:hover {\n color: ', ';\n a {\n path {\n fill: ', ';\n }\n }\n }\n']),
11
+ _templateObject2 = _taggedTemplateLiteral(['\n ', ' {\n margin-right: 5px;\n margin-bottom: 5px;\n &:last-child {\n margin-right: 0;\n }\n }\n'], ['\n ', ' {\n margin-right: 5px;\n margin-bottom: 5px;\n &:last-child {\n margin-right: 0;\n }\n }\n']),
12
+ _templateObject3 = _taggedTemplateLiteral(['\n cursor: ', ';\n position: absolute;\n right: 4px;\n top: 6px;\n'], ['\n cursor: ', ';\n position: absolute;\n right: 4px;\n top: 6px;\n']);
13
13
 
14
14
  var _react = require('react');
15
15
 
@@ -34,63 +34,63 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
34
34
  function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
35
35
 
36
36
  var StyledTag = _styledComponents2.default.span(_templateObject, function (props) {
37
- return _tokens.colors[props.theme].tag.background;
37
+ return _tokens.colors[props.theme].tag.background;
38
38
  }, function (props) {
39
- return _tokens.colors[props.theme].tag.text;
39
+ return _tokens.colors[props.theme].tag.text;
40
40
  }, function (props) {
41
- return props.onRemove ? '6px 20px 6px 10px' : '6px 10px';
41
+ return props.onRemove ? '6px 20px 6px 10px' : '6px 10px';
42
42
  }, function (props) {
43
- return props.onClick ? 'pointer' : 'inherit';
43
+ return props.onClick ? 'pointer' : 'inherit';
44
44
  }, function (props) {
45
- return _tokens.colors[props.theme].tag.textHover;
45
+ return _tokens.colors[props.theme].tag.textHover;
46
46
  }, function (props) {
47
- return _tokens.colors[props.theme].tag.textHover;
47
+ return _tokens.colors[props.theme].tag.textHover;
48
48
  });
49
49
 
50
50
  var TagGroup = _styledComponents2.default.div(_templateObject2, StyledTag);
51
51
 
52
52
  var StyledAnchor = _styledComponents2.default.a(_templateObject3, function (props) {
53
- return props.onRemove ? 'pointer' : 'inherit';
53
+ return props.onRemove ? 'pointer' : 'inherit';
54
54
  });
55
55
 
56
56
  var Tag = function Tag(props) {
57
- var icon = void 0;
58
-
59
- if (props.onRemove) {
60
- var handleRemove = function handleRemove(evt) {
61
- evt.stopPropagation();
62
- props.onRemove(evt);
63
- };
64
- icon = _react2.default.createElement(
65
- StyledAnchor,
66
- _extends({}, props, { onClick: handleRemove }),
67
- _react2.default.createElement(_icon2.default, { name: 'cross', height: '7', weight: '7' })
68
- );
69
- }
70
-
71
- return _react2.default.createElement(
72
- StyledTag,
73
- _extends({}, props, { onClick: props.onClick }),
74
- ' ',
75
- props.children,
76
- ' ',
77
- icon,
78
- ' '
57
+ var icon = void 0;
58
+
59
+ if (props.onRemove) {
60
+ var handleRemove = function handleRemove(evt) {
61
+ evt.stopPropagation();
62
+ props.onRemove(evt);
63
+ };
64
+ icon = _react2.default.createElement(
65
+ StyledAnchor,
66
+ _extends({}, props, { onClick: handleRemove }),
67
+ _react2.default.createElement(_icon2.default, { name: 'cross', height: '7', weight: '7' })
79
68
  );
69
+ }
70
+
71
+ return _react2.default.createElement(
72
+ StyledTag,
73
+ _extends({}, props, { onClick: props.onClick }),
74
+ ' ',
75
+ props.children,
76
+ ' ',
77
+ icon,
78
+ ' '
79
+ );
80
80
  };
81
81
 
82
82
  Tag.Group = TagGroup;
83
83
 
84
84
  Tag.propTypes = {
85
- theme: _propTypes2.default.oneOf(['light', 'dark']),
86
- /** The function to call when a user clicks the tag */
87
- onClick: _propTypes2.default.func,
88
- /** The function to call when a user clicks the tag's remove icon */
89
- onRemove: _propTypes2.default.func
85
+ theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
86
+ /** The function to call when a user clicks the tag */
87
+ onClick: _propTypes2.default.func,
88
+ /** The function to call when a user clicks the tag's remove icon */
89
+ onRemove: _propTypes2.default.func
90
90
  };
91
91
 
92
92
  Tag.defaultProps = {
93
- theme: 'light'
93
+ theme: 'light'
94
94
  };
95
95
 
96
96
  exports.default = Tag;