@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/wizard/Wizard.js CHANGED
@@ -1,34 +1,21 @@
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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
12
  var _react = _interopRequireWildcard(require("react"));
19
-
20
13
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
14
  var _variables = require("../common/variables");
23
-
24
15
  var _useTheme = _interopRequireDefault(require("../useTheme"));
25
-
26
16
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
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 || _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; }
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" != _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; }
32
19
  var icons = {
33
20
  validIcon: /*#__PURE__*/_react["default"].createElement("svg", {
34
21
  id: "check_circle_black_18dp",
@@ -80,38 +67,31 @@ var icons = {
80
67
  fill: "#d0011b"
81
68
  }))
82
69
  };
83
-
84
70
  var DxcWizard = function DxcWizard(_ref) {
85
71
  var _ref2;
86
-
87
72
  var _ref$mode = _ref.mode,
88
- mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
89
- defaultCurrentStep = _ref.defaultCurrentStep,
90
- currentStep = _ref.currentStep,
91
- onStepClick = _ref.onStepClick,
92
- steps = _ref.steps,
93
- margin = _ref.margin,
94
- _ref$tabIndex = _ref.tabIndex,
95
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
96
-
73
+ mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
74
+ defaultCurrentStep = _ref.defaultCurrentStep,
75
+ currentStep = _ref.currentStep,
76
+ onStepClick = _ref.onStepClick,
77
+ steps = _ref.steps,
78
+ margin = _ref.margin,
79
+ _ref$tabIndex = _ref.tabIndex,
80
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
97
81
  var _useState = (0, _react.useState)((_ref2 = currentStep !== null && currentStep !== void 0 ? currentStep : defaultCurrentStep) !== null && _ref2 !== void 0 ? _ref2 : 0),
98
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
99
- innerCurrent = _useState2[0],
100
- setInnerCurrentStep = _useState2[1];
101
-
82
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
83
+ innerCurrent = _useState2[0],
84
+ setInnerCurrentStep = _useState2[1];
102
85
  var renderedCurrent = currentStep == null ? innerCurrent : currentStep;
103
86
  var colorsTheme = (0, _useTheme["default"])();
104
-
105
87
  var handleStepClick = function handleStepClick(newValue) {
106
88
  if (currentStep == null) {
107
89
  setInnerCurrentStep(newValue);
108
90
  }
109
-
110
91
  if (onStepClick) {
111
92
  onStepClick(newValue);
112
93
  }
113
94
  };
114
-
115
95
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
116
96
  theme: colorsTheme.wizard
117
97
  }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
@@ -154,7 +134,6 @@ var DxcWizard = function DxcWizard(_ref) {
154
134
  }));
155
135
  })));
156
136
  };
157
-
158
137
  var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n justify-content: center;\n ", ";\n font-family: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
159
138
  return props.mode === "vertical" ? "column" : "row";
160
139
  }, function (props) {
@@ -172,7 +151,6 @@ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templ
172
151
  }, function (props) {
173
152
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
174
153
  });
175
-
176
154
  var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n ", "\n flex-grow: ", ";\n flex-direction: ", ";\n ", "\n"])), function (props) {
177
155
  return props.mode !== "vertical" && "align-items: center;";
178
156
  }, function (props) {
@@ -182,7 +160,6 @@ var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templ
182
160
  }, function (props) {
183
161
  return props.mode === "vertical" && "width: fit-content;";
184
162
  });
185
-
186
163
  var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: 0.25rem;\n background: inherit;\n margin: ", ";\n\n padding: 0px;\n ", ";\n\n &:hover {\n ", ";\n }\n &:focus {\n outline: 2px solid ", ";\n }\n"])), function (props) {
187
164
  return props.first ? props.mode === "vertical" ? "0 0 24px 0" : "0 24px 0 0" : props.last ? props.mode === "vertical" ? "24px 0 0 0" : "0 0 0 24px" : props.mode === "vertical" ? "24px 0" : "0 24px";
188
165
  }, function (props) {
@@ -192,11 +169,9 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
192
169
  }, function (props) {
193
170
  return props.theme.focusColor;
194
171
  });
195
-
196
172
  var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-flex;\n ", "\n"])), function (props) {
197
173
  return props.validityIcon && "padding-bottom: 4px;";
198
174
  });
199
-
200
175
  var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n\n ", "\n ", ";\n\n border-radius: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n"])), function (props) {
201
176
  return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
202
177
  }, function (props) {
@@ -208,19 +183,16 @@ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templ
208
183
  }, function (props) {
209
184
  return !props.current && !props.disabled ? props.theme.stepBorderRadius : props.current ? props.theme.selectedStepBorderRadius : props.disabled ? props.theme.disabledStepBorderRadius : "";
210
185
  });
211
-
212
186
  var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n"])), function (props) {
213
187
  return props.theme.stepIconSize;
