@dxc-technology/halstack-react 0.0.0-e33af28 → 0.0.0-e360842

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 (504) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1243 -0
  4. package/HalstackContext.js +310 -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 +101 -159
  10. package/accordion/Accordion.stories.tsx +83 -149
  11. package/accordion/Accordion.test.d.ts +1 -0
  12. package/accordion/Accordion.test.js +24 -40
  13. package/accordion/types.d.ts +6 -17
  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 +2 -2
  17. package/accordion-group/AccordionGroup.js +31 -98
  18. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  19. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  20. package/accordion-group/AccordionGroup.test.js +49 -106
  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 +12 -17
  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 +28 -45
  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 +1 -1
  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 +52 -2
  49. package/bleed/Bleed.js +14 -55
  50. package/bleed/Bleed.stories.tsx +95 -95
  51. package/bleed/types.d.ts +2 -2
  52. package/box/Box.accessibility.test.d.ts +1 -0
  53. package/box/Box.accessibility.test.js +33 -0
  54. package/box/Box.d.ts +1 -1
  55. package/box/Box.js +30 -81
  56. package/box/Box.stories.tsx +38 -51
  57. package/box/Box.test.d.ts +1 -0
  58. package/box/Box.test.js +1 -6
  59. package/box/types.d.ts +3 -14
  60. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  61. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  62. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  63. package/breadcrumbs/Breadcrumbs.js +79 -0
  64. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  65. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  66. package/breadcrumbs/Breadcrumbs.test.js +169 -0
  67. package/breadcrumbs/Item.d.ts +4 -0
  68. package/breadcrumbs/Item.js +52 -0
  69. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  70. package/breadcrumbs/dropdownTheme.js +62 -0
  71. package/breadcrumbs/types.d.ts +16 -0
  72. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  73. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  74. package/bulleted-list/BulletedList.d.ts +7 -0
  75. package/bulleted-list/BulletedList.js +92 -0
  76. package/bulleted-list/BulletedList.stories.tsx +115 -0
  77. package/bulleted-list/types.d.ts +38 -0
  78. package/button/Button.accessibility.test.d.ts +1 -0
  79. package/button/Button.accessibility.test.js +127 -0
  80. package/button/Button.d.ts +1 -1
  81. package/button/Button.js +63 -113
  82. package/button/Button.stories.tsx +151 -100
  83. package/button/Button.test.d.ts +1 -0
  84. package/button/Button.test.js +19 -16
  85. package/button/types.d.ts +12 -8
  86. package/card/Card.accessibility.test.d.ts +1 -0
  87. package/card/Card.accessibility.test.js +36 -0
  88. package/card/Card.d.ts +1 -1
  89. package/card/Card.js +59 -102
  90. package/card/Card.stories.tsx +12 -42
  91. package/card/Card.test.d.ts +1 -0
  92. package/card/Card.test.js +10 -21
  93. package/card/types.d.ts +6 -11
  94. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  95. package/checkbox/Checkbox.accessibility.test.js +87 -0
  96. package/checkbox/Checkbox.d.ts +2 -2
  97. package/checkbox/Checkbox.js +137 -172
  98. package/checkbox/Checkbox.stories.tsx +166 -136
  99. package/checkbox/Checkbox.test.d.ts +1 -0
  100. package/checkbox/Checkbox.test.js +159 -38
  101. package/checkbox/types.d.ts +14 -6
  102. package/chip/Chip.accessibility.test.d.ts +1 -0
  103. package/chip/Chip.accessibility.test.js +69 -0
  104. package/chip/Chip.js +43 -89
  105. package/chip/Chip.stories.tsx +140 -28
  106. package/chip/Chip.test.d.ts +1 -0
  107. package/chip/Chip.test.js +17 -32
  108. package/chip/types.d.ts +38 -15
  109. package/common/coreTokens.d.ts +237 -0
  110. package/common/coreTokens.js +184 -0
  111. package/common/utils.d.ts +1 -0
  112. package/common/utils.js +6 -12
  113. package/common/variables.d.ts +1389 -0
  114. package/common/variables.js +1073 -1184
  115. package/container/Container.d.ts +4 -0
  116. package/container/Container.js +194 -0
  117. package/container/Container.stories.tsx +214 -0
  118. package/container/types.d.ts +74 -0
  119. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  120. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  121. package/contextual-menu/ContextualMenu.d.ts +5 -0
  122. package/contextual-menu/ContextualMenu.js +88 -0
  123. package/contextual-menu/ContextualMenu.stories.tsx +232 -0
  124. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  125. package/contextual-menu/ContextualMenu.test.js +205 -0
  126. package/contextual-menu/GroupItem.d.ts +4 -0
  127. package/contextual-menu/GroupItem.js +67 -0
  128. package/contextual-menu/ItemAction.d.ts +4 -0
  129. package/contextual-menu/ItemAction.js +51 -0
  130. package/contextual-menu/MenuItem.d.ts +4 -0
  131. package/contextual-menu/MenuItem.js +29 -0
  132. package/contextual-menu/SingleItem.d.ts +4 -0
  133. package/contextual-menu/SingleItem.js +38 -0
  134. package/contextual-menu/types.d.ts +58 -0
  135. package/date-input/Calendar.d.ts +4 -0
  136. package/date-input/Calendar.js +214 -0
  137. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  138. package/date-input/DateInput.accessibility.test.js +230 -0
  139. package/date-input/DateInput.js +152 -299
  140. package/date-input/DateInput.stories.tsx +210 -56
  141. package/date-input/DateInput.test.d.ts +1 -0
  142. package/date-input/DateInput.test.js +700 -370
  143. package/date-input/DatePicker.d.ts +4 -0
  144. package/date-input/DatePicker.js +121 -0
  145. package/date-input/YearPicker.d.ts +4 -0
  146. package/date-input/YearPicker.js +100 -0
  147. package/date-input/types.d.ts +72 -15
  148. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  149. package/dialog/Dialog.accessibility.test.js +69 -0
  150. package/dialog/Dialog.d.ts +1 -1
  151. package/dialog/Dialog.js +61 -106
  152. package/dialog/Dialog.stories.tsx +325 -167
  153. package/dialog/Dialog.test.d.ts +1 -0
  154. package/dialog/Dialog.test.js +350 -19
  155. package/dialog/types.d.ts +18 -25
  156. package/divider/Divider.accessibility.test.d.ts +1 -0
  157. package/divider/Divider.accessibility.test.js +33 -0
  158. package/divider/Divider.d.ts +4 -0
  159. package/divider/Divider.js +36 -0
  160. package/divider/Divider.stories.tsx +223 -0
  161. package/divider/Divider.test.d.ts +1 -0
  162. package/divider/Divider.test.js +38 -0
  163. package/divider/types.d.ts +21 -0
  164. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  165. package/dropdown/Dropdown.accessibility.test.js +184 -0
  166. package/dropdown/Dropdown.d.ts +1 -1
  167. package/dropdown/Dropdown.js +232 -307
  168. package/dropdown/Dropdown.stories.tsx +235 -57
  169. package/dropdown/Dropdown.test.d.ts +1 -0
  170. package/dropdown/Dropdown.test.js +604 -164
  171. package/dropdown/DropdownMenu.d.ts +4 -0
  172. package/dropdown/DropdownMenu.js +63 -0
  173. package/dropdown/DropdownMenuItem.d.ts +4 -0
  174. package/dropdown/DropdownMenuItem.js +71 -0
  175. package/dropdown/types.d.ts +35 -19
  176. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  177. package/file-input/FileInput.accessibility.test.js +167 -0
  178. package/file-input/FileInput.d.ts +2 -2
  179. package/file-input/FileInput.js +245 -395
  180. package/file-input/FileInput.stories.tsx +123 -12
  181. package/file-input/FileInput.test.d.ts +1 -0
  182. package/file-input/FileInput.test.js +314 -367
  183. package/file-input/FileItem.d.ts +4 -14
  184. package/file-input/FileItem.js +61 -120
  185. package/file-input/types.d.ts +25 -8
  186. package/flex/Flex.d.ts +4 -0
  187. package/flex/Flex.js +57 -0
  188. package/flex/Flex.stories.tsx +112 -0
  189. package/flex/types.d.ts +97 -0
  190. package/flex/types.js +5 -0
  191. package/footer/Footer.accessibility.test.d.ts +1 -0
  192. package/footer/Footer.accessibility.test.js +125 -0
  193. package/footer/Footer.d.ts +1 -1
  194. package/footer/Footer.js +75 -118
  195. package/footer/Footer.stories.tsx +99 -21
  196. package/footer/Footer.test.d.ts +1 -0
  197. package/footer/Footer.test.js +32 -56
  198. package/footer/Icons.d.ts +3 -2
  199. package/footer/Icons.js +54 -23
  200. package/footer/types.d.ts +26 -27
  201. package/grid/Grid.d.ts +7 -0
  202. package/grid/Grid.js +76 -0
  203. package/grid/Grid.stories.tsx +219 -0
  204. package/grid/types.d.ts +115 -0
  205. package/grid/types.js +5 -0
  206. package/header/Header.accessibility.test.d.ts +1 -0
  207. package/header/Header.accessibility.test.js +94 -0
  208. package/header/Header.d.ts +4 -3
  209. package/header/Header.js +95 -185
  210. package/header/Header.stories.tsx +133 -38
  211. package/header/Header.test.d.ts +1 -0
  212. package/header/Header.test.js +12 -25
  213. package/header/Icons.d.ts +2 -2
  214. package/header/Icons.js +5 -15
  215. package/header/types.d.ts +7 -21
  216. package/heading/Heading.accessibility.test.d.ts +1 -0
  217. package/heading/Heading.accessibility.test.js +33 -0
  218. package/heading/Heading.js +10 -32
  219. package/heading/Heading.test.d.ts +1 -0
  220. package/heading/Heading.test.js +64 -94
  221. package/heading/types.d.ts +7 -7
  222. package/icon/Icon.accessibility.test.d.ts +1 -0
  223. package/icon/Icon.accessibility.test.js +30 -0
  224. package/icon/Icon.d.ts +4 -0
  225. package/icon/Icon.js +33 -0
  226. package/icon/Icon.stories.tsx +28 -0
  227. package/icon/types.d.ts +4 -0
  228. package/icon/types.js +5 -0
  229. package/image/Image.accessibility.test.d.ts +1 -0
  230. package/image/Image.accessibility.test.js +56 -0
  231. package/image/Image.d.ts +4 -0
  232. package/image/Image.js +70 -0
  233. package/image/Image.stories.tsx +129 -0
  234. package/image/types.d.ts +72 -0
  235. package/image/types.js +5 -0
  236. package/inset/Inset.js +14 -55
  237. package/inset/Inset.stories.tsx +37 -36
  238. package/inset/types.d.ts +2 -2
  239. package/layout/ApplicationLayout.d.ts +16 -6
  240. package/layout/ApplicationLayout.js +86 -167
  241. package/layout/ApplicationLayout.stories.tsx +85 -94
  242. package/layout/Icons.d.ts +7 -0
  243. package/layout/Icons.js +41 -48
  244. package/layout/types.d.ts +19 -35
  245. package/link/Link.accessibility.test.d.ts +1 -0
  246. package/link/Link.accessibility.test.js +108 -0
  247. package/link/Link.d.ts +3 -2
  248. package/link/Link.js +65 -101
  249. package/link/Link.stories.tsx +157 -55
  250. package/link/Link.test.d.ts +1 -0
  251. package/link/Link.test.js +24 -52
  252. package/link/types.d.ts +15 -31
  253. package/main.d.ts +16 -13
  254. package/main.js +83 -106
  255. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  256. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  257. package/nav-tabs/NavTabs.d.ts +7 -0
  258. package/nav-tabs/NavTabs.js +108 -0
  259. package/nav-tabs/NavTabs.stories.tsx +294 -0
  260. package/nav-tabs/NavTabs.test.d.ts +1 -0
  261. package/nav-tabs/NavTabs.test.js +77 -0
  262. package/nav-tabs/NavTabsContext.d.ts +3 -0
  263. package/nav-tabs/NavTabsContext.js +8 -0
  264. package/nav-tabs/Tab.d.ts +4 -0
  265. package/nav-tabs/Tab.js +117 -0
  266. package/nav-tabs/types.d.ts +52 -0
  267. package/nav-tabs/types.js +5 -0
  268. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  269. package/number-input/NumberInput.accessibility.test.js +228 -0
  270. package/number-input/NumberInput.js +46 -36
  271. package/number-input/NumberInput.stories.tsx +42 -26
  272. package/number-input/NumberInput.test.d.ts +1 -0
  273. package/number-input/NumberInput.test.js +859 -376
  274. package/number-input/NumberInputContext.d.ts +3 -4
  275. package/number-input/NumberInputContext.js +3 -14
  276. package/number-input/types.d.ts +18 -6
  277. package/package.json +52 -54
  278. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  279. package/paginator/Paginator.accessibility.test.js +79 -0
  280. package/paginator/Paginator.js +46 -100
  281. package/paginator/Paginator.stories.tsx +24 -0
  282. package/paginator/Paginator.test.d.ts +1 -0
  283. package/paginator/Paginator.test.js +279 -210
  284. package/paginator/types.d.ts +3 -3
  285. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  286. package/paragraph/Paragraph.accessibility.test.js +28 -0
  287. package/paragraph/Paragraph.d.ts +5 -0
  288. package/paragraph/Paragraph.js +22 -0
  289. package/paragraph/Paragraph.stories.tsx +27 -0
  290. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  291. package/password-input/PasswordInput.accessibility.test.js +153 -0
  292. package/password-input/PasswordInput.js +58 -124
  293. package/password-input/PasswordInput.stories.tsx +1 -33
  294. package/password-input/PasswordInput.test.d.ts +1 -0
  295. package/password-input/PasswordInput.test.js +159 -142
  296. package/password-input/types.d.ts +9 -8
  297. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  298. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  299. package/progress-bar/ProgressBar.js +68 -92
  300. package/progress-bar/ProgressBar.stories.tsx +93 -0
  301. package/progress-bar/ProgressBar.test.d.ts +1 -0
  302. package/progress-bar/ProgressBar.test.js +71 -43
  303. package/progress-bar/types.d.ts +3 -3
  304. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  305. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  306. package/quick-nav/QuickNav.js +71 -43
  307. package/quick-nav/QuickNav.stories.tsx +146 -27
  308. package/quick-nav/types.d.ts +10 -10
  309. package/radio-group/Radio.d.ts +1 -1
  310. package/radio-group/Radio.js +59 -79
  311. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  312. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  313. package/radio-group/RadioGroup.js +74 -121
  314. package/radio-group/RadioGroup.stories.tsx +132 -18
  315. package/radio-group/RadioGroup.test.d.ts +1 -0
  316. package/radio-group/RadioGroup.test.js +518 -459
  317. package/radio-group/types.d.ts +10 -10
  318. package/resultset-table/Icons.d.ts +7 -0
  319. package/resultset-table/Icons.js +47 -0
  320. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  321. package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
  322. package/resultset-table/ResultsetTable.d.ts +7 -0
  323. package/resultset-table/ResultsetTable.js +171 -0
  324. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +168 -30
  325. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  326. package/resultset-table/ResultsetTable.test.js +380 -0
  327. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  328. package/resultset-table/types.js +5 -0
  329. package/select/Listbox.d.ts +4 -0
  330. package/select/Listbox.js +151 -0
  331. package/select/Option.js +35 -56
  332. package/select/Select.accessibility.test.d.ts +1 -0
  333. package/select/Select.accessibility.test.js +228 -0
  334. package/select/Select.js +210 -342
  335. package/select/Select.stories.tsx +524 -187
  336. package/select/Select.test.d.ts +1 -0
  337. package/select/Select.test.js +1955 -1744
  338. package/select/types.d.ts +33 -18
  339. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  340. package/sidenav/Sidenav.accessibility.test.js +59 -0
  341. package/sidenav/Sidenav.d.ts +6 -5
  342. package/sidenav/Sidenav.js +136 -71
  343. package/sidenav/Sidenav.stories.tsx +246 -151
  344. package/sidenav/Sidenav.test.d.ts +1 -0
  345. package/sidenav/Sidenav.test.js +25 -44
  346. package/sidenav/SidenavContext.d.ts +5 -0
  347. package/sidenav/SidenavContext.js +13 -0
  348. package/sidenav/types.d.ts +52 -26
  349. package/slider/Slider.accessibility.test.d.ts +1 -0
  350. package/slider/Slider.accessibility.test.js +104 -0
  351. package/slider/Slider.d.ts +2 -2
  352. package/slider/Slider.js +146 -181
  353. package/slider/Slider.stories.tsx +64 -61
  354. package/slider/Slider.test.d.ts +1 -0
  355. package/slider/Slider.test.js +195 -88
  356. package/slider/types.d.ts +7 -3
  357. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  358. package/spinner/Spinner.accessibility.test.js +96 -0
  359. package/spinner/Spinner.js +34 -74
  360. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  361. package/spinner/Spinner.test.d.ts +1 -0
  362. package/spinner/Spinner.test.js +25 -34
  363. package/spinner/types.d.ts +3 -3
  364. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  365. package/status-light/StatusLight.accessibility.test.js +157 -0
  366. package/status-light/StatusLight.d.ts +4 -0
  367. package/status-light/StatusLight.js +51 -0
  368. package/status-light/StatusLight.stories.tsx +74 -0
  369. package/status-light/StatusLight.test.d.ts +1 -0
  370. package/status-light/StatusLight.test.js +25 -0
  371. package/status-light/types.d.ts +17 -0
  372. package/status-light/types.js +5 -0
  373. package/switch/Switch.accessibility.test.d.ts +1 -0
  374. package/switch/Switch.accessibility.test.js +98 -0
  375. package/switch/Switch.d.ts +2 -2
  376. package/switch/Switch.js +143 -124
  377. package/switch/Switch.stories.tsx +53 -64
  378. package/switch/Switch.test.d.ts +1 -0
  379. package/switch/Switch.test.js +137 -55
  380. package/switch/types.d.ts +9 -5
  381. package/table/DropdownTheme.js +62 -0
  382. package/table/Table.accessibility.test.d.ts +1 -0
  383. package/table/Table.accessibility.test.js +93 -0
  384. package/table/Table.d.ts +6 -2
  385. package/table/Table.js +78 -35
  386. package/table/Table.stories.tsx +663 -0
  387. package/table/Table.test.d.ts +1 -0
  388. package/table/Table.test.js +93 -7
  389. package/table/types.d.ts +34 -6
  390. package/tabs/Tab.d.ts +4 -0
  391. package/tabs/Tab.js +117 -0
  392. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  393. package/tabs/Tabs.accessibility.test.js +56 -0
  394. package/tabs/Tabs.js +303 -141
  395. package/tabs/Tabs.stories.tsx +124 -12
  396. package/tabs/Tabs.test.d.ts +1 -0
  397. package/tabs/Tabs.test.js +212 -76
  398. package/tabs/types.d.ts +30 -20
  399. package/tag/Tag.accessibility.test.d.ts +1 -0
  400. package/tag/Tag.accessibility.test.js +69 -0
  401. package/tag/Tag.js +38 -73
  402. package/tag/Tag.stories.tsx +18 -8
  403. package/tag/Tag.test.d.ts +1 -0
  404. package/tag/Tag.test.js +17 -36
  405. package/tag/types.d.ts +9 -9
  406. package/text-input/Suggestion.d.ts +4 -0
  407. package/text-input/Suggestion.js +67 -0
  408. package/text-input/Suggestions.d.ts +4 -0
  409. package/text-input/Suggestions.js +94 -0
  410. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  411. package/text-input/TextInput.accessibility.test.js +321 -0
  412. package/text-input/TextInput.js +326 -553
  413. package/text-input/TextInput.stories.tsx +276 -276
  414. package/text-input/TextInput.test.d.ts +1 -0
  415. package/text-input/TextInput.test.js +1419 -1375
  416. package/text-input/types.d.ts +53 -14
  417. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  418. package/textarea/Textarea.accessibility.test.js +155 -0
  419. package/textarea/Textarea.js +79 -133
  420. package/textarea/Textarea.stories.tsx +174 -0
  421. package/textarea/Textarea.test.d.ts +1 -0
  422. package/textarea/Textarea.test.js +151 -182
  423. package/textarea/types.d.ts +10 -6
  424. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  425. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  426. package/toggle-group/ToggleGroup.d.ts +2 -2
  427. package/toggle-group/ToggleGroup.js +92 -108
  428. package/toggle-group/ToggleGroup.stories.tsx +52 -7
  429. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  430. package/toggle-group/ToggleGroup.test.js +68 -87
  431. package/toggle-group/types.d.ts +28 -19
  432. package/typography/Typography.accessibility.test.d.ts +1 -0
  433. package/typography/Typography.accessibility.test.js +339 -0
  434. package/typography/Typography.d.ts +4 -0
  435. package/typography/Typography.js +23 -0
  436. package/typography/Typography.stories.tsx +198 -0
  437. package/typography/types.d.ts +18 -0
  438. package/typography/types.js +5 -0
  439. package/useTheme.d.ts +1141 -1
  440. package/useTheme.js +4 -11
  441. package/useTranslatedLabels.d.ts +85 -0
  442. package/useTranslatedLabels.js +14 -0
  443. package/utils/BaseTypography.d.ts +21 -0
  444. package/utils/BaseTypography.js +94 -0
  445. package/utils/FocusLock.d.ts +13 -0
  446. package/utils/FocusLock.js +124 -0
  447. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  448. package/wizard/Wizard.accessibility.test.js +55 -0
  449. package/wizard/Wizard.js +66 -113
  450. package/wizard/Wizard.stories.tsx +59 -1
  451. package/wizard/Wizard.test.d.ts +1 -0
  452. package/wizard/Wizard.test.js +53 -80
  453. package/wizard/types.d.ts +9 -9
  454. package/ThemeContext.d.ts +0 -10
  455. package/ThemeContext.js +0 -243
  456. package/card/ice-cream.jpg +0 -0
  457. package/common/OpenSans.css +0 -81
  458. package/common/RequiredComponent.js +0 -32
  459. package/common/fonts/OpenSans-Bold.ttf +0 -0
  460. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  461. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  462. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  463. package/common/fonts/OpenSans-Italic.ttf +0 -0
  464. package/common/fonts/OpenSans-Light.ttf +0 -0
  465. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  466. package/common/fonts/OpenSans-Regular.ttf +0 -0
  467. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  468. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  469. package/list/List.d.ts +0 -4
  470. package/list/List.js +0 -47
  471. package/list/List.stories.tsx +0 -95
  472. package/list/types.d.ts +0 -7
  473. package/number-input/numberInputContextTypes.d.ts +0 -19
  474. package/paginator/Icons.js +0 -66
  475. package/progress-bar/ProgressBar.stories.jsx +0 -58
  476. package/radio/Radio.d.ts +0 -4
  477. package/radio/Radio.js +0 -174
  478. package/radio/Radio.stories.tsx +0 -192
  479. package/radio/Radio.test.js +0 -71
  480. package/radio/types.d.ts +0 -54
  481. package/resultsetTable/ResultsetTable.d.ts +0 -4
  482. package/resultsetTable/ResultsetTable.js +0 -254
  483. package/resultsetTable/ResultsetTable.test.js +0 -306
  484. package/row/Row.d.ts +0 -3
  485. package/row/Row.js +0 -127
  486. package/row/Row.stories.tsx +0 -237
  487. package/row/types.d.ts +0 -28
  488. package/select/Icons.d.ts +0 -10
  489. package/select/Icons.js +0 -93
  490. package/stack/Stack.d.ts +0 -3
  491. package/stack/Stack.js +0 -97
  492. package/stack/Stack.stories.tsx +0 -164
  493. package/stack/types.d.ts +0 -24
  494. package/table/Table.stories.jsx +0 -277
  495. package/text/Text.d.ts +0 -7
  496. package/text/Text.js +0 -30
  497. package/text/Text.stories.tsx +0 -19
  498. package/textarea/Textarea.stories.jsx +0 -157
  499. /package/{list → action-icon}/types.js +0 -0
  500. /package/{radio → breadcrumbs}/types.js +0 -0
  501. /package/{resultsetTable → bulleted-list}/types.js +0 -0
  502. /package/{row → container}/types.js +0 -0
  503. /package/{stack → contextual-menu}/types.js +0 -0
  504. /package/{number-input/numberInputContextTypes.js → divider/types.js} +0 -0
