@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.
- package/{dist/BackgroundColorContext.js → BackgroundColorContext.js} +0 -0
- package/{dist/ThemeContext.js → ThemeContext.js} +74 -64
- package/{dist/select/Select.js → V3Select/V3Select.js} +127 -163
- package/V3Select/index.d.ts +27 -0
- package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +4 -4
- package/V3Textarea/index.d.ts +27 -0
- package/{dist/accordion → accordion}/Accordion.js +0 -0
- package/accordion/index.d.ts +28 -0
- package/{dist/accordion-group → accordion-group}/AccordionGroup.js +0 -0
- package/accordion-group/index.d.ts +16 -0
- package/{dist/alert → alert}/Alert.js +6 -6
- package/alert/index.d.ts +51 -0
- package/{dist/badge → badge}/Badge.js +0 -0
- package/{dist/box → box}/Box.js +0 -0
- package/box/index.d.ts +25 -0
- package/{dist/button → button}/Button.js +3 -3
- package/button/Button.stories.js +27 -0
- package/button/index.d.ts +24 -0
- package/{dist/card → card}/Card.js +0 -0
- package/card/index.d.ts +22 -0
- package/{dist/checkbox → checkbox}/Checkbox.js +4 -5
- package/checkbox/index.d.ts +24 -0
- package/{dist/chip → chip}/Chip.js +0 -0
- package/chip/index.d.ts +22 -0
- package/{dist/common → common}/OpenSans.css +0 -0
- package/{dist/common → common}/RequiredComponent.js +0 -0
- package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/{dist/common → common}/utils.js +0 -0
- package/{dist/common → common}/variables.js +344 -138
- package/{dist/date → date}/Date.js +4 -6
- package/date/index.d.ts +27 -0
- package/{dist/new-date/NewDate.js → date-input/DateInput.js} +69 -72
- package/date-input/index.d.ts +95 -0
- package/{dist/dialog → dialog}/Dialog.js +0 -0
- package/dialog/index.d.ts +18 -0
- package/{dist/dropdown → dropdown}/Dropdown.js +0 -0
- package/dropdown/index.d.ts +26 -0
- package/file-input/FileInput.js +644 -0
- package/file-input/FileItem.js +287 -0
- package/file-input/index.d.ts +81 -0
- package/{dist/footer → footer}/Footer.js +44 -18
- package/footer/Icons.js +77 -0
- package/footer/index.d.ts +25 -0
- package/{dist/header → header}/Header.js +122 -55
- package/header/Icons.js +59 -0
- package/header/index.d.ts +25 -0
- package/{dist/heading → heading}/Heading.js +12 -0
- package/heading/index.d.ts +17 -0
- package/input-text/Icons.js +22 -0
- package/{dist/input-text → input-text}/InputText.js +7 -9
- package/input-text/index.d.ts +36 -0
- package/{dist/layout → layout}/ApplicationLayout.js +5 -9
- package/layout/Icons.js +55 -0
- package/{dist/link → link}/Link.js +4 -8
- package/link/index.d.ts +23 -0
- package/main.d.ts +40 -0
- package/{dist/main.js → main.js} +37 -29
- package/{dist/number/Number.js → number-input/NumberInput.js} +9 -11
- package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
- package/number-input/index.d.ts +113 -0
- package/package.json +21 -16
- package/paginator/Icons.js +66 -0
- package/{dist/paginator → paginator}/Paginator.js +53 -37
- package/paginator/index.d.ts +20 -0
- package/{dist/password/Password.js → password-input/PasswordInput.js} +17 -14
- package/password-input/index.d.ts +94 -0
- package/{dist/progress-bar → progress-bar}/ProgressBar.js +1 -1
- package/progress-bar/index.d.ts +18 -0
- package/{dist/radio → radio}/Radio.js +0 -0
- package/radio/index.d.ts +23 -0
- package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +1 -1
- package/resultsetTable/index.d.ts +19 -0
- package/select/Select.js +1138 -0
- package/select/index.d.ts +131 -0
- package/{dist/sidenav → sidenav}/Sidenav.js +6 -4
- package/sidenav/index.d.ts +13 -0
- package/{dist/slider → slider}/Slider.js +104 -19
- package/slider/index.d.ts +29 -0
- package/{dist/spinner → spinner}/Spinner.js +0 -0
- package/spinner/index.d.ts +17 -0
- package/{dist/switch → switch}/Switch.js +0 -0
- package/switch/index.d.ts +24 -0
- package/{dist/table → table}/Table.js +0 -0
- package/table/index.d.ts +13 -0
- package/{dist/tabs → tabs}/Tabs.js +0 -0
- package/tabs/index.d.ts +19 -0
- package/{dist/tag → tag}/Tag.js +26 -32
- package/tag/index.d.ts +24 -0
- package/{dist/new-input-text/NewInputText.js → text-input/TextInput.js} +343 -312
- package/text-input/index.d.ts +135 -0
- package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +68 -45
- package/textarea/index.d.ts +117 -0
- package/{dist/toggle → toggle}/Toggle.js +0 -0
- package/toggle/index.d.ts +21 -0
- package/{dist/toggle-group → toggle-group}/ToggleGroup.js +132 -28
- package/toggle-group/index.d.ts +21 -0
- package/{dist/upload → upload}/Upload.js +0 -0
- package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +7 -11
- package/upload/buttons-upload/Icons.js +40 -0
- package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +14 -14
- package/upload/dragAndDropArea/Icons.js +39 -0
- package/{dist/upload → upload}/file-upload/FileToUpload.js +26 -21
- package/upload/file-upload/Icons.js +66 -0
- package/{dist/upload → upload}/files-upload/FilesToUpload.js +0 -0
- package/upload/index.d.ts +15 -0
- package/upload/transaction/Icons.js +160 -0
- package/{dist/upload → upload}/transaction/Transaction.js +11 -38
- package/{dist/upload → upload}/transactions/Transactions.js +0 -0
- package/{dist/useTheme.js → useTheme.js} +0 -0
- package/wizard/Icons.js +65 -0
- package/{dist/wizard → wizard}/Wizard.js +3 -9
- package/wizard/index.d.ts +18 -0
- package/README.md +0 -66
- package/babel.config.js +0 -8
- package/dist/checkbox/Checkbox.stories.js +0 -144
- package/dist/checkbox/readme.md +0 -116
- package/dist/date/Date.stories.js +0 -205
- package/dist/date/readme.md +0 -73
- package/dist/footer/Footer.stories.js +0 -94
- package/dist/footer/dxc_logo.svg +0 -15
- package/dist/footer/readme.md +0 -41
- package/dist/header/Header.stories.js +0 -176
- package/dist/header/close_icon.svg +0 -1
- package/dist/header/dxc_logo_black.svg +0 -8
- package/dist/header/hamb_menu_black.svg +0 -1
- package/dist/header/hamb_menu_white.svg +0 -1
- package/dist/header/readme.md +0 -33
- package/dist/input-text/InputText.stories.js +0 -209
- package/dist/input-text/error.svg +0 -1
- package/dist/input-text/readme.md +0 -91
- package/dist/layout/facebook.svg +0 -45
- package/dist/layout/linkedin.svg +0 -50
- package/dist/layout/twitter.svg +0 -53
- package/dist/link/readme.md +0 -51
- package/dist/paginator/images/next.svg +0 -3
- package/dist/paginator/images/nextPage.svg +0 -3
- package/dist/paginator/images/previous.svg +0 -3
- package/dist/paginator/images/previousPage.svg +0 -3
- package/dist/paginator/readme.md +0 -50
- package/dist/password/styles.css +0 -3
- package/dist/progress-bar/ProgressBar.stories.js +0 -280
- package/dist/progress-bar/readme.md +0 -63
- package/dist/radio/Radio.stories.js +0 -166
- package/dist/radio/readme.md +0 -70
- package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
- package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
- package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
- package/dist/select/Select.stories.js +0 -235
- package/dist/select/readme.md +0 -72
- package/dist/slider/Slider.stories.js +0 -241
- package/dist/slider/readme.md +0 -64
- package/dist/spinner/Spinner.stories.js +0 -183
- package/dist/spinner/readme.md +0 -65
- package/dist/switch/Switch.stories.js +0 -134
- package/dist/switch/readme.md +0 -133
- package/dist/tabs/Tabs.stories.js +0 -130
- package/dist/tabs/readme.md +0 -78
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- package/dist/tabs-for-sections/readme.md +0 -78
- package/dist/toggle/Toggle.stories.js +0 -297
- package/dist/toggle/readme.md +0 -80
- package/dist/upload/Upload.stories.js +0 -72
- package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
- package/dist/upload/buttons-upload/upload-button.svg +0 -1
- package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
- package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
- package/dist/upload/file-upload/audio-icon.svg +0 -4
- package/dist/upload/file-upload/close.svg +0 -4
- package/dist/upload/file-upload/file-icon.svg +0 -4
- package/dist/upload/file-upload/video-icon.svg +0 -4
- package/dist/upload/readme.md +0 -37
- package/dist/upload/transaction/audio-icon-err.svg +0 -4
- package/dist/upload/transaction/audio-icon.svg +0 -4
- package/dist/upload/transaction/error-icon.svg +0 -4
- package/dist/upload/transaction/file-icon-err.svg +0 -4
- package/dist/upload/transaction/file-icon.svg +0 -4
- package/dist/upload/transaction/image-icon-err.svg +0 -4
- package/dist/upload/transaction/image-icon.svg +0 -4
- package/dist/upload/transaction/success-icon.svg +0 -4
- package/dist/upload/transaction/video-icon-err.svg +0 -4
- package/dist/upload/transaction/video-icon.svg +0 -4
- package/dist/wizard/invalid_icon.svg +0 -5
- package/dist/wizard/valid_icon.svg +0 -5
- package/dist/wizard/validation-wrong.svg +0 -6
- package/test/Accordion.test.js +0 -33
- package/test/AccordionGroup.test.js +0 -125
- package/test/Alert.test.js +0 -53
- package/test/Box.test.js +0 -10
- package/test/Button.test.js +0 -18
- package/test/Card.test.js +0 -30
- package/test/Checkbox.test.js +0 -45
- package/test/Chip.test.js +0 -25
- package/test/Date.test.js +0 -393
- package/test/Dialog.test.js +0 -23
- package/test/Dropdown.test.js +0 -145
- package/test/Footer.test.js +0 -99
- package/test/Header.test.js +0 -39
- package/test/Heading.test.js +0 -35
- package/test/InputText.test.js +0 -240
- package/test/Link.test.js +0 -43
- package/test/NewDate.test.js +0 -203
- package/test/NewInputText.test.js +0 -817
- package/test/NewTextarea.test.js +0 -201
- package/test/Number.test.js +0 -241
- package/test/Paginator.test.js +0 -177
- package/test/Password.test.js +0 -76
- package/test/ProgressBar.test.js +0 -35
- package/test/Radio.test.js +0 -37
- package/test/ResultsetTable.test.js +0 -330
- package/test/Select.test.js +0 -189
- package/test/Sidenav.test.js +0 -45
- package/test/Slider.test.js +0 -82
- package/test/Spinner.test.js +0 -32
- package/test/Switch.test.js +0 -45
- package/test/Table.test.js +0 -36
- package/test/Tabs.test.js +0 -109
- package/test/TabsForSections.test.js +0 -34
- package/test/Tag.test.js +0 -32
- package/test/TextArea.test.js +0 -52
- package/test/ToggleGroup.test.js +0 -81
- package/test/Upload.test.js +0 -60
- package/test/Wizard.test.js +0 -130
- package/test/mocks/pngMock.js +0 -1
- 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
|
|
28
|
+
var _Icons = require("./Icons");
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var _BackgroundColorContext = require("../BackgroundColorContext.js");
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
function _templateObject9() {
|
|
33
|
+
var data = (0, _taggedTemplateLiteral2["default"])([""]);
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
_templateObject9 = function _templateObject9() {
|
|
36
|
+
return data;
|
|
37
|
+
};
|
|
35
38
|
|
|
36
|
-
|
|
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
|
|
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
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
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:
|
|
150
|
-
|
|
151
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
187
|
-
|
|
188
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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(
|
|
261
|
+
var ItemsLabel = _styledComponents["default"].span(_templateObject4());
|
|
246
262
|
|
|
247
|
-
var GoToLabel = _styledComponents["default"].span(
|
|
263
|
+
var GoToLabel = _styledComponents["default"].span(_templateObject5());
|
|
248
264
|
|
|
249
|
-
var TotalItemsContainer = _styledComponents["default"].span(
|
|
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(
|
|
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(
|
|
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(
|
|
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
|
|
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
|
|
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
|
-
|
|
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(
|
|
147
|
+
return _react["default"].createElement(PasswordInput, {
|
|
145
148
|
ref: ref
|
|
146
|
-
}, _react["default"].createElement(
|
|
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
|
|
176
|
+
var PasswordInput = _styledComponents["default"].div(_templateObject());
|
|
174
177
|
|
|
175
|
-
|
|
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 =
|
|
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
|
package/radio/index.d.ts
ADDED
|
@@ -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
|
|
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;
|