214
188
  }, function (props) {
215
189
  return props.theme.stepIconSize;
216
190
  });
217
-
218
191
  var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
219
192
  return props.theme.stepIconSize;
220
193
  }, function (props) {
221
194
  return props.theme.stepIconSize;
222
195
  });
223
-
224
196
  var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n opacity: 1;\n margin: 0px 0px 0px 1px;\n"])), function (props) {
225
197
  return props.theme.stepFontSize;
226
198
  }, function (props) {
@@ -232,11 +204,8 @@ var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject
232
204
  }, function (props) {
233
205
  return props.theme.stepFontTracking;
234
206
  });
235
-
236
207
  var ValidityIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 18px;\n height: 18px;\n position: absolute;\n top: 22.5px;\n left: 22.5px;\n"])));
237
-
238
208
  var InfoContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"])));
239
-
240
209
  var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n ", ";\n text-transform: ", ";\n margin: 0;\n"])), function (props) {
241
210
  return props.theme.labelTextAlign;
242
211
  }, function (props) {
@@ -254,7 +223,6 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
254
223
  }, function (props) {
255
224
  return props.theme.labelFontTextTransform;
256
225
  });
257
-
258
226
  var Description = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n ", ";\n margin: 0;\n"])), function (props) {
259
227
  return props.theme.helperTextTextAlign;
260
228
  }, function (props) {
@@ -272,7 +240,6 @@ var Description = _styledComponents["default"].p(_templateObject12 || (_template
272
240
  }, function (props) {
273
241
  return props.disabled ? "color: ".concat(props.theme.disabledHelperTextFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedHelperTextFontColor : props.current ? props.theme.selectedHelperTextFontColor : props.theme.visitedHelperTextFontColor, ";");
274
242
  });
275
-
276
243
  var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n ", "\n border: ", ";\n opacity: 1;\n flex-grow: 1;\n"])), function (props) {
277
244
  return props.mode === "horizontal" ? "height: 0;" : "width: 0;";
278
245
  }, function (props) {
@@ -280,6 +247,4 @@ var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_temp
280
247
  }, function (props) {
281
248
  return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
282
249
  });
283
-
284
- var _default = DxcWizard;
285
- exports["default"] = _default;
250
+ var _default = exports["default"] = DxcWizard;
@@ -1,25 +1,20 @@
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 _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
10
-
11
7
  describe("Wizard components tests", function () {
12
8
  test("Wizard renders with correct steps", function () {
13
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
14
- steps: [{
15
- label: "first-step"
16
- }, {
17
- label: "second-step"
18
- }]
19
- })),
20
- getByText = _render.getByText,
21
- getAllByRole = _render.getAllByRole;
22
-
10
+ steps: [{
11
+ label: "first-step"
12
+ }, {
13
+ label: "second-step"
14
+ }]
15
+ })),
16
+ getByText = _render.getByText,
17
+ getAllByRole = _render.getAllByRole;
23
18
  var steps = getAllByRole("button");
24
19
  expect(getByText("first-step")).toBeTruthy();
25
20
  expect(getByText("second-step")).toBeTruthy();
@@ -28,112 +23,90 @@ describe("Wizard components tests", function () {
28
23
  });
29
24
  test("Wizard renders with initially selected step", function () {
30
25
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
31
- defaultCurrentStep: 1,
32
- steps: [{
33
- label: "first-step"
34
- }, {
35
- label: "second-step"
36
- }]
37
- })),
38
- getAllByRole = _render2.getAllByRole;
39
-
26
+ defaultCurrentStep: 1,
27
+ steps: [{
28
+ label: "first-step"
29
+ }, {
30
+ label: "second-step"
31
+ }]
32
+ })),
33
+ getAllByRole = _render2.getAllByRole;
40
34
  var steps = getAllByRole("button");
41
35
  expect(steps[1].getAttribute("aria-current")).toBe("step");
42
36
  });
43
37
  test("Click on step text", function () {
44
38
  var onClick = jest.fn();
45
-
46
39
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
47
- onStepClick: onClick,
48
- steps: [{
49
- label: "first-step"
50
- }]
51
- })),
52
- getByText = _render3.getByText;
53
-
40
+ onStepClick: onClick,
41
+ steps: [{
42
+ label: "first-step"
43
+ }]
44
+ })),
45
+ getByText = _render3.getByText;
54
46
  var step = getByText("first-step");
55
-
56
47
  _react2.fireEvent.click(step);
57
-
58
48
  expect(onClick).toHaveBeenCalled();
59
49
  });
60
50
  test("Click on step description", function () {
61
51
  var onClick = jest.fn();
62
-
63
52
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
64
- onStepClick: onClick,
65
- steps: [{
66
- label: "first-step",
67
- description: "step-description"
68
- }]
69
- })),
70
- getByText = _render4.getByText;
71
-
53
+ onStepClick: onClick,
54
+ steps: [{
55
+ label: "first-step",
56
+ description: "step-description"
57
+ }]
58
+ })),
59
+ getByText = _render4.getByText;
72
60
  var step = getByText("step-description");