@@ -1,69 +1,53 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _react = _interopRequireDefault(require("react"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
-
9
6
  var _Accordion = _interopRequireDefault(require("./Accordion"));
10
-
11
7
  describe("Accordion component tests", function () {
12
- test("Accordion renders with correct text", function () {
13
- var onChange = jest.fn();
14
-
8
+ test("Renders with correct aria accessibility attributes", function () {
15
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
16
- label: "Accordion",
17
- assistiveText: "Assistive text",
18
- onChange: onChange
19
- })),
20
- getByText = _render.getByText;
21
-
22
- expect(getByText("Accordion")).toBeTruthy();
23
- expect(getByText("Assistive text")).toBeTruthy();
10
+ label: "Accordion",
11
+ defaultIsExpanded: true
12
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
13
+ getByRole = _render.getByRole;
14
+ var accordion = getByRole("button");
15
+ var panel = getByRole("region");
16
+ expect(accordion.getAttribute("aria-controls")).toBe(panel.id);
17
+ expect(panel.getAttribute("aria-labelledby")).toBe(accordion.id);
24
18
  });
25
- test("Accordion renders expanded by default when it is uncontrolled", function () {
19
+ test("Renders expanded by default when it is uncontrolled", function () {
26
20
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
27
- label: "Accordion",
28
- defaultIsExpanded: true
29
- }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
30
- getByRole = _render2.getByRole;
31
-
21
+ label: "Accordion",
22
+ defaultIsExpanded: true
23
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
24
+ getByRole = _render2.getByRole;
32
25
  var accordion = getByRole("button");
33
26
  expect(accordion.getAttribute("aria-expanded")).toBe("true");
34
27
  });
35
28
  test("Calls correct function on click", function () {
36
29
  var onChange = jest.fn();
37
-
38
30
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
39
- label: "Accordion",
40
- onChange: onChange
41
- })),
42
- getByText = _render3.getByText;
43
-
31
+ label: "Accordion",
32
+ onChange: onChange
33
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
34
+ getByText = _render3.getByText;
44
35
  _react2.fireEvent.click(getByText("Accordion"));
45
-
46
36
  expect(onChange).toHaveBeenCalled();
47
37
  });
48
38
  test("Controlled accordion", function () {
49
39
  var onChange = jest.fn();
50
-
51
40
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
52
- label: "Accordion",
53
- onChange: onChange,
54
- isExpanded: true
55
- })),
56
- getByText = _render4.getByText,
57
- getByRole = _render4.getByRole;
58
-
41
+ label: "Accordion",
42
+ onChange: onChange,
43
+ isExpanded: true
44
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))),
45
+ getByText = _render4.getByText,
46
+ getByRole = _render4.getByRole;
59
47
  expect(getByRole("button").getAttribute("aria-expanded")).toBe("true");
