@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
@@ -1,108 +1,91 @@
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 _ProgressBar = _interopRequireDefault(require("./ProgressBar.tsx"));
10
-
11
7
  describe("ProgressBar component tests", function () {
12
8
  test("ProgressBar renders with label and helperText", function () {
13
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
14
- label: "test-label",
15
- helperText: "helper-text"
16
- })),
17
- getByText = _render.getByText;
18
-
10
+ label: "test-label",
11
+ helperText: "helper-text"
12
+ })),
13
+ getByText = _render.getByText;
19
14
  expect(getByText("test-label")).toBeTruthy();
20
15
  expect(getByText("helper-text")).toBeTruthy();
21
16
  });
22
17
  test("ProgressBar renders with default value", function () {
23
18
  var value = 0;
24
-
25
19
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
26
- showValue: true
27
- })),
28
- getByText = _render2.getByText,
29
- getByRole = _render2.getByRole;
30
-
20
+ showValue: true
21
+ })),
22
+ getByText = _render2.getByText,
23
+ getByRole = _render2.getByRole;
31
24
  var progressBar = getByRole("progressbar");
32
25
  expect(getByText("0 %")).toBeTruthy();
33
26
  expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
34
27
  });
35
28
  test("ProgressBar renders with value", function () {
36
29
  var value = 25;
37
-
38
30
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
39
- showValue: true,
40
- value: value
41
- })),
42
- getByText = _render3.getByText,
43
- getByRole = _render3.getByRole;
44
-
31
+ showValue: true,
32
+ value: value
33
+ })),
34
+ getByText = _render3.getByText,
35
+ getByRole = _render3.getByRole;
45
36
  var progressBar = getByRole("progressbar");
46
37
  expect(getByText("25 %")).toBeTruthy();
47
38
  expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
48
39
  });
49
40
  test("ProgressBar renders with negative value", function () {
50
41
  var value = 0;
51
-
52
42
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
53
- showValue: true,
54
- value: -20
55
- })),
56
- getByText = _render4.getByText,
57
- getByRole = _render4.getByRole;
58
-
43
+ showValue: true,
44
+ value: -20
45
+ })),
46
+ getByText = _render4.getByText,
47
+ getByRole = _render4.getByRole;
59
48
  var progressBar = getByRole("progressbar");
60
49
  expect(getByText("0 %")).toBeTruthy();
61
50
  expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
62
51
  });
63
52
  test("ProgressBar renders as indeterminate", function () {
64
53
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], null)),
65
- getByRole = _render5.getByRole;
66
-
54
+ getByRole = _render5.getByRole;
67
55
  var progressBar = getByRole("progressbar");
68
56
  expect(progressBar.getAttribute("aria-valuenow")).toBe(null);
69
57
  });
70
58
  test("Overlay progressBar renders with label and helperText", function () {
71
59
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
72
- label: "test-label",
73
- helperText: "helper-text",
74
- overlay: true
75
- })),
76
- getByText = _render6.getByText;
77
-
60
+ label: "test-label",
61
+ helperText: "helper-text",
62
+ overlay: true
63
+ })),
64
+ getByText = _render6.getByText;
78
65
  expect(getByText("test-label")).toBeTruthy();
79
66
  expect(getByText("helper-text")).toBeTruthy();
80
67
  });
81
68
  test("Overlay progressBar renders with default value", function () {
82
69
  var value = 0;
83
-
84
70
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
85
- showValue: true,
86
- overlay: true
87
- })),
88
- getByText = _render7.getByText,
89
- getByRole = _render7.getByRole;
90
-
71
+ showValue: true,
72
+ overlay: true
73
+ })),
74
+ getByText = _render7.getByText,
75
+ getByRole = _render7.getByRole;
91
76
  var progressBar = getByRole("progressbar");
92
77
  expect(getByText("0 %")).toBeTruthy();
93
78
  expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
94
79
  });