73
-
74
61
  _react2.fireEvent.click(step);
75
-
76
62
  expect(onClick).toHaveBeenCalled();
77
63
  });
78
64
  test("Click on step number", function () {
79
65
  var onClick = jest.fn();
80
-
81
66
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
82
- onStepClick: onClick,
83
- steps: [{
84
- label: "first-step"
85
- }]
86
- })),
87
- getByText = _render5.getByText;
88
-
67
+ onStepClick: onClick,
68
+ steps: [{
69
+ label: "first-step"
70
+ }]
71
+ })),
72
+ getByText = _render5.getByText;
89
73
  var step = getByText("1");
90
-
91
74
  _react2.fireEvent.click(step);
92
-
93
75
  expect(onClick).toHaveBeenCalled();
94
76
  });
95
77
  test("Click on disable step", function () {
96
78
  var onClick = jest.fn();
97
-
98
79
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
99
- onStepClick: onClick,
100
- steps: [{
101
- label: "first-step"
102
- }, {
103
- label: "second-step",
104
- disabled: true
105
- }]
106
- })),
107
- getByText = _render6.getByText;
108
-
80
+ onStepClick: onClick,
81
+ steps: [{
82
+ label: "first-step"
83
+ }, {
84
+ label: "second-step",
85
+ disabled: true
86
+ }]
87
+ })),
88
+ getByText = _render6.getByText;
109
89
  var step = getByText("second-step");
110
-
111
90
  _react2.fireEvent.click(step);
112
-
113
91
  expect(onClick).toHaveBeenCalledTimes(0);
114
92
  });
115
93
  test("Controlled wizard function is called", function () {
116
94
  var onClick = jest.fn(function (i) {
117
95
  return i;
118
96
  });
119
-
120
97
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
121
- currentStep: 0,
122
- onStepClick: onClick,
123
- steps: [{
124
- label: "first-step"
125
- }, {
126
- label: "second-step"
127
- }]
128
- })),
129
- getAllByRole = _render7.getAllByRole;
130
-
98
+ currentStep: 0,
99
+ onStepClick: onClick,
100
+ steps: [{
101
+ label: "first-step"
102
+ }, {
103
+ label: "second-step"
104
+ }]
105
+ })),
106
+ getAllByRole = _render7.getAllByRole;
131
107
  var steps = getAllByRole("button");
132
-
133
108
  _react2.fireEvent.click(steps[1]);
134
-
135
109
  _react2.fireEvent.click(steps[0]);
136
-
137
110
  expect(onClick).toHaveBeenCalledTimes(2);
138
111
  expect(onClick).toHaveBeenNthCalledWith(1, 1);
139
112
  expect(onClick).toHaveBeenNthCalledWith(2, 0);
package/wizard/types.d.ts CHANGED
@@ -1,13 +1,13 @@
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 StepProps = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type StepProps = {
11
11
  /**
12
12
  * Step label.
13
13
  */
@@ -29,7 +29,7 @@ export declare type StepProps = {
29
29
  */
30
30
  valid?: boolean;
31
31
  };
32
- declare type Props = {
32
+ type Props = {
33
33
  /**
34
34
  * The wizard can be showed in horizontal or vertical.
35
35
  */
@@ -46,7 +46,7 @@ declare type Props = {
46
46
  * This function will be called when the user clicks a step. The step
47
47
  * number will be passed as a parameter.
48
48
  */
49
- onStepClick?: (newCurrentStep: number) => void;
49
+ onStepClick?: (currentStep: number) => void;
50
50
  /**
51
51
  * An array of objects representing the steps.
52
52
  */
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import NumberInputContextPropsType from "./numberInputContextTypes";
3
- declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
4
- export default NumberInputContext;
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var defaultState = {
13
- stepNumber: 1
14
- };
15
-
16
- var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
17
-
18
- var _default = NumberInputContext;
19
- exports["default"] = _default;
@@ -1,19 +0,0 @@
1
- declare type Props = {
2
- /**
3
- * Type of the input.
4
- */
5
- typeNumber?: string;
6
- /**
7
- * Minimum value allowed by the number input.
8
- */
9
- minNumber?: number;
10
- /**
11
- * Maximum value allowed by the number input.
12
- */
13
- maxNumber?: number;
14
- /**
15
- * The step interval to use when using the up and down arrows to adjust the value.
16
- */
17
- stepNumber?: number;
18
- };
19
- export default Props;
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- declare const icons: {
3
- arrowUp: JSX.Element;
4
- arrowDown: JSX.Element;
5
- bothArrows: JSX.Element;
6
- };
7
- export default icons;