@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/graphs/pieChart/pieChart.story.js CHANGED
@@ -12,89 +12,168 @@ var _components = require('../../../../components');
12
12
 
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
 
15
- (0, _react3.storiesOf)('PieChart').add('PieChart', function () {
16
- return _react2.default.createElement(
17
- _storyHelpers.Example,
18
- { title: 'Appearances' },
15
+ (0, _react3.storiesOf)('PieChart').add('light theme', function () {
16
+ return _react2.default.createElement(
17
+ _storyHelpers.Example,
18
+ { title: 'Appearances' },
19
+ _react2.default.createElement(
20
+ 'div',
21
+ null,
22
+ _react2.default.createElement(
23
+ 'div',
24
+ null,
19
25
  _react2.default.createElement(
20
- 'div',
21
- null,
22
- _react2.default.createElement(
23
- 'div',
24
- null,
25
- _react2.default.createElement(
26
- 'div',
27
- { style: { "width": "500px" } },
28
- _react2.default.createElement(_components.PieChart, { width: 500, height: 500,
29
-
30
- data: {
31
- "name": "Archieve",
32
- "total": 100,
33
- "values": [{
34
- "name": "Archieved",
35
- "value": "archieved",
36
- "data": 1,
37
- "index": 1
38
- }, {
39
- "name": "InProcess",
40
- "value": "inprocess",
41
- "data": 1,
42
- "index": 2
43
- }, {
44
- "name": "Pending",
45
- "value": "pending",
46
- "data": 95,
47
- "index": 3
48
- }, {
49
- "name": "Failed",
50
- "value": "failed",
51
- "data": 3,
52
- "index": 4
53
- }]
54
- }, type: 'donutThin' })
55
- ),
56
- _react2.default.createElement(
57
- 'div',
58
- { style: { "width": "500px" } },
59
- _react2.default.createElement(_components.PieChart, {
60
- width: 500,
61
- height: 500,
62
- data: {
63
- "name": "Archieve",
64
- "total": 100,
65
- "values": [{
66
- "name": "Archieved",
67
- "value": "archieved",
68
- "data": 25,
69
- "index": 1
70
- }, {
71
- "name": "InProcess",
72
- "value": "inprocess",
73
- "data": 25,
74
- "index": 2
75
- }, {
76
- "name": "Pending",
77
- "value": "pending",
78
- "data": 25,
79
- "index": 3
80
- }, {
81
- "name": "Failed",
82
- "value": "failed",
83
- "data": 25,
84
- "index": 4
85
- }]
86
- }
87
- })
88
- )
89
- )
26
+ 'div',
27
+ { style: { width: '500px' } },
28
+ _react2.default.createElement(_components.PieChart, {
29
+ width: 500,
30
+ height: 500,
31
+ data: {
32
+ name: 'Archieve',
33
+ total: 100,
34
+ values: [{
35
+ name: 'Archieved',
36
+ value: 'archieved',
37
+ data: 1,
38
+ index: 1
39
+ }, {
40
+ name: 'InProcess',
41
+ value: 'inprocess',
42
+ data: 1,
43
+ index: 2
44
+ }, {
45
+ name: 'Pending',
46
+ value: 'pending',
47
+ data: 95,
48
+ index: 3
49
+ }, {
50
+ name: 'Failed',
51
+ value: 'failed',
52
+ data: 3,
53
+ index: 4
54
+ }]
55
+ },
56
+ type: 'donutThin'
57
+ })
58
+ ),
59
+ _react2.default.createElement(
60
+ 'div',
61
+ { style: { width: '500px' } },
62
+ _react2.default.createElement(_components.PieChart, {
63
+ width: 500,
64
+ height: 500,
65
+ data: {
66
+ name: 'Archieve',
67
+ total: 100,
68
+ values: [{
69
+ name: 'Archieved',
70
+ value: 'archieved',
71
+ data: 25,
72
+ index: 1
73
+ }, {
74
+ name: 'InProcess',
75
+ value: 'inprocess',
76
+ data: 25,
77
+ index: 2
78
+ }, {
79
+ name: 'Pending',
80
+ value: 'pending',
81
+ data: 25,
82
+ index: 3
83
+ }, {
84
+ name: 'Failed',
85
+ value: 'failed',
86
+ data: 25,
87
+ index: 4
88
+ }]
89
+ }
90
+ })
90
91
  )
91
- );
92
+ )
93
+ )
94
+ );
92
95
  });
93
96
 
94
- (0, _react3.storiesOf)('PieChart').add('PieChart dark theme', function () {
95
- return _react2.default.createElement(
96
- _storyHelpers.Example,
97
- { title: 'Tag', background: 'dark' },
98
- _react2.default.createElement(_storyHelpers.Stack, null)
99
- );
97
+ (0, _react3.storiesOf)('PieChart').add('dark theme', function () {
98
+ return _react2.default.createElement(
99
+ _storyHelpers.Example,
100
+ { title: 'Tag', background: 'dark' },
101
+ _react2.default.createElement(
102
+ 'div',
103
+ null,
104
+ _react2.default.createElement(
105
+ 'div',
106
+ null,
107
+ _react2.default.createElement(
108
+ 'div',
109
+ { style: { width: '500px' } },
110
+ _react2.default.createElement(_components.PieChart, {
111
+ width: 500,
112
+ height: 500,
113
+ theme: 'dark',
114
+ data: {
115
+ name: 'Archieve',
116
+ total: 100,
117
+ values: [{
118
+ name: 'Archieved',
119
+ value: 'archieved',
120
+ data: 1,
121
+ index: 1
122
+ }, {
123
+ name: 'InProcess',
124
+ value: 'inprocess',
125
+ data: 1,
126
+ index: 2
127
+ }, {
128
+ name: 'Pending',
129
+ value: 'pending',
130
+ data: 95,
131
+ index: 3
132
+ }, {
133
+ name: 'Failed',
134
+ value: 'failed',
135
+ data: 3,
136
+ index: 4
137
+ }]
138
+ },
139
+ type: 'donutThin'
140
+ })
141
+ ),
142
+ _react2.default.createElement(
143
+ 'div',
144
+ { style: { width: '500px' } },
145
+ _react2.default.createElement(_components.PieChart, {
146
+ theme: 'dark',
147
+ width: 500,
148
+ height: 500,
149
+ data: {
150
+ name: 'Archieve',
151
+ total: 100,
152
+ values: [{
153
+ name: 'Archieved',
154
+ value: 'archieved',
155
+ data: 25,
156
+ index: 1
157
+ }, {
158
+ name: 'InProcess',
159
+ value: 'inprocess',
160
+ data: 25,
161
+ index: 2
162
+ }, {
163
+ name: 'Pending',
164
+ value: 'pending',
165
+ data: 25,
166
+ index: 3
167
+ }, {
168
+ name: 'Failed',
169
+ value: 'failed',
170
+ data: 25,
171
+ index: 4
172
+ }]
173
+ }
174
+ })
175
+ )
176
+ )
177
+ )
178
+ );
100
179
  });
package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js CHANGED
@@ -12,34 +12,36 @@ var _components = require('../../../../components');
12
12
 
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
 
15
- (0, _react3.storiesOf)('VerticalBarGraph').add('VerticalBarGraph', 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.VerticalBarGraph, {
23
- value: 60,
24
- graphColors: ['#00C8E7', '#00E6B9'],
25
- valueMain: 60,
26
- valueSub: 'Assets' })
27
- )
28
- );
15
+ (0, _react3.storiesOf)('VerticalBarGraph').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.VerticalBarGraph, {
23
+ value: 60,
24
+ graphColors: ['#00C8E7', '#00E6B9'],
25
+ valueMain: 60,
26
+ valueSub: 'Assets'
27
+ })
28
+ )
29
+ );
29
30
  });
30
31
 
31
- (0, _react3.storiesOf)('VerticalBarGraph').add('VerticalBarGraph dark theme', function () {
32
- return _react2.default.createElement(
33
- _storyHelpers.Example,
34
- { title: 'Tag', background: 'dark' },
35
- _react2.default.createElement(
36
- _storyHelpers.Stack,
37
- null,
38
- _react2.default.createElement(_components.VerticalBarGraph, {
39
- value: 60,
40
- graphColors: ['#00C8E7', '#00E6B9'],
41
- valueMain: '60%',
42
- valueSub: 'Assets' })
43
- )
44
- );
32
+ (0, _react3.storiesOf)('VerticalBarGraph').add('dark theme', function () {
33
+ return _react2.default.createElement(
34
+ _storyHelpers.Example,
35
+ { title: 'Tag', background: 'dark' },
36
+ _react2.default.createElement(
37
+ _storyHelpers.Stack,
38
+ null,
39
+ _react2.default.createElement(_components.VerticalBarGraph, {
40
+ value: 60,
41
+ graphColors: ['#00C8E7', '#00E6B9'],
42
+ valueMain: '60%',
43
+ valueSub: 'Assets'
44
+ })
45
+ )
46
+ );
45
47
  });