@dxc-technology/halstack-react 0.0.0-2d619b4 → 0.0.0-2f08981

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 (172) hide show
  1. package/README.md +1 -1
  2. package/dist/ThemeContext.js +74 -64
  3. package/dist/V3Select/V3Select.js +549 -0
  4. package/dist/V3Select/index.d.ts +27 -0
  5. package/dist/V3Textarea/V3Textarea.js +264 -0
  6. package/dist/V3Textarea/index.d.ts +27 -0
  7. package/dist/accordion/index.d.ts +28 -0
  8. package/dist/accordion-group/index.d.ts +16 -0
  9. package/dist/alert/Alert.js +5 -5
  10. package/dist/box/index.d.ts +25 -0
  11. package/dist/button/Button.js +3 -3
  12. package/dist/button/index.d.ts +24 -0
  13. package/dist/card/index.d.ts +22 -0
  14. package/dist/checkbox/Checkbox.js +4 -5
  15. package/dist/checkbox/index.d.ts +24 -0
  16. package/dist/chip/index.d.ts +22 -0
  17. package/dist/common/variables.js +231 -91
  18. package/dist/date/index.d.ts +27 -0
  19. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +62 -62
  20. package/dist/{new-date → date-input}/index.d.ts +25 -16
  21. package/dist/dialog/index.d.ts +18 -0
  22. package/dist/dropdown/index.d.ts +26 -0
  23. package/dist/file-input/FileInput.js +13 -10
  24. package/dist/file-input/FileItem.js +33 -9
  25. package/dist/file-input/index.d.ts +81 -0
  26. package/dist/footer/Footer.js +44 -18
  27. package/dist/footer/Icons.js +77 -0
  28. package/dist/footer/index.d.ts +25 -0
  29. package/dist/header/Header.js +122 -55
  30. package/dist/header/Icons.js +59 -0
  31. package/dist/header/index.d.ts +25 -0
  32. package/dist/heading/Heading.js +12 -0
  33. package/dist/heading/index.d.ts +17 -0
  34. package/dist/input-text/Icons.js +22 -0
  35. package/dist/input-text/InputText.js +4 -6
  36. package/dist/input-text/index.d.ts +36 -0
  37. package/dist/layout/ApplicationLayout.js +4 -8
  38. package/dist/layout/Icons.js +55 -0
  39. package/dist/link/index.d.ts +23 -0
  40. package/dist/main.d.ts +39 -5
  41. package/dist/main.js +30 -30
  42. package/dist/{number/Number.js → number-input/NumberInput.js} +9 -11
  43. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  44. package/dist/{number → number-input}/index.d.ts +27 -9
  45. package/dist/paginator/Icons.js +66 -0
  46. package/dist/paginator/Paginator.js +53 -37
  47. package/dist/paginator/index.d.ts +20 -0
  48. package/dist/{password/Password.js → password-input/PasswordInput.js} +14 -11
  49. package/dist/{password → password-input}/index.d.ts +30 -16
  50. package/dist/progress-bar/index.d.ts +18 -0
  51. package/dist/radio/index.d.ts +23 -0
  52. package/dist/resultsetTable/index.d.ts +19 -0
  53. package/dist/select/Select.js +848 -301
  54. package/dist/select/index.d.ts +53 -0
  55. package/dist/sidenav/index.d.ts +13 -0
  56. package/dist/slider/Slider.js +104 -19
  57. package/dist/slider/index.d.ts +29 -0
  58. package/dist/spinner/index.d.ts +17 -0
  59. package/dist/switch/index.d.ts +24 -0
  60. package/dist/table/index.d.ts +13 -0
  61. package/dist/tabs/index.d.ts +19 -0
  62. package/dist/tag/index.d.ts +24 -0
  63. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +132 -135
  64. package/dist/{new-input-text → text-input}/index.d.ts +31 -16
  65. package/dist/textarea/Textarea.js +227 -122
  66. package/dist/{new-textarea → textarea}/index.d.ts +34 -18
  67. package/dist/toggle/index.d.ts +21 -0
  68. package/dist/toggle-group/ToggleGroup.js +132 -28
  69. package/dist/toggle-group/index.d.ts +21 -0
  70. package/dist/upload/buttons-upload/ButtonsUpload.js +7 -11
  71. package/dist/upload/buttons-upload/Icons.js +40 -0
  72. package/dist/upload/dragAndDropArea/DragAndDropArea.js +14 -14
  73. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  74. package/dist/upload/file-upload/FileToUpload.js +26 -21
  75. package/dist/upload/file-upload/Icons.js +66 -0
  76. package/dist/upload/index.d.ts +15 -0
  77. package/dist/upload/transaction/Icons.js +160 -0
  78. package/dist/upload/transaction/Transaction.js +11 -38
  79. package/dist/wizard/Icons.js +65 -0
  80. package/dist/wizard/Wizard.js +3 -9
  81. package/dist/wizard/index.d.ts +18 -0
  82. package/package.json +5 -9
  83. package/test/Date.test.js +13 -11
  84. package/test/{NewDate.test.js → DateInput.test.js} +66 -27
  85. package/test/FileInput.test.js +164 -2
  86. package/test/Footer.test.js +2 -7
  87. package/test/Header.test.js +5 -10
  88. package/test/Heading.test.js +60 -12
  89. package/test/{Number.test.js → NumberInput.test.js} +84 -66
  90. package/test/Paginator.test.js +5 -1
  91. package/test/PasswordInput.test.js +83 -0
  92. package/test/ResultsetTable.test.js +5 -4
  93. package/test/Select.test.js +374 -171
  94. package/test/Slider.test.js +9 -17
  95. package/test/{NewInputText.test.js → TextInput.test.js} +138 -272
  96. package/test/Textarea.test.js +193 -0
  97. package/test/ToggleGroup.test.js +5 -1
  98. package/test/Upload.test.js +1 -1
  99. package/test/V3Select.test.js +212 -0
  100. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  101. package/dist/checkbox/Checkbox.stories.js +0 -144
  102. package/dist/checkbox/readme.md +0 -116
  103. package/dist/date/Date.stories.js +0 -205
  104. package/dist/date/readme.md +0 -73
  105. package/dist/footer/Footer.stories.js +0 -94
  106. package/dist/footer/dxc_logo.svg +0 -15
  107. package/dist/footer/readme.md +0 -41
  108. package/dist/header/Header.stories.js +0 -176
  109. package/dist/header/close_icon.svg +0 -1
  110. package/dist/header/dxc_logo_black.svg +0 -8
  111. package/dist/header/hamb_menu_black.svg +0 -1
  112. package/dist/header/hamb_menu_white.svg +0 -1
  113. package/dist/header/readme.md +0 -33
  114. package/dist/input-text/InputText.stories.js +0 -209
  115. package/dist/input-text/error.svg +0 -1
  116. package/dist/input-text/readme.md +0 -91
  117. package/dist/layout/facebook.svg +0 -45
  118. package/dist/layout/linkedin.svg +0 -50
  119. package/dist/layout/twitter.svg +0 -53
  120. package/dist/link/readme.md +0 -51
  121. package/dist/new-textarea/NewTextarea.js +0 -365
  122. package/dist/paginator/images/next.svg +0 -3
  123. package/dist/paginator/images/nextPage.svg +0 -3
  124. package/dist/paginator/images/previous.svg +0 -3
  125. package/dist/paginator/images/previousPage.svg +0 -3
  126. package/dist/paginator/readme.md +0 -50
  127. package/dist/password/styles.css +0 -3
  128. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  129. package/dist/progress-bar/readme.md +0 -63
  130. package/dist/radio/Radio.stories.js +0 -166
  131. package/dist/radio/readme.md +0 -70
  132. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  133. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  134. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  135. package/dist/slider/Slider.stories.js +0 -241
  136. package/dist/slider/readme.md +0 -64
  137. package/dist/spinner/Spinner.stories.js +0 -183
  138. package/dist/spinner/readme.md +0 -65
  139. package/dist/switch/Switch.stories.js +0 -134
  140. package/dist/switch/readme.md +0 -133
  141. package/dist/tabs/Tabs.stories.js +0 -130
  142. package/dist/tabs/readme.md +0 -78
  143. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  144. package/dist/tabs-for-sections/readme.md +0 -78
  145. package/dist/toggle/Toggle.stories.js +0 -297
  146. package/dist/toggle/readme.md +0 -80
  147. package/dist/upload/Upload.stories.js +0 -72
  148. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  149. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  150. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  151. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  152. package/dist/upload/file-upload/audio-icon.svg +0 -4
  153. package/dist/upload/file-upload/close.svg +0 -4
  154. package/dist/upload/file-upload/file-icon.svg +0 -4
  155. package/dist/upload/file-upload/video-icon.svg +0 -4
  156. package/dist/upload/readme.md +0 -37
  157. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  158. package/dist/upload/transaction/audio-icon.svg +0 -4
  159. package/dist/upload/transaction/error-icon.svg +0 -4
  160. package/dist/upload/transaction/file-icon-err.svg +0 -4
  161. package/dist/upload/transaction/file-icon.svg +0 -4
  162. package/dist/upload/transaction/image-icon-err.svg +0 -4
  163. package/dist/upload/transaction/image-icon.svg +0 -4
  164. package/dist/upload/transaction/success-icon.svg +0 -4
  165. package/dist/upload/transaction/video-icon-err.svg +0 -4
  166. package/dist/upload/transaction/video-icon.svg +0 -4
  167. package/dist/wizard/invalid_icon.svg +0 -5
  168. package/dist/wizard/valid_icon.svg +0 -5
  169. package/dist/wizard/validation-wrong.svg +0 -6
  170. package/test/NewTextarea.test.js +0 -252
  171. package/test/Password.test.js +0 -76
  172. package/test/TabsForSections.test.js +0 -34
