@dxc-technology/halstack-react 0.0.0-1c4cbc0 → 0.0.0-1c9e3f9
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 +1231 -6
- package/HalstackContext.js +127 -111
- 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 +20 -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 +140 -182
- 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 +1383 -0
- package/common/variables.js +930 -1140
- 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 +150 -299
- 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 +241 -355
- 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 +70 -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 +85 -168
- 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 +12 -12
- package/main.js +51 -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 +26 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +701 -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 +23 -59
- 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 -126
- package/password-input/PasswordInput.stories.tsx +1 -33
- package/password-input/PasswordInput.test.js +160 -142
- 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 +67 -42
- 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 +67 -114
- 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 +136 -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 +42 -51
- package/select/Option.js +27 -50
- package/select/Select.js +173 -237
- package/select/Select.stories.tsx +516 -139
- 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 +145 -126
- 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 +55 -0
- package/table/DropdownTheme.js +57 -0
- package/table/Table.d.ts +4 -1
- package/table/Table.js +27 -32
- package/table/Table.stories.tsx +615 -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 +308 -506
- package/text-input/TextInput.stories.tsx +266 -275
- package/text-input/TextInput.test.js +1402 -1375
- package/text-input/types.d.ts +43 -16
- package/textarea/Textarea.js +70 -113
- 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 +1135 -1
- package/useTheme.js +2 -9
- package/useTranslatedLabels.d.ts +84 -1
- package/useTranslatedLabels.js +1 -7
- 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 +24 -66
- 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";
|
|
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";
|
|
45
46
|
import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
|
|
46
|
-
|
|
47
|
-
export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, };
|
|
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() {
|
|
@@ -295,99 +293,51 @@ Object.defineProperty(exports, "HalstackProvider", {
|
|
|
295
293
|
return _HalstackContext.HalstackProvider;
|
|
296
294
|
}
|
|
297
295
|
});
|
|
298
|
-
|
|
299
296
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
300
|
-
|
|
301
297
|
var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
|
|
302
|
-
|
|
303
298
|
var _Button = _interopRequireDefault(require("./button/Button"));
|
|
304
|
-
|
|
305
299
|
var _Card = _interopRequireDefault(require("./card/Card"));
|
|
306
|
-
|
|
307
300
|
var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
|
|
308
|
-
|
|
309
301
|
var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
|
|
310
|
-
|
|
311
302
|
var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
|
|
312
|
-
|
|
313
|
-
var _Footer = _interopRequireDefault(require("./footer/Footer"));
|
|
314
|
-
|
|
315
|
-
var _Header = _interopRequireDefault(require("./header/Header"));
|
|
316
|
-
|
|
317
|
-
var _Radio = _interopRequireDefault(require("./radio/Radio"));
|
|
318
|
-
|
|
319
303
|
var _Slider = _interopRequireDefault(require("./slider/Slider"));
|
|
320
|
-
|
|
321
304
|
var _Switch = _interopRequireDefault(require("./switch/Switch"));
|
|
322
|
-
|
|
323
305
|
var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
|
|
324
|
-
|
|
325
306
|
var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
|
|
326
|
-
|
|
327
307
|
var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
|
|
328
|
-
|
|
329
308
|
var _Table = _interopRequireDefault(require("./table/Table"));
|
|
330
|
-
|
|
331
309
|
var _Box = _interopRequireDefault(require("./box/Box"));
|
|
332
|
-
|
|
333
310
|
var _Tag = _interopRequireDefault(require("./tag/Tag"));
|
|
334
|
-
|
|
335
311
|
var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
|
|
336
|
-
|
|
337
|
-
var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
|
|
338
|
-
|
|
339
312
|
var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
|
|
340
|
-
|
|
341
313
|
var _Link = _interopRequireDefault(require("./link/Link"));
|
|
342
|
-
|
|
343
314
|
var _Heading = _interopRequireDefault(require("./heading/Heading"));
|
|
344
|
-
|
|
345
|
-
var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
|
|
346
|
-
|
|
315
|
+
var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
|
|
347
316
|
var _Chip = _interopRequireDefault(require("./chip/Chip"));
|
|
348
|
-
|
|
349
317
|
var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
|
|
350
|
-
|
|
351
318
|
var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
|
|
352
|
-
|
|
353
319
|
var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
|
|
354
|
-
|
|
355
|
-
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
356
|
-
|
|
357
320
|
var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
|
|
358
|
-
|
|
359
321
|
var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
|
|
360
|
-
|
|
361
322
|
var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
|
|
362
|
-
|
|
363
323
|
var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
|
|
364
|
-
|
|
365
324
|
var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
|
|
366
|
-
|
|
367
325
|
var _Select = _interopRequireDefault(require("./select/Select"));
|
|
368
|
-
|
|
369
326
|
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
370
|
-
|
|
371
|
-
var _Stack = _interopRequireDefault(require("./stack/Stack"));
|
|
372
|
-
|
|
373
|
-
var _Row = _interopRequireDefault(require("./row/Row"));
|
|
374
|
-
|
|
375
|
-
var _Text = _interopRequireDefault(require("./text/Text"));
|
|
376
|
-
|
|
377
|
-
var _List = _interopRequireDefault(require("./list/List"));
|
|
378
|
-
|
|
379
327
|
var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
|
|
380
|
-
|
|
381
328
|
var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
|
|
382
|
-
|
|
383
329
|
var _Inset = _interopRequireDefault(require("./inset/Inset"));
|
|
384
|
-
|
|
385
330
|
var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
|
|
386
|
-
|
|
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"));
|
|
387
341
|
var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
|
|
388
|
-
|
|
389
|
-
var
|
|
390
|
-
|
|
391
|
-
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); }
|
|
392
|
-
|
|
393
|
-
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;
|