@dxc-technology/halstack-react 0.0.0-5908eb4 → 0.0.0-5a1e592

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 (526) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +1356 -0
  4. package/HalstackContext.js +335 -0
  5. package/README.md +28 -47
  6. package/accordion/Accordion.d.ts +4 -0
  7. package/accordion/Accordion.js +222 -0
  8. package/accordion/Accordion.stories.tsx +297 -0
  9. package/accordion/Accordion.test.js +71 -0
  10. package/accordion/types.d.ts +57 -0
  11. package/accordion/types.js +5 -0
  12. package/accordion-group/AccordionGroup.d.ts +8 -0
  13. package/accordion-group/AccordionGroup.js +128 -0
  14. package/accordion-group/AccordionGroup.stories.tsx +252 -0
  15. package/accordion-group/AccordionGroup.test.js +116 -0
  16. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  17. package/accordion-group/AccordionGroupAccordion.js +43 -0
  18. package/accordion-group/types.d.ts +67 -0
  19. package/accordion-group/types.js +5 -0
  20. package/alert/Alert.d.ts +4 -0
  21. package/alert/Alert.js +289 -0
  22. package/alert/Alert.stories.tsx +198 -0
  23. package/alert/Alert.test.js +92 -0
  24. package/alert/types.d.ts +49 -0
  25. package/alert/types.js +5 -0
  26. package/badge/Badge.d.ts +4 -0
  27. package/badge/Badge.js +61 -0
  28. package/badge/types.d.ts +5 -0
  29. package/badge/types.js +5 -0
  30. package/bleed/Bleed.d.ts +3 -0
  31. package/bleed/Bleed.js +51 -0
  32. package/bleed/Bleed.stories.tsx +342 -0
  33. package/bleed/types.d.ts +37 -0
  34. package/bleed/types.js +5 -0
  35. package/box/Box.d.ts +4 -0
  36. package/box/Box.js +97 -0
  37. package/box/Box.stories.tsx +119 -0
  38. package/box/Box.test.js +18 -0
  39. package/box/types.d.ts +32 -0
  40. package/box/types.js +5 -0
  41. package/bulleted-list/BulletedList.d.ts +7 -0
  42. package/bulleted-list/BulletedList.js +125 -0
  43. package/bulleted-list/BulletedList.stories.tsx +206 -0
  44. package/bulleted-list/types.d.ts +38 -0
  45. package/bulleted-list/types.js +5 -0
  46. package/button/Button.d.ts +4 -0
  47. package/button/Button.js +144 -0
  48. package/button/Button.stories.tsx +425 -0
  49. package/button/Button.test.js +46 -0
  50. package/button/types.d.ts +57 -0
  51. package/button/types.js +5 -0
  52. package/card/Card.d.ts +4 -0
  53. package/card/Card.js +143 -0
  54. package/card/Card.stories.tsx +171 -0
  55. package/card/Card.test.js +50 -0
  56. package/card/types.d.ts +62 -0
  57. package/card/types.js +5 -0
  58. package/checkbox/Checkbox.d.ts +4 -0
  59. package/checkbox/Checkbox.js +269 -0
  60. package/checkbox/Checkbox.stories.tsx +276 -0
  61. package/checkbox/Checkbox.test.js +228 -0
  62. package/checkbox/types.d.ts +72 -0
  63. package/checkbox/types.js +5 -0
  64. package/chip/Chip.d.ts +4 -0
  65. package/chip/Chip.js +140 -0
  66. package/chip/Chip.stories.tsx +214 -0
  67. package/chip/Chip.test.js +54 -0
  68. package/chip/types.d.ts +45 -0
  69. package/chip/types.js +5 -0
  70. package/common/OpenSans.css +69 -0
  71. package/common/coreTokens.d.ts +146 -0
  72. package/common/coreTokens.js +167 -0
  73. package/common/utils.d.ts +1 -0
  74. package/{dist/common → common}/utils.js +4 -4
  75. package/common/variables.d.ts +1499 -0
  76. package/common/variables.js +1378 -0
  77. package/date-input/Calendar.d.ts +4 -0
  78. package/date-input/Calendar.js +258 -0
  79. package/date-input/DateInput.d.ts +4 -0
  80. package/date-input/DateInput.js +271 -0
  81. package/date-input/DateInput.stories.tsx +314 -0
  82. package/date-input/DateInput.test.js +849 -0
  83. package/date-input/DatePicker.d.ts +4 -0
  84. package/date-input/DatePicker.js +146 -0
  85. package/date-input/Icons.d.ts +6 -0
  86. package/date-input/Icons.js +75 -0
  87. package/date-input/YearPicker.d.ts +4 -0
  88. package/date-input/YearPicker.js +126 -0
  89. package/date-input/types.d.ts +162 -0
  90. package/date-input/types.js +5 -0
  91. package/dialog/Dialog.d.ts +4 -0
  92. package/dialog/Dialog.js +131 -0
  93. package/dialog/Dialog.stories.tsx +195 -0
  94. package/dialog/Dialog.test.js +369 -0
  95. package/dialog/types.d.ts +31 -0
  96. package/dialog/types.js +5 -0
  97. package/dropdown/Dropdown.d.ts +4 -0
  98. package/dropdown/Dropdown.js +388 -0
  99. package/dropdown/Dropdown.stories.tsx +438 -0
  100. package/dropdown/Dropdown.test.js +586 -0
  101. package/dropdown/DropdownMenu.d.ts +4 -0
  102. package/dropdown/DropdownMenu.js +74 -0
  103. package/dropdown/DropdownMenuItem.d.ts +4 -0
  104. package/dropdown/DropdownMenuItem.js +79 -0
  105. package/dropdown/types.d.ts +100 -0
  106. package/dropdown/types.js +5 -0
  107. package/file-input/FileInput.d.ts +4 -0
  108. package/file-input/FileInput.js +547 -0
  109. package/file-input/FileInput.stories.tsx +618 -0
  110. package/file-input/FileInput.test.js +457 -0
  111. package/file-input/FileItem.d.ts +4 -0
  112. package/file-input/FileItem.js +162 -0
  113. package/file-input/types.d.ts +129 -0
  114. package/file-input/types.js +5 -0
  115. package/flex/Flex.d.ts +4 -0
  116. package/flex/Flex.js +71 -0
  117. package/flex/Flex.stories.tsx +112 -0
  118. package/flex/types.d.ts +97 -0
  119. package/flex/types.js +5 -0
  120. package/footer/Footer.d.ts +4 -0
  121. package/footer/Footer.js +165 -0
  122. package/footer/Footer.stories.tsx +152 -0
  123. package/footer/Footer.test.js +99 -0
  124. package/footer/Icons.d.ts +2 -0
  125. package/footer/Icons.js +77 -0
  126. package/footer/types.d.ts +64 -0
  127. package/footer/types.js +5 -0
  128. package/grid/Grid.d.ts +7 -0
  129. package/grid/Grid.js +91 -0
  130. package/grid/Grid.stories.tsx +219 -0
  131. package/grid/types.d.ts +115 -0
  132. package/grid/types.js +5 -0
  133. package/header/Header.d.ts +8 -0
  134. package/header/Header.js +276 -0
  135. package/header/Header.stories.tsx +251 -0
  136. package/header/Header.test.js +79 -0
  137. package/header/Icons.d.ts +2 -0
  138. package/header/Icons.js +34 -0
  139. package/header/types.d.ts +34 -0
  140. package/header/types.js +5 -0
  141. package/heading/Heading.d.ts +4 -0
  142. package/{dist/heading → heading}/Heading.js +32 -95
  143. package/heading/Heading.stories.tsx +54 -0
  144. package/heading/Heading.test.js +186 -0
  145. package/heading/types.d.ts +33 -0
  146. package/heading/types.js +5 -0
  147. package/image/Image.d.ts +4 -0
  148. package/image/Image.js +85 -0
  149. package/image/Image.stories.tsx +127 -0
  150. package/image/types.d.ts +72 -0
  151. package/image/types.js +5 -0
  152. package/inset/Inset.d.ts +3 -0
  153. package/inset/Inset.js +51 -0
  154. package/inset/Inset.stories.tsx +230 -0
  155. package/inset/types.d.ts +37 -0
  156. package/inset/types.js +5 -0
  157. package/layout/ApplicationLayout.d.ts +20 -0
  158. package/layout/ApplicationLayout.js +174 -0
  159. package/layout/ApplicationLayout.stories.tsx +162 -0
  160. package/layout/Icons.d.ts +8 -0
  161. package/layout/Icons.js +62 -0
  162. package/layout/SidenavContext.d.ts +5 -0
  163. package/layout/SidenavContext.js +19 -0
  164. package/layout/types.d.ts +41 -0
  165. package/layout/types.js +5 -0
  166. package/link/Link.d.ts +4 -0
  167. package/link/Link.js +136 -0
  168. package/link/Link.stories.tsx +253 -0
  169. package/link/Link.test.js +81 -0
  170. package/link/types.d.ts +54 -0
  171. package/link/types.js +5 -0
  172. package/main.d.ts +46 -0
  173. package/{dist/main.js → main.js} +148 -106
  174. package/nav-tabs/NavTabs.d.ts +8 -0
  175. package/nav-tabs/NavTabs.js +122 -0
  176. package/nav-tabs/NavTabs.stories.tsx +274 -0
  177. package/nav-tabs/NavTabs.test.js +82 -0
  178. package/nav-tabs/Tab.d.ts +4 -0
  179. package/nav-tabs/Tab.js +146 -0
  180. package/nav-tabs/types.d.ts +52 -0
  181. package/nav-tabs/types.js +5 -0
  182. package/number-input/NumberInput.d.ts +11 -0
  183. package/number-input/NumberInput.js +78 -0
  184. package/number-input/NumberInput.stories.tsx +115 -0
  185. package/number-input/NumberInput.test.js +725 -0
  186. package/number-input/types.d.ts +124 -0
  187. package/number-input/types.js +5 -0
  188. package/package.json +47 -40
  189. package/paginator/Icons.d.ts +5 -0
  190. package/paginator/Icons.js +54 -0
  191. package/paginator/Paginator.d.ts +4 -0
  192. package/paginator/Paginator.js +163 -0
  193. package/paginator/Paginator.stories.tsx +87 -0
  194. package/paginator/Paginator.test.js +318 -0
  195. package/paginator/types.d.ts +38 -0
  196. package/paginator/types.js +5 -0
  197. package/paragraph/Paragraph.d.ts +5 -0
  198. package/paragraph/Paragraph.js +38 -0
  199. package/paragraph/Paragraph.stories.tsx +44 -0
  200. package/password-input/Icons.d.ts +6 -0
  201. package/password-input/Icons.js +39 -0
  202. package/password-input/PasswordInput.d.ts +4 -0
  203. package/password-input/PasswordInput.js +119 -0
  204. package/password-input/PasswordInput.stories.tsx +132 -0
  205. package/password-input/PasswordInput.test.js +174 -0
  206. package/password-input/types.d.ts +110 -0
  207. package/password-input/types.js +5 -0
  208. package/progress-bar/ProgressBar.d.ts +4 -0
  209. package/progress-bar/ProgressBar.js +176 -0
  210. package/progress-bar/ProgressBar.stories.jsx +93 -0
  211. package/progress-bar/ProgressBar.test.js +110 -0
  212. package/progress-bar/types.d.ts +37 -0
  213. package/progress-bar/types.js +5 -0
  214. package/quick-nav/QuickNav.d.ts +4 -0
  215. package/quick-nav/QuickNav.js +117 -0
  216. package/quick-nav/QuickNav.stories.tsx +356 -0
  217. package/quick-nav/types.d.ts +21 -0
  218. package/quick-nav/types.js +5 -0
  219. package/radio-group/Radio.d.ts +4 -0
  220. package/radio-group/Radio.js +156 -0
  221. package/radio-group/RadioGroup.d.ts +4 -0
  222. package/radio-group/RadioGroup.js +281 -0
  223. package/radio-group/RadioGroup.stories.tsx +214 -0
  224. package/radio-group/RadioGroup.test.js +749 -0
  225. package/radio-group/types.d.ts +114 -0
  226. package/radio-group/types.js +5 -0
  227. package/resultsetTable/Icons.d.ts +7 -0
  228. package/resultsetTable/Icons.js +51 -0
  229. package/resultsetTable/ResultsetTable.d.ts +4 -0
  230. package/resultsetTable/ResultsetTable.js +195 -0
  231. package/resultsetTable/ResultsetTable.stories.tsx +300 -0
  232. package/resultsetTable/ResultsetTable.test.js +325 -0
  233. package/resultsetTable/types.d.ts +67 -0
  234. package/resultsetTable/types.js +5 -0
  235. package/select/Icons.d.ts +10 -0
  236. package/select/Icons.js +93 -0
  237. package/select/Listbox.d.ts +4 -0
  238. package/select/Listbox.js +169 -0
  239. package/select/Option.d.ts +4 -0
  240. package/select/Option.js +97 -0
  241. package/select/Select.d.ts +4 -0
  242. package/select/Select.js +666 -0
  243. package/select/Select.stories.tsx +971 -0
  244. package/select/Select.test.js +2228 -0
  245. package/select/types.d.ts +210 -0
  246. package/select/types.js +5 -0
  247. package/sidenav/Icons.d.ts +7 -0
  248. package/sidenav/Icons.js +51 -0
  249. package/sidenav/Sidenav.d.ts +10 -0
  250. package/sidenav/Sidenav.js +238 -0
  251. package/sidenav/Sidenav.stories.tsx +282 -0
  252. package/sidenav/Sidenav.test.js +44 -0
  253. package/sidenav/types.d.ts +76 -0
  254. package/sidenav/types.js +5 -0
  255. package/slider/Slider.d.ts +4 -0
  256. package/slider/Slider.js +342 -0
  257. package/slider/Slider.stories.tsx +240 -0
  258. package/slider/Slider.test.js +250 -0
  259. package/slider/types.d.ts +86 -0
  260. package/slider/types.js +5 -0
  261. package/spinner/Spinner.d.ts +4 -0
  262. package/spinner/Spinner.js +244 -0
  263. package/spinner/Spinner.stories.jsx +129 -0
  264. package/spinner/Spinner.test.js +64 -0
  265. package/spinner/types.d.ts +32 -0
  266. package/spinner/types.js +5 -0
  267. package/switch/Switch.d.ts +4 -0
  268. package/switch/Switch.js +262 -0
  269. package/switch/Switch.stories.tsx +171 -0
  270. package/switch/Switch.test.js +225 -0
  271. package/switch/types.d.ts +66 -0
  272. package/switch/types.js +5 -0
  273. package/table/Table.d.ts +4 -0
  274. package/{dist/table → table}/Table.js +16 -26
  275. package/table/Table.stories.jsx +356 -0
  276. package/table/Table.test.js +26 -0
  277. package/table/types.d.ts +21 -0
  278. package/table/types.js +5 -0
  279. package/tabs/Tab.d.ts +4 -0
  280. package/tabs/Tab.js +132 -0
  281. package/tabs/Tabs.d.ts +4 -0
  282. package/tabs/Tabs.js +461 -0
  283. package/tabs/Tabs.stories.tsx +226 -0
  284. package/tabs/Tabs.test.js +350 -0
  285. package/tabs/types.d.ts +92 -0
  286. package/tabs/types.js +5 -0
  287. package/tag/Tag.d.ts +4 -0
  288. package/tag/Tag.js +181 -0
  289. package/tag/Tag.stories.tsx +155 -0
  290. package/tag/Tag.test.js +60 -0
  291. package/tag/types.d.ts +69 -0
  292. package/tag/types.js +5 -0
  293. package/text-input/Icons.d.ts +8 -0
  294. package/text-input/Icons.js +60 -0
  295. package/text-input/Suggestion.d.ts +4 -0
  296. package/text-input/Suggestion.js +84 -0
  297. package/text-input/Suggestions.d.ts +4 -0
  298. package/text-input/Suggestions.js +134 -0
  299. package/text-input/TextInput.d.ts +4 -0
  300. package/text-input/TextInput.js +659 -0
  301. package/text-input/TextInput.stories.tsx +608 -0
  302. package/text-input/TextInput.test.js +1812 -0
  303. package/text-input/types.d.ts +201 -0
  304. package/text-input/types.js +5 -0
  305. package/textarea/Textarea.d.ts +4 -0
  306. package/textarea/Textarea.js +278 -0
  307. package/textarea/Textarea.stories.jsx +224 -0
  308. package/textarea/Textarea.test.js +479 -0
  309. package/textarea/types.d.ts +141 -0
  310. package/textarea/types.js +5 -0
  311. package/toggle-group/ToggleGroup.d.ts +4 -0
  312. package/toggle-group/ToggleGroup.js +241 -0
  313. package/toggle-group/ToggleGroup.stories.tsx +218 -0
  314. package/toggle-group/ToggleGroup.test.js +170 -0
  315. package/toggle-group/types.d.ts +114 -0
  316. package/toggle-group/types.js +5 -0
  317. package/typography/Typography.d.ts +4 -0
  318. package/typography/Typography.js +32 -0
  319. package/typography/Typography.stories.tsx +198 -0
  320. package/typography/types.d.ts +18 -0
  321. package/typography/types.js +5 -0
  322. package/useTheme.d.ts +1252 -0
  323. package/{dist/useTheme.js → useTheme.js} +3 -3
  324. package/useTranslatedLabels.d.ts +85 -0
  325. package/useTranslatedLabels.js +20 -0
  326. package/utils/BaseTypography.d.ts +21 -0
  327. package/utils/BaseTypography.js +108 -0
  328. package/utils/FocusLock.d.ts +13 -0
  329. package/utils/FocusLock.js +138 -0
  330. package/wizard/Wizard.d.ts +4 -0
  331. package/wizard/Wizard.js +285 -0
  332. package/wizard/Wizard.stories.tsx +253 -0
  333. package/wizard/Wizard.test.js +141 -0
  334. package/wizard/types.d.ts +64 -0
  335. package/wizard/types.js +5 -0
  336. package/babel.config.js +0 -8
  337. package/dist/BackgroundColorContext.js +0 -46
  338. package/dist/ThemeContext.js +0 -216
  339. package/dist/accordion/Accordion.js +0 -346
  340. package/dist/accordion/Accordion.stories.js +0 -207
  341. package/dist/accordion/readme.md +0 -96
  342. package/dist/accordion-group/AccordionGroup.js +0 -188
  343. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  344. package/dist/accordion-group/readme.md +0 -70
  345. package/dist/alert/Alert.js +0 -388
  346. package/dist/alert/Alert.stories.js +0 -158
  347. package/dist/alert/close.svg +0 -4
  348. package/dist/alert/error.svg +0 -4
  349. package/dist/alert/info.svg +0 -4
  350. package/dist/alert/readme.md +0 -43
  351. package/dist/alert/success.svg +0 -4
  352. package/dist/alert/warning.svg +0 -4
  353. package/dist/badge/Badge.js +0 -63
  354. package/dist/box/Box.js +0 -164
  355. package/dist/button/Button.js +0 -232
  356. package/dist/button/Button.stories.js +0 -224
  357. package/dist/button/readme.md +0 -93
  358. package/dist/card/Card.js +0 -254
  359. package/dist/checkbox/Checkbox.js +0 -294
  360. package/dist/checkbox/Checkbox.stories.js +0 -144
  361. package/dist/checkbox/readme.md +0 -116
  362. package/dist/chip/Chip.js +0 -269
  363. package/dist/common/OpenSans.css +0 -81
  364. package/dist/common/RequiredComponent.js +0 -40
  365. package/dist/common/variables.js +0 -1305
  366. package/dist/date/Date.js +0 -381
  367. package/dist/date/Date.stories.js +0 -205
  368. package/dist/date/readme.md +0 -73
  369. package/dist/dialog/Dialog.js +0 -235
  370. package/dist/dialog/Dialog.stories.js +0 -217
  371. package/dist/dialog/readme.md +0 -32
  372. package/dist/dropdown/Dropdown.js +0 -493
  373. package/dist/dropdown/Dropdown.stories.js +0 -249
  374. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  375. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  376. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  377. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  378. package/dist/dropdown/readme.md +0 -69
  379. package/dist/footer/Footer.js +0 -407
  380. package/dist/footer/Footer.stories.js +0 -94
  381. package/dist/footer/dxc_logo.svg +0 -15
  382. package/dist/footer/readme.md +0 -41
  383. package/dist/header/Header.js +0 -431
  384. package/dist/header/Header.stories.js +0 -176
  385. package/dist/header/close_icon.svg +0 -1
  386. package/dist/header/dxc_logo_black.svg +0 -8
  387. package/dist/header/hamb_menu_black.svg +0 -1
  388. package/dist/header/hamb_menu_white.svg +0 -1
  389. package/dist/header/readme.md +0 -33
  390. package/dist/input-text/InputText.js +0 -672
  391. package/dist/input-text/InputText.stories.js +0 -209
  392. package/dist/input-text/error.svg +0 -1
  393. package/dist/input-text/readme.md +0 -91
  394. package/dist/layout/ApplicationLayout.js +0 -331
  395. package/dist/layout/facebook.svg +0 -45
  396. package/dist/layout/linkedin.svg +0 -50
  397. package/dist/layout/twitter.svg +0 -53
  398. package/dist/link/Link.js +0 -241
  399. package/dist/link/readme.md +0 -51
  400. package/dist/new-date/NewDate.js +0 -391
  401. package/dist/new-input-text/NewInputText.js +0 -929
  402. package/dist/number/Number.js +0 -127
  403. package/dist/number/NumberContext.js +0 -16
  404. package/dist/paginator/Paginator.js +0 -283
  405. package/dist/paginator/images/next.svg +0 -3
  406. package/dist/paginator/images/nextPage.svg +0 -3
  407. package/dist/paginator/images/previous.svg +0 -3
  408. package/dist/paginator/images/previousPage.svg +0 -3
  409. package/dist/paginator/readme.md +0 -50
  410. package/dist/password/Password.js +0 -139
  411. package/dist/password/styles.css +0 -3
  412. package/dist/progress-bar/ProgressBar.js +0 -206
  413. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  414. package/dist/progress-bar/readme.md +0 -63
  415. package/dist/radio/Radio.js +0 -209
  416. package/dist/radio/Radio.stories.js +0 -166
  417. package/dist/radio/readme.md +0 -70
  418. package/dist/resultsetTable/ResultsetTable.js +0 -358
  419. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  420. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  421. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  422. package/dist/select/Select.js +0 -563
  423. package/dist/select/Select.stories.js +0 -235
  424. package/dist/select/readme.md +0 -72
  425. package/dist/sidenav/Sidenav.js +0 -183
  426. package/dist/slider/Slider.js +0 -315
  427. package/dist/slider/Slider.stories.js +0 -241
  428. package/dist/slider/readme.md +0 -64
  429. package/dist/spinner/Spinner.js +0 -214
  430. package/dist/spinner/Spinner.stories.js +0 -183
  431. package/dist/spinner/readme.md +0 -65
  432. package/dist/switch/Switch.js +0 -222
  433. package/dist/switch/Switch.stories.js +0 -134
  434. package/dist/switch/readme.md +0 -133
  435. package/dist/tabs/Tabs.js +0 -343
  436. package/dist/tabs/Tabs.stories.js +0 -130
  437. package/dist/tabs/readme.md +0 -78
  438. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  439. package/dist/tabs-for-sections/readme.md +0 -78
  440. package/dist/tag/Tag.js +0 -280
  441. package/dist/textarea/Textarea.js +0 -260
  442. package/dist/toggle/Toggle.js +0 -220
  443. package/dist/toggle/Toggle.stories.js +0 -297
  444. package/dist/toggle/readme.md +0 -80
  445. package/dist/toggle-group/ToggleGroup.js +0 -241
  446. package/dist/toggle-group/readme.md +0 -82
  447. package/dist/upload/Upload.js +0 -205
  448. package/dist/upload/Upload.stories.js +0 -72
  449. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  450. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  451. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  452. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  453. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  454. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  455. package/dist/upload/file-upload/FileToUpload.js +0 -184
  456. package/dist/upload/file-upload/audio-icon.svg +0 -4
  457. package/dist/upload/file-upload/close.svg +0 -4
  458. package/dist/upload/file-upload/file-icon.svg +0 -4
  459. package/dist/upload/file-upload/video-icon.svg +0 -4
  460. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  461. package/dist/upload/readme.md +0 -37
  462. package/dist/upload/transaction/Transaction.js +0 -171
  463. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  464. package/dist/upload/transaction/audio-icon.svg +0 -4
  465. package/dist/upload/transaction/error-icon.svg +0 -4
  466. package/dist/upload/transaction/file-icon-err.svg +0 -4
  467. package/dist/upload/transaction/file-icon.svg +0 -4
  468. package/dist/upload/transaction/image-icon-err.svg +0 -4
  469. package/dist/upload/transaction/image-icon.svg +0 -4
  470. package/dist/upload/transaction/success-icon.svg +0 -4
  471. package/dist/upload/transaction/video-icon-err.svg +0 -4
  472. package/dist/upload/transaction/video-icon.svg +0 -4
  473. package/dist/upload/transactions/Transactions.js +0 -138
  474. package/dist/wizard/Wizard.js +0 -411
  475. package/dist/wizard/invalid_icon.svg +0 -5
  476. package/dist/wizard/valid_icon.svg +0 -5
  477. package/dist/wizard/validation-wrong.svg +0 -6
  478. package/test/Accordion.test.js +0 -33
  479. package/test/AccordionGroup.test.js +0 -125
  480. package/test/Alert.test.js +0 -53
  481. package/test/Box.test.js +0 -10
  482. package/test/Button.test.js +0 -18
  483. package/test/Card.test.js +0 -30
  484. package/test/Checkbox.test.js +0 -45
  485. package/test/Chip.test.js +0 -25
  486. package/test/Date.test.js +0 -393
  487. package/test/Dialog.test.js +0 -23
  488. package/test/Dropdown.test.js +0 -130
  489. package/test/Footer.test.js +0 -99
  490. package/test/Header.test.js +0 -39
  491. package/test/Heading.test.js +0 -35
  492. package/test/InputText.test.js +0 -240
  493. package/test/Link.test.js +0 -43
  494. package/test/NewDate.test.js +0 -189
  495. package/test/NewInputText.test.js +0 -663
  496. package/test/Number.test.js +0 -205
  497. package/test/Paginator.test.js +0 -177
  498. package/test/Password.test.js +0 -63
  499. package/test/ProgressBar.test.js +0 -35
  500. package/test/Radio.test.js +0 -37
  501. package/test/ResultsetTable.test.js +0 -330
  502. package/test/Select.test.js +0 -192
  503. package/test/Sidenav.test.js +0 -45
  504. package/test/Slider.test.js +0 -82
  505. package/test/Spinner.test.js +0 -27
  506. package/test/Switch.test.js +0 -45
  507. package/test/Table.test.js +0 -36
  508. package/test/Tabs.test.js +0 -109
  509. package/test/TabsForSections.test.js +0 -34
  510. package/test/Tag.test.js +0 -32
  511. package/test/TextArea.test.js +0 -52
  512. package/test/ToggleGroup.test.js +0 -81
  513. package/test/Upload.test.js +0 -60
  514. package/test/Wizard.test.js +0 -130
  515. package/test/mocks/pngMock.js +0 -1
  516. package/test/mocks/svgMock.js +0 -1
  517. /package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  518. /package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  519. /package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  520. /package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  521. /package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  522. /package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  523. /package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  524. /package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  525. /package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  526. /package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
