@dxc-technology/halstack-react 0.0.0-3716032 → 0.0.0-376c368

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 (545) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -23
  3. package/HalstackContext.d.ts +1269 -0
  4. package/HalstackContext.js +320 -0
  5. package/README.md +47 -0
  6. package/accordion/Accordion.accessibility.test.d.ts +1 -0
  7. package/accordion/Accordion.accessibility.test.js +71 -0
  8. package/accordion/Accordion.d.ts +1 -1
  9. package/accordion/Accordion.js +102 -192
  10. package/accordion/Accordion.stories.tsx +83 -142
  11. package/accordion/Accordion.test.d.ts +1 -0
  12. package/accordion/Accordion.test.js +56 -0
  13. package/accordion/types.d.ts +11 -22
  14. package/accordion-group/AccordionGroup.accessibility.test.d.ts +1 -0
  15. package/accordion-group/AccordionGroup.accessibility.test.js +82 -0
  16. package/accordion-group/AccordionGroup.d.ts +3 -3
  17. package/accordion-group/AccordionGroup.js +38 -107
  18. package/accordion-group/AccordionGroup.stories.tsx +95 -68
  19. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  20. package/accordion-group/AccordionGroup.test.js +94 -0
  21. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  22. package/accordion-group/AccordionGroupAccordion.js +31 -0
  23. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  24. package/accordion-group/AccordionGroupContext.js +8 -0
  25. package/accordion-group/types.d.ts +17 -22
  26. package/action-icon/ActionIcon.accessibility.test.d.ts +1 -0
  27. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  28. package/action-icon/ActionIcon.d.ts +4 -0
  29. package/action-icon/ActionIcon.js +48 -0
  30. package/action-icon/ActionIcon.stories.tsx +41 -0
  31. package/action-icon/ActionIcon.test.d.ts +1 -0
  32. package/action-icon/ActionIcon.test.js +64 -0
  33. package/action-icon/types.d.ts +26 -0
  34. package/alert/Alert.accessibility.test.d.ts +1 -0
  35. package/alert/Alert.accessibility.test.js +95 -0
  36. package/alert/Alert.js +40 -127
  37. package/alert/Alert.stories.tsx +28 -0
  38. package/alert/Alert.test.d.ts +1 -0
  39. package/alert/Alert.test.js +75 -0
  40. package/alert/types.d.ts +5 -5
  41. package/badge/Badge.accessibility.test.d.ts +1 -0
  42. package/badge/Badge.accessibility.test.js +129 -0
  43. package/badge/Badge.d.ts +4 -0
  44. package/badge/Badge.js +142 -40
  45. package/badge/Badge.stories.tsx +210 -0
  46. package/badge/Badge.test.d.ts +1 -0
  47. package/badge/Badge.test.js +30 -0
  48. package/badge/types.d.ts +54 -0
  49. package/bleed/Bleed.d.ts +3 -0
  50. package/bleed/Bleed.js +43 -0
  51. package/bleed/Bleed.stories.tsx +342 -0
  52. package/bleed/types.d.ts +37 -0
  53. package/box/Box.accessibility.test.d.ts +1 -0
  54. package/box/Box.accessibility.test.js +33 -0
  55. package/box/Box.d.ts +1 -1
  56. package/box/Box.js +30 -81
  57. package/box/Box.stories.tsx +38 -51
  58. package/box/Box.test.d.ts +1 -0
  59. package/box/Box.test.js +13 -0
  60. package/box/types.d.ts +3 -14
  61. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  62. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  63. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  64. package/breadcrumbs/Breadcrumbs.js +79 -0
  65. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  66. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  67. package/breadcrumbs/Breadcrumbs.test.js +168 -0
  68. package/breadcrumbs/Item.d.ts +4 -0
  69. package/breadcrumbs/Item.js +52 -0
  70. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  71. package/breadcrumbs/dropdownTheme.js +62 -0
  72. package/breadcrumbs/types.d.ts +40 -0
  73. package/breadcrumbs/types.js +5 -0
  74. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  75. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  76. package/bulleted-list/BulletedList.d.ts +7 -0
  77. package/bulleted-list/BulletedList.js +92 -0
  78. package/bulleted-list/BulletedList.stories.tsx +115 -0
  79. package/bulleted-list/types.d.ts +38 -0
  80. package/bulleted-list/types.js +5 -0
  81. package/button/Button.accessibility.test.d.ts +1 -0
  82. package/button/Button.accessibility.test.js +127 -0
  83. package/button/Button.d.ts +1 -1
  84. package/button/Button.js +64 -122
  85. package/button/Button.stories.tsx +155 -106
  86. package/button/Button.test.d.ts +1 -0
  87. package/button/Button.test.js +38 -0
  88. package/button/types.d.ts +12 -12
  89. package/card/Card.accessibility.test.d.ts +1 -0
  90. package/card/Card.accessibility.test.js +36 -0
  91. package/card/Card.d.ts +1 -1
  92. package/card/Card.js +59 -102
  93. package/card/Card.stories.tsx +14 -44
  94. package/card/Card.test.d.ts +1 -0
  95. package/card/Card.test.js +39 -0
  96. package/card/types.d.ts +6 -11
  97. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  98. package/checkbox/Checkbox.accessibility.test.js +87 -0
  99. package/checkbox/Checkbox.d.ts +2 -2
  100. package/checkbox/Checkbox.js +140 -181
  101. package/checkbox/Checkbox.stories.tsx +166 -136
  102. package/checkbox/Checkbox.test.d.ts +1 -0
  103. package/checkbox/Checkbox.test.js +199 -0
  104. package/checkbox/types.d.ts +18 -6
  105. package/chip/Chip.accessibility.test.d.ts +1 -0
  106. package/chip/Chip.accessibility.test.js +67 -0
  107. package/chip/Chip.d.ts +1 -1
  108. package/chip/Chip.js +49 -122
  109. package/chip/Chip.stories.tsx +105 -31
  110. package/chip/Chip.test.d.ts +1 -0
  111. package/chip/Chip.test.js +41 -0
  112. package/chip/types.d.ts +8 -16
  113. package/common/coreTokens.d.ts +236 -0
  114. package/common/coreTokens.js +183 -0
  115. package/common/utils.d.ts +1 -0
  116. package/common/utils.js +6 -12
  117. package/common/variables.d.ts +1421 -0
  118. package/common/variables.js +1104 -1391
  119. package/container/Container.d.ts +4 -0
  120. package/container/Container.js +194 -0
  121. package/container/Container.stories.tsx +214 -0
  122. package/container/types.d.ts +176 -0
  123. package/container/types.js +5 -0
  124. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  125. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  126. package/contextual-menu/ContextualMenu.d.ts +5 -0
  127. package/contextual-menu/ContextualMenu.js +136 -0
  128. package/contextual-menu/ContextualMenu.stories.tsx +231 -0
  129. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  130. package/contextual-menu/ContextualMenu.test.js +247 -0
  131. package/contextual-menu/GroupItem.d.ts +4 -0
  132. package/contextual-menu/GroupItem.js +67 -0
  133. package/contextual-menu/ItemAction.d.ts +4 -0
  134. package/contextual-menu/ItemAction.js +88 -0
  135. package/contextual-menu/MenuItem.d.ts +4 -0
  136. package/contextual-menu/MenuItem.js +29 -0
  137. package/contextual-menu/SingleItem.d.ts +4 -0
  138. package/contextual-menu/SingleItem.js +38 -0
  139. package/contextual-menu/types.d.ts +65 -0
  140. package/contextual-menu/types.js +5 -0
  141. package/date-input/Calendar.d.ts +4 -0
  142. package/date-input/Calendar.js +230 -0
  143. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  144. package/date-input/DateInput.accessibility.test.js +229 -0
  145. package/date-input/DateInput.js +179 -309
  146. package/date-input/DateInput.stories.tsx +210 -57
  147. package/date-input/DateInput.test.d.ts +1 -0
  148. package/date-input/DateInput.test.js +808 -0
  149. package/date-input/DatePicker.d.ts +4 -0
  150. package/date-input/DatePicker.js +121 -0
  151. package/date-input/YearPicker.d.ts +4 -0
  152. package/date-input/YearPicker.js +105 -0
  153. package/date-input/types.d.ts +86 -22
  154. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  155. package/dialog/Dialog.accessibility.test.js +69 -0
  156. package/dialog/Dialog.d.ts +1 -1
  157. package/dialog/Dialog.js +56 -129
  158. package/dialog/Dialog.stories.tsx +324 -167
  159. package/dialog/Dialog.test.d.ts +1 -0
  160. package/dialog/Dialog.test.js +370 -0
  161. package/dialog/types.d.ts +18 -25
  162. package/divider/Divider.accessibility.test.d.ts +1 -0
  163. package/divider/Divider.accessibility.test.js +33 -0
  164. package/divider/Divider.d.ts +4 -0
  165. package/divider/Divider.js +36 -0
  166. package/divider/Divider.stories.tsx +224 -0
  167. package/divider/Divider.test.d.ts +1 -0
  168. package/divider/Divider.test.js +38 -0
  169. package/divider/types.d.ts +21 -0
  170. package/divider/types.js +5 -0
  171. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  172. package/dropdown/Dropdown.accessibility.test.js +183 -0
  173. package/dropdown/Dropdown.d.ts +1 -1
  174. package/dropdown/Dropdown.js +232 -329
  175. package/dropdown/Dropdown.stories.tsx +245 -65
  176. package/dropdown/Dropdown.test.d.ts +1 -0
  177. package/dropdown/Dropdown.test.js +628 -0
  178. package/dropdown/DropdownMenu.d.ts +4 -0
  179. package/dropdown/DropdownMenu.js +63 -0
  180. package/dropdown/DropdownMenuItem.d.ts +4 -0
  181. package/dropdown/DropdownMenuItem.js +71 -0
  182. package/dropdown/types.d.ts +37 -30
  183. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  184. package/file-input/FileInput.accessibility.test.js +167 -0
  185. package/file-input/FileInput.d.ts +2 -2
  186. package/file-input/FileInput.js +243 -395
  187. package/file-input/FileInput.stories.tsx +123 -11
  188. package/file-input/FileInput.test.d.ts +1 -0
  189. package/file-input/FileInput.test.js +404 -0
  190. package/file-input/FileItem.d.ts +4 -14
  191. package/file-input/FileItem.js +61 -120
  192. package/file-input/types.d.ts +24 -11
  193. package/flex/Flex.d.ts +4 -0
  194. package/flex/Flex.js +57 -0
  195. package/flex/Flex.stories.tsx +112 -0
  196. package/flex/types.d.ts +97 -0
  197. package/flex/types.js +5 -0
  198. package/footer/Footer.accessibility.test.d.ts +1 -0
  199. package/footer/Footer.accessibility.test.js +125 -0
  200. package/footer/Footer.d.ts +1 -1
  201. package/footer/Footer.js +73 -193
  202. package/footer/Footer.stories.tsx +99 -21
  203. package/footer/Footer.test.d.ts +1 -0
  204. package/footer/Footer.test.js +85 -0
  205. package/footer/Icons.d.ts +3 -2
  206. package/footer/Icons.js +54 -23
  207. package/footer/types.d.ts +26 -27
  208. package/grid/Grid.d.ts +7 -0
  209. package/grid/Grid.js +76 -0
  210. package/grid/Grid.stories.tsx +221 -0
  211. package/grid/types.d.ts +115 -0
  212. package/grid/types.js +5 -0
  213. package/header/Header.accessibility.test.d.ts +1 -0
  214. package/header/Header.accessibility.test.js +94 -0
  215. package/header/Header.d.ts +4 -3
  216. package/header/Header.js +104 -218
  217. package/header/Header.stories.tsx +169 -64
  218. package/header/Header.test.d.ts +1 -0
  219. package/header/Header.test.js +66 -0
  220. package/header/Icons.d.ts +2 -2
  221. package/header/Icons.js +5 -15
  222. package/header/types.d.ts +7 -21
  223. package/heading/Heading.accessibility.test.d.ts +1 -0
  224. package/heading/Heading.accessibility.test.js +33 -0
  225. package/heading/Heading.js +10 -32
  226. package/heading/Heading.stories.tsx +3 -2
  227. package/heading/Heading.test.d.ts +1 -0
  228. package/heading/Heading.test.js +156 -0
  229. package/heading/types.d.ts +7 -7
  230. package/icon/Icon.accessibility.test.d.ts +1 -0
  231. package/icon/Icon.accessibility.test.js +30 -0
  232. package/icon/Icon.d.ts +4 -0
  233. package/icon/Icon.js +33 -0
  234. package/icon/Icon.stories.tsx +28 -0
  235. package/icon/types.d.ts +4 -0
  236. package/icon/types.js +5 -0
  237. package/image/Image.accessibility.test.d.ts +1 -0
  238. package/image/Image.accessibility.test.js +56 -0
  239. package/image/Image.d.ts +4 -0
  240. package/image/Image.js +70 -0
  241. package/image/Image.stories.tsx +129 -0
  242. package/image/types.d.ts +72 -0
  243. package/image/types.js +5 -0
  244. package/inset/Inset.d.ts +3 -0
  245. package/inset/Inset.js +43 -0
  246. package/inset/Inset.stories.tsx +230 -0
  247. package/inset/types.d.ts +37 -0
  248. package/inset/types.js +5 -0
  249. package/layout/ApplicationLayout.d.ts +16 -6
  250. package/layout/ApplicationLayout.js +88 -176
  251. package/layout/ApplicationLayout.stories.tsx +85 -94
  252. package/layout/Icons.d.ts +7 -0
  253. package/layout/Icons.js +41 -48
  254. package/layout/types.d.ts +19 -35
  255. package/link/Link.accessibility.test.d.ts +1 -0
  256. package/link/Link.accessibility.test.js +108 -0
  257. package/link/Link.d.ts +3 -2
  258. package/link/Link.js +64 -108
  259. package/link/Link.stories.tsx +161 -54
  260. package/link/Link.test.d.ts +1 -0
  261. package/link/Link.test.js +63 -0
  262. package/link/types.d.ts +15 -35
  263. package/main.d.ts +20 -18
  264. package/main.js +89 -120
  265. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  266. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  267. package/nav-tabs/NavTabs.d.ts +7 -0
  268. package/nav-tabs/NavTabs.js +108 -0
  269. package/nav-tabs/NavTabs.stories.tsx +294 -0
  270. package/nav-tabs/NavTabs.test.d.ts +1 -0
  271. package/nav-tabs/NavTabs.test.js +77 -0
  272. package/nav-tabs/NavTabsContext.d.ts +3 -0
  273. package/nav-tabs/NavTabsContext.js +8 -0
  274. package/nav-tabs/Tab.d.ts +4 -0
  275. package/nav-tabs/Tab.js +117 -0
  276. package/nav-tabs/types.d.ts +52 -0
  277. package/nav-tabs/types.js +5 -0
  278. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  279. package/number-input/NumberInput.accessibility.test.js +227 -0
  280. package/number-input/NumberInput.js +51 -45
  281. package/number-input/NumberInput.stories.tsx +39 -28
  282. package/number-input/NumberInput.test.d.ts +1 -0
  283. package/number-input/NumberInput.test.js +988 -0
  284. package/number-input/NumberInputContext.d.ts +3 -4
  285. package/number-input/NumberInputContext.js +3 -14
  286. package/number-input/types.d.ts +34 -15
  287. package/package.json +58 -52
  288. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  289. package/paginator/Paginator.accessibility.test.js +78 -0
  290. package/paginator/Paginator.js +46 -100
  291. package/paginator/Paginator.stories.tsx +24 -0
  292. package/paginator/Paginator.test.d.ts +1 -0
  293. package/paginator/Paginator.test.js +334 -0
  294. package/paginator/types.d.ts +3 -3
  295. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  296. package/paragraph/Paragraph.accessibility.test.js +28 -0
  297. package/paragraph/Paragraph.d.ts +5 -0
  298. package/paragraph/Paragraph.js +22 -0
  299. package/paragraph/Paragraph.stories.tsx +27 -0
  300. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  301. package/password-input/PasswordInput.accessibility.test.js +152 -0
  302. package/password-input/PasswordInput.js +62 -125
  303. package/password-input/PasswordInput.stories.tsx +13 -36
  304. package/password-input/PasswordInput.test.d.ts +1 -0
  305. package/password-input/PasswordInput.test.js +197 -0
  306. package/password-input/types.d.ts +21 -17
  307. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  308. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  309. package/progress-bar/ProgressBar.js +68 -92
  310. package/progress-bar/ProgressBar.stories.tsx +93 -0
  311. package/progress-bar/ProgressBar.test.d.ts +1 -0
  312. package/progress-bar/ProgressBar.test.js +93 -0
  313. package/progress-bar/types.d.ts +3 -3
  314. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  315. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  316. package/quick-nav/QuickNav.d.ts +4 -0
  317. package/quick-nav/QuickNav.js +94 -0
  318. package/quick-nav/QuickNav.stories.tsx +356 -0
  319. package/quick-nav/types.d.ts +21 -0
  320. package/quick-nav/types.js +5 -0
  321. package/radio-group/Radio.d.ts +4 -0
  322. package/radio-group/Radio.js +121 -0
  323. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  324. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  325. package/radio-group/RadioGroup.d.ts +4 -0
  326. package/radio-group/RadioGroup.js +233 -0
  327. package/radio-group/RadioGroup.stories.tsx +214 -0
  328. package/radio-group/RadioGroup.test.d.ts +1 -0
  329. package/radio-group/RadioGroup.test.js +754 -0
  330. package/radio-group/types.d.ts +114 -0
  331. package/radio-group/types.js +5 -0
  332. package/resultset-table/Icons.d.ts +7 -0
  333. package/resultset-table/Icons.js +47 -0
  334. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  335. package/resultset-table/ResultsetTable.accessibility.test.js +284 -0
  336. package/resultset-table/ResultsetTable.d.ts +7 -0
  337. package/resultset-table/ResultsetTable.js +195 -0
  338. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +174 -37
  339. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  340. package/resultset-table/ResultsetTable.test.js +450 -0
  341. package/{resultsetTable → resultset-table}/types.d.ts +46 -12
  342. package/resultset-table/types.js +5 -0
  343. package/select/Listbox.d.ts +4 -0
  344. package/select/Listbox.js +151 -0
  345. package/select/Option.d.ts +4 -0
  346. package/select/Option.js +89 -0
  347. package/select/Select.accessibility.test.d.ts +1 -0
  348. package/select/Select.accessibility.test.js +227 -0
  349. package/select/Select.js +242 -503
  350. package/select/Select.stories.tsx +611 -255
  351. package/select/Select.test.d.ts +1 -0
  352. package/select/Select.test.js +2267 -0
  353. package/select/types.d.ts +65 -26
  354. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  355. package/sidenav/Sidenav.accessibility.test.js +59 -0
  356. package/sidenav/Sidenav.d.ts +6 -5
  357. package/sidenav/Sidenav.js +136 -71
  358. package/sidenav/Sidenav.stories.tsx +246 -134
  359. package/sidenav/Sidenav.test.d.ts +1 -0
  360. package/sidenav/Sidenav.test.js +37 -0
  361. package/sidenav/SidenavContext.d.ts +5 -0
  362. package/sidenav/SidenavContext.js +13 -0
  363. package/sidenav/types.d.ts +52 -26
  364. package/slider/Slider.accessibility.test.d.ts +1 -0
  365. package/slider/Slider.accessibility.test.js +103 -0
  366. package/slider/Slider.d.ts +2 -2
  367. package/slider/Slider.js +147 -181
  368. package/slider/Slider.stories.tsx +68 -65
  369. package/slider/Slider.test.d.ts +1 -0
  370. package/slider/Slider.test.js +256 -0
  371. package/slider/types.d.ts +11 -3
  372. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  373. package/spinner/Spinner.accessibility.test.js +96 -0
  374. package/spinner/Spinner.js +34 -74
  375. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -26
  376. package/spinner/Spinner.test.d.ts +1 -0
  377. package/spinner/Spinner.test.js +55 -0
  378. package/spinner/types.d.ts +3 -3
  379. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  380. package/status-light/StatusLight.accessibility.test.js +157 -0
  381. package/status-light/StatusLight.d.ts +4 -0
  382. package/status-light/StatusLight.js +51 -0
  383. package/status-light/StatusLight.stories.tsx +74 -0
  384. package/status-light/StatusLight.test.d.ts +1 -0
  385. package/status-light/StatusLight.test.js +25 -0
  386. package/status-light/types.d.ts +17 -0
  387. package/status-light/types.js +5 -0
  388. package/switch/Switch.accessibility.test.d.ts +1 -0
  389. package/switch/Switch.accessibility.test.js +98 -0
  390. package/switch/Switch.d.ts +2 -2
  391. package/switch/Switch.js +146 -114
  392. package/switch/Switch.stories.tsx +57 -68
  393. package/switch/Switch.test.d.ts +1 -0
  394. package/switch/Switch.test.js +180 -0
  395. package/switch/types.d.ts +13 -5
  396. package/table/DropdownTheme.js +62 -0
  397. package/table/Table.accessibility.test.d.ts +1 -0
  398. package/table/Table.accessibility.test.js +92 -0
  399. package/table/Table.d.ts +6 -2
  400. package/table/Table.js +78 -35
  401. package/table/Table.stories.tsx +663 -0
  402. package/table/Table.test.d.ts +1 -0
  403. package/table/Table.test.js +111 -0
  404. package/table/types.d.ts +34 -6
  405. package/tabs/Tab.d.ts +4 -0
  406. package/tabs/Tab.js +117 -0
  407. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  408. package/tabs/Tabs.accessibility.test.js +56 -0
  409. package/tabs/Tabs.d.ts +1 -1
  410. package/tabs/Tabs.js +306 -146
  411. package/tabs/Tabs.stories.tsx +127 -18
  412. package/tabs/Tabs.test.d.ts +1 -0
  413. package/tabs/Tabs.test.js +276 -0
  414. package/tabs/types.d.ts +46 -24
  415. package/tag/Tag.accessibility.test.d.ts +1 -0
  416. package/tag/Tag.accessibility.test.js +69 -0
  417. package/tag/Tag.d.ts +1 -1
  418. package/tag/Tag.js +43 -85
  419. package/tag/Tag.stories.tsx +38 -31
  420. package/tag/Tag.test.d.ts +1 -0
  421. package/tag/Tag.test.js +41 -0
  422. package/tag/types.d.ts +25 -16
  423. package/text-input/Suggestion.d.ts +4 -0
  424. package/text-input/Suggestion.js +67 -0
  425. package/text-input/Suggestions.d.ts +4 -0
  426. package/text-input/Suggestions.js +94 -0
  427. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  428. package/text-input/TextInput.accessibility.test.js +320 -0
  429. package/text-input/TextInput.js +331 -546
  430. package/text-input/TextInput.stories.tsx +292 -271
  431. package/text-input/TextInput.test.d.ts +1 -0
  432. package/text-input/TextInput.test.js +1755 -0
  433. package/text-input/types.d.ts +71 -25
  434. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  435. package/textarea/Textarea.accessibility.test.js +155 -0
  436. package/textarea/Textarea.js +82 -131
  437. package/textarea/Textarea.stories.tsx +174 -0
  438. package/textarea/Textarea.test.d.ts +1 -0
  439. package/textarea/Textarea.test.js +406 -0
  440. package/textarea/types.d.ts +27 -16
  441. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  442. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  443. package/toggle-group/ToggleGroup.d.ts +2 -2
  444. package/toggle-group/ToggleGroup.js +92 -107
  445. package/toggle-group/ToggleGroup.stories.tsx +57 -12
  446. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  447. package/toggle-group/ToggleGroup.test.js +137 -0
  448. package/toggle-group/types.d.ts +36 -19
  449. package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
  450. package/tooltip/Tooltip.accessibility.test.js +144 -0
  451. package/tooltip/Tooltip.d.ts +4 -0
  452. package/tooltip/Tooltip.js +50 -0
  453. package/tooltip/Tooltip.stories.tsx +111 -0
  454. package/tooltip/Tooltip.test.d.ts +1 -0
  455. package/tooltip/Tooltip.test.js +112 -0
  456. package/tooltip/types.d.ts +16 -0
  457. package/tooltip/types.js +5 -0
  458. package/typography/Typography.accessibility.test.d.ts +1 -0
  459. package/typography/Typography.accessibility.test.js +339 -0
  460. package/typography/Typography.d.ts +4 -0
  461. package/typography/Typography.js +23 -0
  462. package/typography/Typography.stories.tsx +196 -0
  463. package/typography/Typography.test.js +23 -0
  464. package/typography/types.d.ts +18 -0
  465. package/typography/types.js +5 -0
  466. package/useTheme.d.ts +1167 -1
  467. package/useTheme.js +4 -11
  468. package/useTranslatedLabels.d.ts +85 -0
  469. package/useTranslatedLabels.js +14 -0
  470. package/utils/BaseTypography.d.ts +21 -0
  471. package/utils/BaseTypography.js +98 -0
  472. package/utils/FocusLock.d.ts +13 -0
  473. package/utils/FocusLock.js +125 -0
  474. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  475. package/wizard/Wizard.accessibility.test.js +55 -0
  476. package/wizard/Wizard.d.ts +1 -1
  477. package/wizard/Wizard.js +78 -120
  478. package/wizard/Wizard.stories.tsx +68 -20
  479. package/wizard/Wizard.test.d.ts +1 -0
  480. package/wizard/Wizard.test.js +114 -0
  481. package/wizard/types.d.ts +14 -10
  482. package/ThemeContext.d.ts +0 -15
  483. package/ThemeContext.js +0 -243
  484. package/V3Select/V3Select.js +0 -455
  485. package/V3Select/index.d.ts +0 -27
  486. package/V3Textarea/V3Textarea.js +0 -260
  487. package/V3Textarea/index.d.ts +0 -27
  488. package/card/ice-cream.jpg +0 -0
  489. package/common/OpenSans.css +0 -81
  490. package/common/RequiredComponent.js +0 -32
  491. package/common/fonts/OpenSans-Bold.ttf +0 -0
  492. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  493. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  494. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  495. package/common/fonts/OpenSans-Italic.ttf +0 -0
  496. package/common/fonts/OpenSans-Light.ttf +0 -0
  497. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  498. package/common/fonts/OpenSans-Regular.ttf +0 -0
  499. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  500. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  501. package/date/Date.js +0 -373
  502. package/date/index.d.ts +0 -27
  503. package/input-text/Icons.js +0 -22
  504. package/input-text/InputText.js +0 -611
  505. package/input-text/index.d.ts +0 -36
  506. package/list/List.d.ts +0 -8
  507. package/list/List.js +0 -47
  508. package/list/List.stories.tsx +0 -85
  509. package/number-input/numberInputContextTypes.d.ts +0 -19
  510. package/paginator/Icons.js +0 -66
  511. package/progress-bar/ProgressBar.stories.jsx +0 -58
  512. package/radio/Radio.d.ts +0 -4
  513. package/radio/Radio.js +0 -174
  514. package/radio/Radio.stories.tsx +0 -192
  515. package/radio/types.d.ts +0 -54
  516. package/resultsetTable/ResultsetTable.d.ts +0 -4
  517. package/resultsetTable/ResultsetTable.js +0 -251
  518. package/row/Row.d.ts +0 -11
  519. package/row/Row.js +0 -124
  520. package/row/Row.stories.tsx +0 -223
  521. package/stack/Stack.d.ts +0 -10
  522. package/stack/Stack.js +0 -94
  523. package/stack/Stack.stories.tsx +0 -150
  524. package/table/Table.stories.jsx +0 -276
  525. package/text/Text.d.ts +0 -7
  526. package/text/Text.js +0 -30
  527. package/text/Text.stories.tsx +0 -19
  528. package/textarea/Textarea.stories.jsx +0 -135
  529. package/toggle/Toggle.js +0 -186
  530. package/toggle/index.d.ts +0 -21
  531. package/upload/Upload.js +0 -201
  532. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  533. package/upload/buttons-upload/Icons.js +0 -40
  534. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  535. package/upload/dragAndDropArea/Icons.js +0 -39
  536. package/upload/file-upload/FileToUpload.js +0 -115
  537. package/upload/file-upload/Icons.js +0 -66
  538. package/upload/files-upload/FilesToUpload.js +0 -109
  539. package/upload/index.d.ts +0 -15
  540. package/upload/transaction/Icons.js +0 -160
  541. package/upload/transaction/Transaction.js +0 -104
  542. package/upload/transactions/Transactions.js +0 -94
  543. /package/{radio → action-icon}/types.js +0 -0
  544. /package/{resultsetTable → badge}/types.js +0 -0
  545. /package/{number-input/numberInputContextTypes.js → bleed/types.js} +0 -0
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { AccordionPropsType } from "./types";
3
+ declare const AccordionGroupAccordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
4
+ export default AccordionGroupAccordion;
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
13
+ var _AccordionGroupContext = require("./AccordionGroupContext");
14
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
16
+ var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
17
+ var childProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
18
+ var _useContext = (0, _react.useContext)(_AccordionGroupContext.AccordionGroupAccordionContext),
19
+ activeIndex = _useContext.activeIndex,
20
+ handlerActiveChange = _useContext.handlerActiveChange,
21
+ disabled = _useContext.disabled,
22
+ index = _useContext.index;
23
+ return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({
24
+ isExpanded: activeIndex === index,
25
+ onChange: function onChange() {
26
+ handlerActiveChange(index);
27
+ },
28
+ disabled: disabled
29
+ }, childProps), childProps.children);
30
+ };
31
+ var _default = exports["default"] = AccordionGroupAccordion;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { AccordionGroupAccordionContextProps } from "./types";
3
+ export declare const AccordionGroupAccordionContext: import("react").Context<AccordionGroupAccordionContextProps>;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.AccordionGroupAccordionContext = void 0;
7
+ var _react = require("react");
8
+ var AccordionGroupAccordionContext = exports.AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -1,31 +1,21 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type Padding = {
10
- top?: Space;
11
- bottom?: Space;
12
- left?: Space;
13
- right?: Space;
14
- };
15
- declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
16
- export declare type AccordionPropsType = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type AccordionPropsType = {
17
11
  /**
18
12
  * The panel label.
19
13
  */
20
14
  label: string;
21
15
  /**
22
- * Element used as the icon that will be placed next to panel label.
23
- */
24
- icon?: SVG;
25
- /**
26
- * @deprecated URL of the icon that will be placed next to panel label.
16
+ * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
27
17
  */
28
- iconSrc?: string;
18
+ icon?: string | SVG;
29
19
  /**
30
20
  * Assistive text to be placed on the right side of the panel.
31
21
  */
@@ -34,18 +24,17 @@ export declare type AccordionPropsType = {
34
24
  * If true, the component will be disabled.
35
25
  */
36
26
  disabled?: boolean;
37
- /**
38
- * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
39
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
40
- */
41
- padding?: Space | Padding;
42
27
  /**
43
28
  * The expanded panel of the accordion. This area can be used to render
44
29
  * custom content.
45
30
  */
46
31
  children: React.ReactNode;
47
32
  };
48
- declare type Props = {
33
+ type Props = {
34
+ /**
35
+ * Initially active accordion, only when it is uncontrolled.
36
+ */
37
+ defaultIndexActive?: number;
49
38
  /**
50
39
  * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
51
40
  * If null, the component will be controlled and all accordions will be closed.
@@ -69,4 +58,10 @@ declare type Props = {
69
58
  */
70
59
  children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
71
60
  };
61
+ export type AccordionGroupAccordionContextProps = {
62
+ activeIndex: number;
63
+ handlerActiveChange: (index: number) => void;
64
+ disabled: boolean;
65
+ index: number;
66
+ };
72
67
  export default Props;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _react2 = require("@testing-library/react");
8
+ var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
9
+ var _axeHelper = require("../../test/accessibility/axe-helper.js");
10
+ var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
11
+ width: "24px",
12
+ height: "24px",
13
+ viewBox: "0 0 24 24",
14
+ fill: "currentColor"
15
+ }, /*#__PURE__*/_react["default"].createElement("path", {
16
+ d: "M0 0h24v24H0z",
17
+ fill: "none"
18
+ }), /*#__PURE__*/_react["default"].createElement("path", {
19
+ d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
20
+ }));
21
+ describe("Action icon component accessibility tests", function () {
22
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
23
+ var _render, container, results;
24
+ return _regenerator["default"].wrap(function _callee$(_context) {
25
+ while (1) switch (_context.prev = _context.next) {
26
+ case 0:
27
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
28
+ icon: iconSVG,
29
+ title: "favourite"
30
+ })), container = _render.container;
31
+ _context.next = 3;
32
+ return (0, _axeHelper.axe)(container);
33
+ case 3:
34
+ results = _context.sent;
35
+ expect(results).toHaveNoViolations();
36
+ case 5:
37
+ case "end":
38
+ return _context.stop();
39
+ }
40
+ }, _callee);
41
+ })));
42
+ it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
43
+ var _render2, container, results;
44
+ return _regenerator["default"].wrap(function _callee2$(_context2) {
45
+ while (1) switch (_context2.prev = _context2.next) {
46
+ case 0:
47
+ _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
48
+ icon: iconSVG,
49
+ title: "disabled",
50
+ disabled: true
51
+ })), container = _render2.container;
52
+ _context2.next = 3;
53
+ return (0, _axeHelper.axe)(container);
54
+ case 3:
55
+ results = _context2.sent;
56
+ expect(results).toHaveNoViolations();
57
+ case 5:
58
+ case "end":
59
+ return _context2.stop();
60
+ }
61
+ }, _callee2);
62
+ })));
63
+ });
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import ActionIconPropsTypes from "./types";
3
+ declare const DxcActionIcon: React.ForwardRefExoticComponent<ActionIconPropsTypes & React.RefAttributes<HTMLButtonElement>>;
4
+ export default DxcActionIcon;
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+ var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
12
+ var _Icon = _interopRequireDefault(require("../icon/Icon"));
13
+ var _templateObject;
14
+ var DxcActionIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
15
+ var _ref$disabled = _ref.disabled,
16
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
17
+ title = _ref.title,
18
+ icon = _ref.icon,
19
+ onClick = _ref.onClick,
20
+ tabIndex = _ref.tabIndex;
21
+ return /*#__PURE__*/_react["default"].createElement(ActionIcon, {
22
+ "aria-label": title,
23
+ disabled: disabled,
24
+ onClick: onClick,
25
+ onMouseDown: function onMouseDown(event) {
26
+ event.stopPropagation();
27
+ },
28
+ tabIndex: tabIndex,
29
+ title: title,
30
+ type: "button",
31
+ ref: ref
32
+ }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
33
+ icon: icon
34
+ }) : icon);
35
+ });
36
+ var ActionIcon = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: none;\n border-radius: 2px;\n width: 24px;\n height: 24px;\n font-size: 16px;\n padding: 0px;\n ", "\n\n box-shadow: 0 0 0 2px transparent;\n background-color: ", ";\n color: ", ";\n\n ", "\n\n svg {\n width: 16px;\n height: 16px;\n }\n"])), function (props) {
37
+ return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
38
+ }, function (props) {
39
+ var _props$theme$disabled, _props$theme$actionBa;
40
+ return props.disabled ? (_props$theme$disabled = props.theme.disabledActionBackgroundColor) !== null && _props$theme$disabled !== void 0 ? _props$theme$disabled : _coreTokens["default"].color_transparent : (_props$theme$actionBa = props.theme.actionBackgroundColor) !== null && _props$theme$actionBa !== void 0 ? _props$theme$actionBa : _coreTokens["default"].color_transparent;
41
+ }, function (props) {
42
+ var _props$theme$disabled2, _props$theme$actionIc;
43
+ return props.disabled ? (_props$theme$disabled2 = props.theme.disabledActionIconColor) !== null && _props$theme$disabled2 !== void 0 ? _props$theme$disabled2 : _coreTokens["default"].color_grey_500 : (_props$theme$actionIc = props.theme.actionIconColor) !== null && _props$theme$actionIc !== void 0 ? _props$theme$actionIc : _coreTokens["default"].color_black;
44
+ }, function (props) {
45
+ var _props$theme$focusAct, _props$theme$focusAct2, _props$theme$hoverAct, _props$theme$hoverAct2, _props$theme$activeAc, _props$theme$activeAc2;
46
+ return !props.disabled && "\n &:focus,\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ".concat((_props$theme$focusAct = props.theme.focusActionBorderColor) !== null && _props$theme$focusAct !== void 0 ? _props$theme$focusAct : _coreTokens["default"].color_blue_600, ";\n color: ").concat((_props$theme$focusAct2 = props.theme.focusActionIconColor) !== null && _props$theme$focusAct2 !== void 0 ? _props$theme$focusAct2 : _coreTokens["default"].color_black, ";\n }\n &:hover {\n background-color: ").concat((_props$theme$hoverAct = props.theme.hoverActionBackgroundColor) !== null && _props$theme$hoverAct !== void 0 ? _props$theme$hoverAct : _coreTokens["default"].color_grey_100, ";\n color: ").concat((_props$theme$hoverAct2 = props.theme.hoverActionIconColor) !== null && _props$theme$hoverAct2 !== void 0 ? _props$theme$hoverAct2 : _coreTokens["default"].color_black, ";\n }\n &:active {\n background-color: ").concat((_props$theme$activeAc = props.theme.activeActionBackgroundColor) !== null && _props$theme$activeAc !== void 0 ? _props$theme$activeAc : _coreTokens["default"].color_grey_300, ";\n color: ").concat((_props$theme$activeAc2 = props.theme.activeActionIconColor) !== null && _props$theme$activeAc2 !== void 0 ? _props$theme$activeAc2 : _coreTokens["default"].color_black, ";\n }\n ");
47
+ });
48
+ var _default = exports["default"] = DxcActionIcon;
@@ -0,0 +1,41 @@
1
+ import React from "react";
2
+ import Title from "../../.storybook/components/Title";
3
+ import ExampleContainer from "../../.storybook/components/ExampleContainer";
4
+ import DxcActionIcon from "./ActionIcon";
5
+
6
+ export default {
7
+ title: "Action Icon ",
8
+ component: DxcActionIcon,
9
+ };
10
+
11
+ const iconSVG = (
12
+ <svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor">
13
+ <path d="M0 0h24v24H0z" fill="none" />
14
+ <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
15
+ </svg>
16
+ );
17
+
18
+ export const Chromatic = () => (
19
+ <>
20
+ <Title title="Default" theme="light" level={2} />
21
+ <ExampleContainer>
22
+ <DxcActionIcon icon="favorite" title="Favourite" />
23
+ </ExampleContainer>
24
+ <Title title="Disabled" theme="light" level={2} />
25
+ <ExampleContainer>
26
+ <DxcActionIcon icon="favorite" title="Favourite" disabled />
27
+ </ExampleContainer>
28
+ <Title title="Hover" theme="light" level={2} />
29
+ <ExampleContainer pseudoState="pseudo-hover">
30
+ <DxcActionIcon icon="filled_favorite" title="Favourite" />
31
+ </ExampleContainer>
32
+ <Title title="Focus" theme="light" level={2} />
33
+ <ExampleContainer pseudoState="pseudo-focus">
34
+ <DxcActionIcon icon={iconSVG} title="Favourite" />
35
+ </ExampleContainer>
36
+ <Title title="Active" theme="light" level={2} />
37
+ <ExampleContainer pseudoState="pseudo-active">
38
+ <DxcActionIcon icon={iconSVG} title="Favourite" />
39
+ </ExampleContainer>
40
+ </>
41
+ );
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _react = _interopRequireDefault(require("react"));
5
+ var _react2 = require("@testing-library/react");
6
+ var _ActionIcon = _interopRequireDefault(require("./ActionIcon"));
7
+ var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
8
+ width: "24px",
9
+ height: "24px",
10
+ viewBox: "0 0 24 24",
11
+ fill: "currentColor"
12
+ }, /*#__PURE__*/_react["default"].createElement("path", {
13
+ d: "M0 0h24v24H0z",
14
+ fill: "none"
15
+ }), /*#__PURE__*/_react["default"].createElement("path", {
16
+ d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
17
+ }));
18
+ describe("Action icon component tests", function () {
19
+ test("Action icon renders with correct text", function () {
20
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
21
+ icon: iconSVG,
22
+ title: "favourite"
23
+ })),
24
+ getByTitle = _render.getByTitle;
25
+ expect(getByTitle("favourite")).toBeTruthy();
26
+ });
27
+ test("Calls correct function on click", function () {
28
+ var onClick = jest.fn();
29
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
30
+ icon: iconSVG,
31
+ title: "favourite",
32
+ onClick: onClick
33
+ })),
34
+ getByTitle = _render2.getByTitle;
35
+ var action = getByTitle("favourite");
36
+ _react2.fireEvent.click(action);
37
+ expect(onClick).toHaveBeenCalled();
38
+ });
39
+ test("On click is not called when disabled", function () {
40
+ var onClick = jest.fn();
41
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
42
+ disabled: true,
43
+ icon: iconSVG,
44
+ title: "favourite",
45
+ onClick: onClick
46
+ })),
47
+ getByTitle = _render3.getByTitle;
48
+ var action = getByTitle("favourite");
49
+ _react2.fireEvent.click(action);
50
+ expect(onClick).toHaveBeenCalledTimes(0);
51
+ });
52
+ test("Renders with correct accessibility attributes", function () {
53
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
54
+ icon: iconSVG,
55
+ title: "favourite",
56
+ tabIndex: 1
57
+ })),
58
+ getByRole = _render4.getByRole;
59
+ var button = getByRole("button");
60
+ expect(button.getAttribute("aria-label")).toBe("favourite");
61
+ expect(button.getAttribute("title")).toBe("favourite");
62
+ expect(button.getAttribute("tabindex")).toBe("1");
63
+ });
64
+ });
@@ -0,0 +1,26 @@
1
+ /// <reference types="react" />
2
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
3
+ type Props = {
4
+ /**
5
+ * If true, the component will be disabled.
6
+ */
7
+ disabled?: boolean;
8
+ /**
9
+ * Value for the HTML properties title and aria-label.
10
+ */
11
+ title: string;
12
+ /**
13
+ * Material Symbol name or SVG element as the icon that will be placed next to the label.
14
+ */
15
+ icon: string | SVG;
16
+ /**
17
+ * This function will be called when the user clicks the button.
18
+ */
19
+ onClick?: () => void;
20
+ /**
21
+ * Value of the tabindex attribute.
22
+ */
23
+ tabIndex?: number;
24
+ };
25
+ export type RefType = HTMLButtonElement;
26
+ export default Props;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,95 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _react2 = require("@testing-library/react");
8
+ var _axeHelper = require("../../test/accessibility/axe-helper.js");
9
+ var _Alert = _interopRequireDefault(require("./Alert"));
10
+ describe("Alert component accessibility tests", function () {
11
+ it("Should not have basic accessibility issues for confirm mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
12
+ var _render, container, results;
13
+ return _regenerator["default"].wrap(function _callee$(_context) {
14
+ while (1) switch (_context.prev = _context.next) {
15
+ case 0:
16
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {
17
+ type: "confirm",
18
+ inlineText: "info-alert-text",
19
+ margin: "small"
20
+ })), container = _render.container;
21
+ _context.next = 3;
22
+ return (0, _axeHelper.axe)(container);
23
+ case 3:
24
+ results = _context.sent;
25
+ expect(results).toHaveNoViolations();
26
+ case 5:
27
+ case "end":
28
+ return _context.stop();
29
+ }
30
+ }, _callee);
31
+ })));
32
+ it("Should not have basic accessibility issues for error mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
33
+ var _render2, container, results;
34
+ return _regenerator["default"].wrap(function _callee2$(_context2) {
35
+ while (1) switch (_context2.prev = _context2.next) {
36
+ case 0:
37
+ _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {
38
+ type: "error",
39
+ inlineText: "info-alert-text",
40
+ margin: "small"
41
+ })), container = _render2.container;
42
+ _context2.next = 3;
43
+ return (0, _axeHelper.axe)(container);
44
+ case 3:
45
+ results = _context2.sent;
46
+ expect(results).toHaveNoViolations();
47
+ case 5:
48
+ case "end":
49
+ return _context2.stop();
50
+ }
51
+ }, _callee2);
52
+ })));
53
+ it("Should not have basic accessibility issues for info mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
54
+ var _render3, container, results;
55
+ return _regenerator["default"].wrap(function _callee3$(_context3) {
56
+ while (1) switch (_context3.prev = _context3.next) {
57
+ case 0:
58
+ _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {
59
+ type: "info",
60
+ inlineText: "info-alert-text",
61
+ margin: "small"
62
+ })), container = _render3.container;
63
+ _context3.next = 3;
64
+ return (0, _axeHelper.axe)(container);
65
+ case 3:
66
+ results = _context3.sent;
67
+ expect(results).toHaveNoViolations();
68
+ case 5:
69
+ case "end":
70
+ return _context3.stop();
71
+ }
72
+ }, _callee3);
73
+ })));
74
+ it("Should not have basic accessibility issues for warning mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
75
+ var _render4, container, results;
76
+ return _regenerator["default"].wrap(function _callee4$(_context4) {
77
+ while (1) switch (_context4.prev = _context4.next) {
78
+ case 0:
79
+ _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Alert["default"], {
80
+ type: "warning",
81
+ inlineText: "info-alert-text",
82
+ margin: "small"
83
+ })), container = _render4.container;
84
+ _context4.next = 3;
85
+ return (0, _axeHelper.axe)(container);
86
+ case 3:
87
+ results = _context4.sent;
88
+ expect(results).toHaveNoViolations();
89
+ case 5:
90
+ case "end":
91
+ return _context4.stop();
92
+ }
93
+ }, _callee4);
94
+ })));
95
+ });