@dxc-technology/halstack-react 0.0.0-0d951d2 → 0.0.0-0da54d8
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.d.ts +4 -0
- package/accordion/Accordion.js +35 -130
- package/accordion/types.d.ts +68 -0
- package/accordion/types.js +5 -0
- package/accordion-group/AccordionGroup.d.ts +7 -0
- package/accordion-group/AccordionGroup.js +65 -81
- package/accordion-group/types.d.ts +72 -0
- package/accordion-group/types.js +5 -0
- package/alert/Alert.d.ts +4 -0
- package/alert/Alert.js +38 -151
- package/alert/types.d.ts +49 -0
- package/alert/types.js +5 -0
- package/badge/Badge.js +9 -13
- package/box/Box.js +9 -13
- package/box/Box.stories.jsx +132 -0
- package/button/Button.d.ts +4 -0
- package/button/Button.js +15 -71
- package/button/Button.stories.tsx +293 -0
- package/button/types.d.ts +57 -0
- package/button/types.js +5 -0
- package/card/Card.d.ts +4 -0
- package/card/Card.js +32 -121
- package/card/types.d.ts +69 -0
- package/card/types.js +5 -0
- package/checkbox/Checkbox.d.ts +4 -0
- package/checkbox/Checkbox.js +13 -59
- package/checkbox/types.d.ts +60 -0
- package/checkbox/types.js +5 -0
- package/chip/Chip.js +17 -61
- package/common/RequiredComponent.js +3 -11
- package/common/variables.js +40 -45
- package/date/Date.js +16 -22
- package/date-input/DateInput.d.ts +4 -0
- package/date-input/DateInput.js +22 -61
- package/date-input/types.d.ts +100 -0
- package/date-input/types.js +5 -0
- package/dialog/Dialog.d.ts +4 -0
- package/dialog/Dialog.js +20 -73
- package/dialog/types.d.ts +43 -0
- package/dialog/types.js +5 -0
- package/dropdown/Dropdown.d.ts +4 -0
- package/dropdown/Dropdown.js +44 -171
- package/dropdown/types.d.ts +89 -0
- package/dropdown/types.js +5 -0
- package/file-input/FileInput.js +49 -161
- package/file-input/FileItem.js +29 -123
- package/footer/Footer.d.ts +4 -0
- package/footer/Footer.js +38 -193
- package/footer/Icons.js +13 -13
- package/footer/types.d.ts +61 -0
- package/footer/types.js +5 -0
- 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/NumberInput.stories.jsx +115 -0
- package/number-input/NumberInputContext.js +1 -1
- package/package.json +15 -12
- 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 +17 -21
- package/password-input/PasswordInput.stories.jsx +131 -0
- package/progress-bar/ProgressBar.d.ts +4 -0
- package/progress-bar/ProgressBar.js +19 -91
- package/progress-bar/types.d.ts +37 -0
- package/progress-bar/types.js +5 -0
- package/radio/Radio.d.ts +4 -0
- package/radio/Radio.js +15 -50
- package/radio/types.d.ts +54 -0
- package/radio/types.js +5 -0
- package/resultsetTable/ResultsetTable.js +35 -119
- package/select/Select.js +194 -466
- package/select/index.d.ts +4 -4
- package/sidenav/Sidenav.js +15 -49
- package/slider/Slider.d.ts +4 -0
- package/slider/Slider.js +45 -143
- package/slider/types.d.ts +83 -0
- package/slider/types.js +5 -0
- package/spinner/Spinner.js +38 -152
- package/switch/Switch.d.ts +4 -0
- package/switch/Switch.js +26 -69
- package/switch/types.d.ts +58 -0
- package/switch/types.js +5 -0
- package/table/Table.js +10 -24
- package/tabs/Tabs.d.ts +4 -0
- package/tabs/Tabs.js +29 -161
- package/tabs/types.d.ts +71 -0
- package/tabs/types.js +5 -0
- package/tag/Tag.js +22 -96
- package/text-input/TextInput.js +240 -389
- package/text-input/index.d.ts +2 -2
- package/textarea/Textarea.js +20 -72
- package/textarea/Textarea.stories.jsx +135 -0
- 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/accordion/index.d.ts +0 -28
- package/accordion-group/index.d.ts +0 -16
- package/alert/index.d.ts +0 -51
- package/button/Button.stories.js +0 -27
- package/button/index.d.ts +0 -24
- package/card/index.d.ts +0 -22
- package/checkbox/index.d.ts +0 -24
- package/date-input/index.d.ts +0 -95
- package/dialog/index.d.ts +0 -18
- package/dropdown/index.d.ts +0 -26
- package/footer/index.d.ts +0 -25
- package/paginator/index.d.ts +0 -20
- package/progress-bar/index.d.ts +0 -18
- package/radio/index.d.ts +0 -23
- package/slider/index.d.ts +0 -29
- package/switch/index.d.ts +0 -24
- package/tabs/index.d.ts +0 -19
package/tag/Tag.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,85 +29,11 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
|
29
29
|
|
|
30
30
|
var _Box = _interopRequireDefault(require("../box/Box"));
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n flex-grow: 1;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n"]);
|
|
34
|
-
|
|
35
|
-
_templateObject8 = function _templateObject8() {
|
|
36
|
-
return data;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
return data;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function _templateObject7() {
|
|
43
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n background: ", ";\n width: ", ";\n height: 100%;\n justify-content: center;\n align-items: center;\n color: ", ";\n"]);
|
|
44
|
-
|
|
45
|
-
_templateObject7 = function _templateObject7() {
|
|
46
|
-
return data;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
return data;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function _templateObject6() {
|
|
53
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n\n img,\n svg {\n width: ", ";\n height: ", ";\n }\n"]);
|
|
54
|
-
|
|
55
|
-
_templateObject6 = function _templateObject6() {
|
|
56
|
-
return data;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
return data;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function _templateObject5() {
|
|
63
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: ", ";\n height: ", ";\n"]);
|
|
64
|
-
|
|
65
|
-
_templateObject5 = function _templateObject5() {
|
|
66
|
-
return data;
|
|
67
|
-
};
|
|
32
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
68
33
|
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function _templateObject4() {
|
|
73
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border-radius: 4px;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n\n :focus {\n outline: 2px solid ", ";\n }\n"]);
|
|
74
|
-
|
|
75
|
-
_templateObject4 = function _templateObject4() {
|
|
76
|
-
return data;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return data;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function _templateObject3() {
|
|
83
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n border-radius: 4px;\n\n :focus {\n outline: 2px solid ", ";\n outline-offset: 0px;\n }\n"]);
|
|
84
|
-
|
|
85
|
-
_templateObject3 = function _templateObject3() {
|
|
86
|
-
return data;
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
return data;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
function _templateObject2() {
|
|
93
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n flex-direction: ", ";\n width: ", ";\n height: ", ";\n"]);
|
|
94
|
-
|
|
95
|
-
_templateObject2 = function _templateObject2() {
|
|
96
|
-
return data;
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
return data;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function _templateObject() {
|
|
103
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
|
|
104
|
-
|
|
105
|
-
_templateObject = function _templateObject() {
|
|
106
|
-
return data;
|
|
107
|
-
};
|
|
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); }
|
|
108
35
|
|
|
109
|
-
|
|
110
|
-
}
|
|
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; }
|
|
111
37
|
|
|
112
38
|
var DxcTag = function DxcTag(_ref) {
|
|
113
39
|
var icon = _ref.icon,
|
|
@@ -137,21 +63,21 @@ var DxcTag = function DxcTag(_ref) {
|
|
|
137
63
|
onClick && onClick();
|
|
138
64
|
};
|
|
139
65
|
|
|
140
|
-
var tagContent = _react["default"].createElement(_Box["default"], {
|
|
66
|
+
var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
|
|
141
67
|
size: size,
|
|
142
68
|
shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
|
|
143
|
-
}, _react["default"].createElement(TagContent, {
|
|
69
|
+
}, /*#__PURE__*/_react["default"].createElement(TagContent, {
|
|
144
70
|
labelPosition: labelPosition,
|
|
145
71
|
size: size
|
|
146
|
-
}, _react["default"].createElement(IconContainer, {
|
|
72
|
+
}, /*#__PURE__*/_react["default"].createElement(IconContainer, {
|
|
147
73
|
iconBgColor: iconBgColor
|
|
148
|
-
}, icon ? _react["default"].createElement(TagIconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : _react["default"].createElement(TagIcon, {
|
|
74
|
+
}, icon ? /*#__PURE__*/_react["default"].createElement(TagIconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : /*#__PURE__*/_react["default"].createElement(TagIcon, {
|
|
149
75
|
src: iconSrc
|
|
150
|
-
})), size !== "small" && _react["default"].createElement(TagLabel, null, label)));
|
|
76
|
+
})), size !== "small" && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label)));
|
|
151
77
|
|
|
152
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
78
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
153
79
|
theme: colorsTheme.tag
|
|
154
|
-
}, _react["default"].createElement(StyledDxcTag, {
|
|
80
|
+
}, /*#__PURE__*/_react["default"].createElement(StyledDxcTag, {
|
|
155
81
|
margin: margin,
|
|
156
82
|
onMouseEnter: function onMouseEnter() {
|
|
157
83
|
return changeIsHovered(true);
|
|
@@ -161,9 +87,9 @@ var DxcTag = function DxcTag(_ref) {
|
|
|
161
87
|
},
|
|
162
88
|
onClick: clickHandler,
|
|
163
89
|
hasAction: onClick || linkHref
|
|
164
|
-
}, onClick ? _react["default"].createElement(StyledButton, {
|
|
90
|
+
}, onClick ? /*#__PURE__*/_react["default"].createElement(StyledButton, {
|
|
165
91
|
tabIndex: tabIndex
|
|
166
|
-
}, tagContent) : linkHref ? _react["default"].createElement(StyledLink, {
|
|
92
|
+
}, tagContent) : linkHref ? /*#__PURE__*/_react["default"].createElement(StyledLink, {
|
|
167
93
|
tabIndex: tabIndex,
|
|
168
94
|
href: linkHref,
|
|
169
95
|
target: newWindow ? "_blank" : "_self"
|
|
@@ -182,7 +108,7 @@ var calculateWidth = function calculateWidth(size) {
|
|
|
182
108
|
return sizes[size];
|
|
183
109
|
};
|
|
184
110
|
|
|
185
|
-
var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function (_ref2) {
|
|
111
|
+
var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_ref2) {
|
|
186
112
|
var hasAction = _ref2.hasAction;
|
|
187
113
|
return hasAction && "pointer" || "unset";
|
|
188
114
|
}, function (_ref3) {
|
|
@@ -202,7 +128,7 @@ var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function
|
|
|
202
128
|
return margin && margin.left ? _variables.spaces[margin.left] : "";
|
|
203
129
|
});
|
|
204
130
|
|
|
205
|
-
var TagContent = _styledComponents["default"].div(_templateObject2(), function (_ref8) {
|
|
131
|
+
var TagContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n flex-direction: ", ";\n width: ", ";\n height: ", ";\n"])), function (_ref8) {
|
|
206
132
|
var labelPosition = _ref8.labelPosition;
|
|
207
133
|
return labelPosition === "before" && "row-reverse" || "row";
|
|
208
134
|
}, function (props) {
|
|
@@ -211,27 +137,27 @@ var TagContent = _styledComponents["default"].div(_templateObject2(), function (
|
|
|
211
137
|
return props.theme.height;
|
|
212
138
|
});
|
|
213
139
|
|
|
214
|
-
var StyledLink = _styledComponents["default"].a(_templateObject3(), function (props) {
|
|
140
|
+
var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n border-radius: 4px;\n\n :focus {\n outline: 2px solid ", ";\n outline-offset: 0px;\n }\n"])), function (props) {
|
|
215
141
|
return props.theme.focusColor;
|
|
216
142
|
});
|
|
217
143
|
|
|
218
|
-
var StyledButton = _styledComponents["default"].button(_templateObject4(), function (props) {
|
|
144
|
+
var StyledButton = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border-radius: 4px;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n\n :focus {\n outline: 2px solid ", ";\n }\n"])), function (props) {
|
|
219
145
|
return props.theme.focusColor;
|
|
220
146
|
});
|
|
221
147
|
|
|
222
|
-
var TagIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
|
|
148
|
+
var TagIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: ", ";\n height: ", ";\n"])), function (props) {
|
|
223
149
|
return props.theme.iconWidth;
|
|
224
150
|
}, function (props) {
|
|
225
151
|
return props.theme.iconHeight;
|
|
226
152
|
});
|
|
227
153
|
|
|
228
|
-
var TagIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
|
|
154
|
+
var TagIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n\n img,\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (props) {
|
|
229
155
|
return props.theme.iconWidth;
|
|
230
156
|
}, function (props) {
|
|
231
157
|
return props.theme.iconHeight;
|
|
232
158
|
});
|
|
233
159
|
|
|
234
|
-
var IconContainer = _styledComponents["default"].div(_templateObject7(), function (_ref9) {
|
|
160
|
+
var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n background: ", ";\n width: ", ";\n height: 100%;\n justify-content: center;\n align-items: center;\n color: ", ";\n"])), function (_ref9) {
|
|
235
161
|
var iconBgColor = _ref9.iconBgColor;
|
|
236
162
|
return iconBgColor;
|
|
237
163
|
}, function (props) {
|
|
@@ -240,7 +166,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject7(), functio
|
|
|
240
166
|
return props.theme.iconColor;
|
|
241
167
|
});
|
|
242
168
|
|
|
243
|
-
var TagLabel = _styledComponents["default"].div(_templateObject8(), function (props) {
|
|
169
|
+
var TagLabel = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n flex-grow: 1;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n"])), function (props) {
|
|
244
170
|
return props.theme.fontFamily;
|
|
245
171
|
}, function (props) {
|
|
246
172
|
return props.theme.fontSize;
|