@@ -1,99 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import DxcFooter from "../src/footer/Footer";
4
- import icon from "../../app/src/images/linkedin.svg";
5
-
6
- describe("Footer component tests", () => {
7
- test("Footer renders with default logo", () => {
8
- const { getByRole } = render(<DxcFooter></DxcFooter>);
9
- expect(getByRole("img")).toBeTruthy();
10
- });
11
-
12
- test("Footer renders with logo", () => {
13
- const { getByRole } = render(<DxcFooter logoSrc={icon}></DxcFooter>);
14
- expect(getByRole("img")).toBeTruthy();
15
- });
16
-
17
- test("Footer renders with social links", () => {
18
- const social = [
19
- {
20
- href: "https://www.test.com/test",
21
- logoSrc: icon,
22
- },
23
- ];
24
- const { getByRole } = render(<DxcFooter socialLinks={social}></DxcFooter>);
25
- const socialIcon = getByRole("link");
26
- expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/test");
27
- });
28
-
29
- test("Footer renders with bottom links", () => {
30
- const bottom = [
31
- {
32
- href: "https://www.test.com/test",
33
- text: "bottom-link-text",
34
- },
35
- ];
36
- const { getByText } = render(<DxcFooter bottomLinks={bottom}></DxcFooter>);
37
- const link = getByText("bottom-link-text");
38
- expect(link.getAttribute("href")).toBe("https://www.test.com/test");
39
- });
40
-
41
- test("Footer renders with copyright text", () => {
42
- const { getByText } = render(<DxcFooter copyright="test-copyright"></DxcFooter>);
43
- expect(getByText("test-copyright")).toBeTruthy();
44
- });
45
-
46
- test("Footer renders with correct children", () => {
47
- //We need to force the offsetWidth value
48
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 1024 });
49
-
50
- const { getByText } = render(
51
- <DxcFooter>
52
- <p>footer-child-text</p>
53
- </DxcFooter>
54
- );
55
-
56
- expect(getByText("footer-child-text")).toBeTruthy();
57
- });
58
-
59
- test("Footer renders without children in mobile", () => {
60
- //425 is mobile width
61
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 425 });
62
-
63
- const { queryByText } = render(
64
- <DxcFooter>
65
- <p>footer-child-text</p>
66
- </DxcFooter>
67
- );
68
-
69
- expect(queryByText("footer-child-text")).toBeFalsy();
70
- });
71
-
72
- test("Footer is fully rendered", () => {
73
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 1024 });
74
-
75
- const social = [
76
- {
77
- href: "https://www.test.com/social",
78
- logoSrc: icon,
79
- },
80
- ];
81
- const bottom = [
82
- {
83
- href: "https://www.test.com/bottom",
84
- text: "bottom-link-text",
85
- },
86
- ];
87
- const { getAllByRole, getByText } = render(
88
- <DxcFooter socialLinks={social} bottomLinks={bottom} copyright="test-copyright">
89
- <p>footer-child-text</p>
90
- </DxcFooter>
91
- );
92
- const socialIcon = getAllByRole("link")[0];
93
- expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
94
- const bottomLink = getByText("bottom-link-text");
95
- expect(bottomLink.getAttribute("href")).toBe("https://www.test.com/bottom");
96
- expect(getByText("test-copyright")).toBeTruthy();
97
- expect(getByText("footer-child-text")).toBeTruthy();
98
- });
99
- });
@@ -1,39 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcHeader from "../src/header/Header";
4
- import icon from "../../app/src/images/linkedin.svg";
5
-
6
- describe("Header component tests", () => {
7
- test("Header renders with default logo", () => {
8
- const { getByRole } = render(<DxcHeader></DxcHeader>);
9
- expect(getByRole("img")).toBeTruthy();
10
- });
11
-
12
- test("Header renders with logo", () => {
13
- const { getByRole } = render(<DxcHeader logoSrc={icon}></DxcHeader>);
14
- expect(getByRole("img")).toBeTruthy();
15
- });
16
-
17
- test("Call correct function on logo click", () => {
18
- const onClick = jest.fn();
19
- const { getByRole } = render(<DxcHeader onClick={onClick}></DxcHeader>);
20
- const logo = getByRole("img");
21
- fireEvent.click(logo);
22
- expect(onClick).toHaveBeenCalled();
23
- });
24
-
25
- test("Header renders with correct children", () => {
26
- //We need to force the offsetWidth value
27
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 1024 });
28
-
29
- const { getByText } = render(<DxcHeader content={<p>header-child-text</p>}></DxcHeader>);
30
- expect(getByText("header-child-text")).toBeTruthy();
31
- });
32
-
33
- test("Header renders menu button in mobile", () => {
34
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 425 });
35
-
36
- const { getByText } = render(<DxcHeader responsiveContent={(closeMenu) => <p>header-child-text</p>}></DxcHeader>);
37
- expect(getByText("Menu")).toBeTruthy();
38
- });
39
- });
@@ -1,35 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import DxcHeading from "../src/heading/Heading";
4
-
5
- describe("Heading component tests", () => {
6
- test("Footer renders with default level", () => {
7
- const { getByText } = render(<DxcHeading text="my-heading-test"></DxcHeading>);
8
- expect(getByText("my-heading-test")).toBeTruthy();
9
- });
10
-
11
- test("Footer renders with level 1", () => {
12
- const { getByText } = render(<DxcHeading text="my-heading-test" level={1}></DxcHeading>);
13
- expect(getByText("my-heading-test")).toBeTruthy();
14
- });
15
-
16
- test("Footer renders with level 2", () => {
17
- const { getByText } = render(<DxcHeading text="my-heading-test" level={2}></DxcHeading>);
18
- expect(getByText("my-heading-test")).toBeTruthy();
19
- });
20
-
21
- test("Footer renders with level 3", () => {
22
- const { getByText } = render(<DxcHeading text="my-heading-test" level={3}></DxcHeading>);
23
- expect(getByText("my-heading-test")).toBeTruthy();
24
- });
25
-
26
- test("Footer renders with level 4", () => {
27
- const { getByText } = render(<DxcHeading text="my-heading-test" level={4}></DxcHeading>);
28
- expect(getByText("my-heading-test")).toBeTruthy();
29
- });
30
-
31
- test("Footer renders with level 5", () => {
32
- const { getByText } = render(<DxcHeading text="my-heading-test" level={5}></DxcHeading>);
33
- expect(getByText("my-heading-test")).toBeTruthy();
34
- });
35
- });
@@ -1,240 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent, waitFor, screen, act, waitForElementToBeRemoved } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
-
5
- import icon from "../../app/src/images/invision.svg";
6
-
7
- import DxcInputText from "../src/input-text/InputText";
8
-
9
- const countries = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
10
-
11
- //Mock of popper.js because of an issue with createRange function
12
- //(https://github.com/popperjs/popper-core/issues/478)
13
- jest.mock("popper.js", () => {
14
- const PopperJS = jest.requireActual("popper.js");
15
-
16
- return class {
17
- static placements = PopperJS.placements;
18
-
19
- constructor() {
20
- return {
21
- destroy: () => {},
22
- scheduleUpdate: () => {},
23
- update: () => {},
24
- };
25
- }
26
- };
27
- });
28
-
29
- describe("InputText component tests", () => {
30
- test("Input renders with correct label", () => {
31
- const { getByText } = render(<DxcInputText label="Input label" />);
32
- expect(getByText("Input label")).toBeTruthy();
33
- });
34
-
35
- test("onChange function is called correctly", () => {
36
- const onChange = jest.fn();
37
- const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} />);
38
- const input = getByRole("textbox");
39
- userEvent.type(input, "20000");
40
- expect(onChange).toHaveBeenCalled();
41
- expect(onChange).toHaveBeenCalledWith("20000");
42
- });
43
- test("onBlur function is called correctly", () => {
44
- const onBlur = jest.fn();
45
- const onChange = jest.fn();
46
-
47
- const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} onBlur={onBlur} />);
48
- const input = getByRole("textbox");
49
- userEvent.type(input, "Test value");
50
- fireEvent.blur(input);
51
- expect(onBlur).toHaveBeenCalled();
52
- expect(onBlur).toHaveBeenCalledWith("Test value");
53
- });
54
-
55
- test("Uncontrolled component", () => {
56
- const onChange = jest.fn();
57
- const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} />);
58
- const input = getByRole("textbox");
59
- userEvent.type(input, "20000");
60
- expect(onChange).toHaveBeenCalled();
61
- expect(onChange).toHaveBeenCalledWith("20000");
62
- expect(input.value).toBe("20000");
63
- });
64
-
65
- test("Controlled component", () => {
66
- const onChange = jest.fn();
67
- const onBlur = jest.fn();
68
- const { getByRole } = render(
69
- <DxcInputText label="Input label" value="Test value" onChange={onChange} onBlur={onBlur} />
70
- );
71
- const input = getByRole("textbox");
72
- userEvent.type(input, "20000");
73
- expect(onChange).toHaveBeenCalled();
74
- expect(input.value).toBe("Test value");
75
- fireEvent.blur(input);
76
- expect(onBlur).toHaveBeenCalled();
77
- expect(onBlur).toHaveBeenCalledWith("Test value");
78
- });
79
- test("Prefix icon onClick", () => {
80
- const onClick = jest.fn();
81
- const { getByRole } = render(<DxcInputText label="Input label" prefixIconSrc={icon} onClickPrefix={onClick} />);
82
- const prefixIcon = getByRole("img");
83
- userEvent.click(prefixIcon);
84
- expect(onClick).toHaveBeenCalled();
85
- });
86
- test("Suffix icon onClick", () => {
87
- const onClick = jest.fn();
88
- const { getByRole } = render(<DxcInputText label="Input label" suffixIconSrc={icon} onClickSuffix={onClick} />);
89
- const suffixIcon = getByRole("img");
90
- userEvent.click(suffixIcon);
91
- expect(onClick).toHaveBeenCalled();
92
- });
93
- });
94
-
95
- describe("Autocomplete component Synchronous tests", () => {
96
- test("Autocomplete no matches found is shown", async () => {
97
- const onChangeAtocomplete = jest.fn();
98
- render(
99
- <DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
100
- );
101
- const input = screen.getByRole("textbox");
102
- fireEvent.focus(input);
103
- expect(screen.getByText("Andorra")).toBeTruthy();
104
- userEvent.type(input, "X");
105
- expect(screen.getByText("No matches found.")).toBeTruthy();
106
- });
107
-
108
- test("Autocomplete suggestions are shown", async () => {
109
- const onChangeAtocomplete = jest.fn();
110
- render(
111
- <DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
112
- );
113
- const input = screen.getByRole("textbox");
114
- fireEvent.focus(input);
115
- expect(screen.getByText("Andorra")).toBeTruthy();
116
- });
117
-
118
- test("Autocomplete UNCONTROLLED suggestion selected", async () => {
119
- const onChangeAtocomplete = jest.fn();
120
- render(
121
- <DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
122
- );
123
- const input = screen.getByRole("textbox");
124
- fireEvent.focus(input);
125
- expect(screen.getByText("Andorra")).toBeTruthy();
126
- userEvent.type(screen.getByRole("textbox"), "Alb");
127
- expect(onChangeAtocomplete).toHaveBeenCalled();
128
- expect(screen.getByText("Albania")).toBeTruthy();
129
- const suggestion1 = screen.getByText("Albania");
130
- act(() => {
131
- userEvent.click(suggestion1);
132
- });
133
-
134
- // expect(onChangeAtocomplete).toHaveBeenCalledWith("Albania");
135
- expect(screen.getByRole("textbox").value).toBe("Albania");
136
- });
137
-
138
- test("Autocomplete CONTROLLED suggestions selected", async () => {
139
- const onChangeAtocomplete = jest.fn();
140
- render(
141
- <DxcInputText
142
- label="Autocomplete Countries"
143
- value="Andorra"
144
- autocompleteOptions={countries}
145
- onChange={onChangeAtocomplete}
146
- />
147
- );
148
- const input = screen.getByRole("textbox");
149
- fireEvent.focus(input);
150
- expect(screen.getByText("Andorra")).toBeTruthy();
151
-
152
- expect(screen.getByText("Andorra")).toBeTruthy();
153
- const suggestion1 = screen.getByText("Andorra");
154
- act(() => {
155
- userEvent.click(suggestion1);
156
- });
157
-
158
- expect(onChangeAtocomplete).toHaveBeenCalledWith("Andorra");
159
- });
160
- });
161
-
162
- describe("InputText component Asynchronous Autocomplete tests", () => {
163
- test("Autocomplete Searching is shown", async () => {
164
- const callbackFunc = jest.fn(() => new Promise((resolve) => setTimeout(resolve(["Italy", "Spain"]), 1000)));
165
-
166
- const onChangeAtocomplete = jest.fn();
167
- render(
168
- <DxcInputText label="Autocomplete Countries" autocompleteOptions={callbackFunc} onChange={onChangeAtocomplete} />
169
- );
170
- const input = screen.getByRole("textbox");
171
- fireEvent.focus(input);
172
- await waitForElementToBeRemoved(() => screen.getByText(/Searching.../i));
173
- expect(screen.getByText("Italy")).toBeTruthy();
174
- expect(screen.getByText("Spain")).toBeTruthy();
175
- });
176
-
177
- test("Asynchronous UNCONTROLLED autocomplete tests", async () => {
178
- const callbackFunc = jest.fn(() => new Promise((resolve) => setTimeout(resolve(["Italy", "Spain"]), 1000)));
179
- const onChangeAtocomplete = jest.fn();
180
- render(
181
- <DxcInputText label="Autocomplete Countries" onChange={onChangeAtocomplete} autocompleteOptions={callbackFunc} />
182
- );
183
- const input = screen.getByRole("textbox");
184
- fireEvent.focus(input);
185
- userEvent.type(input, "And");
186
- await waitForElementToBeRemoved(() => screen.getByText(/Searching.../i));
187
- expect(screen.getByText("Italy")).toBeTruthy();
188
- expect(screen.getByText("Spain")).toBeTruthy();
189
- const suggestion1 = screen.getByText("Spain");
190
- act(() => {
191
- userEvent.click(suggestion1);
192
- });
193
- expect(onChangeAtocomplete).toHaveBeenCalledWith("Spain");
194
- expect(screen.getByRole("textbox").value).toBe("Spain");
195
- });
196
-
197
- test("Asynchronous CONTROLLED autocomplete tests", async () => {
198
- const callbackFunc = jest.fn(() => new Promise((resolve) => setTimeout(resolve(["Italy", "Spain"]), 3000)));
199
- const onChangeAtocomplete = jest.fn();
200
- render(
201
- <DxcInputText
202
- label="Autocomplete Countries"
203
- value="test value"
204
- onChange={onChangeAtocomplete}
205
- autocompleteOptions={callbackFunc}
206
- />
207
- );
208
- const input = screen.getByRole("textbox");
209
- fireEvent.focus(input);
210
- userEvent.type(input, "And");
211
- await waitForElementToBeRemoved(() => screen.getByText(/Searching.../i));
212
- expect(screen.getByText("Italy")).toBeTruthy();
213
- expect(screen.getByText("Spain")).toBeTruthy();
214
- const suggestion1 = screen.getByText("Spain");
215
- act(() => {
216
- userEvent.click(suggestion1);
217
- });
218
- expect(onChangeAtocomplete).toHaveBeenCalledWith("Spain");
219
- expect(screen.getByRole("textbox").value).toBe("test value");
220
- });
221
-
222
- test("Asynchronous autocomplete request failed", async () => {
223
- const errorCallbackFunc = jest.fn(() => new Promise((resolve, reject) => setTimeout(reject("E"), 3000)));
224
- const onChangeAtocomplete = jest.fn();
225
-
226
- render(
227
- <DxcInputText
228
- label="Autocomplete Countries"
229
- value="test value"
230
- onChange={onChangeAtocomplete}
231
- autocompleteOptions={errorCallbackFunc}
232
- />
233
- );
234
-
235
- const input = screen.getByRole("textbox");
236
- fireEvent.focus(input);
237
- await waitForElementToBeRemoved(() => screen.getByText(/Searching.../i));
238
- expect(screen.getByText("Error fetching data")).toBeTruthy();
239
- });
240
- });
package/test/Link.test.js DELETED
@@ -1,43 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcLink from "../src/link/Link";
4
-
5
- describe("Link component tests", () => {
6
- test("Link renders with correct text", () => {
7
- const { getByText } = render(<DxcLink text="Link" />);
8
- expect(getByText("Link")).toBeTruthy();
9
- });
10
-
11
- test("Link renders with correct href", () => {
12
- const { getByRole } = render(<DxcLink text="Link" href="/testPage" />);
13
- expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
14
- });
15
-
16
- test("Link renders with correct disabled state", () => {
17
- const { getByText } = render(<DxcLink text="Link" href="/testPage" disabled={true} />);
18
- expect(getByText("Link").hasAttribute("href")).toBeFalsy();
19
- const { getByText: getByTextLinkButton } = render(<DxcLink text="LinkButton" onClick={() => console.log("Andorra")} disabled={true} />);
20
- expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
21
- });
22
-
23
- test("Link open new tab", () => {
24
- const { getByRole } = render(<DxcLink text="Link" href="/testPage" newWindow={true} />);
25
- expect(getByRole("link").getAttribute("target")).toEqual("_blank");
26
- });
27
-
28
- test("Link onClick called", () => {
29
- const onClick = jest.fn();
30
- const { getByText } = render(<DxcLink text="Link" onClick={onClick} />);
31
- const link = getByText("Link");
32
- fireEvent.click(link);
33
- expect(onClick).toHaveBeenCalled();
34
- });
35
-
36
- test("Disabled link onClick not called", () => {
37
- const onClick = jest.fn();
38
- const { getByText } = render(<DxcLink text="Link" onClick={onClick} disabled={true} />);
39
- const link = getByText("Link");
40
- fireEvent.click(link);
41
- expect(onClick).toHaveBeenCalledTimes(0);
42
- });
43
- });
@@ -1,189 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent, waitForElementToBeRemoved } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
-
5
- import DxcNewDate from "../src/new-date/NewDate";
6
-
7
- describe("NewDate component tests", () => {
8
- test("Renders with correct label, helper text, optional and placeholder", () => {
9
- const { getByText, getByRole } = render(
10
- <DxcNewDate label="Example label" helperText="Example of helper text" placeholder optional />
11
- );
12
- const input = getByRole("textbox");
13
-
14
- expect(getByText("Example label")).toBeTruthy();
15
- expect(getByText("Example of helper text")).toBeTruthy();
16
- expect(getByText("(Optional)")).toBeTruthy();
17
- expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
18
- });
19
-
20
- test("Renders with personalized error", () => {
21
- const { getByText } = render(<DxcNewDate error="Personalized error." />);
22
-
23
- expect(getByText("Personalized error.")).toBeTruthy();
24
- });
25
-
26
- test("Renders with correct format: user typed date but it's invalid", () => {
27
- const { getByText, getByRole } = render(<DxcNewDate label="With format MM/dd/yyyy" format="MM/dd/yyyy" />);
28
- const input = getByRole("textbox");
29
-
30
- userEvent.type(input, "10/90/2010");
31
- fireEvent.blur(input);
32
- expect(getByText("Invalid date.")).toBeTruthy();
33
- });
34
-
35
- test("Calendar renders with correct date: today's date", () => {
36
- const { getByText, getByRole } = render(<DxcNewDate />);
37
- const calendarAction = getByRole("button");
38
- const d = new Date();
39
- const options = { weekday: "short", month: "short", day: "numeric" };
40
-
41
- userEvent.click(calendarAction);
42
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
43
- });
44
-
45
- test("Calendar renders with correct date: value prop", () => {
46
- const { getByText, getByRole } = render(<DxcNewDate value="20-10-2019" />);
47
- const calendarAction = getByRole("button");
48
- const d = new Date(2019, 9, 20);
49
- const options = { weekday: "short", month: "short", day: "numeric" };
50
-
51
- userEvent.click(calendarAction);
52
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
53
- });
54
-
55
- test("Calendar renders with correct date: user typed value", () => {
56
- const { getByText, getByRole } = render(<DxcNewDate />);
57
- const calendarAction = getByRole("button");
58
- const d = new Date(2010, 0, 1);
59
- const options = { weekday: "short", month: "short", day: "numeric" };
60
- const input = getByRole("textbox");
61
-
62
- userEvent.type(input, "01-01-2010");
63
- userEvent.click(calendarAction);
64
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
65
- });
66
-
67
- test("Calendar renders with correct date: invalid date, renders with today's date", () => {
68
- const { getByText, getByRole } = render(<DxcNewDate />);
69
- const calendarAction = getByRole("button");
70
- const d = new Date();
71
- const options = { weekday: "short", month: "short", day: "numeric" };
72
- const input = getByRole("textbox");
73
-
74
- userEvent.type(input, "01-01-xxxx");
75
- fireEvent.blur(input);
76
- expect(getByText("Invalid date.")).toBeTruthy();
77
- userEvent.click(calendarAction);
78
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
79
- });
80
-
81
- test("Selecting a date from the calendar with an specific format", () => {
82
- const { getByText, getByRole } = render(<DxcNewDate label="With format M-dd-yyyy" format="M-dd-yyyy" />);
83
- const input = getByRole("textbox");
84
- const calendarAction = getByRole("button");
85
- userEvent.click(calendarAction);
86
- const dayButton = getByRole("button", { name: "10" });
87
- fireEvent.click(dayButton);
88
- const d = new Date();
89
- d.setDate(10);
90
- const options = { weekday: "short", month: "short", day: "numeric" };
91
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
92
- fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
93
- expect(input.value).toBe(`${d.getMonth() + 1}-10-${d.getFullYear()}`);
94
- });
95
-
96
- test("Selecting a date from the calendar (using keyboard presses)", () => {
97
- const { getByRole } = render(<DxcNewDate />);
98
- const calendarAction = getByRole("button");
99
- const input = getByRole("textbox");
100
-
101
- userEvent.type(input, "01-01-2010");
102
- userEvent.click(calendarAction);
103
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
104
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
105
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
106
- fireEvent.keyDown(document, { key: "ArrowLeft", code: "ArrowLeft", keyCode: 37, charCode: 37 });
107
- fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
108
- expect(input.value).toBe("03-01-2010");
109
- });
110
-
111
- test("onChange & onBlur functions are called correctly", () => {
112
- const onBlur = jest.fn();
113
- const onChange = jest.fn();
114
- const { getByRole } = render(<DxcNewDate onChange={onChange} onBlur={onBlur} />);
115
- const input = getByRole("textbox");
116
- const d = new Date(2011, 9, 10);
117
-
118
- userEvent.type(input, "10-10-2011");
119
- expect(input.value).toBe("10-10-2011");
120
- expect(onChange).toHaveBeenCalledTimes(10);
121
- expect(onChange).toHaveBeenCalledWith({ value: "10-10-2011", date: d });
122
- fireEvent.blur(input);
123
- expect(onBlur).toHaveBeenCalled();
124
- expect(onBlur).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
125
- });
126
-
127
- test("onChange & onBlur functions are called correctly, also with errors", () => {
128
- const onBlur = jest.fn();
129
- const onChange = jest.fn();
130
- const { getByRole } = render(<DxcNewDate onChange={onChange} onBlur={onBlur} />);
131
- const input = getByRole("textbox");
132
- const d = new Date(2011, 9, 10);
133
-
134
- userEvent.type(input, "10-10-");
135
- expect(input.value).toBe("10-10-");
136
- expect(onChange).toHaveBeenCalledTimes(6);
137
- expect(onChange).toHaveBeenCalledWith({ value: "10-10-", date: null });
138
- fireEvent.blur(input);
139
- expect(onBlur).toHaveBeenCalled();
140
- expect(onBlur).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
141
- });
142
-
143
- test("onBlur function removes the error when it is fixed", () => {
144
- const onBlur = jest.fn();
145
- const { getByRole } = render(<DxcNewDate onBlur={onBlur} />);
146
- const input = getByRole("textbox");
147
- const d = new Date(2002, 1, 20);
148
-
149
- userEvent.type(input, "test");
150
- expect(input.value).toBe("test");
151
- fireEvent.blur(input);
152
- expect(onBlur).toHaveBeenCalled();
153
- expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Invalid date.", date: null });
154
- userEvent.clear(input);
155
- userEvent.type(input, "20-02-2002");
156
- expect(input.value).toBe("20-02-2002");
157
- fireEvent.blur(input);
158
- expect(onBlur).toHaveBeenCalled();
159
- expect(onBlur).toHaveBeenCalledWith({ value: "20-02-2002", error: null, date: d });
160
- });
161
-
162
- test("onBlur function removes the error when the input is empty", () => {
163
- const onBlur = jest.fn();
164
- const { getByRole } = render(<DxcNewDate onBlur={onBlur} />);
165
- const input = getByRole("textbox");
166
-
167
- userEvent.type(input, "test");
168
- expect(input.value).toBe("test");
169
- fireEvent.blur(input);
170
- expect(onBlur).toHaveBeenCalled();
171
- expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Invalid date.", date: null });
172
- userEvent.clear(input);
173
- fireEvent.blur(input);
174
- expect(onBlur).toHaveBeenCalled();
175
- expect(onBlur).toHaveBeenCalledWith({ value: "", error: null, date: null });
176
- });
177
-
178
- test("Disabled date (calendar action must be shown but not clickable)", () => {
179
- const { getByRole, queryByText } = render(<DxcNewDate disabled />);
180
- const calendarAction = getByRole("button");
181
- const d = new Date();
182
- const options = { weekday: "short", month: "short", day: "numeric" };
183
-
184
- expect(getByRole("textbox").disabled).toBeTruthy();
185
- userEvent.click(calendarAction);
186
- expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
187
- });
188
- });
189
-