@dxc-technology/halstack-react 0.0.0-e628009 → 0.0.0-e961efe

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 (82) hide show
  1. package/README.md +1 -1
  2. package/babel.config.js +0 -1
  3. package/dist/ThemeContext.js +40 -38
  4. package/dist/V3Select/V3Select.js +549 -0
  5. package/dist/V3Select/index.d.ts +27 -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 +1 -1
  10. package/dist/box/index.d.ts +25 -0
  11. package/dist/button/index.d.ts +24 -0
  12. package/dist/card/index.d.ts +22 -0
  13. package/dist/checkbox/Checkbox.js +4 -5
  14. package/dist/checkbox/index.d.ts +24 -0
  15. package/dist/chip/index.d.ts +22 -0
  16. package/dist/common/variables.js +128 -123
  17. package/dist/date/Date.js +6 -6
  18. package/dist/date/index.d.ts +27 -0
  19. package/dist/dialog/index.d.ts +18 -0
  20. package/dist/dropdown/index.d.ts +26 -0
  21. package/dist/file-input/FileItem.js +8 -1
  22. package/dist/file-input/index.d.ts +1 -1
  23. package/dist/footer/index.d.ts +25 -0
  24. package/dist/header/Header.js +59 -23
  25. package/dist/header/index.d.ts +25 -0
  26. package/dist/heading/index.d.ts +17 -0
  27. package/dist/input-text/InputText.js +4 -4
  28. package/dist/input-text/index.d.ts +36 -0
  29. package/dist/link/index.d.ts +23 -0
  30. package/dist/main.d.ts +36 -4
  31. package/dist/main.js +9 -17
  32. package/dist/paginator/Paginator.js +50 -28
  33. package/dist/paginator/index.d.ts +20 -0
  34. package/dist/password-input/PasswordInput.js +6 -1
  35. package/dist/progress-bar/index.d.ts +18 -0
  36. package/dist/radio/index.d.ts +23 -0
  37. package/dist/resultsetTable/index.d.ts +19 -0
  38. package/dist/select/Select.js +848 -301
  39. package/dist/{new-select → select}/index.d.ts +1 -1
  40. package/dist/sidenav/index.d.ts +13 -0
  41. package/dist/slider/index.d.ts +29 -0
  42. package/dist/spinner/index.d.ts +17 -0
  43. package/dist/stories/Button.js +71 -0
  44. package/dist/stories/Button.stories.js +55 -0
  45. package/dist/stories/Header.js +67 -0
  46. package/dist/stories/Header.stories.js +31 -0
  47. package/dist/stories/Introduction.stories.mdx +211 -0
  48. package/dist/stories/Page.js +68 -0
  49. package/dist/stories/Page.stories.js +39 -0
  50. package/dist/stories/assets/code-brackets.svg +1 -0
  51. package/dist/stories/assets/colors.svg +1 -0
  52. package/dist/stories/assets/comments.svg +1 -0
  53. package/dist/stories/assets/direction.svg +1 -0
  54. package/dist/stories/assets/flow.svg +1 -0
  55. package/dist/stories/assets/plugin.svg +1 -0
  56. package/dist/stories/assets/repo.svg +1 -0
  57. package/dist/stories/assets/stackalt.svg +1 -0
  58. package/dist/stories/button.css +30 -0
  59. package/dist/stories/header.css +26 -0
  60. package/dist/stories/page.css +69 -0
  61. package/dist/switch/index.d.ts +24 -0
  62. package/dist/table/index.d.ts +13 -0
  63. package/dist/tabs/index.d.ts +19 -0
  64. package/dist/tag/index.d.ts +24 -0
  65. package/dist/text-input/TextInput.js +8 -5
  66. package/dist/toggle/index.d.ts +21 -0
  67. package/dist/toggle-group/index.d.ts +21 -0
  68. package/dist/upload/Upload.js +3 -3
  69. package/dist/upload/index.d.ts +15 -0
  70. package/dist/wizard/index.d.ts +18 -0
  71. package/package.json +14 -10
  72. package/test/Date.test.js +34 -36
  73. package/test/InputText.test.js +17 -26
  74. package/test/Paginator.test.js +5 -1
  75. package/test/ResultsetTable.test.js +5 -4
  76. package/test/Select.test.js +374 -171
  77. package/test/TextInput.test.js +5 -5
  78. package/test/Upload.test.js +4 -4
  79. package/test/V3Select.test.js +212 -0
  80. package/dist/new-select/NewSelect.js +0 -836
  81. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  82. package/test/TabsForSections.test.js +0 -34
@@ -29,9 +29,19 @@ var _Icons = require("./Icons");
29
29
 
30
30
  var _BackgroundColorContext = require("../BackgroundColorContext.js");
31
31
 
