@desynova-digital/components 9.0.26 → 9.1.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 (170) hide show
  1. package/_helpers/globals.js +9 -10
  2. package/_helpers/pagination.js +10 -15
  3. package/_helpers/story-example.js +16 -39
  4. package/_helpers/story-helpers.js +15 -14
  5. package/_helpers/story-stack.js +22 -43
  6. package/_helpers/uniqueId.js +2 -5
  7. package/_helpers/utils.js +28 -4
  8. package/atoms/avatar/avatar.js +19 -42
  9. package/atoms/avatar/avatar.story.js +25 -58
  10. package/atoms/avatar/index.js +13 -11
  11. package/atoms/badge/badge.js +14 -37
  12. package/atoms/badge/badge.story.js +45 -103
  13. package/atoms/badge/index.js +12 -10
  14. package/atoms/button/button.js +85 -161
  15. package/atoms/button/button.story.js +354 -508
  16. package/atoms/button/index.js +5 -9
  17. package/atoms/card/card.js +26 -55
  18. package/atoms/card/card.story.js +39 -88
  19. package/atoms/card/index.js +12 -10
  20. package/atoms/cardStack/cardStack.js +88 -147
  21. package/atoms/cardStack/cardStack.story.js +106 -210
  22. package/atoms/cardStack/index.js +12 -10
  23. package/atoms/cardV2/cardV2.js +57 -106
  24. package/atoms/cardV2/cardV2.story.js +184 -232
  25. package/atoms/cardV2/content.js +154 -256
  26. package/atoms/cardV2/index.js +4 -8
  27. package/atoms/cardV2/thumbnail.js +138 -208
  28. package/atoms/cardV2/timeline.js +167 -123
  29. package/atoms/checkbox/checkbox.js +85 -157
  30. package/atoms/checkbox/checkbox.story.js +237 -365
  31. package/atoms/checkbox/index.js +4 -9
  32. package/atoms/customSelect/customSelect.js +136 -215
  33. package/atoms/customSelect/customSelect.story.js +745 -851
  34. package/atoms/customSelect/index.js +4 -8
  35. package/atoms/datePicker/datePicker.js +299 -431
  36. package/atoms/datePicker/datePicker.story.js +453 -501
  37. package/atoms/datePicker/index.js +4 -8
  38. package/atoms/dateTime/dateTime.js +3 -6
  39. package/atoms/dateTime/dateTime.story.js +17 -63
  40. package/atoms/dateTime/index.js +5 -9
  41. package/atoms/draftInputText/draftInputText.js +121 -189
  42. package/atoms/draftInputText/draftInputText.story.js +200 -249
  43. package/atoms/draftInputText/index.js +5 -9
  44. package/atoms/dropdown/dropdown.js +38 -66
  45. package/atoms/dropdown/dropdown.story.js +102 -262
  46. package/atoms/dropdown/index.js +4 -8
  47. package/atoms/dropdownList/dropdownList.js +78 -108
  48. package/atoms/dropdownList/dropdownList.story.js +1546 -1621
  49. package/atoms/dropdownList/index.js +4 -8
  50. package/atoms/graphs/barGraph/barGraph.js +95 -146
  51. package/atoms/graphs/barGraph/barGraph.story.js +65 -87
  52. package/atoms/graphs/barGraph/index.js +4 -8
  53. package/atoms/graphs/circleDonut/circleDonut.js +177 -229
  54. package/atoms/graphs/circleDonut/circleDonut.story.js +328 -394
  55. package/atoms/graphs/circleDonut/index.js +5 -9
  56. package/atoms/graphs/circleGraph/circleGraph.js +60 -90
  57. package/atoms/graphs/circleGraph/circleGraph.story.js +36 -54
  58. package/atoms/graphs/circleGraph/index.js +4 -8
  59. package/atoms/graphs/circleNested/circleNested.js +216 -262
  60. package/atoms/graphs/circleNested/circleNested.story.js +91 -116
  61. package/atoms/graphs/circleNested/index.js +5 -9
  62. package/atoms/graphs/pieChart/index.js +4 -8
  63. package/atoms/graphs/pieChart/pieChart.js +162 -191
  64. package/atoms/graphs/pieChart/pieChart.story.js +147 -176
  65. package/atoms/graphs/verticalBarGraph/index.js +5 -9
  66. package/atoms/graphs/verticalBarGraph/verticalBarGraph.js +75 -98
  67. package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js +26 -45
  68. package/atoms/icon/icon.js +41 -72
  69. package/atoms/icon/icon.story.js +831 -260
  70. package/atoms/icon/index.js +19 -12
  71. package/atoms/image/image.js +18 -32
  72. package/atoms/image/image.story.js +10 -19
  73. package/atoms/image/index.js +4 -8
  74. package/atoms/inputText/index.js +4 -8
  75. package/atoms/inputText/inputText.js +86 -131
  76. package/atoms/inputText/inputText.story.js +191 -255
  77. package/atoms/label/index.js +4 -8
  78. package/atoms/label/label.js +25 -50
  79. package/atoms/label/label.story.js +42 -83
  80. package/atoms/loader/CircleLoader.js +29 -63
  81. package/atoms/loader/ShimmerComponent/CollabShimmerCard.js +39 -50
  82. package/atoms/loader/ShimmerComponent/CollabShimmerCardTray.js +41 -42
  83. package/atoms/loader/ShimmerComponent/FiltersShimmer.js +30 -30
  84. package/atoms/loader/ShimmerComponent/GraphDetailShimmer.js +21 -34
  85. package/atoms/loader/ShimmerComponent/GraphTitleShimmer.js +30 -34
  86. package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.js +23 -32
  87. package/atoms/loader/ShimmerComponent/Shimmer.js +24 -32
  88. package/atoms/loader/ThreeDotLoader.js +14 -29
  89. package/atoms/loader/index.js +13 -11
  90. package/atoms/loader/loader.js +34 -58
  91. package/atoms/loader/loader.story.js +48 -52
  92. package/atoms/loader/spinningLoader.js +23 -34
  93. package/atoms/popup/index.js +5 -9
  94. package/atoms/popup/popup.js +123 -208
  95. package/atoms/popup/popup.story.js +97 -131
  96. package/atoms/radio/index.js +18 -11
  97. package/atoms/radio/radio.js +58 -112
  98. package/atoms/radio/radio.story.js +197 -420
  99. package/atoms/select/index.js +4 -8
  100. package/atoms/select/select.js +48 -86
  101. package/atoms/sideBar/index.js +5 -9
  102. package/atoms/sideBar/sidebar.js +89 -140
  103. package/atoms/switch/index.js +4 -8
  104. package/atoms/switch/switch.js +56 -86
  105. package/atoms/switch/switch.story.js +268 -415
  106. package/atoms/tag/index.js +12 -10
  107. package/atoms/tag/tag.js +29 -63
  108. package/atoms/tag/tag.story.js +135 -209
  109. package/atoms/textarea/index.js +5 -9
  110. package/atoms/textarea/textarea.js +55 -99
  111. package/atoms/textarea/textarea.story.js +48 -41
  112. package/atoms/thematicBreak/index.js +12 -10
  113. package/atoms/thematicBreak/thematicBreak.js +20 -38
  114. package/atoms/thematicBreak/thematicBreak.story.js +25 -37
  115. package/atoms/timeCodeInput/index.js +4 -8
  116. package/atoms/timeCodeInput/timCodeInput.story.js +21 -35
  117. package/atoms/timeCodeInput/timeCodeInput.js +33 -51
  118. package/atoms/timer/index.js +5 -9
  119. package/atoms/timer/timer.js +57 -108
  120. package/atoms/timer/timer.story.js +13 -26
  121. package/atoms/toast/index.js +5 -9
  122. package/atoms/toast/toast.js +81 -116
  123. package/atoms/toast/toast.story.js +50 -76
  124. package/atoms/videoCard/index.js +12 -10
  125. package/atoms/videoCard/videoCard.js +265 -447
  126. package/atoms/videoCard/videoCard.story.js +495 -710
  127. package/components.js +411 -294
  128. package/index.js +350 -61
  129. package/molecules/carousel/carousel.js +121 -207
  130. package/molecules/carousel/carousel.story.js +240 -223
  131. package/molecules/carousel/index.js +5 -9
  132. package/molecules/errorScreen/CollabErrorScreen.js +35 -66
  133. package/molecules/errorScreen/TableErrorScreen.js +109 -102
  134. package/molecules/errorScreen/TableErrorScreen.jsx +7 -6
  135. package/molecules/errorScreen/errorScreen.js +41 -94
  136. package/molecules/filter/constants.js +1 -0
  137. package/molecules/filter/filter.js +378 -562
  138. package/molecules/filter/filter.story.js +79 -104
  139. package/molecules/filter/index.js +5 -9
  140. package/molecules/graphCard/graphCard.js +97 -193
  141. package/molecules/graphCard/graphCard.story.js +159 -191
  142. package/molecules/graphCard/index.js +4 -8
  143. package/molecules/graphCard/loader.js +28 -68
  144. package/molecules/graphDetailCard/graphDetailCard.js +115 -183
  145. package/molecules/graphDetailCard/graphDetailCard.story.js +218 -254
  146. package/molecules/graphDetailCard/index.js +5 -9
  147. package/molecules/pageHeader/index.js +12 -10
  148. package/molecules/pageHeader/pageHeader.js +38 -79
  149. package/molecules/pageHeader/pageHeader.story.js +34 -55
  150. package/molecules/pagination/index.js +4 -8
  151. package/molecules/pagination/pagination.js +126 -202
  152. package/molecules/pagination/pagination.story.js +40 -52
  153. package/molecules/richTextInput/RichTextInput.js +354 -0
  154. package/molecules/richTextInput/RichTextInput.story.js +50 -0
  155. package/molecules/richTextInput/index.js +9 -0
  156. package/molecules/table/index.js +4 -8
  157. package/molecules/table/table-column.js +10 -16
  158. package/molecules/table/table-header.js +31 -72
  159. package/molecules/table/table.js +743 -1075
  160. package/molecules/table/table.story.js +274 -304
  161. package/molecules/tabs/index.js +4 -8
  162. package/molecules/tabs/tabs.js +112 -184
  163. package/molecules/tabs/tabs.story.js +66 -133
  164. package/molecules/videoCardList/index.js +4 -8
  165. package/molecules/videoCardList/videoCardList.js +24 -41
  166. package/molecules/videoCardList/videoCardList.story.js +449 -664
  167. package/molecules/videoPlayer/index.js +4 -8
  168. package/molecules/videoPlayer/videoPlayer.js +1019 -1097
  169. package/molecules/videoPlayer/videoPlayer.story.js +10 -21
  170. package/package.json +2 -2
