@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.
Files changed (329) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1231 -6
  4. package/HalstackContext.js +127 -111
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +116 -160
  8. package/accordion/Accordion.stories.tsx +102 -126
  9. package/accordion/Accordion.test.js +25 -41
  10. package/accordion/types.d.ts +5 -16
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +31 -98
  13. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  14. package/accordion-group/AccordionGroup.test.js +52 -105
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +11 -16
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +47 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +20 -59
  24. package/alert/Alert.stories.tsx +28 -0
  25. package/alert/Alert.test.js +29 -46
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +1 -1
  28. package/badge/Badge.js +141 -41
  29. package/badge/Badge.stories.tsx +210 -0
  30. package/badge/Badge.test.js +30 -0
  31. package/badge/types.d.ts +52 -2
  32. package/bleed/Bleed.js +14 -55
  33. package/bleed/Bleed.stories.tsx +95 -95
  34. package/bleed/types.d.ts +2 -2
  35. package/box/Box.d.ts +1 -1
  36. package/box/Box.js +30 -81
  37. package/box/Box.stories.tsx +38 -51
  38. package/box/Box.test.js +2 -7
  39. package/box/types.d.ts +3 -14
  40. package/bulleted-list/BulletedList.d.ts +7 -0
  41. package/bulleted-list/BulletedList.js +89 -0
  42. package/bulleted-list/BulletedList.stories.tsx +115 -0
  43. package/bulleted-list/types.d.ts +38 -0
  44. package/button/Button.d.ts +1 -1
  45. package/button/Button.js +63 -117
  46. package/button/Button.stories.tsx +160 -90
  47. package/button/Button.test.js +20 -17
  48. package/button/types.d.ts +12 -8
  49. package/card/Card.d.ts +1 -1
  50. package/card/Card.js +64 -107
  51. package/card/Card.stories.tsx +12 -42
  52. package/card/Card.test.js +11 -22
  53. package/card/types.d.ts +6 -11
  54. package/checkbox/Checkbox.d.ts +2 -2
  55. package/checkbox/Checkbox.js +140 -182
  56. package/checkbox/Checkbox.stories.tsx +128 -94
  57. package/checkbox/Checkbox.test.js +160 -39
  58. package/checkbox/types.d.ts +11 -3
  59. package/chip/Chip.js +39 -79
  60. package/chip/Chip.stories.tsx +121 -26
  61. package/chip/Chip.test.js +16 -31
  62. package/chip/types.d.ts +4 -4
  63. package/common/OpenSans.css +68 -80
  64. package/common/coreTokens.d.ts +237 -0
  65. package/common/coreTokens.js +184 -0
  66. package/common/utils.d.ts +1 -0
  67. package/common/utils.js +6 -12
  68. package/common/variables.d.ts +1383 -0
  69. package/common/variables.js +930 -1140
  70. package/container/Container.d.ts +4 -0
  71. package/container/Container.js +194 -0
  72. package/container/Container.stories.tsx +214 -0
  73. package/container/types.d.ts +74 -0
  74. package/date-input/Calendar.d.ts +4 -0
  75. package/date-input/Calendar.js +214 -0
  76. package/date-input/DateInput.js +150 -299
  77. package/date-input/DateInput.stories.tsx +203 -56
  78. package/date-input/DateInput.test.js +700 -371
  79. package/date-input/DatePicker.d.ts +4 -0
  80. package/date-input/DatePicker.js +115 -0
  81. package/date-input/Icons.d.ts +6 -0
  82. package/date-input/Icons.js +58 -0
  83. package/date-input/YearPicker.d.ts +4 -0
  84. package/date-input/YearPicker.js +100 -0
  85. package/date-input/types.d.ts +72 -15
  86. package/dialog/Dialog.d.ts +1 -1
  87. package/dialog/Dialog.js +73 -107
  88. package/dialog/Dialog.stories.tsx +320 -167
  89. package/dialog/Dialog.test.js +287 -20
  90. package/dialog/types.d.ts +18 -25
  91. package/dropdown/Dropdown.d.ts +1 -1
  92. package/dropdown/Dropdown.js +248 -303
  93. package/dropdown/Dropdown.stories.tsx +245 -56
  94. package/dropdown/Dropdown.test.js +575 -165
  95. package/dropdown/DropdownMenu.d.ts +4 -0
  96. package/dropdown/DropdownMenu.js +63 -0
  97. package/dropdown/DropdownMenuItem.d.ts +4 -0
  98. package/dropdown/DropdownMenuItem.js +67 -0
  99. package/dropdown/types.d.ts +32 -14
  100. package/file-input/FileInput.d.ts +2 -2
  101. package/file-input/FileInput.js +241 -355
  102. package/file-input/FileInput.stories.tsx +123 -12
  103. package/file-input/FileInput.test.js +369 -367
  104. package/file-input/FileItem.d.ts +4 -14
  105. package/file-input/FileItem.js +45 -96
  106. package/file-input/types.d.ts +25 -8
  107. package/flex/Flex.d.ts +4 -0
  108. package/flex/Flex.js +57 -0
  109. package/flex/Flex.stories.tsx +112 -0
  110. package/flex/types.d.ts +97 -0
  111. package/footer/Footer.d.ts +1 -1
  112. package/footer/Footer.js +70 -117
  113. package/footer/Footer.stories.tsx +60 -19
  114. package/footer/Footer.test.js +33 -57
  115. package/footer/Icons.d.ts +3 -2
  116. package/footer/Icons.js +67 -8
  117. package/footer/types.d.ts +25 -26
  118. package/grid/Grid.d.ts +7 -0
  119. package/grid/Grid.js +76 -0
  120. package/grid/Grid.stories.tsx +219 -0
  121. package/grid/types.d.ts +115 -0
  122. package/header/Header.d.ts +4 -3
  123. package/header/Header.js +85 -168
  124. package/header/Header.stories.tsx +118 -39
  125. package/header/Header.test.js +13 -26
  126. package/header/Icons.d.ts +2 -2
  127. package/header/Icons.js +4 -9
  128. package/header/types.d.ts +5 -19
  129. package/heading/Heading.js +10 -32
  130. package/heading/Heading.test.js +71 -88
  131. package/heading/types.d.ts +7 -7
  132. package/image/Image.d.ts +4 -0
  133. package/image/Image.js +70 -0
  134. package/image/Image.stories.tsx +127 -0
  135. package/image/types.d.ts +72 -0
  136. package/inset/Inset.js +14 -55
  137. package/inset/Inset.stories.tsx +37 -36
  138. package/inset/types.d.ts +2 -2
  139. package/layout/ApplicationLayout.d.ts +16 -6
  140. package/layout/ApplicationLayout.js +82 -166
  141. package/layout/ApplicationLayout.stories.tsx +85 -94
  142. package/layout/Icons.d.ts +8 -0
  143. package/layout/Icons.js +51 -48
  144. package/layout/SidenavContext.d.ts +5 -0
  145. package/layout/SidenavContext.js +13 -0
  146. package/layout/types.d.ts +19 -35
  147. package/link/Link.d.ts +2 -2
  148. package/link/Link.js +42 -89
  149. package/link/Link.stories.tsx +73 -6
  150. package/link/Link.test.js +24 -44
  151. package/link/types.d.ts +14 -15
  152. package/main.d.ts +12 -12
  153. package/main.js +51 -101
  154. package/nav-tabs/NavTabs.d.ts +8 -0
  155. package/nav-tabs/NavTabs.js +93 -0
  156. package/nav-tabs/NavTabs.stories.tsx +276 -0
  157. package/nav-tabs/NavTabs.test.js +76 -0
  158. package/nav-tabs/Tab.d.ts +4 -0
  159. package/nav-tabs/Tab.js +118 -0
  160. package/nav-tabs/types.d.ts +52 -0
  161. package/nav-tabs/types.js +5 -0
  162. package/number-input/NumberInput.d.ts +7 -0
  163. package/number-input/NumberInput.js +26 -35
  164. package/number-input/NumberInput.stories.tsx +42 -26
  165. package/number-input/NumberInput.test.js +701 -377
  166. package/number-input/types.d.ts +11 -5
  167. package/package.json +43 -45
  168. package/paginator/Icons.d.ts +5 -0
  169. package/paginator/Icons.js +21 -47
  170. package/paginator/Paginator.js +23 -59
  171. package/paginator/Paginator.stories.tsx +24 -0
  172. package/paginator/Paginator.test.js +280 -211
  173. package/paginator/types.d.ts +3 -3
  174. package/paragraph/Paragraph.d.ts +5 -0
  175. package/paragraph/Paragraph.js +22 -0
  176. package/paragraph/Paragraph.stories.tsx +27 -0
  177. package/password-input/Icons.d.ts +6 -0
  178. package/password-input/Icons.js +35 -0
  179. package/password-input/PasswordInput.js +57 -126
  180. package/password-input/PasswordInput.stories.tsx +1 -33
  181. package/password-input/PasswordInput.test.js +160 -142
  182. package/password-input/types.d.ts +8 -7
  183. package/progress-bar/ProgressBar.js +65 -91
  184. package/progress-bar/ProgressBar.stories.tsx +93 -0
  185. package/progress-bar/ProgressBar.test.js +72 -44
  186. package/progress-bar/types.d.ts +3 -3
  187. package/quick-nav/QuickNav.js +67 -42
  188. package/quick-nav/QuickNav.stories.tsx +146 -27
  189. package/quick-nav/types.d.ts +10 -10
  190. package/radio-group/Radio.d.ts +1 -1
  191. package/radio-group/Radio.js +59 -76
  192. package/radio-group/RadioGroup.js +67 -114
  193. package/radio-group/RadioGroup.stories.tsx +132 -18
  194. package/radio-group/RadioGroup.test.js +518 -457
  195. package/radio-group/types.d.ts +10 -10
  196. package/resultset-table/Icons.d.ts +7 -0
  197. package/resultset-table/Icons.js +47 -0
  198. package/resultset-table/ResultsetTable.d.ts +7 -0
  199. package/resultset-table/ResultsetTable.js +167 -0
  200. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +136 -30
  201. package/resultset-table/ResultsetTable.test.js +371 -0
  202. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  203. package/resultset-table/types.js +5 -0
  204. package/select/Icons.d.ts +7 -7
  205. package/select/Icons.js +1 -5
  206. package/select/Listbox.d.ts +1 -1
  207. package/select/Listbox.js +42 -51
  208. package/select/Option.js +27 -50
  209. package/select/Select.js +173 -237
  210. package/select/Select.stories.tsx +516 -139
  211. package/select/Select.test.js +2009 -1696
  212. package/select/types.d.ts +16 -20
  213. package/sidenav/Icons.d.ts +7 -0
  214. package/sidenav/Icons.js +47 -0
  215. package/sidenav/Sidenav.d.ts +6 -5
  216. package/sidenav/Sidenav.js +131 -71
  217. package/sidenav/Sidenav.stories.tsx +251 -151
  218. package/sidenav/Sidenav.test.js +26 -45
  219. package/sidenav/types.d.ts +52 -26
  220. package/slider/Slider.d.ts +2 -2
  221. package/slider/Slider.js +148 -181
  222. package/slider/Slider.test.js +185 -81
  223. package/slider/types.d.ts +7 -3
  224. package/spinner/Spinner.js +31 -75
  225. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  226. package/spinner/Spinner.test.js +26 -35
  227. package/spinner/types.d.ts +3 -3
  228. package/status-light/StatusLight.d.ts +4 -0
  229. package/status-light/StatusLight.js +51 -0
  230. package/status-light/StatusLight.stories.tsx +74 -0
  231. package/status-light/StatusLight.test.js +25 -0
  232. package/status-light/types.d.ts +17 -0
  233. package/status-light/types.js +5 -0
  234. package/switch/Switch.d.ts +2 -2
  235. package/switch/Switch.js +145 -126
  236. package/switch/Switch.stories.tsx +37 -60
  237. package/switch/Switch.test.js +138 -56
  238. package/switch/types.d.ts +7 -3
  239. package/table/ActionsCell.d.ts +4 -0
  240. package/table/ActionsCell.js +55 -0
  241. package/table/DropdownTheme.js +57 -0
  242. package/table/Table.d.ts +4 -1
  243. package/table/Table.js +27 -32
  244. package/table/Table.stories.tsx +615 -0
  245. package/table/Table.test.js +95 -8
  246. package/table/types.d.ts +45 -6
  247. package/tabs/Tab.d.ts +4 -0
  248. package/tabs/Tab.js +116 -0
  249. package/tabs/Tabs.js +314 -141
  250. package/tabs/Tabs.stories.tsx +120 -6
  251. package/tabs/Tabs.test.js +223 -69
  252. package/tabs/types.d.ts +28 -18
  253. package/tag/Tag.js +29 -61
  254. package/tag/Tag.stories.tsx +14 -1
  255. package/tag/Tag.test.js +20 -31
  256. package/tag/types.d.ts +7 -7
  257. package/text-input/Icons.d.ts +8 -0
  258. package/text-input/Icons.js +56 -0
  259. package/text-input/Suggestion.js +40 -28
  260. package/text-input/Suggestions.d.ts +4 -0
  261. package/text-input/Suggestions.js +84 -0
  262. package/text-input/TextInput.js +308 -506
  263. package/text-input/TextInput.stories.tsx +266 -275
  264. package/text-input/TextInput.test.js +1402 -1375
  265. package/text-input/types.d.ts +43 -16
  266. package/textarea/Textarea.js +70 -113
  267. package/textarea/Textarea.stories.tsx +174 -0
  268. package/textarea/Textarea.test.js +152 -183
  269. package/textarea/types.d.ts +9 -5
  270. package/toggle-group/ToggleGroup.d.ts +2 -2
  271. package/toggle-group/ToggleGroup.js +92 -106
  272. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  273. package/toggle-group/ToggleGroup.test.js +69 -88
  274. package/toggle-group/types.d.ts +26 -17
  275. package/typography/Typography.d.ts +4 -0
  276. package/typography/Typography.js +23 -0
  277. package/typography/Typography.stories.tsx +198 -0
  278. package/typography/types.d.ts +18 -0
  279. package/typography/types.js +5 -0
  280. package/useTheme.d.ts +1135 -1
  281. package/useTheme.js +2 -9
  282. package/useTranslatedLabels.d.ts +84 -1
  283. package/useTranslatedLabels.js +1 -7
  284. package/utils/BaseTypography.d.ts +21 -0
  285. package/utils/BaseTypography.js +94 -0
  286. package/utils/FocusLock.d.ts +13 -0
  287. package/utils/FocusLock.js +124 -0
  288. package/wizard/Wizard.js +24 -66
  289. package/wizard/Wizard.stories.tsx +40 -1
  290. package/wizard/Wizard.test.js +54 -81
  291. package/wizard/types.d.ts +7 -7
  292. package/card/ice-cream.jpg +0 -0
  293. package/common/RequiredComponent.js +0 -32
  294. package/list/List.d.ts +0 -4
  295. package/list/List.js +0 -47
  296. package/list/List.stories.tsx +0 -95
  297. package/list/types.d.ts +0 -7
  298. package/number-input/NumberInputContext.d.ts +0 -4
  299. package/number-input/NumberInputContext.js +0 -19
  300. package/number-input/numberInputContextTypes.d.ts +0 -19
  301. package/progress-bar/ProgressBar.stories.jsx +0 -58
  302. package/radio/Radio.d.ts +0 -4
  303. package/radio/Radio.js +0 -173
  304. package/radio/Radio.stories.tsx +0 -192
  305. package/radio/Radio.test.js +0 -71
  306. package/radio/types.d.ts +0 -54
  307. package/resultsetTable/ResultsetTable.d.ts +0 -4
  308. package/resultsetTable/ResultsetTable.js +0 -254
  309. package/resultsetTable/ResultsetTable.test.js +0 -306
  310. package/row/Row.d.ts +0 -3
  311. package/row/Row.js +0 -127
  312. package/row/Row.stories.tsx +0 -237
  313. package/row/types.d.ts +0 -28
  314. package/slider/Slider.stories.tsx +0 -177
  315. package/stack/Stack.d.ts +0 -3
  316. package/stack/Stack.js +0 -97
  317. package/stack/Stack.stories.tsx +0 -164
  318. package/stack/types.d.ts +0 -24
  319. package/table/Table.stories.jsx +0 -277
  320. package/text/Text.d.ts +0 -7
  321. package/text/Text.js +0 -30
  322. package/text/Text.stories.tsx +0 -19
  323. package/textarea/Textarea.stories.jsx +0 -157
  324. /package/{list → action-icon}/types.js +0 -0
  325. /package/{radio → bulleted-list}/types.js +0 -0
  326. /package/{resultsetTable → container}/types.js +0 -0
  327. /package/{row → flex}/types.js +0 -0
  328. /package/{stack → grid}/types.js +0 -0
  329. /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
