@dxc-technology/halstack-react 0.0.0-d3ac293 → 0.0.0-d3df47e

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 (269) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +24 -139
  4. package/HalstackContext.js +11 -36
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +26 -83
  8. package/accordion/Accordion.stories.tsx +2 -114
  9. package/accordion/Accordion.test.js +18 -33
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +27 -75
  13. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  14. package/accordion-group/AccordionGroup.test.js +43 -71
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +6 -18
  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 +17 -56
  24. package/alert/Alert.test.js +28 -45
  25. package/alert/types.d.ts +5 -5
  26. package/badge/Badge.d.ts +1 -1
  27. package/badge/Badge.js +142 -42
  28. package/badge/Badge.stories.tsx +210 -0
  29. package/badge/Badge.test.js +30 -0
  30. package/badge/types.d.ts +52 -3
  31. package/bleed/Bleed.js +13 -21
  32. package/bleed/Bleed.stories.tsx +1 -0
  33. package/bleed/types.d.ts +2 -2
  34. package/box/Box.d.ts +1 -1
  35. package/box/Box.js +16 -55
  36. package/box/Box.stories.tsx +25 -53
  37. package/box/Box.test.js +1 -6
  38. package/box/types.d.ts +3 -15
  39. package/bulleted-list/BulletedList.js +19 -53
  40. package/bulleted-list/BulletedList.stories.tsx +8 -93
  41. package/bulleted-list/types.d.ts +32 -5
  42. package/button/Button.d.ts +1 -1
  43. package/button/Button.js +66 -100
  44. package/button/Button.stories.tsx +9 -90
  45. package/button/Button.test.js +19 -16
  46. package/button/types.d.ts +8 -4
  47. package/card/Card.d.ts +1 -1
  48. package/card/Card.js +47 -88
  49. package/card/Card.stories.tsx +12 -42
  50. package/card/Card.test.js +10 -21
  51. package/card/types.d.ts +6 -12
  52. package/checkbox/Checkbox.js +85 -120
  53. package/checkbox/Checkbox.stories.tsx +16 -54
  54. package/checkbox/Checkbox.test.js +107 -63
  55. package/checkbox/types.d.ts +8 -4
  56. package/chip/Chip.js +34 -68
  57. package/chip/Chip.stories.tsx +25 -17
  58. package/chip/Chip.test.js +15 -28
  59. package/chip/types.d.ts +4 -4
  60. package/common/OpenSans.css +68 -80
  61. package/common/coreTokens.d.ts +237 -0
  62. package/common/coreTokens.js +184 -0
  63. package/common/utils.js +2 -8
  64. package/common/variables.d.ts +24 -282
  65. package/common/variables.js +860 -1125
  66. package/container/Container.d.ts +4 -0
  67. package/container/Container.js +194 -0
  68. package/container/Container.stories.tsx +214 -0
  69. package/container/types.d.ts +74 -0
  70. package/date-input/Calendar.js +15 -59
  71. package/date-input/DateInput.js +50 -96
  72. package/date-input/DateInput.stories.tsx +11 -30
  73. package/date-input/DateInput.test.js +674 -701
  74. package/date-input/DatePicker.js +11 -42
  75. package/date-input/Icons.d.ts +6 -6
  76. package/date-input/Icons.js +6 -23
  77. package/date-input/YearPicker.js +8 -34
  78. package/date-input/types.d.ts +27 -21
  79. package/dialog/Dialog.d.ts +1 -1
  80. package/dialog/Dialog.js +15 -60
  81. package/dialog/Dialog.stories.tsx +215 -169
  82. package/dialog/Dialog.test.js +125 -187
  83. package/dialog/types.d.ts +18 -26
  84. package/dropdown/Dropdown.js +39 -93
  85. package/dropdown/Dropdown.test.js +391 -378
  86. package/dropdown/DropdownMenu.js +13 -20
  87. package/dropdown/DropdownMenuItem.js +5 -19
  88. package/dropdown/types.d.ts +17 -19
  89. package/file-input/FileInput.js +180 -249
  90. package/file-input/FileInput.stories.tsx +1 -1
  91. package/file-input/FileInput.test.js +356 -354
  92. package/file-input/FileItem.js +14 -41
  93. package/file-input/types.d.ts +10 -10
  94. package/flex/Flex.js +27 -39
  95. package/flex/Flex.stories.tsx +35 -26
  96. package/flex/types.d.ts +74 -9
  97. package/footer/Footer.d.ts +1 -1
  98. package/footer/Footer.js +69 -116
  99. package/footer/Footer.stories.tsx +38 -95
  100. package/footer/Footer.test.js +21 -33
  101. package/footer/Icons.d.ts +3 -2
  102. package/footer/Icons.js +66 -7
  103. package/footer/types.d.ts +25 -27
  104. package/grid/Grid.d.ts +7 -0
  105. package/grid/Grid.js +76 -0
  106. package/grid/Grid.stories.tsx +219 -0
  107. package/grid/types.d.ts +115 -0
  108. package/grid/types.js +5 -0
  109. package/header/Header.d.ts +4 -3
  110. package/header/Header.js +33 -116
  111. package/header/Header.stories.tsx +7 -71
  112. package/header/Header.test.js +12 -25
  113. package/header/Icons.d.ts +2 -2
  114. package/header/Icons.js +2 -7
  115. package/header/types.d.ts +5 -20
  116. package/heading/Heading.js +9 -31
  117. package/heading/Heading.test.js +70 -87
  118. package/heading/types.d.ts +7 -7
  119. package/image/Image.d.ts +4 -0
  120. package/image/Image.js +70 -0
  121. package/image/Image.stories.tsx +127 -0
  122. package/image/types.d.ts +72 -0
  123. package/image/types.js +5 -0
  124. package/inset/Inset.js +13 -21
  125. package/inset/Inset.stories.tsx +2 -1
  126. package/inset/types.d.ts +2 -2
  127. package/layout/ApplicationLayout.d.ts +5 -5
  128. package/layout/ApplicationLayout.js +28 -65
  129. package/layout/ApplicationLayout.stories.tsx +1 -1
  130. package/layout/Icons.d.ts +8 -5
  131. package/layout/Icons.js +51 -59
  132. package/layout/SidenavContext.d.ts +1 -1
  133. package/layout/SidenavContext.js +3 -9
  134. package/layout/types.d.ts +5 -6
  135. package/link/Link.js +23 -44
  136. package/link/Link.test.js +23 -41
  137. package/link/types.d.ts +14 -14
  138. package/main.d.ts +7 -4
  139. package/main.js +32 -58
  140. package/nav-tabs/NavTabs.d.ts +2 -2
  141. package/nav-tabs/NavTabs.js +22 -54
  142. package/nav-tabs/NavTabs.stories.tsx +21 -5
  143. package/nav-tabs/NavTabs.test.js +38 -44
  144. package/nav-tabs/Tab.js +40 -72
  145. package/nav-tabs/types.d.ts +14 -15
  146. package/number-input/NumberInput.d.ts +7 -0
  147. package/number-input/NumberInput.js +26 -35
  148. package/number-input/NumberInput.stories.tsx +42 -26
  149. package/number-input/NumberInput.test.js +700 -412
  150. package/number-input/types.d.ts +11 -5
  151. package/package.json +30 -28
  152. package/paginator/Icons.d.ts +5 -5
  153. package/paginator/Icons.js +5 -19
  154. package/paginator/Paginator.js +17 -47
  155. package/paginator/Paginator.test.js +229 -199
  156. package/paginator/types.d.ts +3 -3
  157. package/paragraph/Paragraph.d.ts +2 -3
  158. package/paragraph/Paragraph.js +3 -19
  159. package/paragraph/Paragraph.stories.tsx +0 -17
  160. package/password-input/Icons.d.ts +6 -0
  161. package/password-input/Icons.js +35 -0
  162. package/password-input/PasswordInput.js +57 -126
  163. package/password-input/PasswordInput.stories.tsx +1 -33
  164. package/password-input/PasswordInput.test.js +157 -140
  165. package/password-input/types.d.ts +8 -7
  166. package/progress-bar/ProgressBar.d.ts +2 -2
  167. package/progress-bar/ProgressBar.js +21 -53
  168. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  169. package/progress-bar/ProgressBar.test.js +35 -52
  170. package/progress-bar/types.d.ts +4 -3
  171. package/quick-nav/QuickNav.js +4 -27
  172. package/quick-nav/QuickNav.stories.tsx +1 -1
  173. package/quick-nav/types.d.ts +10 -10
  174. package/radio-group/Radio.d.ts +1 -1
  175. package/radio-group/Radio.js +31 -63
  176. package/radio-group/RadioGroup.js +45 -93
  177. package/radio-group/RadioGroup.stories.tsx +10 -10
  178. package/radio-group/RadioGroup.test.js +504 -470
  179. package/radio-group/types.d.ts +8 -8
  180. package/resultset-table/Icons.d.ts +7 -0
  181. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  182. package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +1 -1
  183. package/{resultsetTable → resultset-table}/ResultsetTable.js +33 -63
  184. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +19 -0
  185. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  186. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  187. package/resultset-table/types.js +5 -0
  188. package/select/Icons.d.ts +7 -7
  189. package/select/Icons.js +1 -5
  190. package/select/Listbox.js +13 -39
  191. package/select/Option.js +17 -27
  192. package/select/Select.js +92 -166
  193. package/select/Select.stories.tsx +3 -3
  194. package/select/Select.test.js +1946 -1804
  195. package/select/types.d.ts +14 -15
  196. package/sidenav/Icons.d.ts +7 -0
  197. package/sidenav/Icons.js +47 -0
  198. package/sidenav/Sidenav.d.ts +2 -2
  199. package/sidenav/Sidenav.js +80 -150
  200. package/sidenav/Sidenav.stories.tsx +60 -60
  201. package/sidenav/Sidenav.test.js +3 -10
  202. package/sidenav/types.d.ts +31 -28
  203. package/slider/Slider.js +68 -126
  204. package/slider/Slider.test.js +107 -103
  205. package/slider/types.d.ts +4 -4
  206. package/spinner/Spinner.js +28 -72
  207. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +28 -28
  208. package/spinner/Spinner.test.js +25 -34
  209. package/spinner/types.d.ts +3 -3
  210. package/status-light/StatusLight.d.ts +4 -0
  211. package/status-light/StatusLight.js +51 -0
  212. package/status-light/StatusLight.stories.tsx +74 -0
  213. package/status-light/StatusLight.test.js +25 -0
  214. package/status-light/types.d.ts +17 -0
  215. package/status-light/types.js +5 -0
  216. package/switch/Switch.js +49 -97
  217. package/switch/Switch.stories.tsx +0 -34
  218. package/switch/Switch.test.js +51 -96
  219. package/switch/types.d.ts +4 -4
  220. package/table/Table.d.ts +1 -1
  221. package/table/Table.js +23 -30
  222. package/table/{Table.stories.jsx → Table.stories.tsx} +98 -0
  223. package/table/Table.test.js +1 -6
  224. package/table/types.d.ts +12 -6
  225. package/tabs/Tab.js +19 -36
  226. package/tabs/Tabs.js +61 -144
  227. package/tabs/Tabs.stories.tsx +1 -1
  228. package/tabs/Tabs.test.js +65 -121
  229. package/tabs/types.d.ts +19 -19
  230. package/tag/Tag.js +26 -58
  231. package/tag/Tag.test.js +19 -30
  232. package/tag/types.d.ts +7 -7
  233. package/text-input/Icons.d.ts +5 -5
  234. package/text-input/Icons.js +1 -5
  235. package/text-input/Suggestion.js +11 -28
  236. package/text-input/Suggestions.d.ts +1 -1
  237. package/text-input/Suggestions.js +15 -65
  238. package/text-input/TextInput.js +217 -318
  239. package/text-input/TextInput.stories.tsx +48 -152
  240. package/text-input/TextInput.test.js +1210 -1194
  241. package/text-input/types.d.ts +25 -17
  242. package/textarea/Textarea.js +68 -111
  243. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  244. package/textarea/Textarea.test.js +151 -182
  245. package/textarea/types.d.ts +9 -5
  246. package/toggle-group/ToggleGroup.d.ts +2 -2
  247. package/toggle-group/ToggleGroup.js +91 -105
  248. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  249. package/toggle-group/ToggleGroup.test.js +68 -87
  250. package/toggle-group/types.d.ts +26 -17
  251. package/typography/Typography.js +4 -13
  252. package/typography/types.d.ts +1 -1
  253. package/useTheme.d.ts +21 -136
  254. package/useTheme.js +1 -8
  255. package/useTranslatedLabels.js +1 -7
  256. package/utils/BaseTypography.d.ts +2 -2
  257. package/utils/BaseTypography.js +16 -30
  258. package/utils/FocusLock.js +28 -43
  259. package/wizard/Wizard.js +15 -50
  260. package/wizard/Wizard.test.js +53 -80
  261. package/wizard/types.d.ts +8 -9
  262. package/card/ice-cream.jpg +0 -0
  263. package/number-input/NumberInputContext.d.ts +0 -4
  264. package/number-input/NumberInputContext.js +0 -19
  265. package/number-input/numberInputContextTypes.d.ts +0 -19
  266. package/resultsetTable/Icons.d.ts +0 -7
  267. package/slider/Slider.stories.tsx +0 -240
  268. /package/{resultsetTable → action-icon}/types.js +0 -0
  269. /package/{number-input/numberInputContextTypes.js → container/types.js} +0 -0
