@dxc-technology/halstack-react 0.0.0-1cdfd61 → 0.0.0-20fc09e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/babel.config.js +6 -2
- package/dist/BackgroundColorContext.js +46 -0
- package/dist/ThemeContext.js +215 -32
- package/dist/V3Textarea/V3Textarea.js +264 -0
- package/dist/accordion/Accordion.js +131 -46
- package/dist/accordion-group/AccordionGroup.js +36 -9
- package/dist/alert/Alert.js +183 -84
- package/dist/alert/index.d.ts +51 -0
- package/dist/badge/Badge.js +23 -18
- package/dist/box/Box.js +29 -18
- package/dist/button/Button.js +61 -25
- package/dist/card/Card.js +72 -35
- package/dist/checkbox/Checkbox.js +97 -37
- package/dist/chip/Chip.js +97 -40
- package/dist/common/utils.js +2 -22
- package/dist/common/variables.js +1415 -276
- package/dist/date/Date.js +74 -52
- package/dist/date-input/DateInput.js +400 -0
- package/dist/date-input/index.d.ts +95 -0
- package/dist/dialog/Dialog.js +58 -37
- package/dist/dropdown/Dropdown.js +175 -80
- 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 +90 -40
- package/dist/footer/Icons.js +77 -0
- package/dist/header/Header.js +154 -93
- package/dist/header/Icons.js +59 -0
- package/dist/heading/Heading.js +81 -16
- package/dist/input-text/InputText.js +250 -113
- package/dist/layout/ApplicationLayout.js +14 -18
- package/dist/link/Link.js +86 -41
- package/dist/main.d.ts +8 -0
- package/dist/main.js +71 -7
- package/dist/new-select/NewSelect.js +836 -0
- package/dist/new-select/index.d.ts +53 -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 +64 -29
- package/dist/password-input/PasswordInput.js +198 -0
- package/dist/password-input/index.d.ts +94 -0
- package/dist/progress-bar/ProgressBar.js +95 -38
- package/dist/radio/Radio.js +31 -17
- package/dist/resultsetTable/ResultsetTable.js +79 -48
- package/dist/select/Select.js +226 -150
- package/dist/sidenav/Sidenav.js +66 -15
- package/dist/slider/Slider.js +197 -69
- package/dist/spinner/Spinner.js +247 -59
- package/dist/switch/Switch.js +50 -27
- package/dist/table/Table.js +51 -24
- package/dist/tabs/Tabs.js +58 -17
- package/dist/tag/Tag.js +68 -35
- package/dist/text-input/TextInput.js +971 -0
- package/dist/text-input/index.d.ts +135 -0
- package/dist/textarea/Textarea.js +248 -106
- package/dist/textarea/index.d.ts +117 -0
- package/dist/toggle/Toggle.js +16 -19
- package/dist/toggle-group/ToggleGroup.js +142 -41
- package/dist/upload/Upload.js +16 -11
- package/dist/upload/buttons-upload/ButtonsUpload.js +31 -14
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +78 -28
- package/dist/upload/file-upload/FileToUpload.js +50 -24
- package/dist/upload/files-upload/FilesToUpload.js +16 -16
- package/dist/upload/readme.md +2 -2
- package/dist/upload/transaction/Transaction.js +44 -24
- package/dist/upload/transactions/Transactions.js +38 -20
- package/dist/wizard/Wizard.js +127 -47
- package/dist/wizard/invalid_icon.svg +4 -5
- package/dist/wizard/valid_icon.svg +4 -5
- package/package.json +7 -2
- package/test/AccordionGroup.test.js +16 -0
- package/test/Date.test.js +49 -45
- package/test/DateInput.test.js +242 -0
- package/test/Dropdown.test.js +15 -0
- package/test/FileInput.test.js +201 -0
- package/test/Footer.test.js +2 -7
- package/test/Header.test.js +5 -10
- package/test/InputText.test.js +25 -17
- package/test/Link.test.js +3 -2
- 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/Textarea.test.js +193 -0
- package/test/ToggleGroup.test.js +5 -1
- package/test/Upload.test.js +5 -5
- package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
- 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/common/services/example-service.js +0 -10
- package/dist/common/services/example-service.test.js +0 -12
- 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/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.png +0 -0
- package/dist/header/dxc_logo_blk_rgb.svg +0 -6
- package/dist/header/dxc_logo_white.png +0 -0
- 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/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
|
@@ -17,7 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
17
17
|
|
|
18
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _main = require("../main");
|
|
21
21
|
|
|
22
22
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
23
23
|
|
|
@@ -31,12 +31,10 @@ var _twitter = _interopRequireDefault(require("./twitter.svg"));
|
|
|
31
31
|
|
|
32
32
|
var _facebook = _interopRequireDefault(require("./facebook.svg"));
|
|
33
33
|
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
|
|
34
|
+
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
37
35
|
|
|
38
36
|
function _templateObject10() {
|
|
39
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index:
|
|
37
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 1250;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"]);
|
|
40
38
|
|
|
41
39
|
_templateObject10 = function _templateObject10() {
|
|
42
40
|
return data;
|
|
@@ -56,7 +54,7 @@ function _templateObject9() {
|
|
|
56
54
|
}
|
|
57
55
|
|
|
58
56
|
function _templateObject8() {
|
|
59
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index:
|
|
57
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 1200;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"]);
|
|
60
58
|
|
|
61
59
|
_templateObject8 = function _templateObject8() {
|
|
62
60
|
return data;
|
|
@@ -86,7 +84,7 @@ function _templateObject6() {
|
|
|
86
84
|
}
|
|
87
85
|
|
|
88
86
|
function _templateObject5() {
|
|
89
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n display: flex;\n flex-direction: column;\n"]);
|
|
87
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n"]);
|
|
90
88
|
|
|
91
89
|
_templateObject5 = function _templateObject5() {
|
|
92
90
|
return data;
|
|
@@ -116,7 +114,7 @@ function _templateObject3() {
|
|
|
116
114
|
}
|
|
117
115
|
|
|
118
116
|
function _templateObject2() {
|
|
119
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index:
|
|
117
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1250;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"]);
|
|
120
118
|
|
|
121
119
|
_templateObject2 = function _templateObject2() {
|
|
122
120
|
return data;
|
|
@@ -156,7 +154,7 @@ var SideNav = function SideNav(props) {
|
|
|
156
154
|
var displayArrow = props.displayArrow,
|
|
157
155
|
mode = props.mode,
|
|
158
156
|
childProps = (0, _objectWithoutProperties2["default"])(props, ["displayArrow", "mode"]);
|
|
159
|
-
return _react["default"].createElement(
|
|
157
|
+
return _react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
|
|
160
158
|
};
|
|
161
159
|
|
|
162
160
|
SideNav.propTypes = {
|
|
@@ -171,7 +169,7 @@ SideNav.propTypes = {
|
|
|
171
169
|
};
|
|
172
170
|
|
|
173
171
|
var defaultFooter = function defaultFooter() {
|
|
174
|
-
return _react["default"].createElement(
|
|
172
|
+
return _react["default"].createElement(_main.DxcFooter, {
|
|
175
173
|
copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
|
|
176
174
|
bottomLinks: [{
|
|
177
175
|
href: "https://www.linkedin.com/company/dxctechnology",
|
|
@@ -197,7 +195,7 @@ var defaultFooter = function defaultFooter() {
|
|
|
197
195
|
};
|
|
198
196
|
|
|
199
197
|
var defaultHeader = function defaultHeader() {
|
|
200
|
-
return _react["default"].createElement(
|
|
198
|
+
return _react["default"].createElement(_main.DxcHeader, {
|
|
201
199
|
underlined: true
|
|
202
200
|
});
|
|
203
201
|
};
|
|
@@ -211,10 +209,7 @@ var childTypeExists = function childTypeExists(children, childType) {
|
|
|
211
209
|
var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
212
210
|
var children = _ref4.children;
|
|
213
211
|
var ref = (0, _react.useRef)(null);
|
|
214
|
-
var
|
|
215
|
-
var colorsTheme = (0, _react.useMemo)(function () {
|
|
216
|
-
return (0, _utils.getCustomTheme)(_variables.componentTokens, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
|
|
217
|
-
}, [customTheme]);
|
|
212
|
+
var colorsTheme = (0, _useTheme["default"])();
|
|
218
213
|
|
|
219
214
|
var _useState = (0, _react.useState)(true),
|
|
220
215
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
@@ -228,8 +223,8 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
|
228
223
|
|
|
229
224
|
var childrenArray = _react["default"].Children.toArray(children);
|
|
230
225
|
|
|
231
|
-
var header = childTypeExists(childrenArray,
|
|
232
|
-
var footer = childTypeExists(childrenArray,
|
|
226
|
+
var header = childTypeExists(childrenArray, _main.DxcHeader) || childTypeExists(childrenArray, Header) || defaultHeader();
|
|
227
|
+
var footer = childTypeExists(childrenArray, _main.DxcFooter) || childTypeExists(childrenArray, Footer) || defaultFooter();
|
|
233
228
|
var sideNav = childTypeExists(childrenArray, SideNav);
|
|
234
229
|
var main = childTypeExists(childrenArray, Main);
|
|
235
230
|
var displayArrow = sideNav && sideNav.props && sideNav.props.displayArrow;
|
|
@@ -281,6 +276,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
|
281
276
|
}, _react["default"].createElement(HeaderContainer, null, header), _react["default"].createElement(BodyContainer, null, _react["default"].createElement(ContentContainer, null, _react["default"].createElement(SideNavArrowContainer, {
|
|
282
277
|
isSideNavVisible: isSideNavVisible
|
|
283
278
|
}, sideNav, _react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && _react["default"].createElement(ArrowTrigger, {
|
|
279
|
+
tabIndex: 0,
|
|
284
280
|
onClick: handleSidenav,
|
|
285
281
|
isSideNavVisible: isSideNavVisible
|
|
286
282
|
}, _react["default"].createElement(ArrowIcon, null)))), _react["default"].createElement(MainBodyContainer, null, _react["default"].createElement(MainContent, {
|
|
@@ -324,7 +320,7 @@ var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8(),
|
|
|
324
320
|
var ArrowContainer = _styledComponents["default"].div(_templateObject9());
|
|
325
321
|
|
|
326
322
|
var ArrowTrigger = _styledComponents["default"].div(_templateObject10(), function (props) {
|
|
327
|
-
return "".concat(props.theme.arrowContainerColor)
|
|
323
|
+
return "".concat(props.theme.arrowContainerColor);
|
|
328
324
|
}, function (props) {
|
|
329
325
|
return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";
|
|
330
326
|
}, function (props) {
|
package/dist/link/Link.js
CHANGED
|
@@ -15,7 +15,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
15
15
|
|
|
16
16
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
17
17
|
|
|
18
|
-
var _react =
|
|
18
|
+
var _react = _interopRequireDefault(require("react"));
|
|
19
19
|
|
|
20
20
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
21
|
|
|
@@ -23,12 +23,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
23
23
|
|
|
24
24
|
var _variables = require("../common/variables.js");
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
function _templateObject6() {
|
|
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
|
+
|
|
31
|
+
_templateObject6 = function _templateObject6() {
|
|
32
|
+
return data;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return data;
|
|
36
|
+
}
|
|
29
37
|
|
|
30
38
|
function _templateObject5() {
|
|
31
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
39
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"]);
|
|
32
40
|
|
|
33
41
|
_templateObject5 = function _templateObject5() {
|
|
34
42
|
return data;
|
|
@@ -38,7 +46,7 @@ function _templateObject5() {
|
|
|
38
46
|
}
|
|
39
47
|
|
|
40
48
|
function _templateObject4() {
|
|
41
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
49
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n display: inline-flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: center;\n max-width: 100%;\n"]);
|
|
42
50
|
|
|
43
51
|
_templateObject4 = function _templateObject4() {
|
|
44
52
|
return data;
|
|
@@ -48,7 +56,7 @@ function _templateObject4() {
|
|
|
48
56
|
}
|
|
49
57
|
|
|
50
58
|
function _templateObject3() {
|
|
51
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
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"]);
|
|
52
60
|
|
|
53
61
|
_templateObject3 = function _templateObject3() {
|
|
54
62
|
return data;
|
|
@@ -58,7 +66,7 @@ function _templateObject3() {
|
|
|
58
66
|
}
|
|
59
67
|
|
|
60
68
|
function _templateObject2() {
|
|
61
|
-
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"]);
|
|
62
70
|
|
|
63
71
|
_templateObject2 = function _templateObject2() {
|
|
64
72
|
return data;
|
|
@@ -68,7 +76,7 @@ function _templateObject2() {
|
|
|
68
76
|
}
|
|
69
77
|
|
|
70
78
|
function _templateObject() {
|
|
71
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n
|
|
79
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
|
|
72
80
|
|
|
73
81
|
_templateObject = function _templateObject() {
|
|
74
82
|
return data;
|
|
@@ -78,9 +86,7 @@ function _templateObject() {
|
|
|
78
86
|
}
|
|
79
87
|
|
|
80
88
|
var DxcLink = function DxcLink(_ref) {
|
|
81
|
-
var _ref$
|
|
82
|
-
underlined = _ref$underlined === void 0 ? true : _ref$underlined,
|
|
83
|
-
_ref$inheritColor = _ref.inheritColor,
|
|
89
|
+
var _ref$inheritColor = _ref.inheritColor,
|
|
84
90
|
inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
|
|
85
91
|
_ref$disabled = _ref.disabled,
|
|
86
92
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
@@ -95,17 +101,12 @@ var DxcLink = function DxcLink(_ref) {
|
|
|
95
101
|
onClick = _ref.onClick,
|
|
96
102
|
_ref$text = _ref.text,
|
|
97
103
|
text = _ref$text === void 0 ? "" : _ref$text,
|
|
98
|
-
margin = _ref.margin
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}, [customTheme]);
|
|
104
|
+
margin = _ref.margin,
|
|
105
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
106
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
107
|
+
var colorsTheme = (0, _useTheme["default"])();
|
|
103
108
|
|
|
104
109
|
var linkContent = _react["default"].createElement(LinkText, {
|
|
105
|
-
underlined: underlined,
|
|
106
|
-
inheritColor: inheritColor,
|
|
107
|
-
disabled: disabled,
|
|
108
|
-
margin: margin,
|
|
109
110
|
iconPosition: iconPosition
|
|
110
111
|
}, text, icon ? _react["default"].createElement(LinkIconContainer, {
|
|
111
112
|
iconPosition: iconPosition
|
|
@@ -116,17 +117,25 @@ var DxcLink = function DxcLink(_ref) {
|
|
|
116
117
|
|
|
117
118
|
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
118
119
|
theme: colorsTheme.link
|
|
120
|
+
}, _react["default"].createElement(DxcLinkContainer, {
|
|
121
|
+
margin: margin
|
|
119
122
|
}, onClick ? _react["default"].createElement(StyledButton, {
|
|
123
|
+
type: "button",
|
|
120
124
|
onClick: !disabled && onClick,
|
|
121
|
-
|
|
125
|
+
margin: margin,
|
|
126
|
+
disabled: disabled,
|
|
127
|
+
inheritColor: inheritColor
|
|
122
128
|
}, linkContent) : _react["default"].createElement(StyledLink, {
|
|
129
|
+
tabIndex: tabIndex,
|
|
123
130
|
href: !disabled && href,
|
|
124
131
|
target: newWindow ? "_blank" : "_self",
|
|
132
|
+
margin: margin,
|
|
133
|
+
disabled: disabled,
|
|
125
134
|
inheritColor: inheritColor
|
|
126
|
-
}, linkContent));
|
|
135
|
+
}, linkContent)));
|
|
127
136
|
};
|
|
128
137
|
|
|
129
|
-
var
|
|
138
|
+
var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), function (props) {
|
|
130
139
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
131
140
|
}, function (props) {
|
|
132
141
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
@@ -136,42 +145,77 @@ var LinkText = _styledComponents["default"].div(_templateObject(), function (pro
|
|
|
136
145
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
137
146
|
}, function (props) {
|
|
138
147
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
var StyledLink = _styledComponents["default"].a(_templateObject2(), function (props) {
|
|
151
|
+
return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
|
|
139
152
|
}, function (props) {
|
|
140
|
-
return props.
|
|
153
|
+
return props.disabled ? "pointer-events: none;" : "";
|
|
141
154
|
}, function (props) {
|
|
142
|
-
return props.
|
|
155
|
+
return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
|
|
143
156
|
}, function (props) {
|
|
144
|
-
return !props.
|
|
157
|
+
return !props.inheritColor ? props.theme.visitedFontColor : "";
|
|
145
158
|
}, function (props) {
|
|
146
|
-
return props.
|
|
159
|
+
return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
|
|
147
160
|
}, function (props) {
|
|
148
|
-
return props.
|
|
161
|
+
return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
|
|
149
162
|
}, function (props) {
|
|
150
|
-
return props.
|
|
163
|
+
return props.theme.focusColor;
|
|
151
164
|
}, function (props) {
|
|
152
|
-
return
|
|
165
|
+
return props.disabled && "outline: none";
|
|
153
166
|
}, function (props) {
|
|
154
|
-
return
|
|
167
|
+
return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
|
|
155
168
|
});
|
|
156
169
|
|
|
157
|
-
var
|
|
158
|
-
return props.
|
|
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) {
|
|
173
|
+
return props.disabled && "cursor: default;";
|
|
174
|
+
}, function (props) {
|
|
175
|
+
return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
|
|
176
|
+
}, function (props) {
|
|
177
|
+
return props.disabled ? "pointer-events: none;" : "";
|
|
178
|
+
}, function (props) {
|
|
179
|
+
return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
|
|
180
|
+
}, function (props) {
|
|
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;");
|
|
159
186
|
});
|
|
160
187
|
|
|
161
|
-
var
|
|
162
|
-
return props.
|
|
188
|
+
var LinkText = _styledComponents["default"].div(_templateObject4(), function (props) {
|
|
189
|
+
return props.theme.fontSize;
|
|
190
|
+
}, function (props) {
|
|
191
|
+
return props.theme.fontWeight;
|
|
192
|
+
}, function (props) {
|
|
193
|
+
return props.theme.fontStyle;
|
|
194
|
+
}, function (props) {
|
|
195
|
+
return props.theme.fontFamily;
|
|
196
|
+
}, function (props) {
|
|
197
|
+
return props.iconPosition === "after" ? "row" : "row-reverse";
|
|
198
|
+
}, function (props) {
|
|
199
|
+
return props.iconPosition === "after" ? "flex-start" : "flex-end";
|
|
163
200
|
});
|
|
164
201
|
|
|
165
|
-
var
|
|
166
|
-
return props.
|
|
202
|
+
var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
|
|
203
|
+
return props.theme.iconSize;
|
|
204
|
+
}, function (props) {
|
|
205
|
+
return props.theme.iconSize;
|
|
206
|
+
}, function (props) {
|
|
207
|
+
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
167
208
|
});
|
|
168
209
|
|
|
169
|
-
var
|
|
170
|
-
return props.
|
|
210
|
+
var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
|
|
211
|
+
return props.theme.iconSize;
|
|
212
|
+
}, function (props) {
|
|
213
|
+
return props.theme.iconSize;
|
|
214
|
+
}, function (props) {
|
|
215
|
+
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
171
216
|
});
|
|
172
217
|
|
|
173
218
|
DxcLink.propTypes = {
|
|
174
|
-
underlined: _propTypes["default"].bool,
|
|
175
219
|
inheritColor: _propTypes["default"].bool,
|
|
176
220
|
disabled: _propTypes["default"].bool,
|
|
177
221
|
icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
|
|
@@ -186,7 +230,8 @@ DxcLink.propTypes = {
|
|
|
186
230
|
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
187
231
|
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
|
|
188
232
|
newWindow: _propTypes["default"].bool,
|
|
189
|
-
text: _propTypes["default"].string
|
|
233
|
+
text: _propTypes["default"].string,
|
|
234
|
+
tabIndex: _propTypes["default"].number
|
|
190
235
|
};
|
|
191
236
|
var _default = DxcLink;
|
|
192
237
|
exports["default"] = _default;
|
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 DxcTextarea } from "./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
|
@@ -37,7 +37,7 @@ Object.defineProperty(exports, "DxcCheckbox", {
|
|
|
37
37
|
return _Checkbox["default"];
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
|
-
Object.defineProperty(exports, "
|
|
40
|
+
Object.defineProperty(exports, "V3DxcDate", {
|
|
41
41
|
enumerable: true,
|
|
42
42
|
get: function get() {
|
|
43
43
|
return _Date["default"];
|
|
@@ -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"];
|
|
@@ -121,7 +121,7 @@ Object.defineProperty(exports, "DxcSpinner", {
|
|
|
121
121
|
return _Spinner["default"];
|
|
122
122
|
}
|
|
123
123
|
});
|
|
124
|
-
Object.defineProperty(exports, "
|
|
124
|
+
Object.defineProperty(exports, "V3DxcUpload", {
|
|
125
125
|
enumerable: true,
|
|
126
126
|
get: function get() {
|
|
127
127
|
return _Upload["default"];
|
|
@@ -175,10 +175,10 @@ Object.defineProperty(exports, "DxcHeading", {
|
|
|
175
175
|
return _Heading["default"];
|
|
176
176
|
}
|
|
177
177
|
});
|
|
178
|
-
Object.defineProperty(exports, "
|
|
178
|
+
Object.defineProperty(exports, "V3DxcTextarea", {
|
|
179
179
|
enumerable: true,
|
|
180
180
|
get: function get() {
|
|
181
|
-
return
|
|
181
|
+
return _V3Textarea["default"];
|
|
182
182
|
}
|
|
183
183
|
});
|
|
184
184
|
Object.defineProperty(exports, "DxcResultsetTable", {
|
|
@@ -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, "DxcTextarea", {
|
|
245
|
+
enumerable: true,
|
|
246
|
+
get: function get() {
|
|
247
|
+
return _Textarea["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() {
|
|
@@ -229,6 +271,12 @@ Object.defineProperty(exports, "ThemeProvider", {
|
|
|
229
271
|
return _ThemeContext.ThemeProvider;
|
|
230
272
|
}
|
|
231
273
|
});
|
|
274
|
+
Object.defineProperty(exports, "BackgroundColorProvider", {
|
|
275
|
+
enumerable: true,
|
|
276
|
+
get: function get() {
|
|
277
|
+
return _BackgroundColorContext.BackgroundColorProvider;
|
|
278
|
+
}
|
|
279
|
+
});
|
|
232
280
|
|
|
233
281
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
234
282
|
|
|
@@ -286,7 +334,7 @@ var _Link = _interopRequireDefault(require("./link/Link"));
|
|
|
286
334
|
|
|
287
335
|
var _Heading = _interopRequireDefault(require("./heading/Heading"));
|
|
288
336
|
|
|
289
|
-
var
|
|
337
|
+
var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
|
|
290
338
|
|
|
291
339
|
var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
|
|
292
340
|
|
|
@@ -300,4 +348,20 @@ var _AccordionGroup = _interopRequireDefault(require("./accordion-group/Accordio
|
|
|
300
348
|
|
|
301
349
|
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
302
350
|
|
|
303
|
-
var
|
|
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 _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
|
|
360
|
+
|
|
361
|
+
var _NewSelect = _interopRequireDefault(require("./new-select/NewSelect"));
|
|
362
|
+
|
|
363
|
+
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
364
|
+
|
|
365
|
+
var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
|
|
366
|
+
|
|
367
|
+
var _BackgroundColorContext = require("./BackgroundColorContext.js");
|