@dxc-technology/halstack-react 0.0.0-bd47c58 → 0.0.0-bd89f9e
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 +2 -2
- package/BackgroundColorContext.js +5 -17
- package/HalstackContext.d.ts +14 -5
- package/HalstackContext.js +9 -34
- package/accordion/Accordion.js +21 -58
- package/accordion/Accordion.stories.tsx +1 -15
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -5
- package/accordion-group/AccordionGroup.js +15 -42
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +9 -21
- package/accordion-group/types.d.ts +6 -6
- package/alert/Alert.js +14 -46
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.js +4 -17
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +10 -29
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +7 -33
- package/bulleted-list/BulletedList.stories.tsx +1 -91
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +23 -46
- package/button/Button.stories.tsx +5 -86
- package/button/Button.test.js +11 -21
- package/button/types.d.ts +4 -4
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +81 -111
- 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 +12 -31
- package/chip/Chip.stories.tsx +1 -1
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.d.ts +105 -14
- package/common/coreTokens.js +40 -23
- package/common/utils.js +2 -8
- package/common/variables.d.ts +15 -6
- package/common/variables.js +17 -15
- package/container/Container.d.ts +4 -0
- package/container/Container.js +198 -0
- package/container/Container.stories.tsx +229 -0
- package/container/types.d.ts +74 -0
- package/date-input/Calendar.js +13 -57
- 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.js +11 -35
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +180 -248
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +356 -354
- package/file-input/FileItem.js +12 -39
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.js +9 -39
- package/footer/Footer.stories.tsx +8 -7
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +2 -2
- package/footer/Icons.js +2 -7
- package/footer/types.d.ts +13 -13
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +19 -64
- 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 -7
- 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 +2 -2
- package/image/Image.js +17 -32
- package/image/types.d.ts +2 -2
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +25 -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 +3 -3
- package/link/Link.js +21 -42
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +3 -2
- package/main.js +10 -52
- package/nav-tabs/NavTabs.js +11 -43
- package/nav-tabs/NavTabs.stories.tsx +1 -1
- package/nav-tabs/NavTabs.test.js +36 -43
- package/nav-tabs/Tab.js +16 -45
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +1 -1
- package/number-input/NumberInput.js +24 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +682 -577
- package/number-input/types.d.ts +11 -5
- package/package.json +29 -27
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +14 -39
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -14
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +3 -3
- package/password-input/Icons.js +1 -5
- package/password-input/PasswordInput.js +26 -48
- package/password-input/PasswordInput.stories.tsx +1 -33
- package/password-input/PasswordInput.test.js +153 -129
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +16 -42
- 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 +3 -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 +22 -54
- package/radio-group/RadioGroup.js +37 -83
- 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.js +23 -59
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +7 -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 +9 -26
- package/select/Select.js +54 -138
- package/select/Select.stories.tsx +3 -3
- package/select/Select.test.js +1906 -1800
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.js +24 -63
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +38 -86
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +10 -40
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.js +4 -23
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +8 -8
- package/tabs/Tab.js +10 -29
- package/tabs/Tabs.js +48 -124
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +21 -51
- 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 +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +12 -57
- package/text-input/TextInput.js +128 -193
- 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 +60 -96
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +20 -57
- package/toggle-group/ToggleGroup.stories.tsx +4 -4
- package/toggle-group/ToggleGroup.test.js +48 -81
- package/toggle-group/types.d.ts +10 -10
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +12 -3
- 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 +12 -36
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +6 -6
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → container}/types.js +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
- /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
|
@@ -1,55 +1,35 @@
|
|
|
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"] = 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 _Header = _interopRequireDefault(require("../header/Header"));
|
|
19
|
-
|
|
20
13
|
var _Footer = _interopRequireDefault(require("../footer/Footer"));
|
|
21
|
-
|
|
22
14
|
var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
|
|
23
|
-
|
|
24
15
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
25
|
-
|
|
26
16
|
var _variables = require("../common/variables");
|
|
27
|
-
|
|
28
|
-
var _Icons = require("./Icons");
|
|
29
|
-
|
|
17
|
+
var _Icons = _interopRequireDefault(require("./Icons"));
|
|
30
18
|
var _SidenavContext = require("./SidenavContext");
|
|
31
|
-
|
|
32
19
|
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
33
|
-
|
|
34
20
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
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; }
|
|
39
|
-
|
|
21
|
+
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); }
|
|
22
|
+
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; }
|
|
40
23
|
var year = new Date().getFullYear();
|
|
41
|
-
|
|
42
24
|
var Main = function Main(_ref) {
|
|
43
25
|
var children = _ref.children;
|
|
44
26
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
|
|
45
27
|
};
|
|
46
|
-
|
|
47
28
|
var defaultHeader = function defaultHeader() {
|
|
48
29
|
return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
|
|
49
30
|
underlined: true
|
|
50
31
|
});
|
|
51
32
|
};
|
|
52
|
-
|
|
53
33
|
var defaultFooter = function defaultFooter() {
|
|
54
34
|
return /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
|
|
55
35
|
copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
|
|
@@ -57,72 +37,62 @@ var defaultFooter = function defaultFooter() {
|
|
|
57
37
|
href: "https://www.linkedin.com/company/dxctechnology",
|
|
58
38
|
text: "Linkedin"
|
|
59
39
|
}, {
|
|
60
|
-
href: "https://
|
|
61
|
-
text: "
|
|
40
|
+
href: "https://x.com/dxctechnology",
|
|
41
|
+
text: "X"
|
|
62
42
|
}, {
|
|
63
43
|
href: "https://www.facebook.com/DXCTechnology/",
|
|
64
44
|
text: "Facebook"
|
|
65
45
|
}],
|
|
66
46
|
socialLinks: [{
|
|
67
47
|
href: "https://www.linkedin.com/company/dxctechnology",
|
|
68
|
-
logo: _Icons.linkedinLogo,
|
|
48
|
+
logo: _Icons["default"].linkedinLogo,
|
|
69
49
|
title: "Linkedin"
|
|
70
50
|
}, {
|
|
71
|
-
href: "https://
|
|
72
|
-
logo: _Icons.
|
|
73
|
-
title: "
|
|
51
|
+
href: "https://x.com/dxctechnology",
|
|
52
|
+
logo: _Icons["default"].xLogo,
|
|
53
|
+
title: "X"
|
|
74
54
|
}, {
|
|
75
55
|
href: "https://www.facebook.com/DXCTechnology/",
|
|
76
|
-
logo: _Icons.facebookLogo,
|
|
56
|
+
logo: _Icons["default"].facebookLogo,
|
|
77
57
|
title: "Facebook"
|
|
78
58
|
}]
|
|
79
59
|
});
|
|
80
60
|
};
|
|
81
|
-
|
|
82
61
|
var childTypeExists = function childTypeExists(children, childType) {
|
|
83
62
|
return children.find(function (child) {
|
|
84
63
|
return (child === null || child === void 0 ? void 0 : child.type) === childType;
|
|
85
64
|
});
|
|
86
65
|
};
|
|
87
|
-
|
|
88
66
|
var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
|
|
89
67
|
var _ref2$visibilityToggl = _ref2.visibilityToggleLabel,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
68
|
+
visibilityToggleLabel = _ref2$visibilityToggl === void 0 ? "" : _ref2$visibilityToggl,
|
|
69
|
+
header = _ref2.header,
|
|
70
|
+
sidenav = _ref2.sidenav,
|
|
71
|
+
footer = _ref2.footer,
|
|
72
|
+
children = _ref2.children;
|
|
96
73
|
var _useState = (0, _react.useState)(false),
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
74
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
75
|
+
isSidenavVisibleResponsive = _useState2[0],
|
|
76
|
+
setIsSidenavVisibleResponsive = _useState2[1];
|
|
101
77
|
var _useState3 = (0, _react.useState)(false),
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
78
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
79
|
+
isResponsive = _useState4[0],
|
|
80
|
+
setIsResponsive = _useState4[1];
|
|
106
81
|
var ref = (0, _react.useRef)(null);
|
|
107
82
|
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
108
|
-
|
|
109
83
|
var childrenArray = _react["default"].Children.toArray(children);
|
|
110
|
-
|
|
111
84
|
var headerContent = header || defaultHeader();
|
|
112
85
|
var footerContent = footer || defaultFooter();
|
|
113
86
|
var main = childTypeExists(childrenArray, Main);
|
|
114
|
-
|
|
115
87
|
var handleResize = function handleResize() {
|
|
116
88
|
setIsResponsive(window.matchMedia("(max-width: ".concat(_variables.responsiveSizes.medium, "rem)")).matches);
|
|
117
89
|
};
|
|
118
|
-
|
|
119
90
|
var handleSidenavVisibility = function handleSidenavVisibility() {
|
|
120
91
|
setIsSidenavVisibleResponsive(function (isSidenavVisibleResponsive) {
|
|
121
92
|
return !isSidenavVisibleResponsive;
|
|
122
93
|
});
|
|
123
94
|
};
|
|
124
|
-
|
|
125
|
-
(0, _react.useLayoutEffect)(function () {
|
|
95
|
+
(0, _react.useEffect)(function () {
|
|
126
96
|
handleResize();
|
|
127
97
|
window.addEventListener("resize", handleResize);
|
|
128
98
|
return function () {
|
|
@@ -140,35 +110,25 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
|
|
|
140
110
|
onClick: handleSidenavVisibility,
|
|
141
111
|
"aria-label": visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle,
|
|
142
112
|
title: translatedLabels.applicationLayout.visibilityToggleTitle
|
|
143
|
-
}, _Icons.hamburgerIcon, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
|
|
113
|
+
}, _Icons["default"].hamburgerIcon, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
|
|
144
114
|
value: setIsSidenavVisibleResponsive
|
|
145
115
|
}, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footerContent)));
|
|
146
116
|
};
|
|
147
|
-
|
|
148
117
|
var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 64px;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n\n @media (max-width: ", "rem) {\n ", ";\n ", "\n }\n"])), _variables.responsiveSizes.medium, function (props) {
|
|
149
118
|
return props.hasSidenav && "top: 116px";
|
|
150
119
|
}, function (props) {
|
|
151
120
|
return props.isSidenavVisible && "overflow: hidden;";
|
|
152
121
|
});
|
|
153
|
-
|
|
154
122
|
var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 3;\n"])));
|
|
155
|
-
|
|
156
123
|
var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 64px;\n left: 0;\n right: 0;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n padding: 4px 16px;\n width: 100%;\n background-color: #f2f2f2;\n user-select: none;\n z-index: 2;\n"])));
|
|
157
|
-
|
|
158
|
-
var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n border: 0px solid transparent;\n border-radius: 2px;\n padding: 12px 4px;\n background-color: transparent;\n box-shadow: 0 0 0 2px transparent;\n font-family: Open Sans, sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: #000;\n cursor: pointer;\n :active {\n background-color: #cccccc;\n }\n :focus,\n :focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px #0095ff;\n }\n & > svg {\n height: 20px;\n width: 20px;\n }\n"])));
|
|
159
|
-
|
|
124
|
+
var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n border: 0px solid transparent;\n border-radius: 2px;\n padding: 12px 4px;\n background-color: transparent;\n box-shadow: 0 0 0 2px transparent;\n font-family: Open Sans, sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: #000;\n cursor: pointer;\n\n :active {\n background-color: #cccccc;\n }\n :focus,\n :focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px #0095ff;\n }\n & > svg {\n height: 20px;\n width: 20px;\n }\n"])));
|
|
160
125
|
var BodyContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n flex: 1;\n"])));
|
|
161
|
-
|
|
162
126
|
var SidenavContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: sticky;\n top: 64px;\n display: flex;\n height: calc(100vh - 64px);\n z-index: 1;\n\n @media (max-width: ", "rem) {\n position: absolute;\n top: 0px;\n height: 100%;\n }\n"])), _variables.responsiveSizes.medium);
|
|
163
|
-
|
|
164
127
|
var MainContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
|
|
165
|
-
|
|
166
128
|
var MainContentContainer = _styledComponents["default"].main(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n background-color: #fff;\n"])));
|
|
167
|
-
|
|
168
129
|
DxcApplicationLayout.Header = _Header["default"];
|
|
169
130
|
DxcApplicationLayout.Main = Main;
|
|
170
131
|
DxcApplicationLayout.Footer = _Footer["default"];
|
|
171
132
|
DxcApplicationLayout.SideNav = _Sidenav["default"];
|
|
172
133
|
DxcApplicationLayout.useResponsiveSidenavVisibility = _SidenavContext.useResponsiveSidenavVisibility;
|
|
173
|
-
var _default = DxcApplicationLayout;
|
|
174
|
-
exports["default"] = _default;
|
|
134
|
+
var _default = exports["default"] = DxcApplicationLayout;
|
|
@@ -4,7 +4,7 @@ import Title from "../../.storybook/components/Title";
|
|
|
4
4
|
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
|
-
title: "Application Layout
|
|
7
|
+
title: "Application Layout",
|
|
8
8
|
component: DxcApplicationLayout,
|
|
9
9
|
parameters: {
|
|
10
10
|
viewport: {
|
package/layout/Icons.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const layoutIcons: {
|
|
3
|
+
facebookLogo: React.JSX.Element;
|
|
4
|
+
xLogo: React.JSX.Element;
|
|
5
|
+
linkedinLogo: React.JSX.Element;
|
|
6
|
+
hamburgerIcon: React.JSX.Element;
|
|
7
|
+
};
|
|
8
|
+
export default layoutIcons;
|
package/layout/Icons.js
CHANGED
|
@@ -1,66 +1,58 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
|
-
exports
|
|
9
|
-
|
|
7
|
+
exports["default"] = void 0;
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
22
|
-
|
|
23
|
-
})))
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}))
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
viewBox: "0 0 24 24"
|
|
62
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
63
|
-
d: "M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z"
|
|
64
|
-
}));
|
|
65
|
-
|
|
66
|
-
exports.hamburgerIcon = hamburgerIcon;
|
|
9
|
+
var layoutIcons = {
|
|
10
|
+
facebookLogo: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
11
|
+
version: "1.1",
|
|
12
|
+
id: "Capa_1",
|
|
13
|
+
x: "0px",
|
|
14
|
+
y: "0px",
|
|
15
|
+
width: "438.536px",
|
|
16
|
+
height: "438.536px",
|
|
17
|
+
viewBox: "0 0 438.536 438.536",
|
|
18
|
+
fill: "#FFFFFF"
|
|
19
|
+
}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
+
d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402 c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401 c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
|
|
21
|
+
}))),
|
|
22
|
+
xLogo: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
23
|
+
width: "256",
|
|
24
|
+
height: "256",
|
|
25
|
+
viewBox: "0 0 256 256",
|
|
26
|
+
fill: "none",
|
|
27
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
28
|
+
}, /*#__PURE__*/_react["default"].createElement("rect", {
|
|
29
|
+
width: "256",
|
|
30
|
+
height: "256",
|
|
31
|
+
rx: "40",
|
|
32
|
+
fill: "white"
|
|
33
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
34
|
+
d: "M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z",
|
|
35
|
+
fill: "#0F1419"
|
|
36
|
+
})),
|
|
37
|
+
linkedinLogo: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
38
|
+
version: "1.1",
|
|
39
|
+
id: "Capa_1",
|
|
40
|
+
x: "0px",
|
|
41
|
+
y: "0px",
|
|
42
|
+
width: "438.536px",
|
|
43
|
+
height: "438.536px",
|
|
44
|
+
viewBox: "0 0 438.536 438.536",
|
|
45
|
+
fill: "#FFFFFF"
|
|
46
|
+
}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
47
|
+
d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
|
|
48
|
+
}))),
|
|
49
|
+
hamburgerIcon: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
50
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
51
|
+
height: "24",
|
|
52
|
+
width: "24",
|
|
53
|
+
viewBox: "0 0 24 24"
|
|
54
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
55
|
+
d: "M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z"
|
|
56
|
+
}))
|
|
57
|
+
};
|
|
58
|
+
var _default = exports["default"] = layoutIcons;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
type SidenavContextType = (isSidenavVisible: boolean) => void;
|
|
3
3
|
export declare const SidenavContextProvider: import("react").Provider<SidenavContextType>;
|
|
4
4
|
export declare const useResponsiveSidenavVisibility: () => SidenavContextType;
|
|
5
5
|
export {};
|
package/layout/SidenavContext.js
CHANGED
|
@@ -4,16 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useResponsiveSidenavVisibility = exports.SidenavContextProvider = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var SidenavContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
11
|
-
var SidenavContextProvider = SidenavContext.Provider;
|
|
12
|
-
exports.
|
|
13
|
-
|
|
14
|
-
var useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
|
|
9
|
+
var SidenavContextProvider = exports.SidenavContextProvider = SidenavContext.Provider;
|
|
10
|
+
var useResponsiveSidenavVisibility = exports.useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
|
|
15
11
|
var changeResponsiveSidenavVisibility = (0, _react.useContext)(SidenavContext);
|
|
16
12
|
return changeResponsiveSidenavVisibility;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
exports.useResponsiveSidenavVisibility = useResponsiveSidenavVisibility;
|
|
13
|
+
};
|
package/layout/types.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export
|
|
2
|
+
export type AppLayoutMainPropsType = {
|
|
3
3
|
/**
|
|
4
4
|
* Everything between the tags will be displayed as the content of the main part of the application.
|
|
5
5
|
*/
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
};
|
|
8
|
-
export
|
|
8
|
+
export type AppLayoutSidenavPropsType = {
|
|
9
9
|
/**
|
|
10
10
|
* The area inside the sidenav. This area can be used to render the content inside the sidenav.
|
|
11
11
|
*/
|
|
@@ -15,7 +15,7 @@ export declare type AppLayoutSidenavPropsType = {
|
|
|
15
15
|
*/
|
|
16
16
|
title?: React.ReactNode;
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
type AppLayoutPropsType = {
|
|
19
19
|
/**
|
|
20
20
|
* Text to be placed next to the hamburger button that toggles the
|
|
21
21
|
* visibility of the sidenav.
|
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,7 +65,6 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
|
81
65
|
children: children
|
|
82
66
|
})));
|
|
83
67
|
});
|
|
84
|
-
|
|
85
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) {
|
|
@@ -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
|
});
|