- getByText = _render.getByText;
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
- href: "/testPage"
21
- }, "Link")),
22
- getByRole = _render2.getByRole;
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
- href: "/testPage",
29
- disabled: true
30
- }, "Link")),
31
- getByText = _render3.getByText;
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
- onClick: function onClick() {
37
- return console.log("Andorra");
38
- },
39
- disabled: true
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
- href: "/testPage",
48
- newWindow: true
49
- }, "Link")),
50
- getByRole = _render5.getByRole;
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
- onClick: onClick
59
- }, "Link")),
60
- getByText = _render6.getByText;
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
- onClick: onClick,
73
- disabled: true
74
- }, "Link")),
75
- getByText = _render7.getByText;
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
- export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- export declare type Margin = {
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
- declare type SVG = React.SVGProps<SVGSVGElement>;
10
- export declare type LinkProps = {
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
- * If true, the link is disabled.
20
+ * Element or path used as the icon that will be placed next to the link text.
17
21
  */
18
- disabled?: boolean;
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 "./resultsetTable/ResultsetTable";
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
- import { BackgroundColorProvider } from "./BackgroundColorContext";
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, "DxcFooter", {
110
+ Object.defineProperty(exports, "DxcFlex", {
107
111
  enumerable: true,
108
112
  get: function get() {
109
- return _Footer["default"];
113
+ return _Flex["default"];
110
114
  }
111
115
  });
112
- Object.defineProperty(exports, "DxcHeader", {
116
+ Object.defineProperty(exports, "DxcGrid", {
113
117
  enumerable: true,
114
118
  get: function get() {
115
- return _Header["default"];
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, "DxcList", {
146
+ Object.defineProperty(exports, "DxcNavTabs", {
137
147
  enumerable: true,
138
148
  get: function get() {
139
- return _List["default"];
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, "DxcStack", {
218
+ Object.defineProperty(exports, "DxcStatusLight", {
221
219
  enumerable: true,
222
220
  get: function get() {
223
- return _Stack["default"];
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 _BackgroundColorContext = require("./BackgroundColorContext");
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;