package/link/Link.js CHANGED
@@ -1,67 +1,51 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
11
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
-
18
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
-
20
13
  var _react = _interopRequireWildcard(require("react"));
21
-
22
14
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
15
  var _variables = require("../common/variables");
25
-
26
16
  var _useTheme = _interopRequireDefault(require("../useTheme"));
27
-
28
17
  var _templateObject, _templateObject2, _templateObject3;
29
-
30
18
  var _excluded = ["inheritColor", "disabled", "icon", "iconPosition", "href", "newWindow", "onClick", "margin", "tabIndex", "children"];
31
-
32
- function _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); }
33
-
34
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
-
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
36
21
  var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
37
22
  var iconPosition = _ref.iconPosition,
38
- icon = _ref.icon,
39
- children = _ref.children;
23
+ icon = _ref.icon,
24
+ children = _ref.children;
40
25
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
41
26
  iconPosition: iconPosition
42
27
  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
43
28
  src: icon
44
29
  }) : icon), iconPosition === "before" && children);
45
30
  });
46
-
47
31
  var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
48
32
  var _ref2$inheritColor = _ref2.inheritColor,
49
- inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
50
- _ref2$disabled = _ref2.disabled,
51
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
52
- icon = _ref2.icon,
53
- _ref2$iconPosition = _ref2.iconPosition,
54
- iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
55
- _ref2$href = _ref2.href,
56
- href = _ref2$href === void 0 ? "" : _ref2$href,
57
- _ref2$newWindow = _ref2.newWindow,
58
- newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
59
- onClick = _ref2.onClick,
60
- margin = _ref2.margin,
61
- _ref2$tabIndex = _ref2.tabIndex,
62
- tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
63
- children = _ref2.children,
64
- otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
33
+ inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
34
+ _ref2$disabled = _ref2.disabled,
35
+ disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
36
+ icon = _ref2.icon,
37
+ _ref2$iconPosition = _ref2.iconPosition,
38
+ iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
39
+ _ref2$href = _ref2.href,
40
+ href = _ref2$href === void 0 ? "" : _ref2$href,
41
+ _ref2$newWindow = _ref2.newWindow,
42
+ newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
43
+ onClick = _ref2.onClick,
44
+ margin = _ref2.margin,
45
+ _ref2$tabIndex = _ref2.tabIndex,
46
+ tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
47
+ children = _ref2.children,
48
+ otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
65
49
  var colorsTheme = (0, _useTheme["default"])();
