@dxc-technology/halstack-react 3.4.1 → 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 (233) hide show
  1. package/{dist/BackgroundColorContext.js → BackgroundColorContext.js} +0 -0
  2. package/{dist/ThemeContext.js → ThemeContext.js} +74 -64
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +127 -163
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +4 -4
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +0 -0
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +0 -0
  10. package/accordion-group/index.d.ts +16 -0
  11. package/{dist/alert → alert}/Alert.js +6 -6
  12. package/alert/index.d.ts +51 -0
  13. package/{dist/badge → badge}/Badge.js +0 -0
  14. package/{dist/box → box}/Box.js +0 -0
  15. package/box/index.d.ts +25 -0
  16. package/{dist/button → button}/Button.js +3 -3
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +0 -0
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +4 -5
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +0 -0
  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/{dist/common → common}/utils.js +0 -0
  38. package/{dist/common → common}/variables.js +344 -138
  39. package/{dist/date → date}/Date.js +4 -6
  40. package/date/index.d.ts +27 -0
  41. package/{dist/new-date/NewDate.js → date-input/DateInput.js} +69 -72
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +0 -0
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +0 -0
  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 +44 -18
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +122 -55
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/{dist/heading → heading}/Heading.js +12 -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 +7 -9
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +5 -9
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +4 -8
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +37 -29
  67. package/{dist/number/Number.js → number-input/NumberInput.js} +9 -11
  68. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +21 -16
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +53 -37
  73. package/paginator/index.d.ts +20 -0
  74. package/{dist/password/Password.js → password-input/PasswordInput.js} +17 -14
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +1 -1
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +0 -0
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +1 -1
  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 +6 -4
  85. package/sidenav/index.d.ts +13 -0
  86. package/{dist/slider → slider}/Slider.js +104 -19
  87. package/slider/index.d.ts +29 -0
  88. package/{dist/spinner → spinner}/Spinner.js +0 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +0 -0
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +0 -0
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +0 -0
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +26 -32
  97. package/tag/index.d.ts +24 -0
  98. package/{dist/new-input-text/NewInputText.js → text-input/TextInput.js} +343 -312
  99. package/text-input/index.d.ts +135 -0
  100. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +68 -45
  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/{dist/toggle-group → toggle-group}/ToggleGroup.js +132 -28
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +0 -0
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +7 -11
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +14 -14
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +26 -21
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +0 -0
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +11 -38
  117. package/{dist/upload → upload}/transactions/Transactions.js +0 -0
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +3 -9
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/checkbox/Checkbox.stories.js +0 -144
  125. package/dist/checkbox/readme.md +0 -116
  126. package/dist/date/Date.stories.js +0 -205
  127. package/dist/date/readme.md +0 -73
  128. package/dist/footer/Footer.stories.js +0 -94
  129. package/dist/footer/dxc_logo.svg +0 -15
  130. package/dist/footer/readme.md +0 -41
  131. package/dist/header/Header.stories.js +0 -176
  132. package/dist/header/close_icon.svg +0 -1
  133. package/dist/header/dxc_logo_black.svg +0 -8
  134. package/dist/header/hamb_menu_black.svg +0 -1
  135. package/dist/header/hamb_menu_white.svg +0 -1
  136. package/dist/header/readme.md +0 -33
  137. package/dist/input-text/InputText.stories.js +0 -209
  138. package/dist/input-text/error.svg +0 -1
  139. package/dist/input-text/readme.md +0 -91
  140. package/dist/layout/facebook.svg +0 -45
  141. package/dist/layout/linkedin.svg +0 -50
  142. package/dist/layout/twitter.svg +0 -53
  143. package/dist/link/readme.md +0 -51
  144. package/dist/paginator/images/next.svg +0 -3
  145. package/dist/paginator/images/nextPage.svg +0 -3
  146. package/dist/paginator/images/previous.svg +0 -3
  147. package/dist/paginator/images/previousPage.svg +0 -3
  148. package/dist/paginator/readme.md +0 -50
  149. package/dist/password/styles.css +0 -3
  150. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  151. package/dist/progress-bar/readme.md +0 -63
  152. package/dist/radio/Radio.stories.js +0 -166
  153. package/dist/radio/readme.md +0 -70
  154. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  155. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  156. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  157. package/dist/select/Select.stories.js +0 -235
  158. package/dist/select/readme.md +0 -72
  159. package/dist/slider/Slider.stories.js +0 -241
  160. package/dist/slider/readme.md +0 -64
  161. package/dist/spinner/Spinner.stories.js +0 -183
  162. package/dist/spinner/readme.md +0 -65
  163. package/dist/switch/Switch.stories.js +0 -134
  164. package/dist/switch/readme.md +0 -133
  165. package/dist/tabs/Tabs.stories.js +0 -130
  166. package/dist/tabs/readme.md +0 -78
  167. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  168. package/dist/tabs-for-sections/readme.md +0 -78
  169. package/dist/toggle/Toggle.stories.js +0 -297
  170. package/dist/toggle/readme.md +0 -80
  171. package/dist/upload/Upload.stories.js +0 -72
  172. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  173. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  174. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  175. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  176. package/dist/upload/file-upload/audio-icon.svg +0 -4
  177. package/dist/upload/file-upload/close.svg +0 -4
  178. package/dist/upload/file-upload/file-icon.svg +0 -4
  179. package/dist/upload/file-upload/video-icon.svg +0 -4
  180. package/dist/upload/readme.md +0 -37
  181. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  182. package/dist/upload/transaction/audio-icon.svg +0 -4
  183. package/dist/upload/transaction/error-icon.svg +0 -4
  184. package/dist/upload/transaction/file-icon-err.svg +0 -4
  185. package/dist/upload/transaction/file-icon.svg +0 -4
  186. package/dist/upload/transaction/image-icon-err.svg +0 -4
  187. package/dist/upload/transaction/image-icon.svg +0 -4
  188. package/dist/upload/transaction/success-icon.svg +0 -4
  189. package/dist/upload/transaction/video-icon-err.svg +0 -4
  190. package/dist/upload/transaction/video-icon.svg +0 -4
  191. package/dist/wizard/invalid_icon.svg +0 -5
  192. package/dist/wizard/valid_icon.svg +0 -5
  193. package/dist/wizard/validation-wrong.svg +0 -6
  194. package/test/Accordion.test.js +0 -33
  195. package/test/AccordionGroup.test.js +0 -125
  196. package/test/Alert.test.js +0 -53
  197. package/test/Box.test.js +0 -10
  198. package/test/Button.test.js +0 -18
  199. package/test/Card.test.js +0 -30
  200. package/test/Checkbox.test.js +0 -45
  201. package/test/Chip.test.js +0 -25
  202. package/test/Date.test.js +0 -393
  203. package/test/Dialog.test.js +0 -23
  204. package/test/Dropdown.test.js +0 -145
  205. package/test/Footer.test.js +0 -99
  206. package/test/Header.test.js +0 -39
  207. package/test/Heading.test.js +0 -35
  208. package/test/InputText.test.js +0 -240
  209. package/test/Link.test.js +0 -43
  210. package/test/NewDate.test.js +0 -203
  211. package/test/NewInputText.test.js +0 -817
  212. package/test/NewTextarea.test.js +0 -201
  213. package/test/Number.test.js +0 -241
  214. package/test/Paginator.test.js +0 -177
  215. package/test/Password.test.js +0 -76
  216. package/test/ProgressBar.test.js +0 -35
  217. package/test/Radio.test.js +0 -37
  218. package/test/ResultsetTable.test.js +0 -330
  219. package/test/Select.test.js +0 -189
  220. package/test/Sidenav.test.js +0 -45
  221. package/test/Slider.test.js +0 -82
  222. package/test/Spinner.test.js +0 -32
  223. package/test/Switch.test.js +0 -45
  224. package/test/Table.test.js +0 -36
  225. package/test/Tabs.test.js +0 -109
  226. package/test/TabsForSections.test.js +0 -34
  227. package/test/Tag.test.js +0 -32
  228. package/test/TextArea.test.js +0 -52
  229. package/test/ToggleGroup.test.js +0 -81
  230. package/test/Upload.test.js +0 -60
  231. package/test/Wizard.test.js +0 -130
  232. package/test/mocks/pngMock.js +0 -1
  233. package/test/mocks/svgMock.js +0 -1
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.lastIcon = exports.nextIcon = exports.previousIcon = exports.firstIcon = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var firstIcon = _react["default"].createElement("svg", {
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: "12.41",
15
+ height: "12",
16
+ viewBox: "0 0 12.41 12"
17
+ }, _react["default"].createElement("path", {
18
+ id: "Path_2463",
19
+ "data-name": "Path 2463",
20
+ d: "M18.41,16.59,13.82,12l4.59-4.59L17,6l-6,6,6,6ZM6,6H8V18H6Z",
21
+ transform: "translate(-6 -6)"
22
+ }));
23
+
24
+ exports.firstIcon = firstIcon;
25
+
26
+ var previousIcon = _react["default"].createElement("svg", {
27
+ xmlns: "http://www.w3.org/2000/svg",
28
+ width: "7.41",
29
+ height: "12",
30
+ viewBox: "0 0 7.41 12"
31
+ }, _react["default"].createElement("path", {
32
+ id: "Path_2459",
33
+ "data-name": "Path 2459",
34
+ d: "M15.41,7.41,14,6,8,12l6,6,1.41-1.41L10.83,12Z",
35
+ transform: "translate(-8 -6)"
36
+ }));
37
+
38
+ exports.previousIcon = previousIcon;
39
+
40
+ var nextIcon = _react["default"].createElement("svg", {
41
+ xmlns: "http://www.w3.org/2000/svg",
42
+ width: "7.41",
43
+ height: "12",
44
+ viewBox: "0 0 7.41 12"
45
+ }, _react["default"].createElement("path", {
46
+ id: "Path_2461",
47
+ "data-name": "Path 2461",
48
+ d: "M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z",
49
+ transform: "translate(-8.59 -6)"
50
+ }));
51
+
52
+ exports.nextIcon = nextIcon;
53
+
54
+ var lastIcon = _react["default"].createElement("svg", {
55
+ xmlns: "http://www.w3.org/2000/svg",
56
+ width: "12.41",
57
+ height: "12",
58
+ viewBox: "0 0 12.41 12"
59
+ }, _react["default"].createElement("path", {
60
+ id: "Path_2465",
61
+ "data-name": "Path 2465",
62
+ d: "M5.59,7.41,10.18,12,5.59,16.59,7,18l6-6L7,6ZM16,6h2V18H16Z",
63
+ transform: "translate(-5.59 -6)"
64
+ }));
65
+
66
+ exports.lastIcon = lastIcon;
@@ -25,18 +25,22 @@ var _Button = _interopRequireDefault(require("../button/Button"));
25
25
 
