@dxc-technology/halstack-react 10.1.0 → 12.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 (350) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +45 -143
  4. package/HalstackContext.js +10 -35
  5. package/accordion/Accordion.accessibility.test.js +71 -0
  6. package/accordion/Accordion.js +33 -84
  7. package/accordion/Accordion.stories.tsx +8 -64
  8. package/accordion/Accordion.test.js +18 -33
  9. package/accordion/types.d.ts +6 -6
  10. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  11. package/accordion-group/AccordionGroup.d.ts +2 -3
  12. package/accordion-group/AccordionGroup.js +17 -44
  13. package/accordion-group/AccordionGroup.stories.tsx +24 -24
  14. package/accordion-group/AccordionGroup.test.js +42 -60
  15. package/accordion-group/AccordionGroupAccordion.js +11 -23
  16. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  17. package/accordion-group/AccordionGroupContext.js +8 -0
  18. package/accordion-group/types.d.ts +7 -7
  19. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  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.accessibility.test.js +95 -0
  26. package/alert/Alert.js +34 -120
  27. package/alert/Alert.test.js +28 -45
  28. package/alert/types.d.ts +5 -5
  29. package/badge/Badge.accessibility.test.js +129 -0
  30. package/badge/Badge.d.ts +1 -1
  31. package/badge/Badge.js +142 -42
  32. package/badge/Badge.stories.tsx +210 -0
  33. package/badge/Badge.test.js +30 -0
  34. package/badge/types.d.ts +52 -3
  35. package/bleed/Bleed.js +13 -21
  36. package/bleed/types.d.ts +2 -2
  37. package/box/Box.accessibility.test.js +33 -0
  38. package/box/Box.js +11 -33
  39. package/box/Box.test.js +1 -6
  40. package/box/types.d.ts +3 -3
  41. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  42. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  43. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  44. package/breadcrumbs/Breadcrumbs.js +79 -0
  45. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  46. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  47. package/breadcrumbs/Breadcrumbs.test.js +169 -0
  48. package/breadcrumbs/Item.d.ts +4 -0
  49. package/breadcrumbs/Item.js +52 -0
  50. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  51. package/breadcrumbs/dropdownTheme.js +62 -0
  52. package/breadcrumbs/types.d.ts +16 -0
  53. package/breadcrumbs/types.js +5 -0
  54. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  55. package/bulleted-list/BulletedList.js +22 -55
  56. package/bulleted-list/BulletedList.stories.tsx +2 -93
  57. package/bulleted-list/types.d.ts +5 -5
  58. package/button/Button.accessibility.test.js +127 -0
  59. package/button/Button.js +36 -59
  60. package/button/Button.stories.tsx +35 -135
  61. package/button/Button.test.js +13 -21
  62. package/button/types.d.ts +5 -5
  63. package/card/Card.accessibility.test.js +36 -0
  64. package/card/Card.js +23 -45
  65. package/card/Card.test.js +10 -21
  66. package/card/types.d.ts +5 -5
  67. package/checkbox/Checkbox.accessibility.test.js +87 -0
  68. package/checkbox/Checkbox.js +88 -123
  69. package/checkbox/Checkbox.stories.tsx +16 -54
  70. package/checkbox/Checkbox.test.js +107 -63
  71. package/checkbox/types.d.ts +8 -4
  72. package/chip/Chip.accessibility.test.js +67 -0
  73. package/chip/Chip.js +22 -36
  74. package/chip/Chip.stories.tsx +10 -25
  75. package/chip/Chip.test.js +17 -30
  76. package/chip/types.d.ts +4 -4
  77. package/common/coreTokens.d.ts +105 -14
  78. package/common/coreTokens.js +40 -23
  79. package/common/utils.js +2 -8
  80. package/common/variables.d.ts +46 -144
  81. package/common/variables.js +120 -225
  82. package/container/Container.d.ts +4 -0
  83. package/container/Container.js +194 -0
  84. package/container/Container.stories.tsx +214 -0
  85. package/container/types.d.ts +74 -0
  86. package/container/types.js +5 -0
  87. package/contextual-menu/ContextualMenu.accessibility.test.js +97 -0
  88. package/contextual-menu/ContextualMenu.d.ts +5 -0
  89. package/contextual-menu/ContextualMenu.js +88 -0
  90. package/contextual-menu/ContextualMenu.stories.tsx +232 -0
  91. package/contextual-menu/ContextualMenu.test.js +205 -0
  92. package/contextual-menu/GroupItem.d.ts +4 -0
  93. package/contextual-menu/GroupItem.js +67 -0
  94. package/contextual-menu/ItemAction.d.ts +4 -0
  95. package/contextual-menu/ItemAction.js +51 -0
  96. package/contextual-menu/MenuItem.d.ts +4 -0
  97. package/contextual-menu/MenuItem.js +29 -0
  98. package/contextual-menu/SingleItem.d.ts +4 -0
  99. package/contextual-menu/SingleItem.js +38 -0
  100. package/contextual-menu/types.d.ts +58 -0
  101. package/contextual-menu/types.js +5 -0
  102. package/date-input/Calendar.js +13 -57
  103. package/date-input/DateInput.accessibility.test.js +228 -0
  104. package/date-input/DateInput.js +53 -100
  105. package/date-input/DateInput.stories.tsx +19 -31
  106. package/date-input/DateInput.test.js +674 -701
  107. package/date-input/DatePicker.js +23 -48
  108. package/date-input/YearPicker.js +8 -34
  109. package/date-input/types.d.ts +28 -22
  110. package/dialog/Dialog.accessibility.test.js +69 -0
  111. package/dialog/Dialog.js +21 -59
  112. package/dialog/Dialog.stories.tsx +176 -0
  113. package/dialog/Dialog.test.js +126 -188
  114. package/dialog/types.d.ts +18 -13
  115. package/divider/Divider.accessibility.test.js +33 -0
  116. package/divider/Divider.d.ts +4 -0
  117. package/divider/Divider.js +36 -0
  118. package/divider/Divider.stories.tsx +223 -0
  119. package/divider/Divider.test.js +38 -0
  120. package/divider/types.d.ts +21 -0
  121. package/divider/types.js +5 -0
  122. package/dropdown/Dropdown.accessibility.test.js +180 -0
  123. package/dropdown/Dropdown.js +63 -130
  124. package/dropdown/Dropdown.stories.tsx +15 -26
  125. package/dropdown/Dropdown.test.js +402 -389
  126. package/dropdown/DropdownMenu.js +12 -23
  127. package/dropdown/DropdownMenuItem.js +13 -21
  128. package/dropdown/types.d.ts +20 -24
  129. package/file-input/FileInput.accessibility.test.js +160 -0
  130. package/file-input/FileInput.js +180 -284
  131. package/file-input/FileInput.stories.tsx +1 -1
  132. package/file-input/FileInput.test.js +279 -354
  133. package/file-input/FileItem.js +29 -66
  134. package/file-input/types.d.ts +9 -9
  135. package/flex/Flex.js +25 -39
  136. package/flex/types.d.ts +6 -6
  137. package/footer/Footer.accessibility.test.js +125 -0
  138. package/footer/Footer.d.ts +1 -1
  139. package/footer/Footer.js +43 -68
  140. package/footer/Footer.stories.tsx +58 -2
  141. package/footer/Footer.test.js +18 -32
  142. package/footer/Icons.d.ts +3 -2
  143. package/footer/Icons.js +53 -22
  144. package/footer/types.d.ts +17 -17
  145. package/grid/Grid.js +1 -16
  146. package/grid/types.d.ts +10 -10
  147. package/header/Header.accessibility.test.js +93 -0
  148. package/header/Header.d.ts +1 -1
  149. package/header/Header.js +38 -104
  150. package/header/Header.stories.tsx +16 -0
  151. package/header/Header.test.js +12 -25
  152. package/header/Icons.d.ts +2 -2
  153. package/header/Icons.js +3 -13
  154. package/header/types.d.ts +7 -8
  155. package/heading/Heading.accessibility.test.js +33 -0
  156. package/heading/Heading.js +9 -31
  157. package/heading/Heading.test.js +70 -87
  158. package/heading/types.d.ts +7 -7
  159. package/icon/Icon.accessibility.test.js +30 -0
  160. package/icon/Icon.d.ts +4 -0
  161. package/icon/Icon.js +33 -0
  162. package/icon/Icon.stories.tsx +28 -0
  163. package/icon/types.d.ts +4 -0
  164. package/icon/types.js +5 -0
  165. package/image/Image.accessibility.test.js +56 -0
  166. package/image/Image.d.ts +2 -2
  167. package/image/Image.js +17 -32
  168. package/image/Image.stories.tsx +3 -1
  169. package/image/types.d.ts +2 -2
  170. package/inset/Inset.js +13 -21
  171. package/inset/types.d.ts +2 -2
  172. package/layout/ApplicationLayout.d.ts +2 -2
  173. package/layout/ApplicationLayout.js +23 -60
  174. package/layout/Icons.d.ts +4 -5
  175. package/layout/Icons.js +2 -16
  176. package/layout/types.d.ts +3 -3
  177. package/link/Link.accessibility.test.js +108 -0
  178. package/link/Link.js +28 -47
  179. package/link/Link.stories.tsx +4 -4
  180. package/link/Link.test.js +23 -41
  181. package/link/types.d.ts +14 -14
  182. package/main.d.ts +8 -4
  183. package/main.js +39 -60
  184. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  185. package/nav-tabs/NavTabs.d.ts +1 -2
  186. package/nav-tabs/NavTabs.js +19 -48
  187. package/nav-tabs/NavTabs.stories.tsx +30 -25
  188. package/nav-tabs/NavTabs.test.js +45 -50
  189. package/nav-tabs/NavTabsContext.d.ts +3 -0
  190. package/nav-tabs/NavTabsContext.js +8 -0
  191. package/nav-tabs/Tab.js +38 -67
  192. package/nav-tabs/types.d.ts +10 -10
  193. package/number-input/NumberInput.accessibility.test.js +228 -0
  194. package/number-input/NumberInput.d.ts +0 -7
  195. package/number-input/NumberInput.js +47 -39
  196. package/number-input/NumberInput.stories.tsx +42 -26
  197. package/number-input/NumberInput.test.js +839 -575
  198. package/number-input/NumberInputContext.d.ts +3 -0
  199. package/number-input/NumberInputContext.js +8 -0
  200. package/number-input/types.d.ts +17 -5
  201. package/package.json +41 -37
  202. package/paginator/Paginator.accessibility.test.js +79 -0
  203. package/paginator/Paginator.js +27 -52
  204. package/paginator/Paginator.test.js +224 -207
  205. package/paginator/types.d.ts +3 -3
  206. package/paragraph/Paragraph.accessibility.test.js +28 -0
  207. package/paragraph/Paragraph.js +3 -19
  208. package/paragraph/Paragraph.stories.tsx +0 -17
  209. package/password-input/PasswordInput.accessibility.test.js +153 -0
  210. package/password-input/PasswordInput.js +32 -54
  211. package/password-input/PasswordInput.stories.tsx +1 -34
  212. package/password-input/PasswordInput.test.js +153 -129
  213. package/password-input/types.d.ts +8 -7
  214. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  215. package/progress-bar/ProgressBar.js +26 -56
  216. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  217. package/progress-bar/ProgressBar.test.js +35 -52
  218. package/progress-bar/types.d.ts +3 -3
  219. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  220. package/quick-nav/QuickNav.js +4 -27
  221. package/quick-nav/QuickNav.stories.tsx +1 -1
  222. package/quick-nav/types.d.ts +10 -10
  223. package/radio-group/Radio.d.ts +1 -1
  224. package/radio-group/Radio.js +22 -54
  225. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  226. package/radio-group/RadioGroup.js +38 -83
  227. package/radio-group/RadioGroup.stories.tsx +10 -10
  228. package/radio-group/RadioGroup.test.js +504 -470
  229. package/radio-group/types.d.ts +8 -8
  230. package/resultset-table/Icons.d.ts +7 -0
  231. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  232. package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
  233. package/resultset-table/ResultsetTable.d.ts +7 -0
  234. package/{resultsetTable → resultset-table}/ResultsetTable.js +45 -69
  235. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +118 -5
  236. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +148 -92
  237. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  238. package/resultset-table/types.js +5 -0
  239. package/select/Listbox.js +40 -54
  240. package/select/Option.js +28 -36
  241. package/select/Select.accessibility.test.js +228 -0
  242. package/select/Select.js +107 -171
  243. package/select/Select.stories.tsx +59 -111
  244. package/select/Select.test.js +1895 -1858
  245. package/select/types.d.ts +15 -16
  246. package/sidenav/Sidenav.accessibility.test.js +59 -0
  247. package/sidenav/Sidenav.js +44 -81
  248. package/sidenav/Sidenav.stories.tsx +4 -9
  249. package/sidenav/Sidenav.test.js +3 -10
  250. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  251. package/{layout → sidenav}/SidenavContext.js +3 -9
  252. package/sidenav/types.d.ts +20 -20
  253. package/slider/Slider.accessibility.test.js +104 -0
  254. package/slider/Slider.js +70 -126
  255. package/slider/Slider.test.js +107 -103
  256. package/slider/types.d.ts +4 -4
  257. package/spinner/Spinner.accessibility.test.js +96 -0
  258. package/spinner/Spinner.js +21 -55
  259. package/spinner/Spinner.test.js +25 -34
  260. package/spinner/types.d.ts +3 -3
  261. package/status-light/StatusLight.accessibility.test.js +157 -0
  262. package/status-light/StatusLight.d.ts +4 -0
  263. package/status-light/StatusLight.js +51 -0
  264. package/status-light/StatusLight.stories.tsx +74 -0
  265. package/status-light/StatusLight.test.js +25 -0
  266. package/status-light/types.d.ts +17 -0
  267. package/status-light/types.js +5 -0
  268. package/switch/Switch.accessibility.test.js +98 -0
  269. package/switch/Switch.js +49 -97
  270. package/switch/Switch.stories.tsx +12 -34
  271. package/switch/Switch.test.js +51 -96
  272. package/switch/types.d.ts +4 -4
  273. package/table/DropdownTheme.js +62 -0
  274. package/table/Table.accessibility.test.js +93 -0
  275. package/table/Table.d.ts +6 -2
  276. package/table/Table.js +76 -33
  277. package/table/{Table.stories.jsx → Table.stories.tsx} +309 -2
  278. package/table/Table.test.js +93 -6
  279. package/table/types.d.ts +34 -6
  280. package/tabs/Tab.js +22 -37
  281. package/tabs/Tabs.accessibility.test.js +56 -0
  282. package/tabs/Tabs.js +59 -147
  283. package/tabs/Tabs.stories.tsx +8 -4
  284. package/tabs/Tabs.test.js +57 -131
  285. package/tabs/types.d.ts +21 -21
  286. package/tag/Tag.accessibility.test.js +69 -0
  287. package/tag/Tag.js +27 -57
  288. package/tag/Tag.stories.tsx +4 -7
  289. package/tag/Tag.test.js +17 -36
  290. package/tag/types.d.ts +9 -9
  291. package/text-input/Suggestion.js +9 -26
  292. package/text-input/Suggestions.d.ts +1 -1
  293. package/text-input/Suggestions.js +30 -70
  294. package/text-input/TextInput.accessibility.test.js +321 -0
  295. package/text-input/TextInput.js +203 -289
  296. package/text-input/TextInput.stories.tsx +65 -160
  297. package/text-input/TextInput.test.js +1227 -1194
  298. package/text-input/types.d.ts +25 -17
  299. package/textarea/Textarea.accessibility.test.js +155 -0
  300. package/textarea/Textarea.js +68 -109
  301. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  302. package/textarea/Textarea.test.js +150 -179
  303. package/textarea/types.d.ts +9 -5
  304. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  305. package/toggle-group/ToggleGroup.js +25 -64
  306. package/toggle-group/ToggleGroup.stories.tsx +4 -4
  307. package/toggle-group/ToggleGroup.test.js +48 -81
  308. package/toggle-group/types.d.ts +12 -12
  309. package/typography/Typography.accessibility.test.js +339 -0
  310. package/typography/Typography.js +4 -13
  311. package/typography/types.d.ts +1 -1
  312. package/useTheme.d.ts +43 -141
  313. package/useTheme.js +1 -8
  314. package/useTranslatedLabels.js +1 -7
  315. package/utils/BaseTypography.d.ts +2 -2
  316. package/utils/BaseTypography.js +16 -30
  317. package/utils/FocusLock.js +25 -39
  318. package/wizard/Wizard.accessibility.test.js +55 -0
  319. package/wizard/Wizard.js +27 -73
  320. package/wizard/Wizard.stories.tsx +19 -0
  321. package/wizard/Wizard.test.js +53 -80
  322. package/wizard/types.d.ts +8 -8
  323. package/common/OpenSans.css +0 -69
  324. package/common/fonts/OpenSans-Bold.ttf +0 -0
  325. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  326. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  327. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  328. package/common/fonts/OpenSans-Italic.ttf +0 -0
  329. package/common/fonts/OpenSans-Light.ttf +0 -0
  330. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  331. package/common/fonts/OpenSans-Regular.ttf +0 -0
  332. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  333. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  334. package/date-input/Icons.d.ts +0 -6
  335. package/date-input/Icons.js +0 -75
  336. package/paginator/Icons.d.ts +0 -5
  337. package/paginator/Icons.js +0 -54
  338. package/password-input/Icons.d.ts +0 -6
  339. package/password-input/Icons.js +0 -39
  340. package/resultsetTable/Icons.d.ts +0 -7
  341. package/resultsetTable/ResultsetTable.d.ts +0 -4
  342. package/select/Icons.d.ts +0 -10
  343. package/select/Icons.js +0 -93
  344. package/sidenav/Icons.d.ts +0 -7
  345. package/sidenav/Icons.js +0 -51
  346. package/slider/Slider.stories.tsx +0 -240
  347. package/text-input/Icons.d.ts +0 -8
  348. package/text-input/Icons.js +0 -60
  349. /package/{resultsetTable → action-icon}/types.js +0 -0
  350. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
@@ -1,35 +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 _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
10
-
11
7
  var _Dialog = _interopRequireDefault(require("./Dialog.tsx"));
12
-
13
8
  var _TextInput = _interopRequireDefault(require("../text-input/TextInput.tsx"));
14
-
15
9
  var _Textarea = _interopRequireDefault(require("../textarea/Textarea.tsx"));
16
-
17
10
  var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox.tsx"));
18
-
19
11
  var _Select = _interopRequireDefault(require("../select/Select.tsx"));
20
-
21
12
  var _Button = _interopRequireDefault(require("../button/Button.tsx"));
22
-
23
13
  var _Link = _interopRequireDefault(require("../link/Link.tsx"));
24
-
25
14
  var _Card = _interopRequireDefault(require("../card/Card.tsx"));
26
-
27
15
  var _RadioGroup = _interopRequireDefault(require("../radio-group/RadioGroup.tsx"));
28
-
29
16
  var _Slider = _interopRequireDefault(require("../slider/Slider.tsx"));
30
-
31
17
  var _Switch = _interopRequireDefault(require("../switch/Switch.tsx"));
32
-
33
18
  var options = [{
34
19
  label: "Female",
35
20
  value: "female"
@@ -44,326 +29,279 @@ var options = [{
44
29
  value: "other"
45
30
  }];
46
31
  describe("Dialog component tests", function () {
47
- test("Dialog renders with correct text and accesibility attributes", function () {
32
+ test("Dialog renders with correct text and accessibility attributes", function () {
48
33
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "dialog-text")),
49
- getByText = _render.getByText,
50
- getByRole = _render.getByRole;
51
-
34
+ getByText = _render.getByText,
35
+ getByRole = _render.getByRole;
52
36
  expect(getByRole("dialog")).toBeTruthy();
53
37
  expect(getByRole("dialog").getAttribute("aria-modal")).toBe("true");
54
38
  expect(getByText("dialog-text")).toBeTruthy();
55
39
  });
56
40
  test("Dialog renders without close button", function () {
57
41
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
58
- isCloseVisible: false
59
- }, "dialog-text")),
60
- queryByRole = _render2.queryByRole;
61
-
42
+ isCloseVisible: false
43
+ }, "dialog-text")),
44
+ queryByRole = _render2.queryByRole;
62
45
  expect(queryByRole("button")).toBeFalsy();
63
46
  });
64
47
  test("Dialog renders with aria-modal false when overlay is not used", function () {
65
48
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
66
- isCloseVisible: false,
67
- overlay: false
68
- }, "dialog-text")),
69
- getByRole = _render3.getByRole;
70
-
49
+ isCloseVisible: false,
50
+ overlay: false
51
+ }, "dialog-text")),
52
+ getByRole = _render3.getByRole;
71
53
  expect(getByRole("dialog")).toBeTruthy();
72
54
  expect(getByRole("dialog").getAttribute("aria-modal")).toBe("false");
73
55
  });
74
56
  test("Calls correct function onCloseClick", function () {
75
57
  var onCloseClick = jest.fn();
76
-
77
58
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
78
- onCloseClick: onCloseClick
79
- }, "dialog-text")),
80
- getByRole = _render4.getByRole;
81
-
59
+ onCloseClick: onCloseClick
60
+ }, "dialog-text")),
61
+ getByRole = _render4.getByRole;
82
62
  var closeButton = getByRole("button");
83
-
84
63
  _react2.fireEvent.click(closeButton);
85
-
86
64
  expect(onCloseClick).toHaveBeenCalled();
87
65
  });
88
66
  test("Calls correct function onCloseClick when 'Escape' key is pressed", function () {
89
67
  var onCloseClick = jest.fn();
90
-
91
68
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
92
- onCloseClick: onCloseClick
93
- }, "dialog-text")),
94
- getByRole = _render5.getByRole;
95
-
69
+ onCloseClick: onCloseClick
70
+ }, "dialog-text")),
71
+ getByRole = _render5.getByRole;
96
72
  _react2.fireEvent.keyDown(getByRole("dialog"), {
97
73
  key: "Escape",
98
74
  code: "Escape",
99
75
  keyCode: 27,
100
76
  charCode: 27
101
77
  });
102
-
103
78
  expect(onCloseClick).toHaveBeenCalled();
104
79
  });
105
80
  });
106
81
  describe("Dialog component: Focus lock tests", function () {
107
82
  test("Close action: when there's no focusable content, the focus never leaves the close action (unless you click outside)", function () {
108
83
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "example-dialog")),
109
- getByRole = _render6.getByRole;
110
-
84
+ getByRole = _render6.getByRole;
111
85
  var button = getByRole("button");
112
86
  var dialog = getByRole("dialog");
113
87
  expect(document.activeElement).toEqual(button);
114
88
  expect(button.getAttribute("aria-label")).toBe("Close dialog");
115
-
116
89
  _userEvent["default"].tab();
117
-
118
90
  expect(document.activeElement).toEqual(button);
119
-
120
91
  _react2.fireEvent.keyDown(dialog, {
121
92
  key: "Tab",
122
93
  shiftKey: true
123
94
  });
124
-
125
95
  expect(document.activeElement).toEqual(button);
126
96
  });
127
97
  test("Autofocus with Button component", function () {
128
98
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
129
- label: "Accept"
130
- }))),
131
- getAllByRole = _render7.getAllByRole;
132
-
99
+ label: "Accept"
100
+ }))),
101
+ getAllByRole = _render7.getAllByRole;
133
102
  var button = getAllByRole("button")[0];
134
103
  expect(document.activeElement).toEqual(button);
135
104
  expect(button.getAttribute("aria-label")).not.toBe("Close dialog");
136
105
  });
137
106
  test("Autofocus with Card component", function () {
138
107
  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
139
- linkHref: "https://developer.dxc.com/halstack/next/components/card/"
140
- }, "example-card"))),
141
- getByRole = _render8.getByRole;
142
-
108
+ linkHref: "https://developer.dxc.com/halstack/next/components/card/"
109
+ }, "example-card"))),
110
+ getByRole = _render8.getByRole;
143
111
  var card = getByRole("link");
144
112
  expect(document.activeElement).toEqual(card);
145
113
  });
146
114
  test("Autofocus with Checkbox component", function () {
147
115
  var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
148
- label: "Name"
149
- }))),
150
- getByRole = _render9.getByRole;
151
-
116
+ label: "Name"
117
+ }))),
118
+ getByRole = _render9.getByRole;
152
119
  var checkbox = getByRole("checkbox");
153
120
  expect(document.activeElement).toEqual(checkbox);
154
121
  });
155
122
  test("Autofocus with Link component", function () {
156
123
  var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, "This is a text with a ", /*#__PURE__*/_react["default"].createElement(_Link["default"], {
157
- href: "#"
158
- }, "Link"), " to another page.")),
159
- getByRole = _render10.getByRole;
160
-
124
+ href: "#"
125
+ }, "Link"), " to another page.")),
126
+ getByRole = _render10.getByRole;
161
127
  var link = getByRole("link");
162
128
  expect(document.activeElement).toEqual(link);
163
129
  });
164
130
  test("Autofocus with RadioGroup component", function () {
165
131
  var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
166
- label: "Example",
167
- options: options
168
- }))),
169
- getAllByRole = _render11.getAllByRole;
170
-
132
+ label: "Example",
133
+ options: options
134
+ }))),
135
+ getAllByRole = _render11.getAllByRole;
171
136
  var checkedRadio = getAllByRole("radio")[0];
172
137
  expect(document.activeElement).toEqual(checkedRadio);
173
138
  });
174
139
  test("Autofocus with Select component", function () {
175
140
  var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
176
- label: "Country",
177
- options: options
178
- }))),
179
- getByRole = _render12.getByRole;
180
-
141
+ label: "Country",
142
+ options: options
143
+ }))),
144
+ getByRole = _render12.getByRole;
181
145
  var select = getByRole("combobox");
182
146
  expect(document.activeElement).toEqual(select);
183
147
  });
184
148
  test("Autofocus with Slider component", function () {
185
149
  var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
186
- label: "label",
187
- minValue: 0,
188
- maxValue: 100,
189
- showLimitsValues: true
190
- }))),
191
- getByRole = _render13.getByRole;
192
-
150
+ label: "label",
151
+ minValue: 0,
152
+ maxValue: 100,
153
+ showLimitsValues: true
154
+ }))),
155
+ getByRole = _render13.getByRole;
193
156
  var slider = getByRole("slider");
194
157
  expect(document.activeElement).toEqual(slider);
195
158
  });
196
159
  test("Autofocus with Switch component", function () {
197
160
  var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
198
- label: "Example"
199
- }))),
200
- getByRole = _render14.getByRole;
201
-
161
+ label: "Example"
162
+ }))),
163
+ getByRole = _render14.getByRole;
202
164
  var switchButton = getByRole("switch");
203
165
  expect(document.activeElement).toEqual(switchButton);
204
166
  });
205
167
  test("Autofocus with Text Input component", function () {
206
168
  var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
207
- label: "Name"
208
- }))),
209
- getByRole = _render15.getByRole;
210
-
169
+ label: "Name"
170
+ }))),
171
+ getByRole = _render15.getByRole;
211
172
  var input = getByRole("textbox");
212
173
  expect(document.activeElement).toEqual(input);
213
174
  });
214
175
  test("Autofocus with Textarea component", function () {
215
176
  var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
216
- label: "Name"
217
- }))),
218
- getByRole = _render16.getByRole;
219
-
177
+ label: "Name"
178
+ }))),
179
+ getByRole = _render16.getByRole;
220
180
  var textarea = getByRole("textbox");
221
181
  expect(document.activeElement).toEqual(textarea);
222
182
  });
223
183
  test("Negative tabindex elements are not automatically focused, even if it is enabled and a valid focusable item (programatically and by click)", function () {
224
184
  var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
225
- label: "Name",
226
- tabIndex: -1
227
- }), /*#__PURE__*/_react["default"].createElement("input", {
228
- label: "Name"
229
- }))),
230
- getAllByRole = _render17.getAllByRole,
231
- getByRole = _render17.getByRole;
232
-
185
+ label: "Name",
186
+ tabIndex: -1
187
+ }), /*#__PURE__*/_react["default"].createElement("input", {
188
+ label: "Name"
189
+ }))),
190
+ getAllByRole = _render17.getAllByRole,
191
+ getByRole = _render17.getByRole;
233
192
  var inputs = getAllByRole("textbox");
234
193
  var button = getByRole("button");
235
194
  expect(document.activeElement).toEqual(inputs[1]);
236
-
237
195
  _userEvent["default"].tab();
238
-
239
196
  expect(document.activeElement).toEqual(button);
240
-
241
197
  _userEvent["default"].tab();
242
-
243
198
  expect(document.activeElement).toEqual(inputs[1]);
244
199
  });
245
200
  test("Focus jumps disabled components and negative tabIndexes when autofocusing first item", function () {
246
201
  var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
247
- label: "Accept",
248
- disabled: true
249
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
250
- label: "Older age",
251
- disabled: true
252
- }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
253
- label: "Country",
254
- options: options,
255
- disabled: true
256
- }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
257
- label: "Country",
258
- options: options,
259
- disabled: true
260
- }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
261
- label: "Name",
262
- disabled: true
263
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
264
- label: "Accept",
265
- tabIndex: -1
266
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
267
- label: "Older age",
268
- tabIndex: -1
269
- }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
270
- label: "Country",
271
- options: options,
272
- tabIndex: -1
273
- }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
274
- label: "Country",
275
- options: options,
276
- tabIndex: -1
277
- }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
278
- label: "Name",
279
- tabIndex: -1
280
- }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
281
- label: "Description"
282
- }))),
283
- getAllByRole = _render18.getAllByRole;
284
-
202
+ label: "Accept",
203
+ disabled: true
204
+ }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
205
+ label: "Older age",
206
+ disabled: true
207
+ }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
208
+ label: "Country",
209
+ options: options,
210
+ disabled: true
211
+ }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
212
+ label: "Country",
213
+ options: options,
214
+ disabled: true
215
+ }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
216
+ label: "Name",
217
+ disabled: true
218
+ }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
219
+ label: "Accept",
220
+ tabIndex: -1
221
+ }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
222
+ label: "Older age",
223
+ tabIndex: -1
224
+ }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
225
+ label: "Country",
226
+ options: options,
227
+ tabIndex: -1
228
+ }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
229
+ label: "Country",
230
+ options: options,
231
+ tabIndex: -1
232
+ }), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
233
+ label: "Name",
234
+ tabIndex: -1
235
+ }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
236
+ label: "Description"
237
+ }))),
238
+ getAllByRole = _render18.getAllByRole;
285
239
  var textarea = getAllByRole("textbox")[2];
286
240
  expect(document.activeElement).toEqual(textarea);
287
241
  });
288
242
  test("Focus jumps from last element to the first", function () {
289
243
  var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
290
- label: "Accept",
291
- disabled: true
292
- }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
293
- label: "Name"
294
- }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
295
- label: "Name",
296
- options: options
297
- }))),
298
- getByRole = _render19.getByRole;
299
-
244
+ label: "Accept",
245
+ disabled: true
246
+ }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
247
+ label: "Name"
248
+ }), /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
249
+ label: "Name",
250
+ options: options
251
+ }))),
252
+ getByRole = _render19.getByRole;
300
253
  var closeAction = getByRole("button");
301
254
  var textarea = getByRole("textbox");
302
255
  expect(document.activeElement).toEqual(textarea);
303
-
304
256
  _userEvent["default"].tab();
305
-
306
257
  _userEvent["default"].tab();
307
-
308
258
  expect(document.activeElement).toEqual(closeAction);
309
-
310
259
  _userEvent["default"].tab();
311
-
312
260
  expect(document.activeElement).toEqual(textarea);
313
261
  });
314
262
  test("'display: none;', 'visibility: hidden;' and 'type = 'hidden'' elements are never autofocused", function () {
315
263
  var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dialog["default"], null, /*#__PURE__*/_react["default"].createElement("input", {
316
- label: "Name",
317
- style: {
318
- display: "none"
319
- }
320
- }), /*#__PURE__*/_react["default"].createElement("input", {
321
- label: "Name",
322
- style: {
323
- visibility: "hidden"
324
- }
325
- }), /*#__PURE__*/_react["default"].createElement("input", {
326
- type: "hidden",
327
- name: "example"
328
- }))),
329
- getByRole = _render20.getByRole;
330
-
264
+ label: "Name",
265
+ style: {
266
+ display: "none"
267
+ }
268
+ }), /*#__PURE__*/_react["default"].createElement("input", {
269
+ label: "Name",
270
+ style: {
271
+ visibility: "hidden"
272
+ }
273
+ }), /*#__PURE__*/_react["default"].createElement("input", {
274
+ type: "hidden",
275
+ name: "example"
276
+ }))),
277
+ getByRole = _render20.getByRole;
331
278
  var closeAction = getByRole("button");
332
279
  expect(document.activeElement).toEqual(closeAction);
333
-
334
280
  _userEvent["default"].tab();
335
-
336
281
  expect(document.activeElement).toEqual(closeAction);
337
282
  });
338
283
  test("Focus gets trapped in the Dialog when there are not focusable elements inside until it is closed", function () {
339
284
  var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
340
- label: "Name"
341
- }), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
342
- isCloseVisible: false
343
- }, /*#__PURE__*/_react["default"].createElement("h2", null, "Policy agreement"), /*#__PURE__*/_react["default"].createElement("p", null, "Sample text.")), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
344
- label: "Surname"
345
- }))),
346
- getAllByRole = _render21.getAllByRole;
347
-
285
+ label: "Name"
286
+ }), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
287
+ isCloseVisible: false
288
+ }, /*#__PURE__*/_react["default"].createElement("h2", null, "Policy agreement"), /*#__PURE__*/_react["default"].createElement("p", null, "Sample text.")), /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
289
+ label: "Surname"
290
+ }))),
291
+ getAllByRole = _render21.getAllByRole;
348
292
  var inputs = getAllByRole("textbox");
349
293
  var dialog = getAllByRole("dialog")[0];
350
-
351
294
  _userEvent["default"].tab();
352
-
353
295
  _userEvent["default"].tab();
354
-
355
296
  expect(document.activeElement).not.toEqual(inputs[1]);
356
-
357
297
  _react2.fireEvent.keyDown(dialog, {
358
298
  key: "Tab",
359
299
  shiftKey: true
360
300
  });
361
-
362
301
  _react2.fireEvent.keyDown(dialog, {
363
302
  key: "Tab",
364
303
  shiftKey: true
365
304
  });
366
-
367
305
  expect(document.activeElement).not.toEqual(inputs[0]);
368
306
  });
369
307
  });
package/dialog/types.d.ts CHANGED
@@ -1,31 +1,36 @@
1
1
  /// <reference types="react" />
2
- declare type Props = {
2
+ type Props = {
3
3
  /**
4
- * If true, the close 'x' button will be visible.
4
+ * If true, the close button will be visible.
5
5
  */
6
6
  isCloseVisible?: boolean;
7
7
  /**
8
- * This function will be called when the user clicks the close 'x' button.
9
- * The responsibility of hiding the modal lies with the user.
8
+ * This function will be called when the user clicks the close button.
9
+ * The responsibility of hiding the dialog lies with the user.
10
10
  */
11
11
  onCloseClick?: () => void;
12
+ /**
13
+ * This function will be called when the user clicks on the background of the modal.
14
+ * The responsibility of hiding the dialog lies with the user.
15
+ */
16
+ onBackgroundClick?: () => void;
12
17
  /**
13
18
  * If true, the dialog will be displayed over a darker background that covers the content behind.
14
19
  */
15
20
  overlay?: boolean;
16
21
  /**
17
- * This function will be called when the user clicks background of the modal.
18
- * The responsibility of hiding the modal lies with the user.
22
+ * Area within the dialog that can be used to render custom content.
23
+ * We strongly encourage users to not change the
24
+ * tabindex of the inner components or elements. This
25
+ * can lead to unpredictable behaviour for keyboard users, affecting
26
+ * the order of focus and focus locking within the dialog.
19
27
  */
20
- onBackgroundClick?: () => void;
28
+ children: React.ReactNode;
21
29
  /**
22
- * Value of the tabindex given to the close 'x' button.
30
+ * Value of the tabindex applied to the close button.
31
+ * Note that values greater than 0 are strongly discouraged. It can
32
+ * lead to unexpected behaviours with the focus within the dialog.
23
33
  */
24
34
  tabIndex?: number;
25
- /**
26
- * The area inside the dialog. This area can be used to render
27
- * custom content.
28
- */
29
- children: React.ReactNode;
30
35
  };
31
36
  export default Props;
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _react2 = require("@testing-library/react");
8
+ var _axeHelper = require("../../test/accessibility/axe-helper.js");
9
+ var _Divider = _interopRequireDefault(require("./Divider"));
10
+ describe("Divider accessibility tests", function () {
11
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
12
+ var _render, container, results;
13
+ return _regenerator["default"].wrap(function _callee$(_context) {
14
+ while (1) switch (_context.prev = _context.next) {
15
+ case 0:
16
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
17
+ orientation: "vertical",
18
+ color: "darkGrey",
19
+ decorative: false,
20
+ weight: "strong"
21
+ })), container = _render.container;
22
+ _context.next = 3;
23
+ return (0, _axeHelper.axe)(container);
24
+ case 3:
25
+ results = _context.sent;
26
+ expect(results).toHaveNoViolations();
27
+ case 5:
28
+ case "end":
29
+ return _context.stop();
30
+ }
31
+ }, _callee);
32
+ })));
33
+ });
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import DividerPropsType from "./types";
3
+ declare const DxcDivider: ({ orientation, weight, color, decorative }: DividerPropsType) => JSX.Element;
4
+ export default DxcDivider;
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+ var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
12
+ var _templateObject;
13
+ var DxcDivider = function DxcDivider(_ref) {
14
+ var _ref$orientation = _ref.orientation,
15
+ orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
16
+ _ref$weight = _ref.weight,
17
+ weight = _ref$weight === void 0 ? "regular" : _ref$weight,
18
+ _ref$color = _ref.color,
19
+ color = _ref$color === void 0 ? "mediumGrey" : _ref$color,
20
+ _ref$decorative = _ref.decorative,
21
+ decorative = _ref$decorative === void 0 ? true : _ref$decorative;
22
+ return /*#__PURE__*/_react["default"].createElement(StyledDivider, {
23
+ orientation: orientation,
24
+ weight: weight,
25
+ color: color,
26
+ "aria-orientation": orientation,
27
+ "aria-hidden": decorative
28
+ });
29
+ };
30
+ var StyledDivider = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref2) {
31
+ var orientation = _ref2.orientation,
32
+ weight = _ref2.weight,
33
+ color = _ref2.color;
34
+ return "\n border-color: ".concat(color === "lightGrey" ? _coreTokens["default"].color_grey_200 : color === "mediumGrey" ? _coreTokens["default"].color_grey_400 : _coreTokens["default"].color_grey_700, ";\n ").concat(orientation === "horizontal" ? "width" : "min-height", ": 100%;\n ").concat(orientation === "horizontal" ? "height" : "width", ": 0px;\n ").concat(orientation === "horizontal" ? "border-width: " + (weight === "regular" ? "1px 0 0 0" : "2px 0 0 0") : "border-width: " + (weight === "regular" ? "0 0 0 1px" : "0 0 0 2px"), ";\n margin: 0px;\n ");
35
+ });
36
+ var _default = exports["default"] = DxcDivider;