@dxc-technology/halstack-react 3.2.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (265) hide show
  1. package/BackgroundColorContext.js +46 -0
  2. package/ThemeContext.js +250 -0
  3. package/V3Select/V3Select.js +549 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +264 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +119 -50
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +33 -1
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +403 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +63 -0
  14. package/{dist/box → box}/Box.js +27 -18
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.js +238 -0
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +16 -9
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +89 -23
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +63 -21
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/common/utils.js +22 -0
  38. package/common/variables.js +1567 -0
  39. package/{dist/date → date}/Date.js +60 -38
  40. package/date/index.d.ts +27 -0
  41. package/date-input/DateInput.js +400 -0
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +44 -29
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +162 -74
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +79 -37
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +157 -72
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/heading/Heading.js +230 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +162 -66
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +7 -11
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +76 -39
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +71 -15
  67. package/number-input/NumberInput.js +136 -0
  68. package/number-input/NumberInputContext.js +16 -0
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +25 -19
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +86 -42
  73. package/paginator/index.d.ts +20 -0
  74. package/password-input/PasswordInput.js +203 -0
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +88 -38
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +28 -9
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +65 -40
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1138 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +47 -23
  85. package/sidenav/index.d.ts +13 -0
  86. package/slider/Slider.js +404 -0
  87. package/slider/index.d.ts +29 -0
  88. package/spinner/Spinner.js +381 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +42 -14
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +45 -11
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +37 -19
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +50 -36
  97. package/tag/index.d.ts +24 -0
  98. package/text-input/TextInput.js +992 -0
  99. package/text-input/index.d.ts +135 -0
  100. package/textarea/Textarea.js +369 -0
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/toggle-group/ToggleGroup.js +327 -0
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +1 -5
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +28 -16
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +61 -25
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +52 -25
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +3 -3
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +37 -41
  117. package/{dist/upload → upload}/transactions/Transactions.js +24 -8
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +106 -56
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/ThemeContext.js +0 -201
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  128. package/dist/accordion-group/readme.md +0 -70
  129. package/dist/alert/Alert.js +0 -318
  130. package/dist/alert/Alert.stories.js +0 -158
  131. package/dist/alert/close.svg +0 -4
  132. package/dist/alert/error.svg +0 -4
  133. package/dist/alert/info.svg +0 -4
  134. package/dist/alert/readme.md +0 -43
  135. package/dist/alert/success.svg +0 -4
  136. package/dist/alert/warning.svg +0 -4
  137. package/dist/badge/Badge.js +0 -40
  138. package/dist/button/Button.js +0 -219
  139. package/dist/button/Button.stories.js +0 -224
  140. package/dist/button/readme.md +0 -93
  141. package/dist/checkbox/Checkbox.stories.js +0 -144
  142. package/dist/checkbox/readme.md +0 -116
  143. package/dist/common/utils.js +0 -42
  144. package/dist/common/variables.js +0 -523
  145. package/dist/date/Date.stories.js +0 -205
  146. package/dist/date/calendar.svg +0 -1
  147. package/dist/date/calendar_dark.svg +0 -1
  148. package/dist/date/readme.md +0 -73
  149. package/dist/dialog/Dialog.stories.js +0 -217
  150. package/dist/dialog/readme.md +0 -32
  151. package/dist/dropdown/Dropdown.stories.js +0 -249
  152. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  153. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  154. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  155. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  156. package/dist/dropdown/readme.md +0 -69
  157. package/dist/footer/Footer.stories.js +0 -94
  158. package/dist/footer/dxc_logo_wht.png +0 -0
  159. package/dist/footer/readme.md +0 -41
  160. package/dist/header/Header.stories.js +0 -176
  161. package/dist/header/close_icon.svg +0 -1
  162. package/dist/header/dxc_logo_black.png +0 -0
  163. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  164. package/dist/header/dxc_logo_white.png +0 -0
  165. package/dist/header/hamb_menu_black.svg +0 -1
  166. package/dist/header/hamb_menu_white.svg +0 -1
  167. package/dist/header/readme.md +0 -33
  168. package/dist/heading/Heading.js +0 -163
  169. package/dist/input-text/InputText.stories.js +0 -209
  170. package/dist/input-text/error.svg +0 -1
  171. package/dist/input-text/readme.md +0 -91
  172. package/dist/layout/facebook.svg +0 -45
  173. package/dist/layout/linkedin.svg +0 -50
  174. package/dist/layout/twitter.svg +0 -53
  175. package/dist/link/readme.md +0 -51
  176. package/dist/paginator/images/next.svg +0 -3
  177. package/dist/paginator/images/nextPage.svg +0 -3
  178. package/dist/paginator/images/previous.svg +0 -3
  179. package/dist/paginator/images/previousPage.svg +0 -3
  180. package/dist/paginator/readme.md +0 -50
  181. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  182. package/dist/progress-bar/readme.md +0 -63
  183. package/dist/radio/Radio.stories.js +0 -166
  184. package/dist/radio/readme.md +0 -70
  185. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  187. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  188. package/dist/select/Select.js +0 -490
  189. package/dist/select/Select.stories.js +0 -235
  190. package/dist/select/readme.md +0 -72
  191. package/dist/slider/Slider.js +0 -267
  192. package/dist/slider/Slider.stories.js +0 -241
  193. package/dist/slider/readme.md +0 -64
  194. package/dist/spinner/Spinner.js +0 -198
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/tabs/Tabs.stories.js +0 -130
  200. package/dist/tabs/readme.md +0 -78
  201. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  202. package/dist/tabs-for-sections/readme.md +0 -78
  203. package/dist/textarea/Textarea.js +0 -238
  204. package/dist/toggle/Toggle.stories.js +0 -297
  205. package/dist/toggle/readme.md +0 -80
  206. package/dist/toggle-group/ToggleGroup.js +0 -223
  207. package/dist/toggle-group/readme.md +0 -82
  208. package/dist/upload/Upload.stories.js +0 -72
  209. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  210. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  211. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  212. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  213. package/dist/upload/file-upload/audio-icon.svg +0 -4
  214. package/dist/upload/file-upload/close.svg +0 -4
  215. package/dist/upload/file-upload/file-icon.svg +0 -4
  216. package/dist/upload/file-upload/video-icon.svg +0 -4
  217. package/dist/upload/readme.md +0 -37
  218. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  219. package/dist/upload/transaction/audio-icon.svg +0 -4
  220. package/dist/upload/transaction/error-icon.svg +0 -4
  221. package/dist/upload/transaction/file-icon-err.svg +0 -4
  222. package/dist/upload/transaction/file-icon.svg +0 -4
  223. package/dist/upload/transaction/image-icon-err.svg +0 -4
  224. package/dist/upload/transaction/image-icon.svg +0 -4
  225. package/dist/upload/transaction/success-icon.svg +0 -4
  226. package/dist/upload/transaction/video-icon-err.svg +0 -4
  227. package/dist/upload/transaction/video-icon.svg +0 -4
  228. package/dist/wizard/invalid_icon.svg +0 -6
  229. package/dist/wizard/valid_icon.svg +0 -6
  230. package/dist/wizard/validation-wrong.svg +0 -6
  231. package/test/Accordion.test.js +0 -33
  232. package/test/AccordionGroup.test.js +0 -125
  233. package/test/Alert.test.js +0 -53
  234. package/test/Box.test.js +0 -10
  235. package/test/Button.test.js +0 -18
  236. package/test/Card.test.js +0 -30
  237. package/test/Checkbox.test.js +0 -45
  238. package/test/Chip.test.js +0 -25
  239. package/test/Date.test.js +0 -393
  240. package/test/Dialog.test.js +0 -23
  241. package/test/Dropdown.test.js +0 -130
  242. package/test/Footer.test.js +0 -99
  243. package/test/Header.test.js +0 -39
  244. package/test/Heading.test.js +0 -35
  245. package/test/InputText.test.js +0 -240
  246. package/test/Link.test.js +0 -42
  247. package/test/Paginator.test.js +0 -177
  248. package/test/ProgressBar.test.js +0 -35
  249. package/test/Radio.test.js +0 -37
  250. package/test/ResultsetTable.test.js +0 -330
  251. package/test/Select.test.js +0 -192
  252. package/test/Sidenav.test.js +0 -45
  253. package/test/Slider.test.js +0 -82
  254. package/test/Spinner.test.js +0 -27
  255. package/test/Switch.test.js +0 -45
  256. package/test/Table.test.js +0 -36
  257. package/test/Tabs.test.js +0 -109
  258. package/test/TabsForSections.test.js +0 -34
  259. package/test/Tag.test.js +0 -32
  260. package/test/TextArea.test.js +0 -52
  261. package/test/ToggleGroup.test.js +0 -81
  262. package/test/Upload.test.js +0 -60
  263. package/test/Wizard.test.js +0 -130
  264. package/test/mocks/pngMock.js +0 -1
  265. package/test/mocks/svgMock.js +0 -1
