@dxc-technology/halstack-react 0.0.0-89339f9 → 0.0.0-8c3739a
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/ThemeContext.js +131 -99
- package/dist/accordion/Accordion.js +72 -59
- package/dist/accordion-group/AccordionGroup.js +1 -3
- package/dist/alert/Alert.js +126 -111
- package/dist/alert/index.d.ts +51 -0
- package/dist/badge/Badge.js +3 -1
- package/dist/box/Box.js +1 -9
- package/dist/button/Button.js +30 -20
- package/dist/card/Card.js +2 -4
- package/dist/checkbox/Checkbox.js +30 -21
- package/dist/chip/Chip.js +30 -28
- package/dist/common/variables.js +987 -572
- package/dist/date/Date.js +17 -29
- package/dist/date-input/DateInput.js +400 -0
- package/dist/date-input/index.d.ts +95 -0
- package/dist/dialog/Dialog.js +21 -39
- package/dist/dropdown/Dropdown.js +123 -71
- package/dist/file-input/FileInput.js +644 -0
- package/dist/file-input/FileItem.js +280 -0
- package/dist/file-input/index.d.ts +81 -0
- package/dist/footer/Footer.js +25 -35
- package/dist/footer/dxc_logo.svg +15 -0
- package/dist/header/Header.js +14 -42
- package/dist/header/dxc_logo_black.svg +8 -0
- package/dist/heading/Heading.js +1 -5
- package/dist/input-text/InputText.js +96 -58
- package/dist/layout/ApplicationLayout.js +1 -1
- package/dist/link/Link.js +23 -26
- package/dist/main.d.ts +8 -0
- package/dist/main.js +57 -1
- package/dist/new-select/NewSelect.js +836 -0
- package/dist/new-select/index.d.ts +53 -0
- package/dist/new-textarea/NewTextarea.js +369 -0
- package/dist/new-textarea/index.d.ts +117 -0
- package/dist/number-input/NumberInput.js +136 -0
- package/dist/number-input/NumberInputContext.js +16 -0
- package/dist/number-input/index.d.ts +113 -0
- package/dist/paginator/Paginator.js +10 -4
- package/dist/password-input/PasswordInput.js +198 -0
- package/dist/password-input/index.d.ts +94 -0
- package/dist/progress-bar/ProgressBar.js +63 -27
- package/dist/resultsetTable/ResultsetTable.js +5 -22
- package/dist/select/Select.js +189 -185
- package/dist/sidenav/Sidenav.js +11 -15
- package/dist/slider/Slider.js +145 -66
- package/dist/spinner/Spinner.js +226 -59
- package/dist/switch/Switch.js +3 -3
- package/dist/table/Table.js +15 -5
- package/dist/tabs/Tabs.js +4 -8
- package/dist/tag/Tag.js +38 -36
- package/dist/text-input/TextInput.js +971 -0
- package/dist/text-input/index.d.ts +135 -0
- package/dist/textarea/Textarea.js +26 -22
- package/dist/toggle-group/ToggleGroup.js +130 -44
- package/dist/upload/buttons-upload/ButtonsUpload.js +8 -4
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +16 -12
- package/dist/upload/file-upload/FileToUpload.js +4 -4
- package/dist/upload/transaction/Transaction.js +13 -9
- package/dist/upload/transactions/Transactions.js +11 -11
- package/dist/wizard/Wizard.js +84 -56
- package/dist/wizard/invalid_icon.svg +4 -5
- package/dist/wizard/valid_icon.svg +4 -5
- package/package.json +4 -2
- package/test/DateInput.test.js +242 -0
- package/test/Dropdown.test.js +15 -0
- package/test/FileInput.test.js +201 -0
- package/test/InputText.test.js +24 -16
- package/test/NewTextarea.test.js +195 -0
- package/test/NumberInput.test.js +259 -0
- package/test/Paginator.test.js +1 -1
- package/test/PasswordInput.test.js +83 -0
- package/test/ResultsetTable.test.js +1 -2
- package/test/Select.test.js +44 -24
- package/test/Spinner.test.js +5 -0
- package/test/TextInput.test.js +732 -0
- package/test/ToggleGroup.test.js +5 -1
- package/dist/accordion/Accordion.stories.js +0 -207
- package/dist/accordion/readme.md +0 -96
- package/dist/accordion-group/AccordionGroup.stories.js +0 -207
- package/dist/accordion-group/readme.md +0 -70
- package/dist/alert/Alert.stories.js +0 -158
- package/dist/alert/close.svg +0 -4
- package/dist/alert/error.svg +0 -4
- package/dist/alert/info.svg +0 -4
- package/dist/alert/readme.md +0 -43
- package/dist/alert/success.svg +0 -4
- package/dist/alert/warning.svg +0 -4
- package/dist/button/Button.stories.js +0 -224
- package/dist/button/readme.md +0 -93
- package/dist/date/calendar.svg +0 -1
- package/dist/date/calendar_dark.svg +0 -1
- package/dist/dialog/Dialog.stories.js +0 -217
- package/dist/dialog/readme.md +0 -32
- package/dist/dropdown/Dropdown.stories.js +0 -249
- package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
- package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
- package/dist/dropdown/readme.md +0 -69
- package/dist/footer/Footer.stories.js +0 -94
- package/dist/footer/dxc_logo_wht.png +0 -0
- package/dist/header/dxc_logo_black.png +0 -0
- package/dist/header/dxc_logo_blk_rgb.svg +0 -6
- package/dist/header/dxc_logo_white.png +0 -0
- package/dist/input-text/InputText.stories.js +0 -209
- 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/toggle-group/readme.md +0 -82
package/dist/link/Link.js
CHANGED
|
@@ -26,7 +26,7 @@ var _variables = require("../common/variables.js");
|
|
|
26
26
|
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
27
27
|
|
|
28
28
|
function _templateObject6() {
|
|
29
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", "
|
|
29
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n \n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
|
|
30
30
|
|
|
31
31
|
_templateObject6 = function _templateObject6() {
|
|
32
32
|
return data;
|
|
@@ -36,7 +36,7 @@ function _templateObject6() {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
function _templateObject5() {
|
|
39
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", "
|
|
39
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"]);
|
|
40
40
|
|
|
41
41
|
_templateObject5 = function _templateObject5() {
|
|
42
42
|
return data;
|
|
@@ -56,7 +56,7 @@ function _templateObject4() {
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
function _templateObject3() {
|
|
59
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration:
|
|
59
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration-color: transparent;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n outline-offset: 1px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
|
|
60
60
|
|
|
61
61
|
_templateObject3 = function _templateObject3() {
|
|
62
62
|
return data;
|
|
@@ -66,7 +66,7 @@ function _templateObject3() {
|
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
function _templateObject2() {
|
|
69
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
69
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n\n text-decoration-color: transparent;\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
|
|
70
70
|
|
|
71
71
|
_templateObject2 = function _templateObject2() {
|
|
72
72
|
return data;
|
|
@@ -86,9 +86,7 @@ function _templateObject() {
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
var DxcLink = function DxcLink(_ref) {
|
|
89
|
-
var _ref$
|
|
90
|
-
underlined = _ref$underlined === void 0 ? true : _ref$underlined,
|
|
91
|
-
_ref$inheritColor = _ref.inheritColor,
|
|
89
|
+
var _ref$inheritColor = _ref.inheritColor,
|
|
92
90
|
inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
|
|
93
91
|
_ref$disabled = _ref.disabled,
|
|
94
92
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
@@ -126,7 +124,6 @@ var DxcLink = function DxcLink(_ref) {
|
|
|
126
124
|
onClick: !disabled && onClick,
|
|
127
125
|
margin: margin,
|
|
128
126
|
disabled: disabled,
|
|
129
|
-
underlined: underlined,
|
|
130
127
|
inheritColor: inheritColor
|
|
131
128
|
}, linkContent) : _react["default"].createElement(StyledLink, {
|
|
132
129
|
tabIndex: tabIndex,
|
|
@@ -134,7 +131,6 @@ var DxcLink = function DxcLink(_ref) {
|
|
|
134
131
|
target: newWindow ? "_blank" : "_self",
|
|
135
132
|
margin: margin,
|
|
136
133
|
disabled: disabled,
|
|
137
|
-
underlined: underlined,
|
|
138
134
|
inheritColor: inheritColor
|
|
139
135
|
}, linkContent)));
|
|
140
136
|
};
|
|
@@ -154,33 +150,39 @@ var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), funct
|
|
|
154
150
|
var StyledLink = _styledComponents["default"].a(_templateObject2(), function (props) {
|
|
155
151
|
return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
|
|
156
152
|
}, function (props) {
|
|
157
|
-
return props.
|
|
153
|
+
return props.disabled ? "pointer-events: none;" : "";
|
|
158
154
|
}, function (props) {
|
|
159
|
-
return
|
|
155
|
+
return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
|
|
160
156
|
}, function (props) {
|
|
161
|
-
return props.
|
|
157
|
+
return !props.inheritColor ? props.theme.visitedFontColor : "";
|
|
162
158
|
}, function (props) {
|
|
163
|
-
return
|
|
159
|
+
return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
|
|
164
160
|
}, function (props) {
|
|
165
|
-
return
|
|
161
|
+
return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
|
|
166
162
|
}, function (props) {
|
|
167
163
|
return props.theme.focusColor;
|
|
164
|
+
}, function (props) {
|
|
165
|
+
return props.disabled && "outline: none";
|
|
166
|
+
}, function (props) {
|
|
167
|
+
return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
|
|
168
168
|
});
|
|
169
169
|
|
|
170
170
|
var StyledButton = _styledComponents["default"].button(_templateObject3(), function (props) {
|
|
171
|
+
return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
|
|
172
|
+
}, function (props) {
|
|
171
173
|
return props.disabled && "cursor: default;";
|
|
172
174
|
}, function (props) {
|
|
173
175
|
return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
|
|
174
|
-
}, function (props) {
|
|
175
|
-
return props.underlined && "padding-bottom: ".concat(props.theme.underlineSpacing, " !important; \n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " ").concat(!props.inheritColor ? !props.disabled ? props.theme.underlineColor : props.theme.disabledUnderlineColor : "", ";");
|
|
176
|
-
}, function (props) {
|
|
177
|
-
return !props.underlined ? "text-decoration-color: transparent;" : "";
|
|
178
176
|
}, function (props) {
|
|
179
177
|
return props.disabled ? "pointer-events: none;" : "";
|
|
180
178
|
}, function (props) {
|
|
181
|
-
return
|
|
179
|
+
return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
|
|
182
180
|
}, function (props) {
|
|
183
181
|
return props.theme.focusColor;
|
|
182
|
+
}, function (props) {
|
|
183
|
+
return props.disabled && "outline: none";
|
|
184
|
+
}, function (props) {
|
|
185
|
+
return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
|
|
184
186
|
});
|
|
185
187
|
|
|
186
188
|
var LinkText = _styledComponents["default"].div(_templateObject4(), function (props) {
|
|
@@ -202,9 +204,7 @@ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (pr
|
|
|
202
204
|
}, function (props) {
|
|
203
205
|
return props.theme.iconSize;
|
|
204
206
|
}, function (props) {
|
|
205
|
-
return props.iconPosition === "before" ? "margin-right" : "margin-left";
|
|
206
|
-
}, function (props) {
|
|
207
|
-
return props.theme.iconGutter;
|
|
207
|
+
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
208
208
|
});
|
|
209
209
|
|
|
210
210
|
var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
|
|
@@ -212,13 +212,10 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), fun
|
|
|
212
212
|
}, function (props) {
|
|
213
213
|
return props.theme.iconSize;
|
|
214
214
|
}, function (props) {
|
|
215
|
-
return props.iconPosition === "before" ? "margin-right" : "margin-left";
|
|
216
|
-
}, function (props) {
|
|
217
|
-
return props.theme.iconGutter;
|
|
215
|
+
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
218
216
|
});
|
|
219
217
|
|
|
220
218
|
DxcLink.propTypes = {
|
|
221
|
-
underlined: _propTypes["default"].bool,
|
|
222
219
|
inheritColor: _propTypes["default"].bool,
|
|
223
220
|
disabled: _propTypes["default"].bool,
|
|
224
221
|
icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
|
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { default as DxcAlert } from "./alert/index";
|
|
2
|
+
export { default as DxcNewSelect } from "./new-select/index";
|
|
3
|
+
export { default as DxcTextInput } from "./text-input/index";
|
|
4
|
+
export { default as DxcDateInput } from "./date-input/index";
|
|
5
|
+
export { default as DxcNewTextarea } from "./new-textarea/index";
|
|
6
|
+
export { default as DxcNumberInput } from "./number-input/index";
|
|
7
|
+
export { default as DxcPasswordInput } from "./password-input/index";
|
|
8
|
+
export { default as DxcFileInput } from "./file-input/index";
|
package/dist/main.js
CHANGED
|
@@ -67,7 +67,7 @@ Object.defineProperty(exports, "DxcHeader", {
|
|
|
67
67
|
return _Header["default"];
|
|
68
68
|
}
|
|
69
69
|
});
|
|
70
|
-
Object.defineProperty(exports, "
|
|
70
|
+
Object.defineProperty(exports, "V3DxcInputText", {
|
|
71
71
|
enumerable: true,
|
|
72
72
|
get: function get() {
|
|
73
73
|
return _InputText["default"];
|
|
@@ -217,6 +217,48 @@ Object.defineProperty(exports, "DxcBadge", {
|
|
|
217
217
|
return _Badge["default"];
|
|
218
218
|
}
|
|
219
219
|
});
|
|
220
|
+
Object.defineProperty(exports, "DxcTextInput", {
|
|
221
|
+
enumerable: true,
|
|
222
|
+
get: function get() {
|
|
223
|
+
return _TextInput["default"];
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
Object.defineProperty(exports, "DxcPasswordInput", {
|
|
227
|
+
enumerable: true,
|
|
228
|
+
get: function get() {
|
|
229
|
+
return _PasswordInput["default"];
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
Object.defineProperty(exports, "DxcDateInput", {
|
|
233
|
+
enumerable: true,
|
|
234
|
+
get: function get() {
|
|
235
|
+
return _DateInput["default"];
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
Object.defineProperty(exports, "DxcNumberInput", {
|
|
239
|
+
enumerable: true,
|
|
240
|
+
get: function get() {
|
|
241
|
+
return _NumberInput["default"];
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
Object.defineProperty(exports, "DxcNewTextarea", {
|
|
245
|
+
enumerable: true,
|
|
246
|
+
get: function get() {
|
|
247
|
+
return _NewTextarea["default"];
|
|
248
|
+
}
|
|
249
|
+
});
|
|
250
|
+
Object.defineProperty(exports, "DxcNewSelect", {
|
|
251
|
+
enumerable: true,
|
|
252
|
+
get: function get() {
|
|
253
|
+
return _NewSelect["default"];
|
|
254
|
+
}
|
|
255
|
+
});
|
|
256
|
+
Object.defineProperty(exports, "DxcFileInput", {
|
|
257
|
+
enumerable: true,
|
|
258
|
+
get: function get() {
|
|
259
|
+
return _FileInput["default"];
|
|
260
|
+
}
|
|
261
|
+
});
|
|
220
262
|
Object.defineProperty(exports, "ThemeContext", {
|
|
221
263
|
enumerable: true,
|
|
222
264
|
get: function get() {
|
|
@@ -306,6 +348,20 @@ var _AccordionGroup = _interopRequireDefault(require("./accordion-group/Accordio
|
|
|
306
348
|
|
|
307
349
|
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
308
350
|
|
|
351
|
+
var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
|
|
352
|
+
|
|
353
|
+
var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
|
|
354
|
+
|
|
355
|
+
var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
|
|
356
|
+
|
|
357
|
+
var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
|
|
358
|
+
|
|
359
|
+
var _NewTextarea = _interopRequireDefault(require("./new-textarea/NewTextarea"));
|
|
360
|
+
|
|
361
|
+
var _NewSelect = _interopRequireDefault(require("./new-select/NewSelect"));
|
|
362
|
+
|
|
363
|
+
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
364
|
+
|
|
309
365
|
var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
|
|
310
366
|
|
|
311
367
|
var _BackgroundColorContext = require("./BackgroundColorContext.js");
|