@dxc-technology/halstack-react 0.0.0-b41d935 → 0.0.0-b4aec06

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 (329) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1243 -6
  4. package/HalstackContext.js +126 -111
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +42 -118
  8. package/accordion/Accordion.stories.tsx +85 -139
  9. package/accordion/Accordion.test.js +19 -34
  10. package/accordion/types.d.ts +6 -18
  11. package/accordion-group/AccordionGroup.d.ts +2 -2
  12. package/accordion-group/AccordionGroup.js +29 -77
  13. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  14. package/accordion-group/AccordionGroup.test.js +44 -72
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  18. package/accordion-group/AccordionGroupContext.js +8 -0
  19. package/accordion-group/types.d.ts +7 -19
  20. package/action-icon/ActionIcon.d.ts +4 -0
  21. package/action-icon/ActionIcon.js +48 -0
  22. package/action-icon/ActionIcon.stories.tsx +41 -0
  23. package/action-icon/ActionIcon.test.js +64 -0
  24. package/action-icon/types.d.ts +26 -0
  25. package/alert/Alert.js +31 -124
  26. package/alert/Alert.stories.tsx +28 -0
  27. package/alert/Alert.test.js +29 -46
  28. package/alert/types.d.ts +5 -5
  29. package/badge/Badge.d.ts +1 -1
  30. package/badge/Badge.js +141 -43
  31. package/badge/Badge.stories.tsx +210 -0
  32. package/badge/Badge.test.js +30 -0
  33. package/badge/types.d.ts +52 -3
  34. package/bleed/Bleed.js +13 -21
  35. package/bleed/Bleed.stories.tsx +1 -0
  36. package/bleed/types.d.ts +2 -2
  37. package/box/Box.d.ts +1 -1
  38. package/box/Box.js +18 -59
  39. package/box/Box.stories.tsx +38 -51
  40. package/box/Box.test.js +2 -7
  41. package/box/types.d.ts +3 -15
  42. package/bulleted-list/BulletedList.js +19 -53
  43. package/bulleted-list/BulletedList.stories.tsx +8 -93
  44. package/bulleted-list/types.d.ts +32 -5
  45. package/button/Button.d.ts +1 -1
  46. package/button/Button.js +71 -106
  47. package/button/Button.stories.tsx +144 -101
  48. package/button/Button.test.js +20 -17
  49. package/button/types.d.ts +9 -5
  50. package/card/Card.d.ts +1 -1
  51. package/card/Card.js +48 -89
  52. package/card/Card.stories.tsx +12 -42
  53. package/card/Card.test.js +11 -22
  54. package/card/types.d.ts +6 -12
  55. package/checkbox/Checkbox.d.ts +2 -2
  56. package/checkbox/Checkbox.js +90 -124
  57. package/checkbox/Checkbox.stories.tsx +68 -54
  58. package/checkbox/Checkbox.test.js +108 -64
  59. package/checkbox/types.d.ts +11 -3
  60. package/chip/Chip.js +39 -79
  61. package/chip/Chip.stories.tsx +121 -26
  62. package/chip/Chip.test.js +16 -31
  63. package/chip/types.d.ts +4 -4
  64. package/common/coreTokens.d.ts +237 -0
  65. package/common/coreTokens.js +184 -0
  66. package/common/utils.d.ts +1 -0
  67. package/common/utils.js +6 -12
  68. package/common/variables.d.ts +1395 -0
  69. package/common/variables.js +914 -1156
  70. package/container/Container.d.ts +4 -0
  71. package/container/Container.js +194 -0
  72. package/container/Container.stories.tsx +214 -0
  73. package/container/types.d.ts +74 -0
  74. package/contextual-menu/ContextualMenu.d.ts +7 -0
  75. package/contextual-menu/ContextualMenu.js +71 -0
  76. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  77. package/contextual-menu/ContextualMenu.test.js +71 -0
  78. package/contextual-menu/MenuItemAction.d.ts +4 -0
  79. package/contextual-menu/MenuItemAction.js +46 -0
  80. package/contextual-menu/types.d.ts +22 -0
  81. package/date-input/Calendar.d.ts +4 -0
  82. package/date-input/Calendar.js +214 -0
  83. package/date-input/DateInput.js +150 -299
  84. package/date-input/DateInput.stories.tsx +203 -56
  85. package/date-input/DateInput.test.js +700 -371
  86. package/date-input/DatePicker.d.ts +4 -0
  87. package/date-input/DatePicker.js +115 -0
  88. package/date-input/Icons.d.ts +6 -0
  89. package/date-input/Icons.js +58 -0
  90. package/date-input/YearPicker.d.ts +4 -0
  91. package/date-input/YearPicker.js +100 -0
  92. package/date-input/types.d.ts +72 -15
  93. package/dialog/Dialog.d.ts +1 -1
  94. package/dialog/Dialog.js +61 -119
  95. package/dialog/Dialog.stories.tsx +310 -212
  96. package/dialog/Dialog.test.js +269 -32
  97. package/dialog/types.d.ts +18 -26
  98. package/divider/Divider.d.ts +4 -0
  99. package/divider/Divider.js +36 -0
  100. package/divider/Divider.stories.tsx +223 -0
  101. package/divider/Divider.test.js +38 -0
  102. package/divider/types.d.ts +21 -0
  103. package/divider/types.js +5 -0
  104. package/dropdown/Dropdown.js +84 -153
  105. package/dropdown/Dropdown.stories.tsx +209 -94
  106. package/dropdown/Dropdown.test.js +409 -400
  107. package/dropdown/DropdownMenu.js +20 -37
  108. package/dropdown/DropdownMenuItem.js +15 -37
  109. package/dropdown/types.d.ts +20 -24
  110. package/file-input/FileInput.d.ts +2 -2
  111. package/file-input/FileInput.js +193 -262
  112. package/file-input/FileInput.stories.tsx +86 -3
  113. package/file-input/FileInput.test.js +356 -395
  114. package/file-input/FileItem.js +15 -41
  115. package/file-input/types.d.ts +13 -9
  116. package/flex/Flex.js +27 -39
  117. package/flex/Flex.stories.tsx +35 -26
  118. package/flex/types.d.ts +74 -9
  119. package/footer/Footer.d.ts +1 -1
  120. package/footer/Footer.js +70 -117
  121. package/footer/Footer.stories.tsx +55 -21
  122. package/footer/Footer.test.js +33 -57
  123. package/footer/Icons.d.ts +3 -2
  124. package/footer/Icons.js +66 -7
  125. package/footer/types.d.ts +25 -27
  126. package/grid/Grid.d.ts +7 -0
  127. package/grid/Grid.js +76 -0
  128. package/grid/Grid.stories.tsx +219 -0
  129. package/grid/types.d.ts +115 -0
  130. package/grid/types.js +5 -0
  131. package/header/Header.d.ts +4 -3
  132. package/header/Header.js +48 -133
  133. package/header/Header.stories.tsx +115 -36
  134. package/header/Header.test.js +13 -26
  135. package/header/Icons.d.ts +2 -2
  136. package/header/Icons.js +2 -7
  137. package/header/types.d.ts +7 -22
  138. package/heading/Heading.js +10 -32
  139. package/heading/Heading.test.js +71 -88
  140. package/heading/types.d.ts +7 -7
  141. package/icon/Icon.d.ts +4 -0
  142. package/icon/Icon.js +33 -0
  143. package/icon/Icon.stories.tsx +28 -0
  144. package/icon/types.d.ts +4 -0
  145. package/icon/types.js +5 -0
  146. package/image/Image.d.ts +4 -0
  147. package/image/Image.js +70 -0
  148. package/image/Image.stories.tsx +129 -0
  149. package/image/types.d.ts +72 -0
  150. package/image/types.js +5 -0
  151. package/inset/Inset.js +13 -21
  152. package/inset/Inset.stories.tsx +2 -1
  153. package/inset/types.d.ts +2 -2
  154. package/layout/ApplicationLayout.d.ts +5 -5
  155. package/layout/ApplicationLayout.js +30 -67
  156. package/layout/ApplicationLayout.stories.tsx +1 -1
  157. package/layout/Icons.d.ts +8 -5
  158. package/layout/Icons.js +51 -59
  159. package/layout/types.d.ts +5 -6
  160. package/link/Link.js +25 -46
  161. package/link/Link.stories.tsx +60 -0
  162. package/link/Link.test.js +24 -44
  163. package/link/types.d.ts +14 -14
  164. package/main.d.ts +10 -5
  165. package/main.js +47 -59
  166. package/nav-tabs/NavTabs.d.ts +7 -0
  167. package/{tabs-nav → nav-tabs}/NavTabs.js +25 -57
  168. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +115 -9
  169. package/{tabs-nav → nav-tabs}/NavTabs.test.js +39 -45
  170. package/nav-tabs/NavTabsContext.d.ts +3 -0
  171. package/nav-tabs/NavTabsContext.js +8 -0
  172. package/nav-tabs/Tab.js +118 -0
  173. package/{tabs-nav → nav-tabs}/types.d.ts +14 -15
  174. package/nav-tabs/types.js +5 -0
  175. package/number-input/NumberInput.js +46 -36
  176. package/number-input/NumberInput.stories.tsx +42 -26
  177. package/number-input/NumberInput.test.js +860 -414
  178. package/number-input/NumberInputContext.d.ts +3 -4
  179. package/number-input/NumberInputContext.js +3 -14
  180. package/number-input/types.d.ts +17 -5
  181. package/package.json +37 -40
  182. package/paginator/Icons.d.ts +5 -0
  183. package/paginator/Icons.js +21 -47
  184. package/paginator/Paginator.js +22 -58
  185. package/paginator/Paginator.stories.tsx +24 -0
  186. package/paginator/Paginator.test.js +252 -225
  187. package/paginator/types.d.ts +3 -3
  188. package/paragraph/Paragraph.d.ts +3 -4
  189. package/paragraph/Paragraph.js +6 -22
  190. package/paragraph/Paragraph.stories.tsx +0 -17
  191. package/password-input/Icons.d.ts +6 -0
  192. package/password-input/Icons.js +35 -0
  193. package/password-input/PasswordInput.js +57 -126
  194. package/password-input/PasswordInput.stories.tsx +1 -33
  195. package/password-input/PasswordInput.test.js +158 -141
  196. package/password-input/types.d.ts +8 -7
  197. package/progress-bar/ProgressBar.d.ts +2 -2
  198. package/progress-bar/ProgressBar.js +23 -55
  199. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +36 -3
  200. package/progress-bar/ProgressBar.test.js +36 -53
  201. package/progress-bar/types.d.ts +4 -3
  202. package/quick-nav/QuickNav.js +4 -27
  203. package/quick-nav/QuickNav.stories.tsx +15 -1
  204. package/quick-nav/types.d.ts +10 -10
  205. package/radio-group/Radio.d.ts +1 -1
  206. package/radio-group/Radio.js +31 -63
  207. package/radio-group/RadioGroup.js +45 -93
  208. package/radio-group/RadioGroup.stories.tsx +131 -18
  209. package/radio-group/RadioGroup.test.js +505 -471
  210. package/radio-group/types.d.ts +8 -8
  211. package/resultset-table/Icons.d.ts +7 -0
  212. package/resultset-table/Icons.js +47 -0
  213. package/resultset-table/ResultsetTable.d.ts +7 -0
  214. package/resultset-table/ResultsetTable.js +170 -0
  215. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +156 -30
  216. package/resultset-table/ResultsetTable.test.js +381 -0
  217. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  218. package/resultset-table/types.js +5 -0
  219. package/select/Icons.d.ts +7 -7
  220. package/select/Icons.js +1 -5
  221. package/select/Listbox.d.ts +1 -1
  222. package/select/Listbox.js +17 -72
  223. package/select/Option.js +27 -50
  224. package/select/Select.js +120 -175
  225. package/select/Select.stories.tsx +497 -153
  226. package/select/Select.test.js +1974 -1837
  227. package/select/types.d.ts +16 -17
  228. package/sidenav/Icons.d.ts +7 -0
  229. package/{text-input → sidenav}/Icons.js +10 -23
  230. package/sidenav/Sidenav.d.ts +2 -2
  231. package/sidenav/Sidenav.js +83 -154
  232. package/sidenav/Sidenav.stories.tsx +165 -63
  233. package/sidenav/Sidenav.test.js +3 -10
  234. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  235. package/{layout → sidenav}/SidenavContext.js +3 -9
  236. package/sidenav/types.d.ts +31 -28
  237. package/slider/Slider.d.ts +2 -2
  238. package/slider/Slider.js +77 -134
  239. package/slider/Slider.test.js +108 -104
  240. package/slider/types.d.ts +7 -3
  241. package/spinner/Spinner.js +31 -75
  242. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  243. package/spinner/Spinner.test.js +26 -35
  244. package/spinner/types.d.ts +3 -3
  245. package/status-light/StatusLight.d.ts +4 -0
  246. package/status-light/StatusLight.js +51 -0
  247. package/status-light/StatusLight.stories.tsx +74 -0
  248. package/status-light/StatusLight.test.js +25 -0
  249. package/status-light/types.d.ts +17 -0
  250. package/status-light/types.js +5 -0
  251. package/switch/Switch.d.ts +3 -3
  252. package/switch/Switch.js +56 -103
  253. package/switch/Switch.stories.tsx +33 -34
  254. package/switch/Switch.test.js +52 -97
  255. package/switch/types.d.ts +8 -3
  256. package/table/DropdownTheme.js +62 -0
  257. package/table/Table.d.ts +6 -2
  258. package/table/Table.js +78 -35
  259. package/table/Table.stories.tsx +651 -0
  260. package/table/Table.test.js +95 -8
  261. package/table/types.d.ts +34 -6
  262. package/tabs/Tab.js +26 -45
  263. package/tabs/Tabs.js +62 -145
  264. package/tabs/Tabs.stories.tsx +46 -6
  265. package/tabs/Tabs.test.js +66 -123
  266. package/tabs/types.d.ts +19 -19
  267. package/tag/Tag.js +28 -60
  268. package/tag/Tag.stories.tsx +14 -1
  269. package/tag/Tag.test.js +20 -31
  270. package/tag/types.d.ts +7 -7
  271. package/text-input/Suggestion.js +35 -25
  272. package/text-input/Suggestions.d.ts +1 -1
  273. package/text-input/Suggestions.js +19 -67
  274. package/text-input/TextInput.js +223 -333
  275. package/text-input/TextInput.stories.tsx +139 -155
  276. package/text-input/TextInput.test.js +1389 -1404
  277. package/text-input/types.d.ts +25 -17
  278. package/textarea/Textarea.js +70 -113
  279. package/textarea/Textarea.stories.tsx +174 -0
  280. package/textarea/Textarea.test.js +152 -183
  281. package/textarea/types.d.ts +9 -5
  282. package/toggle-group/ToggleGroup.d.ts +2 -2
  283. package/toggle-group/ToggleGroup.js +92 -106
  284. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  285. package/toggle-group/ToggleGroup.test.js +69 -88
  286. package/toggle-group/types.d.ts +26 -17
  287. package/typography/Typography.d.ts +2 -2
  288. package/typography/Typography.js +15 -123
  289. package/typography/Typography.stories.tsx +1 -1
  290. package/typography/types.d.ts +1 -1
  291. package/useTheme.d.ts +1147 -1
  292. package/useTheme.js +2 -9
  293. package/useTranslatedLabels.d.ts +84 -1
  294. package/useTranslatedLabels.js +1 -7
  295. package/utils/BaseTypography.d.ts +21 -0
  296. package/utils/BaseTypography.js +94 -0
  297. package/utils/FocusLock.d.ts +13 -0
  298. package/utils/FocusLock.js +124 -0
  299. package/wizard/Wizard.js +16 -51
  300. package/wizard/Wizard.stories.tsx +20 -0
  301. package/wizard/Wizard.test.js +54 -81
  302. package/wizard/types.d.ts +9 -10
  303. package/card/ice-cream.jpg +0 -0
  304. package/common/OpenSans.css +0 -81
  305. package/common/RequiredComponent.js +0 -32
  306. package/common/fonts/OpenSans-Bold.ttf +0 -0
  307. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  308. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  309. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  310. package/common/fonts/OpenSans-Italic.ttf +0 -0
  311. package/common/fonts/OpenSans-Light.ttf +0 -0
  312. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  313. package/common/fonts/OpenSans-Regular.ttf +0 -0
  314. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  315. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  316. package/number-input/numberInputContextTypes.d.ts +0 -19
  317. package/resultsetTable/ResultsetTable.d.ts +0 -4
  318. package/resultsetTable/ResultsetTable.js +0 -252
  319. package/resultsetTable/ResultsetTable.test.js +0 -348
  320. package/slider/Slider.stories.tsx +0 -183
  321. package/table/Table.stories.jsx +0 -277
  322. package/tabs-nav/NavTabs.d.ts +0 -8
  323. package/tabs-nav/Tab.js +0 -130
  324. package/text-input/Icons.d.ts +0 -8
  325. package/textarea/Textarea.stories.jsx +0 -157
  326. /package/{resultsetTable → action-icon}/types.js +0 -0
  327. /package/{tabs-nav → container}/types.js +0 -0
  328. /package/{number-input/numberInputContextTypes.js → contextual-menu/types.js} +0 -0
  329. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
