@desynova-digital/components 8.19.63 → 9.0.1

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 +108 -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 +368 -316
  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/draftInputText/draftInputText.story.js ADDED
@@ -0,0 +1,251 @@
1
+ 'use strict';
2
+
3
+ var _react = require('react');
4
+
5
+ var _react2 = _interopRequireDefault(_react);
6
+
7
+ var _react3 = require('@storybook/react');
8
+
9
+ var _storyHelpers = require('../../_helpers/story-helpers');
10
+
11
+ var _components = require('../../components');
12
+
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+
15
+ (0, _react3.storiesOf)('DraftInputText').add('light theme', function () {
16
+ return _react2.default.createElement(
17
+ _storyHelpers.Example,
18
+ { title: 'Appearances' },
19
+ _react2.default.createElement(
20
+ _storyHelpers.Stack,
21
+ null,
22
+ _react2.default.createElement(_components.DraftInputText, {
23
+ inputWidth: 300,
24
+ fieldType: 'textArea',
25
+ showLengthCount: true,
26
+ type: 'text',
27
+ label: 'First Name',
28
+ onKeyPress: function onKeyPress(e) {
29
+ return undefined.value = e;
30
+ },
31
+ onChange: function onChange(e) {
32
+ return console.log(e.html, e.size);
33
+ },
34
+ placeholder: 'Enter Name max 10',
35
+ maxLength: 1000,
36
+ value: 'asd',
37
+ required: true
38
+ }),
39
+ _react2.default.createElement(_components.DraftInputText, {
40
+ type: 'password',
41
+ label: 'Middle Name',
42
+ minLength: 3,
43
+ maxLength: 6,
44
+ placeholder: 'Show as password',
45
+ required: true
46
+ }),
47
+ _react2.default.createElement(_components.DraftInputText, { type: 'text', value: 'hello', label: 'Label and default value', required: true })
48
+ ),
49
+ _react2.default.createElement(
50
+ _storyHelpers.Stack,
51
+ null,
52
+ _react2.default.createElement(_components.DraftInputText, { type: 'number', placeholder: 'number field & no Label', required: true, maxLength: 10 }),
53
+ _react2.default.createElement(_components.DraftInputText, {
54
+ type: 'number',
55
+ id: 'input-text-1',
56
+ label: 'Label \'For\'-\'id\' prop',
57
+ placeholder: 'No Label & Number Field',
58
+ required: true,
59
+ maxLength: 10
60
+ }),
61
+ _react2.default.createElement(_components.DraftInputText, {
62
+ type: 'text',
63
+ value: 'No Label and default value',
64
+ onChange: function onChange(e) {
65
+ console.log('some Handler code');
66
+ },
67
+ placeholder: 'Placeholder text',
68
+ required: true
69
+ })
70
+ ),
71
+ _react2.default.createElement(
72
+ _storyHelpers.Stack,
73
+ null,
74
+ _react2.default.createElement(_components.DraftInputText, {
75
+ type: 'number',
76
+ label: 'number & max 5',
77
+ placeholder: 'max length 5',
78
+ required: true,
79
+ minLength: 3,
80
+ maxLength: 5
81
+ }),
82
+ _react2.default.createElement(_components.DraftInputText, { type: 'text', error: 'Invalid text', placeholder: 'Display error', required: true }),
83
+ _react2.default.createElement(_components.DraftInputText, {
84
+ readOnly: true,
85
+ type: 'text',
86
+ value: 'hello',
87
+ onChange: function onChange(e) {
88
+ console.log('some Handler code');
89
+ },
90
+ placeholder: 'Placeholder text',
91
+ required: true
92
+ })
93
+ ),
94
+ _react2.default.createElement(
95
+ _storyHelpers.Stack,
96
+ null,
97
+ _react2.default.createElement(_components.DraftInputText, {
98
+ type: 'password',
99
+ value: 'this@is$passw0rd',
100
+ placeholder: 'This is password toggle',
101
+ passwordButton: true
102
+ }),
103
+ _react2.default.createElement(_components.DraftInputText, {
104
+ label: 'Label \'For\'-\'id\' prop',
105
+ type: 'password',
106
+ value: 'this@is$passw0rd',
107
+ placeholder: 'This is password toggle',
108
+ passwordButton: true
109
+ }),
110
+ _react2.default.createElement(_components.DraftInputText, {
111
+ label: 'Label \'For\'-\'id\' ',
112
+ error: ' this is error',
113
+ type: 'password',
114
+ value: 'this@is$passw0rd',
115
+ placeholder: 'This is password toggle',
116
+ passwordButton: true
117
+ })
118
+ )
119
+ );
120
+ });
121
+
122
+ (0, _react3.storiesOf)('DraftInputText').add('dark theme', function () {
123
+ return _react2.default.createElement(
124
+ _storyHelpers.Example,
125
+ { title: 'Appearances', background: 'dark' },
126
+ _react2.default.createElement(
127
+ _storyHelpers.Stack,
128
+ null,
129
+ _react2.default.createElement(_components.DraftInputText, {
130
+ inputWidth: 300,
131
+ theme: 'dark',
132
+ type: 'text',
133
+ label: 'First Name',
134
+ showLengthCount: true,
135
+ value: 'Lorem ',
136
+ maxLength: 100,
137
+ onChange: function onChange(e) {
138
+ return console.log(e.html, e.size);
139
+ },
140
+ placeholder: 'Enter Name max 10',
141
+ required: true
142
+ }),
143
+ _react2.default.createElement(_components.DraftInputText, {
144
+ theme: 'dark',
145
+ type: 'password',
146
+ label: 'Middle Name',
147
+ minLength: 3,
148
+ maxLength: 6,
149
+ placeholder: 'Show as password',
150
+ required: true
151
+ }),
152
+ _react2.default.createElement(_components.DraftInputText, {
153
+ theme: 'dark',
154
+ type: 'text',
155
+ value: 'hello there i am using',
156
+ label: 'Label and default value',
157
+ required: true
158
+ })
159
+ ),
160
+ _react2.default.createElement(
161
+ _storyHelpers.Stack,
162
+ null,
163
+ _react2.default.createElement(_components.DraftInputText, {
164
+ theme: 'dark',
165
+ type: 'number',
166
+ placeholder: 'number field & no Label',
167
+ required: true,
168
+ maxLength: 10
169
+ }),
170
+ _react2.default.createElement(_components.DraftInputText, {
171
+ theme: 'dark',
172
+ type: 'number',
173
+ id: 'input-text-1',
174
+ label: 'Label \'For\'-\'id\' prop',
175
+ placeholder: 'No Label & Number Field',
176
+ required: true,
177
+ maxLength: 10
178
+ }),
179
+ _react2.default.createElement(_components.DraftInputText, {
180
+ theme: 'dark',
181
+ capitalizeFirstLetter: true,
182
+ type: 'text',
183
+ value: 'no label and default value',
184
+ onChange: function onChange(e) {
185
+ console.log('some Handler code');
186
+ },
187
+ placeholder: 'Placeholder text',
188
+ required: true
189
+ })
190
+ ),
191
+ _react2.default.createElement(
192
+ _storyHelpers.Stack,
193
+ null,
194
+ _react2.default.createElement(_components.DraftInputText, {
195
+ theme: 'dark',
196
+ type: 'number',
197
+ label: 'number & max 5',
198
+ placeholder: 'max length 5',
199
+ required: true,
200
+ minLength: 3,
201
+ maxLength: 5
202
+ }),
203
+ _react2.default.createElement(_components.DraftInputText, {
204
+ theme: 'dark',
205
+ type: 'text',
206
+ error: 'Invalid text',
207
+ placeholder: 'Display error',
208
+ required: true
209
+ }),
210
+ _react2.default.createElement(_components.DraftInputText, {
211
+ theme: 'dark',
212
+ readOnly: true,
213
+ type: 'text',
214
+ value: 'hello',
215
+ onChange: function onChange(e) {
216
+ console.log('some Handler code');
217
+ },
218
+ placeholder: 'Placeholder text',
219
+ required: true
220
+ })
221
+ ),
222
+ _react2.default.createElement(
223
+ _storyHelpers.Stack,
224
+ null,
225
+ _react2.default.createElement(_components.DraftInputText, {
226
+ theme: 'dark',
227
+ type: 'password',
228
+ value: 'this@is$passw0rd',
229
+ placeholder: 'This is password toggle',
230
+ passwordButton: true
231
+ }),
232
+ _react2.default.createElement(_components.DraftInputText, {
233
+ theme: 'dark',
234
+ label: 'Label \'For\'-\'id\' prop',
235
+ type: 'password',
236
+ value: 'this@is$passw0rd',
237
+ placeholder: 'This is password toggle',
238
+ passwordButton: true
239
+ }),
240
+ _react2.default.createElement(_components.DraftInputText, {
241
+ theme: 'dark',
242
+ label: 'Label \'For\'-\'id\' ',
243
+ error: ' this is error',
244
+ type: 'password',
245
+ value: 'this@is$passw0rd',
246
+ placeholder: 'This is password toggle',
247
+ passwordButton: true
248
+ })
249
+ )
250
+ );
251
+ });
package/atoms/draftInputText/index.js ADDED
@@ -0,0 +1,13 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var _draftInputText = require('./draftInputText');
8
+
9
+ var _draftInputText2 = _interopRequireDefault(_draftInputText);
10
+
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
+
13
+ exports.default = _draftInputText2.default;
package/atoms/dropdown/dropdown.story.js CHANGED
@@ -31,10 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
31
31
  ),
