@dxc-technology/halstack-react 10.0.0 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (219) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +5 -17
  3. package/HalstackContext.d.ts +26 -6
  4. package/HalstackContext.js +9 -34
  5. package/README.md +47 -0
  6. package/accordion/Accordion.js +21 -58
  7. package/accordion/Accordion.stories.tsx +1 -15
  8. package/accordion/Accordion.test.js +18 -33
  9. package/accordion/types.d.ts +5 -5
  10. package/accordion-group/AccordionGroup.js +15 -42
  11. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  12. package/accordion-group/AccordionGroup.test.js +42 -60
  13. package/accordion-group/AccordionGroupAccordion.js +9 -21
  14. package/accordion-group/types.d.ts +6 -6
  15. package/alert/Alert.js +14 -46
  16. package/alert/Alert.test.js +28 -45
  17. package/alert/types.d.ts +5 -5
  18. package/badge/Badge.js +4 -17
  19. package/badge/types.d.ts +1 -1
  20. package/bleed/Bleed.js +13 -21
  21. package/bleed/types.d.ts +2 -2
  22. package/box/Box.js +10 -29
  23. package/box/Box.test.js +1 -6
  24. package/box/types.d.ts +3 -3
  25. package/bulleted-list/BulletedList.js +7 -33
  26. package/bulleted-list/BulletedList.stories.tsx +1 -91
  27. package/bulleted-list/types.d.ts +5 -5
  28. package/button/Button.js +23 -46
  29. package/button/Button.stories.tsx +5 -86
  30. package/button/Button.test.js +11 -21
  31. package/button/types.d.ts +4 -4
  32. package/card/Card.js +21 -44
  33. package/card/Card.test.js +10 -21
  34. package/card/types.d.ts +5 -5
  35. package/checkbox/Checkbox.js +81 -111
  36. package/checkbox/Checkbox.stories.tsx +16 -54
  37. package/checkbox/Checkbox.test.js +107 -63
  38. package/checkbox/types.d.ts +8 -4
  39. package/chip/Chip.js +12 -31
  40. package/chip/Chip.test.js +15 -28
  41. package/chip/types.d.ts +4 -4
  42. package/common/coreTokens.js +1 -2
  43. package/common/utils.js +2 -8
  44. package/common/variables.d.ts +23 -6
  45. package/common/variables.js +25 -15
  46. package/date-input/Calendar.js +13 -57
  47. package/date-input/DateInput.js +50 -96
  48. package/date-input/DateInput.stories.tsx +11 -30
  49. package/date-input/DateInput.test.js +674 -701
  50. package/date-input/DatePicker.js +11 -42
  51. package/date-input/Icons.d.ts +6 -6
  52. package/date-input/Icons.js +6 -23
  53. package/date-input/YearPicker.js +8 -34
  54. package/date-input/types.d.ts +27 -21
  55. package/dialog/Dialog.js +11 -35
  56. package/dialog/Dialog.test.js +125 -187
  57. package/dialog/types.d.ts +18 -13
  58. package/dropdown/Dropdown.js +39 -93
  59. package/dropdown/Dropdown.test.js +391 -378
  60. package/dropdown/DropdownMenu.js +8 -19
  61. package/dropdown/DropdownMenuItem.js +5 -17
  62. package/dropdown/types.d.ts +17 -19
  63. package/file-input/FileInput.js +131 -220
  64. package/file-input/FileInput.stories.tsx +1 -1
  65. package/file-input/FileInput.test.js +293 -342
  66. package/file-input/FileItem.js +12 -39
  67. package/file-input/types.d.ts +9 -9
  68. package/flex/Flex.js +25 -39
  69. package/flex/types.d.ts +6 -6
  70. package/footer/Footer.js +9 -39
  71. package/footer/Footer.stories.tsx +8 -7
  72. package/footer/Footer.test.js +18 -32
  73. package/footer/Icons.d.ts +2 -2
  74. package/footer/Icons.js +2 -7
  75. package/footer/types.d.ts +13 -13
  76. package/grid/Grid.js +1 -16
  77. package/grid/types.d.ts +10 -10
  78. package/header/Header.d.ts +1 -1
  79. package/header/Header.js +19 -64
  80. package/header/Header.test.js +12 -25
  81. package/header/Icons.d.ts +2 -2
  82. package/header/Icons.js +2 -7
  83. package/header/types.d.ts +5 -7
  84. package/heading/Heading.js +9 -31
  85. package/heading/Heading.test.js +70 -87
  86. package/heading/types.d.ts +7 -7
  87. package/image/Image.d.ts +4 -0
  88. package/image/Image.js +70 -0
  89. package/image/Image.stories.tsx +127 -0
  90. package/image/types.d.ts +72 -0
  91. package/inset/Inset.js +13 -21
  92. package/inset/types.d.ts +2 -2
  93. package/layout/ApplicationLayout.d.ts +1 -1
  94. package/layout/ApplicationLayout.js +25 -65
  95. package/layout/ApplicationLayout.stories.tsx +1 -1
  96. package/layout/Icons.d.ts +8 -5
  97. package/layout/Icons.js +51 -59
  98. package/layout/SidenavContext.d.ts +1 -1
  99. package/layout/SidenavContext.js +3 -9
  100. package/layout/types.d.ts +3 -3
  101. package/link/Link.js +21 -42
  102. package/link/Link.test.js +23 -41
  103. package/link/types.d.ts +14 -14
  104. package/main.d.ts +3 -2
  105. package/main.js +10 -51
  106. package/nav-tabs/NavTabs.js +11 -43
  107. package/nav-tabs/NavTabs.stories.tsx +1 -1
  108. package/nav-tabs/NavTabs.test.js +36 -43
  109. package/nav-tabs/Tab.js +16 -45
  110. package/nav-tabs/types.d.ts +9 -9
  111. package/number-input/NumberInput.d.ts +7 -0
  112. package/number-input/NumberInput.js +26 -35
  113. package/number-input/NumberInput.stories.tsx +42 -26
  114. package/number-input/NumberInput.test.js +700 -412
  115. package/number-input/types.d.ts +11 -5
  116. package/package.json +28 -26
  117. package/paginator/Icons.d.ts +5 -5
  118. package/paginator/Icons.js +5 -19
  119. package/paginator/Paginator.js +14 -39
  120. package/paginator/Paginator.test.js +224 -207
  121. package/paginator/types.d.ts +3 -3
  122. package/paragraph/Paragraph.js +3 -14
  123. package/paragraph/Paragraph.stories.tsx +0 -17
  124. package/password-input/Icons.d.ts +6 -0
  125. package/password-input/Icons.js +35 -0
  126. package/password-input/PasswordInput.js +57 -126
  127. package/password-input/PasswordInput.stories.tsx +1 -32
  128. package/password-input/PasswordInput.test.js +157 -140
  129. package/password-input/types.d.ts +8 -7
  130. package/progress-bar/ProgressBar.js +16 -42
  131. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  132. package/progress-bar/ProgressBar.test.js +35 -52
  133. package/progress-bar/types.d.ts +3 -3
  134. package/quick-nav/QuickNav.js +4 -27
  135. package/quick-nav/QuickNav.stories.tsx +1 -1
  136. package/quick-nav/types.d.ts +10 -10
  137. package/radio-group/Radio.d.ts +1 -1
  138. package/radio-group/Radio.js +22 -54
  139. package/radio-group/RadioGroup.js +37 -83
  140. package/radio-group/RadioGroup.stories.tsx +10 -10
  141. package/radio-group/RadioGroup.test.js +504 -470
  142. package/radio-group/types.d.ts +8 -8
  143. package/resultset-table/Icons.d.ts +7 -0
  144. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  145. package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
  146. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  147. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  148. package/select/Icons.d.ts +7 -7
  149. package/select/Icons.js +1 -5
  150. package/select/Listbox.js +13 -39
  151. package/select/Option.js +9 -26
  152. package/select/Select.js +54 -138
  153. package/select/Select.stories.tsx +3 -3
  154. package/select/Select.test.js +1906 -1800
  155. package/select/types.d.ts +14 -15
  156. package/sidenav/Icons.d.ts +4 -4
  157. package/sidenav/Icons.js +1 -5
  158. package/sidenav/Sidenav.js +24 -63
  159. package/sidenav/Sidenav.test.js +3 -10
  160. package/sidenav/types.d.ts +18 -18
  161. package/slider/Slider.js +38 -86
  162. package/slider/Slider.test.js +107 -103
  163. package/slider/types.d.ts +4 -4
  164. package/spinner/Spinner.js +10 -40
  165. package/spinner/Spinner.test.js +25 -34
  166. package/spinner/types.d.ts +3 -3
  167. package/switch/Switch.js +26 -69
  168. package/switch/Switch.stories.tsx +0 -34
  169. package/switch/Switch.test.js +51 -96
  170. package/switch/types.d.ts +4 -4
  171. package/table/Table.js +4 -23
  172. package/table/Table.test.js +1 -6
  173. package/table/types.d.ts +8 -8
  174. package/tabs/Tab.js +10 -29
  175. package/tabs/Tabs.js +48 -124
  176. package/tabs/Tabs.test.js +62 -118
  177. package/tabs/types.d.ts +19 -19
  178. package/tag/Tag.js +21 -51
  179. package/tag/Tag.test.js +19 -30
  180. package/tag/types.d.ts +7 -7
  181. package/text-input/Icons.d.ts +5 -5
  182. package/text-input/Icons.js +1 -5
  183. package/text-input/Suggestion.js +9 -26
  184. package/text-input/Suggestions.d.ts +1 -1
  185. package/text-input/Suggestions.js +12 -57
  186. package/text-input/TextInput.js +182 -263
  187. package/text-input/TextInput.stories.tsx +48 -152
  188. package/text-input/TextInput.test.js +1210 -1194
  189. package/text-input/types.d.ts +25 -17
  190. package/textarea/Textarea.js +60 -96
  191. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
  192. package/textarea/Textarea.test.js +150 -179
  193. package/textarea/types.d.ts +9 -5
  194. package/toggle-group/ToggleGroup.js +91 -105
  195. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  196. package/toggle-group/ToggleGroup.test.js +68 -87
  197. package/toggle-group/types.d.ts +26 -17
  198. package/typography/Typography.js +4 -13
  199. package/typography/types.d.ts +1 -1
  200. package/useTheme.d.ts +20 -3
  201. package/useTheme.js +1 -8
  202. package/useTranslatedLabels.js +1 -7
  203. package/utils/BaseTypography.d.ts +2 -2
  204. package/utils/BaseTypography.js +16 -30
  205. package/utils/FocusLock.js +12 -36
  206. package/wizard/Wizard.js +14 -49
  207. package/wizard/Wizard.test.js +53 -80
  208. package/wizard/types.d.ts +6 -6
  209. package/number-input/NumberInputContext.d.ts +0 -4
  210. package/number-input/NumberInputContext.js +0 -19
  211. package/number-input/numberInputContextTypes.d.ts +0 -19
  212. package/resultsetTable/Icons.d.ts +0 -7
  213. package/slider/Slider.stories.tsx +0 -240
  214. /package/{resultsetTable → image}/types.js +0 -0
  215. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  216. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  217. /package/{number-input/numberInputContextTypes.js → resultset-table/types.js} +0 -0
  218. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  219. /package/table/{Table.stories.jsx → Table.stories.tsx} +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,7 +65,6 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
