@dxc-technology/halstack-react 0.0.0-b821bfb → 0.0.0-ba408d4
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/BackgroundColorContext.js +8 -4
- package/ThemeContext.js +84 -88
- package/V3Select/V3Select.js +33 -127
- package/V3Textarea/V3Textarea.js +10 -14
- package/accordion/Accordion.js +23 -87
- package/accordion-group/AccordionGroup.js +13 -15
- package/alert/Alert.js +38 -132
- package/badge/Badge.js +9 -13
- package/box/Box.js +9 -13
- package/button/Button.d.ts +4 -0
- package/button/Button.js +15 -71
- package/button/Button.stories.tsx +306 -0
- package/button/types.d.ts +57 -0
- package/button/types.js +5 -0
- package/card/Card.js +19 -73
- package/checkbox/Checkbox.js +13 -37
- package/chip/Chip.js +17 -61
- package/common/RequiredComponent.js +3 -11
- package/common/variables.js +3 -1
- package/date/Date.js +16 -22
- package/date-input/DateInput.js +18 -22
- package/dialog/Dialog.js +16 -50
- package/dropdown/Dropdown.js +37 -131
- package/file-input/FileInput.js +48 -160
- package/file-input/FileItem.js +29 -123
- package/footer/Footer.js +34 -158
- package/footer/Icons.js +13 -13
- package/header/Header.js +35 -179
- package/header/Icons.js +11 -11
- package/heading/Heading.js +18 -72
- package/input-text/Icons.js +2 -2
- package/input-text/InputText.js +36 -130
- package/input-text/index.d.ts +1 -1
- package/layout/ApplicationLayout.js +31 -123
- package/layout/Icons.js +7 -7
- package/link/Link.js +18 -72
- package/main.d.ts +44 -40
- package/main.js +91 -87
- package/number-input/NumberInput.js +5 -13
- package/number-input/NumberInputContext.js +1 -1
- package/package.json +14 -11
- package/paginator/Icons.js +9 -9
- package/paginator/Paginator.d.ts +4 -0
- package/paginator/Paginator.js +24 -131
- package/paginator/types.d.ts +38 -0
- package/paginator/types.js +5 -0
- package/password-input/PasswordInput.js +15 -19
- package/progress-bar/ProgressBar.js +18 -72
- package/radio/Radio.js +12 -26
- package/resultsetTable/ResultsetTable.js +35 -119
- package/select/Select.js +161 -434
- package/sidenav/Sidenav.js +15 -49
- package/slider/Slider.js +19 -83
- package/spinner/Spinner.js +38 -152
- package/switch/Switch.js +12 -26
- package/table/Table.js +10 -24
- package/tabs/Tabs.js +26 -110
- package/tag/Tag.js +22 -96
- package/text-input/TextInput.js +104 -271
- package/textarea/Textarea.js +20 -72
- package/toggle/Toggle.js +15 -49
- package/toggle-group/ToggleGroup.js +23 -107
- package/upload/Upload.js +11 -15
- package/upload/buttons-upload/ButtonsUpload.js +13 -37
- package/upload/buttons-upload/Icons.js +7 -7
- package/upload/dragAndDropArea/DragAndDropArea.js +24 -128
- package/upload/dragAndDropArea/Icons.js +6 -6
- package/upload/file-upload/FileToUpload.js +16 -90
- package/upload/file-upload/Icons.js +13 -13
- package/upload/files-upload/FilesToUpload.js +12 -26
- package/upload/transaction/Icons.js +31 -31
- package/upload/transaction/Transaction.js +17 -61
- package/upload/transactions/Transactions.js +13 -57
- package/wizard/Icons.js +8 -8
- package/wizard/Wizard.js +31 -165
- package/button/Button.stories.js +0 -27
- package/button/index.d.ts +0 -24
- package/paginator/index.d.ts +0 -20
package/wizard/Icons.js
CHANGED
|
@@ -9,24 +9,24 @@ exports.validIcon = exports.invalidIcon = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
12
|
-
var invalidIcon = _react["default"].createElement("svg", {
|
|
12
|
+
var invalidIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
13
13
|
id: "highlight_off_black_18dp",
|
|
14
14
|
xmlns: "http://www.w3.org/2000/svg",
|
|
15
15
|
width: "18",
|
|
16
16
|
height: "18",
|
|
17
17
|
viewBox: "0 0 18 18"
|
|
18
|
-
}, _react["default"].createElement("path", {
|
|
18
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
19
19
|
id: "Path_2943",
|
|
20
20
|
"data-name": "Path 2943",
|
|
21
21
|
d: "M0,0H18V18H0Z",
|
|
22
22
|
fill: "none"
|
|
23
|
-
}), _react["default"].createElement("path", {
|
|
23
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
24
24
|
id: "Path_2944",
|
|
25
25
|
"data-name": "Path 2944",
|
|
26
26
|
d: "M10,4a6,6,0,1,0,6,6A6.01,6.01,0,0,0,10,4Zm3,7.945L11.945,13,10,11.06,8.059,13,7,11.945,8.944,10,7,8.059,8.059,7,10,8.944,11.945,7,13,8.059,11.06,10Z",
|
|
27
27
|
transform: "translate(-1.002 -1.002)",
|
|
28
28
|
fill: "#ffe6e9"
|
|
29
|
-
}), _react["default"].createElement("path", {
|
|
29
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
30
30
|
id: "Path_2945",
|
|
31
31
|
"data-name": "Path 2945",
|
|
32
32
|
d: "M11.444,6.5,9.5,8.443,7.558,6.5,6.5,7.558,8.443,9.5,6.5,11.444,7.558,12.5,9.5,10.558,11.444,12.5,12.5,11.444,10.558,9.5,12.5,7.558ZM9.5,2A7.5,7.5,0,1,0,17,9.5,7.494,7.494,0,0,0,9.5,2Zm0,13.5a6,6,0,1,1,6-6A6.009,6.009,0,0,1,9.5,15.5Z",
|
|
@@ -36,25 +36,25 @@ var invalidIcon = _react["default"].createElement("svg", {
|
|
|
36
36
|
|
|
37
37
|
exports.invalidIcon = invalidIcon;
|
|
38
38
|
|
|
39
|
-
var validIcon = _react["default"].createElement("svg", {
|
|
39
|
+
var validIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
40
40
|
id: "check_circle_black_18dp",
|
|
41
41
|
xmlns: "http://www.w3.org/2000/svg",
|
|
42
42
|
width: "18",
|
|
43
43
|
height: "18",
|
|
44
44
|
viewBox: "0 0 18 18"
|
|
45
|
-
}, _react["default"].createElement("path", {
|
|
45
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
46
46
|
id: "Path_2946",
|
|
47
47
|
"data-name": "Path 2946",
|
|
48
48
|
d: "M0,0H18V18H0Z",
|
|
49
49
|
fill: "none"
|
|
50
|
-
}), _react["default"].createElement("path", {
|
|
50
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
51
51
|
id: "Path_2947",
|
|
52
52
|
"data-name": "Path 2947",
|
|
53
53
|
d: "M9.986,4a5.986,5.986,0,1,0,5.986,5.986A5.994,5.994,0,0,0,9.986,4Zm-1.5,9.727L5.5,10.734,6.551,9.679l1.938,1.93L13.42,6.679l1.055,1.063Z",
|
|
54
54
|
transform: "translate(-0.986 -0.986)",
|
|
55
55
|
fill: "#eafaef",
|
|
56
56
|
opacity: "0.999"
|
|
57
|
-
}), _react["default"].createElement("path", {
|
|
57
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
58
58
|
id: "Path_2948",
|
|
59
59
|
"data-name": "Path 2948",
|
|
60
60
|
d: "M9.493,2a7.493,7.493,0,1,0,7.493,7.493A7.5,7.5,0,0,0,9.493,2Zm0,13.487a5.994,5.994,0,1,1,5.994-5.994A6,6,0,0,1,9.493,15.487Zm3.439-9.306L7.994,11.119,6.054,9.186,5,10.242l3,3,5.994-5.994Z",
|
package/wizard/Wizard.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -29,145 +29,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
|
29
29
|
|
|
30
30
|
var _Icons = require("./Icons");
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", "\n border: ", ";\n opacity: 1;\n flex-grow: 1;\n"]);
|
|
34
|
-
|
|
35
|
-
_templateObject14 = function _templateObject14() {
|
|
36
|
-
return data;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
return data;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function _templateObject13() {
|
|
43
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n ", ";\n margin: 0;\n"]);
|
|
44
|
-
|
|
45
|
-
_templateObject13 = function _templateObject13() {
|
|
46
|
-
return data;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
return data;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function _templateObject12() {
|
|
53
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n ", ";\n text-transform: ", ";\n margin: 0;\n"]);
|
|
54
|
-
|
|
55
|
-
_templateObject12 = function _templateObject12() {
|
|
56
|
-
return data;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
return data;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function _templateObject11() {
|
|
63
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"]);
|
|
64
|
-
|
|
65
|
-
_templateObject11 = function _templateObject11() {
|
|
66
|
-
return data;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
return data;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function _templateObject10() {
|
|
73
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 18px;\n height: 18px;\n position: absolute;\n top: 22.5px;\n left: 22.5px;\n"]);
|
|
74
|
-
|
|
75
|
-
_templateObject10 = function _templateObject10() {
|
|
76
|
-
return data;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return data;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function _templateObject9() {
|
|
83
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n opacity: 1;\n margin: 0px 0px 0px 1px;\n"]);
|
|
84
|
-
|
|
85
|
-
_templateObject9 = function _templateObject9() {
|
|
86
|
-
return data;
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
return data;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
function _templateObject8() {
|
|
93
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n mask: url(", ") no-repeat center;\n mask-size: ", ";\n height: ", ";\n width: ", ";\n"]);
|
|
94
|
-
|
|
95
|
-
_templateObject8 = function _templateObject8() {
|
|
96
|
-
return data;
|
|
97
|
-
};
|
|
32
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
98
33
|
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function _templateObject7() {
|
|
103
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
|
|
104
|
-
|
|
105
|
-
_templateObject7 = function _templateObject7() {
|
|
106
|
-
return data;
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
return data;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
function _templateObject6() {
|
|
113
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n"]);
|
|
114
|
-
|
|
115
|
-
_templateObject6 = function _templateObject6() {
|
|
116
|
-
return data;
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
return data;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
function _templateObject5() {
|
|
123
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n\n ", "\n ", ";\n\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n"]);
|
|
124
|
-
|
|
125
|
-
_templateObject5 = function _templateObject5() {
|
|
126
|
-
return data;
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
return data;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
function _templateObject4() {
|
|
133
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-flex;\n padding-bottom: 4px;\n"]);
|
|
134
|
-
|
|
135
|
-
_templateObject4 = function _templateObject4() {
|
|
136
|
-
return data;
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
return data;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
function _templateObject3() {
|
|
143
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n border: none;\n background: inherit;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: ", ";\n\n padding: 0px;\n ", ";\n\n &:hover {\n ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n"]);
|
|
144
|
-
|
|
145
|
-
_templateObject3 = function _templateObject3() {
|
|
146
|
-
return data;
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
return data;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
function _templateObject2() {
|
|
153
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n ", "\n flex-grow: ", ";\n flex-direction: ", ";\n ", "\n"]);
|
|
154
|
-
|
|
155
|
-
_templateObject2 = function _templateObject2() {
|
|
156
|
-
return data;
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
return data;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
function _templateObject() {
|
|
163
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: ", ";\n justify-content: \"center\";\n ", ";\n font-family: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
|
|
164
|
-
|
|
165
|
-
_templateObject = function _templateObject() {
|
|
166
|
-
return data;
|
|
167
|
-
};
|
|
34
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
168
35
|
|
|
169
|
-
|
|
170
|
-
}
|
|
36
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
171
37
|
|
|
172
38
|
var DxcWizard = function DxcWizard(_ref) {
|
|
173
39
|
var _ref$mode = _ref.mode,
|
|
@@ -197,17 +63,17 @@ var DxcWizard = function DxcWizard(_ref) {
|
|
|
197
63
|
}
|
|
198
64
|
};
|
|
199
65
|
|
|
200
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
66
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
201
67
|
theme: colorsTheme.wizard
|
|
202
|
-
}, _react["default"].createElement(StepsContainer, {
|
|
68
|
+
}, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
|
|
203
69
|
mode: mode,
|
|
204
70
|
margin: margin
|
|
205
71
|
}, steps.map(function (step, i) {
|
|
206
|
-
return _react["default"].createElement(StepContainer, {
|
|
72
|
+
return /*#__PURE__*/_react["default"].createElement(StepContainer, {
|
|
207
73
|
key: "step".concat(i),
|
|
208
74
|
mode: mode,
|
|
209
75
|
lastStep: i === steps.length - 1
|
|
210
|
-
}, _react["default"].createElement(Step, {
|
|
76
|
+
}, /*#__PURE__*/_react["default"].createElement(Step, {
|
|
211
77
|
tabIndex: tabIndex,
|
|
212
78
|
onClick: function onClick() {
|
|
213
79
|
return handleStepClick(i);
|
|
@@ -216,33 +82,33 @@ var DxcWizard = function DxcWizard(_ref) {
|
|
|
216
82
|
disabled: step.disabled,
|
|
217
83
|
first: i === 0,
|
|
218
84
|
last: i === steps.length - 1
|
|
219
|
-
}, _react["default"].createElement(StepHeader, null, _react["default"].createElement(IconContainer, {
|
|
85
|
+
}, /*#__PURE__*/_react["default"].createElement(StepHeader, null, /*#__PURE__*/_react["default"].createElement(IconContainer, {
|
|
220
86
|
current: i === renderedCurrent,
|
|
221
87
|
visited: i < renderedCurrent,
|
|
222
88
|
disabled: step.disabled
|
|
223
|
-
}, step.icon ? _react["default"].createElement(StepIconContainer, {
|
|
89
|
+
}, step.icon ? /*#__PURE__*/_react["default"].createElement(StepIconContainer, {
|
|
224
90
|
disabled: step.disabled
|
|
225
|
-
}, (0, _typeof2["default"])(step.icon) === "object" ? step.icon.type === "img" ? _react["default"].createElement(ImgContainer, {
|
|
91
|
+
}, (0, _typeof2["default"])(step.icon) === "object" ? step.icon.type === "img" ? /*#__PURE__*/_react["default"].createElement(ImgContainer, {
|
|
226
92
|
current: i === renderedCurrent,
|
|
227
93
|
img: step.icon.props.src
|
|
228
|
-
}) : step.icon : _react["default"].createElement(step.icon)) : step.iconSrc ? _react["default"].createElement(Icon, {
|
|
94
|
+
}) : step.icon : /*#__PURE__*/_react["default"].createElement(step.icon)) : step.iconSrc ? /*#__PURE__*/_react["default"].createElement(Icon, {
|
|
229
95
|
src: step.iconSrc
|
|
230
|
-
}) : _react["default"].createElement(Number, {
|
|
96
|
+
}) : /*#__PURE__*/_react["default"].createElement(Number, {
|
|
231
97
|
disabled: step.disabled,
|
|
232
98
|
current: i === renderedCurrent
|
|
233
|
-
}, i + 1)), step.valid !== undefined ? step.valid ? _react["default"].createElement(ValidityIconContainer, null, _Icons.validIcon) : _react["default"].createElement(ValidityIconContainer, null, _Icons.invalidIcon) : ""), step.label || step.description ? _react["default"].createElement(InfoContainer, null, step.label ? _react["default"].createElement(Label, {
|
|
99
|
+
}, i + 1)), step.valid !== undefined ? step.valid ? /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, _Icons.validIcon) : /*#__PURE__*/_react["default"].createElement(ValidityIconContainer, null, _Icons.invalidIcon) : ""), step.label || step.description ? /*#__PURE__*/_react["default"].createElement(InfoContainer, null, step.label ? /*#__PURE__*/_react["default"].createElement(Label, {
|
|
234
100
|
disabled: step.disabled,
|
|
235
101
|
visited: i <= innerCurrent
|
|
236
|
-
}, step.label) : "", step.description ? _react["default"].createElement(Description, {
|
|
102
|
+
}, step.label) : "", step.description ? /*#__PURE__*/_react["default"].createElement(Description, {
|
|
237
103
|
disabled: step.disabled,
|
|
238
104
|
visited: i <= innerCurrent
|
|
239
|
-
}, step.description) : "") : ""), i === steps.length - 1 ? "" : _react["default"].createElement(StepSeparator, {
|
|
105
|
+
}, step.description) : "") : ""), i === steps.length - 1 ? "" : /*#__PURE__*/_react["default"].createElement(StepSeparator, {
|
|
240
106
|
mode: mode
|
|
241
107
|
}));
|
|
242
108
|
})));
|
|
243
109
|
};
|
|
244
110
|
|
|
245
|
-
var StepsContainer = _styledComponents["default"].div(_templateObject(), function (props) {
|
|
111
|
+
var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-direction: ", ";\n justify-content: \"center\";\n ", ";\n font-family: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
246
112
|
return props.mode === "vertical" ? "column" : "row";
|
|
247
113
|
}, function (props) {
|
|
248
114
|
return props.mode === "vertical" ? "height: 500px" : "width: 100%";
|
|
@@ -260,7 +126,7 @@ var StepsContainer = _styledComponents["default"].div(_templateObject(), functio
|
|
|
260
126
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
261
127
|
});
|
|
262
128
|
|
|
263
|
-
var StepContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
|
|
129
|
+
var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n ", "\n flex-grow: ", ";\n flex-direction: ", ";\n ", "\n"])), function (props) {
|
|
264
130
|
return props.mode === "vertical" ? "" : "align-items: center;";
|
|
265
131
|
}, function (props) {
|
|
266
132
|
return props.lastStep ? "0" : "1";
|
|
@@ -270,7 +136,7 @@ var StepContainer = _styledComponents["default"].div(_templateObject2(), functio
|
|
|
270
136
|
return props.mode === "vertical" ? "width: 100%;" : "";
|
|
271
137
|
});
|
|
272
138
|
|
|
273
|
-
var Step = _styledComponents["default"].button(_templateObject3(), function (props) {
|
|
139
|
+
var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n border: none;\n background: inherit;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: ", ";\n\n padding: 0px;\n ", ";\n\n &:hover {\n ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n"])), function (props) {
|
|
274
140
|
return props.first ? props.mode === "vertical" ? "0 0 24px 0" : "0 24px 0 0" : props.last ? props.mode === "vertical" ? "24px 0 0 0" : "0 0 0 24px" : props.mode === "vertical" ? "24px 0" : "0 24px";
|
|
275
141
|
}, function (props) {
|
|
276
142
|
return props.disabled ? "cursor: not-allowed" : "";
|
|
@@ -280,9 +146,9 @@ var Step = _styledComponents["default"].button(_templateObject3(), function (pro
|
|
|
280
146
|
return props.theme.focusColor;
|
|
281
147
|
});
|
|
282
148
|
|
|
283
|
-
var StepHeader = _styledComponents["default"].div(_templateObject4());
|
|
149
|
+
var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-flex;\n padding-bottom: 4px;\n"])));
|
|
284
150
|
|
|
285
|
-
var IconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
|
|
151
|
+
var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n\n ", "\n ", ";\n\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n"])), function (props) {
|
|
286
152
|
return props.disabled ? props.theme.disabledCircleWidth : props.current ? props.theme.selectedCircleWidth : props.theme.circleWidth;
|
|
287
153
|
}, function (props) {
|
|
288
154
|
return props.disabled ? props.theme.disabledCircleHeight : props.current ? props.theme.selectedCircleHeight : props.theme.circleHeight;
|
|
@@ -294,19 +160,19 @@ var IconContainer = _styledComponents["default"].div(_templateObject5(), functio
|
|
|
294
160
|
return !props.current && !props.disabled ? props.theme.circleBorderRadius : props.current ? props.theme.selectedCircleBorderRadius : props.disabled ? props.theme.disabledCircleBorderRadius : "";
|
|
295
161
|
});
|
|
296
162
|
|
|
297
|
-
var Icon = _styledComponents["default"].img(_templateObject6(), function (props) {
|
|
163
|
+
var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n"])), function (props) {
|
|
298
164
|
return props.theme.stepContainerIconSize;
|
|
299
165
|
}, function (props) {
|
|
300
166
|
return props.theme.stepContainerIconSize;
|
|
301
167
|
});
|
|
302
168
|
|
|
303
|
-
var StepIconContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
|
|
169
|
+
var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
304
170
|
return props.theme.stepContainerIconSize;
|
|
305
171
|
}, function (props) {
|
|
306
172
|
return props.theme.stepContainerIconSize;
|
|
307
173
|
});
|
|
308
174
|
|
|
309
|
-
var ImgContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
|
|
175
|
+
var ImgContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n mask: url(", ") no-repeat center;\n mask-size: ", ";\n height: ", ";\n width: ", ";\n"])), function (props) {
|
|
310
176
|
return props.current ? props.theme.stepContainerSelectedFontColor : props.theme.stepContainerFontColor;
|
|
311
177
|
}, function (_ref2) {
|
|
312
178
|
var img = _ref2.img;
|
|
@@ -319,7 +185,7 @@ var ImgContainer = _styledComponents["default"].div(_templateObject8(), function
|
|
|
319
185
|
return props.theme.stepContainerIconSize;
|
|
320
186
|
});
|
|
321
187
|
|
|
322
|
-
var Number = _styledComponents["default"].p(_templateObject9(), function (props) {
|
|
188
|
+
var Number = _styledComponents["default"].p(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n opacity: 1;\n margin: 0px 0px 0px 1px;\n"])), function (props) {
|
|
323
189
|
return props.theme.stepContainerFontSize;
|
|
324
190
|
}, function (props) {
|
|
325
191
|
return props.theme.stepContainerFontFamily;
|
|
@@ -331,11 +197,11 @@ var Number = _styledComponents["default"].p(_templateObject9(), function (props)
|
|
|
331
197
|
return props.theme.stepContainerLetterSpacing;
|
|
332
198
|
});
|
|
333
199
|
|
|
334
|
-
var ValidityIconContainer = _styledComponents["default"].div(_templateObject10());
|
|
200
|
+
var ValidityIconContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n width: 18px;\n height: 18px;\n position: absolute;\n top: 22.5px;\n left: 22.5px;\n"])));
|
|
335
201
|
|
|
336
|
-
var InfoContainer = _styledComponents["default"].div(_templateObject11());
|
|
202
|
+
var InfoContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"])));
|
|
337
203
|
|
|
338
|
-
var Label = _styledComponents["default"].p(_templateObject12(), function (props) {
|
|
204
|
+
var Label = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n ", ";\n text-transform: ", ";\n margin: 0;\n"])), function (props) {
|
|
339
205
|
return props.theme.labelTextAlign;
|
|
340
206
|
}, function (props) {
|
|
341
207
|
return props.theme.labelFontFamily;
|
|
@@ -353,7 +219,7 @@ var Label = _styledComponents["default"].p(_templateObject12(), function (props)
|
|
|
353
219
|
return props.theme.labelFontTextTransform;
|
|
354
220
|
});
|
|
355
221
|
|
|
356
|
-
var Description = _styledComponents["default"].p(_templateObject13(), function (props) {
|
|
222
|
+
var Description = _styledComponents["default"].p(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n ", ";\n margin: 0;\n"])), function (props) {
|
|
357
223
|
return props.theme.descriptionTextAlign;
|
|
358
224
|
}, function (props) {
|
|
359
225
|
return props.theme.descriptionFontFamily;
|
|
@@ -371,7 +237,7 @@ var Description = _styledComponents["default"].p(_templateObject13(), function (
|
|
|
371
237
|
return props.disabled ? "color: ".concat(props.theme.disabledFontColor, ";") : "color: ".concat(props.visited ? props.theme.visitedDescriptionFontColor : props.theme.descriptionFontColor, ";");
|
|
372
238
|
});
|
|
373
239
|
|
|
374
|
-
var StepSeparator = _styledComponents["default"].div(_templateObject14(), function (props) {
|
|
240
|
+
var StepSeparator = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", "\n border: ", ";\n opacity: 1;\n flex-grow: 1;\n"])), function (props) {
|
|
375
241
|
return props.mode === "horizontal" ? "" : "0";
|
|
376
242
|
}, function (props) {
|
|
377
243
|
return props.mode === "horizontal" ? "0" : "";
|
package/button/Button.stories.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Primary = exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _Button = _interopRequireDefault(require("./Button"));
|
|
13
|
-
|
|
14
|
-
var _default = {
|
|
15
|
-
title: "Button",
|
|
16
|
-
component: _Button["default"]
|
|
17
|
-
};
|
|
18
|
-
exports["default"] = _default;
|
|
19
|
-
|
|
20
|
-
var Primary = function Primary() {
|
|
21
|
-
return _react["default"].createElement(_Button["default"], {
|
|
22
|
-
mode: "primary",
|
|
23
|
-
label: "Primary Button"
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
exports.Primary = Primary;
|
package/button/index.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
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
|
-
label?: string;
|
|
12
|
-
mode?: "primary" | "secondary" | "text";
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
iconPosition?: "before" | "after";
|
|
15
|
-
type?: "button" | "reset" | "submit";
|
|
16
|
-
iconSrc?: string;
|
|
17
|
-
icon?: any;
|
|
18
|
-
onClick?: void;
|
|
19
|
-
margin?: Space | Margin;
|
|
20
|
-
size?: Size;
|
|
21
|
-
tabIndex?: number;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export default function DxcButton(props: Props): JSX.Element;
|
package/paginator/index.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
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;
|