@dxc-technology/halstack-react 0.0.0-9d82cb9 → 0.0.0-9e25510

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 (553) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1286 -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 -149
  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/bar-chart/BarChart.d.ts +4 -0
  50. package/bar-chart/BarChart.js +157 -0
  51. package/bar-chart/BarChart.stories.tsx +281 -0
  52. package/bar-chart/BarChart.test.d.ts +1 -0
  53. package/bar-chart/BarChart.test.js +194 -0
  54. package/bar-chart/theme.d.ts +3 -0
  55. package/bar-chart/theme.js +31 -0
  56. package/bar-chart/types.d.ts +137 -0
  57. package/bleed/Bleed.d.ts +2 -2
  58. package/bleed/Bleed.js +14 -55
  59. package/bleed/Bleed.stories.tsx +95 -96
  60. package/bleed/types.d.ts +26 -2
  61. package/box/Box.accessibility.test.d.ts +1 -0
  62. package/box/Box.accessibility.test.js +33 -0
  63. package/box/Box.d.ts +1 -1
  64. package/box/Box.js +30 -81
  65. package/box/Box.stories.tsx +38 -51
  66. package/box/Box.test.d.ts +1 -0
  67. package/box/Box.test.js +13 -0
  68. package/box/types.d.ts +3 -14
  69. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  70. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  71. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  72. package/breadcrumbs/Breadcrumbs.js +79 -0
  73. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  74. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  75. package/breadcrumbs/Breadcrumbs.test.js +168 -0
  76. package/breadcrumbs/Item.d.ts +4 -0
  77. package/breadcrumbs/Item.js +52 -0
  78. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  79. package/breadcrumbs/dropdownTheme.js +62 -0
  80. package/breadcrumbs/types.d.ts +40 -0
  81. package/breadcrumbs/types.js +5 -0
  82. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  83. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  84. package/bulleted-list/BulletedList.d.ts +7 -0
  85. package/bulleted-list/BulletedList.js +92 -0
  86. package/bulleted-list/BulletedList.stories.tsx +115 -0
  87. package/bulleted-list/types.d.ts +38 -0
  88. package/bulleted-list/types.js +5 -0
  89. package/button/Button.accessibility.test.d.ts +1 -0
  90. package/button/Button.accessibility.test.js +127 -0
  91. package/button/Button.d.ts +1 -1
  92. package/button/Button.js +63 -113
  93. package/button/Button.stories.tsx +151 -100
  94. package/button/Button.test.d.ts +1 -0
  95. package/button/Button.test.js +38 -0
  96. package/button/types.d.ts +12 -8
  97. package/card/Card.accessibility.test.d.ts +1 -0
  98. package/card/Card.accessibility.test.js +36 -0
  99. package/card/Card.d.ts +1 -1
  100. package/card/Card.js +59 -102
  101. package/card/Card.stories.tsx +13 -43
  102. package/card/Card.test.d.ts +1 -0
  103. package/card/Card.test.js +39 -0
  104. package/card/types.d.ts +6 -11
  105. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  106. package/checkbox/Checkbox.accessibility.test.js +87 -0
  107. package/checkbox/Checkbox.d.ts +2 -2
  108. package/checkbox/Checkbox.js +140 -181
  109. package/checkbox/Checkbox.stories.tsx +166 -136
  110. package/checkbox/Checkbox.test.d.ts +1 -0
  111. package/checkbox/Checkbox.test.js +199 -0
  112. package/checkbox/types.d.ts +18 -6
  113. package/chip/Chip.accessibility.test.d.ts +1 -0
  114. package/chip/Chip.accessibility.test.js +67 -0
  115. package/chip/Chip.d.ts +1 -1
  116. package/chip/Chip.js +49 -122
  117. package/chip/Chip.stories.tsx +105 -31
  118. package/chip/Chip.test.d.ts +1 -0
  119. package/chip/Chip.test.js +41 -0
  120. package/chip/types.d.ts +8 -16
  121. package/common/coreTokens.d.ts +236 -0
  122. package/common/coreTokens.js +183 -0
  123. package/common/utils.d.ts +1 -0
  124. package/common/utils.js +6 -12
  125. package/common/variables.d.ts +1438 -0
  126. package/common/variables.js +1119 -1427
  127. package/container/Container.d.ts +4 -0
  128. package/container/Container.js +194 -0
  129. package/container/Container.stories.tsx +214 -0
  130. package/container/types.d.ts +176 -0
  131. package/container/types.js +5 -0
  132. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  133. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  134. package/contextual-menu/ContextualMenu.d.ts +5 -0
  135. package/contextual-menu/ContextualMenu.js +136 -0
  136. package/contextual-menu/ContextualMenu.stories.tsx +231 -0
  137. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  138. package/contextual-menu/ContextualMenu.test.js +247 -0
  139. package/contextual-menu/GroupItem.d.ts +4 -0
  140. package/contextual-menu/GroupItem.js +67 -0
  141. package/contextual-menu/ItemAction.d.ts +4 -0
  142. package/contextual-menu/ItemAction.js +88 -0
  143. package/contextual-menu/MenuItem.d.ts +4 -0
  144. package/contextual-menu/MenuItem.js +29 -0
  145. package/contextual-menu/SingleItem.d.ts +4 -0
  146. package/contextual-menu/SingleItem.js +38 -0
  147. package/contextual-menu/types.d.ts +65 -0
  148. package/contextual-menu/types.js +5 -0
  149. package/date-input/Calendar.d.ts +4 -0
  150. package/date-input/Calendar.js +230 -0
  151. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  152. package/date-input/DateInput.accessibility.test.js +229 -0
  153. package/date-input/DateInput.js +263 -310
  154. package/date-input/DateInput.stories.tsx +215 -57
  155. package/date-input/DateInput.test.d.ts +1 -0
  156. package/date-input/DateInput.test.js +808 -0
  157. package/date-input/DatePicker.d.ts +4 -0
  158. package/date-input/DatePicker.js +121 -0
  159. package/date-input/YearPicker.d.ts +4 -0
  160. package/date-input/YearPicker.js +105 -0
  161. package/date-input/types.d.ts +86 -22
  162. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  163. package/dialog/Dialog.accessibility.test.js +69 -0
  164. package/dialog/Dialog.d.ts +1 -1
  165. package/dialog/Dialog.js +56 -129
  166. package/dialog/Dialog.stories.tsx +324 -167
  167. package/dialog/Dialog.test.d.ts +1 -0
  168. package/dialog/Dialog.test.js +370 -0
  169. package/dialog/types.d.ts +18 -25
  170. package/divider/Divider.accessibility.test.d.ts +1 -0
  171. package/divider/Divider.accessibility.test.js +33 -0
  172. package/divider/Divider.d.ts +4 -0
  173. package/divider/Divider.js +36 -0
  174. package/divider/Divider.stories.tsx +224 -0
  175. package/divider/Divider.test.d.ts +1 -0
  176. package/divider/Divider.test.js +38 -0
  177. package/divider/types.d.ts +21 -0
  178. package/divider/types.js +5 -0
  179. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  180. package/dropdown/Dropdown.accessibility.test.js +183 -0
  181. package/dropdown/Dropdown.d.ts +1 -1
  182. package/dropdown/Dropdown.js +213 -329
  183. package/dropdown/Dropdown.stories.tsx +245 -65
  184. package/dropdown/Dropdown.test.d.ts +1 -0
  185. package/dropdown/Dropdown.test.js +628 -0
  186. package/dropdown/DropdownMenu.d.ts +4 -0
  187. package/dropdown/DropdownMenu.js +63 -0
  188. package/dropdown/DropdownMenuItem.d.ts +4 -0
  189. package/dropdown/DropdownMenuItem.js +71 -0
  190. package/dropdown/types.d.ts +37 -30
  191. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  192. package/file-input/FileInput.accessibility.test.js +167 -0
  193. package/file-input/FileInput.d.ts +2 -2
  194. package/file-input/FileInput.js +243 -395
  195. package/file-input/FileInput.stories.tsx +123 -12
  196. package/file-input/FileInput.test.d.ts +1 -0
  197. package/file-input/FileInput.test.js +404 -0
  198. package/file-input/FileItem.d.ts +4 -14
  199. package/file-input/FileItem.js +61 -120
  200. package/file-input/types.d.ts +24 -11
  201. package/flex/Flex.d.ts +4 -0
  202. package/flex/Flex.js +57 -0
  203. package/flex/Flex.stories.tsx +112 -0
  204. package/flex/types.d.ts +97 -0
  205. package/flex/types.js +5 -0
  206. package/footer/Footer.accessibility.test.d.ts +1 -0
  207. package/footer/Footer.accessibility.test.js +125 -0
  208. package/footer/Footer.d.ts +1 -1
  209. package/footer/Footer.js +73 -193
  210. package/footer/Footer.stories.tsx +99 -21
  211. package/footer/Footer.test.d.ts +1 -0
  212. package/footer/Footer.test.js +85 -0
  213. package/footer/Icons.d.ts +3 -2
  214. package/footer/Icons.js +54 -23
  215. package/footer/types.d.ts +26 -27
  216. package/grid/Grid.d.ts +7 -0
  217. package/grid/Grid.js +76 -0
  218. package/grid/Grid.stories.tsx +221 -0
  219. package/grid/types.d.ts +115 -0
  220. package/grid/types.js +5 -0
  221. package/header/Header.accessibility.test.d.ts +1 -0
  222. package/header/Header.accessibility.test.js +94 -0
  223. package/header/Header.d.ts +4 -3
  224. package/header/Header.js +104 -218
  225. package/header/Header.stories.tsx +169 -64
  226. package/header/Header.test.d.ts +1 -0
  227. package/header/Header.test.js +66 -0
  228. package/header/Icons.d.ts +2 -2
  229. package/header/Icons.js +5 -15
  230. package/header/types.d.ts +7 -21
  231. package/heading/Heading.accessibility.test.d.ts +1 -0
  232. package/heading/Heading.accessibility.test.js +33 -0
  233. package/heading/Heading.js +10 -32
  234. package/heading/Heading.test.d.ts +1 -0
  235. package/heading/Heading.test.js +156 -0
  236. package/heading/types.d.ts +7 -7
  237. package/icon/Icon.accessibility.test.d.ts +1 -0
  238. package/icon/Icon.accessibility.test.js +30 -0
  239. package/icon/Icon.d.ts +4 -0
  240. package/icon/Icon.js +33 -0
  241. package/icon/Icon.stories.tsx +28 -0
  242. package/icon/types.d.ts +4 -0
  243. package/icon/types.js +5 -0
  244. package/image/Image.accessibility.test.d.ts +1 -0
  245. package/image/Image.accessibility.test.js +56 -0
  246. package/image/Image.d.ts +4 -0
  247. package/image/Image.js +70 -0
  248. package/image/Image.stories.tsx +129 -0
  249. package/image/types.d.ts +72 -0
  250. package/image/types.js +5 -0
  251. package/inset/Inset.js +14 -55
  252. package/inset/Inset.stories.tsx +37 -36
  253. package/inset/types.d.ts +26 -2
  254. package/layout/ApplicationLayout.d.ts +16 -6
  255. package/layout/ApplicationLayout.js +88 -176
  256. package/layout/ApplicationLayout.stories.tsx +85 -94
  257. package/layout/Icons.d.ts +7 -0
  258. package/layout/Icons.js +41 -48
  259. package/layout/types.d.ts +19 -35
  260. package/link/Link.accessibility.test.d.ts +1 -0
  261. package/link/Link.accessibility.test.js +108 -0
  262. package/link/Link.d.ts +3 -2
  263. package/link/Link.js +64 -108
  264. package/link/Link.stories.tsx +161 -54
  265. package/link/Link.test.d.ts +1 -0
  266. package/link/Link.test.js +63 -0
  267. package/link/types.d.ts +15 -35
  268. package/main.d.ts +21 -18
  269. package/main.js +96 -120
  270. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  271. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  272. package/nav-tabs/NavTabs.d.ts +7 -0
  273. package/nav-tabs/NavTabs.js +108 -0
  274. package/nav-tabs/NavTabs.stories.tsx +294 -0
  275. package/nav-tabs/NavTabs.test.d.ts +1 -0
  276. package/nav-tabs/NavTabs.test.js +77 -0
  277. package/nav-tabs/NavTabsContext.d.ts +3 -0
  278. package/nav-tabs/NavTabsContext.js +8 -0
  279. package/nav-tabs/Tab.d.ts +4 -0
  280. package/nav-tabs/Tab.js +117 -0
  281. package/nav-tabs/types.d.ts +52 -0
  282. package/nav-tabs/types.js +5 -0
  283. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  284. package/number-input/NumberInput.accessibility.test.js +227 -0
  285. package/number-input/NumberInput.js +51 -45
  286. package/number-input/NumberInput.stories.tsx +39 -28
  287. package/number-input/NumberInput.test.d.ts +1 -0
  288. package/number-input/NumberInput.test.js +988 -0
  289. package/number-input/NumberInputContext.d.ts +3 -4
  290. package/number-input/NumberInputContext.js +3 -14
  291. package/number-input/types.d.ts +34 -15
  292. package/package.json +60 -55
  293. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  294. package/paginator/Paginator.accessibility.test.js +78 -0
  295. package/paginator/Paginator.js +46 -100
  296. package/paginator/Paginator.stories.tsx +24 -0
  297. package/paginator/Paginator.test.d.ts +1 -0
  298. package/paginator/Paginator.test.js +334 -0
  299. package/paginator/types.d.ts +3 -3
  300. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  301. package/paragraph/Paragraph.accessibility.test.js +28 -0
  302. package/paragraph/Paragraph.d.ts +5 -0
  303. package/paragraph/Paragraph.js +22 -0
  304. package/paragraph/Paragraph.stories.tsx +27 -0
  305. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  306. package/password-input/PasswordInput.accessibility.test.js +152 -0
  307. package/password-input/PasswordInput.js +62 -125
  308. package/password-input/PasswordInput.stories.tsx +11 -34
  309. package/password-input/PasswordInput.test.d.ts +1 -0
  310. package/password-input/PasswordInput.test.js +197 -0
  311. package/password-input/types.d.ts +21 -17
  312. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  313. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  314. package/progress-bar/ProgressBar.js +68 -92
  315. package/progress-bar/ProgressBar.stories.tsx +93 -0
  316. package/progress-bar/ProgressBar.test.d.ts +1 -0
  317. package/progress-bar/ProgressBar.test.js +93 -0
  318. package/progress-bar/types.d.ts +3 -3
  319. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  320. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  321. package/quick-nav/QuickNav.d.ts +4 -0
  322. package/quick-nav/QuickNav.js +94 -0
  323. package/quick-nav/QuickNav.stories.tsx +356 -0
  324. package/quick-nav/types.d.ts +21 -0
  325. package/quick-nav/types.js +5 -0
  326. package/radio-group/Radio.d.ts +1 -1
  327. package/radio-group/Radio.js +66 -75
  328. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  329. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  330. package/radio-group/RadioGroup.js +110 -145
  331. package/radio-group/RadioGroup.stories.tsx +171 -36
  332. package/radio-group/RadioGroup.test.d.ts +1 -0
  333. package/radio-group/RadioGroup.test.js +754 -0
  334. package/radio-group/types.d.ts +88 -10
  335. package/resultset-table/Icons.d.ts +7 -0
  336. package/resultset-table/Icons.js +47 -0
  337. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  338. package/resultset-table/ResultsetTable.accessibility.test.js +284 -0
  339. package/resultset-table/ResultsetTable.d.ts +7 -0
  340. package/resultset-table/ResultsetTable.js +198 -0
  341. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +169 -31
  342. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  343. package/resultset-table/ResultsetTable.test.js +450 -0
  344. package/{resultsetTable → resultset-table}/types.d.ts +47 -13
  345. package/resultset-table/types.js +5 -0
  346. package/select/Listbox.d.ts +4 -0
  347. package/select/Listbox.js +147 -0
  348. package/select/Option.d.ts +4 -0
  349. package/select/Option.js +93 -0
  350. package/select/Select.accessibility.test.d.ts +1 -0
  351. package/select/Select.accessibility.test.js +227 -0
  352. package/select/Select.js +213 -593
  353. package/select/Select.stories.tsx +611 -255
  354. package/select/Select.test.d.ts +1 -0
  355. package/select/Select.test.js +2168 -0
  356. package/select/selectUtils.d.ts +41 -0
  357. package/select/selectUtils.js +129 -0
  358. package/select/types.d.ts +65 -26
  359. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  360. package/sidenav/Sidenav.accessibility.test.js +59 -0
  361. package/sidenav/Sidenav.d.ts +6 -5
  362. package/sidenav/Sidenav.js +136 -71
  363. package/sidenav/Sidenav.stories.tsx +246 -151
  364. package/sidenav/Sidenav.test.d.ts +1 -0
  365. package/sidenav/Sidenav.test.js +37 -0
  366. package/sidenav/SidenavContext.d.ts +5 -0
  367. package/sidenav/SidenavContext.js +13 -0
  368. package/sidenav/types.d.ts +52 -26
  369. package/slider/Slider.accessibility.test.d.ts +1 -0
  370. package/slider/Slider.accessibility.test.js +103 -0
  371. package/slider/Slider.d.ts +2 -2
  372. package/slider/Slider.js +147 -181
  373. package/slider/Slider.stories.tsx +68 -65
  374. package/slider/Slider.test.d.ts +1 -0
  375. package/slider/Slider.test.js +256 -0
  376. package/slider/types.d.ts +11 -3
  377. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  378. package/spinner/Spinner.accessibility.test.js +96 -0
  379. package/spinner/Spinner.d.ts +1 -1
  380. package/spinner/Spinner.js +50 -109
  381. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  382. package/spinner/Spinner.test.d.ts +1 -0
  383. package/spinner/Spinner.test.js +55 -0
  384. package/spinner/types.d.ts +3 -3
  385. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  386. package/status-light/StatusLight.accessibility.test.js +157 -0
  387. package/status-light/StatusLight.d.ts +4 -0
  388. package/status-light/StatusLight.js +51 -0
  389. package/status-light/StatusLight.stories.tsx +74 -0
  390. package/status-light/StatusLight.test.d.ts +1 -0
  391. package/status-light/StatusLight.test.js +25 -0
  392. package/status-light/types.d.ts +17 -0
  393. package/status-light/types.js +5 -0
  394. package/switch/Switch.accessibility.test.d.ts +1 -0
  395. package/switch/Switch.accessibility.test.js +98 -0
  396. package/switch/Switch.d.ts +2 -2
  397. package/switch/Switch.js +146 -114
  398. package/switch/Switch.stories.tsx +56 -67
  399. package/switch/Switch.test.d.ts +1 -0
  400. package/switch/Switch.test.js +180 -0
  401. package/switch/types.d.ts +13 -5
  402. package/table/DropdownTheme.js +62 -0
  403. package/table/Table.accessibility.test.d.ts +1 -0
  404. package/table/Table.accessibility.test.js +92 -0
  405. package/table/Table.d.ts +6 -2
  406. package/table/Table.js +78 -35
  407. package/table/Table.stories.tsx +663 -0
  408. package/table/Table.test.d.ts +1 -0
  409. package/table/Table.test.js +111 -0
  410. package/table/types.d.ts +34 -6
  411. package/tabs/Tab.d.ts +4 -0
  412. package/tabs/Tab.js +117 -0
  413. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  414. package/tabs/Tabs.accessibility.test.js +56 -0
  415. package/tabs/Tabs.d.ts +1 -1
  416. package/tabs/Tabs.js +306 -146
  417. package/tabs/Tabs.stories.tsx +127 -19
  418. package/tabs/Tabs.test.d.ts +1 -0
  419. package/tabs/Tabs.test.js +276 -0
  420. package/tabs/types.d.ts +46 -24
  421. package/tag/Tag.accessibility.test.d.ts +1 -0
  422. package/tag/Tag.accessibility.test.js +69 -0
  423. package/tag/Tag.d.ts +1 -1
  424. package/tag/Tag.js +43 -85
  425. package/tag/Tag.stories.tsx +37 -30
  426. package/tag/Tag.test.d.ts +1 -0
  427. package/tag/Tag.test.js +41 -0
  428. package/tag/types.d.ts +25 -16
  429. package/text-input/Suggestion.d.ts +4 -0
  430. package/text-input/Suggestion.js +67 -0
  431. package/text-input/Suggestions.d.ts +4 -0
  432. package/text-input/Suggestions.js +94 -0
  433. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  434. package/text-input/TextInput.accessibility.test.js +320 -0
  435. package/text-input/TextInput.js +323 -569
  436. package/text-input/TextInput.stories.tsx +293 -272
  437. package/text-input/TextInput.test.d.ts +1 -0
  438. package/text-input/TextInput.test.js +1755 -0
  439. package/text-input/types.d.ts +70 -24
  440. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  441. package/textarea/Textarea.accessibility.test.js +155 -0
  442. package/textarea/Textarea.js +82 -131
  443. package/textarea/Textarea.stories.tsx +174 -0
  444. package/textarea/Textarea.test.d.ts +1 -0
  445. package/textarea/Textarea.test.js +406 -0
  446. package/textarea/types.d.ts +27 -16
  447. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  448. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  449. package/toggle-group/ToggleGroup.d.ts +2 -2
  450. package/toggle-group/ToggleGroup.js +92 -107
  451. package/toggle-group/ToggleGroup.stories.tsx +57 -12
  452. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  453. package/toggle-group/ToggleGroup.test.js +137 -0
  454. package/toggle-group/types.d.ts +36 -19
  455. package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
  456. package/tooltip/Tooltip.accessibility.test.js +144 -0
  457. package/tooltip/Tooltip.d.ts +4 -0
  458. package/tooltip/Tooltip.js +50 -0
  459. package/tooltip/Tooltip.stories.tsx +111 -0
  460. package/tooltip/Tooltip.test.d.ts +1 -0
  461. package/tooltip/Tooltip.test.js +112 -0
  462. package/tooltip/types.d.ts +16 -0
  463. package/tooltip/types.js +5 -0
  464. package/typography/Typography.accessibility.test.d.ts +1 -0
  465. package/typography/Typography.accessibility.test.js +339 -0
  466. package/typography/Typography.d.ts +4 -0
  467. package/typography/Typography.js +23 -0
  468. package/typography/Typography.stories.tsx +196 -0
  469. package/typography/Typography.test.js +23 -0
  470. package/typography/types.d.ts +18 -0
  471. package/typography/types.js +5 -0
  472. package/useTheme.d.ts +1173 -1
  473. package/useTheme.js +4 -11
  474. package/useTranslatedLabels.d.ts +96 -0
  475. package/useTranslatedLabels.js +14 -0
  476. package/utils/BaseTypography.d.ts +21 -0
  477. package/utils/BaseTypography.js +98 -0
  478. package/utils/FocusLock.d.ts +13 -0
  479. package/utils/FocusLock.js +125 -0
  480. package/utils/useWidth.d.ts +2 -0
  481. package/utils/useWidth.js +30 -0
  482. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  483. package/wizard/Wizard.accessibility.test.js +55 -0
  484. package/wizard/Wizard.d.ts +1 -1
  485. package/wizard/Wizard.js +78 -120
  486. package/wizard/Wizard.stories.tsx +68 -20
  487. package/wizard/Wizard.test.d.ts +1 -0
  488. package/wizard/Wizard.test.js +114 -0
  489. package/wizard/types.d.ts +14 -10
  490. package/ThemeContext.d.ts +0 -15
  491. package/ThemeContext.js +0 -243
  492. package/V3Select/V3Select.js +0 -455
  493. package/V3Select/index.d.ts +0 -27
  494. package/V3Textarea/V3Textarea.js +0 -260
  495. package/V3Textarea/index.d.ts +0 -27
  496. package/card/ice-cream.jpg +0 -0
  497. package/common/OpenSans.css +0 -81
  498. package/common/RequiredComponent.js +0 -32
  499. package/common/fonts/OpenSans-Bold.ttf +0 -0
  500. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  501. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  502. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  503. package/common/fonts/OpenSans-Italic.ttf +0 -0
  504. package/common/fonts/OpenSans-Light.ttf +0 -0
  505. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  506. package/common/fonts/OpenSans-Regular.ttf +0 -0
  507. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  508. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  509. package/date/Date.js +0 -373
  510. package/date/index.d.ts +0 -27
  511. package/input-text/Icons.js +0 -22
  512. package/input-text/InputText.js +0 -611
  513. package/input-text/index.d.ts +0 -36
  514. package/list/List.d.ts +0 -8
  515. package/list/List.js +0 -47
  516. package/list/List.stories.tsx +0 -95
  517. package/number-input/numberInputContextTypes.d.ts +0 -19
  518. package/paginator/Icons.js +0 -66
  519. package/progress-bar/ProgressBar.stories.jsx +0 -58
  520. package/radio/Radio.d.ts +0 -4
  521. package/radio/Radio.js +0 -174
  522. package/radio/Radio.stories.tsx +0 -192
  523. package/radio/types.d.ts +0 -54
  524. package/resultsetTable/ResultsetTable.d.ts +0 -4
  525. package/resultsetTable/ResultsetTable.js +0 -251
  526. package/row/Row.d.ts +0 -11
  527. package/row/Row.js +0 -127
  528. package/row/Row.stories.tsx +0 -239
  529. package/stack/Stack.d.ts +0 -10
  530. package/stack/Stack.js +0 -97
  531. package/stack/Stack.stories.tsx +0 -166
  532. package/table/Table.stories.jsx +0 -277
  533. package/text/Text.d.ts +0 -7
  534. package/text/Text.js +0 -30
  535. package/text/Text.stories.tsx +0 -19
  536. package/textarea/Textarea.stories.jsx +0 -136
  537. package/toggle/Toggle.js +0 -186
  538. package/toggle/index.d.ts +0 -21
  539. package/upload/Upload.js +0 -201
  540. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  541. package/upload/buttons-upload/Icons.js +0 -40
  542. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  543. package/upload/dragAndDropArea/Icons.js +0 -39
  544. package/upload/file-upload/FileToUpload.js +0 -115
  545. package/upload/file-upload/Icons.js +0 -66
  546. package/upload/files-upload/FilesToUpload.js +0 -109
  547. package/upload/index.d.ts +0 -15
  548. package/upload/transaction/Icons.js +0 -160
  549. package/upload/transaction/Transaction.js +0 -104
  550. package/upload/transactions/Transactions.js +0 -94
  551. /package/{radio → action-icon}/types.js +0 -0
  552. /package/{resultsetTable → badge}/types.js +0 -0
  553. /package/{number-input/numberInputContextTypes.js → bar-chart/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
+ });