60
-
61
48
  _react2.fireEvent.click(getByText("Accordion"));
62
-
63
49
  _react2.fireEvent.click(getByText("Accordion"));
64
-
65
50
  _react2.fireEvent.click(getByText("Accordion"));
66
-
67
51
  expect(onChange).toHaveBeenCalledTimes(3);
68
52
  expect(onChange.mock.calls[0][0]).toBe(false);
69
53
  expect(onChange.mock.calls[1][0]).toBe(false);
@@ -1,19 +1,13 @@
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>;
16
- declare type Props = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ type Props = {
17
11
  /**
18
12
  * The panel label.
19
13
  */
@@ -29,7 +23,7 @@ declare type Props = {
29
23
  */
30
24
  isExpanded?: boolean;
31
25
  /**
32
- * Element or path used as the icon that will be placed next to panel label.
26
+ * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
33
27
  */
34
28
  icon?: string | SVG;
35
29
  /**
@@ -56,12 +50,7 @@ declare type Props = {
56
50
  */
57
51
  margin?: Space | Margin;
58
52
  /**
59
- * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
60
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
61
- */
62
- padding?: Space | Padding;
63
- /**
64
- * Value of the tabindex.
53
+ * Value of the tabindex attribute.
65
54
  */
66
55
  tabIndex?: number;
67
56
  };
@@ -0,0 +1,82 @@
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 _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
9
+ var _axeHelper = require("../../test/accessibility/axe-helper.js");
10
+ var folderIcon = /*#__PURE__*/_react["default"].createElement("svg", {
11
+ xmlns: "http://www.w3.org/2000/svg",
12
+ enableBackground: "new 0 0 24 24",
13
+ height: "24px",
14
+ viewBox: "0 0 24 24",
15
+ width: "24px",
16
+ fill: "currentColor"
17
+ }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
18
+ fill: "none",
19
+ height: "24",
20
+ width: "24"
21
+ })), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
22
+ d: "M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M16,16h2v-2h-2v-2 h2v-2h-2V8h4v10h-4V16z M16,16h-2v2H4V6h5.17l2,2H14v2h2v2h-2v2h2V16z"
23
+ })));
24
+ describe("Accordion component accessibility tests", function () {
25
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
26
+ var _render, container, results;
27
+ return _regenerator["default"].wrap(function _callee$(_context) {
28
+ while (1) switch (_context.prev = _context.next) {
29
+ case 0:
30
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
31
+ defaultIndexActive: 1,
32
+ margin: "small"
33
+ }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
34
+ label: "Accordion1",
35
+ assistiveText: "Assistive Text1",
36
+ icon: folderIcon
37
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
38
+ label: "Accordion2",
39
+ assistiveText: "Assistive Text2",
40
+ icon: folderIcon
41
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))), container = _render.container;
42
+ _context.next = 3;
43
+ return (0, _axeHelper.axe)(container);
44
+ case 3:
45
+ results = _context.sent;
46
+ expect(results).toHaveNoViolations();
47
+ case 5:
48
+ case "end":
49
+ return _context.stop();
50
+ }
51
+ }, _callee);
52
+ })));
53
+ it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
54
+ var _render2, container, results;
55
+ return _regenerator["default"].wrap(function _callee2$(_context2) {
56
+ while (1) switch (_context2.prev = _context2.next) {
57
+ case 0:
58
+ _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
59
+ defaultIndexActive: 1,
60
+ margin: "small",
61
+ disabled: true
62
+ }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
63
+ label: "Accordion1",
64
+ assistiveText: "Assistive Text1",
65
+ icon: folderIcon
66
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
67
+ label: "Accordion2",
68
+ assistiveText: "Assistive Text2",
69
+ icon: folderIcon
70
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))), container = _render2.container;
71
+ _context2.next = 3;
72
+ return (0, _axeHelper.axe)(container);
73
+ case 3:
74
+ results = _context2.sent;
75
+ expect(results).toHaveNoViolations();
76
+ case 5:
77
+ case "end":
78
+ return _context2.stop();
79
+ }
80
+ }, _callee2);
81
+ })));
82
+ });
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- import AccordionGroupPropsType, { AccordionPropsType } from "./types";
2
+ import AccordionGroupPropsType from "./types";
3
3
  declare const DxcAccordionGroup: {
4
4
  ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: AccordionGroupPropsType): JSX.Element;