package/atoms/datePicker/datePicker.story.js CHANGED
@@ -1,505 +1,457 @@
1
- 'use strict';
1
+ "use strict";
2
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)('DatePicker').add('light theme', function () {
16
- return _react2.default.createElement(
17
- _storyHelpers.Example,
18
- { title: 'Appearances Light', background: 'white' },
19
- _react2.default.createElement(
20
- _storyHelpers.Stack,
21
- null,
22
- _react2.default.createElement(
23
- 'div',
24
- { style: { width: '100%' } },
25
- _react2.default.createElement(
26
- 'div',
27
- { style: { width: '200px', marginTop: '30px' } },
28
- _react2.default.createElement(
29
- 'h5',
30
- { style: { fontWeight: 'bold' } },
31
- 'Simple Absoulte'
32
- ),
33
- _react2.default.createElement(_components.DatePicker, {
34
- label: 'from',
35
- error: 'Select date',
36
- rangePicker: false,
37
- minDate: null,
38
- maxDate: null,
39
- inline: false,
40
- selected: null,
41
- onSelectionChange: function onSelectionChange(date) {
42
- console.log(date);
43
- }
44
- })
45
- ),
46
- _react2.default.createElement(
47
- 'div',
48
- { style: { width: '300px', marginTop: '30px' } },
49
- _react2.default.createElement(
50
- 'h5',
51
- { style: { fontWeight: 'bold' } },
52
- 'Simple Absoulte - default Selected'
53
- ),
54
- _react2.default.createElement(_components.DatePicker, {
55
- label: 'from',
56
- rangePicker: false,
57
- minDate: null,
58
- maxDate: null,
59
- inline: false,
60
- selected: [1542911400000],
61
- onSelectionChange: function onSelectionChange(date) {
62
- console.log(date);
63
- }
64
- })
65
- ),
66
- _react2.default.createElement(
67
- 'div',
68
- { style: { width: '300px', marginTop: '30px' } },
69
- _react2.default.createElement(
70
- 'h5',
71
- { style: { fontWeight: 'bold' } },
72
- 'Simple Inline '
73
- ),
74
- _react2.default.createElement(_components.DatePicker, {
75
- label: 'from',
76
- rangePicker: false,
77
- minDate: null,
78
- maxDate: null,
79
- inline: true,
80
- selected: null,
81
- onSelectionChange: function onSelectionChange(date) {
82
- console.log(date);
83
- }
84
- })
85
- ),
86
- _react2.default.createElement(
87
- 'div',
88
- { style: { width: '300px', marginTop: '30px' } },
89
- _react2.default.createElement(
90
- 'h5',
91
- { style: { fontWeight: 'bold' } },
92
- 'Simple Inline - Default selected'
93
- ),
94
- _react2.default.createElement(_components.DatePicker, {
95
- label: 'from',
96
- rangePicker: false,
97
- minDate: null,
98
- maxDate: null,
99
- inline: true,
100
- selected: ['17/8/2018'],
101
- onSelectionChange: function onSelectionChange(date) {
102
- console.log(date);
103
- }
104
- })
105
- ),
106
- _react2.default.createElement(
107
- 'div',
108
- { style: { width: '300px', marginTop: '30px' } },
109
- _react2.default.createElement(
110
- 'h5',
111
- { style: { fontWeight: 'bold' } },
112
- 'Simple Inline: Min - Max and disabled Dates',
113
- _react2.default.createElement('br', null),
114
- '15/06/2018 - 14/010/2018, ["15/08/2018","19/08/2018","22/8/2018"]'
115
- ),
116
- _react2.default.createElement(_components.DatePicker, {
117
- label: 'from',
118
- rangePicker: false,
119
- minDate: '15/06/2018',
120
- maxDate: '14/10/2018',
121
- disabledDates: ['15/08/2018', '19/08/2018', '22/8/2018'],
122
- inline: true,
123
- onSelectionChange: function onSelectionChange(date) {
124
- console.log(date);
125
- }
126
- })
127
- ),
128
- _react2.default.createElement(
129
- 'div',
130
- { style: { width: '300px', marginTop: '30px' } },
131
- _react2.default.createElement(
132
- 'h5',
133
- { style: { fontWeight: 'bold' } },
134
- 'Date Range popup'
135
- ),
136
- _react2.default.createElement(_components.DatePicker, {
137
- label: 'from',
138
- label2: 'to',
139
- rangePicker: true,
140
- minDate: null,
141
- maxDate: null,
142
- inline: false,
143
- selected: null,
144
- onSelectionChange: function onSelectionChange(date) {
145
- console.log(date);
146
- }
147
- })
148
- ),
149
- _react2.default.createElement(
150
- 'div',
151
- { style: { width: '300px', marginTop: '30px' } },
152
- _react2.default.createElement(
153
- 'h5',
154
- { style: { fontWeight: 'bold' } },
155
- 'Date Range inline'
156
- ),
157
- _react2.default.createElement(_components.DatePicker, {
158
- label: 'from',
159
- label2: 'to',
160
- rangePicker: true,
161
- minDate: null,
162
- maxDate: null,
163
- inline: true,
164
- selected: null,
165
- onSelectionChange: function onSelectionChange(date) {
166
- console.log(date);
167
- }
168
- })
169
- )
170
- )
171
- )
172
- );
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _react = _interopRequireDefault(require("react"));
5
+ var _react2 = require("@storybook/react");
6
+ var _storyHelpers = require("../../_helpers/story-helpers");
7
+ var _components = require("../../components");
8
+ (0, _react2.storiesOf)('DatePicker').add('light theme', function () {
9
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
10
+ title: "Appearances Light",
11
+ background: "white"
12
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
13
+ style: {
14
+ width: '100%'
15
+ }
16
+ }, /*#__PURE__*/_react["default"].createElement("div", {
17
+ style: {
18
+ width: '200px',
19
+ marginTop: '30px'
20
+ }
21
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
22
+ style: {
23
+ fontWeight: 'bold'
24
+ }
25
+ }, "Simple Absoulte"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
26
+ label: "from",
27
+ error: 'Select date',
28
+ rangePicker: false,
29
+ minDate: null,
30
+ maxDate: null,
31
+ inline: false,
32
+ selected: null,
33
+ onSelectionChange: function onSelectionChange(date) {
34
+ console.log(date);
35
+ }
36
+ })), /*#__PURE__*/_react["default"].createElement("div", {
37
+ style: {
38
+ width: '300px',
39
+ marginTop: '30px'
40
+ }
41
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
42
+ style: {
43
+ fontWeight: 'bold'
44
+ }
45
+ }, "Simple Absoulte - default Selected"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
46
+ label: "from",
47
+ rangePicker: false,
48
+ minDate: null,
49
+ maxDate: null,
50
+ inline: false,
51
+ selected: [1542911400000],
52
+ onSelectionChange: function onSelectionChange(date) {
53
+ console.log(date);
54
+ }
55
+ })), /*#__PURE__*/_react["default"].createElement("div", {
56
+ style: {
57
+ width: '300px',
58
+ marginTop: '30px'
59
+ }
60
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
61
+ style: {
62
+ fontWeight: 'bold'
63
+ }
64
+ }, "Simple Inline "), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
65
+ label: "from",
66
+ rangePicker: false,
67
+ minDate: null,
68
+ maxDate: null,
69
+ inline: true,
70
+ selected: null,
71
+ onSelectionChange: function onSelectionChange(date) {
72
+ console.log(date);
73
+ }
74
+ })), /*#__PURE__*/_react["default"].createElement("div", {
75
+ style: {
76
+ width: '300px',
77
+ marginTop: '30px'
78
+ }
79
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
80
+ style: {
81
+ fontWeight: 'bold'
82
+ }
83
+ }, "Simple Inline - Default selected"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
84
+ label: "from",
85
+ rangePicker: false,
86
+ minDate: null,
87
+ maxDate: null,
88
+ inline: true,
89
+ selected: ['17/8/2018'],
90
+ onSelectionChange: function onSelectionChange(date) {
91
+ console.log(date);
92
+ }
93
+ })), /*#__PURE__*/_react["default"].createElement("div", {
94
+ style: {
95
+ width: '300px',
96
+ marginTop: '30px'
97
+ }
98
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
99
+ style: {
100
+ fontWeight: 'bold'
101
+ }
102
+ }, "Simple Inline: Min - Max and disabled Dates", /*#__PURE__*/_react["default"].createElement("br", null), "15/06/2018 - 14/010/2018, [\"15/08/2018\",\"19/08/2018\",\"22/8/2018\"]"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
103
+ label: "from",
104
+ rangePicker: false,
105
+ minDate: '15/06/2018',
106
+ maxDate: '14/10/2018',
107
+ disabledDates: ['15/08/2018', '19/08/2018', '22/8/2018'],
108
+ inline: true,
109
+ onSelectionChange: function onSelectionChange(date) {
110
+ console.log(date);
111
+ }
112
+ })), /*#__PURE__*/_react["default"].createElement("div", {
113
+ style: {
114
+ width: '300px',
115
+ marginTop: '30px'
116
+ }
117
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
118
+ style: {
119
+ fontWeight: 'bold'
120
+ }
121
+ }, "Date Range popup"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
122
+ label: "from",
123
+ label2: "to",
124
+ rangePicker: true,
125
+ minDate: null,
126
+ maxDate: null,
127
+ inline: false,
128
+ selected: null,
129
+ onSelectionChange: function onSelectionChange(date) {
130
+ console.log(date);
131
+ }
132
+ })), /*#__PURE__*/_react["default"].createElement("div", {
133
+ style: {
134
+ width: '300px',
135
+ marginTop: '30px'
136
+ }
137
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
138
+ style: {
139
+ fontWeight: 'bold'
140
+ }
141
+ }, "Date Range inline"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
142
+ label: "from",
143
+ label2: "to",
144
+ rangePicker: true,
145
+ minDate: null,
146
+ maxDate: null,
147
+ inline: true,
148
+ selected: null,
149
+ onSelectionChange: function onSelectionChange(date) {
150
+ console.log(date);
151
+ }
152
+ })))));
173
153
  });