66
50
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
67
51
  theme: colorsTheme.link
@@ -81,8 +65,7 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
81
65
  children: children
82
66
  })));
83
67
  });
84
-
85
- var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: baseline;\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n text-decoration-color: transparent;\n width: fit-content;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
68
+ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: baseline;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n text-decoration-color: transparent;\n width: fit-content;\n ", "\n ", "\n color: ", ";\n ", "\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
86
69
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
87
70
  }, function (props) {
88
71
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -105,7 +88,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
105
88
  }, function (props) {
106
89
  return props.disabled && "cursor: default;";
107
90
  }, function (props) {
108
- return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
91
+ return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledFontColor;
109
92
  }, function (props) {
110
93
  return props.disabled ? "pointer-events: none;" : "";
111
94
  }, function (props) {
@@ -121,9 +104,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
121
104
  }, function (props) {
122
105
  return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
123
106
  });
124
-
125
107
  var LinkIcon = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
126
-
127
108
  var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n align-self: center;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
128
109
  return props.theme.iconSize;
129
110
  }, function (props) {
@@ -131,6 +112,4 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_t
131
112
  }, function (props) {
132
113
  return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
133
114
  });
134
-
135
- var _default = DxcLink;
136
- exports["default"] = _default;
115
+ var _default = exports["default"] = DxcLink;
package/link/Link.test.js CHANGED
@@ -1,81 +1,63 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _react = _interopRequireDefault(require("react"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
-
9
6
  var _Link = _interopRequireDefault(require("./Link.tsx"));
10
-
11
7
  describe("Link component tests", function () {
12
8
  test("Link renders with correct text", function () {
13
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
14
- 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
- disabled: true
38
- }, "LinkButton")),
39
- getByTextLinkButton = _render4.getByText;
40
-
28
+ onClick: function onClick() {},
29
+ disabled: true
30
+ }, "LinkButton")),
31
+ getByTextLinkButton = _render4.getByText;
41
32
  expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