95
80
  test("Overlay progressBar renders with value", function () {
96
81
  var value = 25;
97
-
98
82
  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
99
- showValue: true,
100
- value: value,
101
- overlay: true
102
- })),
103
- getByText = _render8.getByText,
104
- getByRole = _render8.getByRole;
105
-
83
+ showValue: true,
84
+ value: value,
85
+ overlay: true
86
+ })),
87
+ getByText = _render8.getByText,
88
+ getByRole = _render8.getByRole;
106
89
  var progressBar = getByRole("progressbar");
107
90
  expect(getByText("25 %")).toBeTruthy();
108
91
  expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
@@ -1,11 +1,11 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Size = {
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Size = {
3
3
  top?: Space;
4
4
  bottom?: Space;
5
5
  left?: Space;
6
6
  right?: Space;
7
7
  };
8
- declare type Props = {
8
+ type Props = {
9
9
  /**
10
10
  * Text to be placed above the progress bar.
11
11
  */
@@ -1,43 +1,27 @@
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"] = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _react = _interopRequireDefault(require("react"));
15
-
16
11
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
-
18
12
  var _slugify = _interopRequireDefault(require("slugify"));
19
-
20
13
  var _useTheme = _interopRequireDefault(require("../useTheme"));
21
-
22
14
  var _Heading = _interopRequireDefault(require("../heading/Heading"));
23
-
24
15
  var _Flex = _interopRequireDefault(require("../flex/Flex"));
25
-
26
16
  var _Inset = _interopRequireDefault(require("../inset/Inset"));
27
-
28
17
  var _Typography = _interopRequireDefault(require("../typography/Typography"));
29
-
30
18
  var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
31
-
32
19
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
33
-
34
- 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); }
35
-
36
- 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; }
37
-
20
+ 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); }
21
+ 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; }
38
22
  var DxcQuickNav = function DxcQuickNav(_ref) {
39
23
  var title = _ref.title,
40
- links = _ref.links;
24
+ links = _ref.links;
41
25
  var translatedLabels = (0, _useTranslatedLabels["default"])();
42
26
  var colorsTheme = (0, _useTheme["default"])();
43
27
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
@@ -50,7 +34,6 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
50
34
  text: title || translatedLabels.quickNav.contentTitle
51
35
  }), /*#__PURE__*/_react["default"].createElement(ListColumn, null, links.map(function (link) {
52
36
  var _link$links;
53
-
54
37
  return /*#__PURE__*/_react["default"].createElement("li", {
55
38
  key: link.label
56
39
  }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
@@ -74,7 +57,6 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
74
57
  })))));
75
58
  })))));
76
59
  };
77
-
78
60
  var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n border-left: 2px solid ", ";\n"])), function (props) {
79
61
  return props.theme.paddingTop;
80
62
  }, function (props) {
@@ -86,11 +68,8 @@ var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_te
86
68
  }, function (props) {
87
69
  return props.theme.dividerBorderColor;
88
70
  });
89
-
90
71
  var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0;\n padding: 0;\n list-style-type: none;\n"])));
91
-
92
72
  var ListSecondColumn = _styledComponents["default"].ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style-type: none;\n"])));
93
-
94
73
  var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n display: block;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n\n &:hover {\n color: ", ";\n }\n &:focus {\n outline-color: ", ";\n outline-style: ", ";\n outline-width: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
95
74
  return props.theme.fontSize;
96
75
  }, function (props) {
@@ -112,6 +91,4 @@ var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4
112
91
  }, function (props) {
113
92
  return props.theme.focusBorderRadius;
114
93
  });
115
-
116
- var _default = DxcQuickNav;
117
- exports["default"] = _default;
94
+ var _default = exports["default"] = DxcQuickNav;
@@ -8,7 +8,7 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
8
8
  import { HalstackProvider } from "../HalstackContext";
9
9
 
