@dxc-technology/halstack-react 0.0.0-c7ec4d1 → 0.0.0-c83579c

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 (446) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +1336 -0
  4. package/HalstackContext.js +335 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +234 -0
  7. package/accordion/Accordion.stories.tsx +395 -0
  8. package/accordion/Accordion.test.js +71 -0
  9. package/accordion/types.d.ts +69 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +149 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +251 -0
  14. package/accordion-group/AccordionGroup.test.js +126 -0
  15. package/accordion-group/types.d.ts +79 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +45 -157
  19. package/alert/Alert.stories.tsx +198 -0
  20. package/alert/Alert.test.js +92 -0
  21. package/alert/types.d.ts +49 -0
  22. package/alert/types.js +5 -0
  23. package/badge/Badge.d.ts +4 -0
  24. package/badge/Badge.js +61 -0
  25. package/badge/types.d.ts +5 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +51 -0
  29. package/bleed/Bleed.stories.tsx +342 -0
  30. package/bleed/types.d.ts +37 -0
  31. package/bleed/types.js +5 -0
  32. package/box/Box.d.ts +4 -0
  33. package/box/Box.js +114 -0
  34. package/box/Box.stories.tsx +147 -0
  35. package/box/Box.test.js +18 -0
  36. package/box/types.d.ts +44 -0
  37. package/box/types.js +5 -0
  38. package/bulleted-list/BulletedList.d.ts +7 -0
  39. package/bulleted-list/BulletedList.js +123 -0
  40. package/bulleted-list/BulletedList.stories.tsx +200 -0
  41. package/bulleted-list/types.d.ts +11 -0
  42. package/bulleted-list/types.js +5 -0
  43. package/button/Button.d.ts +4 -0
  44. package/button/Button.js +153 -0
  45. package/button/Button.stories.tsx +425 -0
  46. package/button/Button.test.js +35 -0
  47. package/button/types.d.ts +53 -0
  48. package/button/types.js +5 -0
  49. package/card/Card.d.ts +4 -0
  50. package/card/Card.js +160 -0
  51. package/card/Card.stories.tsx +200 -0
  52. package/card/Card.test.js +50 -0
  53. package/card/ice-cream.jpg +0 -0
  54. package/card/types.d.ts +68 -0
  55. package/card/types.js +5 -0
  56. package/checkbox/Checkbox.d.ts +4 -0
  57. package/checkbox/Checkbox.js +250 -0
  58. package/checkbox/Checkbox.stories.tsx +260 -0
  59. package/checkbox/Checkbox.test.js +155 -0
  60. package/checkbox/types.d.ts +68 -0
  61. package/checkbox/types.js +5 -0
  62. package/chip/Chip.d.ts +4 -0
  63. package/chip/Chip.js +153 -0
  64. package/chip/Chip.stories.tsx +206 -0
  65. package/chip/Chip.test.js +54 -0
  66. package/chip/types.d.ts +45 -0
  67. package/chip/types.js +5 -0
  68. package/common/OpenSans.css +69 -0
  69. package/common/coreTokens.d.ts +146 -0
  70. package/common/coreTokens.js +167 -0
  71. package/common/utils.d.ts +1 -0
  72. package/{dist/common → common}/utils.js +4 -4
  73. package/common/variables.d.ts +1482 -0
  74. package/common/variables.js +1361 -0
  75. package/date-input/Calendar.d.ts +4 -0
  76. package/date-input/Calendar.js +258 -0
  77. package/date-input/DateInput.d.ts +4 -0
  78. package/date-input/DateInput.js +269 -0
  79. package/date-input/DateInput.stories.tsx +304 -0
  80. package/date-input/DateInput.test.js +835 -0
  81. package/date-input/DatePicker.d.ts +4 -0
  82. package/date-input/DatePicker.js +146 -0
  83. package/date-input/Icons.d.ts +6 -0
  84. package/date-input/Icons.js +75 -0
  85. package/date-input/YearPicker.d.ts +4 -0
  86. package/date-input/YearPicker.js +126 -0
  87. package/date-input/types.d.ts +158 -0
  88. package/date-input/types.js +5 -0
  89. package/dialog/Dialog.d.ts +4 -0
  90. package/dialog/Dialog.js +149 -0
  91. package/dialog/Dialog.stories.tsx +319 -0
  92. package/dialog/Dialog.test.js +369 -0
  93. package/dialog/types.d.ts +44 -0
  94. package/dialog/types.js +5 -0
  95. package/dropdown/Dropdown.d.ts +4 -0
  96. package/dropdown/Dropdown.js +388 -0
  97. package/dropdown/Dropdown.stories.tsx +438 -0
  98. package/dropdown/Dropdown.test.js +586 -0
  99. package/dropdown/DropdownMenu.d.ts +4 -0
  100. package/dropdown/DropdownMenu.js +74 -0
  101. package/dropdown/DropdownMenuItem.d.ts +4 -0
  102. package/dropdown/DropdownMenuItem.js +79 -0
  103. package/dropdown/types.d.ts +100 -0
  104. package/dropdown/types.js +5 -0
  105. package/file-input/FileInput.d.ts +4 -0
  106. package/file-input/FileInput.js +547 -0
  107. package/file-input/FileInput.stories.tsx +618 -0
  108. package/file-input/FileInput.test.js +457 -0
  109. package/file-input/FileItem.d.ts +4 -0
  110. package/file-input/FileItem.js +162 -0
  111. package/file-input/types.d.ts +129 -0
  112. package/file-input/types.js +5 -0
  113. package/flex/Flex.d.ts +4 -0
  114. package/flex/Flex.js +71 -0
  115. package/flex/Flex.stories.tsx +112 -0
  116. package/flex/types.d.ts +97 -0
  117. package/flex/types.js +5 -0
  118. package/footer/Footer.d.ts +4 -0
  119. package/footer/Footer.js +183 -0
  120. package/footer/Footer.stories.tsx +228 -0
  121. package/footer/Footer.test.js +97 -0
  122. package/footer/Icons.d.ts +2 -0
  123. package/{dist/footer → footer}/Icons.js +16 -16
  124. package/footer/types.d.ts +66 -0
  125. package/footer/types.js +5 -0
  126. package/grid/Grid.d.ts +7 -0
  127. package/grid/Grid.js +91 -0
  128. package/grid/Grid.stories.tsx +219 -0
  129. package/grid/types.d.ts +115 -0
  130. package/grid/types.js +5 -0
  131. package/header/Header.d.ts +8 -0
  132. package/header/Header.js +303 -0
  133. package/header/Header.stories.tsx +315 -0
  134. package/header/Header.test.js +79 -0
  135. package/header/Icons.d.ts +2 -0
  136. package/{dist/header → header}/Icons.js +9 -34
  137. package/header/types.d.ts +48 -0
  138. package/header/types.js +5 -0
  139. package/heading/Heading.d.ts +4 -0
  140. package/{dist/heading → heading}/Heading.js +26 -97
  141. package/heading/Heading.stories.tsx +54 -0
  142. package/heading/Heading.test.js +186 -0
  143. package/heading/types.d.ts +33 -0
  144. package/heading/types.js +5 -0
  145. package/inset/Inset.d.ts +3 -0
  146. package/inset/Inset.js +51 -0
  147. package/inset/Inset.stories.tsx +230 -0
  148. package/inset/types.d.ts +37 -0
  149. package/inset/types.js +5 -0
  150. package/layout/ApplicationLayout.d.ts +20 -0
  151. package/layout/ApplicationLayout.js +171 -0
  152. package/layout/ApplicationLayout.stories.tsx +162 -0
  153. package/layout/Icons.d.ts +5 -0
  154. package/{dist/layout → layout}/Icons.js +19 -8
  155. package/layout/SidenavContext.d.ts +5 -0
  156. package/layout/SidenavContext.js +19 -0
  157. package/layout/types.d.ts +41 -0
  158. package/layout/types.js +5 -0
  159. package/link/Link.d.ts +4 -0
  160. package/link/Link.js +136 -0
  161. package/link/Link.stories.tsx +253 -0
  162. package/link/Link.test.js +81 -0
  163. package/link/types.d.ts +54 -0
  164. package/link/types.js +5 -0
  165. package/main.d.ts +45 -0
  166. package/{dist/main.js → main.js} +122 -104
  167. package/nav-tabs/NavTabs.d.ts +8 -0
  168. package/nav-tabs/NavTabs.js +125 -0
  169. package/nav-tabs/NavTabs.stories.tsx +260 -0
  170. package/nav-tabs/NavTabs.test.js +82 -0
  171. package/nav-tabs/Tab.d.ts +4 -0
  172. package/nav-tabs/Tab.js +150 -0
  173. package/nav-tabs/types.d.ts +53 -0
  174. package/nav-tabs/types.js +5 -0
  175. package/number-input/NumberInput.d.ts +4 -0
  176. package/number-input/NumberInput.js +76 -0
  177. package/number-input/NumberInput.stories.tsx +115 -0
  178. package/number-input/NumberInput.test.js +542 -0
  179. package/number-input/NumberInputContext.d.ts +4 -0
  180. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  181. package/number-input/numberInputContextTypes.d.ts +19 -0
  182. package/number-input/numberInputContextTypes.js +5 -0
  183. package/number-input/types.d.ts +124 -0
  184. package/number-input/types.js +5 -0
  185. package/package.json +45 -35
  186. package/paginator/Icons.d.ts +5 -0
  187. package/paginator/Icons.js +54 -0
  188. package/paginator/Paginator.d.ts +4 -0
  189. package/paginator/Paginator.js +163 -0
  190. package/paginator/Paginator.stories.tsx +87 -0
  191. package/paginator/Paginator.test.js +305 -0
  192. package/paginator/types.d.ts +38 -0
  193. package/paginator/types.js +5 -0
  194. package/paragraph/Paragraph.d.ts +5 -0
  195. package/paragraph/Paragraph.js +38 -0
  196. package/paragraph/Paragraph.stories.tsx +44 -0
  197. package/password-input/PasswordInput.d.ts +4 -0
  198. package/{dist/password-input → password-input}/PasswordInput.js +40 -77
  199. package/password-input/PasswordInput.stories.tsx +131 -0
  200. package/password-input/PasswordInput.test.js +181 -0
  201. package/password-input/types.d.ts +110 -0
  202. package/password-input/types.js +5 -0
  203. package/progress-bar/ProgressBar.d.ts +4 -0
  204. package/progress-bar/ProgressBar.js +176 -0
  205. package/progress-bar/ProgressBar.stories.jsx +93 -0
  206. package/progress-bar/ProgressBar.test.js +110 -0
  207. package/progress-bar/types.d.ts +37 -0
  208. package/progress-bar/types.js +5 -0
  209. package/quick-nav/QuickNav.d.ts +4 -0
  210. package/quick-nav/QuickNav.js +117 -0
  211. package/quick-nav/QuickNav.stories.tsx +356 -0
  212. package/quick-nav/types.d.ts +21 -0
  213. package/quick-nav/types.js +5 -0
  214. package/radio-group/Radio.d.ts +4 -0
  215. package/radio-group/Radio.js +156 -0
  216. package/radio-group/RadioGroup.d.ts +4 -0
  217. package/radio-group/RadioGroup.js +283 -0
  218. package/radio-group/RadioGroup.stories.tsx +214 -0
  219. package/radio-group/RadioGroup.test.js +722 -0
  220. package/radio-group/types.d.ts +114 -0
  221. package/radio-group/types.js +5 -0
  222. package/resultsetTable/Icons.d.ts +7 -0
  223. package/resultsetTable/Icons.js +51 -0
  224. package/resultsetTable/ResultsetTable.d.ts +4 -0
  225. package/resultsetTable/ResultsetTable.js +195 -0
  226. package/resultsetTable/ResultsetTable.stories.tsx +300 -0
  227. package/resultsetTable/ResultsetTable.test.js +325 -0
  228. package/resultsetTable/types.d.ts +67 -0
  229. package/resultsetTable/types.js +5 -0
  230. package/select/Icons.d.ts +10 -0
  231. package/select/Icons.js +93 -0
  232. package/select/Listbox.d.ts +4 -0
  233. package/select/Listbox.js +169 -0
  234. package/select/Option.d.ts +4 -0
  235. package/select/Option.js +97 -0
  236. package/select/Select.d.ts +4 -0
  237. package/select/Select.js +666 -0
  238. package/select/Select.stories.tsx +971 -0
  239. package/select/Select.test.js +2228 -0
  240. package/select/types.d.ts +210 -0
  241. package/select/types.js +5 -0
  242. package/sidenav/Icons.d.ts +7 -0
  243. package/sidenav/Icons.js +51 -0
  244. package/sidenav/Sidenav.d.ts +10 -0
  245. package/sidenav/Sidenav.js +238 -0
  246. package/sidenav/Sidenav.stories.tsx +282 -0
  247. package/sidenav/Sidenav.test.js +44 -0
  248. package/sidenav/types.d.ts +76 -0
  249. package/sidenav/types.js +5 -0
  250. package/slider/Slider.d.ts +4 -0
  251. package/slider/Slider.js +342 -0
  252. package/slider/Slider.stories.tsx +240 -0
  253. package/slider/Slider.test.js +250 -0
  254. package/slider/types.d.ts +86 -0
  255. package/slider/types.js +5 -0
  256. package/spinner/Spinner.d.ts +4 -0
  257. package/spinner/Spinner.js +244 -0
  258. package/spinner/Spinner.stories.jsx +129 -0
  259. package/spinner/Spinner.test.js +64 -0
  260. package/spinner/types.d.ts +32 -0
  261. package/spinner/types.js +5 -0
  262. package/switch/Switch.d.ts +4 -0
  263. package/switch/Switch.js +262 -0
  264. package/switch/Switch.stories.tsx +171 -0
  265. package/switch/Switch.test.js +225 -0
  266. package/switch/types.d.ts +66 -0
  267. package/switch/types.js +5 -0
  268. package/table/Table.d.ts +4 -0
  269. package/{dist/table → table}/Table.js +14 -28
  270. package/table/Table.stories.jsx +356 -0
  271. package/table/Table.test.js +26 -0
  272. package/table/types.d.ts +21 -0
  273. package/table/types.js +5 -0
  274. package/tabs/Tab.d.ts +4 -0
  275. package/tabs/Tab.js +132 -0
  276. package/tabs/Tabs.d.ts +4 -0
  277. package/tabs/Tabs.js +461 -0
  278. package/tabs/Tabs.stories.tsx +226 -0
  279. package/tabs/Tabs.test.js +350 -0
  280. package/tabs/types.d.ts +92 -0
  281. package/tabs/types.js +5 -0
  282. package/tag/Tag.d.ts +4 -0
  283. package/tag/Tag.js +181 -0
  284. package/tag/Tag.stories.tsx +155 -0
  285. package/tag/Tag.test.js +60 -0
  286. package/tag/types.d.ts +69 -0
  287. package/tag/types.js +5 -0
  288. package/text-input/Icons.d.ts +8 -0
  289. package/text-input/Icons.js +60 -0
  290. package/text-input/Suggestion.d.ts +4 -0
  291. package/text-input/Suggestion.js +84 -0
  292. package/text-input/Suggestions.d.ts +4 -0
  293. package/text-input/Suggestions.js +134 -0
  294. package/text-input/TextInput.d.ts +4 -0
  295. package/text-input/TextInput.js +673 -0
  296. package/text-input/TextInput.stories.tsx +569 -0
  297. package/text-input/TextInput.test.js +1723 -0
  298. package/text-input/types.d.ts +197 -0
  299. package/text-input/types.js +5 -0
  300. package/textarea/Textarea.d.ts +4 -0
  301. package/{dist/textarea → textarea}/Textarea.js +51 -144
  302. package/textarea/Textarea.stories.jsx +216 -0
  303. package/textarea/Textarea.test.js +435 -0
  304. package/textarea/types.d.ts +137 -0
  305. package/textarea/types.js +5 -0
  306. package/toggle-group/ToggleGroup.d.ts +4 -0
  307. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +42 -151
  308. package/toggle-group/ToggleGroup.stories.tsx +215 -0
  309. package/toggle-group/ToggleGroup.test.js +156 -0
  310. package/toggle-group/types.d.ts +105 -0
  311. package/toggle-group/types.js +5 -0
  312. package/typography/Typography.d.ts +4 -0
  313. package/typography/Typography.js +32 -0
  314. package/typography/Typography.stories.tsx +198 -0
  315. package/typography/types.d.ts +18 -0
  316. package/typography/types.js +5 -0
  317. package/useTheme.d.ts +1235 -0
  318. package/{dist/useTheme.js → useTheme.js} +3 -3
  319. package/useTranslatedLabels.d.ts +85 -0
  320. package/useTranslatedLabels.js +20 -0
  321. package/utils/BaseTypography.d.ts +21 -0
  322. package/utils/BaseTypography.js +108 -0
  323. package/utils/FocusLock.d.ts +13 -0
  324. package/utils/FocusLock.js +139 -0
  325. package/wizard/Wizard.d.ts +4 -0
  326. package/wizard/Wizard.js +285 -0
  327. package/wizard/Wizard.stories.tsx +253 -0
  328. package/wizard/Wizard.test.js +141 -0
  329. package/wizard/types.d.ts +64 -0
  330. package/wizard/types.js +5 -0
  331. package/README.md +0 -66
  332. package/babel.config.js +0 -8
  333. package/dist/BackgroundColorContext.js +0 -46
  334. package/dist/ThemeContext.js +0 -250
  335. package/dist/V3Select/V3Select.js +0 -549
  336. package/dist/V3Textarea/V3Textarea.js +0 -264
  337. package/dist/accordion/Accordion.js +0 -353
  338. package/dist/accordion-group/AccordionGroup.js +0 -186
  339. package/dist/alert/index.d.ts +0 -51
  340. package/dist/badge/Badge.js +0 -63
  341. package/dist/box/Box.js +0 -156
  342. package/dist/button/Button.js +0 -238
  343. package/dist/card/Card.js +0 -254
  344. package/dist/checkbox/Checkbox.js +0 -299
  345. package/dist/chip/Chip.js +0 -265
  346. package/dist/common/OpenSans.css +0 -81
  347. package/dist/common/RequiredComponent.js +0 -40
  348. package/dist/common/variables.js +0 -1582
  349. package/dist/date/Date.js +0 -379
  350. package/dist/date-input/DateInput.js +0 -400
  351. package/dist/date-input/index.d.ts +0 -95
  352. package/dist/dialog/Dialog.js +0 -218
  353. package/dist/dropdown/Dropdown.js +0 -544
  354. package/dist/file-input/FileInput.js +0 -644
  355. package/dist/file-input/FileItem.js +0 -287
  356. package/dist/file-input/index.d.ts +0 -81
  357. package/dist/footer/Footer.js +0 -421
  358. package/dist/header/Header.js +0 -470
  359. package/dist/input-text/Icons.js +0 -22
  360. package/dist/input-text/InputText.js +0 -705
  361. package/dist/layout/ApplicationLayout.js +0 -327
  362. package/dist/link/Link.js +0 -237
  363. package/dist/main.d.ts +0 -8
  364. package/dist/number-input/NumberInput.js +0 -136
  365. package/dist/number-input/index.d.ts +0 -113
  366. package/dist/paginator/Icons.js +0 -66
  367. package/dist/paginator/Paginator.js +0 -283
  368. package/dist/password-input/index.d.ts +0 -94
  369. package/dist/progress-bar/ProgressBar.js +0 -242
  370. package/dist/radio/Radio.js +0 -209
  371. package/dist/resultsetTable/ResultsetTable.js +0 -358
  372. package/dist/select/Select.js +0 -1085
  373. package/dist/select/index.d.ts +0 -53
  374. package/dist/sidenav/Sidenav.js +0 -179
  375. package/dist/slider/Slider.js +0 -404
  376. package/dist/spinner/Spinner.js +0 -381
  377. package/dist/switch/Switch.js +0 -222
  378. package/dist/tabs/Tabs.js +0 -343
  379. package/dist/tag/Tag.js +0 -282
  380. package/dist/text-input/TextInput.js +0 -974
  381. package/dist/text-input/index.d.ts +0 -135
  382. package/dist/textarea/index.d.ts +0 -117
  383. package/dist/toggle/Toggle.js +0 -220
  384. package/dist/upload/Upload.js +0 -205
  385. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  386. package/dist/upload/buttons-upload/Icons.js +0 -40
  387. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  388. package/dist/upload/dragAndDropArea/Icons.js +0 -39
  389. package/dist/upload/file-upload/FileToUpload.js +0 -189
  390. package/dist/upload/file-upload/Icons.js +0 -66
  391. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  392. package/dist/upload/transaction/Icons.js +0 -160
  393. package/dist/upload/transaction/Transaction.js +0 -148
  394. package/dist/upload/transactions/Transactions.js +0 -138
  395. package/dist/wizard/Icons.js +0 -65
  396. package/dist/wizard/Wizard.js +0 -405
  397. package/test/Accordion.test.js +0 -33
  398. package/test/AccordionGroup.test.js +0 -125
  399. package/test/Alert.test.js +0 -53
  400. package/test/Box.test.js +0 -10
  401. package/test/Button.test.js +0 -18
  402. package/test/Card.test.js +0 -30
  403. package/test/Checkbox.test.js +0 -45
  404. package/test/Chip.test.js +0 -25
  405. package/test/Date.test.js +0 -397
  406. package/test/DateInput.test.js +0 -242
  407. package/test/Dialog.test.js +0 -23
  408. package/test/Dropdown.test.js +0 -145
  409. package/test/FileInput.test.js +0 -201
  410. package/test/Footer.test.js +0 -94
  411. package/test/Header.test.js +0 -34
  412. package/test/Heading.test.js +0 -83
  413. package/test/InputText.test.js +0 -248
  414. package/test/Link.test.js +0 -43
  415. package/test/NumberInput.test.js +0 -259
  416. package/test/Paginator.test.js +0 -177
  417. package/test/PasswordInput.test.js +0 -83
  418. package/test/ProgressBar.test.js +0 -35
  419. package/test/Radio.test.js +0 -37
  420. package/test/ResultsetTable.test.js +0 -329
  421. package/test/Sidenav.test.js +0 -45
  422. package/test/Slider.test.js +0 -74
  423. package/test/Spinner.test.js +0 -32
  424. package/test/Switch.test.js +0 -45
  425. package/test/Table.test.js +0 -36
  426. package/test/Tabs.test.js +0 -109
  427. package/test/Tag.test.js +0 -32
  428. package/test/TextInput.test.js +0 -732
  429. package/test/Textarea.test.js +0 -193
  430. package/test/ToggleGroup.test.js +0 -85
  431. package/test/Upload.test.js +0 -60
  432. package/test/V3Select.test.js +0 -212
  433. package/test/V3TextArea.test.js +0 -51
  434. package/test/Wizard.test.js +0 -130
  435. package/test/mocks/pngMock.js +0 -1
  436. package/test/mocks/svgMock.js +0 -1
  437. /package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  438. /package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  439. /package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  440. /package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  441. /package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  442. /package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  443. /package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  444. /package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  445. /package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  446. /package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