@@ -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
- var _Wizard = _interopRequireDefault(require("./Wizard"));
10
-
6
+ var _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
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
- export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- export declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- declare type Step = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type StepProps = {
11
11
  /**
12
12
  * Step label.
13
13
  */
@@ -29,12 +29,11 @@ declare type Step = {
29
29
  */
30
30
  valid?: boolean;
31
31
  };
32
- export declare type Mode = "horizontal" | "vertical";
33
- declare type Props = {
32
+ type Props = {
34
33
  /**
35
- * The wizard can be showed in horizontal or vertical.
34
+ * The wizard can be shown in horizontal or vertical.
36
35
  */
37
- mode?: Mode;
36
+ mode?: "horizontal" | "vertical";
38
37
  /**
39
38
  * Initially selected step, only when it is uncontrolled.
40
39
  */
@@ -47,11 +46,11 @@ declare type Props = {
47
46
  * This function will be called when the user clicks a step. The step
48
47
  * number will be passed as a parameter.
49
48
  */
50
- onStepClick?: (newCurrentStep: number) => void;
49
+ onStepClick?: (currentStep: number) => void;
51
50
  /**
52
51
  * An array of objects representing the steps.
53
52
  */
54
- steps: Step[];
53
+ steps: StepProps[];
55
54
  /**
56
55
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
57
56
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
Binary file
@@ -1,81 +0,0 @@
1
-
2
- @font-face {
3
- font-family: 'Open Sans';
4
- src: url('./fonts/OpenSans-Light.ttf')
5
- format('truetype');
6
- font-style: normal;
7
- font-weight: 200;
8
- }
9
-
10
- @font-face {
11
- font-family: 'Open Sans';
12
- src: url('./fonts/OpenSans-Regular.ttf')
13
- format('truetype');
14
- font-style: normal;
15
- font-weight: 400;
16
- }
17
-
18
- @font-face {
19
- font-family: 'Open Sans';
20
- src: url('./fonts/OpenSans-SemiBold.ttf')
21
- format('truetype');
22
- font-style: normal;
23
- font-weight: 600;
24
- }
25
-
26
- @font-face {
27
- font-family: 'Open Sans';
28
- src: url('./fonts/OpenSans-Bold.ttf')
29
- format('truetype');
30
- font-style: normal;
31
- font-weight: 700;
32
- }
33
-
34
- @font-face {
35
- font-family: 'Open Sans';
36
- src: url('./fonts/OpenSans-ExtraBold.ttf')
37
- format('truetype');
38
- font-style: normal;
39
- font-weight: 800;
40
- }
41
-
42
- @font-face {
43
- font-family: 'Open Sans';
44
- src: url('./fonts/OpenSans-LightItalic.ttf')
45
- format('truetype');
46
- font-style: italic;
47
- font-weight: 200;
48
- }
49
-
50
- @font-face {
51
- font-family: 'Open Sans';
52
- src: url('./fonts/OpenSans-Italic.ttf')
53
- format('truetype');
54
- font-style: italic;
55
- font-weight: 400;
56
- }
57
-
58
- @font-face {
59
- font-family: 'Open Sans';
60
- src: url('./fonts/OpenSans-SemiBoldItalic.ttf')
61
- format('truetype');
62
- font-style: italic;
63
- font-weight: 600;
64
- }
65
-
66
- @font-face {
67
- font-family: 'Open Sans';
68
- src: url('./fonts/OpenSans-BoldItalic.ttf')
69
- format('truetype');
70
- font-style: italic;
71
- font-weight: 700;
72
- }
73
-
74
- @font-face {
75
- font-family: 'Open Sans';
76
- src: url('./fonts/OpenSans-ExtraBoldItalic.ttf')
77
- format('truetype');
78
- font-style: italic;
79
- font-weight: 800;
80
- }
81
-
@@ -1,32 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var _templateObject;
19
-
20
- var DxcRequired = function DxcRequired(_ref) {
21
- var _ref$theme = _ref.theme,
22
- theme = _ref$theme === void 0 ? "light" : _ref$theme;
23
- return /*#__PURE__*/_react["default"].createElement(RequiredSpan, null, "*");
24
- };
25
-
26
- var RequiredSpan = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n color: #d0011b;\n margin-right: 1px;\n cursor: default;\n"])));
27
-
28
- DxcRequired.propTypes = {
29
- theme: _propTypes["default"].oneOf(["dark", "light"])
30
- };
31
- var _default = DxcRequired;
32
- exports["default"] = _default;
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -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,4 +0,0 @@
1
- /// <reference types="react" />
2
- import ResultsetTablePropsType from "./types";
3
- declare const DxcResultsetTable: ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
4
- export default DxcResultsetTable;
@@ -1,252 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _variables = require("../common/variables.js");
23
-
24
- var _Table = _interopRequireDefault(require("../table/Table"));
25
-
26
- var _Paginator = _interopRequireDefault(require("../paginator/Paginator"));
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme"));
29
-
30
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
31
-
32
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
-
34
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
-
36
- function normalizeSortValue(sortValue) {
37
- return typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
38
- }
39
-
40
- function sortArray(index, order, resultset) {
41
- return resultset.slice().sort(function (element1, element2) {
42
- var sortValueA = normalizeSortValue(element1[index].sortValue || element1[index].displayValue);
43
- var sortValueB = normalizeSortValue(element2[index].sortValue || element2[index].displayValue);
44
- var comparison = 0;
45
-
46
- if ((0, _typeof2["default"])(sortValueA) === "object") {
47
- comparison = -1;
48
- } else if ((0, _typeof2["default"])(sortValueB) === "object") {
49
- comparison = 1;
50
- } else if (sortValueA > sortValueB) {
51
- comparison = 1;
52
- } else if (sortValueA < sortValueB) {
53
- comparison = -1;
54
- }
55
-
56
- return order === "desc" ? comparison * -1 : comparison;
57
- });
58
- }
59
-
60
- var getMinItemsPerPageIndex = function getMinItemsPerPageIndex(currentPageInternal, itemsPerPage, page) {
61
- return currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
62
- };
63
-
64
- var getMaxItemsPerPageIndex = function getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, resultset, page) {
65
- return minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1;
66
- };
67
-
68
- var ArrowUp = function ArrowUp() {
69
- return /*#__PURE__*/_react["default"].createElement("svg", {
70
- xmlns: "http://www.w3.org/2000/svg",
71
- height: "24",
72
- viewBox: "0 0 24 24",
73
- width: "24",
74
- fill: "currentColor"
75
- }, /*#__PURE__*/_react["default"].createElement("path", {
76
- d: "M0 0h24v24H0V0z",
77
- fill: "none"
78
- }), /*#__PURE__*/_react["default"].createElement("path", {
79
- d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
80
- }));
81
- };
82
-
83
- var ArrowDown = function ArrowDown() {
84
- return /*#__PURE__*/_react["default"].createElement("svg", {
85
- xmlns: "http://www.w3.org/2000/svg",
86
- height: "24",
87
- viewBox: "0 0 24 24",
88
- width: "24",
89
- fill: "currentColor"
90
- }, /*#__PURE__*/_react["default"].createElement("path", {
91
- d: "M0 0h24v24H0V0z",
92
- fill: "none"
93
- }), /*#__PURE__*/_react["default"].createElement("path", {
94
- d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
95
- }));
96
- };
97
-
98
- var BothArrows = function BothArrows() {
99
- return /*#__PURE__*/_react["default"].createElement("svg", {
100
- xmlns: "http://www.w3.org/2000/svg",
101
- height: "24",
102
- viewBox: "0 0 24 24",
103
- width: "24",
104
- fill: "currentColor"
105
- }, /*#__PURE__*/_react["default"].createElement("path", {
106
- d: "M0 0h24v24H0z",
107
- fill: "none"
108
- }), /*#__PURE__*/_react["default"].createElement("path", {
109
- d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"
110
- }));
111
- };
112
-
113
- var DxcResultsetTable = function DxcResultsetTable(_ref) {
114
- var columns = _ref.columns,
115
- rows = _ref.rows,
116
- _ref$showGoToPage = _ref.showGoToPage,
117
- showGoToPage = _ref$showGoToPage === void 0 ? true : _ref$showGoToPage,
118
- _ref$itemsPerPage = _ref.itemsPerPage,
119
- itemsPerPage = _ref$itemsPerPage === void 0 ? 5 : _ref$itemsPerPage,
120
- itemsPerPageOptions = _ref.itemsPerPageOptions,
121
- itemsPerPageFunction = _ref.itemsPerPageFunction,
122
- margin = _ref.margin,
123
- _ref$tabIndex = _ref.tabIndex,
124
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
125
- var colorsTheme = (0, _useTheme["default"])();
126
-
127
- var _useState = (0, _react.useState)(1),
128
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
129
- page = _useState2[0],
130
- changePage = _useState2[1];
131
-
132
- var _useState3 = (0, _react.useState)(""),
133
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
134
- sortColumnIndex = _useState4[0],
135
- changeSortColumnIndex = _useState4[1];
136
-
137
- var _useState5 = (0, _react.useState)("asc"),
138
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
139
- sortOrder = _useState6[0],
140
- changeSortOrder = _useState6[1];
141
-
142
- var minItemsPerPageIndex = (0, _react.useMemo)(function () {
143
- return getMinItemsPerPageIndex(page, itemsPerPage, page);
144
- }, [itemsPerPage, page]);
145
- var maxItemsPerPageIndex = (0, _react.useMemo)(function () {
146
- return getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, rows, page);
147
- }, [itemsPerPage, minItemsPerPageIndex, page, rows]);
148
-
149
- var goToPage = function goToPage(newPage) {
150
- changePage(newPage);
151
- };
152
-
153
- var changeSorting = function changeSorting(columnIndex) {
154
- changePage(1);
155
- changeSortColumnIndex(columnIndex);
156
- changeSortOrder(sortColumnIndex === "" || sortColumnIndex !== columnIndex ? "asc" : sortOrder === "asc" ? "desc" : "asc");
157
- };
158
-
159
- var getIconForSortableColumn = function getIconForSortableColumn(clickedColumnIndex) {
160
- return sortColumnIndex === clickedColumnIndex ? sortOrder === "asc" ? /*#__PURE__*/_react["default"].createElement(ArrowUp, null) : /*#__PURE__*/_react["default"].createElement(ArrowDown, null) : /*#__PURE__*/_react["default"].createElement(BothArrows, null);
161
- };
162
-
163
- (0, _react.useEffect)(function () {
164
- if (rows.length > 0) {
165
- changePage(1);
166
- } else {
167
- changePage(0);
168
- }
169
- }, [rows.length, itemsPerPage]);
170
- var sortedResultset = (0, _react.useMemo)(function () {
171
- return sortColumnIndex !== "" ? sortArray(sortColumnIndex, sortOrder, rows) : rows;
172
- }, [sortColumnIndex, sortOrder, rows]);
173
- var filteredResultset = (0, _react.useMemo)(function () {
174
- return sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1);
175
- }, [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]);
176
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
177
- theme: colorsTheme.table
178
- }, /*#__PURE__*/_react["default"].createElement(DxcResultsetTableContainer, {
179
- margin: margin
180
- }, /*#__PURE__*/_react["default"].createElement(TableContainer, null, /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement(HeaderRow, null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
181
- return /*#__PURE__*/_react["default"].createElement(TableHeader, {
182
- key: "tableHeader_".concat(index)
183
- }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
184
- key: "headerContainer_".concat(index),
185
- onClick: function onClick() {
186
- return column.isSortable && changeSorting(index);
187
- },
188
- tabIndex: column.isSortable ? tabIndex : -1,
189
- isSortable: column.isSortable
190
- }, /*#__PURE__*/_react["default"].createElement(TitleDiv, {
191
- isSortable: column.isSortable
192
- }, column.displayValue), column.isSortable && /*#__PURE__*/_react["default"].createElement(SortIcon, null, getIconForSortableColumn(index))));
193
- }))), /*#__PURE__*/_react["default"].createElement(TableRowGroup, null, filteredResultset.map(function (cells, index) {
194
- return /*#__PURE__*/_react["default"].createElement("tr", {
195
- key: "resultSetTableCell_".concat(index)
196
- }, cells.map(function (cellContent, index) {
197
- return /*#__PURE__*/_react["default"].createElement("td", {
198
- key: "resultSetTableCellContent_".concat(index)
199
- }, cellContent.displayValue);
200
- }));
201
- })))), /*#__PURE__*/_react["default"].createElement(PaginatorContainer, null, /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
202
- totalItems: rows.length,
203
- itemsPerPage: itemsPerPage,
204
- itemsPerPageOptions: itemsPerPageOptions,
205
- itemsPerPageFunction: itemsPerPageFunction,
206
- currentPage: page,
207
- showGoToPage: showGoToPage,
208
- onPageChange: goToPage,
209
- tabIndex: tabIndex
210
- }))));
211
- };
212
-
213
- var TableContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & table {\n table-layout: auto;\n }\n"])));
214
-
215
- var PaginatorContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
216
-
217
- var TableRowGroup = _styledComponents["default"].tbody(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n > div:nth-child(1) {\n position: absolute;\n left: calc(50% - 68.5px);\n bottom: calc(50% - 68.5px - 30px);\n }\n"])));
218
-
219
- var SortIcon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n top: 409px;\n left: 390px;\n height: 14px;\n cursor: pointer;\n color: ", ";\n\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
220
- return props.theme.sortIconColor;
221
- });
222
-
223
- var TitleDiv = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: ", ";\n"])), function (props) {
224
- return props.isSortable && "pointer" || "default";
225
- });
226
-
227
- var TableHeader = _styledComponents["default"].th(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
228
-
229
- var HeaderContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: fit-content;\n :focus {\n ", "\n }\n"])), function (props) {
230
- return props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start";
231
- }, function (props) {
232
- return props.isSortable && "outline: #0095ff solid 2px; \n outline-offset: 4px;";
233
- });
234
-
235
- var HeaderRow = _styledComponents["default"].thead(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n height: 60px;\n"])));
236
-
237
- var DxcResultsetTableContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
238
- return props.theme.fontSizeBase;
239
- }, function (props) {
240
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
241
- }, function (props) {
242
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
243
- }, function (props) {
244
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
245
- }, function (props) {
246
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
247
- }, function (props) {
248
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
249
- });
250
-
251
- var _default = DxcResultsetTable;
252
- exports["default"] = _default;