10
10
  export default {
11
- title: "QuickNav",
11
+ title: "Quick Nav",
12
12
  component: DxcQuickNav,
13
13
  };
14
14
 
@@ -1,21 +1,21 @@
1
- declare type Props = {
1
+ type Link = {
2
2
  /**
3
- * Title of the quick nav component.
3
+ * Label to be shown in the link.
4
4
  */
5
- title?: string;
5
+ label: string;
6
6
  /**
7
- * Links to be shown inside the quick nav component.
7
+ * Sublinks of the link.
8
8
  */
9
- links: LinkType[];
9
+ links?: Link[];
10
10
  };
11
- declare type LinkType = {
11
+ type Props = {
12
12
  /**
13
- * Label to be shown in the link.
13
+ * Title of the quick nav component.
14
14
  */
15
- label: string;
15
+ title?: string;
16
16
  /**
17
- * Sublinks of the link.
17
+ * Links to be shown inside the quick nav component.
18
18
  */
19
- links?: LinkType[];
19
+ links: Link[];
20
20
  };
21
21
  export default Props;
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { RadioProps } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ label, checked, onClick, error, disabled, focused, readonly, tabIndex, }: RadioProps) => JSX.Element>;
3
+ declare const _default: React.MemoExoticComponent<({ label, checked, onClick, error, disabled, focused, readOnly, tabIndex, }: RadioProps) => JSX.Element>;
4
4
  export default _default;
@@ -1,72 +1,51 @@
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"] = 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 _uuid = require("uuid");
21
-
22
14
  var _useTheme = _interopRequireDefault(require("../useTheme"));
23
-
24
15
  var _Flex = _interopRequireDefault(require("../flex/Flex"));
25
-
26
16
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
27
-
28
- 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); }
29
-
30
- 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; }
31
-
17
+ 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); }
18
+ 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; }
32
19
  var DxcRadio = function DxcRadio(_ref) {
33
20
  var label = _ref.label,
34
- checked = _ref.checked,
35
- onClick = _ref.onClick,
36
- error = _ref.error,
37
- disabled = _ref.disabled,
38
- focused = _ref.focused,
39
- readonly = _ref.readonly,
40
- tabIndex = _ref.tabIndex;
41
-
21
+ checked = _ref.checked,
22
+ onClick = _ref.onClick,
23
+ error = _ref.error,
24
+ disabled = _ref.disabled,
25
+ focused = _ref.focused,
26
+ readOnly = _ref.readOnly,
27
+ tabIndex = _ref.tabIndex;
42
28
  var _useState = (0, _react.useState)("radio-".concat((0, _uuid.v4)())),
43
- _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
44
- radioLabelId = _useState2[0];
45
-
29
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
30
+ radioLabelId = _useState2[0];
46
31
  var ref = (0, _react.useRef)(null);
47
32
  var colorsTheme = (0, _useTheme["default"])();
48
-
49
33
  var handleOnClick = function handleOnClick() {
50
34
  var _ref$current;
51
-
52
35
  onClick();
53
36
  document.activeElement !== (ref === null || ref === void 0 ? void 0 : ref.current) && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
54
37
  };
55
-
56
38
  var _useState3 = (0, _react.useState)(true),
57
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
58
- firstUpdate = _useState4[0],
59
- setFirstUpdate = _useState4[1];
60
-
39
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
40
+ firstUpdate = _useState4[0],
41
+ setFirstUpdate = _useState4[1];
61
42
  (0, _react.useEffect)(function () {
62
43
  var _ref$current2;
63
-
64
44
  // Don't apply in the first render
65
45
  if (firstUpdate) {
66
46
  setFirstUpdate(false);
67
47
  return;
68
48
  }
69
-
70
49
  focused && (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus());
71
50
  }, [focused]);
72
51
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
@@ -74,12 +53,12 @@ var DxcRadio = function DxcRadio(_ref) {
74
53
  }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
75
54
  error: error,
76
55
  disabled: disabled,
77
- readonly: readonly,
56
+ readOnly: readOnly,
78
57
  onClick: disabled ? undefined : handleOnClick
79
58
  }, /*#__PURE__*/_react["default"].createElement(RadioInputContainer, null, /*#__PURE__*/_react["default"].createElement(RadioInput, {
80
59
  error: error,
81
60
  disabled: disabled,
82
- readonly: readonly,
61
+ readOnly: readOnly,
83
62
  role: "radio",
84
63
  "aria-checked": checked,
85
64
  "aria-disabled": disabled,
@@ -88,29 +67,24 @@ var DxcRadio = function DxcRadio(_ref) {
88
67
  ref: ref
89
68
  }, checked && /*#__PURE__*/_react["default"].createElement(Dot, {
90
69
  disabled: disabled,
91
- readonly: readonly,
70
+ readOnly: readOnly,
92
71
  error: error
93
72
  }))), /*#__PURE__*/_react["default"].createElement(Label, {
94
73
  id: radioLabelId,
95
74
  disabled: disabled
96
75
  }, label))));