5
- Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
5
+ Accordion: ({ ...childProps }: import("./types").AccordionPropsType) => JSX.Element;
6
6
  };
7
7
  export default DxcAccordionGroup;
@@ -1,81 +1,40 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
-
18
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
21
-
22
13
  var _react = _interopRequireWildcard(require("react"));
23
-
24
14
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
-
26
- var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
27
-
28
- var _utils = require("../common/utils.js");
29
-
30
- var _variables = require("../common/variables.js");
31
-
15
+ var _utils = require("../common/utils");
16
+ var _variables = require("../common/variables");
32
17
  var _useTheme = _interopRequireDefault(require("../useTheme"));
33
-
18
+ var _AccordionGroupAccordion = _interopRequireDefault(require("./AccordionGroupAccordion"));
19
+ var _AccordionGroupContext = require("./AccordionGroupContext");
34
20
  var _templateObject;
35
-
36
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
-
38
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
-
40
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
41
-
42
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
43
-
44
- var AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
45
-
46
- var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
47
- var childProps = (0, _extends2["default"])({}, _ref);
48
-
49
- var _useContext = (0, _react.useContext)(AccordionGroupAccordionContext),
50
- activeIndex = _useContext.activeIndex,
51
- handlerActiveChange = _useContext.handlerActiveChange,
52
- disabled = _useContext.disabled,
53
- index = _useContext.index;
54
-
55
- return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({
56
- isExpanded: activeIndex === index,
57
- onChange: function onChange() {
58
- handlerActiveChange(index);
59
- },
60
- disabled: disabled
61
- }, childProps), childProps.children);
62
- };
63
-
64
- var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
65
- var defaultIndexActive = _ref2.defaultIndexActive,
66
- indexActive = _ref2.indexActive,
67
- _ref2$disabled = _ref2.disabled,
68
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
69
- onActiveChange = _ref2.onActiveChange,
70
- margin = _ref2.margin,
71
- children = _ref2.children;
21
+ 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); }
22
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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; }
23
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
24
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
25
+ var DxcAccordionGroup = function DxcAccordionGroup(_ref) {
26
+ var defaultIndexActive = _ref.defaultIndexActive,
27
+ indexActive = _ref.indexActive,
28
+ _ref$disabled = _ref.disabled,
29
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
30
+ onActiveChange = _ref.onActiveChange,
31
+ margin = _ref.margin,
32
+ children = _ref.children;
72
33
  var colorsTheme = (0, _useTheme["default"])();
73
-
74
34
  var _useState = (0, _react.useState)(defaultIndexActive !== null && defaultIndexActive !== void 0 ? defaultIndexActive : -1),
75
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
76
- innerIndexActive = _useState2[0],
77
- setInnerIndexActive = _useState2[1];
78
-
35
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
36
+ innerIndexActive = _useState2[0],
37
+ setInnerIndexActive = _useState2[1];
79
38
  var handlerActiveChange = (0, _react.useCallback)(function (index) {
80
39
  indexActive !== null && indexActive !== void 0 ? indexActive : setInnerIndexActive(function (prev) {
81
40
  return index === prev ? -1 : index;
@@ -94,39 +53,35 @@ var DxcAccordionGroup = function DxcAccordionGroup(_ref2) {
94
53
  }, /*#__PURE__*/_react["default"].createElement(AccordionGroupContainer, {
95
54
  margin: margin,
96
55
  disabled: disabled
97
- }, (Array.isArray(children) ? children : [children]).filter(function (child) {
98
- return child.type === AccordionGroupAccordion;
99
- }).map(function (accordion, index) {
100
- return /*#__PURE__*/_react["default"].createElement(AccordionGroupAccordionContext.Provider, {
56
+ }, _react.Children.map(children, function (accordion, index) {
57
+ return /*#__PURE__*/_react["default"].createElement(_AccordionGroupContext.AccordionGroupAccordionContext.Provider, {
58
+ key: "accordion-".concat(index),
101
59
  value: _objectSpread({
102
60
  index: index
103
61
  }, contextValue)
104
62
  }, accordion);
105
63
  })));
106
64
  };
107
-
108
- DxcAccordionGroup.Accordion = AccordionGroupAccordion;
109
-
65
+ DxcAccordionGroup.Accordion = _AccordionGroupAccordion["default"];
110
66
  var calculateWidth = function calculateWidth(margin) {
111
67
  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
112
68
  };
113
-
114
- var AccordionGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n width: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n cursor: ", ";\n\n & > :not(div:last-child) {\n & > div:first-child {\n border-radius: 0;\n border-bottom: ", ";\n border-color: ", ";\n\n & > .Mui-expanded {\n border-radius: 0;\n }\n & > .MuiButtonBase-root {\n border-radius: 0;\n }\n }\n }\n\n & > div:first-child {\n & > div:first-child {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom: ", ";\n border-color: ", ";\n\n & > .Mui-expanded {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n & > .MuiButtonBase-root {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n }\n }\n\n & > div:last-child {\n & > div:first-child {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n & > .Mui-expanded {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n & > .MuiButtonBase-root {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n }\n }\n"])), function (props) {
69
+ var AccordionGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n\n > div:not(:last-of-type):not(:only-of-type) {\n border-bottom: ", ";\n border-color: ", ";\n }\n > div:not(:first-of-type):not(:last-of-type):not(:only-of-type) {\n border-radius: 0;\n & > h3 > button {\n border-radius: 0;\n }\n }\n > div:first-of-type:not(:only-of-type) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n\n & > h3 > button {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n > div:last-of-type:not(:only-of-type) {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n\n & > h3 > button {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n }\n"])), function (props) {
115
70
  return calculateWidth(props.margin);
71
+ }, function (_ref2) {
72
+ var margin = _ref2.margin;
73
+ return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
116
74
  }, function (_ref3) {
117
75
  var margin = _ref3.margin;
118
- return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
76
+ return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
119
77
  }, function (_ref4) {
120
78
  var margin = _ref4.margin;
121
- return margin && (0, _typeof2["default"])(margin) === "object" && margin.top ? _variables.spaces[margin.top] : "";
79
+ return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
122
80
  }, function (_ref5) {
123
81
  var margin = _ref5.margin;
124
- return margin && (0, _typeof2["default"])(margin) === "object" && margin.right ? _variables.spaces[margin.right] : "";
82
+ return margin && (0, _typeof2["default"])(margin) === "object" && margin.bottom ? _variables.spaces[margin.bottom] : "";
125
83
  }, function (_ref6) {
126
84
  var margin = _ref6.margin;
127
- return margin && (0, _typeof2["default"])(margin) === "object" && margin.bottom ? _variables.spaces[margin.bottom] : "";
128
- }, function (_ref7) {
129
- var margin = _ref7.margin;
130
85
  return margin && (0, _typeof2["default"])(margin) === "object" && margin.left ? _variables.spaces[margin.left] : "";
131
86
  }, function (props) {
132
87
  return props.disabled ? "not-allowed" : "pointer";
@@ -138,31 +93,9 @@ var AccordionGroupContainer = _styledComponents["default"].div(_templateObject |
138
93
  return props.theme.borderRadius;
139
94
  }, function (props) {
140
95
  return props.theme.borderRadius;
141
- }, function (props) {
142
- return "".concat(props.theme.accordionGroupSeparatorBorderThickness, " ").concat(props.theme.accordionGroupSeparatorBorderStyle);
143
- }, function (props) {
144
- return props.theme.accordionGroupSeparatorBorderColor;
145
- }, function (props) {
146
- return props.theme.borderRadius;
147
- }, function (props) {
148
- return props.theme.borderRadius;
149
- }, function (props) {
150
- return props.theme.borderRadius;
151
- }, function (props) {
152
- return props.theme.borderRadius;
153
- }, function (props) {
154
- return props.theme.borderRadius;
155
- }, function (props) {
156
- return props.theme.borderRadius;
157
- }, function (props) {
158
- return props.theme.borderRadius;
159
- }, function (props) {
160
- return props.theme.borderRadius;
161
96
  }, function (props) {
162
97
  return props.theme.borderRadius;
163
98
  }, function (props) {
164
99
  return props.theme.borderRadius;
165
100
  });
166
-
167
- var _default = DxcAccordionGroup;
168
- exports["default"] = _default;
101
+ var _default = exports["default"] = DxcAccordionGroup;