@dxc-technology/halstack-react 0.0.0-878c09d → 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/README.md +1 -1
- package/babel.config.js +6 -2
- package/dist/BackgroundColorContext.js +46 -0
- package/dist/ThemeContext.js +235 -2
- package/dist/accordion/Accordion.js +152 -67
- package/dist/accordion-group/AccordionGroup.js +37 -10
- 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 +31 -23
- package/dist/button/Button.js +61 -25
- package/dist/card/Card.js +72 -35
- package/dist/checkbox/Checkbox.js +98 -38
- package/dist/chip/Chip.js +97 -40
- package/dist/common/RequiredComponent.js +2 -8
- package/dist/common/utils.js +2 -22
- package/dist/common/variables.js +1439 -303
- package/dist/date/Date.js +69 -49
- 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 +176 -81
- 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 +74 -50
- package/dist/footer/dxc_logo.svg +15 -0
- package/dist/header/Header.js +93 -63
- package/dist/header/dxc_logo_black.svg +8 -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 +74 -2
- 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 +113 -56
- 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 +82 -65
- 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 +95 -43
- 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 +77 -40
- package/dist/toggle/Toggle.js +16 -19
- package/dist/toggle-group/ToggleGroup.js +142 -41
- package/dist/upload/Upload.js +13 -8
- 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/transaction/Transaction.js +44 -24
- package/dist/upload/transactions/Transactions.js +38 -20
- package/dist/useTheme.js +22 -0
- 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 +8 -2
- package/test/AccordionGroup.test.js +16 -0
- package/test/Date.test.js +13 -13
- 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 +25 -17
- package/test/Link.test.js +3 -2
- package/test/NewTextarea.test.js +195 -0
- package/test/NumberInput.test.js +259 -0
- package/test/Paginator.test.js +40 -57
- package/test/PasswordInput.test.js +83 -0
- package/test/ResultsetTable.test.js +33 -8
- 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/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/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
|
@@ -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.theme, (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 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
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
|
|
3
5
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
6
|
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -65,7 +67,7 @@ Object.defineProperty(exports, "DxcHeader", {
|
|
|
65
67
|
return _Header["default"];
|
|
66
68
|
}
|
|
67
69
|
});
|
|
68
|
-
Object.defineProperty(exports, "
|
|
70
|
+
Object.defineProperty(exports, "V3DxcInputText", {
|
|
69
71
|
enumerable: true,
|
|
70
72
|
get: function get() {
|
|
71
73
|
return _InputText["default"];
|
|
@@ -215,12 +217,66 @@ Object.defineProperty(exports, "DxcBadge", {
|
|
|
215
217
|
return _Badge["default"];
|
|
216
218
|
}
|
|
217
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
|
+
});
|
|
218
262
|
Object.defineProperty(exports, "ThemeContext", {
|
|
219
263
|
enumerable: true,
|
|
220
264
|
get: function get() {
|
|
221
265
|
return _ThemeContext["default"];
|
|
222
266
|
}
|
|
223
267
|
});
|
|
268
|
+
Object.defineProperty(exports, "ThemeProvider", {
|
|
269
|
+
enumerable: true,
|
|
270
|
+
get: function get() {
|
|
271
|
+
return _ThemeContext.ThemeProvider;
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
Object.defineProperty(exports, "BackgroundColorProvider", {
|
|
275
|
+
enumerable: true,
|
|
276
|
+
get: function get() {
|
|
277
|
+
return _BackgroundColorContext.BackgroundColorProvider;
|
|
278
|
+
}
|
|
279
|
+
});
|
|
224
280
|
|
|
225
281
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
226
282
|
|
|
@@ -292,4 +348,20 @@ var _AccordionGroup = _interopRequireDefault(require("./accordion-group/Accordio
|
|
|
292
348
|
|
|
293
349
|
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
294
350
|
|
|
295
|
-
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 _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
|
+
|
|
365
|
+
var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
|
|
366
|
+
|
|
367
|
+
var _BackgroundColorContext = require("./BackgroundColorContext.js");
|