@@ -39,14 +39,12 @@ var _InputText = _interopRequireDefault(require("../input-text/InputText"));
39
39
 
40
40
  var _variables = require("../common/variables.js");
41
41
 
42
- var _calendar = _interopRequireDefault(require("./calendar.svg"));
43
-
44
42
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
45
43
 
46
44
  var _DxcDate$propTypes;
47
45
 
48
46
  function _templateObject() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\nfont-size: ", ";\n background-color: \"#FABADA\";\n"]);
47
+ var data = (0, _taggedTemplateLiteral2["default"])([""]);
50
48
 
51
49
  _templateObject = function _templateObject() {
52
50
  return data;
@@ -56,8 +54,6 @@ function _templateObject() {
56
54
  }
57
55
 
58
56
  var DxcDate = function DxcDate(_ref) {
59
- var _componentTokens$date, _componentTokens$date2, _componentTokens$date3, _componentTokens$date4, _componentTokens$date5;
60
-
61
57
  var value = _ref.value,
62
58
  _ref$format = _ref.format,
63
59
  format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
@@ -100,20 +96,14 @@ var DxcDate = function DxcDate(_ref) {
100
96
 
101
97
  var colorsTheme = (0, _useTheme["default"])();
102
98
 
103
- function handleMenuItemClick(date) {
99
+ var handleMenuItemClick = function handleMenuItemClick(date) {
104
100
  var stringValue = (0, _moment["default"])(date).format(format.toUpperCase());
105
-
106
- if (value == null) {
107
- setInnerValue(stringValue);
108
- }
109
-
110
- if (typeof onChange === "function") {
111
- onChange({
112
- stringValue: stringValue,
113
- dateValue: date && date.toJSON() ? date : null
114
- });
115
- }
116
- }
101
+ if (value == null) setInnerValue(stringValue);
102
+ if (typeof onChange === "function") onChange({
103
+ stringValue: stringValue,
104
+ dateValue: date && date.toJSON() ? date : null
105
+ });
106
+ };
117
107
 
118
108
  var onChangeInput = function onChangeInput(string) {
119
109
  var momentDate = (0, _moment["default"])(string, format.toUpperCase(), true);
@@ -132,10 +122,7 @@ var DxcDate = function DxcDate(_ref) {
132
122
 
133
123
  var handlerInputBlur = function handlerInputBlur(inputString) {
134
124
  setInnerValue(inputString);
135
-
136
- if (onBlur) {
137
- onBlur(inputString);
138
- }
125
+ if (onBlur) onBlur(inputString);
139
126
  };
140
127
 
141
128
  var getValueForPicker = function getValueForPicker() {
@@ -154,19 +141,41 @@ var DxcDate = function DxcDate(_ref) {
154
141
  handlerInputBlur(value == null ? innerValue : value);
155
142
  };
156
143
 
144
+ var calendarSVG = function calendarSVG() {
145
+ return _react["default"].createElement("svg", {
146
+ xmlns: "http://www.w3.org/2000/svg",
147
+ height: "24",
148
+ viewBox: "0 0 24 24",
149
+ width: "24",
150
+ fill: "currentColor"
151
+ }, _react["default"].createElement("path", {
152
+ "data-testid": "calendarIcon",
153
+ d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
154
+ }), _react["default"].createElement("path", {
155
+ d: "M0 0h24v24H0z",
156
+ fill: "none"
157
+ }));
158
+ };
159
+
157
160
  var dateTheme = (0, _core.createMuiTheme)({
158
161
  overrides: {
162
+ MuiTypography: {
163
+ root: {
164
+ fontFamily: "".concat(colorsTheme.date.fontFamily, " !important")
165
+ }
166
+ },
159
167
  MuiPickersYearSelection: {
160
168
  container: {
169
+ color: colorsTheme.date.pickerYearColor,
161
170
  "&::-webkit-scrollbar": {
162
171
  width: "3px"
163
172
  },
164
173
  "&::-webkit-scrollbar-track": {
165
- backgroundColor: colorsTheme.date.scrollBarTrackColor,
174
+ backgroundColor: "#D9D9D9",
166
175
  borderRadius: "3px"
167
176
  },
168
177
  "&::-webkit-scrollbar-thumb": {
169
- backgroundColor: colorsTheme.date.scrollBarThumbColor,
178
+ backgroundColor: "#666666",
170
179
  borderRadius: "3px"
171
180
  }
172
181
  }
@@ -192,7 +201,7 @@ var DxcDate = function DxcDate(_ref) {
192
201
  MuiButtonBase: {
193
202
  root: {
194
203
  "&:focus": {
195
- outline: colorsTheme.date.focusColor + " 2px solid"
204
+ outline: colorsTheme.date.focusColor + " solid 2px"
196
205
  }
197
206
  }
198
207
  },
@@ -202,24 +211,39 @@ var DxcDate = function DxcDate(_ref) {
202
211
  maxWidth: "unset",
203
212
  minHeight: "unset",
204
213
  padding: "0px 10px",
205
- height: "316px",
206
- fontFamily: _variables.componentTokens === null || _variables.componentTokens === void 0 ? void 0 : (_componentTokens$date = _variables.componentTokens.date) === null || _componentTokens$date === void 0 ? void 0 : _componentTokens$date.fontFamily
214
+ height: colorsTheme.date.pickerHeight,
215
+ width: colorsTheme.date.pickerWidth,
216
+ backgroundColor: colorsTheme.date.pickerBackgroundColor,
217
+ fontFamily: colorsTheme.date.fontFamily
207
218
  }
208
219
  },
209
220
  MuiPickersToolbarText: {
210
221
  toolbarTxt: {
211
- color: _variables.componentTokens === null || _variables.componentTokens === void 0 ? void 0 : (_componentTokens$date2 = _variables.componentTokens.date) === null || _componentTokens$date2 === void 0 ? void 0 : _componentTokens$date2.pickerFontColor,
212
- fontFamily: _variables.componentTokens === null || _variables.componentTokens === void 0 ? void 0 : (_componentTokens$date3 = _variables.componentTokens.date) === null || _componentTokens$date3 === void 0 ? void 0 : _componentTokens$date3.fontFamily,
213
- fontSize: _variables.componentTokens === null || _variables.componentTokens === void 0 ? void 0 : (_componentTokens$date4 = _variables.componentTokens.date) === null || _componentTokens$date4 === void 0 ? void 0 : _componentTokens$date4.fontSize
222
+ color: colorsTheme.date.pickerActualDateColor,
223
+ fontFamily: colorsTheme.date.fontFamily,
224
+ fontSize: "2rem"
214
225
  },
215
226
  toolbarBtnSelected: {
216
- color: colorsTheme.date.pickerFontColor
227
+ color: colorsTheme.date.pickerActualDateColor
217
228
  }
218
229
  },
219
230
  MuiPickersCalendarHeader: {
231
+ transitionContainer: {
232
+ color: colorsTheme.date.pickerMonthColor
233
+ },
234
+ dayLabel: {
235
+ color: colorsTheme.date.pickerWeekLabelColor,
236
+ fontFamily: colorsTheme.date.fontFamily
237
+ },
220
238
  switchHeader: {
221
239
  backgroundColor: colorsTheme.white,
222
240
  color: colorsTheme.date.pickerFontColor
241
+ },
242
+ iconButton: {
243
+ backgroundColor: colorsTheme.date.pickerBackgroundColorMonthArrows,
244
+ "&:hover": {
245
+ backgroundColor: colorsTheme.date.pickerBackgroundColorMonthArrows
246
+ }
223
247
  }
224
248
  },
225
249
  MuiPickersCalendar: {
@@ -229,10 +253,11 @@ var DxcDate = function DxcDate(_ref) {
229
253
  },
230
254
  MuiPickersDay: {
231
255
  current: {
232
- border: colorsTheme.date.pickerActualDate + " 2px solid",
256
+ border: colorsTheme.date.pickerActualDateColor + " 2px solid",
233
257
  color: colorsTheme.date.pickerFontColor
234
258
  },
235
259
  day: {
260
+ fontFamily: colorsTheme.date.fontFamily,
236
261
  color: colorsTheme.date.pickerFontColor,
237
262
  "&:hover": {
238
263
  backgroundColor: colorsTheme.date.pickerHoverDateBackgroundColor,
@@ -254,8 +279,7 @@ var DxcDate = function DxcDate(_ref) {
254
279
  color: colorsTheme.date.pickerSelectedDateColor,
255
280
  backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
256
281
  margin: "0px 100px",
257
- borderRadius: "20px",
258
- fontSize: _variables.componentTokens === null || _variables.componentTokens === void 0 ? void 0 : (_componentTokens$date5 = _variables.componentTokens.date) === null || _componentTokens$date5 === void 0 ? void 0 : _componentTokens$date5.fontSize
282
+ borderRadius: "20px"
259
283
  },
260
284
  root: {
261
285
  "&:focus": {
@@ -282,7 +306,7 @@ var DxcDate = function DxcDate(_ref) {
282
306
  }, _react["default"].createElement(_InputText["default"], {
283
307
  label: label,
284
308
  name: name,
285
- suffixIconSrc: _calendar["default"],
309
+ suffixIcon: calendarSVG,
286
310
  required: required,
287
311
  invalid: invalid,
288
312
  disabled: disabled,
@@ -330,9 +354,7 @@ var sizes = {
330
354
  fillParent: "100%"
331
355
  };
332
356
 
333
- var StyledDPicker = _styledComponents["default"].div(_templateObject(), function (props) {
334
- return props.theme.fontSizeBase;
335
- });
357
+ var StyledDPicker = _styledComponents["default"].div(_templateObject());
336
358
 
337
359
  DxcDate.propTypes = (_DxcDate$propTypes = {
338
360
  value: _propTypes["default"].string,
@@ -0,0 +1,27 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ value?: string;
12
+ format?: string;
13
+ label?: string;
14
+ name?: string,
15
+ disabled?: boolean;
16
+ required?: boolean;
17
+ assistiveText?: string;
18
+ invalid?: boolean;
19
+ onChange?: void;
20
+ placeholder?: string;
21
+ onBlur?: void;
22
+ margin?: Space | Margin;
23
+ size?: Size;
24
+ tabIndex?: number;
25
+ };
26
+
27
+ export default function DxcDate(props: Props): JSX.Element;
@@ -0,0 +1,400 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = void 0;
11
+
12
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
+
14
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
+
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _pickers = require("@material-ui/pickers");
21
+
22
+ var _core = require("@material-ui/core");
23
+
24
+ var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
25
+
26
+ var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
27
+
28
+ var _moment = _interopRequireDefault(require("moment"));
29
+
30
+ var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
31
+
32
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
33
+
34
+ var _propTypes = _interopRequireDefault(require("prop-types"));
35
+
36
+ var _variables = require("../common/variables.js");
37
+
38
+ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
39
+
40
+ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
41
+
42
+ function _templateObject() {
43
+ var data = (0, _taggedTemplateLiteral2["default"])([""]);
44
+
45
+ _templateObject = function _templateObject() {
46
+ return data;
47
+ };
48
+
49
+ return data;
50
+ }
51
+
52
+ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
53
+ var _ref$label = _ref.label,
54
+ label = _ref$label === void 0 ? "" : _ref$label,
55
+ _ref$name = _ref.name,
56
+ name = _ref$name === void 0 ? "" : _ref$name,
57
+ value = _ref.value,
58
+ _ref$format = _ref.format,
59
+ format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
60
+ _ref$helperText = _ref.helperText,
61
+ helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
62
+ _ref$placeholder = _ref.placeholder,
63
+ placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
64
+ _ref$clearable = _ref.clearable,
65
+ clearable = _ref$clearable === void 0 ? false : _ref$clearable,
66
+ _ref$disabled = _ref.disabled,
67
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
68
+ _ref$optional = _ref.optional,
69
+ optional = _ref$optional === void 0 ? false : _ref$optional,
70
+ onChange = _ref.onChange,
71
+ onBlur = _ref.onBlur,
72
+ _ref$error = _ref.error,
73
+ error = _ref$error === void 0 ? "" : _ref$error,
74
+ _ref$autocomplete = _ref.autocomplete,
75
+ autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
76
+ margin = _ref.margin,
77
+ _ref$size = _ref.size,
78
+ size = _ref$size === void 0 ? "medium" : _ref$size,
79
+ _ref$tabIndex = _ref.tabIndex,
80
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
81
+
82
+ var _useState = (0, _react.useState)(""),
83
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
84
+ innerValue = _useState2[0],
85
+ setInnerValue = _useState2[1];
86
+
87
+ var _useState3 = (0, _react.useState)(false),
88
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
89
+ isOpen = _useState4[0],
90
+ setIsOpen = _useState4[1];
91
+
92
+ var _useState5 = (0, _react.useState)(null),
93
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
94
+ anchorEl = _useState6[0],
95
+ setAnchorEl = _useState6[1];
96
+
97
+ var colorsTheme = (0, _useTheme["default"])();
98
+
99
+ var handleCalendarOnKeyDown = function handleCalendarOnKeyDown(event) {
100
+ switch (event.keyCode) {
101
+ case 27:
102
+ // Esc
103
+ event.preventDefault();
104
+ setIsOpen(false);
105
+ break;
106
+ }
107
+ };
108
+
109
+ var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
110
+ var newValue = (0, _moment["default"])(newDate).format(format.toUpperCase());
111
+ value !== null && value !== void 0 ? value : setInnerValue(newValue);
112
+ onChange === null || onChange === void 0 ? void 0 : onChange({
113
+ value: newValue,
114
+ error: null,
115
+ date: newDate && newDate.toJSON() ? newDate : null
116
+ });
117
+ };
118
+
119
+ var handleIOnChange = function handleIOnChange(_ref2) {
120
+ var newValue = _ref2.value,
121
+ inputError = _ref2.error;
122
+ value !== null && value !== void 0 ? value : setInnerValue(newValue);
123
+ var momentDate = (0, _moment["default"])(newValue, format.toUpperCase(), true);
124
+ var invalidDateMessage = newValue !== "" && !momentDate.isValid() ? "Invalid date." : null;
125
+ onChange === null || onChange === void 0 ? void 0 : onChange({
126
+ value: newValue,
127
+ error: inputError || invalidDateMessage,
128
+ date: momentDate.isValid() ? momentDate._d : null
129
+ });
130
+ };
131
+
132
+ var handleIOnBlur = function handleIOnBlur(_ref3) {
133
+ var value = _ref3.value,
134
+ inputError = _ref3.error;
135
+ var momentDate = (0, _moment["default"])(value, format.toUpperCase(), true);
136
+ var invalidDateMessage = value !== "" && !momentDate.isValid() ? "Invalid date." : null;
137
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur({
138
+ value: value,
139
+ error: inputError || invalidDateMessage,
140
+ date: momentDate.isValid() ? momentDate._d : null
141
+ });
142
+ };
143
+
144
+ var getValueForPicker = function getValueForPicker() {
145
+ return (0, _moment["default"])(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase(), true).format();
146
+ };
147
+
148
+ var openCalendar = function openCalendar(event) {
149
+ if (event) {
150
+ setIsOpen(!isOpen);
151
+ setAnchorEl(event.currentTarget);
152
+ }
153
+ };
154
+
155
+ var closeCalendar = function closeCalendar() {
156
+ setIsOpen(false);
157
+ };
158
+
159
+ var calendarAction = {
160
+ onClick: openCalendar,
161
+ icon: _react["default"].createElement("svg", {
162
+ xmlns: "http://www.w3.org/2000/svg",
163
+ height: "24",
164
+ viewBox: "0 0 24 24",
165
+ width: "24",
166
+ fill: "currentColor"
167
+ }, _react["default"].createElement("path", {
168
+ d: "M0 0h24v24H0z",
169
+ fill: "none"
170
+ }), _react["default"].createElement("path", {
171
+ d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
172
+ }))
173
+ };
174
+ var dateTheme = (0, _core.createMuiTheme)({
175
+ overrides: {
176
+ MuiTypography: {
177
+ root: {
178
+ fontFamily: "".concat(colorsTheme.dateInput.pickerFontFamily, " !important")
179
+ }
180
+ },
181
+ MuiPickersYearSelection: {
182
+ container: {
183
+ color: colorsTheme.dateInput.pickerYearFontColor,
184
+ "&::-webkit-scrollbar": {
185
+ width: "3px"
186
+ },
187
+ "&::-webkit-scrollbar-track": {
188
+ backgroundColor: "#D9D9D9",
189
+ borderRadius: "3px"
190
+ },
191
+ "&::-webkit-scrollbar-thumb": {
192
+ backgroundColor: "#666666",
193
+ borderRadius: "3px"
194
+ }
195
+ }
196
+ },
197
+ MuiPickersToolbar: {
198
+ toolbar: {
199
+ backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
200
+ color: colorsTheme.dateInput.pickerDayFontColor
201
+ }
202
+ },
203
+ MuiIconButton: {
204
+ root: {
205
+ height: "36px",
206
+ width: "36px",
207
+ padding: "0px"
208
+ }
209
+ },
210
+ MuiTouchRipple: {
211
+ child: {
212
+ opacity: "0"
213
+ }
214
+ },
215
+ MuiButtonBase: {
216
+ root: {
217
+ "&:focus": {
218
+ outline: colorsTheme.dateInput.pickerFocusColor + " solid 2px"
219
+ }
220
+ }
221
+ },
222
+ MuiPickersBasePicker: {
223
+ pickerView: {
224
+ minWidth: "unset",
225
+ maxWidth: "unset",
226
+ minHeight: "unset",
227
+ padding: "0px 10px",
228
+ height: colorsTheme.dateInput.pickerHeight,
229
+ width: colorsTheme.dateInput.pickerWidth,
230
+ backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
231
+ fontFamily: colorsTheme.dateInput.pickerFontFamily
232
+ }
233
+ },
234
+ MuiPickersToolbarText: {
235
+ toolbarTxt: {
236
+ color: colorsTheme.dateInput.pickerActualDateFontColor,
237
+ fontFamily: colorsTheme.dateInput.pickerFontFamily,
238
+ fontSize: "2rem"
239
+ },
240
+ toolbarBtnSelected: {
241
+ color: colorsTheme.dateInput.pickerActualDateFontColor
242
+ }
243
+ },
244
+ MuiPickersCalendarHeader: {
245
+ transitionContainer: {
246
+ color: colorsTheme.dateInput.pickerMonthFontColor
247
+ },
248
+ dayLabel: {
249
+ color: colorsTheme.dateInput.pickerWeekFontColor,
250
+ fontFamily: colorsTheme.dateInput.pickerFontFamily
251
+ },
252
+ switchHeader: {
253
+ backgroundColor: "#ffffff",
254
+ color: colorsTheme.dateInput.pickerDayFontColor
255
+ },
256
+ iconButton: {
257
+ backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor,
258
+ "&:hover": {
259
+ backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor
260
+ }
261
+ }
262
+ },
263
+ MuiPickersCalendar: {
264
+ week: {
265
+ marginBottom: "2px"
266
+ }
267
+ },
268
+ MuiPickersDay: {
269
+ current: {
270
+ color: colorsTheme.dateInput.pickerDayFontColor
271
+ },
272
+ day: {
273
+ fontFamily: colorsTheme.dateInput.pickerFontFamily,
274
+ color: colorsTheme.dateInput.pickerDayFontColor,
275
+ "&:hover": {
276
+ backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor,
277
+ color: colorsTheme.dateInput.pickerHoverDateFontColor
278
+ }
279
+ },
280
+ daySelected: {
281
+ backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
282
+ color: colorsTheme.dateInput.pickerSelectedDateColor,
283
+ "&:hover": {
284
+ backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
285
+ color: colorsTheme.dateInput.pickerSelectedDateColor,
286
+ opacity: "1"
287
+ }
288
+ }
289
+ },
290
+ MuiPickersYear: {
291
+ yearSelected: {
292
+ color: colorsTheme.dateInput.pickerSelectedDateColor,
293
+ backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
294
+ margin: "0px 100px",
295
+ borderRadius: "20px"
296
+ },
297
+ root: {
298
+ "&:focus": {
299
+ color: colorsTheme.dateInput.pickerHoverDateFontColor,
300
+ backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor
301
+ }
302
+ }
303
+ },
304
+ MuiPickersModal: {
305
+ dialogAction: {
306
+ color: "pink"
307
+ }
308
+ }
309
+ }
310
+ });
311
+ return _react["default"].createElement(_styledComponents.ThemeProvider, {
312
+ theme: colorsTheme
313
+ }, _react["default"].createElement(_core.MuiThemeProvider, {
314
+ theme: dateTheme
315
+ }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
316
+ utils: _dateFns["default"]
317
+ }, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_TextInput["default"], {
318
+ label: label,
319
+ name: name,
320
+ value: value !== null && value !== void 0 ? value : innerValue,
321
+ helperText: helperText,
322
+ placeholder: placeholder ? format.toUpperCase() : null,
323
+ action: calendarAction,
324
+ clearable: clearable,
325
+ disabled: disabled,
326
+ optional: optional,
327
+ onChange: handleIOnChange,
328
+ onBlur: handleIOnBlur,
329
+ error: error,
330
+ autocomplete: autocomplete,
331
+ margin: margin,
332
+ size: size,
333
+ tabIndex: tabIndex,
334
+ ref: ref
335
+ }), _react["default"].createElement(_Popover["default"], {
336
+ onKeyDown: handleCalendarOnKeyDown,
337
+ open: isOpen,
338
+ anchorEl: anchorEl,
339
+ anchorOrigin: {
340
+ vertical: "bottom",
341
+ horizontal: "left"
342
+ },
343
+ transformOrigin: {
344
+ vertical: "top",
345
+ horizontal: "center"
346
+ },
347
+ PaperProps: {
348
+ style: {
349
+ marginTop: "10px"
350
+ }
351
+ }
352
+ }, _react["default"].createElement(_ClickAwayListener["default"], {
353
+ onClickAway: closeCalendar
354
+ }, _react["default"].createElement(_core.Paper, {
355
+ role: "dialog",
356
+ "aria-modal": "true"
357
+ }, _react["default"].createElement(_pickers.DatePicker, {
358
+ variant: "static",
359
+ value: getValueForPicker(),
360
+ onChange: function onChange(date) {
361
+ return handleCalendarOnClick(date);
362
+ },
363
+ format: format,
364
+ disabled: disabled
365
+ }))))))));
366
+ });
367
+
368
+ var sizes = {
369
+ medium: "360px",
370
+ large: "480px",
371
+ fillParent: "100%"
372
+ };
373
+
374
+ var StyledDPicker = _styledComponents["default"].div(_templateObject());
375
+
376
+ DxcDateInput.propTypes = {
377
+ label: _propTypes["default"].string,
378
+ name: _propTypes["default"].string,
379
+ value: _propTypes["default"].string,
380
+ format: _propTypes["default"].string,
381
+ helperText: _propTypes["default"].string,
382
+ placeholder: _propTypes["default"].bool,
383
+ clearable: _propTypes["default"].bool,
384
+ disabled: _propTypes["default"].bool,
385
+ optional: _propTypes["default"].bool,
386
+ onChange: _propTypes["default"].func,
387
+ onBlur: _propTypes["default"].func,
388
+ error: _propTypes["default"].string,
389
+ autocomplete: _propTypes["default"].string,
390
+ size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
391
+ margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
392
+ top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
393
+ bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
394
+ left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
395
+ right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
396
+ }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
397
+ tabIndex: _propTypes["default"].number
398
+ };
399
+ var _default = DxcDateInput;
400
+ exports["default"] = _default;