@@ -32,7 +32,10 @@ type Props = {
32
32
  */
33
33
  disabled?: boolean;
34
34
  /**
35
- * If true, the number will be optional, showing (Optional) next to the label.
35
+ * If true, the number will be optional, showing '(Optional)'
36
+ * next to the label. Otherwise, the field will be considered required
37
+ * and an error will be passed as a parameter to the OnBlur and onChange
38
+ * functions when it has not been filled.
36
39
  */
37
40
  optional?: boolean;
38
41
  /**
@@ -44,11 +47,19 @@ type Props = {
44
47
  */
45
48
  suffix?: string;
46
49
  /**
47
- * Minimum value allowed by the number.
50
+ * Minimum value allowed by the number input. If the typed value by the user is
51
+ * lower than min, the onBlur and onChange functions will be called with
52
+ * the current value and an internal error informing that the current
53
+ * value is not correct. If a valid state is reached, the error parameter
54
+ * will be null in both events.
48
55
  */
49
56
  min?: number;
50
57
  /**
51
- * Maximum value allowed by the number.
58
+ * Maximum value allowed by the number input. If the typed value by the user
59
+ * surpasses max, the onBlur and onChange functions will be called with
60
+ * the current value and an internal error informing that the current
61
+ * value is not correct. If a valid state is reached, the error parameter
62
+ * will be null in both events.
52
63
  */
53
64
  max?: number;
54
65
  /**
@@ -56,16 +67,23 @@ type Props = {
56
67
  */
57
68
  step?: number;
58
69
  /**
59
- * This function will be called when the user types within the input element of the component. The new value will be passed as a parameter.
70
+ * This function will be called when the user types within the input
71
+ * element of the component. An object including the current value and
72
+ * the error (if the value entered is not valid) will be passed to this
73
+ * function. If there is no error, error will be null.
60
74
  */
61
- onChange?: (value: string) => void;
75
+ onChange?: (val: { value: string; error: string }) => void;
62
76
  /**
63
- * This function will be called when the input element loses the focus. An object including the value and the error (if the value entered is not valid)
64
- * will be passed to this function. If there is no error, error will be null.
77
+ * This function will be called when the input element loses the focus.
78
+ * An object including the input value and the error (if the value
79
+ * entered is not valid) will be passed to this function. If there is no error,
80
+ * error will be null.
65
81
  */
66
82
  onBlur?: (val: { value: string; error: string }) => void;
67
83
  /**
68
- * If it is defined, the component will change its appearance, showing the error below the number component. If it is not defined, the error messages will be created and managed internally.
84
+ * If it is defined, the component will change its appearance, showing
85
+ * the error below the input component. If it is not defined, the error
86
+ * messages will be managed internally, but never displayed on its own.
69
87
  */
70
88
  error?: string;
71
89
  /**
@@ -92,4 +110,4 @@ type Props = {
92
110
  ref?: React.RefObject<HTMLDivElement>;
93
111
  };
94
112
 
95
- export default function DxcNumber(props: Props): JSX.Element;
113
+ export default function DxcNumberInput(props: Props): JSX.Element;
@@ -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,
@@ -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;
@@ -25,41 +25,55 @@ type Props = {
25
25
  */
26
26
  helperText?: string;
27
27
  /**
28
- * If true, the password will have an action to clear the entered value.
28
+ * If true, the password input will have an action to clear the entered value.
29
29
  */
30
30
  clearable?: boolean;
31
31
  /**
32
- * This function will be called when the user types within the input element of the component. The new value will be passed as a parameter.
33
- */
34
- onChange?: (value: string) => void;
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;
35
38
  /**
36
- * This function will be called when the input element loses the focus. An object including the value and the error (if the value entered is not valid) will be passed to this function.
37
- * If there is no error, error will be null.
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.
38
42
  */
39
43
  onBlur?: (val: { value: string; error: string }) => void;
40
44
  /**
41
- * If it is defined, the component will change its appearance, showing the error below the password component. If it is not defined, the error messages will be created and managed internally.
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.
42
48
  */
43
49
  error?: string;
44
50
  /**
45
- * Regular expression that defines the valid format allowed by the password. This will be checked when the input element loses the focus.
46
- * If the value entered does not match the pattern, the onBlur function will be called with the value entered and the error informing that the value does not match the pattern as parameters.
47
- * If the pattern is accomplished, the error parameter will be null.
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.
48
58
  */
49
59
  pattern?: string;
50
60
  /**
51
- * Specifies the minimun and maximum length allowed by the password. This will be checked when the password loses the focus. If the value entered does not comply the length,
52
- * the onBlur function will be called with the value entered and the error informing that the value does not comply the length as parameters.
53
- * If the length is accomplished, the error parameter will be null.
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.
54
68
  */
55
69
  length?: { min?: number; max?: number };
56
70
  /**
57
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
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.
58
72
  * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
59
73
  */
60
74
  autocomplete?: string;
61
75
  /**
62
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
76
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
63
77
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
64
78
  */
65
79
  margin?: Space | Margin;
@@ -77,4 +91,4 @@ type Props = {
77
91
  ref?: React.RefObject<HTMLDivElement>;
78
92
  };
79
93
 
80
- export default function DxcPassword(props: Props): JSX.Element;
94
+ export default function DxcPasswordInput(props: Props): JSX.Element;
@@ -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;
@@ -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;
@@ -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;