81
65
  children: children
82
66
  })));
83
67
  });
84
-
85
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) {
@@ -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
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- 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,7 +17,7 @@ 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";
@@ -40,6 +40,7 @@ import DxcTypography from "./typography/Typography";
40
40
  import DxcParagraph from "./paragraph/Paragraph";
41
41
  import DxcBulletedList from "./bulleted-list/BulletedList";
42
42
  import DxcGrid from "./grid/Grid";
43
+ import DxcImage from "./image/Image";
43
44
  import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
44
45
  import { BackgroundColorProvider } from "./BackgroundColorContext";
45
- export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, };
46
+ export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, };
package/main.js CHANGED
@@ -1,9 +1,7 @@
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
  });
@@ -127,6 +125,12 @@ Object.defineProperty(exports, "DxcHeading", {
127
125
  return _Heading["default"];
128
126
  }
129
127
  });
128
+ Object.defineProperty(exports, "DxcImage", {
129
+ enumerable: true,
130
+ get: function get() {
131
+ return _Image["default"];
132
+ }
133
+ });
130
134
  Object.defineProperty(exports, "DxcInset", {
131
135
  enumerable: true,
132
136
  get: function get() {
@@ -283,95 +287,50 @@ Object.defineProperty(exports, "HalstackProvider", {
283
287
  return _HalstackContext.HalstackProvider;
284
288
  }
285
289
  });
286
-
287
290
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
288
-
289
291
  var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
290
-
291
292
  var _Button = _interopRequireDefault(require("./button/Button"));
292
-
293
293
  var _Card = _interopRequireDefault(require("./card/Card"));
294
-
295
294
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
296
-
297
295
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
298
-
299
296
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
300
-
301
297
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
302
-
303
298
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
304
-
305
299
  var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
306
-
307
300
  var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
308
-
309
301
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
310
-
311
302
  var _Table = _interopRequireDefault(require("./table/Table"));
312
-
313
303
  var _Box = _interopRequireDefault(require("./box/Box"));
314
-
315
304
  var _Tag = _interopRequireDefault(require("./tag/Tag"));
316
-
317
305
  var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
318
-
319
306
  var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
320
-
321
307
  var _Link = _interopRequireDefault(require("./link/Link"));
322
-
323
308
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
324
-
325
- var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
326
-
309
+ var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
327
310
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
328
-
329
311
  var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
330
-
331
312
  var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
332
-
333
313
  var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
334
-
335
314
  var _Badge = _interopRequireDefault(require("./badge/Badge"));
336
-
337
315
  var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
338
-
339
316
  var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
340
-
341
317
  var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
342
-
343
318
  var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
344
-
345
319
  var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
346
-
347
320
  var _Select = _interopRequireDefault(require("./select/Select"));
348
-
349
321
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
350
-
351
322
  var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
352
-
353
323
  var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
354
-
355
324
  var _Inset = _interopRequireDefault(require("./inset/Inset"));
356
-
357
325
  var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
358
-
359
326
  var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
360
-
361
327
  var _Flex = _interopRequireDefault(require("./flex/Flex"));
362
-
363
328
  var _Typography = _interopRequireDefault(require("./typography/Typography"));
364
-
365
329
  var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
366
-
367
330
  var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
368
-
369
331
  var _Grid = _interopRequireDefault(require("./grid/Grid"));
370
-
332
+ var _Image = _interopRequireDefault(require("./image/Image"));
371
333
  var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
372
-
373
334
  var _BackgroundColorContext = require("./BackgroundColorContext");
374
-
375
- 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); }
376
-
377
- 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; }
335
+ 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); }
336
+ 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,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
15
  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