174
-
175
- (0, _react3.storiesOf)('DatePicker').add('dark theme', function () {
176
- return _react2.default.createElement(
177
- _storyHelpers.Example,
178
- { title: 'Appearances Light', background: 'dark' },
179
- _react2.default.createElement(
180
- _storyHelpers.Stack,
181
- null,
182
- _react2.default.createElement(
183
- 'div',
184
- { style: { width: '100%' } },
185
- _react2.default.createElement(
186
- 'div',
187
- { style: { width: '200px', marginTop: '30px' } },
188
- _react2.default.createElement(
189
- 'h5',
190
- { style: { fontWeight: 'bold' } },
191
- 'Simple Absoulte'
192
- ),
193
- _react2.default.createElement(_components.DatePicker, {
194
- theme: 'dark',
195
- label: 'from',
196
- rangePicker: false,
197
- minDate: null,
198
- maxDate: null,
199
- inline: false,
200
- selected: null,
201
- onSelectionChange: function onSelectionChange(date) {
202
- console.log(date);
203
- }
204
- })
205
- ),
206
- _react2.default.createElement(
207
- 'div',
208
- { style: { width: '300px', marginTop: '30px' } },
209
- _react2.default.createElement(
210
- 'h5',
211
- { style: { fontWeight: 'bold' } },
212
- 'Simple Absoulte - default Selected'
213
- ),
214
- _react2.default.createElement(_components.DatePicker, {
215
- theme: 'dark',
216
- label: 'from',
217
- rangePicker: false,
218
- minDate: null,
219
- maxDate: null,
220
- inline: false,
221
- selected: ['17/10/2018'],
222
- onSelectionChange: function onSelectionChange(date) {
223
- console.log(date);
224
- }
225
- })
226
- ),
227
- _react2.default.createElement(
228
- 'div',
229
- { style: { width: '300px', marginTop: '30px' } },
230
- _react2.default.createElement(
231
- 'h5',
232
- { style: { fontWeight: 'bold' } },
233
- 'Simple Inline '
234
- ),
235
- _react2.default.createElement(_components.DatePicker, {
236
- theme: 'dark',
237
- label: 'from',
238
- rangePicker: false,
239
- minDate: null,
240
- maxDate: null,
241
- inline: true,
242
- selected: null,
243
- onSelectionChange: function onSelectionChange(date) {
244
- console.log(date);
245
- }
246
- })
247
- ),
248
- _react2.default.createElement(
249
- 'div',
250
- { style: { width: '300px', marginTop: '30px' } },
251
- _react2.default.createElement(
252
- 'h5',
253
- { style: { fontWeight: 'bold' } },
254
- 'Simple Inline - Default selected'
255
- ),
256
- _react2.default.createElement(_components.DatePicker, {
257
- theme: 'dark',
258
- label: 'from',
259
- rangePicker: false,
260
- minDate: null,
261
- maxDate: null,
262
- inline: true,
263
- selected: ['17/8/2018'],
264
- onSelectionChange: function onSelectionChange(date) {
265
- console.log(date);
266
- }
267
- })
268
- ),
269
- _react2.default.createElement(
270
- 'div',
271
- { style: { width: '300px', marginTop: '30px' } },
272
- _react2.default.createElement(
273
- 'h5',
274
- { style: { fontWeight: 'bold' } },
275
- 'Simple Inline: Min - Max and disabled Dates',
276
- _react2.default.createElement('br', null),
277
- '15/06/2018 - 14/010/2018, ["15/08/2018","19/08/2018","22/8/2018"]'
278
- ),
279
- _react2.default.createElement(_components.DatePicker, {
280
- theme: 'dark',
281
- label: 'from',
282
- rangePicker: false,
283
- minDate: '15/06/2018',
284
- maxDate: '14/10/2018',
285
- disabledDates: ['15/08/2018', '19/08/2018', '22/8/2018'],
286
- inline: true,
287
- onSelectionChange: function onSelectionChange(date) {
288
- console.log(date);
289
- }
290
- })
291
- ),
292
- _react2.default.createElement(
293
- 'div',
294
- { style: { width: '300px', marginTop: '30px' } },
295
- _react2.default.createElement(
296
- 'h5',
297
- { style: { fontWeight: 'bold' } },
298
- 'Date Range popup'
299
- ),
300
- _react2.default.createElement(_components.DatePicker, {
301
- theme: 'dark',
302
- label: 'from',
303
- label2: 'to',
304
- rangePicker: true,
305
- minDate: null,
306
- maxDate: null,
307
- inline: false,
308
- selected: null,
309
- onSelectionChange: function onSelectionChange(date) {
310
- console.log(date);
311
- }
312
- })
313
- ),
314
- _react2.default.createElement(
315
- 'div',
316
- { style: { width: '300px', marginTop: '30px' } },
317
- _react2.default.createElement(
318
- 'h5',
319
- { style: { fontWeight: 'bold' } },
320
- 'Date Range inline'
321
- ),
322
- _react2.default.createElement(_components.DatePicker, {
323
- theme: 'dark',
324
- label: 'from',
325
- label2: 'to',
326
- rangePicker: true,
327
- minDate: null,
328
- maxDate: null,
329
- inline: true,
330
- selected: null,
331
- onSelectionChange: function onSelectionChange(date) {
332
- console.log(date);
333
- }
334
- })
335
- )
336
- )
337
- )
338
- );
154
+ (0, _react2.storiesOf)('DatePicker').add('dark theme', function () {
155
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
156
+ title: "Appearances Light",
157
+ background: "dark"
158
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
159
+ style: {
160
+ width: '100%'
161
+ }
162
+ }, /*#__PURE__*/_react["default"].createElement("div", {
163
+ style: {
164
+ width: '200px',
165
+ marginTop: '30px'
166
+ }
167
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
168
+ style: {
169
+ fontWeight: 'bold'
170
+ }
171
+ }, "Simple Absoulte"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
172
+ theme: 'dark',
173
+ label: "from",
174
+ rangePicker: false,
175
+ minDate: null,
176
+ maxDate: null,
177
+ inline: false,
178
+ selected: null,
179
+ onSelectionChange: function onSelectionChange(date) {
180
+ console.log(date);
181
+ }
182
+ })), /*#__PURE__*/_react["default"].createElement("div", {
183
+ style: {
184
+ width: '300px',
185
+ marginTop: '30px'
186
+ }
187
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
188
+ style: {
189
+ fontWeight: 'bold'
190
+ }
191
+ }, "Simple Absoulte - default Selected"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
192
+ theme: 'dark',
193
+ label: "from",
194
+ rangePicker: false,
195
+ minDate: null,
196
+ maxDate: null,
197
+ inline: false,
198
+ selected: ['17/10/2018'],
199
+ onSelectionChange: function onSelectionChange(date) {
200
+ console.log(date);
201
+ }
202
+ })), /*#__PURE__*/_react["default"].createElement("div", {
203
+ style: {
204
+ width: '300px',
205
+ marginTop: '30px'
206
+ }
207
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
208
+ style: {
209
+ fontWeight: 'bold'
210
+ }
211
+ }, "Simple Inline "), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
212
+ theme: 'dark',
213
+ label: "from",
214
+ rangePicker: false,
215
+ minDate: null,
216
+ maxDate: null,
217
+ inline: true,
218
+ selected: null,
219
+ onSelectionChange: function onSelectionChange(date) {
220
+ console.log(date);
221
+ }
222
+ })), /*#__PURE__*/_react["default"].createElement("div", {
223
+ style: {
224
+ width: '300px',
225
+ marginTop: '30px'
226
+ }
227
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
228
+ style: {
229
+ fontWeight: 'bold'
230
+ }
231
+ }, "Simple Inline - Default selected"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
232
+ theme: 'dark',
233
+ label: "from",
234
+ rangePicker: false,
235
+ minDate: null,
236
+ maxDate: null,
237
+ inline: true,
238
+ selected: ['17/8/2018'],
239
+ onSelectionChange: function onSelectionChange(date) {
240
+ console.log(date);
241
+ }
242
+ })), /*#__PURE__*/_react["default"].createElement("div", {
243
+ style: {
244
+ width: '300px',
245
+ marginTop: '30px'
246
+ }
247
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
248
+ style: {
249
+ fontWeight: 'bold'
250
+ }
251
+ }, "Simple Inline: Min - Max and disabled Dates", /*#__PURE__*/_react["default"].createElement("br", null), "15/06/2018 - 14/010/2018, [\"15/08/2018\",\"19/08/2018\",\"22/8/2018\"]"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
252
+ theme: 'dark',
253
+ label: "from",
254
+ rangePicker: false,
255
+ minDate: '15/06/2018',
256
+ maxDate: '14/10/2018',
257
+ disabledDates: ['15/08/2018', '19/08/2018', '22/8/2018'],
258
+ inline: true,
259
+ onSelectionChange: function onSelectionChange(date) {
260
+ console.log(date);
261
+ }
262
+ })), /*#__PURE__*/_react["default"].createElement("div", {
263
+ style: {
264
+ width: '300px',
265
+ marginTop: '30px'
266
+ }
267
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
268
+ style: {
269
+ fontWeight: 'bold'
270
+ }
271
+ }, "Date Range popup"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
272
+ theme: 'dark',
273
+ label: "from",
274
+ label2: "to",
275
+ rangePicker: true,
276
+ minDate: null,
277
+ maxDate: null,
278
+ inline: false,
279
+ selected: null,
280
+ onSelectionChange: function onSelectionChange(date) {
281
+ console.log(date);
282
+ }
283
+ })), /*#__PURE__*/_react["default"].createElement("div", {
284
+ style: {
285
+ width: '300px',
286
+ marginTop: '30px'
287
+ }
288
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
289
+ style: {
290
+ fontWeight: 'bold'
291
+ }
292
+ }, "Date Range inline"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
293
+ theme: 'dark',
294
+ label: "from",
295
+ label2: "to",
296
+ rangePicker: true,
297
+ minDate: null,
298
+ maxDate: null,
299
+ inline: true,
300
+ selected: null,
301
+ onSelectionChange: function onSelectionChange(date) {
302
+ console.log(date);
303
+ }
304
+ })))));
339
305
  });