26
26
  var _Select = _interopRequireDefault(require("../select/Select"));
27
27
 
28
- var _previousPage = _interopRequireDefault(require("./images/previousPage.svg"));
28
+ var _Icons = require("./Icons");
29
29
 
30
- var _previous = _interopRequireDefault(require("./images/previous.svg"));
30
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
31
31
 
32
- var _next = _interopRequireDefault(require("./images/next.svg"));
32
+ function _templateObject9() {
33
+ var data = (0, _taggedTemplateLiteral2["default"])([""]);
33
34
 
34
- var _nextPage = _interopRequireDefault(require("./images/nextPage.svg"));
35
+ _templateObject9 = function _templateObject9() {
36
+ return data;
37
+ };
35
38
 
36
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
39
+ return data;
40
+ }
37
41
 
38
42
  function _templateObject8() {
39
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
43
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
40
44
 
41
45
  _templateObject8 = function _templateObject8() {
42
46
  return data;
@@ -46,7 +50,7 @@ function _templateObject8() {
46
50
  }
47
51
 
48
52
  function _templateObject7() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
53
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n width: 100%;\n justify-content: flex-end;\n align-items: center;\n margin: 0 ", " 0 ", ";\n"]);
50
54
 
51
55
  _templateObject7 = function _templateObject7() {
52
56
  return data;
@@ -56,7 +60,7 @@ function _templateObject7() {
56
60
  }
57
61
 
58
62
  function _templateObject6() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n width: 100%;\n justify-content: flex-end;\n align-items: center;\n margin: 0 ", " 0 ", ";\n"]);
63
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: ", ";\n margin-left: ", ";\n"]);
60
64
 
61
65
  _templateObject6 = function _templateObject6() {
62
66
  return data;
@@ -66,7 +70,7 @@ function _templateObject6() {
66
70
  }
67
71
 
68
72
  function _templateObject5() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: ", ";\n margin-left: ", ";\n"]);
73
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: 10px;\n margin-left: 10px;\n"]);
70
74
 
71
75
  _templateObject5 = function _templateObject5() {
72
76
  return data;
@@ -76,7 +80,7 @@ function _templateObject5() {
76
80
  }
77
81
 
78
82
  function _templateObject4() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: 10px;\n margin-left: 10px;\n"]);
83
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: 15px;\n"]);
80
84
 
81
85
  _templateObject4 = function _templateObject4() {
82
86
  return data;
@@ -86,7 +90,7 @@ function _templateObject4() {
86
90
  }
87
91
 
88
92
  function _templateObject3() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: 15px;\n"]);
93
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
90
94
 
91
95
  _templateObject3 = function _templateObject3() {
92
96
  return data;
@@ -96,7 +100,7 @@ function _templateObject3() {
96
100
  }
97
101
 
98
102
  function _templateObject2() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
103
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n max-width: 100px;\n"]);
100
104
 
101
105
  _templateObject2 = function _templateObject2() {
102
106
  return data;
@@ -139,18 +143,23 @@ var DxcPaginator = function DxcPaginator(_ref) {
139
143
  color: colorsTheme.paginator.backgroundColor
140
144
  }, _react["default"].createElement(DxcPaginatorContainer, {
141
145
  disabled: currentPageInternal === 1
142
- }, _react["default"].createElement(LabelsContainer, null, itemsPerPageOptions && _react["default"].createElement(ItemsPageContainer, null, _react["default"].createElement(ItemsLabel, null, "Items per page "), _react["default"].createElement(_Select["default"], {
146
+ }, _react["default"].createElement(LabelsContainer, null, itemsPerPageOptions && _react["default"].createElement(ItemsPageContainer, null, _react["default"].createElement(ItemsLabel, null, "Items per page "), _react["default"].createElement(SelectContainer, null, _react["default"].createElement(_Select["default"], {
143
147
  options: itemsPerPageOptions.map(function (num) {
144
148
  return {
145
- label: num,
146
- value: num
149
+ label: num.toString(),
150
+ value: num.toString()
147
151
  };
148
152
  }),
149
- onChange: itemsPerPageFunction,
150
- value: itemsPerPage,
151
- size: "small",
153
+ onChange: function onChange(newValue) {
154
+ itemsPerPageFunction(Number(newValue.value));
155
+ },
156
+ value: itemsPerPage.toString(),
157
+ size: "fillParent",
158
+ margin: {
159
+ top: "xsmall"
160
+ },
152
161
  tabIndex: tabIndex
153
- })), _react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && _react["default"].createElement(_Button["default"], {
162
+ }))), _react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && _react["default"].createElement(_Button["default"], {
154
163
  size: "small",
155
164
  mode: "secondary",
156
165
  disabled: currentPageInternal === 1 || currentPageInternal === 0,
@@ -158,7 +167,7 @@ var DxcPaginator = function DxcPaginator(_ref) {
158
167
  left: "xxsmall",
159
168
  right: "xxsmall"
160
169
  },
161
- iconSrc: _previousPage["default"],
170
+ icon: _Icons.firstIcon,
162
171
  tabIndex: tabIndex,
163
172
  onClick: function onClick() {
164
173
  onPageChange(1);
@@ -171,23 +180,28 @@ var DxcPaginator = function DxcPaginator(_ref) {
171
180
  left: "xxsmall",
172
181
  right: "xxsmall"
173
182
  },
174
- iconSrc: _previous["default"],
183
+ icon: _Icons.previousIcon,
175
184
  tabIndex: tabIndex,
176
185
  onClick: function onClick() {
177
186
  onPageChange(currentPage - 1);
178
187
  }
179
- }), showGoToPage && _react["default"].createElement(PageToSelectContainer, null, _react["default"].createElement(GoToLabel, null, "Go to page: "), _react["default"].createElement(_Select["default"], {
188
+ }), showGoToPage && _react["default"].createElement(PageToSelectContainer, null, _react["default"].createElement(GoToLabel, null, "Go to page: "), _react["default"].createElement(SelectContainer, null, _react["default"].createElement(_Select["default"], {
180
189
  options: (0, _toConsumableArray2["default"])(Array(totalPages).keys()).map(function (num) {
181
190
  return {
182
- label: num + 1,
183
- value: num + 1
191
+ label: (num + 1).toString(),
192
+ value: (num + 1).toString()
184
193
  };
185
194
  }),
186
- onChange: onPageChange,
187
- value: currentPage,
188
- size: "small",
195
+ onChange: function onChange(newValue) {
196
+ onPageChange(Number(newValue.value));
197
+ },
198
+ value: currentPage.toString(),
199
+ size: "fillParent",
200
+ margin: {
201
+ top: "xsmall"
202
+ },
189
203
  tabIndex: tabIndex
190
- })) || _react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && _react["default"].createElement(_Button["default"], {
204
+ }))) || _react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && _react["default"].createElement(_Button["default"], {
191
205
  size: "small",
192
206
  mode: "secondary",
193
207
  disabled: currentPageInternal === totalPages,
@@ -195,7 +209,7 @@ var DxcPaginator = function DxcPaginator(_ref) {
195
209
  left: "xxsmall",
196
210
  right: "xxsmall"
197
211
  },
198
- iconSrc: _next["default"],
212
+ icon: _Icons.nextIcon,
199
213
  tabIndex: tabIndex,
200
214
  onClick: function onClick() {
201
215
  onPageChange(currentPage + 1);
@@ -208,7 +222,7 @@ var DxcPaginator = function DxcPaginator(_ref) {
208
222
  left: "xxsmall",
209
223
  right: "xxsmall"
210
224
  },
211
- iconSrc: _nextPage["default"],
225
+ icon: _Icons.lastIcon,
212
226
  tabIndex: tabIndex,
213
227
  onClick: function onClick() {
214
228
  onPageChange(totalPages);
@@ -236,35 +250,37 @@ var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject(),
236
250
  return props.theme.fontColor;
237
251
  });
238
252
 
239
- var ItemsPageContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
253
+ var SelectContainer = _styledComponents["default"].div(_templateObject2());
254
+
255
+ var ItemsPageContainer = _styledComponents["default"].span(_templateObject3(), function (props) {
240
256
  return props.theme.itemsPerPageSelectorMarginRight;
241
257
  }, function (props) {
242
258
  return props.theme.itemsPerPageSelectorMarginLeft;
243
259
  });
244
260
 
245
- var ItemsLabel = _styledComponents["default"].span(_templateObject3());
261
+ var ItemsLabel = _styledComponents["default"].span(_templateObject4());
246
262
 
247
- var GoToLabel = _styledComponents["default"].span(_templateObject4());
263
+ var GoToLabel = _styledComponents["default"].span(_templateObject5());
248
264
 
249
- var TotalItemsContainer = _styledComponents["default"].span(_templateObject5(), function (props) {
265
+ var TotalItemsContainer = _styledComponents["default"].span(_templateObject6(), function (props) {
250
266
  return props.theme.totalItemsContainerMarginRight;
251
267
  }, function (props) {
252
268
  return props.theme.totalItemsContainerMarginLeft;
253
269
  });
254
270
 
255
- var LabelsContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
271
+ var LabelsContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
256
272
  return props.theme.marginRight;
257
273
  }, function (props) {
258
274
  return props.theme.marginLeft;
259
275
  });
260
276
 
261
- var PageToSelectContainer = _styledComponents["default"].span(_templateObject7(), function (props) {
277
+ var PageToSelectContainer = _styledComponents["default"].span(_templateObject8(), function (props) {
262
278
  return props.theme.pageSelectorMarginRight;
263
279
  }, function (props) {
264
280
  return props.theme.pageSelectorMarginLeft;
265
281
  });
266
282
 
267
- var TextContainer = _styledComponents["default"].span(_templateObject8());
283
+ var TextContainer = _styledComponents["default"].span(_templateObject9());
268
284
 
269
285
  DxcPaginator.propTypes = {
270
286
  currentPage: _propTypes["default"].number,
@@ -0,0 +1,20 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ currentPage?: number;
11
+ itemsPerPage?: number;
12
+ itemsPerPageOptions?: number[];
13
+ totalItems?: number
14
+ showGoToPage?: boolean,
15
+ onPageChange?: void;
16
+ itemsPerPageFunction?: void;
17
+ tabIndex?: number;
18
+ };
19
+
20
+ export default function DxcPaginator(props: Props): JSX.Element;
@@ -21,14 +21,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
21
21
 
22
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
23
23
 
24
- var _NewInputText = _interopRequireDefault(require("../new-input-text/NewInputText"));
24
+ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
25
25
 
26
26
  var _variables = require("../common/variables.js");
27
27
 
28
- require("./styles.css");
29
-
30
28
  function _templateObject() {
31
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
29
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n & ::-ms-reveal {\n display: none;\n }\n"]);
32
30
 
33
31
  _templateObject = function _templateObject() {
34
32
  return data;
@@ -37,7 +35,7 @@ function _templateObject() {
37
35
  return data;
38
36
  }
39
37
 
40
- var DxcPassword = _react["default"].forwardRef(function (_ref, ref) {
38
+ var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
41
39
  var _ref$label = _ref.label,
42
40
  label = _ref$label === void 0 ? "" : _ref$label,
43
41
  _ref$name = _ref.name,
@@ -45,17 +43,17 @@ var DxcPassword = _react["default"].forwardRef(function (_ref, ref) {
45
43
  value = _ref.value,
46
44
  _ref$helperText = _ref.helperText,
47
45
  helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
48
- _ref$error = _ref.error,
49
- error = _ref$error === void 0 ? "" : _ref$error,
50
46
  _ref$clearable = _ref.clearable,
51
47
  clearable = _ref$clearable === void 0 ? false : _ref$clearable,
52
48
  onChange = _ref.onChange,
53
49
  onBlur = _ref.onBlur,
54
- margin = _ref.margin,
50
+ _ref$error = _ref.error,
51
+ error = _ref$error === void 0 ? "" : _ref$error,
55
52
  pattern = _ref.pattern,
56
53
  length = _ref.length,
57
54
  _ref$autocomplete = _ref.autocomplete,
58
55
  autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
56
+ margin = _ref.margin,
59
57
  _ref$size = _ref.size,
60
58
  size = _ref$size === void 0 ? "medium" : _ref$size,
61
59
  _ref$tabIndex = _ref.tabIndex,
@@ -93,6 +91,10 @@ var DxcPassword = _react["default"].forwardRef(function (_ref, ref) {
93
91
  }
94
92
  };
95
93
 
94
+ var getIconTitle = function getIconTitle() {
95
+ return isPasswordVisible ? "Hide password" : "Show password";
96
+ };
97
+
96
98
  (0, _react.useEffect)(function () {
97
99
  setAriaAttributes(false, "Show");
98
100
 
@@ -139,11 +141,12 @@ var DxcPassword = _react["default"].forwardRef(function (_ref, ref) {
139
141
  fill: "none"
140
142
  }), _react["default"].createElement("path", {
141
143
  d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
142
- }))
144
+ })),
145
+ title: getIconTitle()
143
146
  };
144
- return _react["default"].createElement(DXCPassword, {
147
+ return _react["default"].createElement(PasswordInput, {
145
148
  ref: ref
146
- }, _react["default"].createElement(_NewInputText["default"], {
149
+ }, _react["default"].createElement(_TextInput["default"], {
147
150
  ref: inputRef,
148
151
  label: label,
149
152
  name: name,
@@ -170,9 +173,9 @@ var sizes = {
170
173
  fillParent: "100%"
171
174
  };
172
175
 
173
- var DXCPassword = _styledComponents["default"].div(_templateObject());
176
+ var PasswordInput = _styledComponents["default"].div(_templateObject());
174
177
 
175
- DxcPassword.propTypes = {
178
+ DxcPasswordInput.propTypes = {
176
179
  label: _propTypes["default"].string,
177
180
  name: _propTypes["default"].string,
178
181
  value: _propTypes["default"].string,
@@ -196,5 +199,5 @@ DxcPassword.propTypes = {
196
199
  }),
197
200
  tabIndex: _propTypes["default"].number
198
201
  };
199
- var _default = DxcPassword;
202
+ var _default = DxcPasswordInput;
200
203
  exports["default"] = _default;
@@ -0,0 +1,94 @@
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
+ /**
12
+ * Text to be placed above the password.
13
+ */
14
+ label?: string;
15
+ /**
16
+ * Name attribute of the input element.
17
+ */
18
+ name?: string;
19
+ /**
20
+ * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
21
+ */
22
+ value?: string;
23
+ /**
24
+ * Helper text to be placed above the password.
25
+ */
26
+ helperText?: string;
27
+ /**
28
+ * If true, the password input will have an action to clear the entered value.
29
+ */
30
+ clearable?: boolean;
31
+ /**
32
+ * This function will be called when the user types within the input
33
+ * element of the component. An object including the current value and
34
+ * the error (if the value entered is not valid) will be passed to this
35
+ * function. If there is no error, error will be null.
36
+ * */
37
+ onChange?: (val: { value: string; error: string }) => void;
38
+ /**
39
+ * This function will be called when the input element loses the focus.
40
+ * An object including the input value and the error (if the value entered is
41
+ * not valid) will be passed to this function. If there is no error, error will be null.
42
+ */
43
+ onBlur?: (val: { value: string; error: string }) => void;
44
+ /**
45
+ * If it is defined, the component will change its appearance, showing
46
+ * the error below the password input component. If it is not defined, the
47
+ * error messages will be managed internally, but never displayed on its own.
48
+ */
49
+ error?: string;
50
+ /**
51
+ * Regular expression that defines the valid format allowed by the
52
+ * password input. This will be checked both when the input element loses the
53
+ * focus and while typing within it. If the string entered does not match
54
+ * the pattern, the onBlur and onChange functions will be called with the
55
+ * current value and an internal error informing that this value does not
56
+ * match the pattern. If the pattern is met, the error parameter of both
57
+ * events will be null.
58
+ */
59
+ pattern?: string;
60
+ /**
61
+ * Specifies the minimun and maximum length allowed by the password input.
62
+ * This will be checked both when the input element loses the
63
+ * focus and while typing within it. If the string entered does not
64
+ * comply the length, the onBlur and onChange functions will be called
65
+ * with the current value and an internal error informing that the value
66
+ * length does not comply the specified range. If a valid length is
67
+ * reached, the error parameter of both events will be null.
68
+ */
69
+ length?: { min?: number; max?: number };
70
+ /**
71
+ * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
72
+ * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
73
+ */
74
+ autocomplete?: string;
75
+ /**
76
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
77
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
78
+ */
79
+ margin?: Space | Margin;
80
+ /**
81
+ * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
82
+ */
83
+ size?: Size;
84
+ /**
85
+ * Value of the tabindex attribute.
86
+ */
87
+ tabIndex?: number;
88
+ /**
89
+ * Reference to the component.
90
+ */
91
+ ref?: React.RefObject<HTMLDivElement>;
92
+ };
93
+
94
+ export default function DxcPasswordInput(props: Props): JSX.Element;
@@ -80,7 +80,7 @@ function _templateObject2() {
80
80
  }
81
81
 
82
82
  function _templateObject() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n width: ", ";\n display: flex;\n flex-wrap: wrap;\n justify-content: ", ";\n height: ", ";\n align-items: ", ";\n min-width: 100px;\n max-width: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n z-index: ", ";\n"]);
83
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n width: ", ";\n display: flex;\n flex-wrap: wrap;\n justify-content: ", ";\n height: ", ";\n align-items: ", ";\n min-width: 100px;\n max-width: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n z-index: ", ";\n width: 100%;\n"]);
84
84
 
85
85
  _templateObject = function _templateObject() {
86
86
  return data;
@@ -0,0 +1,18 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ label?: string;
11
+ helperText?: string;
12
+ overlay?: boolean;
13
+ value?: number;
14
+ showValue?: boolean,
15
+ margin?: Space | Margin;
16
+ };
17
+
18
+ export default function DxcProgressBar(props: Props): JSX.Element;
File without changes
@@ -0,0 +1,23 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
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
+ checked?: boolean;
12
+ value?: any;
13
+ label?: string;
14
+ labelPosition?: "before" | "after";
15
+ name?: string,
16
+ disabled?: boolean;
17
+ onClick?: void;
18
+ required?: boolean;
19
+ margin?: Space | Margin;
20
+ size?: Size;
21
+ };
22
+
23
+ export default function DxcRadio(props: Props): JSX.Element;
@@ -32,7 +32,7 @@ var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
32
32
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
33
33
 
34
34
  function _templateObject9() {
35
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n overflow: hidden;\n"]);
35
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
36
36
 
37
37
  _templateObject9 = function _templateObject9() {
38
38
  return data;
@@ -0,0 +1,19 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ columns?: any;
11
+ rows?: any;
12
+ itemsPerPage?: number;
13
+ itemsPerPageOptions?: number[];
14
+ itemsPerPageFunction?: void,
15
+ margin?: Space | Margin;
16
+ tabIndex?: number;
17
+ };
18
+
19
+ export default function DxcResultsetTable(props: Props): JSX.Element;