@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.
- package/README.md +1 -1
- package/babel.config.js +0 -1
- package/dist/ThemeContext.js +40 -38
- package/dist/V3Select/V3Select.js +549 -0
- package/dist/V3Select/index.d.ts +27 -0
- package/dist/V3Textarea/index.d.ts +27 -0
- package/dist/accordion/index.d.ts +28 -0
- package/dist/accordion-group/index.d.ts +16 -0
- package/dist/alert/Alert.js +1 -1
- package/dist/box/index.d.ts +25 -0
- package/dist/button/index.d.ts +24 -0
- package/dist/card/index.d.ts +22 -0
- package/dist/checkbox/Checkbox.js +4 -5
- package/dist/checkbox/index.d.ts +24 -0
- package/dist/chip/index.d.ts +22 -0
- package/dist/common/variables.js +128 -123
- package/dist/date/Date.js +6 -6
- package/dist/date/index.d.ts +27 -0
- package/dist/dialog/index.d.ts +18 -0
- package/dist/dropdown/index.d.ts +26 -0
- package/dist/file-input/FileItem.js +8 -1
- package/dist/file-input/index.d.ts +1 -1
- package/dist/footer/index.d.ts +25 -0
- package/dist/header/Header.js +59 -23
- package/dist/header/index.d.ts +25 -0
- package/dist/heading/index.d.ts +17 -0
- package/dist/input-text/InputText.js +4 -4
- package/dist/input-text/index.d.ts +36 -0
- package/dist/link/index.d.ts +23 -0
- package/dist/main.d.ts +36 -4
- package/dist/main.js +9 -17
- package/dist/paginator/Paginator.js +50 -28
- package/dist/paginator/index.d.ts +20 -0
- package/dist/password-input/PasswordInput.js +6 -1
- package/dist/progress-bar/index.d.ts +18 -0
- package/dist/radio/index.d.ts +23 -0
- package/dist/resultsetTable/index.d.ts +19 -0
- package/dist/select/Select.js +848 -301
- package/dist/{new-select → select}/index.d.ts +1 -1
- package/dist/sidenav/index.d.ts +13 -0
- package/dist/slider/index.d.ts +29 -0
- package/dist/spinner/index.d.ts +17 -0
- package/dist/stories/Button.js +71 -0
- package/dist/stories/Button.stories.js +55 -0
- package/dist/stories/Header.js +67 -0
- package/dist/stories/Header.stories.js +31 -0
- package/dist/stories/Introduction.stories.mdx +211 -0
- package/dist/stories/Page.js +68 -0
- package/dist/stories/Page.stories.js +39 -0
- package/dist/stories/assets/code-brackets.svg +1 -0
- package/dist/stories/assets/colors.svg +1 -0
- package/dist/stories/assets/comments.svg +1 -0
- package/dist/stories/assets/direction.svg +1 -0
- package/dist/stories/assets/flow.svg +1 -0
- package/dist/stories/assets/plugin.svg +1 -0
- package/dist/stories/assets/repo.svg +1 -0
- package/dist/stories/assets/stackalt.svg +1 -0
- package/dist/stories/button.css +30 -0
- package/dist/stories/header.css +26 -0
- package/dist/stories/page.css +69 -0
- package/dist/switch/index.d.ts +24 -0
- package/dist/table/index.d.ts +13 -0
- package/dist/tabs/index.d.ts +19 -0
- package/dist/tag/index.d.ts +24 -0
- package/dist/text-input/TextInput.js +8 -5
- package/dist/toggle/index.d.ts +21 -0
- package/dist/toggle-group/index.d.ts +21 -0
- package/dist/upload/Upload.js +3 -3
- package/dist/upload/index.d.ts +15 -0
- package/dist/wizard/index.d.ts +18 -0
- package/package.json +14 -10
- package/test/Date.test.js +34 -36
- package/test/InputText.test.js +17 -26
- package/test/Paginator.test.js +5 -1
- package/test/ResultsetTable.test.js +5 -4
- package/test/Select.test.js +374 -171
- package/test/TextInput.test.js +5 -5
- package/test/Upload.test.js +4 -4
- package/test/V3Select.test.js +212 -0
- package/dist/new-select/NewSelect.js +0 -836
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- 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
|
|
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
|
|
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
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
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:
|
|
144
|
-
|
|
145
|
-
|
|
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:
|
|
181
|
-
|
|
182
|
-
|
|
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
|
|
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(
|
|
261
|
+
var ItemsLabel = _styledComponents["default"].span(_templateObject4());
|
|
240
262
|
|
|
241
|
-
var GoToLabel = _styledComponents["default"].span(
|
|
263
|
+
var GoToLabel = _styledComponents["default"].span(_templateObject5());
|
|
242
264
|
|
|
243
|
-
var TotalItemsContainer = _styledComponents["default"].span(
|
|
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(
|
|
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(
|
|
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(
|
|
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;
|