97
76
  };
98
-
99
77
  var getRadioInputStateColor = function getRadioInputStateColor(props, state) {
100
78
  switch (state) {
101
79
  case "enabled":
102
- return props.disabled ? props.theme.disabledRadioInputColor : props.error ? props.theme.errorRadioInputColor : props.readonly ? props.theme.readonlyRadioInputColor : props.theme.radioInputColor;
103
-
80
+ return props.disabled ? props.theme.disabledRadioInputColor : props.error ? props.theme.errorRadioInputColor : props.readOnly ? props.theme.readOnlyRadioInputColor : props.theme.radioInputColor;
104
81
  case "hover":
105
- return props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor;
106
-
82
+ return props.error ? props.theme.hoverErrorRadioInputColor : props.readOnly ? props.theme.hoverReadOnlyRadioInputColor : props.theme.hoverRadioInputColor;
107
83
  case "active":
108
- return props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor;
84
+ return props.error ? props.theme.activeErrorRadioInputColor : props.readOnly ? props.theme.activeReadOnlyRadioInputColor : props.theme.activeRadioInputColor;
109
85
  }
110
86
  };
111
-
112
87
  var RadioInputContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n"])));
113
-
114
88
  var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: 2px solid ", ";\n border-radius: 50%;\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n ", "\n"])), function (props) {
115
89
  return getRadioInputStateColor(props, "enabled");
116
90
  }, function (props) {
@@ -118,11 +92,9 @@ var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templat
118
92
  }, function (props) {
119
93
  return props.disabled && "pointer-events: none;";
120
94
  });
121
-
122
95
  var Dot = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n height: 10px;\n width: 10px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (props) {
123
96
  return getRadioInputStateColor(props, "enabled");
124
97
  });
125
-
126
98
  var Label = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
127
99
  return props.theme.radioInputLabelMargin;
128
100
  }, function (props) {
@@ -138,9 +110,8 @@ var Label = _styledComponents["default"].span(_templateObject4 || (_templateObje
138
110
  }, function (props) {
139
111
  return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, ";") : "color: ".concat(props.theme.radioInputLabelFontColor);
140
112
  });
141
-
142
113
  var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n\n &:hover {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n &:active {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n"])), function (props) {
143
- return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
114
+ return props.disabled ? "not-allowed" : props.readOnly ? "default" : "pointer";
144
115
  }, RadioInput, function (props) {
145
116
  return !props.disabled && getRadioInputStateColor(props, "hover");
146
117
  }, Dot, function (props) {
@@ -150,7 +121,4 @@ var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_tem
150
121
  }, Dot, function (props) {
151
122
  return !props.disabled && getRadioInputStateColor(props, "active");
152
123
  });
153
-
154
- var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);
155
-
156
- exports["default"] = _default;
124
+ var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(DxcRadio);