42
33
  });
43
34
  test("Link open new tab", function () {
44
35
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
45
- href: "/testPage",
46
- newWindow: true
47
- }, "Link")),
48
- getByRole = _render5.getByRole;
49
-
36
+ href: "/testPage",
37
+ newWindow: true
38
+ }, "Link")),
39
+ getByRole = _render5.getByRole;
50
40
  expect(getByRole("link").getAttribute("target")).toEqual("_blank");
51
41
  });
52
42
  test("Link onClick called", function () {
53
43
  var onClick = jest.fn();
54
-
55
44
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
56
- onClick: onClick
57
- }, "Link")),
58
- getByText = _render6.getByText;
59
-
45
+ onClick: onClick
46
+ }, "Link")),
47
+ getByText = _render6.getByText;
60
48
  var link = getByText("Link");
61
-
62
49
  _react2.fireEvent.click(link);
63
-
64
50
  expect(onClick).toHaveBeenCalled();
65
51
  });
66
52
  test("Disabled link onClick not called", function () {
67
53
  var onClick = jest.fn();
68
-
69
54
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
70
- onClick: onClick,
71
- disabled: true
72
- }, "Link")),
73
- getByText = _render7.getByText;
74
-
55
+ onClick: onClick,
56
+ disabled: true
57
+ }, "Link")),
58
+ getByText = _render7.getByText;
75
59
  var link = getByText("Link");
