@desynova-digital/components 9.0.25 → 9.0.27

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 (7) hide show
  1. package/atoms/button/button.story.js +249 -178
  2. package/atoms/inputText/inputText.js +59 -49
  3. package/components.js +16 -11
  4. package/index.js +3 -2
  5. package/molecules/errorScreen/TableErrorScreen.js +29 -24
  6. package/molecules/errorScreen/TableErrorScreen.jsx +7 -6
  7. package/package.json +2 -2
package/atoms/button/button.story.js CHANGED
@@ -1,48 +1,48 @@
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)('Button').add('light theme', function () {
15
+ (0, _react3.storiesOf)("Button").add("light theme", function () {
16
16
  return _react2.default.createElement(
17
17
  _storyHelpers.Example,
18
- { title: 'Appearances' },
18
+ { title: "Appearances" },
19
19
  _react2.default.createElement(
20
20
  _storyHelpers.Stack,
21
21
  null,
22
22
  _react2.default.createElement(
23
23
  _components.Button,
24
24
  null,
25
- 'Button'
25
+ "Button"
26
26
  ),
27
27
  _react2.default.createElement(
28
28
  _components.Button,
29
- { appearance: 'default' },
30
- 'Default'
29
+ { appearance: "default" },
30
+ "Default"
31
31
  ),
32
32
  _react2.default.createElement(
33
33
  _components.Button,
34
- { appearance: 'primary' },
35
- 'Primary'
34
+ { appearance: "primary" },
35
+ "Primary"
36
36
  ),
37
37
  _react2.default.createElement(
38
38
  _components.Button,
39
- { appearance: 'bordered' },
40
- 'Bordered'
39
+ { appearance: "bordered" },
40
+ "Bordered"
41
41
  ),
42
42
  _react2.default.createElement(
43
43
  _components.Button,
44
- { appearance: 'cta', display: 'rounded' },
45
- 'CTA'
44
+ { appearance: "cta", display: "rounded" },
45
+ "CTA"
46
46
  )
47
47
  ),
48
48
  _react2.default.createElement(
@@ -50,18 +50,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
50
50
  null,
51
51
  _react2.default.createElement(
52
52
  _components.Button,
53
- { display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
54
- 'Button'
53
+ {
54
+ display: "rounded",
55
+ isLoading: true,
56
+ showLoader: true,
57
+ stretchWidth: true
58
+ },
59
+ "Button"
55
60
  ),
56
61
  _react2.default.createElement(
57
62
  _components.Button,
58
- { appearance: 'primary', display: 'rounded' },
59
- 'Primary'
63
+ { appearance: "primary", display: "rounded" },
64
+ "Primary"
60
65
  ),
61
66
  _react2.default.createElement(
62
67
  _components.Button,
63
- { appearance: 'bordered', display: 'rounded' },
64
- 'Bordered'
68
+ { appearance: "bordered", display: "rounded" },
69
+ "Bordered"
65
70
  )
66
71
  ),
67
72
  _react2.default.createElement(
@@ -69,18 +74,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
69
74
  null,
70
75
  _react2.default.createElement(
71
76
  _components.Button,
72
- { display: 'rounded', disabled: true },
73
- 'Disabled'
77
+ { display: "rounded", disabled: true },
78
+ "Disabled"
74
79
  ),
75
80
  _react2.default.createElement(
76
81
  _components.Button,
77
- { appearance: 'primary', disabled: true },
78
- 'Disabled'
82
+ { appearance: "primary", disabled: true },
83
+ "Disabled"
79
84
  ),
80
85
  _react2.default.createElement(
81
86
  _components.Button,
82
- { appearance: 'bordered', disabled: true },
83
- 'Disabled'
87
+ { appearance: "bordered", disabled: true },
88
+ "Disabled"
84
89
  )
85
90
  ),
86
91
  _react2.default.createElement(
@@ -88,18 +93,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
88
93
  null,
89
94
  _react2.default.createElement(
90
95
  _components.Button,
91
- { appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
92
- 'Link'
96
+ {
97
+ appearance: "link",
98
+ display: "rounded",
99
+ href: "https://www.google.co.in/"
100
+ },
101
+ "Link"
93
102
  ),
94
103
  _react2.default.createElement(
95
104
  _components.Button,
96
- { appearance: 'link', href: 'https://www.google.co.in/' },
97
- 'Link'
105
+ { appearance: "link", href: "https://www.google.co.in/" },
106
+ "Link"
98
107
  ),
99
108
  _react2.default.createElement(
100
109
  _components.Button,
101
- { appearance: 'link', href: 'https://www.google.co.in/' },
102
- 'Link'
110
+ { appearance: "link", href: "https://www.google.co.in/" },
111
+ "Link"
103
112
  )
104
113
  ),
105
114
  _react2.default.createElement(
@@ -108,61 +117,76 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
108
117
  _react2.default.createElement(
109
118
  _components.Button,
110
119
  {
111
- display: 'rounded',
112
- icon: 'arrow-right',
120
+ display: "rounded",
121
+ icon: "arrow-right",
113
122
  iconWidth: 20,
114
123
  iconHeight: 14,
115
124
  iconBackground: false
116
125
  },
117
- 'Next'
126
+ "Next"
118
127
  ),
119
128
  _react2.default.createElement(
120
129
  _components.Button,
121
- { display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
122
- 'Submit'
130
+ {
131
+ display: "rounded",
132
+ icon: "arrow-right",
133
+ iconWidth: 20,
134
+ iconHeight: 14
135
+ },
136
+ "Submit"
123
137
  ),
124
- _react2.default.createElement(_components.Button, { display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 }),
138
+ _react2.default.createElement(_components.Button, {
139
+ display: "rounded",
140
+ icon: "arrow-right",
141
+ iconWidth: 20,
142
+ iconHeight: 14
143
+ }),
125
144
  _react2.default.createElement(
126
145
  _components.Button,
127
146
  {
128
- appearance: 'bordered',
129
- display: 'rounded',
130
- iconLocation: 'left',
147
+ appearance: "bordered",
148
+ display: "rounded",
149
+ iconLocation: "left",
131
150
  iconBackground: false,
132
151
  iconHover: true,
133
- icon: 'okta-logo',
152
+ icon: "okta-logo",
134
153
  iconWidth: 30,
135
154
  iconHeight: 30
136
155
  },
137
- 'Sign In with Okta'
156
+ "Sign In with Okta"
138
157
  ),
139
- _react2.default.createElement(_components.Button, { appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
140
158
  _react2.default.createElement(_components.Button, {
141
- appearance: 'cta',
142
- icon: 'search',
159
+ appearance: "cta",
160
+ icon: "search",
161
+ iconWidth: 16,
162
+ iconHeight: 16
163
+ }),
164
+ _react2.default.createElement(_components.Button, {
165
+ appearance: "cta",
166
+ icon: "search",
143
167
  iconWidth: 16,
144
168
  iconHeight: 16,
145
169
  width: 40,
146
170
  height: 40
147
171
  }),
148
172
  _react2.default.createElement(_components.Button, {
149
- key: 'storyboard',
150
- display: 'rounded',
151
- icon: 'storyboard',
173
+ key: "storyboard",
174
+ display: "rounded",
175
+ icon: "storyboard",
152
176
  width: 30,
153
- appearance: 'cta',
177
+ appearance: "cta",
154
178
  height: 30,
155
179
  iconWidth: 13,
156
180
  iconHeight: 13
157
181
  }),
158
182
  _react2.default.createElement(_components.Button, {
159
- key: 'archive',
160
- display: 'rounded',
161
- icon: 'archive',
183
+ key: "archive",
184
+ display: "rounded",
185
+ icon: "archive",
162
186
  width: 30,
163
- appearance: 'cta',
187
+ appearance: "cta",
164
188
  height: 30,
165
- label: 'Archive',
189
+ label: "Archive",
166
190
  disabled: true,
167
191
  iconWidth: 13,
168
192
  iconHeight: 13
@@ -171,37 +195,37 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
171
195
  );
172
196
  });
173
197
 
174
- (0, _react3.storiesOf)('Button').add('dark theme', function () {
198
+ (0, _react3.storiesOf)("Button").add("dark theme", function () {
175
199
  return _react2.default.createElement(
176
200
  _storyHelpers.Example,
177
- { title: 'Appearances Dark', background: 'black' },
201
+ { title: "Appearances Dark", background: "black" },
178
202
  _react2.default.createElement(
179
203
  _storyHelpers.Stack,
180
204
  null,
181
205
  _react2.default.createElement(
182
206
  _components.Button,
183
- { theme: 'dark' },
184
- 'Button'
207
+ { theme: "dark" },
208
+ "Button"
185
209
  ),
186
210
  _react2.default.createElement(
187
211
  _components.Button,
188
- { theme: 'dark', appearance: 'default' },
189
- 'Default'
212
+ { theme: "dark", appearance: "default" },
213
+ "Default"
190
214
  ),
191
215
  _react2.default.createElement(
192
216
  _components.Button,
193
- { theme: 'dark', appearance: 'primary' },
194
- 'Primary'
217
+ { theme: "dark", appearance: "primary" },
218
+ "Primary"
195
219
  ),
196
220
  _react2.default.createElement(
197
221
  _components.Button,
198
- { theme: 'dark', appearance: 'bordered' },
199
- 'Bordered'
222
+ { theme: "dark", appearance: "bordered" },
223
+ "Bordered"
200
224
  ),
201
225
  _react2.default.createElement(
202
226
  _components.Button,
203
- { theme: 'dark', appearance: 'cta', display: 'rounded' },
204
- 'CTA'
227
+ { theme: "dark", appearance: "cta", display: "rounded" },
228
+ "CTA"
205
229
  )
206
230
  ),
207
231
  _react2.default.createElement(
@@ -209,18 +233,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
209
233
  null,
210
234
  _react2.default.createElement(
211
235
  _components.Button,
212
- { theme: 'dark', display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
213
- 'Button'
236
+ {
237
+ theme: "dark",
238
+ display: "rounded",
239
+ isLoading: true,
240
+ showLoader: true,
241
+ stretchWidth: true
242
+ },
243
+ "Button"
214
244
  ),
215
245
  _react2.default.createElement(
216
246
  _components.Button,
217
- { theme: 'dark', appearance: 'primary', display: 'rounded' },
218
- 'Primary'
247
+ { theme: "dark", appearance: "primary", display: "rounded" },
248
+ "Primary"
219
249
  ),
220
250
  _react2.default.createElement(
221
251
  _components.Button,
222
- { theme: 'dark', appearance: 'bordered', display: 'rounded' },
223
- 'Bordered'
252
+ { theme: "dark", appearance: "bordered", display: "rounded" },
253
+ "Bordered"
224
254
  )
225
255
  ),
226
256
  _react2.default.createElement(
@@ -228,18 +258,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
228
258
  null,
229
259
  _react2.default.createElement(
230
260
  _components.Button,
231
- { theme: 'dark', display: 'rounded', disabled: true },
232
- 'Disabled'
261
+ { theme: "dark", display: "rounded", disabled: true },
262
+ "Disabled"
233
263
  ),
234
264
  _react2.default.createElement(
235
265
  _components.Button,
236
- { theme: 'dark', appearance: 'primary', disabled: true },
237
- 'Disabled'
266
+ { theme: "dark", appearance: "primary", disabled: true },
267
+ "Disabled"
238
268
  ),
239
269
  _react2.default.createElement(
240
270
  _components.Button,
241
- { theme: 'dark', appearance: 'bordered', disabled: true },
242
- 'Disabled'
271
+ { theme: "dark", appearance: "bordered", disabled: true },
272
+ "Disabled"
243
273
  )
244
274
  ),
245
275
  _react2.default.createElement(
@@ -247,18 +277,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
247
277
  null,
248
278
  _react2.default.createElement(
249
279
  _components.Button,
250
- { theme: 'dark', appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
251
- 'Link'
280
+ {
281
+ theme: "dark",
282
+ appearance: "link",
283
+ display: "rounded",
284
+ href: "https://www.google.co.in/"
285
+ },
286
+ "Link"
252
287
  ),
253
288
  _react2.default.createElement(
254
289
  _components.Button,
255
- { theme: 'dark', appearance: 'link', href: 'https://www.google.co.in/' },
256
- 'Link'
290
+ { theme: "dark", appearance: "link", href: "https://www.google.co.in/" },
291
+ "Link"
257
292
  ),
258
293
  _react2.default.createElement(
259
294
  _components.Button,
260
- { theme: 'dark', appearance: 'link', href: 'https://www.google.co.in/' },
261
- 'Link'
295
+ { theme: "dark", appearance: "link", href: "https://www.google.co.in/" },
296
+ "Link"
262
297
  )
263
298
  ),
264
299
  _react2.default.createElement(
@@ -267,72 +302,85 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
267
302
  _react2.default.createElement(
268
303
  _components.Button,
269
304
  {
270
- theme: 'dark',
271
- display: 'rounded',
272
- icon: 'arrow-right',
305
+ theme: "dark",
306
+ display: "rounded",
307
+ icon: "arrow-right",
273
308
  iconWidth: 20,
274
309
  iconHeight: 14,
275
- iconBackground: false
310
+ iconBackground: false,
311
+ iconLocation: "right"
276
312
  },
277
- 'Next'
313
+ "Next"
278
314
  ),
279
315
  _react2.default.createElement(
280
316
  _components.Button,
281
- { theme: 'dark', display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
282
- 'Submit'
317
+ {
318
+ theme: "dark",
319
+ display: "rounded",
320
+ icon: "arrow-right",
321
+ iconWidth: 20,
322
+ iconHeight: 14
323
+ },
324
+ "Submit"
283
325
  ),
284
326
  _react2.default.createElement(_components.Button, {
285
- theme: 'dark',
286
- display: 'rounded',
287
- icon: 'arrow-right',
327
+ theme: "dark",
328
+ display: "rounded",
329
+ icon: "arrow-right",
288
330
  iconWidth: 20,
289
331
  iconHeight: 14
290
332
  }),
291
333
  _react2.default.createElement(
292
334
  _components.Button,
293
335
  {
294
- theme: 'dark',
295
- appearance: 'bordered',
296
- display: 'rounded',
297
- iconLocation: 'left',
336
+ theme: "dark",
337
+ appearance: "bordered",
338
+ display: "rounded",
339
+ iconLocation: "left",
298
340
  iconBackground: false,
299
341
  iconHover: true,
300
- icon: 'okta-logo',
342
+ icon: "okta-logo",
301
343
  iconWidth: 30,
302
344
  iconHeight: 30
303
345
  },
304
- 'Sign In with Okta'
346
+ "Sign In with Okta"
305
347
  ),
306
- _react2.default.createElement(_components.Button, { theme: 'dark', appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
307
348
  _react2.default.createElement(_components.Button, {
308
- theme: 'dark',
309
- appearance: 'cta',
310
- icon: 'search',
349
+ theme: "dark",
350
+ appearance: "cta",
351
+ icon: "search",
352
+ iconWidth: 16,
353
+ iconHeight: 16
354
+ }),
355
+ _react2.default.createElement(_components.Button, {
356
+ theme: "dark",
357
+ appearance: "cta",
358
+ icon: "search",
311
359
  iconWidth: 16,
312
360
  iconHeight: 16,
313
361
  width: 40,
314
362
  height: 40
315
363
  }),
316
364
  _react2.default.createElement(_components.Button, {
317
- theme: 'dark',
318
- key: 'storyboard',
319
- display: 'rounded',
320
- icon: 'storyboard',
365
+ theme: "dark",
366
+ key: "storyboard",
367
+ display: "rounded",
368
+ icon: "storyboard",
321
369
  width: 30,
322
- appearance: 'cta',
370
+ appearance: "cta",
323
371
  height: 30,
324
372
  iconWidth: 13,
325
373
  iconHeight: 13
326
374
  }),
327
375
  _react2.default.createElement(_components.Button, {
328
- theme: 'dark',
329
- key: 'archive',
330
- display: 'rounded',
331
- icon: 'archive',
376
+ theme: "dark",
377
+ key: "archive",
378
+ display: "rounded",
379
+ icon: "archive",
332
380
  width: 30,
333
- appearance: 'cta',
381
+ appearance: "cta",
334
382
  height: 30,
335
- label: 'Archive',
383
+ label: "Archive",
336
384
  disabled: true,
337
385
  iconWidth: 13,
338
386
  iconHeight: 13
@@ -341,37 +389,37 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
341
389
  );
342
390
  });
343
391
 
344
- (0, _react3.storiesOf)('Button').add('nexc theme', function () {
392
+ (0, _react3.storiesOf)("Button").add("nexc theme", function () {
345
393
  return _react2.default.createElement(
346
394
  _storyHelpers.Example,
347
- { title: 'Appearances Dark', background: 'black' },
395
+ { title: "Appearances Dark", background: "black" },
348
396
  _react2.default.createElement(
349
397
  _storyHelpers.Stack,
350
398
  null,
351
399
  _react2.default.createElement(
352
400
  _components.Button,
353
- { theme: 'nexc' },
354
- 'Button'
401
+ { theme: "nexc" },
402
+ "Button"
355
403
  ),
356
404
  _react2.default.createElement(
357
405
  _components.Button,
358
- { theme: 'nexc', appearance: 'default' },
359
- 'Default'
406
+ { theme: "nexc", appearance: "default" },
407
+ "Default"
360
408
  ),
361
409
  _react2.default.createElement(
362
410
  _components.Button,
363
- { theme: 'nexc', appearance: 'primary' },
364
- 'Primary'
411
+ { theme: "nexc", appearance: "primary" },
412
+ "Primary"
365
413
  ),
366
414
  _react2.default.createElement(
367
415
  _components.Button,
368
- { theme: 'nexc', appearance: 'bordered' },
369
- 'Bordered'
416
+ { theme: "nexc", appearance: "bordered" },
417
+ "Bordered"
370
418
  ),
371
419
  _react2.default.createElement(
372
420
  _components.Button,
373
- { theme: 'nexc', appearance: 'cta', display: 'rounded' },
374
- 'CTA'
421
+ { theme: "nexc", appearance: "cta", display: "rounded" },
422
+ "CTA"
375
423
  )
376
424
  ),
377
425
  _react2.default.createElement(
@@ -379,18 +427,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
379
427
  null,
380
428
  _react2.default.createElement(
381
429
  _components.Button,
382
- { theme: 'nexc', display: 'rounded', isLoading: true, showLoader: true, stretchWidth: true },
383
- 'Button'
430
+ {
431
+ theme: "nexc",
432
+ display: "rounded",
433
+ isLoading: true,
434
+ showLoader: true,
435
+ stretchWidth: true
436
+ },
437
+ "Button"
384
438
  ),
385
439
  _react2.default.createElement(
386
440
  _components.Button,
387
- { theme: 'nexc', appearance: 'primary', display: 'rounded' },
388
- 'Primary'
441
+ { theme: "nexc", appearance: "primary", display: "rounded" },
442
+ "Primary"
389
443
  ),
390
444
  _react2.default.createElement(
391
445
  _components.Button,
392
- { theme: 'nexc', appearance: 'bordered', display: 'rounded' },
393
- 'Bordered'
446
+ { theme: "nexc", appearance: "bordered", display: "rounded" },
447
+ "Bordered"
394
448
  )
395
449
  ),
396
450
  _react2.default.createElement(
@@ -398,18 +452,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
398
452
  null,
399
453
  _react2.default.createElement(
400
454
  _components.Button,
401
- { theme: 'nexc', display: 'rounded', disabled: true },
402
- 'Disabled'
455
+ { theme: "nexc", display: "rounded", disabled: true },
456
+ "Disabled"
403
457
  ),
404
458
  _react2.default.createElement(
405
459
  _components.Button,
406
- { theme: 'nexc', appearance: 'primary', disabled: true },
407
- 'Disabled'
460
+ { theme: "nexc", appearance: "primary", disabled: true },
461
+ "Disabled"
408
462
  ),
409
463
  _react2.default.createElement(
410
464
  _components.Button,
411
- { theme: 'nexc', appearance: 'bordered', disabled: true },
412
- 'Disabled'
465
+ { theme: "nexc", appearance: "bordered", disabled: true },
466
+ "Disabled"
413
467
  )
414
468
  ),
415
469
  _react2.default.createElement(
@@ -417,18 +471,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
417
471
  null,
418
472
  _react2.default.createElement(
419
473
  _components.Button,
420
- { theme: 'nexc', appearance: 'link', display: 'rounded', href: 'https://www.google.co.in/' },
421
- 'Link'
474
+ {
475
+ theme: "nexc",
476
+ appearance: "link",
477
+ display: "rounded",
478
+ href: "https://www.google.co.in/"
479
+ },
480
+ "Link"
422
481
  ),
423
482
  _react2.default.createElement(
424
483
  _components.Button,
425
- { theme: 'nexc', appearance: 'link', href: 'https://www.google.co.in/' },
426
- 'Link'
484
+ { theme: "nexc", appearance: "link", href: "https://www.google.co.in/" },
485
+ "Link"
427
486
  ),
428
487
  _react2.default.createElement(
429
488
  _components.Button,
430
- { theme: 'nexc', appearance: 'link', href: 'https://www.google.co.in/' },
431
- 'Link'
489
+ { theme: "nexc", appearance: "link", href: "https://www.google.co.in/" },
490
+ "Link"
432
491
  )
433
492
  ),
434
493
  _react2.default.createElement(
@@ -437,72 +496,84 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
437
496
  _react2.default.createElement(
438
497
  _components.Button,
439
498
  {
440
- theme: 'nexc',
441
- display: 'rounded',
442
- icon: 'arrow-right',
499
+ theme: "nexc",
500
+ display: "rounded",
501
+ icon: "arrow-right",
443
502
  iconWidth: 20,
444
503
  iconHeight: 14,
445
504
  iconBackground: false
446
505
  },
447
- 'Next'
506
+ "Next"
448
507
  ),
449
508
  _react2.default.createElement(
450
509
  _components.Button,
451
- { theme: 'nexc', display: 'rounded', icon: 'arrow-right', iconWidth: 20, iconHeight: 14 },
452
- 'Submit'
510
+ {
511
+ theme: "nexc",
512
+ display: "rounded",
513
+ icon: "arrow-right",
514
+ iconWidth: 20,
515
+ iconHeight: 14
516
+ },
517
+ "Submit"
453
518
  ),
454
519
  _react2.default.createElement(_components.Button, {
455
- theme: 'nexc',
456
- display: 'rounded',
457
- icon: 'arrow-right',
520
+ theme: "nexc",
521
+ display: "rounded",
522
+ icon: "arrow-right",
458
523
  iconWidth: 20,
459
524
  iconHeight: 14
460
525
  }),
461
526
  _react2.default.createElement(
462
527
  _components.Button,
463
528
  {
464
- theme: 'nexc',
465
- appearance: 'bordered',
466
- display: 'rounded',
467
- iconLocation: 'left',
529
+ theme: "nexc",
530
+ appearance: "bordered",
531
+ display: "rounded",
532
+ iconLocation: "left",
468
533
  iconBackground: false,
469
534
  iconHover: true,
470
- icon: 'okta-logo',
535
+ icon: "okta-logo",
471
536
  iconWidth: 30,
472
537
  iconHeight: 30
473
538
  },
474
- 'Sign In with Okta'
539
+ "Sign In with Okta"
475
540
  ),
476
- _react2.default.createElement(_components.Button, { theme: 'nexc', appearance: 'cta', icon: 'search', iconWidth: 16, iconHeight: 16 }),
477
541
  _react2.default.createElement(_components.Button, {
478
- theme: 'nexc',
479
- appearance: 'cta',
480
- icon: 'search',
542
+ theme: "nexc",
543
+ appearance: "cta",
544
+ icon: "search",
545
+ iconWidth: 16,
546
+ iconHeight: 16
547
+ }),
548
+ _react2.default.createElement(_components.Button, {
549
+ theme: "nexc",
550
+ appearance: "cta",
551
+ icon: "search",
481
552
  iconWidth: 16,
482
553
  iconHeight: 16,
483
554
  width: 40,
484
555
  height: 40
485
556
  }),
486
557
  _react2.default.createElement(_components.Button, {
487
- theme: 'nexc',
488
- key: 'storyboard',
489
- display: 'rounded',
490
- icon: 'storyboard',
558
+ theme: "nexc",
559
+ key: "storyboard",
560
+ display: "rounded",
561
+ icon: "storyboard",
491
562
  width: 30,
492
- appearance: 'cta',
563
+ appearance: "cta",
493
564
  height: 30,
494
565
  iconWidth: 13,
495
566
  iconHeight: 13
496
567
  }),
497
568
  _react2.default.createElement(_components.Button, {
498
- theme: 'nexc',
499
- key: 'archive',
500
- display: 'rounded',
501
- icon: 'archive',
569
+ theme: "nexc",
570
+ key: "archive",
571
+ display: "rounded",
572
+ icon: "archive",
502
573
  width: 30,
503
- appearance: 'cta',
574
+ appearance: "cta",
504
575
  height: 30,
505
- label: 'Archive',
576
+ label: "Archive",
506
577
  disabled: true,
507
578
  iconWidth: 13,
508
579
  iconHeight: 13
package/atoms/inputText/inputText.js CHANGED
@@ -1,4 +1,4 @@
1
- 'use strict';
1
+ "use strict";
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
@@ -8,29 +8,29 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
8
8
 
9
9
  var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
10
10
 
11
- var _templateObject = _taggedTemplateLiteral(['\n background: transparent;\n font-family: \'SFUIText-Medium\';\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n'], ['\n background: transparent;\n font-family: \'SFUIText-Medium\';\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n']),
12
- _templateObject2 = _taggedTemplateLiteral(['\n color: ', ';\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n'], ['\n color: ', ';\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n']),
13
- _templateObject3 = _taggedTemplateLiteral(['\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n'], ['\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n']),
14
- _templateObject4 = _taggedTemplateLiteral(['\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n'], ['\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n']),
15
- _templateObject5 = _taggedTemplateLiteral(['\n width: 100%;\n box-sizing: border-box;\n\n background: ', ';\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ', ';\n\n font-family: \'SFUIText-Medium\';\n color: ', ';\n\n cursor: ', ';\n\n font-size: 14px;\n padding: ', ';\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ', ';\n }\n &:disabled:hover {\n border-color: ', ';\n }\n &:disabled {\n border-color: ', ';\n color: ', ';\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ', ';\n\n opacity: ', ';\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ', ';\n\n opacity: ', ';\n }\n'], ['\n width: 100%;\n box-sizing: border-box;\n\n background: ', ';\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ', ';\n\n font-family: \'SFUIText-Medium\';\n color: ', ';\n\n cursor: ', ';\n\n font-size: 14px;\n padding: ', ';\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ', ';\n }\n &:disabled:hover {\n border-color: ', ';\n }\n &:disabled {\n border-color: ', ';\n color: ', ';\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ', ';\n\n opacity: ', ';\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ', ';\n\n opacity: ', ';\n }\n']);
11
+ var _templateObject = _taggedTemplateLiteral(["\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n"], ["\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n"]),
12
+ _templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"], ["\n color: ", ";\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"]),
13
+ _templateObject3 = _taggedTemplateLiteral(["\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n"], ["\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n"]),
14
+ _templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n"], ["\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n"]),
15
+ _templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ", ";\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n\n cursor: ", ";\n\n font-size: 14px;\n padding: ", ";\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ", ";\n }\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n\n opacity: ", ";\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n"], ["\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ", ";\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n\n cursor: ", ";\n\n font-size: 14px;\n padding: ", ";\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ", ";\n }\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n\n opacity: ", ";\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n"]);
16
16
 
17
- var _react = require('react');
17
+ var _react = require("react");
18
18
 
19
19
  var _react2 = _interopRequireDefault(_react);
20
20
 
21
- var _styledComponents = require('styled-components');
21
+ var _styledComponents = require("styled-components");
22
22
 
23
23
  var _styledComponents2 = _interopRequireDefault(_styledComponents);
24
24
 
25
- var _icon = require('../icon');
25
+ var _icon = require("../icon");
26
26
 
27
27
  var _icon2 = _interopRequireDefault(_icon);
28
28
 
29
- var _propTypes = require('prop-types');
29
+ var _propTypes = require("prop-types");
30
30
 
31
31
  var _propTypes2 = _interopRequireDefault(_propTypes);
32
32
 
33
- var _tokens = require('@desynova-digital/tokens');
33
+ var _tokens = require("@desynova-digital/tokens");
34
34
 
35
35
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
36
36
 
@@ -54,7 +54,8 @@ var InputText = function InputText(_ref) {
54
54
  defaultValue = _ref.defaultValue,
55
55
  type = _ref.type,
56
56
  showLengthCount = _ref.showLengthCount,
57
- props = _objectWithoutProperties(_ref, ['theme', 'maxLength', 'defaultValue', 'type', 'showLengthCount']);
57
+ disablePaste = _ref.disablePaste,
58
+ props = _objectWithoutProperties(_ref, ["theme", "maxLength", "defaultValue", "type", "showLengthCount", "disablePaste"]);
58
59
 
59
60
  var _useState = (0, _react.useState)(true),
60
61
  _useState2 = _slicedToArray(_useState, 2),
@@ -63,7 +64,7 @@ var InputText = function InputText(_ref) {
63
64
 
64
65
  if (props.masked) {
65
66
  var length = defaultValue ? defaultValue.length : 8;
66
- var maskedValue = new Array(length).join('•');
67
+ var maskedValue = new Array(length).join("•");
67
68
  return _react2.default.createElement(InputText.Element, _extends({
68
69
  theme: theme,
69
70
  value: props.value,
@@ -85,74 +86,81 @@ var InputText = function InputText(_ref) {
85
86
  var passwordButton = props.passwordButton;
86
87
  }
87
88
 
89
+ var handleCutCopyPaste = function handleCutCopyPaste(e) {
90
+ disablePaste && e.preventDefault();
91
+ };
92
+
88
93
  return _react2.default.createElement(
89
94
  InputTextDiv,
90
95
  { theme: theme },
91
96
  _react2.default.createElement(InputText.Element, _extends({
92
97
  theme: theme,
93
- type: hidden ? type : 'text',
98
+ type: hidden ? type : "text",
94
99
  value: props.value,
95
100
  defaultValue: defaultValue
96
101
  }, props, {
97
- maxLength: maxLength || '',
98
- showLengthCount: showLengthCount || false
102
+ maxLength: maxLength || "",
103
+ showLengthCount: showLengthCount || false,
104
+ onCopy: handleCutCopyPaste,
105
+ onCut: handleCutCopyPaste,
106
+ onPaste: handleCutCopyPaste
99
107
  })),
100
108
  props.label ? _react2.default.createElement(
101
- 'label',
109
+ "label",
102
110
  {
103
111
  htmlFor: props.id,
104
- className: props.value && props.value.length > 0 ? 'floaton' : ''
112
+ className: props.value && props.value.length > 0 ? "floaton" : ""
105
113
  },
106
- '' + props.label + (props.isRequired ? '*' : '')
107
- ) : '',
114
+ "" + props.label + (props.isRequired ? "*" : "")
115
+ ) : "",
108
116
  errorMesssage ? _react2.default.createElement(
109
117
  InputError,
110
118
  { value: props.value, theme: theme, error: props.error },
111
119
  errorMesssage
112
- ) : '',
120
+ ) : "",
113
121
  maxLength && showLengthCount && _react2.default.createElement(
114
122
  CountWrappper,
115
123
  null,
116
124
  props.value.length,
117
- '/',
125
+ "/",
118
126
  maxLength
119
127
  ),
120
- type == 'password' || passwordButton ? _react2.default.createElement(
128
+ type == "password" || passwordButton ? _react2.default.createElement(
121
129
  PasswordToggleButton,
122
130
  {
123
- type: 'button',
124
- className: 'password-toggle',
131
+ type: "button",
132
+ className: "password-toggle",
125
133
  onClick: function onClick() {
126
134
  return togglePassword(!hidden);
127
135
  },
128
136
  hiddenEye: errorMesssage ? true : false
129
137
  },
130
- hidden ? _react2.default.createElement(_icon2.default, { name: 'show-password', width: 18, height: 15, color: '#999' }) : _react2.default.createElement(_icon2.default, { name: 'hide-password', width: 18, height: 15, color: '#999' })
131
- ) : ''
138
+ hidden ? _react2.default.createElement(_icon2.default, { name: "show-password", width: 18, height: 15, color: "#999" }) : _react2.default.createElement(_icon2.default, { name: "hide-password", width: 18, height: 15, color: "#999" })
139
+ ) : ""
132
140
  );
133
141
  };
134
142
  var returnPadding = function returnPadding(props) {
135
143
  var digitCount = props.maxLength.toString().length;
136
144
 
137
- if (props.type === 'password') {
138
- return '7px 23px 2px 0px';
145
+ if (props.type === "password") {
146
+ return "7px 23px 2px 0px";
139
147
  }
140
148
 
141
149
  switch (digitCount) {
142
150
  case 0:
143
- return '7px 0px 2px 0px';
151
+ return "7px 0px 2px 0px";
144
152
  case 1:
145
- return '7px 40px 2px 0px';
153
+ return "7px 40px 2px 0px";
146
154
  case 2:
147
- return '7px 60px 2px 0px';
155
+ return "7px 60px 2px 0px";
148
156
  case 3:
149
- return '7px 75px 2px 0px';
157
+ return "7px 75px 2px 0px";
150
158
  case 4:
151
- return '7px 90px 2px 0px';
159
+ return "7px 90px 2px 0px";
152
160
  case 5:
153
- return '7px 110px 2px 0px';
161
+ return "7px 110px 2px 0px";
154
162
  default:
155
- return '7px 0px 2px 0px';
163
+ return "7px 0px 2px 0px";
156
164
  }
157
165
  };
158
166
 
@@ -167,9 +175,9 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
167
175
  }, function (props) {
168
176
  return _tokens.colors[props.theme].inputCommon.color;
169
177
  }, function (props) {
170
- return props.readOnly ? 'not-allowed' : 'text';
178
+ return props.readOnly ? "not-allowed" : "text";
171
179
  }, function (props) {
172
- return returnPadding(props || '');
180
+ return returnPadding(props || "");
173
181
  }, function (props) {
174
182
  if (props.error) {
175
183
  return _tokens.colors[props.theme].inputError.borderHover;
@@ -183,19 +191,19 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
183
191
  }, function (props) {
184
192
  return _tokens.colors[props.theme].inputCommon.colorDisabled;
185
193
  }, function (props) {
186
- return props.label ? 'transparent' : function (props) {
187
- return props.theme === 'light' ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
194
+ return props.label ? "transparent" : function (props) {
195
+ return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
188
196
  };
189
197
  }, function (props) {
190
- return props.label ? '0' : '1';
198
+ return props.label ? "0" : "1";
191
199
  }, function (props) {
192
200
  return props.placeholder ? function (props) {
193
- return props.theme === 'light' ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
201
+ return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
194
202
  } : function (props) {
195
- return props.theme === 'light' ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
203
+ return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
196
204
  };
197
205
  }, function (props) {
198
- return props.placeholder ? '1' : '1';
206
+ return props.placeholder ? "1" : "1";
199
207
  });
200
208
 
201
209
  InputText.propTypes = {
@@ -221,7 +229,8 @@ InputText.propTypes = {
221
229
  /** The (HTML) maxLength for the input. */
222
230
  maxLength: _propTypes2.default.number,
223
231
  showLengthCount: _propTypes2.default.bool,
224
- theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc'])
232
+ theme: _propTypes2.default.oneOf(["light", "dark", "nexc"]),
233
+ disablePaste: _propTypes2.default.bool
225
234
 
226
235
  /** deprecate error string prop */
227
236
  // _error: props => deprecate(props, { name: 'error', replacement: 'hasError' })
@@ -232,11 +241,12 @@ InputText.defaultProps = {
232
241
  code: false,
233
242
  error: null,
234
243
  onChange: null,
235
- type: 'text',
244
+ type: "text",
236
245
  // maxLength: 50,
237
- theme: 'light',
238
- value: '',
239
- showLengthCount: false
246
+ theme: "light",
247
+ value: "",
248
+ showLengthCount: false,
249
+ disablePaste: false
240
250
  };
241
251
 
242
252
  exports.default = InputText;
package/components.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.DraftInputText = exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
6
+ exports.TableErrorScreen = exports.DraftInputText = exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
7
7
 
8
8
  require('./_helpers/globals');
9
9
 
@@ -195,6 +195,10 @@ var _CollabErrorScreen = require('./molecules/errorScreen/CollabErrorScreen');
195
195
 
196
196
  var _CollabErrorScreen2 = _interopRequireDefault(_CollabErrorScreen);
197
197
 
198
+ var _TableErrorScreen = require('./molecules/errorScreen/TableErrorScreen');
199
+
200
+ var _TableErrorScreen2 = _interopRequireDefault(_TableErrorScreen);
201
+
198
202
  var _CollabShimmerCard = require('./atoms/loader/ShimmerComponent/CollabShimmerCard');
199
203
 
200
204
  var _CollabShimmerCard2 = _interopRequireDefault(_CollabShimmerCard);
@@ -229,7 +233,15 @@ var _timeCodeInput2 = _interopRequireDefault(_timeCodeInput);
229
233
 
230
234
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
231
235
 
232
- /* atoms */
236
+ /* Molecules */
237
+ /*
238
+ This file is an aggregator, to make it easier for folks to import components that they need
239
+
240
+ example: `import { Input } from 'components'`
241
+ instead of `import Input from 'components/input'`
242
+ */
243
+
244
+ /* eslint-disable import/first */
233
245
  exports.Avatar = _avatar2.default;
234
246
  exports.Button = _button2.default;
235
247
  exports.Badge = _badge2.default;
@@ -286,13 +298,6 @@ exports.GraphTitleShimmer = _GraphTitleShimmer2.default;
286
298
  exports.Shimmer = _Shimmer2.default;
287
299
  exports.TimeCodeInput = _timeCodeInput2.default;
288
300
  exports.DraftInputText = _draftInputText2.default;
301
+ exports.TableErrorScreen = _TableErrorScreen2.default;
289
302
 
290
- /* Molecules */
291
- /*
292
- This file is an aggregator, to make it easier for folks to import components that they need
293
-
294
- example: `import { Input } from 'components'`
295
- instead of `import Input from 'components/input'`
296
- */
297
-
298
- /* eslint-disable import/first */
303
+ /* atoms */
package/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.DraftInputText = exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
6
+ exports.TableErrorScreen = exports.DraftInputText = exports.TimeCodeInput = exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.IconsJson = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
7
7
 
8
8
  var _components = require('./components');
9
9
 
@@ -62,4 +62,5 @@ exports.GraphsComponentShimmer = _components.GraphsComponentShimmer;
62
62
  exports.GraphTitleShimmer = _components.GraphTitleShimmer;
63
63
  exports.Shimmer = _components.Shimmer;
64
64
  exports.TimeCodeInput = _components.TimeCodeInput;
65
- exports.DraftInputText = _components.DraftInputText;
65
+ exports.DraftInputText = _components.DraftInputText;
66
+ exports.TableErrorScreen = _components.TableErrorScreen;
package/molecules/errorScreen/TableErrorScreen.js CHANGED
@@ -1,30 +1,33 @@
1
- 'use strict';
1
+ "use strict";
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var _react = require('react');
7
+ var _react = require("react");
8
8
 
9
9
  var _react2 = _interopRequireDefault(_react);
10
10
 
11
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
12
 
13
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
13
+ var TableErrorScreen = function TableErrorScreen(_ref) {
14
+ var _ref$h = _ref.h1,
15
+ h1 = _ref$h === undefined ? "No Results Found" : _ref$h,
16
+ _ref$h2 = _ref.h2,
17
+ h2 = _ref$h2 === undefined ? "Try a different filter set" : _ref$h2;
14
18
 
15
- var TableErrorScreen = function TableErrorScreen() {
16
19
  return _react2.default.createElement(
17
- 'div',
20
+ "div",
18
21
  {
19
- style: _defineProperty({
22
+ style: {
20
23
  height: '279px',
21
24
  width: '100%',
22
25
  display: 'flex',
23
- alignItems: 'center',
24
- justifyContent: 'center'
25
- }, 'alignItems', 'center') },
26
+ justifyContent: 'center',
27
+ alignItems: 'center'
28
+ } },
26
29
  _react2.default.createElement(
27
- 'div',
30
+ "div",
28
31
  {
29
32
  style: {
30
33
  width: '520px',
@@ -35,7 +38,7 @@ var TableErrorScreen = function TableErrorScreen() {
35
38
  gap: '10px'
36
39
  } },
37
40
  _react2.default.createElement(
38
- 'div',
41
+ "div",
39
42
  {
40
43
  style: {
41
44
  height: '120px',
@@ -48,7 +51,7 @@ var TableErrorScreen = function TableErrorScreen() {
48
51
  flexDirection: 'column'
49
52
  } },
50
53
  _react2.default.createElement(
51
- 'div',
54
+ "div",
52
55
  {
53
56
  style: {
54
57
  display: 'flex',
@@ -57,15 +60,15 @@ var TableErrorScreen = function TableErrorScreen() {
57
60
  gap: '8px',
58
61
  flexDirection: 'column'
59
62
  } },
60
- _react2.default.createElement('div', { style: { height: '10px', width: '60px', background: '#182738', borderRadius: '10px' } }),
61
- _react2.default.createElement('div', { style: { height: '10px', width: '40px', background: '#182738', borderRadius: '10px' } }),
62
- _react2.default.createElement('div', { style: { height: '10px', width: '50px', background: '#182738', borderRadius: '10px' } }),
63
- _react2.default.createElement('div', { style: { height: '10px', width: '30px', background: '#182738', borderRadius: '10px' } }),
64
- _react2.default.createElement('div', { style: { height: '10px', width: '50px', background: '#182738', borderRadius: '10px' } })
63
+ _react2.default.createElement("div", { style: { height: '10px', width: '60px', background: '#182738', borderRadius: '10px' } }),
64
+ _react2.default.createElement("div", { style: { height: '10px', width: '40px', background: '#182738', borderRadius: '10px' } }),
65
+ _react2.default.createElement("div", { style: { height: '10px', width: '50px', background: '#182738', borderRadius: '10px' } }),
66
+ _react2.default.createElement("div", { style: { height: '10px', width: '30px', background: '#182738', borderRadius: '10px' } }),
67
+ _react2.default.createElement("div", { style: { height: '10px', width: '50px', background: '#182738', borderRadius: '10px' } })
65
68
  )
66
69
  ),
67
70
  _react2.default.createElement(
68
- 'div',
71
+ "div",
69
72
  {
70
73
  style: {
71
74
  height: '120px',
@@ -76,28 +79,30 @@ var TableErrorScreen = function TableErrorScreen() {
76
79
  flexDirection: 'column'
77
80
  } },
78
81
  _react2.default.createElement(
79
- 'p',
82
+ "p",
80
83
  {
81
84
  style: {
82
85
  color: 'var(--color-text-color-pure-white, #FFF)',
83
86
  fontSize: '24px',
84
87
  fontWeight: '500',
85
88
  lineHeight: '36px',
86
- fontStyle: 'normal'
89
+ fontStyle: 'normal',
90
+ fontFamily: 'SFUIText-Medium'
87
91
  } },
88
- 'No Results Found'
92
+ h1
89
93
  ),
90
94
  _react2.default.createElement(
91
- 'p',
95
+ "p",
92
96
  {
93
97
  style: {
94
98
  color: 'var(--color-text-color-pure-white, #FFF)',
95
99
  fontSize: '14px',
96
100
  fontStyle: 'normal',
97
101
  fontWeight: '300',
98
- lineHeight: '21px'
102
+ lineHeight: '21px',
103
+ fontFamily: 'SFUIText-Medium'
99
104
  } },
100
- 'Try a different filter set'
105
+ h2
101
106
  )
102
107
  )
103
108
  )
package/molecules/errorScreen/TableErrorScreen.jsx CHANGED
@@ -1,13 +1,12 @@
1
1
  import React from 'react';
2
2
 
3
- const TableErrorScreen = () => {
3
+ const TableErrorScreen = ({ h1 = "No Results Found", h2 = "Try a different filter set" }) => {
4
4
  return (
5
5
  <div
6
6
  style={{
7
7
  height: '279px',
8
8
  width: '100%',
9
9
  display: 'flex',
10
- alignItems: 'center',
11
10
  justifyContent: 'center',
12
11
  alignItems: 'center'
13
12
  }}>
@@ -61,9 +60,10 @@ const TableErrorScreen = () => {
61
60
  fontSize: '24px',
62
61
  fontWeight: '500',
63
62
  lineHeight: '36px',
64
- fontStyle: 'normal'
63
+ fontStyle: 'normal',
64
+ fontFamily: 'SFUIText-Medium'
65
65
  }}>
66
- No Results Found
66
+ {h1}
67
67
  </p>
68
68
  <p
69
69
  style={{
@@ -71,9 +71,10 @@ const TableErrorScreen = () => {
71
71
  fontSize: '14px',
72
72
  fontStyle: 'normal',
73
73
  fontWeight: '300',
74
- lineHeight: '21px'
74
+ lineHeight: '21px',
75
+ fontFamily: 'SFUIText-Medium'
75
76
  }}>
76
- Try a different filter set
77
+ {h2}
77
78
  </p>
78
79
  </div>
79
80
  </div>
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.0.25",
3
+ "version": "9.0.27",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.0.25",
10
+ "@desynova-digital/tokens": "9.0.27",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },