@dxc-technology/halstack-react 0.0.0-b50ba80 → 0.0.0-b5ec444
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 +5 -22
- package/HalstackContext.d.ts +1245 -6
- package/HalstackContext.js +181 -114
- package/README.md +47 -0
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +116 -160
- package/accordion/Accordion.stories.tsx +102 -126
- package/accordion/Accordion.test.js +25 -41
- package/accordion/types.d.ts +5 -16
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +31 -98
- package/accordion-group/AccordionGroup.stories.tsx +94 -67
- package/accordion-group/AccordionGroup.test.js +52 -105
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +31 -0
- package/accordion-group/types.d.ts +11 -16
- 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 +23 -59
- package/alert/Alert.stories.tsx +28 -0
- package/alert/Alert.test.js +29 -46
- package/alert/types.d.ts +5 -5
- package/badge/Badge.d.ts +1 -1
- package/badge/Badge.js +141 -41
- package/badge/Badge.stories.tsx +210 -0
- package/badge/Badge.test.js +30 -0
- package/badge/types.d.ts +52 -2
- package/bleed/Bleed.js +14 -55
- package/bleed/Bleed.stories.tsx +95 -95
- package/bleed/types.d.ts +2 -2
- package/box/Box.d.ts +1 -1
- package/box/Box.js +30 -81
- package/box/Box.stories.tsx +38 -51
- package/box/Box.test.js +2 -7
- package/box/types.d.ts +3 -14
- package/bulleted-list/BulletedList.d.ts +7 -0
- package/bulleted-list/BulletedList.js +89 -0
- package/bulleted-list/BulletedList.stories.tsx +115 -0
- package/bulleted-list/types.d.ts +38 -0
- package/button/Button.d.ts +1 -1
- package/button/Button.js +63 -117
- package/button/Button.stories.tsx +160 -90
- package/button/Button.test.js +20 -17
- package/button/types.d.ts +12 -8
- package/card/Card.d.ts +1 -1
- package/card/Card.js +64 -107
- package/card/Card.stories.tsx +12 -42
- package/card/Card.test.js +11 -22
- package/card/types.d.ts +6 -11
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +142 -181
- package/checkbox/Checkbox.stories.tsx +128 -94
- package/checkbox/Checkbox.test.js +160 -39
- package/checkbox/types.d.ts +11 -3
- package/chip/Chip.js +39 -79
- package/chip/Chip.stories.tsx +121 -26
- package/chip/Chip.test.js +16 -31
- 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.d.ts +1 -0
- package/common/utils.js +6 -12
- package/common/variables.d.ts +1395 -0
- package/common/variables.js +1025 -1134
- 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.d.ts +4 -0
- package/date-input/Calendar.js +214 -0
- package/date-input/DateInput.js +152 -298
- package/date-input/DateInput.stories.tsx +203 -56
- package/date-input/DateInput.test.js +700 -371
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +115 -0
- package/date-input/Icons.d.ts +6 -0
- package/date-input/Icons.js +58 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +100 -0
- package/date-input/types.d.ts +72 -15
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +73 -107
- package/dialog/Dialog.stories.tsx +320 -167
- package/dialog/Dialog.test.js +287 -20
- package/dialog/types.d.ts +18 -25
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +248 -303
- package/dropdown/Dropdown.stories.tsx +245 -56
- package/dropdown/Dropdown.test.js +575 -165
- package/dropdown/DropdownMenu.d.ts +4 -0
- package/dropdown/DropdownMenu.js +63 -0
- package/dropdown/DropdownMenuItem.d.ts +4 -0
- package/dropdown/DropdownMenuItem.js +67 -0
- package/dropdown/types.d.ts +32 -14
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +246 -357
- package/file-input/FileInput.stories.tsx +123 -12
- package/file-input/FileInput.test.js +369 -367
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +45 -96
- package/file-input/types.d.ts +25 -8
- package/flex/Flex.d.ts +4 -0
- package/flex/Flex.js +57 -0
- package/flex/Flex.stories.tsx +112 -0
- package/flex/types.d.ts +97 -0
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +72 -117
- package/footer/Footer.stories.tsx +60 -19
- package/footer/Footer.test.js +33 -57
- package/footer/Icons.d.ts +3 -2
- package/footer/Icons.js +67 -8
- package/footer/types.d.ts +25 -26
- 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/header/Header.d.ts +4 -3
- package/header/Header.js +90 -170
- package/header/Header.stories.tsx +118 -39
- package/header/Header.test.js +13 -26
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +4 -9
- package/header/types.d.ts +5 -19
- package/heading/Heading.js +10 -32
- package/heading/Heading.test.js +71 -88
- 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/inset/Inset.js +14 -55
- package/inset/Inset.stories.tsx +37 -36
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +16 -6
- package/layout/ApplicationLayout.js +82 -166
- package/layout/ApplicationLayout.stories.tsx +85 -94
- package/layout/Icons.d.ts +8 -0
- package/layout/Icons.js +51 -48
- package/layout/SidenavContext.d.ts +5 -0
- package/layout/SidenavContext.js +13 -0
- package/layout/types.d.ts +19 -35
- package/link/Link.d.ts +2 -2
- package/link/Link.js +42 -89
- package/link/Link.stories.tsx +73 -6
- package/link/Link.test.js +24 -44
- package/link/types.d.ts +14 -15
- package/main.d.ts +13 -13
- package/main.js +57 -101
- package/nav-tabs/NavTabs.d.ts +8 -0
- package/nav-tabs/NavTabs.js +93 -0
- package/nav-tabs/NavTabs.stories.tsx +276 -0
- package/nav-tabs/NavTabs.test.js +76 -0
- package/nav-tabs/Tab.d.ts +4 -0
- package/nav-tabs/Tab.js +118 -0
- package/nav-tabs/types.d.ts +52 -0
- package/nav-tabs/types.js +5 -0
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +47 -37
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +860 -377
- package/number-input/types.d.ts +11 -5
- package/package.json +43 -45
- package/paginator/Icons.d.ts +5 -0
- package/paginator/Icons.js +21 -47
- package/paginator/Paginator.js +34 -91
- package/paginator/Paginator.stories.tsx +24 -0
- package/paginator/Paginator.test.js +280 -211
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.d.ts +5 -0
- package/paragraph/Paragraph.js +22 -0
- package/paragraph/Paragraph.stories.tsx +27 -0
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +35 -0
- package/password-input/PasswordInput.js +57 -123
- package/password-input/PasswordInput.stories.tsx +1 -33
- package/password-input/PasswordInput.test.js +160 -143
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +65 -91
- package/progress-bar/ProgressBar.stories.tsx +93 -0
- package/progress-bar/ProgressBar.test.js +72 -44
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.js +71 -44
- package/quick-nav/QuickNav.stories.tsx +146 -27
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +59 -76
- package/radio-group/RadioGroup.js +71 -116
- package/radio-group/RadioGroup.stories.tsx +132 -18
- package/radio-group/RadioGroup.test.js +518 -457
- package/radio-group/types.d.ts +10 -10
- package/resultset-table/Icons.d.ts +7 -0
- package/resultset-table/Icons.js +47 -0
- package/resultset-table/ResultsetTable.d.ts +7 -0
- package/resultset-table/ResultsetTable.js +167 -0
- package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +152 -30
- package/resultset-table/ResultsetTable.test.js +371 -0
- 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.d.ts +1 -1
- package/select/Listbox.js +45 -51
- package/select/Option.js +27 -50
- package/select/Select.js +181 -246
- package/select/Select.stories.tsx +525 -136
- package/select/Select.test.js +2009 -1696
- package/select/types.d.ts +16 -20
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +47 -0
- package/sidenav/Sidenav.d.ts +6 -5
- package/sidenav/Sidenav.js +131 -71
- package/sidenav/Sidenav.stories.tsx +251 -151
- package/sidenav/Sidenav.test.js +26 -45
- package/sidenav/types.d.ts +52 -26
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +148 -181
- package/slider/Slider.test.js +185 -81
- package/slider/types.d.ts +7 -3
- package/spinner/Spinner.js +31 -75
- package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
- package/spinner/Spinner.test.js +26 -35
- 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.d.ts +2 -2
- package/switch/Switch.js +147 -125
- package/switch/Switch.stories.tsx +37 -60
- package/switch/Switch.test.js +138 -56
- package/switch/types.d.ts +7 -3
- package/table/ActionsCell.d.ts +4 -0
- package/table/ActionsCell.js +68 -0
- package/table/DropdownTheme.js +62 -0
- package/table/Table.d.ts +4 -1
- package/table/Table.js +26 -32
- package/table/Table.stories.tsx +658 -0
- package/table/Table.test.js +95 -8
- package/table/types.d.ts +45 -6
- package/tabs/Tab.d.ts +4 -0
- package/tabs/Tab.js +116 -0
- package/tabs/Tabs.js +314 -141
- package/tabs/Tabs.stories.tsx +120 -6
- package/tabs/Tabs.test.js +223 -69
- package/tabs/types.d.ts +28 -18
- package/tag/Tag.js +29 -61
- package/tag/Tag.stories.tsx +14 -1
- package/tag/Tag.test.js +20 -31
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +8 -0
- package/text-input/Icons.js +56 -0
- package/text-input/Suggestion.js +40 -28
- package/text-input/Suggestions.d.ts +4 -0
- package/text-input/Suggestions.js +84 -0
- package/text-input/TextInput.js +318 -524
- package/text-input/TextInput.stories.tsx +266 -275
- package/text-input/TextInput.test.js +1419 -1375
- package/text-input/types.d.ts +43 -16
- package/textarea/Textarea.js +79 -131
- package/textarea/Textarea.stories.tsx +174 -0
- package/textarea/Textarea.test.js +152 -183
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/toggle-group/ToggleGroup.js +92 -106
- package/toggle-group/ToggleGroup.stories.tsx +49 -4
- package/toggle-group/ToggleGroup.test.js +69 -88
- package/toggle-group/types.d.ts +26 -17
- package/typography/Typography.d.ts +4 -0
- package/typography/Typography.js +23 -0
- package/typography/Typography.stories.tsx +198 -0
- package/typography/types.d.ts +18 -0
- package/typography/types.js +5 -0
- package/useTheme.d.ts +1147 -1
- package/useTheme.js +2 -9
- package/useTranslatedLabels.d.ts +85 -0
- package/useTranslatedLabels.js +14 -0
- package/utils/BaseTypography.d.ts +21 -0
- package/utils/BaseTypography.js +94 -0
- package/utils/FocusLock.d.ts +13 -0
- package/utils/FocusLock.js +124 -0
- package/wizard/Wizard.js +51 -91
- package/wizard/Wizard.stories.tsx +40 -1
- package/wizard/Wizard.test.js +54 -81
- package/wizard/types.d.ts +7 -7
- package/card/ice-cream.jpg +0 -0
- package/common/RequiredComponent.js +0 -32
- package/list/List.d.ts +0 -4
- package/list/List.js +0 -47
- package/list/List.stories.tsx +0 -95
- package/list/types.d.ts +0 -7
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/progress-bar/ProgressBar.stories.jsx +0 -58
- package/radio/Radio.d.ts +0 -4
- package/radio/Radio.js +0 -173
- package/radio/Radio.stories.tsx +0 -192
- package/radio/Radio.test.js +0 -71
- package/radio/types.d.ts +0 -54
- package/resultsetTable/ResultsetTable.d.ts +0 -4
- package/resultsetTable/ResultsetTable.js +0 -254
- package/resultsetTable/ResultsetTable.test.js +0 -306
- package/row/Row.d.ts +0 -3
- package/row/Row.js +0 -127
- package/row/Row.stories.tsx +0 -237
- package/row/types.d.ts +0 -28
- package/slider/Slider.stories.tsx +0 -177
- package/stack/Stack.d.ts +0 -3
- package/stack/Stack.js +0 -97
- package/stack/Stack.stories.tsx +0 -164
- package/stack/types.d.ts +0 -24
- package/table/Table.stories.jsx +0 -277
- package/text/Text.d.ts +0 -7
- package/text/Text.js +0 -30
- package/text/Text.stories.tsx +0 -19
- package/textarea/Textarea.stories.jsx +0 -157
- /package/{list → action-icon}/types.js +0 -0
- /package/{radio → bulleted-list}/types.js +0 -0
- /package/{resultsetTable → container}/types.js +0 -0
- /package/{row → flex}/types.js +0 -0
- /package/{stack → grid}/types.js +0 -0
- /package/{number-input/numberInputContextTypes.js → image/types.js} +0 -0
package/link/Link.test.js
CHANGED
|
@@ -1,83 +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
|
-
var _Link = _interopRequireDefault(require("./Link"));
|
|
10
|
-
|
|
6
|
+
var _Link = _interopRequireDefault(require("./Link.tsx"));
|
|
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
|
-
}, "LinkButton")),
|
|
41
|
-
getByTextLinkButton = _render4.getByText;
|
|
42
|
-
|
|
28
|
+
onClick: function onClick() {},
|
|
29
|
+
disabled: true
|
|
30
|
+
}, "LinkButton")),
|
|
31
|
+
getByTextLinkButton = _render4.getByText;
|
|
43
32
|
expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
|
|
44
33
|
});
|
|
45
34
|
test("Link open new tab", function () {
|
|
46
35
|
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
href: "/testPage",
|
|
37
|
+
newWindow: true
|
|
38
|
+
}, "Link")),
|
|
39
|
+
getByRole = _render5.getByRole;
|
|
52
40
|
expect(getByRole("link").getAttribute("target")).toEqual("_blank");
|
|
53
41
|
});
|
|
54
42
|
test("Link onClick called", function () {
|
|
55
43
|
var onClick = jest.fn();
|
|
56
|
-
|
|
57
44
|
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
45
|
+
onClick: onClick
|
|
46
|
+
}, "Link")),
|
|
47
|
+
getByText = _render6.getByText;
|
|
62
48
|
var link = getByText("Link");
|
|
63
|
-
|
|
64
49
|
_react2.fireEvent.click(link);
|
|
65
|
-
|
|
66
50
|
expect(onClick).toHaveBeenCalled();
|
|
67
51
|
});
|
|
68
52
|
test("Disabled link onClick not called", function () {
|
|
69
53
|
var onClick = jest.fn();
|
|
70
|
-
|
|
71
54
|
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
55
|
+
onClick: onClick,
|
|
56
|
+
disabled: true
|
|
57
|
+
}, "Link")),
|
|
58
|
+
getByText = _render7.getByText;
|
|
77
59
|
var link = getByText("Link");
|
|
78
|
-
|
|
79
60
|
_react2.fireEvent.click(link);
|
|
80
|
-
|
|
81
61
|
expect(onClick).toHaveBeenCalledTimes(0);
|
|
82
62
|
});
|
|
83
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,14 +50,5 @@ export declare type LinkProps = {
|
|
|
42
50
|
* Value of the tabindex.
|
|
43
51
|
*/
|
|
44
52
|
tabIndex?: number;
|
|
45
|
-
/**
|
|
46
|
-
* Content of the link. To use the component with other libraries (such as React Router or Next.js Link) pass the custom link as a child.
|
|
47
|
-
* The component will apply the styles to the custom link.
|
|
48
|
-
*/
|
|
49
|
-
children?: React.ReactNode;
|
|
50
|
-
/**
|
|
51
|
-
* Element or path used as the icon that will be placed next to the link text.
|
|
52
|
-
*/
|
|
53
|
-
icon?: string | SVG;
|
|
54
53
|
};
|
|
55
54
|
export {};
|
package/main.d.ts
CHANGED
|
@@ -5,9 +5,6 @@ import DxcCard from "./card/Card";
|
|
|
5
5
|
import DxcCheckbox from "./checkbox/Checkbox";
|
|
6
6
|
import DxcDialog from "./dialog/Dialog";
|
|
7
7
|
import DxcDropdown from "./dropdown/Dropdown";
|
|
8
|
-
import DxcFooter from "./footer/Footer";
|
|
9
|
-
import DxcHeader from "./header/Header";
|
|
10
|
-
import DxcRadio from "./radio/Radio";
|
|
11
8
|
import DxcSlider from "./slider/Slider";
|
|
12
9
|
import DxcSwitch from "./switch/Switch";
|
|
13
10
|
import DxcTabs from "./tabs/Tabs";
|
|
@@ -17,16 +14,14 @@ import DxcTable from "./table/Table";
|
|
|
17
14
|
import DxcBox from "./box/Box";
|
|
18
15
|
import DxcTag from "./tag/Tag";
|
|
19
16
|
import DxcPaginator from "./paginator/Paginator";
|
|
20
|
-
import DxcSidenav from "./sidenav/Sidenav";
|
|
21
17
|
import DxcWizard from "./wizard/Wizard";
|
|
22
18
|
import DxcLink from "./link/Link";
|
|
23
19
|
import DxcHeading from "./heading/Heading";
|
|
24
|
-
import DxcResultsetTable from "./
|
|
20
|
+
import DxcResultsetTable from "./resultset-table/ResultsetTable";
|
|
25
21
|
import DxcChip from "./chip/Chip";
|
|
26
22
|
import DxcApplicationLayout from "./layout/ApplicationLayout";
|
|
27
23
|
import DxcToggleGroup from "./toggle-group/ToggleGroup";
|
|
28
24
|
import DxcAccordionGroup from "./accordion-group/AccordionGroup";
|
|
29
|
-
import DxcBadge from "./badge/Badge";
|
|
30
25
|
import DxcTextInput from "./text-input/TextInput";
|
|
31
26
|
import DxcPasswordInput from "./password-input/PasswordInput";
|
|
32
27
|
import DxcDateInput from "./date-input/DateInput";
|
|
@@ -34,14 +29,19 @@ import DxcNumberInput from "./number-input/NumberInput";
|
|
|
34
29
|
import DxcTextarea from "./textarea/Textarea";
|
|
35
30
|
import DxcSelect from "./select/Select";
|
|
36
31
|
import DxcFileInput from "./file-input/FileInput";
|
|
37
|
-
import DxcStack from "./stack/Stack";
|
|
38
|
-
import DxcRow from "./row/Row";
|
|
39
|
-
import DxcText from "./text/Text";
|
|
40
|
-
import DxcList from "./list/List";
|
|
41
32
|
import DxcRadioGroup from "./radio-group/RadioGroup";
|
|
42
33
|
import DxcBleed from "./bleed/Bleed";
|
|
43
34
|
import DxcInset from "./inset/Inset";
|
|
44
35
|
import DxcQuickNav from "./quick-nav/QuickNav";
|
|
45
|
-
import
|
|
46
|
-
import
|
|
47
|
-
|
|
36
|
+
import DxcNavTabs from "./nav-tabs/NavTabs";
|
|
37
|
+
import DxcFlex from "./flex/Flex";
|
|
38
|
+
import DxcTypography from "./typography/Typography";
|
|
39
|
+
import DxcParagraph from "./paragraph/Paragraph";
|
|
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";
|
|
46
|
+
import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
|
|
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() {
|
|
@@ -55,6 +47,12 @@ Object.defineProperty(exports, "DxcBox", {
|
|
|
55
47
|
return _Box["default"];
|
|
56
48
|
}
|
|
57
49
|
});
|
|
50
|
+
Object.defineProperty(exports, "DxcBulletedList", {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function get() {
|
|
53
|
+
return _BulletedList["default"];
|
|
54
|
+
}
|
|
55
|
+
});
|
|
58
56
|
Object.defineProperty(exports, "DxcButton", {
|
|
59
57
|
enumerable: true,
|
|
60
58
|
get: function get() {
|
|
@@ -79,6 +77,12 @@ Object.defineProperty(exports, "DxcChip", {
|
|
|
79
77
|
return _Chip["default"];
|
|
80
78
|
}
|
|
81
79
|
});
|
|
80
|
+
Object.defineProperty(exports, "DxcContainer", {
|
|
81
|
+
enumerable: true,
|
|
82
|
+
get: function get() {
|
|
83
|
+
return _Container["default"];
|
|
84
|
+
}
|
|
85
|
+
});
|
|
82
86
|
Object.defineProperty(exports, "DxcDateInput", {
|
|
83
87
|
enumerable: true,
|
|
84
88
|
get: function get() {
|
|
@@ -103,16 +107,16 @@ Object.defineProperty(exports, "DxcFileInput", {
|
|
|
103
107
|
return _FileInput["default"];
|
|
104
108
|
}
|
|
105
109
|
});
|
|
106
|
-
Object.defineProperty(exports, "
|
|
110
|
+
Object.defineProperty(exports, "DxcFlex", {
|
|
107
111
|
enumerable: true,
|
|
108
112
|
get: function get() {
|
|
109
|
-
return
|
|
113
|
+
return _Flex["default"];
|
|
110
114
|
}
|
|
111
115
|
});
|
|
112
|
-
Object.defineProperty(exports, "
|
|
116
|
+
Object.defineProperty(exports, "DxcGrid", {
|
|
113
117
|
enumerable: true,
|
|
114
118
|
get: function get() {
|
|
115
|
-
return
|
|
119
|
+
return _Grid["default"];
|
|
116
120
|
}
|
|
117
121
|
});
|
|
118
122
|
Object.defineProperty(exports, "DxcHeading", {
|
|
@@ -121,6 +125,12 @@ Object.defineProperty(exports, "DxcHeading", {
|
|
|
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() {
|
|
@@ -133,10 +143,10 @@ Object.defineProperty(exports, "DxcLink", {
|
|
|
133
143
|
return _Link["default"];
|
|
134
144
|
}
|
|
135
145
|
});
|
|
136
|
-
Object.defineProperty(exports, "
|
|
146
|
+
Object.defineProperty(exports, "DxcNavTabs", {
|
|
137
147
|
enumerable: true,
|
|
138
148
|
get: function get() {
|
|
139
|
-
return
|
|
149
|
+
return _NavTabs["default"];
|
|
140
150
|
}
|
|
141
151
|
});
|
|
142
152
|
Object.defineProperty(exports, "DxcNumberInput", {
|
|
@@ -151,6 +161,12 @@ Object.defineProperty(exports, "DxcPaginator", {
|
|
|
151
161
|
return _Paginator["default"];
|
|
152
162
|
}
|
|
153
163
|
});
|
|
164
|
+
Object.defineProperty(exports, "DxcParagraph", {
|
|
165
|
+
enumerable: true,
|
|
166
|
+
get: function get() {
|
|
167
|
+
return _Paragraph["default"];
|
|
168
|
+
}
|
|
169
|
+
});
|
|
154
170
|
Object.defineProperty(exports, "DxcPasswordInput", {
|
|
155
171
|
enumerable: true,
|
|
156
172
|
get: function get() {
|
|
@@ -169,12 +185,6 @@ Object.defineProperty(exports, "DxcQuickNav", {
|
|
|
169
185
|
return _QuickNav["default"];
|
|
170
186
|
}
|
|
171
187
|
});
|
|
172
|
-
Object.defineProperty(exports, "DxcRadio", {
|
|
173
|
-
enumerable: true,
|
|
174
|
-
get: function get() {
|
|
175
|
-
return _Radio["default"];
|
|
176
|
-
}
|
|
177
|
-
});
|
|
178
188
|
Object.defineProperty(exports, "DxcRadioGroup", {
|
|
179
189
|
enumerable: true,
|
|
180
190
|
get: function get() {
|
|
@@ -187,24 +197,12 @@ Object.defineProperty(exports, "DxcResultsetTable", {
|
|
|
187
197
|
return _ResultsetTable["default"];
|
|
188
198
|
}
|
|
189
199
|
});
|
|
190
|
-
Object.defineProperty(exports, "DxcRow", {
|
|
191
|
-
enumerable: true,
|
|
192
|
-
get: function get() {
|
|
193
|
-
return _Row["default"];
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
200
|
Object.defineProperty(exports, "DxcSelect", {
|
|
197
201
|
enumerable: true,
|
|
198
202
|
get: function get() {
|
|
199
203
|
return _Select["default"];
|
|
200
204
|
}
|
|
201
205
|
});
|
|
202
|
-
Object.defineProperty(exports, "DxcSidenav", {
|
|
203
|
-
enumerable: true,
|
|
204
|
-
get: function get() {
|
|
205
|
-
return _Sidenav["default"];
|
|
206
|
-
}
|
|
207
|
-
});
|
|
208
206
|
Object.defineProperty(exports, "DxcSlider", {
|
|
209
207
|
enumerable: true,
|
|
210
208
|
get: function get() {
|
|
@@ -217,10 +215,10 @@ Object.defineProperty(exports, "DxcSpinner", {
|
|
|
217
215
|
return _Spinner["default"];
|
|
218
216
|
}
|
|
219
217
|
});
|
|
220
|
-
Object.defineProperty(exports, "
|
|
218
|
+
Object.defineProperty(exports, "DxcStatusLight", {
|
|
221
219
|
enumerable: true,
|
|
222
220
|
get: function get() {
|
|
223
|
-
return
|
|
221
|
+
return _StatusLight["default"];
|
|
224
222
|
}
|
|
225
223
|
});
|
|
226
224
|
Object.defineProperty(exports, "DxcSwitch", {
|
|
@@ -247,12 +245,6 @@ Object.defineProperty(exports, "DxcTag", {
|
|
|
247
245
|
return _Tag["default"];
|
|
248
246
|
}
|
|
249
247
|
});
|
|
250
|
-
Object.defineProperty(exports, "DxcText", {
|
|
251
|
-
enumerable: true,
|
|
252
|
-
get: function get() {
|
|
253
|
-
return _Text["default"];
|
|
254
|
-
}
|
|
255
|
-
});
|
|
256
248
|
Object.defineProperty(exports, "DxcTextInput", {
|
|
257
249
|
enumerable: true,
|
|
258
250
|
get: function get() {
|
|
@@ -271,6 +263,12 @@ Object.defineProperty(exports, "DxcToggleGroup", {
|
|
|
271
263
|
return _ToggleGroup["default"];
|
|
272
264
|
}
|
|
273
265
|
});
|
|
266
|
+
Object.defineProperty(exports, "DxcTypography", {
|
|
267
|
+
enumerable: true,
|
|
268
|
+
get: function get() {
|
|
269
|
+
return _Typography["default"];
|
|
270
|
+
}
|
|
271
|
+
});
|
|
274
272
|
Object.defineProperty(exports, "DxcWizard", {
|
|
275
273
|
enumerable: true,
|
|
276
274
|
get: function get() {
|
|
@@ -283,105 +281,63 @@ Object.defineProperty(exports, "HalstackContext", {
|
|
|
283
281
|
return _HalstackContext["default"];
|
|
284
282
|
}
|
|
285
283
|
});
|
|
284
|
+
Object.defineProperty(exports, "HalstackLanguageContext", {
|
|
285
|
+
enumerable: true,
|
|
286
|
+
get: function get() {
|
|
287
|
+
return _HalstackContext.HalstackLanguageContext;
|
|
288
|
+
}
|
|
289
|
+
});
|
|
286
290
|
Object.defineProperty(exports, "HalstackProvider", {
|
|
287
291
|
enumerable: true,
|
|
288
292
|
get: function get() {
|
|
289
293
|
return _HalstackContext.HalstackProvider;
|
|
290
294
|
}
|
|
291
295
|
});
|
|
292
|
-
|
|
293
296
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
294
|
-
|
|
295
297
|
var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
|
|
296
|
-
|
|
297
298
|
var _Button = _interopRequireDefault(require("./button/Button"));
|
|
298
|
-
|
|
299
299
|
var _Card = _interopRequireDefault(require("./card/Card"));
|
|
300
|
-
|
|
301
300
|
var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
|
|
302
|
-
|
|
303
301
|
var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
|
|
304
|
-
|
|
305
302
|
var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
|
|
306
|
-
|
|
307
|
-
var _Footer = _interopRequireDefault(require("./footer/Footer"));
|
|
308
|
-
|
|
309
|
-
var _Header = _interopRequireDefault(require("./header/Header"));
|
|
310
|
-
|
|
311
|
-
var _Radio = _interopRequireDefault(require("./radio/Radio"));
|
|
312
|
-
|
|
313
303
|
var _Slider = _interopRequireDefault(require("./slider/Slider"));
|
|
314
|
-
|
|
315
304
|
var _Switch = _interopRequireDefault(require("./switch/Switch"));
|
|
316
|
-
|
|
317
305
|
var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
|
|
318
|
-
|
|
319
306
|
var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
|
|
320
|
-
|
|
321
307
|
var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
|
|
322
|
-
|
|
323
308
|
var _Table = _interopRequireDefault(require("./table/Table"));
|
|
324
|
-
|
|
325
309
|
var _Box = _interopRequireDefault(require("./box/Box"));
|
|
326
|
-
|
|
327
310
|
var _Tag = _interopRequireDefault(require("./tag/Tag"));
|
|
328
|
-
|
|
329
311
|
var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
|
|
330
|
-
|
|
331
|
-
var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
|
|
332
|
-
|
|
333
312
|
var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
|
|
334
|
-
|
|
335
313
|
var _Link = _interopRequireDefault(require("./link/Link"));
|
|
336
|
-
|
|
337
314
|
var _Heading = _interopRequireDefault(require("./heading/Heading"));
|
|
338
|
-
|
|
339
|
-
var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
|
|
340
|
-
|
|
315
|
+
var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
|
|
341
316
|
var _Chip = _interopRequireDefault(require("./chip/Chip"));
|
|
342
|
-
|
|
343
317
|
var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
|
|
344
|
-
|
|
345
318
|
var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
|
|
346
|
-
|
|
347
319
|
var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
|
|
348
|
-
|
|
349
|
-
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
350
|
-
|
|
351
320
|
var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
|
|
352
|
-
|
|
353
321
|
var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
|
|
354
|
-
|
|
355
322
|
var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
|
|
356
|
-
|
|
357
323
|
var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
|
|
358
|
-
|
|
359
324
|
var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
|
|
360
|
-
|
|
361
325
|
var _Select = _interopRequireDefault(require("./select/Select"));
|
|
362
|
-
|
|
363
326
|
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
364
|
-
|
|
365
|
-
var _Stack = _interopRequireDefault(require("./stack/Stack"));
|
|
366
|
-
|
|
367
|
-
var _Row = _interopRequireDefault(require("./row/Row"));
|
|
368
|
-
|
|
369
|
-
var _Text = _interopRequireDefault(require("./text/Text"));
|
|
370
|
-
|
|
371
|
-
var _List = _interopRequireDefault(require("./list/List"));
|
|
372
|
-
|
|
373
327
|
var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
|
|
374
|
-
|
|
375
328
|
var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
|
|
376
|
-
|
|
377
329
|
var _Inset = _interopRequireDefault(require("./inset/Inset"));
|
|
378
|
-
|
|
379
330
|
var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
|
|
380
|
-
|
|
331
|
+
var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
|
|
332
|
+
var _Flex = _interopRequireDefault(require("./flex/Flex"));
|
|
333
|
+
var _Typography = _interopRequireDefault(require("./typography/Typography"));
|
|
334
|
+
var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
|
|
335
|
+
var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
|
|
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"));
|
|
381
341
|
var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
|
|
382
|
-
|
|
383
|
-
var
|
|
384
|
-
|
|
385
|
-
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); }
|
|
386
|
-
|
|
387
|
-
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; }
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import NavTabsPropsType, { NavTabsContextProps } from "./types";
|
|
3
|
+
export declare const NavTabsContext: React.Context<NavTabsContextProps>;
|
|
4
|
+
declare const DxcNavTabs: {
|
|
5
|
+
({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
|
|
6
|
+
Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
7
|
+
};
|
|
8
|
+
export default DxcNavTabs;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = exports.NavTabsContext = void 0;
|
|
9
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
13
|
+
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
14
|
+
var _Tab = _interopRequireDefault(require("./Tab"));
|
|
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);
|
|
19
|
+
var getPropInChild = function getPropInChild(child, propName) {
|
|
20
|
+
return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
|
|
21
|
+
};
|
|
22
|
+
var getLabelFromTab = function getLabelFromTab(child) {
|
|
23
|
+
if (typeof child === "string") {
|
|
24
|
+
return child.toString();
|
|
25
|
+
} else if (child.props.children) {
|
|
26
|
+
return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
|
|
30
|
+
var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
|
|
31
|
+
while (getPropInChild(array[index], "disabled")) {
|
|
32
|
+
index = index === 0 ? array.length - 1 : index - 1;
|
|
33
|
+
}
|
|
34
|
+
return index;
|
|
35
|
+
};
|
|
36
|
+
var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
|
|
37
|
+
var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
|
|
38
|
+
while (getPropInChild(array[index], "disabled")) {
|
|
39
|
+
index = index === array.length - 1 ? 0 : index + 1;
|
|
40
|
+
}
|
|
41
|
+
return index;
|
|
42
|
+
};
|
|
43
|
+
var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
44
|
+
var _ref$iconPosition = _ref.iconPosition,
|
|
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;
|
|
49
|
+
var _useState = (0, _react.useState)(null),
|
|
50
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
51
|
+
innerFocusIndex = _useState2[0],
|
|
52
|
+
setInnerFocusIndex = _useState2[1];
|
|
53
|
+
var colorsTheme = (0, _useTheme["default"])();
|
|
54
|
+
var contextValue = (0, _react.useMemo)(function () {
|
|
55
|
+
return {
|
|
56
|
+
iconPosition: iconPosition,
|
|
57
|
+
tabIndex: tabIndex,
|
|
58
|
+
focusedLabel: innerFocusIndex === null ? undefined : getLabelFromTab(children[innerFocusIndex])
|
|
59
|
+
};
|
|
60
|
+
}, [iconPosition, tabIndex, innerFocusIndex]);
|
|
61
|
+
var handleOnKeyDown = function handleOnKeyDown(event) {
|
|
62
|
+
var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
|
|
63
|
+
return getPropInChild(child, "active");
|
|
64
|
+
});
|
|
65
|
+
switch (event.key) {
|
|
66
|
+
case "Left":
|
|
67
|
+
case "ArrowLeft":
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
setInnerFocusIndex(getPreviousTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
|
|
70
|
+
break;
|
|
71
|
+
case "Right":
|
|
72
|
+
case "ArrowRight":
|
|
73
|
+
event.preventDefault();
|
|
74
|
+
setInnerFocusIndex(getNextTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
|
|
75
|
+
break;
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
79
|
+
theme: colorsTheme.navTabs
|
|
80
|
+
}, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
|
|
81
|
+
onKeyDown: handleOnKeyDown,
|
|
82
|
+
role: "tablist",
|
|
83
|
+
"aria-label": "Navigation tabs"
|
|
84
|
+
}, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
|
|
85
|
+
value: contextValue
|
|
86
|
+
}, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
|
|
87
|
+
};
|
|
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
|
+
});
|
|
91
|
+
DxcNavTabs.Tab = _Tab["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;
|