32
32
  _react2.default.createElement(
33
33
  _components.Dropdown,
34
- { show: true,
34
+ {
35
+ show: true,
35
36
  onClick: function onClick(e) {
36
- console.log("clickCallback", e);
37
- } },
37
+ console.log('clickCallback', e);
38
+ }
39
+ },
38
40
  _react2.default.createElement(
39
41
  'div',
40
42
  null,
@@ -57,27 +59,152 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
57
59
  ),
58
60
  _react2.default.createElement(
59
61
  'div',
60
- { style: { width: '150px', 'position': 'relative' } },
62
+ { style: { width: '150px', position: 'relative' } },
61
63
  _react2.default.createElement(
62
64
  'span',
63
- { style: {
64
- 'display': 'flex',
65
+ {
66
+ style: {
67
+ display: 'flex',
68
+ 'align-items': 'center',
69
+ width: '100%'
70
+ }
71
+ },
72
+ 'Show Absolute'
73
+ ),
74
+ _react2.default.createElement(
75
+ _components.Dropdown,
76
+ _extends({
77
+ show: true
78
+ }, { style: { position: 'absolute', top: '0px', left: '0px', width: '100%' } }, {
79
+ onClick: function onClick(e) {
80
+ console.log('clickCallback', e);
81
+ }
82
+ }),
83
+ _react2.default.createElement(
84
+ 'div',
85
+ { style: { background: 'blue' } },
86
+ _react2.default.createElement(
87
+ 'div',
88
+ null,
89
+ _react2.default.createElement(
90
+ 'p',
91
+ null,
92
+ 'Hi,'
93
+ ),
94
+ _react2.default.createElement(
95
+ 'p',
96
+ null,
97
+ 'I am \'shown\' this '
98
+ )
99
+ )
100
+ )
101
+ )
102
+ ),
103
+ _react2.default.createElement(
104
+ 'div',
105
+ { style: { width: '150px' } },
106
+ _react2.default.createElement(
107
+ 'span',
108
+ null,
109
+ 'Hidden'
110
+ ),
111
+ _react2.default.createElement(
112
+ _components.Dropdown,
113
+ {
114
+ onClick: function onClick(e) {
115
+ console.log('clickCallback', e);
116
+ }
117
+ },
118
+ _react2.default.createElement(
119
+ 'div',
120
+ null,
121
+ _react2.default.createElement(
122
+ 'div',
123
+ null,
124
+ _react2.default.createElement(
125
+ 'p',
126
+ null,
127
+ 'Hi,'
128
+ ),
129
+ _react2.default.createElement(
130
+ 'p',
131
+ null,
132
+ 'I am \'hide show\''
133
+ )
134
+ )
135
+ )
136
+ )
137
+ )
138
+ )
139
+ );
140
+ });
141
+
142
+ (0, _react3.storiesOf)('Dropdown').add('dark theme', function () {
143
+ return _react2.default.createElement(
144
+ _storyHelpers.Example,
145
+ { title: 'Appearances dark', background: 'dark' },
146
+ _react2.default.createElement(
147
+ _storyHelpers.Stack,
148
+ null,
149
+ _react2.default.createElement(
150
+ 'div',
151
+ { style: { width: '150px' } },
152
+ _react2.default.createElement(
153
+ 'span',
154
+ null,
155
+ 'Showed'
156
+ ),
157
+ _react2.default.createElement(
158
+ _components.Dropdown,
159
+ {
160
+ show: true,
161
+ onClick: function onClick(e) {
162
+ console.log('clickCallback', e);
163
+ }
164
+ },
165
+ _react2.default.createElement(
166
+ 'div',
167
+ null,
168
+ _react2.default.createElement(
169
+ 'div',
170
+ null,
171
+ _react2.default.createElement(
172
+ 'p',
173
+ null,
174
+ 'Hi,'
175
+ ),
176
+ _react2.default.createElement(
177
+ 'p',
178
+ null,
179
+ 'I am \'hide show\''
180
+ )
181
+ )
182
+ )
183
+ )
184
+ ),
185
+ _react2.default.createElement(
186
+ 'div',
187
+ { style: { width: '150px', position: 'relative' } },
188
+ _react2.default.createElement(
189
+ 'span',
190
+ {
191
+ style: {
192
+ display: 'flex',
65
193
  'align-items': 'center',
66
- 'width': '100%'
67
- } },
194
+ width: '100%'
195
+ }
196
+ },
68
197
  'Show Absolute'
69
198
  ),
70
199
  _react2.default.createElement(
71
200
  _components.Dropdown,
72
- _extends({ show: true
73
- }, { style: { 'position': 'absolute',
74
- 'top': '0px',
75
- 'left': '0px',
76
- 'width': '100%'
77
- } }, {
201
+ _extends({
202
+ show: true
203
+ }, { style: { position: 'absolute', top: '0px', left: '0px', width: '100%' } }, {
78
204
  onClick: function onClick(e) {
79
- console.log("clickCallback", e);
80
- } }),
205
+ console.log('clickCallback', e);
206
+ }
207
+ }),
81
208
  _react2.default.createElement(
82
209
  'div',
83
210
  { style: { background: 'blue' } },
@@ -110,8 +237,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
110
237
  _components.Dropdown,
111
238
  {
112
239
  onClick: function onClick(e) {
113
- console.log("clickCallback", e);
114
- } },
240
+ console.log('clickCallback', e);
241
+ }
242
+ },
115
243
  _react2.default.createElement(
116
244
  'div',
117
245
  null,