-
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,39 +26,30 @@ 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
-
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;
72
49
  var _useState = (0, _react.useState)(null),
73
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
74
- innerFocusIndex = _useState2[0],
75
- setInnerFocusIndex = _useState2[1];
76
-
50
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
51
+ innerFocusIndex = _useState2[0],
52
+ setInnerFocusIndex = _useState2[1];
77
53
  var colorsTheme = (0, _useTheme["default"])();
78
54
  var contextValue = (0, _react.useMemo)(function () {
79
55
  return {
@@ -82,19 +58,16 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
82
58
  focusedLabel: innerFocusIndex === null ? undefined : getLabelFromTab(children[innerFocusIndex])
83
59
  };
84
60
  }, [iconPosition, tabIndex, innerFocusIndex]);
85
-
86
61
  var handleOnKeyDown = function handleOnKeyDown(event) {
87
62
  var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
88
63
  return getPropInChild(child, "active");
89
64
  });
90
-
91
65
  switch (event.key) {
92
66
  case "Left":
93
67
  case "ArrowLeft":
94
68
  event.preventDefault();
95
69
  setInnerFocusIndex(getPreviousTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
96
70
  break;
97
-
98
71
  case "Right":
99
72
  case "ArrowRight":
100
73
  event.preventDefault();
@@ -102,7 +75,6 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
102
75
  break;
103
76
  }
104
77
  };
105
-
106
78
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
107
79
  theme: colorsTheme.navTabs
108
80
  }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
@@ -113,10 +85,6 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
113
85
  value: contextValue
114
86
  }, children)));
115
87
  };
116
-
117
88
  DxcNavTabs.Tab = _Tab["default"];
118
-
119
89
  var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
120
-
121
- var _default = DxcNavTabs;
122
- exports["default"] = _default;
90
+ var _default = exports["default"] = DxcNavTabs;
@@ -5,7 +5,7 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
5
  import { HalstackProvider } from "../HalstackContext";
6
6
 
7
7
  export default {
8
- title: "NavTabs",
8
+ title: "Nav Tabs",
9
9
  component: DxcNavTabs,
10
10
  };
11
11