76
-
77
60
  _react2.fireEvent.click(link);
78
-
79
61
  expect(onClick).toHaveBeenCalledTimes(0);
80
62
  });
81
63
  });
package/link/types.d.ts CHANGED
@@ -1,21 +1,25 @@
1
1
  /// <reference types="react" />
2
- 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.ReactNode & 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,13 +50,5 @@ export declare type LinkProps = {
42
50
  * Value of the tabindex.
43
51
  */
44
52
  tabIndex?: number;
45
- /**
46
- * Content of the link.
47
- */
48
- children: string;
49
- /**
50
- * Element or path used as the icon that will be placed next to the link text.
51
- */
52
- icon?: string | SVG;
53
53
  };
54
54
  export {};
package/main.d.ts CHANGED
@@ -17,12 +17,11 @@ import DxcPaginator from "./paginator/Paginator";
17
17
  import DxcWizard from "./wizard/Wizard";
18
18
  import DxcLink from "./link/Link";
19
19
  import DxcHeading from "./heading/Heading";
20
- import DxcResultsetTable from "./resultsetTable/ResultsetTable";
20
+ import DxcResultsetTable from "./resultset-table/ResultsetTable";
21
21
  import DxcChip from "./chip/Chip";
22
22
  import DxcApplicationLayout from "./layout/ApplicationLayout";
23
23
  import DxcToggleGroup from "./toggle-group/ToggleGroup";
24
24
  import DxcAccordionGroup from "./accordion-group/AccordionGroup";
25
- import DxcBadge from "./badge/Badge";
26
25
  import DxcTextInput from "./text-input/TextInput";
27
26
  import DxcPasswordInput from "./password-input/PasswordInput";