340
-
341
- (0, _react3.storiesOf)('DatePicker').add('nexc theme', function () {
342
- return _react2.default.createElement(
343
- _storyHelpers.Example,
344
- { title: 'Appearances Light', background: 'dark' },
345
- _react2.default.createElement(
346
- _storyHelpers.Stack,
347
- null,
348
- _react2.default.createElement(
349
- 'div',
350
- { style: { width: '100%' } },
351
- _react2.default.createElement(
352
- 'div',
353
- { style: { width: '200px', marginTop: '30px' } },
354
- _react2.default.createElement(
355
- 'h5',
356
- { style: { fontWeight: 'bold' } },
357
- 'Simple Absoulte'
358
- ),
359
- _react2.default.createElement(_components.DatePicker, {
360
- theme: 'nexc',
361
- label: 'from',
362
- rangePicker: false,
363
- minDate: null,
364
- maxDate: null,
365
- inline: false,
366
- selected: null,
367
- onSelectionChange: function onSelectionChange(date) {
368
- console.log(date);
369
- }
370
- })
371
- ),
372
- _react2.default.createElement(
373
- 'div',
374
- { style: { width: '300px', marginTop: '30px' } },
375
- _react2.default.createElement(
376
- 'h5',
377
- { style: { fontWeight: 'bold' } },
378
- 'Simple Absoulte - default Selected'
379
- ),
380
- _react2.default.createElement(_components.DatePicker, {
381
- theme: 'nexc',
382
- label: 'from',
383
- rangePicker: false,
384
- minDate: null,
385
- maxDate: null,
386
- inline: false,
387
- selected: ['17/10/2018'],
388
- onSelectionChange: function onSelectionChange(date) {
389
- console.log(date);
390
- }
391
- })
392
- ),
393
- _react2.default.createElement(
394
- 'div',
395
- { style: { width: '300px', marginTop: '30px' } },
396
- _react2.default.createElement(
397
- 'h5',
398
- { style: { fontWeight: 'bold' } },
399
- 'Simple Inline '
400
- ),
401
- _react2.default.createElement(_components.DatePicker, {
402
- theme: 'nexc',
403
- label: 'from',
404
- rangePicker: false,
405
- minDate: null,
406
- maxDate: null,
407
- inline: true,
408
- selected: null,
409
- onSelectionChange: function onSelectionChange(date) {
410
- console.log(date);
411
- }
412
- })
413
- ),
414
- _react2.default.createElement(
415
- 'div',
416
- { style: { width: '300px', marginTop: '30px' } },
417
- _react2.default.createElement(
418
- 'h5',
419
- { style: { fontWeight: 'bold' } },
420
- 'Simple Inline - Default selected'
421
- ),
422
- _react2.default.createElement(_components.DatePicker, {
423
- theme: 'nexc',
424
- label: 'from',
425
- rangePicker: false,
426
- minDate: null,
427
- maxDate: null,
428
- inline: true,
429
- selected: ['17/8/2018'],
430
- onSelectionChange: function onSelectionChange(date) {
431
- console.log(date);
432
- }
433
- })
434
- ),
435
- _react2.default.createElement(
436
- 'div',
437
- { style: { width: '300px', marginTop: '30px' } },
438
- _react2.default.createElement(
439
- 'h5',
440
- { style: { fontWeight: 'bold' } },
441
- 'Simple Inline: Min - Max and disabled Dates',
442
- _react2.default.createElement('br', null),
443
- '15/06/2018 - 14/010/2018, ["15/08/2018","19/08/2018","22/8/2018"]'
444
- ),
445
- _react2.default.createElement(_components.DatePicker, {
446
- theme: 'nexc',
447
- label: 'from',
448
- rangePicker: false,
449
- minDate: '15/06/2018',
450
- maxDate: '14/10/2018',
451
- disabledDates: ['15/08/2018', '19/08/2018', '22/8/2018'],
452
- inline: true,
453
- onSelectionChange: function onSelectionChange(date) {
454
- console.log(date);
455
- }
456
- })
457
- ),
458
- _react2.default.createElement(
459
- 'div',
460
- { style: { width: '300px', marginTop: '30px' } },
461
- _react2.default.createElement(
462
- 'h5',
463
- { style: { fontWeight: 'bold' } },
464
- 'Date Range popup'
465
- ),
466
- _react2.default.createElement(_components.DatePicker, {
467
- theme: 'nexc',
468
- label: 'from',
469
- label2: 'to',
470
- rangePicker: true,
471
- minDate: null,
472
- maxDate: null,
473
- inline: false,
474
- selected: null,
475
- onSelectionChange: function onSelectionChange(date) {
476
- console.log(date);
477
- }
478
- })
479
- ),
480
- _react2.default.createElement(
481
- 'div',
482
- { style: { width: '300px', marginTop: '30px' } },
483
- _react2.default.createElement(
484
- 'h5',
485
- { style: { fontWeight: 'bold' } },
486
- 'Date Range inline'
487
- ),
488
- _react2.default.createElement(_components.DatePicker, {
489
- theme: 'nexc',
490
- label: 'from',
491
- label2: 'to',
492
- rangePicker: true,
493
- minDate: null,
494
- maxDate: null,
495
- inline: true,
496
- selected: null,
497
- onSelectionChange: function onSelectionChange(date) {
498
- console.log(date);
499
- }
500
- })
501
- )
502
- )
503
- )
504
- );
306
+ (0, _react2.storiesOf)('DatePicker').add('nexc theme', function () {
307
+ return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
308
+ title: "Appearances Light",
309
+ background: "dark"
310
+ }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
311
+ style: {
312
+ width: '100%'
313
+ }
314
+ }, /*#__PURE__*/_react["default"].createElement("div", {
315
+ style: {
316
+ width: '200px',
317
+ marginTop: '30px'
318
+ }
319
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
320
+ style: {
321
+ fontWeight: 'bold'
322
+ }
323
+ }, "Simple Absoulte"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
324
+ theme: 'nexc',
325
+ label: "from",
326
+ rangePicker: false,
327
+ minDate: null,
328
+ maxDate: null,
329
+ inline: false,
330
+ selected: null,
331
+ onSelectionChange: function onSelectionChange(date) {
332
+ console.log(date);
333
+ }
334
+ })), /*#__PURE__*/_react["default"].createElement("div", {
335
+ style: {
336
+ width: '300px',
337
+ marginTop: '30px'
338
+ }
339
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
340
+ style: {
341
+ fontWeight: 'bold'
342
+ }
343
+ }, "Simple Absoulte - default Selected"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
344
+ theme: 'nexc',
345
+ label: "from",
346
+ rangePicker: false,
347
+ minDate: null,
348
+ maxDate: null,
349
+ inline: false,
350
+ selected: ['17/10/2018'],
351
+ onSelectionChange: function onSelectionChange(date) {
352
+ console.log(date);
353
+ }
354
+ })), /*#__PURE__*/_react["default"].createElement("div", {
355
+ style: {
356
+ width: '300px',
357
+ marginTop: '30px'
358
+ }
359
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
360
+ style: {
361
+ fontWeight: 'bold'
362
+ }
363
+ }, "Simple Inline "), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
364
+ theme: 'nexc',
365
+ label: "from",
366
+ rangePicker: false,
367
+ minDate: null,
368
+ maxDate: null,
369
+ inline: true,
370
+ selected: null,
371
+ onSelectionChange: function onSelectionChange(date) {
372
+ console.log(date);
373
+ }
374
+ })), /*#__PURE__*/_react["default"].createElement("div", {
375
+ style: {
376
+ width: '300px',
377
+ marginTop: '30px'
378
+ }
379
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
380
+ style: {
381
+ fontWeight: 'bold'
382
+ }
383
+ }, "Simple Inline - Default selected"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
384
+ theme: 'nexc',
385
+ label: "from",
386
+ rangePicker: false,
387
+ minDate: null,
388
+ maxDate: null,
389
+ inline: true,
390
+ selected: ['17/8/2018'],
391
+ onSelectionChange: function onSelectionChange(date) {
392
+ console.log(date);
393
+ }
394
+ })), /*#__PURE__*/_react["default"].createElement("div", {
395
+ style: {
396
+ width: '300px',
397
+ marginTop: '30px'
398
+ }
399
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
400
+ style: {
401
+ fontWeight: 'bold'
402
+ }
403
+ }, "Simple Inline: Min - Max and disabled Dates", /*#__PURE__*/_react["default"].createElement("br", null), "15/06/2018 - 14/010/2018, [\"15/08/2018\",\"19/08/2018\",\"22/8/2018\"]"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
404
+ theme: 'nexc',
405
+ label: "from",
406
+ rangePicker: false,
407
+ minDate: '15/06/2018',
408
+ maxDate: '14/10/2018',
409
+ disabledDates: ['15/08/2018', '19/08/2018', '22/8/2018'],
410
+ inline: true,
411
+ onSelectionChange: function onSelectionChange(date) {
412
+ console.log(date);
413
+ }
414
+ })), /*#__PURE__*/_react["default"].createElement("div", {
415
+ style: {
416
+ width: '300px',
417
+ marginTop: '30px'
418
+ }
419
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
420
+ style: {
421
+ fontWeight: 'bold'
422
+ }
423
+ }, "Date Range popup"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
424
+ theme: 'nexc',
425
+ label: "from",
426
+ label2: "to",
427
+ rangePicker: true,
428
+ minDate: null,
429
+ maxDate: null,
430
+ inline: false,
431
+ selected: null,
432
+ onSelectionChange: function onSelectionChange(date) {
433
+ console.log(date);
434
+ }
435
+ })), /*#__PURE__*/_react["default"].createElement("div", {
436
+ style: {
437
+ width: '300px',
438
+ marginTop: '30px'
439
+ }
440
+ }, /*#__PURE__*/_react["default"].createElement("h5", {
441
+ style: {
442
+ fontWeight: 'bold'
443
+ }
444
+ }, "Date Range inline"), /*#__PURE__*/_react["default"].createElement(_components.DatePicker, {
445
+ theme: 'nexc',
446
+ label: "from",
447
+ label2: "to",
448
+ rangePicker: true,
449
+ minDate: null,
450
+ maxDate: null,
451
+ inline: true,
452
+ selected: null,
453
+ onSelectionChange: function onSelectionChange(date) {
454
+ console.log(date);
455
+ }
456
+ })))));
505
457
  });