32
- function _templateObject8() {
32
+ function _templateObject9() {
33
33
  var data = (0, _taggedTemplateLiteral2["default"])([""]);
34
34
 
35
+ _templateObject9 = function _templateObject9() {
36
+ return data;
37
+ };
38
+
39
+ return data;
40
+ }
41
+
42
+ function _templateObject8() {
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"]);
44
+
35
45
  _templateObject8 = function _templateObject8() {
36
46
  return data;
37
47
  };
@@ -40,7 +50,7 @@ function _templateObject8() {
40
50
  }
41
51
 
42
52
  function _templateObject7() {
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"]);
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"]);
44
54
 
45
55
  _templateObject7 = function _templateObject7() {
46
56
  return data;
@@ -50,7 +60,7 @@ function _templateObject7() {
50
60
  }
51
61
 
52
62
  function _templateObject6() {
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"]);
63
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-right: ", ";\n margin-left: ", ";\n"]);
54
64
 
55
65
  _templateObject6 = function _templateObject6() {
56
66
  return data;
@@ -60,7 +70,7 @@ function _templateObject6() {
60
70
  }
61
71
 
62
72
  function _templateObject5() {
63
- 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"]);
64
74
 
65
75
  _templateObject5 = function _templateObject5() {
66
76
  return data;
@@ -70,7 +80,7 @@ function _templateObject5() {
70
80
  }
71
81
 
72
82
  function _templateObject4() {
73
- 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"]);
74
84
 
75
85
  _templateObject4 = function _templateObject4() {
76
86
  return data;
@@ -80,7 +90,7 @@ function _templateObject4() {
80
90
  }
81
91
 
82
92
  function _templateObject3() {
83
- 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"]);
84
94
 
85
95
  _templateObject3 = function _templateObject3() {
86
96
  return data;
@@ -90,7 +100,7 @@ function _templateObject3() {
90
100
  }
91
101
 
92
102
  function _templateObject2() {
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"]);
103
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n max-width: 100px;\n"]);
94
104
 
95
105
  _templateObject2 = function _templateObject2() {
96
106
  return data;
@@ -133,18 +143,23 @@ var DxcPaginator = function DxcPaginator(_ref) {
133
143
  color: colorsTheme.paginator.backgroundColor
134
144
  }, _react["default"].createElement(DxcPaginatorContainer, {
135
145
  disabled: currentPageInternal === 1
136
- }, _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"], {
137
147
  options: itemsPerPageOptions.map(function (num) {
138
148
  return {
139
- label: num,
140
- value: num
149
+ label: num.toString(),
150
+ value: num.toString()
141
151
  };
142
152
  }),
143
- onChange: itemsPerPageFunction,
144
- value: itemsPerPage,
145
- 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
+ },
146
161
  tabIndex: tabIndex
147
- })), _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"], {
148
163
  size: "small",
149
164
  mode: "secondary",
150
165
  disabled: currentPageInternal === 1 || currentPageInternal === 0,
@@ -170,18 +185,23 @@ var DxcPaginator = function DxcPaginator(_ref) {
170
185
  onClick: function onClick() {
171
186
  onPageChange(currentPage - 1);
172
187
  }
173
- }), 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"], {
174
189
  options: (0, _toConsumableArray2["default"])(Array(totalPages).keys()).map(function (num) {
175
190
  return {
176
- label: num + 1,
177
- value: num + 1
191
+ label: (num + 1).toString(),
192
+ value: (num + 1).toString()
178
193
  };
179
194
  }),
180
- onChange: onPageChange,
181
- value: currentPage,
182
- 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
+ },
183
203
  tabIndex: tabIndex
184
- })) || _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"], {
185
205
  size: "small",
186
206
  mode: "secondary",
187
207
  disabled: currentPageInternal === totalPages,
@@ -230,35 +250,37 @@ var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject(),
230
250
  return props.theme.fontColor;
231
251
  });
232
252
 
233
- 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) {
234
256
  return props.theme.itemsPerPageSelectorMarginRight;
235
257
  }, function (props) {
236
258
  return props.theme.itemsPerPageSelectorMarginLeft;
237
259
  });
238
260
 
239
- var ItemsLabel = _styledComponents["default"].span(_templateObject3());
261
+ var ItemsLabel = _styledComponents["default"].span(_templateObject4());
240
262
 
241
- var GoToLabel = _styledComponents["default"].span(_templateObject4());
263
+ var GoToLabel = _styledComponents["default"].span(_templateObject5());
242
264
 
243
- var TotalItemsContainer = _styledComponents["default"].span(_templateObject5(), function (props) {
265
+ var TotalItemsContainer = _styledComponents["default"].span(_templateObject6(), function (props) {
244
266
  return props.theme.totalItemsContainerMarginRight;
245
267
  }, function (props) {
246
268
  return props.theme.totalItemsContainerMarginLeft;
247
269
  });
248
270
 
249
- var LabelsContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
271
+ var LabelsContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
250
272
  return props.theme.marginRight;
251
273
  }, function (props) {
252
274
  return props.theme.marginLeft;
253
275
  });
254
276
 
255
- var PageToSelectContainer = _styledComponents["default"].span(_templateObject7(), function (props) {
277
+ var PageToSelectContainer = _styledComponents["default"].span(_templateObject8(), function (props) {
256
278
  return props.theme.pageSelectorMarginRight;
257
279
  }, function (props) {
258
280
  return props.theme.pageSelectorMarginLeft;
259
281
  });
260
282
 
261
- var TextContainer = _styledComponents["default"].span(_templateObject8());
283
+ var TextContainer = _styledComponents["default"].span(_templateObject9());
262
284
 
263
285
  DxcPaginator.propTypes = {
264
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;
@@ -91,6 +91,10 @@ var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
91
91
  }
92
92
  };
93
93
 
94
+ var getIconTitle = function getIconTitle() {
95
+ return isPasswordVisible ? "Hide password" : "Show password";
96
+ };
97
+
94
98
  (0, _react.useEffect)(function () {
95
99
  setAriaAttributes(false, "Show");
96
100
 
@@ -137,7 +141,8 @@ var DxcPasswordInput = _react["default"].forwardRef(function (_ref, ref) {
137
141
  fill: "none"
138
142
  }), _react["default"].createElement("path", {
139
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"
140
- }))
144
+ })),
145
+ title: getIconTitle()
141
146
  };
142
147
  return _react["default"].createElement(PasswordInput, {
143
148
  ref: ref
@@ -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;