28
27
  import DxcDateInput from "./date-input/DateInput";
@@ -39,6 +38,10 @@ import DxcFlex from "./flex/Flex";
39
38
  import DxcTypography from "./typography/Typography";
40
39
  import DxcParagraph from "./paragraph/Paragraph";
41
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";
42
46
  import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
43
- import { BackgroundColorProvider } from "./BackgroundColorContext";
44
- export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, };
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() {
@@ -85,6 +77,12 @@ Object.defineProperty(exports, "DxcChip", {
85
77
  return _Chip["default"];
86
78
  }
87
79
  });
80
+ Object.defineProperty(exports, "DxcContainer", {
81
+ enumerable: true,
82
+ get: function get() {
83
+ return _Container["default"];
84
+ }
85
+ });
88
86
  Object.defineProperty(exports, "DxcDateInput", {
89
87
  enumerable: true,
90
88
  get: function get() {
@@ -115,12 +113,24 @@ Object.defineProperty(exports, "DxcFlex", {
115
113
  return _Flex["default"];
116
114
  }
117
115
  });
116
+ Object.defineProperty(exports, "DxcGrid", {
117
+ enumerable: true,
118
+ get: function get() {
119
+ return _Grid["default"];
120
+ }
121
+ });
118
122
  Object.defineProperty(exports, "DxcHeading", {
119
123
  enumerable: true,
120
124
  get: function get() {
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() {
@@ -205,6 +215,12 @@ Object.defineProperty(exports, "DxcSpinner", {
205
215
  return _Spinner["default"];
206
216
  }
207
217
  });
218
+ Object.defineProperty(exports, "DxcStatusLight", {
219
+ enumerable: true,
220
+ get: function get() {
221
+ return _StatusLight["default"];
222
+ }
223
+ });
208
224
  Object.defineProperty(exports, "DxcSwitch", {
209
225
  enumerable: true,
210
226
  get: function get() {
@@ -277,93 +293,51 @@ Object.defineProperty(exports, "HalstackProvider", {
277
293
  return _HalstackContext.HalstackProvider;
278
294
  }
279
295
  });
280
-
281
296
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
282
-
283
297
  var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
284
-
285
298
  var _Button = _interopRequireDefault(require("./button/Button"));
286
-
287
299
  var _Card = _interopRequireDefault(require("./card/Card"));
288
-
289
300
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
290
-
291
301
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
292
-
293
302
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
294
-
295
303
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
296
-
297
304
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
298
-
299
305
  var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
300
-
301
306
  var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
302
-
303
307
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
304
-
305
308
  var _Table = _interopRequireDefault(require("./table/Table"));
306
-
307
309
  var _Box = _interopRequireDefault(require("./box/Box"));
308
-
309
310
  var _Tag = _interopRequireDefault(require("./tag/Tag"));
310
-
311
311
  var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
312
-
313
312
  var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
314
-
315
313
  var _Link = _interopRequireDefault(require("./link/Link"));
316
-
317
314
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
318
-
319
- var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
320
-
315
+ var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
321
316
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
322
-
323
317
  var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
324
-
325
318
  var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
326
-
327
319
  var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
328
-
329
- var _Badge = _interopRequireDefault(require("./badge/Badge"));
330
-
331
320
  var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
332
-
333
321
  var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
334
-
335
322
  var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
336
-
337
323
  var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
338
-
339
324
  var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
340
-
341
325
  var _Select = _interopRequireDefault(require("./select/Select"));
342
-
343
326
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
344
-
345
327
  var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
346
-
347
328
  var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
348
-
349
329
  var _Inset = _interopRequireDefault(require("./inset/Inset"));
350
-
351
330
  var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
352
-
353
331
  var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
354
-
355
332
  var _Flex = _interopRequireDefault(require("./flex/Flex"));
356
-
357
333
  var _Typography = _interopRequireDefault(require("./typography/Typography"));
358
-
359
334
  var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
360
-
361
335
  var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
362
-
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"));
363
341
  var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
364
-
365
- var _BackgroundColorContext = require("./BackgroundColorContext");
366
-
367
- 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); }
368
-
369
- 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; }
@@ -1,8 +1,8 @@
1
1
  import React from "react";
2
- import { NavTabsContextProps, NavTabsProps } from "./types";
2
+ import NavTabsPropsType, { NavTabsContextProps } from "./types";
3
3
  export declare const NavTabsContext: React.Context<NavTabsContextProps>;
4
4
  declare const DxcNavTabs: {
5
- ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
5
+ ({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
6
6
  Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
7
7
  };
8
8
  export default DxcNavTabs;
@@ -1,39 +1,24 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = exports.NavTabsContext = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
11
  var _react = _interopRequireWildcard(require("react"));
17
-
18
12
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
13
  var _useTheme = _interopRequireDefault(require("../useTheme"));
21
-
22
14
  var _Tab = _interopRequireDefault(require("./Tab"));
23
-
24
- var _templateObject;
25
-
26
- 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); }
27
-
28
- 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; }
29
-
30
- var NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
31
- exports.NavTabsContext = NavTabsContext;
32
-
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);
33
19
  var getPropInChild = function getPropInChild(child, propName) {
34
20
  return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
35
21
  };
36
-
37
22
  var getLabelFromTab = function getLabelFromTab(child) {
38
23
  if (typeof child === "string") {
39
24
  return child.toString();
@@ -41,71 +26,55 @@ var getLabelFromTab = function getLabelFromTab(child) {
41
26
  return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
42
27
  }
43
28
  };
44
-
45
29
  var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
46
30
  var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
47
-
48
31
  while (getPropInChild(array[index], "disabled")) {
49
32
  index = index === 0 ? array.length - 1 : index - 1;
50
33
  }
51
-
52
34
  return index;
53
35
  };
54
-
55
36
  var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
56
37
  var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
57
-
58
38
  while (getPropInChild(array[index], "disabled")) {
59
39
  index = index === array.length - 1 ? 0 : index + 1;
60
40
  }
61
-
62
41
  return index;
63
42
  };
64
-
65
43
  var DxcNavTabs = function DxcNavTabs(_ref) {
66
44
  var _ref$iconPosition = _ref.iconPosition,
67
- iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
68
- _ref$tabIndex = _ref.tabIndex,
69
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
70
- children = _ref.children;
71
- var colorsTheme = (0, _useTheme["default"])();
72
-
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;
73
49
  var _useState = (0, _react.useState)(null),
74
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
75
- innerFocus = _useState2[0],
76
- setInnerFocus = _useState2[1];
77
-
50
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
51
+ innerFocusIndex = _useState2[0],
52
+ setInnerFocusIndex = _useState2[1];
53
+ var colorsTheme = (0, _useTheme["default"])();
78
54
  var contextValue = (0, _react.useMemo)(function () {
79
55
  return {
80
56
  iconPosition: iconPosition,
81
57
  tabIndex: tabIndex,
82
- hasIcons: _react["default"].Children.toArray(children).some(function (child) {
83
- return getPropInChild(child, "icon");
84
- }),
85
- focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
58
+ focusedLabel: innerFocusIndex === null ? undefined : getLabelFromTab(children[innerFocusIndex])
86
59
  };
87
- }, [iconPosition, tabIndex, innerFocus]);
88
-
60
+ }, [iconPosition, tabIndex, innerFocusIndex]);
89
61
  var handleOnKeyDown = function handleOnKeyDown(event) {
90
62
  var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
91
63
  return getPropInChild(child, "active");
92
64
  });
93
-
94
65
  switch (event.key) {
95
66
  case "Left":
96
67
  case "ArrowLeft":
97
68
  event.preventDefault();
98
- setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
69
+ setInnerFocusIndex(getPreviousTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
99
70
  break;
100
-
101
71
  case "Right":
102
72
  case "ArrowRight":
103
73
  event.preventDefault();
104
- setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
74
+ setInnerFocusIndex(getNextTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
105
75
  break;
106
76
  }
107
77
  };
108
-
109
78
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
110
79
  theme: colorsTheme.navTabs
111
80
  }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
@@ -114,12 +83,11 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
114
83
  "aria-label": "Navigation tabs"
115
84
  }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
116
85
  value: contextValue
117
- }, children)));
86
+ }, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
118
87
  };
119
-
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
+ });
120
91
  DxcNavTabs.Tab = _Tab["default"];
121
-
122
- var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
123
-
124
- var _default = DxcNavTabs;
125
- exports["default"] = _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;