@dxc-technology/halstack-react 0.0.0-b4fde6b → 0.0.0-b5ec444

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 (257) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +51 -138
  4. package/HalstackContext.js +10 -35
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +24 -76
  8. package/accordion/Accordion.stories.tsx +1 -113
  9. package/accordion/Accordion.test.js +18 -33
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.js +15 -42
  12. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  13. package/accordion-group/AccordionGroup.test.js +43 -71
  14. package/accordion-group/AccordionGroupAccordion.js +9 -21
  15. package/accordion-group/types.d.ts +6 -18
  16. package/action-icon/ActionIcon.d.ts +4 -0
  17. package/action-icon/ActionIcon.js +47 -0
  18. package/action-icon/ActionIcon.stories.tsx +41 -0
  19. package/action-icon/ActionIcon.test.js +64 -0
  20. package/action-icon/types.d.ts +26 -0
  21. package/alert/Alert.js +15 -50
  22. package/alert/Alert.test.js +28 -45
  23. package/alert/types.d.ts +5 -5
  24. package/badge/Badge.d.ts +1 -1
  25. package/badge/Badge.js +141 -43
  26. package/badge/Badge.stories.tsx +210 -0
  27. package/badge/Badge.test.js +30 -0
  28. package/badge/types.d.ts +52 -3
  29. package/bleed/Bleed.js +13 -21
  30. package/bleed/types.d.ts +2 -2
  31. package/box/Box.js +11 -33
  32. package/box/Box.test.js +1 -6
  33. package/box/types.d.ts +3 -3
  34. package/bulleted-list/BulletedList.js +18 -54
  35. package/bulleted-list/BulletedList.stories.tsx +1 -92
  36. package/bulleted-list/types.d.ts +5 -5
  37. package/button/Button.d.ts +1 -1
  38. package/button/Button.js +66 -99
  39. package/button/Button.stories.tsx +6 -87
  40. package/button/Button.test.js +19 -16
  41. package/button/types.d.ts +8 -4
  42. package/card/Card.d.ts +1 -1
  43. package/card/Card.js +39 -79
  44. package/card/Card.stories.tsx +0 -29
  45. package/card/Card.test.js +10 -21
  46. package/card/types.d.ts +6 -12
  47. package/checkbox/Checkbox.js +85 -120
  48. package/checkbox/Checkbox.stories.tsx +16 -54
  49. package/checkbox/Checkbox.test.js +107 -63
  50. package/checkbox/types.d.ts +8 -4
  51. package/chip/Chip.js +12 -31
  52. package/chip/Chip.stories.tsx +1 -1
  53. package/chip/Chip.test.js +15 -28
  54. package/chip/types.d.ts +4 -4
  55. package/common/coreTokens.d.ts +105 -14
  56. package/common/coreTokens.js +41 -24
  57. package/common/utils.js +2 -8
  58. package/common/variables.d.ts +51 -138
  59. package/common/variables.js +61 -155
  60. package/container/Container.d.ts +4 -0
  61. package/container/Container.js +194 -0
  62. package/container/Container.stories.tsx +214 -0
  63. package/container/types.d.ts +74 -0
  64. package/date-input/Calendar.js +15 -59
  65. package/date-input/DateInput.js +50 -96
  66. package/date-input/DateInput.stories.tsx +11 -30
  67. package/date-input/DateInput.test.js +674 -701
  68. package/date-input/DatePicker.js +11 -42
  69. package/date-input/Icons.d.ts +6 -6
  70. package/date-input/Icons.js +6 -23
  71. package/date-input/YearPicker.js +8 -34
  72. package/date-input/types.d.ts +27 -21
  73. package/dialog/Dialog.js +13 -40
  74. package/dialog/Dialog.stories.tsx +170 -0
  75. package/dialog/Dialog.test.js +125 -187
  76. package/dialog/types.d.ts +18 -13
  77. package/dropdown/Dropdown.js +48 -100
  78. package/dropdown/Dropdown.test.js +391 -378
  79. package/dropdown/DropdownMenu.js +8 -19
  80. package/dropdown/DropdownMenuItem.js +5 -17
  81. package/dropdown/types.d.ts +17 -19
  82. package/file-input/FileInput.js +180 -248
  83. package/file-input/FileInput.stories.tsx +1 -1
  84. package/file-input/FileInput.test.js +356 -354
  85. package/file-input/FileItem.js +14 -41
  86. package/file-input/types.d.ts +10 -10
  87. package/flex/Flex.js +25 -39
  88. package/flex/types.d.ts +6 -6
  89. package/footer/Footer.d.ts +1 -1
  90. package/footer/Footer.js +70 -102
  91. package/footer/Footer.stories.tsx +37 -6
  92. package/footer/Footer.test.js +21 -33
  93. package/footer/Icons.d.ts +3 -2
  94. package/footer/Icons.js +66 -7
  95. package/footer/types.d.ts +25 -21
  96. package/grid/Grid.d.ts +1 -1
  97. package/grid/Grid.js +2 -17
  98. package/grid/Grid.stories.tsx +38 -38
  99. package/grid/types.d.ts +10 -10
  100. package/header/Header.d.ts +2 -2
  101. package/header/Header.js +31 -114
  102. package/header/Header.stories.tsx +7 -71
  103. package/header/Header.test.js +12 -25
  104. package/header/Icons.d.ts +2 -2
  105. package/header/Icons.js +2 -7
  106. package/header/types.d.ts +5 -20
  107. package/heading/Heading.js +9 -31
  108. package/heading/Heading.test.js +70 -87
  109. package/heading/types.d.ts +7 -7
  110. package/image/Image.d.ts +4 -0
  111. package/image/Image.js +70 -0
  112. package/image/Image.stories.tsx +127 -0
  113. package/image/types.d.ts +72 -0
  114. package/image/types.js +5 -0
  115. package/inset/Inset.js +13 -21
  116. package/inset/types.d.ts +2 -2
  117. package/layout/ApplicationLayout.d.ts +3 -3
  118. package/layout/ApplicationLayout.js +28 -65
  119. package/layout/ApplicationLayout.stories.tsx +1 -1
  120. package/layout/Icons.d.ts +8 -5
  121. package/layout/Icons.js +51 -59
  122. package/layout/SidenavContext.d.ts +1 -1
  123. package/layout/SidenavContext.js +3 -9
  124. package/layout/types.d.ts +3 -3
  125. package/link/Link.js +21 -42
  126. package/link/Link.test.js +23 -41
  127. package/link/types.d.ts +14 -14
  128. package/main.d.ts +6 -4
  129. package/main.js +25 -59
  130. package/nav-tabs/NavTabs.js +17 -46
  131. package/nav-tabs/NavTabs.stories.tsx +7 -5
  132. package/nav-tabs/NavTabs.test.js +38 -44
  133. package/nav-tabs/Tab.js +22 -50
  134. package/nav-tabs/types.d.ts +9 -9
  135. package/number-input/NumberInput.d.ts +7 -0
  136. package/number-input/NumberInput.js +47 -37
  137. package/number-input/NumberInput.stories.tsx +42 -26
  138. package/number-input/NumberInput.test.js +859 -412
  139. package/number-input/types.d.ts +11 -5
  140. package/package.json +30 -28
  141. package/paginator/Icons.d.ts +5 -5
  142. package/paginator/Icons.js +5 -19
  143. package/paginator/Paginator.js +15 -43
  144. package/paginator/Paginator.test.js +224 -207
  145. package/paginator/types.d.ts +3 -3
  146. package/paragraph/Paragraph.js +3 -19
  147. package/paragraph/Paragraph.stories.tsx +0 -17
  148. package/password-input/Icons.d.ts +6 -0
  149. package/password-input/Icons.js +35 -0
  150. package/password-input/PasswordInput.js +57 -126
  151. package/password-input/PasswordInput.stories.tsx +1 -33
  152. package/password-input/PasswordInput.test.js +157 -140
  153. package/password-input/types.d.ts +8 -7
  154. package/progress-bar/ProgressBar.js +21 -53
  155. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  156. package/progress-bar/ProgressBar.test.js +35 -52
  157. package/progress-bar/types.d.ts +3 -3
  158. package/quick-nav/QuickNav.js +4 -27
  159. package/quick-nav/QuickNav.stories.tsx +1 -1
  160. package/quick-nav/types.d.ts +10 -10
  161. package/radio-group/Radio.d.ts +1 -1
  162. package/radio-group/Radio.js +22 -54
  163. package/radio-group/RadioGroup.js +37 -83
  164. package/radio-group/RadioGroup.stories.tsx +10 -10
  165. package/radio-group/RadioGroup.test.js +504 -470
  166. package/radio-group/types.d.ts +8 -8
  167. package/resultset-table/Icons.d.ts +7 -0
  168. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  169. package/resultset-table/ResultsetTable.d.ts +7 -0
  170. package/{resultsetTable → resultset-table}/ResultsetTable.js +36 -64
  171. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +102 -5
  172. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +138 -92
  173. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  174. package/resultset-table/types.js +5 -0
  175. package/select/Icons.d.ts +7 -7
  176. package/select/Icons.js +1 -5
  177. package/select/Listbox.js +13 -39
  178. package/select/Option.js +17 -27
  179. package/select/Select.js +87 -163
  180. package/select/Select.stories.tsx +3 -3
  181. package/select/Select.test.js +1946 -1804
  182. package/select/types.d.ts +14 -15
  183. package/sidenav/Icons.d.ts +4 -4
  184. package/sidenav/Icons.js +1 -5
  185. package/sidenav/Sidenav.js +26 -68
  186. package/sidenav/Sidenav.test.js +3 -10
  187. package/sidenav/types.d.ts +18 -18
  188. package/slider/Slider.js +68 -125
  189. package/slider/Slider.test.js +107 -103
  190. package/slider/types.d.ts +4 -4
  191. package/spinner/Spinner.js +16 -54
  192. package/spinner/Spinner.test.js +25 -34
  193. package/spinner/types.d.ts +3 -3
  194. package/status-light/StatusLight.d.ts +4 -0
  195. package/status-light/StatusLight.js +51 -0
  196. package/status-light/StatusLight.stories.tsx +74 -0
  197. package/status-light/StatusLight.test.js +25 -0
  198. package/status-light/types.d.ts +17 -0
  199. package/status-light/types.js +5 -0
  200. package/switch/Switch.js +49 -97
  201. package/switch/Switch.stories.tsx +0 -34
  202. package/switch/Switch.test.js +51 -96
  203. package/switch/types.d.ts +4 -4
  204. package/table/ActionsCell.d.ts +4 -0
  205. package/table/ActionsCell.js +68 -0
  206. package/table/DropdownTheme.js +62 -0
  207. package/table/Table.d.ts +4 -1
  208. package/table/Table.js +24 -30
  209. package/table/{Table.stories.jsx → Table.stories.tsx} +304 -2
  210. package/table/Table.test.js +93 -6
  211. package/table/types.d.ts +45 -6
  212. package/tabs/Tab.js +17 -33
  213. package/tabs/Tabs.js +52 -129
  214. package/tabs/Tabs.stories.tsx +1 -1
  215. package/tabs/Tabs.test.js +62 -118
  216. package/tabs/types.d.ts +19 -19
  217. package/tag/Tag.js +21 -51
  218. package/tag/Tag.test.js +19 -30
  219. package/tag/types.d.ts +7 -7
  220. package/text-input/Icons.d.ts +5 -5
  221. package/text-input/Icons.js +1 -5
  222. package/text-input/Suggestion.js +9 -26
  223. package/text-input/Suggestions.d.ts +1 -1
  224. package/text-input/Suggestions.js +15 -65
  225. package/text-input/TextInput.js +218 -326
  226. package/text-input/TextInput.stories.tsx +48 -152
  227. package/text-input/TextInput.test.js +1227 -1194
  228. package/text-input/types.d.ts +25 -17
  229. package/textarea/Textarea.js +67 -109
  230. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  231. package/textarea/Textarea.test.js +150 -179
  232. package/textarea/types.d.ts +9 -5
  233. package/toggle-group/ToggleGroup.js +90 -107
  234. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  235. package/toggle-group/ToggleGroup.test.js +68 -87
  236. package/toggle-group/types.d.ts +26 -17
  237. package/typography/Typography.js +4 -13
  238. package/typography/types.d.ts +1 -1
  239. package/useTheme.d.ts +48 -135
  240. package/useTheme.js +1 -8
  241. package/useTranslatedLabels.js +1 -7
  242. package/utils/BaseTypography.d.ts +2 -2
  243. package/utils/BaseTypography.js +16 -30
  244. package/utils/FocusLock.js +25 -39
  245. package/wizard/Wizard.js +14 -49
  246. package/wizard/Wizard.test.js +53 -80
  247. package/wizard/types.d.ts +6 -6
  248. package/card/ice-cream.jpg +0 -0
  249. package/number-input/NumberInputContext.d.ts +0 -4
  250. package/number-input/NumberInputContext.js +0 -19
  251. package/number-input/numberInputContextTypes.d.ts +0 -19
  252. package/resultsetTable/Icons.d.ts +0 -7
  253. package/resultsetTable/ResultsetTable.d.ts +0 -4
  254. package/slider/Slider.stories.tsx +0 -240
  255. /package/{resultsetTable → action-icon}/types.js +0 -0
  256. /package/{number-input/numberInputContextTypes.js → container/types.js} +0 -0
  257. /package/spinner/{Spinner.stories.jsx → Spinner.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);