@dxc-technology/halstack-react 10.1.0 → 12.0.0
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 +45 -143
- package/HalstackContext.js +10 -35
- package/accordion/Accordion.accessibility.test.js +71 -0
- package/accordion/Accordion.js +33 -84
- package/accordion/Accordion.stories.tsx +8 -64
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +6 -6
- package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
- package/accordion-group/AccordionGroup.d.ts +2 -3
- package/accordion-group/AccordionGroup.js +17 -44
- package/accordion-group/AccordionGroup.stories.tsx +24 -24
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +11 -23
- package/accordion-group/AccordionGroupContext.d.ts +3 -0
- package/accordion-group/AccordionGroupContext.js +8 -0
- package/accordion-group/types.d.ts +7 -7
- package/action-icon/ActionIcon.accessibility.test.js +63 -0
- package/action-icon/ActionIcon.d.ts +4 -0
- package/action-icon/ActionIcon.js +48 -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.accessibility.test.js +95 -0
- package/alert/Alert.js +34 -120
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.accessibility.test.js +129 -0
- 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/types.d.ts +2 -2
- package/box/Box.accessibility.test.js +33 -0
- package/box/Box.js +11 -33
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
- package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
- package/breadcrumbs/Breadcrumbs.d.ts +4 -0
- package/breadcrumbs/Breadcrumbs.js +79 -0
- package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
- package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
- package/breadcrumbs/Breadcrumbs.test.js +169 -0
- package/breadcrumbs/Item.d.ts +4 -0
- package/breadcrumbs/Item.js +52 -0
- package/breadcrumbs/dropdownTheme.d.ts +53 -0
- package/breadcrumbs/dropdownTheme.js +62 -0
- package/breadcrumbs/types.d.ts +16 -0
- package/breadcrumbs/types.js +5 -0
- package/bulleted-list/BulletedList.accessibility.test.js +119 -0
- package/bulleted-list/BulletedList.js +22 -55
- package/bulleted-list/BulletedList.stories.tsx +2 -93
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.accessibility.test.js +127 -0
- package/button/Button.js +36 -59
- package/button/Button.stories.tsx +35 -135
- package/button/Button.test.js +13 -21
- package/button/types.d.ts +5 -5
- package/card/Card.accessibility.test.js +36 -0
- package/card/Card.js +23 -45
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.accessibility.test.js +87 -0
- package/checkbox/Checkbox.js +88 -123
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.accessibility.test.js +67 -0
- package/chip/Chip.js +22 -36
- package/chip/Chip.stories.tsx +10 -25
- package/chip/Chip.test.js +17 -30
- 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 +46 -144
- package/common/variables.js +120 -225
- 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/container/types.js +5 -0
- package/contextual-menu/ContextualMenu.accessibility.test.js +97 -0
- package/contextual-menu/ContextualMenu.d.ts +5 -0
- package/contextual-menu/ContextualMenu.js +88 -0
- package/contextual-menu/ContextualMenu.stories.tsx +232 -0
- package/contextual-menu/ContextualMenu.test.js +205 -0
- package/contextual-menu/GroupItem.d.ts +4 -0
- package/contextual-menu/GroupItem.js +67 -0
- package/contextual-menu/ItemAction.d.ts +4 -0
- package/contextual-menu/ItemAction.js +51 -0
- package/contextual-menu/MenuItem.d.ts +4 -0
- package/contextual-menu/MenuItem.js +29 -0
- package/contextual-menu/SingleItem.d.ts +4 -0
- package/contextual-menu/SingleItem.js +38 -0
- package/contextual-menu/types.d.ts +58 -0
- package/contextual-menu/types.js +5 -0
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.accessibility.test.js +228 -0
- package/date-input/DateInput.js +53 -100
- package/date-input/DateInput.stories.tsx +19 -31
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +23 -48
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +28 -22
- package/dialog/Dialog.accessibility.test.js +69 -0
- package/dialog/Dialog.js +21 -59
- package/dialog/Dialog.stories.tsx +176 -0
- package/dialog/Dialog.test.js +126 -188
- package/dialog/types.d.ts +18 -13
- package/divider/Divider.accessibility.test.js +33 -0
- package/divider/Divider.d.ts +4 -0
- package/divider/Divider.js +36 -0
- package/divider/Divider.stories.tsx +223 -0
- package/divider/Divider.test.js +38 -0
- package/divider/types.d.ts +21 -0
- package/divider/types.js +5 -0
- package/dropdown/Dropdown.accessibility.test.js +180 -0
- package/dropdown/Dropdown.js +63 -130
- package/dropdown/Dropdown.stories.tsx +15 -26
- package/dropdown/Dropdown.test.js +402 -389
- package/dropdown/DropdownMenu.js +12 -23
- package/dropdown/DropdownMenuItem.js +13 -21
- package/dropdown/types.d.ts +20 -24
- package/file-input/FileInput.accessibility.test.js +160 -0
- package/file-input/FileInput.js +180 -284
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +279 -354
- package/file-input/FileItem.js +29 -66
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.accessibility.test.js +125 -0
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +43 -68
- package/footer/Footer.stories.tsx +58 -2
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +3 -2
- package/footer/Icons.js +53 -22
- package/footer/types.d.ts +17 -17
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.accessibility.test.js +93 -0
- package/header/Header.d.ts +1 -1
- package/header/Header.js +38 -104
- package/header/Header.stories.tsx +16 -0
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +3 -13
- package/header/types.d.ts +7 -8
- package/heading/Heading.accessibility.test.js +33 -0
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/icon/Icon.accessibility.test.js +30 -0
- package/icon/Icon.d.ts +4 -0
- package/icon/Icon.js +33 -0
- package/icon/Icon.stories.tsx +28 -0
- package/icon/types.d.ts +4 -0
- package/icon/types.js +5 -0
- package/image/Image.accessibility.test.js +56 -0
- package/image/Image.d.ts +2 -2
- package/image/Image.js +17 -32
- package/image/Image.stories.tsx +3 -1
- 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 +2 -2
- package/layout/ApplicationLayout.js +23 -60
- package/layout/Icons.d.ts +4 -5
- package/layout/Icons.js +2 -16
- package/layout/types.d.ts +3 -3
- package/link/Link.accessibility.test.js +108 -0
- package/link/Link.js +28 -47
- package/link/Link.stories.tsx +4 -4
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +8 -4
- package/main.js +39 -60
- package/nav-tabs/NavTabs.accessibility.test.js +44 -0
- package/nav-tabs/NavTabs.d.ts +1 -2
- package/nav-tabs/NavTabs.js +19 -48
- package/nav-tabs/NavTabs.stories.tsx +30 -25
- package/nav-tabs/NavTabs.test.js +45 -50
- package/nav-tabs/NavTabsContext.d.ts +3 -0
- package/nav-tabs/NavTabsContext.js +8 -0
- package/nav-tabs/Tab.js +38 -67
- package/nav-tabs/types.d.ts +10 -10
- package/number-input/NumberInput.accessibility.test.js +228 -0
- package/number-input/NumberInput.d.ts +0 -7
- package/number-input/NumberInput.js +47 -39
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +839 -575
- package/number-input/NumberInputContext.d.ts +3 -0
- package/number-input/NumberInputContext.js +8 -0
- package/number-input/types.d.ts +17 -5
- package/package.json +41 -37
- package/paginator/Paginator.accessibility.test.js +79 -0
- package/paginator/Paginator.js +27 -52
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.accessibility.test.js +28 -0
- package/paragraph/Paragraph.js +3 -19
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/PasswordInput.accessibility.test.js +153 -0
- package/password-input/PasswordInput.js +32 -54
- package/password-input/PasswordInput.stories.tsx +1 -34
- package/password-input/PasswordInput.test.js +153 -129
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.accessibility.test.js +35 -0
- package/progress-bar/ProgressBar.js +26 -56
- 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.accessibility.test.js +57 -0
- 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.accessibility.test.js +97 -0
- package/radio-group/RadioGroup.js +38 -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/resultset-table/ResultsetTable.accessibility.test.js +285 -0
- package/resultset-table/ResultsetTable.d.ts +7 -0
- package/{resultsetTable → resultset-table}/ResultsetTable.js +45 -69
- package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +118 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +148 -92
- package/{resultsetTable → resultset-table}/types.d.ts +44 -11
- package/resultset-table/types.js +5 -0
- package/select/Listbox.js +40 -54
- package/select/Option.js +28 -36
- package/select/Select.accessibility.test.js +228 -0
- package/select/Select.js +107 -171
- package/select/Select.stories.tsx +59 -111
- package/select/Select.test.js +1895 -1858
- package/select/types.d.ts +15 -16
- package/sidenav/Sidenav.accessibility.test.js +59 -0
- package/sidenav/Sidenav.js +44 -81
- package/sidenav/Sidenav.stories.tsx +4 -9
- package/sidenav/Sidenav.test.js +3 -10
- package/{layout → sidenav}/SidenavContext.d.ts +1 -1
- package/{layout → sidenav}/SidenavContext.js +3 -9
- package/sidenav/types.d.ts +20 -20
- package/slider/Slider.accessibility.test.js +104 -0
- package/slider/Slider.js +70 -126
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.accessibility.test.js +96 -0
- package/spinner/Spinner.js +21 -55
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/status-light/StatusLight.accessibility.test.js +157 -0
- 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.accessibility.test.js +98 -0
- package/switch/Switch.js +49 -97
- package/switch/Switch.stories.tsx +12 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/DropdownTheme.js +62 -0
- package/table/Table.accessibility.test.js +93 -0
- package/table/Table.d.ts +6 -2
- package/table/Table.js +76 -33
- package/table/{Table.stories.jsx → Table.stories.tsx} +309 -2
- package/table/Table.test.js +93 -6
- package/table/types.d.ts +34 -6
- package/tabs/Tab.js +22 -37
- package/tabs/Tabs.accessibility.test.js +56 -0
- package/tabs/Tabs.js +59 -147
- package/tabs/Tabs.stories.tsx +8 -4
- package/tabs/Tabs.test.js +57 -131
- package/tabs/types.d.ts +21 -21
- package/tag/Tag.accessibility.test.js +69 -0
- package/tag/Tag.js +27 -57
- package/tag/Tag.stories.tsx +4 -7
- package/tag/Tag.test.js +17 -36
- package/tag/types.d.ts +9 -9
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +30 -70
- package/text-input/TextInput.accessibility.test.js +321 -0
- package/text-input/TextInput.js +203 -289
- package/text-input/TextInput.stories.tsx +65 -160
- package/text-input/TextInput.test.js +1227 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.accessibility.test.js +155 -0
- package/textarea/Textarea.js +68 -109
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
- package/toggle-group/ToggleGroup.js +25 -64
- package/toggle-group/ToggleGroup.stories.tsx +4 -4
- package/toggle-group/ToggleGroup.test.js +48 -81
- package/toggle-group/types.d.ts +12 -12
- package/typography/Typography.accessibility.test.js +339 -0
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +43 -141
- 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 +25 -39
- package/wizard/Wizard.accessibility.test.js +55 -0
- package/wizard/Wizard.js +27 -73
- package/wizard/Wizard.stories.tsx +19 -0
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +8 -8
- package/common/OpenSans.css +0 -69
- package/common/fonts/OpenSans-Bold.ttf +0 -0
- package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-Italic.ttf +0 -0
- package/common/fonts/OpenSans-Light.ttf +0 -0
- package/common/fonts/OpenSans-LightItalic.ttf +0 -0
- package/common/fonts/OpenSans-Regular.ttf +0 -0
- package/common/fonts/OpenSans-SemiBold.ttf +0 -0
- package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/date-input/Icons.d.ts +0 -6
- package/date-input/Icons.js +0 -75
- package/paginator/Icons.d.ts +0 -5
- package/paginator/Icons.js +0 -54
- package/password-input/Icons.d.ts +0 -6
- package/password-input/Icons.js +0 -39
- package/resultsetTable/Icons.d.ts +0 -7
- package/resultsetTable/ResultsetTable.d.ts +0 -4
- package/select/Icons.d.ts +0 -10
- package/select/Icons.js +0 -93
- package/sidenav/Icons.d.ts +0 -7
- package/sidenav/Icons.js +0 -51
- package/slider/Slider.stories.tsx +0 -240
- package/text-input/Icons.d.ts +0 -8
- package/text-input/Icons.js +0 -60
- /package/{resultsetTable → action-icon}/types.js +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
package/link/Link.js
CHANGED
|
@@ -1,67 +1,52 @@
|
|
|
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
|
-
var _templateObject, _templateObject2
|
|
29
|
-
|
|
17
|
+
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
18
|
+
var _templateObject, _templateObject2;
|
|
30
19
|
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
|
-
|
|
20
|
+
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); }
|
|
21
|
+
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 && {}.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
22
|
var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
|
|
37
23
|
var iconPosition = _ref.iconPosition,
|
|
38
|
-
|
|
39
|
-
|
|
24
|
+
icon = _ref.icon,
|
|
25
|
+
children = _ref.children;
|
|
40
26
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
|
|
41
27
|
iconPosition: iconPosition
|
|
42
|
-
}, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(
|
|
43
|
-
|
|
28
|
+
}, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
29
|
+
icon: icon
|
|
44
30
|
}) : icon), iconPosition === "before" && children);
|
|
45
31
|
});
|
|
46
|
-
|
|
47
32
|
var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
48
33
|
var _ref2$inheritColor = _ref2.inheritColor,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
34
|
+
inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
|
|
35
|
+
_ref2$disabled = _ref2.disabled,
|
|
36
|
+
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
|
|
37
|
+
icon = _ref2.icon,
|
|
38
|
+
_ref2$iconPosition = _ref2.iconPosition,
|
|
39
|
+
iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
|
|
40
|
+
_ref2$href = _ref2.href,
|
|
41
|
+
href = _ref2$href === void 0 ? "" : _ref2$href,
|
|
42
|
+
_ref2$newWindow = _ref2.newWindow,
|
|
43
|
+
newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
|
|
44
|
+
onClick = _ref2.onClick,
|
|
45
|
+
margin = _ref2.margin,
|
|
46
|
+
_ref2$tabIndex = _ref2.tabIndex,
|
|
47
|
+
tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
|
|
48
|
+
children = _ref2.children,
|
|
49
|
+
otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
65
50
|
var colorsTheme = (0, _useTheme["default"])();
|
|
66
51
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
67
52
|
theme: colorsTheme.link
|
|
@@ -81,7 +66,6 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
|
81
66
|
children: children
|
|
82
67
|
})));
|
|
83
68
|
});
|
|
84
|
-
|
|
85
69
|
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
70
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
87
71
|
}, function (props) {
|
|
@@ -121,16 +105,13 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
|
|
|
121
105
|
}, function (props) {
|
|
122
106
|
return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
|
|
123
107
|
});
|
|
124
|
-
|
|
125
|
-
var LinkIcon = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
126
|
-
|
|
127
|
-
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) {
|
|
108
|
+
var LinkIconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n align-self: center;\n\n font-size: ", ";\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
128
109
|
return props.theme.iconSize;
|
|
129
110
|
}, function (props) {
|
|
130
111
|
return props.theme.iconSize;
|
|
131
112
|
}, function (props) {
|
|
132
113
|
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
114
|
+
}, function (props) {
|
|
115
|
+
return props.theme.iconSize;
|
|
133
116
|
});
|
|
134
|
-
|
|
135
|
-
var _default = DxcLink;
|
|
136
|
-
exports["default"] = _default;
|
|
117
|
+
var _default = exports["default"] = DxcLink;
|
package/link/Link.stories.tsx
CHANGED
|
@@ -11,10 +11,10 @@ export default {
|
|
|
11
11
|
|
|
12
12
|
const icon = (
|
|
13
13
|
<svg viewBox="0 0 24 24" enableBackground="new 0 0 24 24" fill="currentColor">
|
|
14
|
-
<g
|
|
14
|
+
<g>
|
|
15
15
|
<rect fill="none" width="24" height="24" />
|
|
16
16
|
</g>
|
|
17
|
-
<g
|
|
17
|
+
<g>
|
|
18
18
|
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
|
|
19
19
|
</g>
|
|
20
20
|
</svg>
|
|
@@ -33,7 +33,7 @@ export const Chromatic = () => (
|
|
|
33
33
|
<Title title="Disabled" theme="light" level={4} />
|
|
34
34
|
<DxcLink disabled>Test</DxcLink>
|
|
35
35
|
<Title title="Icon before" theme="light" level={4} />
|
|
36
|
-
<DxcLink href="https://www.google.com" icon=
|
|
36
|
+
<DxcLink href="https://www.google.com" icon="lock" iconPosition="before">
|
|
37
37
|
Test
|
|
38
38
|
</DxcLink>
|
|
39
39
|
<Title title="Icon after" theme="light" level={4} />
|
|
@@ -76,7 +76,7 @@ export const Chromatic = () => (
|
|
|
76
76
|
<ExampleContainer pseudoState="pseudo-hover">
|
|
77
77
|
<Title title="Long text with hover" theme="light" level={4} />
|
|
78
78
|
Lorem{" "}
|
|
79
|
-
<DxcLink href="https://www.google.com" icon=
|
|
79
|
+
<DxcLink href="https://www.google.com" icon="filled_home">
|
|
80
80
|
Test
|
|
81
81
|
</DxcLink>{" "}
|
|
82
82
|
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
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
|
+
* Material Symbol name or SVG element 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";
|
|
@@ -41,6 +40,11 @@ import DxcParagraph from "./paragraph/Paragraph";
|
|
|
41
40
|
import DxcBulletedList from "./bulleted-list/BulletedList";
|
|
42
41
|
import DxcGrid from "./grid/Grid";
|
|
43
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";
|
|
46
|
+
import DxcContextualMenu from "./contextual-menu/ContextualMenu";
|
|
47
|
+
import DxcDivider from "./divider/Divider";
|
|
48
|
+
import DxcBreadcrumbs from "./breadcrumbs/Breadcrumbs";
|
|
44
49
|
import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
|
|
45
|
-
|
|
46
|
-
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, DxcGrid, DxcImage, };
|
|
50
|
+
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, DxcContextualMenu, DxcDivider, DxcBreadcrumbs, };
|
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() {
|
|
@@ -55,6 +47,12 @@ Object.defineProperty(exports, "DxcBox", {
|
|
|
55
47
|
return _Box["default"];
|
|
56
48
|
}
|
|
57
49
|
});
|
|
50
|
+
Object.defineProperty(exports, "DxcBreadcrumbs", {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function get() {
|
|
53
|
+
return _Breadcrumbs["default"];
|
|
54
|
+
}
|
|
55
|
+
});
|
|
58
56
|
Object.defineProperty(exports, "DxcBulletedList", {
|
|
59
57
|
enumerable: true,
|
|
60
58
|
get: function get() {
|
|
@@ -85,6 +83,18 @@ Object.defineProperty(exports, "DxcChip", {
|
|
|
85
83
|
return _Chip["default"];
|
|
86
84
|
}
|
|
87
85
|
});
|
|
86
|
+
Object.defineProperty(exports, "DxcContainer", {
|
|
87
|
+
enumerable: true,
|
|
88
|
+
get: function get() {
|
|
89
|
+
return _Container["default"];
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
Object.defineProperty(exports, "DxcContextualMenu", {
|
|
93
|
+
enumerable: true,
|
|
94
|
+
get: function get() {
|
|
95
|
+
return _ContextualMenu["default"];
|
|
96
|
+
}
|
|
97
|
+
});
|
|
88
98
|
Object.defineProperty(exports, "DxcDateInput", {
|
|
89
99
|
enumerable: true,
|
|
90
100
|
get: function get() {
|
|
@@ -97,6 +107,12 @@ Object.defineProperty(exports, "DxcDialog", {
|
|
|
97
107
|
return _Dialog["default"];
|
|
98
108
|
}
|
|
99
109
|
});
|
|
110
|
+
Object.defineProperty(exports, "DxcDivider", {
|
|
111
|
+
enumerable: true,
|
|
112
|
+
get: function get() {
|
|
113
|
+
return _Divider["default"];
|
|
114
|
+
}
|
|
115
|
+
});
|
|
100
116
|
Object.defineProperty(exports, "DxcDropdown", {
|
|
101
117
|
enumerable: true,
|
|
102
118
|
get: function get() {
|
|
@@ -217,6 +233,12 @@ Object.defineProperty(exports, "DxcSpinner", {
|
|
|
217
233
|
return _Spinner["default"];
|
|
218
234
|
}
|
|
219
235
|
});
|
|
236
|
+
Object.defineProperty(exports, "DxcStatusLight", {
|
|
237
|
+
enumerable: true,
|
|
238
|
+
get: function get() {
|
|
239
|
+
return _StatusLight["default"];
|
|
240
|
+
}
|
|
241
|
+
});
|
|
220
242
|
Object.defineProperty(exports, "DxcSwitch", {
|
|
221
243
|
enumerable: true,
|
|
222
244
|
get: function get() {
|
|
@@ -289,97 +311,54 @@ Object.defineProperty(exports, "HalstackProvider", {
|
|
|
289
311
|
return _HalstackContext.HalstackProvider;
|
|
290
312
|
}
|
|
291
313
|
});
|
|
292
|
-
|
|
293
314
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
294
|
-
|
|
295
315
|
var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
|
|
296
|
-
|
|
297
316
|
var _Button = _interopRequireDefault(require("./button/Button"));
|
|
298
|
-
|
|
299
317
|
var _Card = _interopRequireDefault(require("./card/Card"));
|
|
300
|
-
|
|
301
318
|
var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
|
|
302
|
-
|
|
303
319
|
var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
|
|
304
|
-
|
|
305
320
|
var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
|
|
306
|
-
|
|
307
321
|
var _Slider = _interopRequireDefault(require("./slider/Slider"));
|
|
308
|
-
|
|
309
322
|
var _Switch = _interopRequireDefault(require("./switch/Switch"));
|
|
310
|
-
|
|
311
323
|
var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
|
|
312
|
-
|
|
313
324
|
var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
|
|
314
|
-
|
|
315
325
|
var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
|
|
316
|
-
|
|
317
326
|
var _Table = _interopRequireDefault(require("./table/Table"));
|
|
318
|
-
|
|
319
327
|
var _Box = _interopRequireDefault(require("./box/Box"));
|
|
320
|
-
|
|
321
328
|
var _Tag = _interopRequireDefault(require("./tag/Tag"));
|
|
322
|
-
|
|
323
329
|
var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
|
|
324
|
-
|
|
325
330
|
var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
|
|
326
|
-
|
|
327
331
|
var _Link = _interopRequireDefault(require("./link/Link"));
|
|
328
|
-
|
|
329
332
|
var _Heading = _interopRequireDefault(require("./heading/Heading"));
|
|
330
|
-
|
|
331
|
-
var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
|
|
332
|
-
|
|
333
|
+
var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
|
|
333
334
|
var _Chip = _interopRequireDefault(require("./chip/Chip"));
|
|
334
|
-
|
|
335
335
|
var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
|
|
336
|
-
|
|
337
336
|
var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
|
|
338
|
-
|
|
339
337
|
var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
|
|
340
|
-
|
|
341
|
-
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
342
|
-
|
|
343
338
|
var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
|
|
344
|
-
|
|
345
339
|
var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
|
|
346
|
-
|
|
347
340
|
var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
|
|
348
|
-
|
|
349
341
|
var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
|
|
350
|
-
|
|
351
342
|
var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
|
|
352
|
-
|
|
353
343
|
var _Select = _interopRequireDefault(require("./select/Select"));
|
|
354
|
-
|
|
355
344
|
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
356
|
-
|
|
357
345
|
var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
|
|
358
|
-
|
|
359
346
|
var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
|
|
360
|
-
|
|
361
347
|
var _Inset = _interopRequireDefault(require("./inset/Inset"));
|
|
362
|
-
|
|
363
348
|
var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
|
|
364
|
-
|
|
365
349
|
var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
|
|
366
|
-
|
|
367
350
|
var _Flex = _interopRequireDefault(require("./flex/Flex"));
|
|
368
|
-
|
|
369
351
|
var _Typography = _interopRequireDefault(require("./typography/Typography"));
|
|
370
|
-
|
|
371
352
|
var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
|
|
372
|
-
|
|
373
353
|
var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
|
|
374
|
-
|
|
375
354
|
var _Grid = _interopRequireDefault(require("./grid/Grid"));
|
|
376
|
-
|
|
377
355
|
var _Image = _interopRequireDefault(require("./image/Image"));
|
|
378
|
-
|
|
356
|
+
var _Container = _interopRequireDefault(require("./container/Container"));
|
|
357
|
+
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
358
|
+
var _StatusLight = _interopRequireDefault(require("./status-light/StatusLight"));
|
|
359
|
+
var _ContextualMenu = _interopRequireDefault(require("./contextual-menu/ContextualMenu"));
|
|
360
|
+
var _Divider = _interopRequireDefault(require("./divider/Divider"));
|
|
361
|
+
var _Breadcrumbs = _interopRequireDefault(require("./breadcrumbs/Breadcrumbs"));
|
|
379
362
|
var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
|
|
380
|
-
|
|
381
|
-
var
|
|
382
|
-
|
|
383
|
-
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); }
|
|
384
|
-
|
|
385
|
-
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; }
|
|
363
|
+
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); }
|
|
364
|
+
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 && {}.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; }
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
5
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
var _react2 = require("@testing-library/react");
|
|
8
|
+
var _axeHelper = require("../../test/accessibility/axe-helper.js");
|
|
9
|
+
var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
|
|
10
|
+
var favoriteIcon = 'filled_Favorite';
|
|
11
|
+
var pinIcon = 'Location_On';
|
|
12
|
+
describe("Tabs component accessibility tests", function () {
|
|
13
|
+
it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
14
|
+
var _render, container, results;
|
|
15
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
16
|
+
while (1) switch (_context.prev = _context.next) {
|
|
17
|
+
case 0:
|
|
18
|
+
_render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], {
|
|
19
|
+
iconPosition: "left"
|
|
20
|
+
}, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
21
|
+
href: "/test1",
|
|
22
|
+
icon: favoriteIcon,
|
|
23
|
+
active: true
|
|
24
|
+
}, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
25
|
+
href: "/test2",
|
|
26
|
+
icon: favoriteIcon,
|
|
27
|
+
disabled: true
|
|
28
|
+
}, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
|
|
29
|
+
href: "/test3",
|
|
30
|
+
icon: pinIcon,
|
|
31
|
+
notificationNumber: 12
|
|
32
|
+
}, "Tab 3"))), container = _render.container;
|
|
33
|
+
_context.next = 3;
|
|
34
|
+
return (0, _axeHelper.axe)(container);
|
|
35
|
+
case 3:
|
|
36
|
+
results = _context.sent;
|
|
37
|
+
expect(results).toHaveNoViolations();
|
|
38
|
+
case 5:
|
|
39
|
+
case "end":
|
|
40
|
+
return _context.stop();
|
|
41
|
+
}
|
|
42
|
+
}, _callee);
|
|
43
|
+
})));
|
|
44
|
+
});
|
package/nav-tabs/NavTabs.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import NavTabsPropsType
|
|
3
|
-
export declare const NavTabsContext: React.Context<NavTabsContextProps>;
|
|
2
|
+
import NavTabsPropsType from "./types";
|
|
4
3
|
declare const DxcNavTabs: {
|
|
5
4
|
({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
|
|
6
5
|
Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
|