@dxc-technology/halstack-react 0.0.0-d3ac293 → 0.0.0-d3df47e
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.d.ts +1 -10
- package/BackgroundColorContext.js +4 -21
- package/HalstackContext.d.ts +24 -139
- package/HalstackContext.js +11 -36
- package/README.md +47 -0
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +26 -83
- package/accordion/Accordion.stories.tsx +2 -114
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -17
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +27 -75
- package/accordion-group/AccordionGroup.stories.tsx +78 -77
- package/accordion-group/AccordionGroup.test.js +43 -71
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +31 -0
- package/accordion-group/types.d.ts +6 -18
- package/action-icon/ActionIcon.d.ts +4 -0
- package/action-icon/ActionIcon.js +47 -0
- package/action-icon/ActionIcon.stories.tsx +41 -0
- package/action-icon/ActionIcon.test.js +64 -0
- package/action-icon/types.d.ts +26 -0
- package/alert/Alert.js +17 -56
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.d.ts +1 -1
- package/badge/Badge.js +142 -42
- package/badge/Badge.stories.tsx +210 -0
- package/badge/Badge.test.js +30 -0
- package/badge/types.d.ts +52 -3
- package/bleed/Bleed.js +13 -21
- package/bleed/Bleed.stories.tsx +1 -0
- package/bleed/types.d.ts +2 -2
- package/box/Box.d.ts +1 -1
- package/box/Box.js +16 -55
- package/box/Box.stories.tsx +25 -53
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -15
- package/bulleted-list/BulletedList.js +19 -53
- package/bulleted-list/BulletedList.stories.tsx +8 -93
- package/bulleted-list/types.d.ts +32 -5
- package/button/Button.d.ts +1 -1
- package/button/Button.js +66 -100
- package/button/Button.stories.tsx +9 -90
- package/button/Button.test.js +19 -16
- package/button/types.d.ts +8 -4
- package/card/Card.d.ts +1 -1
- package/card/Card.js +47 -88
- package/card/Card.stories.tsx +12 -42
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +6 -12
- package/checkbox/Checkbox.js +85 -120
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.js +34 -68
- package/chip/Chip.stories.tsx +25 -17
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/OpenSans.css +68 -80
- package/common/coreTokens.d.ts +237 -0
- package/common/coreTokens.js +184 -0
- package/common/utils.js +2 -8
- package/common/variables.d.ts +24 -282
- package/common/variables.js +860 -1125
- package/container/Container.d.ts +4 -0
- package/container/Container.js +194 -0
- package/container/Container.stories.tsx +214 -0
- package/container/types.d.ts +74 -0
- package/date-input/Calendar.js +15 -59
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +27 -21
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +15 -60
- package/dialog/Dialog.stories.tsx +215 -169
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -26
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +13 -20
- package/dropdown/DropdownMenuItem.js +5 -19
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +180 -249
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +356 -354
- package/file-input/FileItem.js +14 -41
- package/file-input/types.d.ts +10 -10
- package/flex/Flex.js +27 -39
- package/flex/Flex.stories.tsx +35 -26
- package/flex/types.d.ts +74 -9
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +69 -116
- package/footer/Footer.stories.tsx +38 -95
- package/footer/Footer.test.js +21 -33
- package/footer/Icons.d.ts +3 -2
- package/footer/Icons.js +66 -7
- package/footer/types.d.ts +25 -27
- package/grid/Grid.d.ts +7 -0
- package/grid/Grid.js +76 -0
- package/grid/Grid.stories.tsx +219 -0
- package/grid/types.d.ts +115 -0
- package/grid/types.js +5 -0
- package/header/Header.d.ts +4 -3
- package/header/Header.js +33 -116
- package/header/Header.stories.tsx +7 -71
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +5 -20
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/image/Image.d.ts +4 -0
- package/image/Image.js +70 -0
- package/image/Image.stories.tsx +127 -0
- package/image/types.d.ts +72 -0
- package/image/types.js +5 -0
- package/inset/Inset.js +13 -21
- package/inset/Inset.stories.tsx +2 -1
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +5 -5
- package/layout/ApplicationLayout.js +28 -65
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +8 -5
- package/layout/Icons.js +51 -59
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +3 -9
- package/layout/types.d.ts +5 -6
- package/link/Link.js +23 -44
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +7 -4
- package/main.js +32 -58
- package/nav-tabs/NavTabs.d.ts +2 -2
- package/nav-tabs/NavTabs.js +22 -54
- package/nav-tabs/NavTabs.stories.tsx +21 -5
- package/nav-tabs/NavTabs.test.js +38 -44
- package/nav-tabs/Tab.js +40 -72
- package/nav-tabs/types.d.ts +14 -15
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +26 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +700 -412
- package/number-input/types.d.ts +11 -5
- package/package.json +30 -28
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +17 -47
- package/paginator/Paginator.test.js +229 -199
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.d.ts +2 -3
- package/paragraph/Paragraph.js +3 -19
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +35 -0
- package/password-input/PasswordInput.js +57 -126
- package/password-input/PasswordInput.stories.tsx +1 -33
- package/password-input/PasswordInput.test.js +157 -140
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +21 -53
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +4 -3
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +31 -63
- package/radio-group/RadioGroup.js +45 -93
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +1 -1
- package/{resultsetTable → resultset-table}/ResultsetTable.js +33 -63
- package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +19 -0
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +13 -7
- package/resultset-table/types.js +5 -0
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +17 -27
- package/select/Select.js +92 -166
- package/select/Select.stories.tsx +3 -3
- package/select/Select.test.js +1946 -1804
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +47 -0
- package/sidenav/Sidenav.d.ts +2 -2
- package/sidenav/Sidenav.js +80 -150
- package/sidenav/Sidenav.stories.tsx +60 -60
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +31 -28
- package/slider/Slider.js +68 -126
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +28 -72
- package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +28 -28
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/status-light/StatusLight.d.ts +4 -0
- package/status-light/StatusLight.js +51 -0
- package/status-light/StatusLight.stories.tsx +74 -0
- package/status-light/StatusLight.test.js +25 -0
- package/status-light/types.d.ts +17 -0
- package/status-light/types.js +5 -0
- package/switch/Switch.js +49 -97
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.d.ts +1 -1
- package/table/Table.js +23 -30
- package/table/{Table.stories.jsx → Table.stories.tsx} +98 -0
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +12 -6
- package/tabs/Tab.js +19 -36
- package/tabs/Tabs.js +61 -144
- package/tabs/Tabs.stories.tsx +1 -1
- package/tabs/Tabs.test.js +65 -121
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +26 -58
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +5 -5
- package/text-input/Icons.js +1 -5
- package/text-input/Suggestion.js +11 -28
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +15 -65
- package/text-input/TextInput.js +217 -318
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1210 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +68 -111
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
- package/textarea/Textarea.test.js +151 -182
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/toggle-group/ToggleGroup.js +91 -105
- package/toggle-group/ToggleGroup.stories.tsx +7 -4
- package/toggle-group/ToggleGroup.test.js +68 -87
- package/toggle-group/types.d.ts +26 -17
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +21 -136
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +28 -43
- package/wizard/Wizard.js +15 -50
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +8 -9
- package/card/ice-cream.jpg +0 -0
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → action-icon}/types.js +0 -0
- /package/{number-input/numberInputContextTypes.js → container/types.js} +0 -0
package/link/Link.js
CHANGED
|
@@ -1,67 +1,51 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = void 0;
|
|
11
|
-
|
|
12
9
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
13
|
-
|
|
14
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
-
|
|
16
11
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
17
|
-
|
|
18
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
19
|
-
|
|
20
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
-
|
|
22
14
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
23
|
-
|
|
24
15
|
var _variables = require("../common/variables");
|
|
25
|
-
|
|
26
16
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
27
|
-
|
|
28
17
|
var _templateObject, _templateObject2, _templateObject3;
|
|
29
|
-
|
|
30
18
|
var _excluded = ["inheritColor", "disabled", "icon", "iconPosition", "href", "newWindow", "onClick", "margin", "tabIndex", "children"];
|
|
31
|
-
|
|
32
|
-
function
|
|
33
|
-
|
|
34
|
-
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; }
|
|
35
|
-
|
|
19
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
36
21
|
var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
|
|
37
22
|
var iconPosition = _ref.iconPosition,
|
|
38
|
-
|
|
39
|
-
|
|
23
|
+
icon = _ref.icon,
|
|
24
|
+
children = _ref.children;
|
|
40
25
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
|
|
41
26
|
iconPosition: iconPosition
|
|
42
27
|
}, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
|
|
43
28
|
src: icon
|
|
44
29
|
}) : icon), iconPosition === "before" && children);
|
|
45
30
|
});
|
|
46
|
-
|
|
47
31
|
var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
48
32
|
var _ref2$inheritColor = _ref2.inheritColor,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
33
|
+
inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
|
|
34
|
+
_ref2$disabled = _ref2.disabled,
|
|
35
|
+
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
|
|
36
|
+
icon = _ref2.icon,
|
|
37
|
+
_ref2$iconPosition = _ref2.iconPosition,
|
|
38
|
+
iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
|
|
39
|
+
_ref2$href = _ref2.href,
|
|
40
|
+
href = _ref2$href === void 0 ? "" : _ref2$href,
|
|
41
|
+
_ref2$newWindow = _ref2.newWindow,
|
|
42
|
+
newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
|
|
43
|
+
onClick = _ref2.onClick,
|
|
44
|
+
margin = _ref2.margin,
|
|
45
|
+
_ref2$tabIndex = _ref2.tabIndex,
|
|
46
|
+
tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
|
|
47
|
+
children = _ref2.children,
|
|
48
|
+
otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
65
49
|
var colorsTheme = (0, _useTheme["default"])();
|
|
66
50
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
67
51
|
theme: colorsTheme.link
|
|
@@ -81,8 +65,7 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
|
81
65
|
children: children
|
|
82
66
|
})));
|
|
83
67
|
});
|
|
84
|
-
|
|
85
|
-
var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: baseline;\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n text-decoration-color: transparent;\n width: fit-content;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
|
|
68
|
+
var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: baseline;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n text-decoration-color: transparent;\n width: fit-content;\n ", "\n ", "\n color: ", ";\n ", "\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
|
|
86
69
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
87
70
|
}, function (props) {
|
|
88
71
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
@@ -105,7 +88,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
|
|
|
105
88
|
}, function (props) {
|
|
106
89
|
return props.disabled && "cursor: default;";
|
|
107
90
|
}, function (props) {
|
|
108
|
-
return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.
|
|
91
|
+
return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledFontColor;
|
|
109
92
|
}, function (props) {
|
|
110
93
|
return props.disabled ? "pointer-events: none;" : "";
|
|
111
94
|
}, function (props) {
|
|
@@ -121,9 +104,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
|
|
|
121
104
|
}, function (props) {
|
|
122
105
|
return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
|
|
123
106
|
});
|
|
124
|
-
|
|
125
107
|
var LinkIcon = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
126
|
-
|
|
127
108
|
var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n align-self: center;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
128
109
|
return props.theme.iconSize;
|
|
129
110
|
}, function (props) {
|
|
@@ -131,6 +112,4 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_t
|
|
|
131
112
|
}, function (props) {
|
|
132
113
|
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
133
114
|
});
|
|
134
|
-
|
|
135
|
-
var _default = DxcLink;
|
|
136
|
-
exports["default"] = _default;
|
|
115
|
+
var _default = exports["default"] = DxcLink;
|
package/link/Link.test.js
CHANGED
|
@@ -1,81 +1,63 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _react = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _react2 = require("@testing-library/react");
|
|
8
|
-
|
|
9
6
|
var _Link = _interopRequireDefault(require("./Link.tsx"));
|
|
10
|
-
|
|
11
7
|
describe("Link component tests", function () {
|
|
12
8
|
test("Link renders with correct text", function () {
|
|
13
9
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
getByText = _render.getByText;
|
|
16
11
|
expect(getByText("Link")).toBeTruthy();
|
|
17
12
|
});
|
|
18
13
|
test("Link renders with correct href", function () {
|
|
19
14
|
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
href: "/testPage"
|
|
16
|
+
}, "Link")),
|
|
17
|
+
getByRole = _render2.getByRole;
|
|
24
18
|
expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
|
|
25
19
|
});
|
|
26
20
|
test("Link renders with correct disabled state", function () {
|
|
27
21
|
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
href: "/testPage",
|
|
23
|
+
disabled: true
|
|
24
|
+
}, "Link")),
|
|
25
|
+
getByText = _render3.getByText;
|
|
33
26
|
expect(getByText("Link").hasAttribute("href")).toBeFalsy();
|
|
34
|
-
|
|
35
27
|
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
onClick: function onClick() {},
|
|
29
|
+
disabled: true
|
|
30
|
+
}, "LinkButton")),
|
|
31
|
+
getByTextLinkButton = _render4.getByText;
|
|
41
32
|
expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
|
|
42
33
|
});
|
|
43
34
|
test("Link open new tab", function () {
|
|
44
35
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
36
|
+
href: "/testPage",
|
|
37
|
+
newWindow: true
|
|
38
|
+
}, "Link")),
|
|
39
|
+
getByRole = _render5.getByRole;
|
|
50
40
|
expect(getByRole("link").getAttribute("target")).toEqual("_blank");
|
|
51
41
|
});
|
|
52
42
|
test("Link onClick called", function () {
|
|
53
43
|
var onClick = jest.fn();
|
|
54
|
-
|
|
55
44
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
45
|
+
onClick: onClick
|
|
46
|
+
}, "Link")),
|
|
47
|
+
getByText = _render6.getByText;
|
|
60
48
|
var link = getByText("Link");
|
|
61
|
-
|
|
62
49
|
_react2.fireEvent.click(link);
|
|
63
|
-
|
|
64
50
|
expect(onClick).toHaveBeenCalled();
|
|
65
51
|
});
|
|
66
52
|
test("Disabled link onClick not called", function () {
|
|
67
53
|
var onClick = jest.fn();
|
|
68
|
-
|
|
69
54
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
55
|
+
onClick: onClick,
|
|
56
|
+
disabled: true
|
|
57
|
+
}, "Link")),
|
|
58
|
+
getByText = _render7.getByText;
|
|
75
59
|
var link = getByText("Link");
|
|
76
|
-
|
|
77
60
|
_react2.fireEvent.click(link);
|
|
78
|
-
|
|
79
61
|
expect(onClick).toHaveBeenCalledTimes(0);
|
|
80
62
|
});
|
|
81
63
|
});
|
package/link/types.d.ts
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
|
|
10
|
-
export
|
|
9
|
+
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
10
|
+
export type LinkProps = {
|
|
11
|
+
/**
|
|
12
|
+
* If true, the link is disabled.
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
11
15
|
/**
|
|
12
16
|
* If true, the color is inherited from parent.
|
|
13
17
|
*/
|
|
14
18
|
inheritColor?: boolean;
|
|
15
19
|
/**
|
|
16
|
-
*
|
|
20
|
+
* Element or path used as the icon that will be placed next to the link text.
|
|
17
21
|
*/
|
|
18
|
-
|
|
22
|
+
icon?: string | SVG;
|
|
19
23
|
/**
|
|
20
24
|
* Indicates the position of the icon in the component.
|
|
21
25
|
*/
|
|
@@ -33,6 +37,10 @@ export declare type LinkProps = {
|
|
|
33
37
|
* function will be called when the user clicks the link.
|
|
34
38
|
*/
|
|
35
39
|
onClick?: () => void;
|
|
40
|
+
/**
|
|
41
|
+
* Text of the link.
|
|
42
|
+
*/
|
|
43
|
+
children: string;
|
|
36
44
|
/**
|
|
37
45
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
38
46
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
@@ -42,13 +50,5 @@ export declare type LinkProps = {
|
|
|
42
50
|
* Value of the tabindex.
|
|
43
51
|
*/
|
|
44
52
|
tabIndex?: number;
|
|
45
|
-
/**
|
|
46
|
-
* Content of the link.
|
|
47
|
-
*/
|
|
48
|
-
children: string;
|
|
49
|
-
/**
|
|
50
|
-
* Element or path used as the icon that will be placed next to the link text.
|
|
51
|
-
*/
|
|
52
|
-
icon?: string | SVG;
|
|
53
53
|
};
|
|
54
54
|
export {};
|
package/main.d.ts
CHANGED
|
@@ -17,12 +17,11 @@ import DxcPaginator from "./paginator/Paginator";
|
|
|
17
17
|
import DxcWizard from "./wizard/Wizard";
|
|
18
18
|
import DxcLink from "./link/Link";
|
|
19
19
|
import DxcHeading from "./heading/Heading";
|
|
20
|
-
import DxcResultsetTable from "./
|
|
20
|
+
import DxcResultsetTable from "./resultset-table/ResultsetTable";
|
|
21
21
|
import DxcChip from "./chip/Chip";
|
|
22
22
|
import DxcApplicationLayout from "./layout/ApplicationLayout";
|
|
23
23
|
import DxcToggleGroup from "./toggle-group/ToggleGroup";
|
|
24
24
|
import DxcAccordionGroup from "./accordion-group/AccordionGroup";
|
|
25
|
-
import DxcBadge from "./badge/Badge";
|
|
26
25
|
import DxcTextInput from "./text-input/TextInput";
|
|
27
26
|
import DxcPasswordInput from "./password-input/PasswordInput";
|
|
28
27
|
import DxcDateInput from "./date-input/DateInput";
|
|
@@ -39,6 +38,10 @@ import DxcFlex from "./flex/Flex";
|
|
|
39
38
|
import DxcTypography from "./typography/Typography";
|
|
40
39
|
import DxcParagraph from "./paragraph/Paragraph";
|
|
41
40
|
import DxcBulletedList from "./bulleted-list/BulletedList";
|
|
41
|
+
import DxcGrid from "./grid/Grid";
|
|
42
|
+
import DxcImage from "./image/Image";
|
|
43
|
+
import DxcContainer from "./container/Container";
|
|
44
|
+
import DxcBadge from "./badge/Badge";
|
|
45
|
+
import DxcStatusLight from "./status-light/StatusLight";
|
|
42
46
|
import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
|
|
43
|
-
|
|
44
|
-
export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, };
|
|
47
|
+
export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, DxcBadge, DxcStatusLight, };
|
package/main.js
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
|
-
Object.defineProperty(exports, "BackgroundColorProvider", {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function get() {
|
|
13
|
-
return _BackgroundColorContext.BackgroundColorProvider;
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
8
|
Object.defineProperty(exports, "DxcAccordion", {
|
|
17
9
|
enumerable: true,
|
|
18
10
|
get: function get() {
|
|
@@ -85,6 +77,12 @@ Object.defineProperty(exports, "DxcChip", {
|
|
|
85
77
|
return _Chip["default"];
|
|
86
78
|
}
|
|
87
79
|
});
|
|
80
|
+
Object.defineProperty(exports, "DxcContainer", {
|
|
81
|
+
enumerable: true,
|
|
82
|
+
get: function get() {
|
|
83
|
+
return _Container["default"];
|
|
84
|
+
}
|
|
85
|
+
});
|
|
88
86
|
Object.defineProperty(exports, "DxcDateInput", {
|
|
89
87
|
enumerable: true,
|
|
90
88
|
get: function get() {
|
|
@@ -115,12 +113,24 @@ Object.defineProperty(exports, "DxcFlex", {
|
|
|
115
113
|
return _Flex["default"];
|
|
116
114
|
}
|
|
117
115
|
});
|
|
116
|
+
Object.defineProperty(exports, "DxcGrid", {
|
|
117
|
+
enumerable: true,
|
|
118
|
+
get: function get() {
|
|
119
|
+
return _Grid["default"];
|
|
120
|
+
}
|
|
121
|
+
});
|
|
118
122
|
Object.defineProperty(exports, "DxcHeading", {
|
|
119
123
|
enumerable: true,
|
|
120
124
|
get: function get() {
|
|
121
125
|
return _Heading["default"];
|
|
122
126
|
}
|
|
123
127
|
});
|
|
128
|
+
Object.defineProperty(exports, "DxcImage", {
|
|
129
|
+
enumerable: true,
|
|
130
|
+
get: function get() {
|
|
131
|
+
return _Image["default"];
|
|
132
|
+
}
|
|
133
|
+
});
|
|
124
134
|
Object.defineProperty(exports, "DxcInset", {
|
|
125
135
|
enumerable: true,
|
|
126
136
|
get: function get() {
|
|
@@ -205,6 +215,12 @@ Object.defineProperty(exports, "DxcSpinner", {
|
|
|
205
215
|
return _Spinner["default"];
|
|
206
216
|
}
|
|
207
217
|
});
|
|
218
|
+
Object.defineProperty(exports, "DxcStatusLight", {
|
|
219
|
+
enumerable: true,
|
|
220
|
+
get: function get() {
|
|
221
|
+
return _StatusLight["default"];
|
|
222
|
+
}
|
|
223
|
+
});
|
|
208
224
|
Object.defineProperty(exports, "DxcSwitch", {
|
|
209
225
|
enumerable: true,
|
|
210
226
|
get: function get() {
|
|
@@ -277,93 +293,51 @@ Object.defineProperty(exports, "HalstackProvider", {
|
|
|
277
293
|
return _HalstackContext.HalstackProvider;
|
|
278
294
|
}
|
|
279
295
|
});
|
|
280
|
-
|
|
281
296
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
282
|
-
|
|
283
297
|
var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
|
|
284
|
-
|
|
285
298
|
var _Button = _interopRequireDefault(require("./button/Button"));
|
|
286
|
-
|
|
287
299
|
var _Card = _interopRequireDefault(require("./card/Card"));
|
|
288
|
-
|
|
289
300
|
var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
|
|
290
|
-
|
|
291
301
|
var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
|
|
292
|
-
|
|
293
302
|
var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
|
|
294
|
-
|
|
295
303
|
var _Slider = _interopRequireDefault(require("./slider/Slider"));
|
|
296
|
-
|
|
297
304
|
var _Switch = _interopRequireDefault(require("./switch/Switch"));
|
|
298
|
-
|
|
299
305
|
var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
|
|
300
|
-
|
|
301
306
|
var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
|
|
302
|
-
|
|
303
307
|
var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
|
|
304
|
-
|
|
305
308
|
var _Table = _interopRequireDefault(require("./table/Table"));
|
|
306
|
-
|
|
307
309
|
var _Box = _interopRequireDefault(require("./box/Box"));
|
|
308
|
-
|
|
309
310
|
var _Tag = _interopRequireDefault(require("./tag/Tag"));
|
|
310
|
-
|
|
311
311
|
var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
|
|
312
|
-
|
|
313
312
|
var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
|
|
314
|
-
|
|
315
313
|
var _Link = _interopRequireDefault(require("./link/Link"));
|
|
316
|
-
|
|
317
314
|
var _Heading = _interopRequireDefault(require("./heading/Heading"));
|
|
318
|
-
|
|
319
|
-
var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
|
|
320
|
-
|
|
315
|
+
var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
|
|
321
316
|
var _Chip = _interopRequireDefault(require("./chip/Chip"));
|
|
322
|
-
|
|
323
317
|
var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
|
|
324
|
-
|
|
325
318
|
var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
|
|
326
|
-
|
|
327
319
|
var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
|
|
328
|
-
|
|
329
|
-
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
330
|
-
|
|
331
320
|
var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
|
|
332
|
-
|
|
333
321
|
var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
|
|
334
|
-
|
|
335
322
|
var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
|
|
336
|
-
|
|
337
323
|
var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
|
|
338
|
-
|
|
339
324
|
var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
|
|
340
|
-
|
|
341
325
|
var _Select = _interopRequireDefault(require("./select/Select"));
|
|
342
|
-
|
|
343
326
|
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
344
|
-
|
|
345
327
|
var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
|
|
346
|
-
|
|
347
328
|
var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
|
|
348
|
-
|
|
349
329
|
var _Inset = _interopRequireDefault(require("./inset/Inset"));
|
|
350
|
-
|
|
351
330
|
var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
|
|
352
|
-
|
|
353
331
|
var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
|
|
354
|
-
|
|
355
332
|
var _Flex = _interopRequireDefault(require("./flex/Flex"));
|
|
356
|
-
|
|
357
333
|
var _Typography = _interopRequireDefault(require("./typography/Typography"));
|
|
358
|
-
|
|
359
334
|
var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
|
|
360
|
-
|
|
361
335
|
var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
|
|
362
|
-
|
|
336
|
+
var _Grid = _interopRequireDefault(require("./grid/Grid"));
|
|
337
|
+
var _Image = _interopRequireDefault(require("./image/Image"));
|
|
338
|
+
var _Container = _interopRequireDefault(require("./container/Container"));
|
|
339
|
+
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
340
|
+
var _StatusLight = _interopRequireDefault(require("./status-light/StatusLight"));
|
|
363
341
|
var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
|
|
364
|
-
|
|
365
|
-
var
|
|
366
|
-
|
|
367
|
-
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); }
|
|
368
|
-
|
|
369
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
|
|
342
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
343
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
package/nav-tabs/NavTabs.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { NavTabsContextProps
|
|
2
|
+
import NavTabsPropsType, { NavTabsContextProps } from "./types";
|
|
3
3
|
export declare const NavTabsContext: React.Context<NavTabsContextProps>;
|
|
4
4
|
declare const DxcNavTabs: {
|
|
5
|
-
({ iconPosition, tabIndex, children }:
|
|
5
|
+
({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
|
|
6
6
|
Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
7
7
|
};
|
|
8
8
|
export default DxcNavTabs;
|
package/nav-tabs/NavTabs.js
CHANGED
|
@@ -1,39 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = exports.NavTabsContext = void 0;
|
|
11
|
-
|
|
12
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
12
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
19
|
-
|
|
20
13
|
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
21
|
-
|
|
22
14
|
var _Tab = _interopRequireDefault(require("./Tab"));
|
|
23
|
-
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
|
|
29
|
-
|
|
30
|
-
var NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
31
|
-
exports.NavTabsContext = NavTabsContext;
|
|
32
|
-
|
|
15
|
+
var _templateObject, _templateObject2;
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
18
|
+
var NavTabsContext = exports.NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
33
19
|
var getPropInChild = function getPropInChild(child, propName) {
|
|
34
20
|
return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
|
|
35
21
|
};
|
|
36
|
-
|
|
37
22
|
var getLabelFromTab = function getLabelFromTab(child) {
|
|
38
23
|
if (typeof child === "string") {
|
|
39
24
|
return child.toString();
|
|
@@ -41,71 +26,55 @@ var getLabelFromTab = function getLabelFromTab(child) {
|
|
|
41
26
|
return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
|
|
42
27
|
}
|
|
43
28
|
};
|
|
44
|
-
|
|
45
29
|
var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
|
|
46
30
|
var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
|
|
47
|
-
|
|
48
31
|
while (getPropInChild(array[index], "disabled")) {
|
|
49
32
|
index = index === 0 ? array.length - 1 : index - 1;
|
|
50
33
|
}
|
|
51
|
-
|
|
52
34
|
return index;
|
|
53
35
|
};
|
|
54
|
-
|
|
55
36
|
var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
|
|
56
37
|
var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
|
|
57
|
-
|
|
58
38
|
while (getPropInChild(array[index], "disabled")) {
|
|
59
39
|
index = index === array.length - 1 ? 0 : index + 1;
|
|
60
40
|
}
|
|
61
|
-
|
|
62
41
|
return index;
|
|
63
42
|
};
|
|
64
|
-
|
|
65
43
|
var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
66
44
|
var _ref$iconPosition = _ref.iconPosition,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
72
|
-
|
|
45
|
+
iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
|
|
46
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
47
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
48
|
+
children = _ref.children;
|
|
73
49
|
var _useState = (0, _react.useState)(null),
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
50
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
51
|
+
innerFocusIndex = _useState2[0],
|
|
52
|
+
setInnerFocusIndex = _useState2[1];
|
|
53
|
+
var colorsTheme = (0, _useTheme["default"])();
|
|
78
54
|
var contextValue = (0, _react.useMemo)(function () {
|
|
79
55
|
return {
|
|
80
56
|
iconPosition: iconPosition,
|
|
81
57
|
tabIndex: tabIndex,
|
|
82
|
-
|
|
83
|
-
return getPropInChild(child, "icon");
|
|
84
|
-
}),
|
|
85
|
-
focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
|
|
58
|
+
focusedLabel: innerFocusIndex === null ? undefined : getLabelFromTab(children[innerFocusIndex])
|
|
86
59
|
};
|
|
87
|
-
}, [iconPosition, tabIndex,
|
|
88
|
-
|
|
60
|
+
}, [iconPosition, tabIndex, innerFocusIndex]);
|
|
89
61
|
var handleOnKeyDown = function handleOnKeyDown(event) {
|
|
90
62
|
var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
|
|
91
63
|
return getPropInChild(child, "active");
|
|
92
64
|
});
|
|
93
|
-
|
|
94
65
|
switch (event.key) {
|
|
95
66
|
case "Left":
|
|
96
67
|
case "ArrowLeft":
|
|
97
68
|
event.preventDefault();
|
|
98
|
-
|
|
69
|
+
setInnerFocusIndex(getPreviousTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
|
|
99
70
|
break;
|
|
100
|
-
|
|
101
71
|
case "Right":
|
|
102
72
|
case "ArrowRight":
|
|
103
73
|
event.preventDefault();
|
|
104
|
-
|
|
74
|
+
setInnerFocusIndex(getNextTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
|
|
105
75
|
break;
|
|
106
76
|
}
|
|
107
77
|
};
|
|
108
|
-
|
|
109
78
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
110
79
|
theme: colorsTheme.navTabs
|
|
111
80
|
}, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
|
|
@@ -114,12 +83,11 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
|
114
83
|
"aria-label": "Navigation tabs"
|
|
115
84
|
}, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
|
|
116
85
|
value: contextValue
|
|
117
|
-
}, children)));
|
|
86
|
+
}, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
|
|
118
87
|
};
|
|
119
|
-
|
|
88
|
+
var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: ", ";\n"])), function (props) {
|
|
89
|
+
return props.theme.dividerColor;
|
|
90
|
+
});
|
|
120
91
|
DxcNavTabs.Tab = _Tab["default"];
|
|
121
|
-
|
|
122
|
-
var
|
|
123
|
-
|
|
124
|
-
var _default = DxcNavTabs;
|
|
125
|
-
exports["default"] = _default;
|
|
92
|
+
var NavTabsContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n position: relative;\n"])));
|
|
93
|
+
var _default = exports["default"] = DxcNavTabs;
|