package/test/Date.test.js DELETED
@@ -1,397 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import V3DxcDate from "../src/date/Date";
4
-
5
- const defaultFormat = "DD-MM-YYYY";
6
-
7
- describe("Date component general tests", () => {
8
- test("Date renders correctly", () => {
9
- const { getByPlaceholderText } = render(<V3DxcDate label="Birthdate" placeholder />);
10
- // const input = getByPlaceholderText('DD-MM-YYYY');
11
- expect(getByPlaceholderText(defaultFormat)).toBeTruthy();
12
- });
13
- });
14
-
15
- describe("Controlled Date Component", () => {
16
- const date = new Date("2020-10-16 00:00:00");
17
-
18
- test("Changing the input value and after this deleting its content input´s value should be ''", () => {
19
- const onChange = jest.fn((returnedValue) => {
20
- expect(returnedValue.dateValue).toBeNull();
21
- expect(returnedValue.stringValue).toBe("something");
22
- });
23
-
24
- const { getByRole, getByPlaceholderText, rerender } = render(
25
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
26
- );
27
- const input = getByPlaceholderText(defaultFormat);
28
-
29
- fireEvent.change(input, { target: { value: "something" } });
30
- expect(onChange).toHaveBeenCalled();
31
- fireEvent.blur(input);
32
- rerender(<V3DxcDate label="Birthdate" value="" placeholder />);
33
- // expect(getByRole("textbox").value).toBe('');
34
- });
35
-
36
- test("The input´s value is the same as the one received as a parameter (Default format)", () => {
37
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" value="30/03/1981" placeholder />);
38
- // const input = getByRole("textbox");
39
- const input = getByPlaceholderText(defaultFormat);
40
- expect(input.value).toBe("30/03/1981");
41
- });
42
-
43
- test("The input´s value is the same as the one received as a parameter (Custom format)", () => {
44
- const { getByRole, getByPlaceholderText } = render(
45
- <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
46
- );
47
- // const input = getByRole("textbox");
48
- const input = getByPlaceholderText("DD/MM/YY");
49
- expect(input.value).toBe("30/03/81");
50
- });
51
-
52
- test("Calendar´s value is the same as the input´s date if it´s right (Depending on the format)", () => {
53
- const { getByRole, getByText, getByTestId } = render(<V3DxcDate label="Birthdate" value="16-10-2020" />);
54
- fireEvent.click(getByTestId("calendarIcon"));
55
- expect(getByText("Fri, Oct 16")).toBeTruthy();
56
- });
57
-
58
- test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
59
- const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
60
- <V3DxcDate label="Birthdate" value="30-03-1981" placeholder />
61
- );
62
- // const input = getByRole("textbox");
63
- const input = getByPlaceholderText(defaultFormat);
64
- fireEvent.change(input, { target: { value: "10-02-2020" } });
65
-
66
- rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
67
- const calendarButton = getByTestId("calendarIcon");
68
- fireEvent.click(calendarButton);
69
- expect(getByText("Mon, Feb 10")).toBeTruthy();
70
- });
71
-
72
- test("onChange function is called when the user types something in the input", () => {
73
- const onChange = jest.fn((returnedValue) => {
74
- expect(returnedValue.dateValue).toBeNull();
75
- expect(returnedValue.stringValue).toBe("something");
76
- });
77
-
78
- const { getByRole, getByPlaceholderText } = render(
79
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
80
- );
81
- // const input = getByRole("textbox");
82
- const input = getByPlaceholderText(defaultFormat);
83
-
84
- fireEvent.change(input, { target: { value: "something" } });
85
- expect(onChange).toHaveBeenCalled();
86
- });
87
-
88
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(DEFAULT FORMAT)", () => {
89
- const onChange = jest.fn((returnedValue) => {
90
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
91
- expect(returnedValue.stringValue).toBe("16-10-2020");
92
- });
93
-
94
- const { getByRole, getByPlaceholderText } = render(
95
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
96
- );
97
- // const input = getByRole("textbox");
98
- const input = getByPlaceholderText(defaultFormat);
99
- fireEvent.change(input, { target: { value: "16-10-2020" } });
100
- expect(onChange).toHaveBeenCalled();
101
- });
102
-
103
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(CUSTOM FORMAT)", () => {
104
- const onChange = jest.fn((returnedValue) => {
105
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
106
- expect(returnedValue.stringValue).toBe("16-10-20");
107
- });
108
-
109
- const { getByRole, getByPlaceholderText } = render(
110
- <V3DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
111
- );
112
- // const input = getByRole("textbox");
113
- const input = getByPlaceholderText("DD-MM-YY");
114
-
115
- fireEvent.change(input, { target: { value: "16-10-20" } });
116
- expect(onChange).toHaveBeenCalled();
117
- });
118
-
119
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(DEFAULT FORMAT)", () => {
120
- const onChange = jest.fn((returnedValue) => {
121
- expect(returnedValue.dateValue).toBeNull();
122
- expect(returnedValue.stringValue).toBe("11-15-2020");
123
- });
124
-
125
- const { getByRole, getByPlaceholderText } = render(
126
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
127
- );
128
- // const input = getByRole("textbox");
129
- const input = getByPlaceholderText(defaultFormat);
130
-
131
- fireEvent.change(input, { target: { value: "11-15-2020" } });
132
- expect(onChange).toHaveBeenCalled();
133
- });
134
-
135
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(CUSTOM FORMAT)", () => {
136
- const onChange = jest.fn((returnedValue) => {
137
- expect(returnedValue.dateValue).toBeNull();
138
- expect(returnedValue.stringValue).toBe("15/11/2020");
139
- });
140
-
141
- const { getByRole, getByPlaceholderText } = render(
142
- <V3DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
143
- );
144
- // const input = getByRole("textbox");
145
- const input = getByPlaceholderText("MM/DD/YYYY");
146
-
147
- fireEvent.change(input, { target: { value: "15/11/2020" } });
148
- expect(onChange).toHaveBeenCalled();
149
- });
150
-
151
- test("onChange function is called when the user selects from the calendar", () => {
152
- const onChange = jest.fn();
153
-
154
- const component = render(<V3DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
155
- const calendarButton = component.getByTestId("calendarIcon");
156
- fireEvent.click(calendarButton);
157
- const dayButton = component.getByRole("button", { name: "10" });
158
- fireEvent.click(dayButton);
159
- expect(dayButton).toBeTruthy();
160
- expect(onChange).toHaveBeenCalled();
161
- });
162
-
163
- test("onChange function is called when the user selects from the calendar, the dateValue received by the onChange function is the selected date", () => {
164
- const onChange = jest.fn((returnedValue) => {
165
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
166
- });
167
-
168
- const component = render(<V3DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
169
- const calendarButton = component.getByTestId("calendarIcon");
170
- fireEvent.click(calendarButton);
171
- const dayButton = component.getByRole("button", { name: "16" });
172
- fireEvent.click(dayButton);
173
- expect(dayButton).toBeTruthy();
174
- });
175
-
176
- test("onChange function is called when the user selects from the calendar, the stringValue received by the onChange function is the date with the correct format (DEFAULT FORMAT)", () => {
177
- const onChange = jest.fn((returnedValue) => {
178
- expect(returnedValue.stringValue).toBe("16-10-2020");
179
- });
180
-
181
- const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
182
- const calendarButton = component.getByTestId("calendarIcon");
183
- fireEvent.click(calendarButton);
184
- const dayButton = component.getByRole("button", { name: "16" });
185
- fireEvent.click(dayButton);
186
- expect(dayButton).toBeTruthy();
187
- });
188
-
189
- test("onChange function is called when the user selects from the calendar, the stringValue received by the onChange function is the date with the correct format (CUSTOM FORMAT)", () => {
190
- const onChange = jest.fn((returnedValue) => {
191
- expect(returnedValue.stringValue).toBe("2020/10/16");
192
- });
193
-
194
- const component = render(
195
- <V3DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />
196
- );
197
- const calendarButton = component.getByTestId("calendarIcon");
198
- fireEvent.click(calendarButton);
199
- const dayButton = component.getByRole("button", { name: "16" });
200
- fireEvent.click(dayButton);
201
- expect(dayButton).toBeTruthy();
202
- });
203
-
204
- test("Check selected date on calendar is the same date as the one on the input", () => {
205
- const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" />);
206
- const calendarButton = component.getByTestId("calendarIcon");
207
- fireEvent.click(calendarButton);
208
- const dayButton = component.getByRole("button", { name: "1" });
209
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
210
- });
211
- test("onBlur function is called", () => {
212
- const onBlur = jest.fn();
213
- const { getByRole, getByPlaceholderText } = render(
214
- <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
215
- );
216
- // const input = getByRole("textbox");
217
- const input = getByPlaceholderText(defaultFormat);
218
-
219
- fireEvent.blur(input);
220
- expect(onBlur).toHaveBeenCalled();
221
- });
222
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
223
- const onBlur = jest.fn((returnedValue) => {
224
- expect(returnedValue).toBe("30-03-81");
225
- });
226
- const { getByRole, getByPlaceholderText } = render(
227
- <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
228
- );
229
- // const input = getByRole("textbox");
230
- const input = getByPlaceholderText(defaultFormat);
231
-
232
- fireEvent.blur(input);
233
- expect(onBlur).toHaveBeenCalled();
234
- });
235
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
236
- const onBlur = jest.fn((returnedValue) => {
237
- expect(returnedValue).toBe("30/03/81");
238
- });
239
- const { getByRole, getByPlaceholderText } = render(
240
- <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
241
- );
242
- // const input = getByRole("textbox");
243
- const input = getByPlaceholderText("DD/MM/YY");
244
-
245
- fireEvent.blur(input);
246
- expect(onBlur).toHaveBeenCalled();
247
- });
248
- });
249
-
250
- describe("Uncontrolled Date Component", () => {
251
- const date = new Date("2020-10-16 00:00:00");
252
-
253
- test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
254
- const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
255
- <V3DxcDate label="Birthdate" placeholder />
256
- );
257
- // const input = getByRole("textbox");
258
- const input = getByPlaceholderText(defaultFormat);
259
-
260
- fireEvent.change(input, { target: { value: "10-02-2020" } });
261
-
262
- rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
263
- const calendarButton = getByTestId("calendarIcon");
264
- fireEvent.click(calendarButton);
265
- expect(getByText("Mon, Feb 10")).toBeTruthy();
266
- });
267
-
268
- test("onChange function is called when the user types something in the input", () => {
269
- const onChange = jest.fn((returnedValue) => {
270
- expect(returnedValue.dateValue).toBeNull();
271
- expect(returnedValue.stringValue).toBe("something");
272
- });
273
-
274
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
275
- // const input = getByRole("textbox");
276
- const input = getByPlaceholderText(defaultFormat);
277
-
278
- fireEvent.change(input, { target: { value: "something" } });
279
- expect(onChange).toHaveBeenCalled();
280
- });
281
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(DEFAULT FORMAT)", () => {
282
- const onChange = jest.fn((returnedValue) => {
283
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
284
- expect(returnedValue.stringValue).toBe("16-10-2020");
285
- });
286
-
287
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
288
- // const input = getByRole("textbox");
289
- const input = getByPlaceholderText(defaultFormat);
290
-
291
- fireEvent.change(input, { target: { value: "16-10-2020" } });
292
- expect(onChange).toHaveBeenCalled();
293
- });
294
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(CUSTOM FORMAT)", () => {
295
- const onChange = jest.fn((returnedValue) => {
296
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
297
- expect(returnedValue.stringValue).toBe("16-10-20");
298
- });
299
-
300
- const { getByRole, getByPlaceholderText } = render(
301
- <V3DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
302
- );
303
- // const input = getByRole("textbox");
304
- const input = getByPlaceholderText("DD-MM-YY");
305
-
306
- fireEvent.change(input, { target: { value: "16-10-20" } });
307
- expect(onChange).toHaveBeenCalled();
308
- });
309
-
310
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(DEFAULT FORMAT)", () => {
311
- const onChange = jest.fn((returnedValue) => {
312
- expect(returnedValue.dateValue).toBeNull();
313
- expect(returnedValue.stringValue).toBe("11-15-2020");
314
- });
315
-
316
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
317
- // const input = getByRole("textbox");
318
- const input = getByPlaceholderText(defaultFormat);
319
-
320
- fireEvent.change(input, { target: { value: "11-15-2020" } });
321
- expect(onChange).toHaveBeenCalled();
322
- });
323
-
324
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(CUSTOM FORMAT)", () => {
325
- const onChange = jest.fn((returnedValue) => {
326
- expect(returnedValue.dateValue).toBeNull();
327
- expect(returnedValue.stringValue).toBe("15/11/2020");
328
- });
329
-
330
- const { getByRole, getByPlaceholderText } = render(
331
- <V3DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
332
- );
333
- // const input = getByRole("textbox");
334
- const input = getByPlaceholderText("MM/DD/YYYY");
335
-
336
- fireEvent.change(input, { target: { value: "15/11/2020" } });
337
- expect(onChange).toHaveBeenCalled();
338
- });
339
- test("onChange function is called when the user selects from the calendar", () => {
340
- const onChange = jest.fn();
341
-
342
- const component = render(<V3DxcDate label="Birthdate" onChange={onChange} />);
343
- const calendarButton = component.getByTestId("calendarIcon");
344
- fireEvent.click(calendarButton);
345
- const dayButton = component.getByRole("button", { name: "10" });
346
- fireEvent.click(dayButton);
347
- expect(dayButton).toBeTruthy();
348
- expect(onChange).toHaveBeenCalled();
349
- });
350
-
351
- test("Check selected date on calendar is the same date as the one on the input", () => {
352
- const component = render(<V3DxcDate label="Birthdate" placeholder />);
353
- // const input = component.getByRole("textbox");
354
- const input = component.getByPlaceholderText(defaultFormat);
355
-
356
- fireEvent.change(input, { target: { value: "10-02-2020" } });
357
- const calendarButton = component.getByTestId("calendarIcon");
358
- fireEvent.click(calendarButton);
359
- const dayButton = component.getByRole("button", { name: "10" });
360
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
361
- });
362
- test("onBlur function is called", () => {
363
- const onBlur = jest.fn();
364
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
365
- // const input = getByRole("textbox");
366
- const input = getByPlaceholderText(defaultFormat);
367
-
368
- fireEvent.blur(input);
369
- expect(onBlur).toHaveBeenCalled();
370
- });
371
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
372
- const onBlur = jest.fn((returnedValue) => {
373
- expect(returnedValue).toBe("10-02-2020");
374
- });
375
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
376
- // const input = getByRole("textbox");
377
- const input = getByPlaceholderText("DD-MM-YYYY");
378
-
379
- fireEvent.change(input, { target: { value: "10-02-2020" } });
380
- fireEvent.blur(input);
381
- expect(onBlur).toHaveBeenCalled();
382
- });
383
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
384
- const onBlur = jest.fn((returnedValue) => {
385
- expect(returnedValue).toBe("10/02/20");
386
- });
387
- const { getByRole, getByPlaceholderText } = render(
388
- <V3DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
389
- );
390
- // const input = getByRole("textbox");
391
- const input = getByPlaceholderText("DD/MM/YY");
392
-
393
- fireEvent.change(input, { target: { value: "10/02/20" } });
394
- fireEvent.blur(input);
395
- expect(onBlur).toHaveBeenCalled();
396
- });
397
- });
@@ -1,242 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
-
5
- import DxcDateInput from "../src/date-input/DateInput";
6
-
7
- describe("DateInput component tests", () => {
8
- test("Renders with correct label, helper text, optional, placeholder and clearable action", () => {
9
- const { getByText, getByRole, getAllByRole } = render(
10
- <DxcDateInput label="Example label" helperText="Example of helper text" placeholder optional clearable />
11
- );
12
- const input = getByRole("textbox");
13
- expect(getByText("Example label")).toBeTruthy();
14
- expect(getByText("Example of helper text")).toBeTruthy();
15
- expect(getByText("(Optional)")).toBeTruthy();
16
- expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
17
- userEvent.type(input, "10/10/2010");
18
- const closeAction = getAllByRole("button")[0];
19
- userEvent.click(closeAction);
20
- expect(input.value).toBe("");
21
- });
22
-
23
- test("Renders with personalized error", () => {
24
- const { getByText } = render(<DxcDateInput error="Personalized error." />);
25
- expect(getByText("Personalized error.")).toBeTruthy();
26
- });
27
-
28
- test("Renders with correct format: user typed date but it's invalid, onBlur error", () => {
29
- const onBlur = jest.fn(({ value, error }) => {
30
- expect(value).toBe("10/90/2010");
31
- expect(error).toBe("Invalid date.");
32
- });
33
- const { getByRole } = render(<DxcDateInput label="With format MM/dd/yyyy" format="MM/dd/yyyy" onBlur={onBlur} />);
34
- const input = getByRole("textbox");
35
-
36
- userEvent.type(input, "10/90/2010");
37
- fireEvent.blur(input);
38
- });
39
-
40
- test("Renders with correct format: user typed date but it's invalid, onChange error", () => {
41
- const onChange = jest.fn();
42
- const { getByRole } = render(
43
- <DxcDateInput label="With format MM/dd/yyyy" format="MM/dd/yyyy" onChange={onChange} />
44
- );
45
- const input = getByRole("textbox");
46
-
47
- userEvent.type(input, "10/90/2010");
48
- expect(onChange).toHaveBeenCalledTimes(10);
49
- expect(onChange).toHaveBeenCalledWith({ value: "10/90/2010", error: "Invalid date.", date: null });
50
- });
51
-
52
- test("Calendar renders with correct date: today's date", () => {
53
- const { getByText, getByRole } = render(<DxcDateInput />);
54
- const calendarAction = getByRole("button");
55
- const d = new Date();
56
- const options = { weekday: "short", month: "short", day: "numeric" };
57
-
58
- userEvent.click(calendarAction);
59
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
60
- });
61
-
62
- test("Calendar renders with correct date: value prop", () => {
63
- const { getByText, getByRole } = render(<DxcDateInput value="20-10-2019" />);
64
- const calendarAction = getByRole("button");
65
- const d = new Date(2019, 9, 20);
66
- const options = { weekday: "short", month: "short", day: "numeric" };
67
-
68
- userEvent.click(calendarAction);
69
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
70
- });
71
-
72
- test("Calendar renders with correct date: user typed value", () => {
73
- const { getByText, getByRole } = render(<DxcDateInput />);
74
- const calendarAction = getByRole("button");
75
- const d = new Date(2010, 0, 1);
76
- const options = { weekday: "short", month: "short", day: "numeric" };
77
- const input = getByRole("textbox");
78
-
79
- userEvent.type(input, "01-01-2010");
80
- userEvent.click(calendarAction);
81
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
82
- });
83
-
84
- test("Calendar renders with correct date: invalid date, renders with today's date", () => {
85
- const onBlur = jest.fn();
86
- const { getByText, getByRole } = render(<DxcDateInput onBlur={onBlur} />);
87
- const calendarAction = getByRole("button");
88
- const d = new Date();
89
- const options = { weekday: "short", month: "short", day: "numeric" };
90
- const input = getByRole("textbox");
91
-
92
- userEvent.type(input, "01-01-xxxx");
93
- fireEvent.blur(input);
94
- expect(onBlur).toHaveBeenCalled();
95
- expect(onBlur).toHaveBeenCalledWith({ value: "01-01-xxxx", error: "Invalid date.", date: null });
96
- userEvent.click(calendarAction);
97
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
98
- });
99
-
100
- test("Selecting a date from the calendar with an specific format", () => {
101
- const { getByText, getByRole } = render(<DxcDateInput label="With format M-dd-yyyy" format="M-dd-yyyy" />);
102
- const input = getByRole("textbox");
103
- const calendarAction = getByRole("button");
104
- userEvent.click(calendarAction);
105
- const dayButton = getByText("10").closest("button");
106
- fireEvent.click(dayButton);
107
- const d = new Date();
108
- d.setDate(10);
109
- const options = { weekday: "short", month: "short", day: "numeric" };
110
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
111
- fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
112
- expect(input.value).toBe(`${d.getMonth() + 1}-10-${d.getFullYear()}`);
113
- });
114
-
115
- test("Selecting a date from the calendar (using keyboard presses)", () => {
116
- const { getByRole } = render(<DxcDateInput />);
117
- const calendarAction = getByRole("button");
118
- const input = getByRole("textbox");
119
-
120
- userEvent.type(input, "01-01-2010");
121
- userEvent.click(calendarAction);
122
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
123
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
124
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
125
- fireEvent.keyDown(document, { key: "ArrowLeft", code: "ArrowLeft", keyCode: 37, charCode: 37 });
126
- fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
127
- expect(input.value).toBe("03-01-2010");
128
- });
129
-
130
- test("onChange & onBlur functions are called correctly", () => {
131
- const onBlur = jest.fn();
132
- const onChange = jest.fn();
133
- const { getByRole } = render(<DxcDateInput onChange={onChange} onBlur={onBlur} />);
134
- const input = getByRole("textbox");
135
- const d = new Date(2011, 9, 10);
136
-
137
- userEvent.type(input, "10-10-2011");
138
- expect(input.value).toBe("10-10-2011");
139
- expect(onChange).toHaveBeenCalledTimes(10);
140
- expect(onChange).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
141
- fireEvent.blur(input);
142
- expect(onBlur).toHaveBeenCalled();
143
- expect(onBlur).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
144
- });
145
-
146
- test("onChange & onBlur functions are called correctly, also with errors", () => {
147
- const onBlur = jest.fn();
148
- const onChange = jest.fn();
149
- const { getByRole } = render(<DxcDateInput onChange={onChange} onBlur={onBlur} />);
150
- const input = getByRole("textbox");
151
-
152
- userEvent.type(input, "10-10-");
153
- expect(input.value).toBe("10-10-");
154
- expect(onChange).toHaveBeenCalledTimes(6);
155
- expect(onChange).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
156
- fireEvent.blur(input);
157
- expect(onBlur).toHaveBeenCalled();
158
- expect(onBlur).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
159
- });
160
-
161
- test("onBlur function removes the error when it is fixed", () => {
162
- const onBlur = jest.fn();
163
- const { getByRole } = render(<DxcDateInput onBlur={onBlur} />);
164
- const input = getByRole("textbox");
165
- const d = new Date(2002, 1, 20);
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
- userEvent.type(input, "20-02-2002");
174
- expect(input.value).toBe("20-02-2002");
175
- fireEvent.blur(input);
176
- expect(onBlur).toHaveBeenCalled();
177
- expect(onBlur).toHaveBeenCalledWith({ value: "20-02-2002", error: null, date: d });
178
- });
179
-
180
- test("onBlur function removes the error when the input is empty", () => {
181
- const onBlur = jest.fn();
182
- const { getByRole } = render(<DxcDateInput onBlur={onBlur} optional />);
183
- const input = getByRole("textbox");
184
-
185
- userEvent.type(input, "test");
186
- expect(input.value).toBe("test");
187
- fireEvent.blur(input);
188
- expect(onBlur).toHaveBeenCalled();
189
- expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Invalid date.", date: null });
190
- userEvent.clear(input);
191
- fireEvent.blur(input);
192
- expect(onBlur).toHaveBeenCalled();
193
- expect(onBlur).toHaveBeenCalledWith({ value: "", error: null, date: null });
194
- });
195
-
196
- test("onBlur & onChange functions error: required field (not optional)", () => {
197
- const onBlur = jest.fn();
198
- const onChange = jest.fn();
199
- const { getByRole } = render(<DxcDateInput onBlur={onBlur} onChange={onChange} />);
200
- const date = getByRole("textbox");
201
-
202
- userEvent.type(date, "t");
203
- expect(date.value).toBe("t");
204
- userEvent.clear(date);
205
- fireEvent.blur(date);
206
- expect(onBlur).toHaveBeenCalled();
207
- expect(onBlur).toHaveBeenCalledWith({
208
- value: "",
209
- error: "This field is required. Please, enter a value.",
210
- date: null,
211
- });
212
- expect(onChange).toHaveBeenCalled();
213
- expect(onChange).toHaveBeenCalledWith({
214
- value: "",
215
- error: "This field is required. Please, enter a value.",
216
- date: null,
217
- });
218
- });
219
-
220
- test("Disabled date input (calendar action must be shown but not clickable)", () => {
221
- const { getByRole, queryByText } = render(<DxcDateInput disabled />);
222
- const calendarAction = getByRole("button");
223
- const d = new Date();
224
- const options = { weekday: "short", month: "short", day: "numeric" };
225
-
226
- expect(getByRole("textbox").disabled).toBeTruthy();
227
- userEvent.click(calendarAction);
228
- expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
229
- });
230
-
231
- test("Input has correct accesibility attributes", () => {
232
- const { getByRole } = render(<DxcDateInput label="Date input label" />);
233
- const input = getByRole("textbox");
234
- expect(input.getAttribute("aria-autocomplete")).toBeNull();
235
- expect(input.getAttribute("aria-controls")).toBeNull();
236
- expect(input.getAttribute("aria-expanded")).toBeNull();
237
- const calendarAction = getByRole("button");
238
- userEvent.click(calendarAction);
239
- const datePicker = getByRole("dialog");
240
- expect(datePicker.getAttribute("aria-modal")).toBe("true");
241
- });
242
- });
@@ -1,23 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcDialog from "../src/dialog/Dialog";
4
-
5
- describe("Dialog component tests", () => {
6
- test("Dialog renders with correct text", () => {
7
- const { getByText } = render(<DxcDialog>dialog-text</DxcDialog>);
8
- expect(getByText("dialog-text")).toBeTruthy();
9
- });
10
-
11
- test("Dialog renders without close button", () => {
12
- const { queryByRole } = render(<DxcDialog isCloseVisible={false}>dialog-text</DxcDialog>);
13
- expect(queryByRole("button")).toBeFalsy();
14
- });
15
-
16
- test("Calls correct function onCloseClick", () => {
17
- const onCloseClick = jest.fn();
18
- const { getByRole } = render(<DxcDialog onCloseClick={onCloseClick}>dialog-text</DxcDialog>);
19
- const closeButton = getByRole("button");
20
- fireEvent.click(closeButton);
21
- expect(onCloseClick).toHaveBeenCalled();
22
- });
23
- });