@dxc-technology/halstack-react 0.0.0-ff5083e → 0.0.0-ff6c8bf

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 (403) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1240 -6
  4. package/HalstackContext.js +126 -111
  5. package/README.md +47 -0
  6. package/accordion/Accordion.accessibility.test.js +71 -0
  7. package/accordion/Accordion.d.ts +1 -1
  8. package/accordion/Accordion.js +105 -160
  9. package/accordion/Accordion.stories.tsx +82 -148
  10. package/accordion/Accordion.test.js +25 -41
  11. package/accordion/types.d.ts +6 -17
  12. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  13. package/accordion-group/AccordionGroup.d.ts +2 -2
  14. package/accordion-group/AccordionGroup.js +31 -98
  15. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  16. package/accordion-group/AccordionGroup.test.js +52 -105
  17. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  18. package/accordion-group/AccordionGroupAccordion.js +31 -0
  19. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  20. package/accordion-group/AccordionGroupContext.js +8 -0
  21. package/accordion-group/types.d.ts +12 -17
  22. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  23. package/action-icon/ActionIcon.d.ts +4 -0
  24. package/action-icon/ActionIcon.js +48 -0
  25. package/action-icon/ActionIcon.stories.tsx +41 -0
  26. package/action-icon/ActionIcon.test.js +64 -0
  27. package/action-icon/types.d.ts +26 -0
  28. package/alert/Alert.accessibility.test.js +95 -0
  29. package/alert/Alert.js +37 -127
  30. package/alert/Alert.stories.tsx +28 -0
  31. package/alert/Alert.test.js +29 -46
  32. package/alert/types.d.ts +5 -5
  33. package/badge/Badge.accessibility.test.js +129 -0
  34. package/badge/Badge.d.ts +1 -1
  35. package/badge/Badge.js +142 -42
  36. package/badge/Badge.stories.tsx +210 -0
  37. package/badge/Badge.test.js +30 -0
  38. package/badge/types.d.ts +52 -3
  39. package/bleed/Bleed.js +13 -21
  40. package/bleed/Bleed.stories.tsx +64 -63
  41. package/bleed/types.d.ts +2 -2
  42. package/box/Box.accessibility.test.js +33 -0
  43. package/box/Box.d.ts +1 -1
  44. package/box/Box.js +19 -60
  45. package/box/Box.stories.tsx +38 -51
  46. package/box/Box.test.js +2 -7
  47. package/box/types.d.ts +3 -14
  48. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  49. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  50. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  51. package/breadcrumbs/Breadcrumbs.js +79 -0
  52. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  53. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  54. package/breadcrumbs/Breadcrumbs.test.js +169 -0
  55. package/breadcrumbs/Item.d.ts +4 -0
  56. package/breadcrumbs/Item.js +52 -0
  57. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  58. package/breadcrumbs/dropdownTheme.js +62 -0
  59. package/breadcrumbs/types.d.ts +16 -0
  60. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  61. package/bulleted-list/BulletedList.js +35 -63
  62. package/bulleted-list/BulletedList.stories.tsx +18 -106
  63. package/bulleted-list/types.d.ts +32 -5
  64. package/button/Button.accessibility.test.js +127 -0
  65. package/button/Button.d.ts +1 -1
  66. package/button/Button.js +64 -117
  67. package/button/Button.stories.tsx +151 -100
  68. package/button/Button.test.js +20 -17
  69. package/button/types.d.ts +12 -8
  70. package/card/Card.accessibility.test.js +36 -0
  71. package/card/Card.d.ts +1 -1
  72. package/card/Card.js +49 -89
  73. package/card/Card.stories.tsx +12 -42
  74. package/card/Card.test.js +11 -22
  75. package/card/types.d.ts +6 -11
  76. package/checkbox/Checkbox.accessibility.test.js +87 -0
  77. package/checkbox/Checkbox.d.ts +2 -2
  78. package/checkbox/Checkbox.js +139 -181
  79. package/checkbox/Checkbox.stories.tsx +128 -94
  80. package/checkbox/Checkbox.test.js +160 -39
  81. package/checkbox/types.d.ts +11 -3
  82. package/chip/Chip.accessibility.test.js +67 -0
  83. package/chip/Chip.js +45 -80
  84. package/chip/Chip.stories.tsx +107 -27
  85. package/chip/Chip.test.js +18 -33
  86. package/chip/types.d.ts +4 -4
  87. package/common/coreTokens.d.ts +237 -0
  88. package/common/coreTokens.js +184 -0
  89. package/common/utils.d.ts +1 -0
  90. package/common/utils.js +6 -12
  91. package/common/variables.d.ts +1392 -0
  92. package/common/variables.js +984 -1206
  93. package/container/Container.d.ts +4 -0
  94. package/container/Container.js +194 -0
  95. package/container/Container.stories.tsx +214 -0
  96. package/container/types.d.ts +74 -0
  97. package/contextual-menu/ContextualMenu.accessibility.test.js +97 -0
  98. package/contextual-menu/ContextualMenu.d.ts +5 -0
  99. package/contextual-menu/ContextualMenu.js +88 -0
  100. package/contextual-menu/ContextualMenu.stories.tsx +232 -0
  101. package/contextual-menu/ContextualMenu.test.js +205 -0
  102. package/contextual-menu/GroupItem.d.ts +4 -0
  103. package/contextual-menu/GroupItem.js +67 -0
  104. package/contextual-menu/ItemAction.d.ts +4 -0
  105. package/contextual-menu/ItemAction.js +51 -0
  106. package/contextual-menu/MenuItem.d.ts +4 -0
  107. package/contextual-menu/MenuItem.js +29 -0
  108. package/contextual-menu/SingleItem.d.ts +4 -0
  109. package/contextual-menu/SingleItem.js +38 -0
  110. package/contextual-menu/types.d.ts +58 -0
  111. package/date-input/Calendar.d.ts +4 -0
  112. package/date-input/Calendar.js +214 -0
  113. package/date-input/DateInput.accessibility.test.js +228 -0
  114. package/date-input/DateInput.js +149 -299
  115. package/date-input/DateInput.stories.tsx +210 -56
  116. package/date-input/DateInput.test.js +700 -371
  117. package/date-input/DatePicker.d.ts +4 -0
  118. package/date-input/DatePicker.js +121 -0
  119. package/date-input/YearPicker.d.ts +4 -0
  120. package/date-input/YearPicker.js +100 -0
  121. package/date-input/types.d.ts +72 -15
  122. package/dialog/Dialog.accessibility.test.js +69 -0
  123. package/dialog/Dialog.d.ts +1 -1
  124. package/dialog/Dialog.js +61 -106
  125. package/dialog/Dialog.stories.tsx +326 -167
  126. package/dialog/Dialog.test.js +287 -20
  127. package/dialog/types.d.ts +18 -25
  128. package/divider/Divider.accessibility.test.js +33 -0
  129. package/divider/Divider.d.ts +4 -0
  130. package/divider/Divider.js +36 -0
  131. package/divider/Divider.stories.tsx +223 -0
  132. package/divider/Divider.test.js +38 -0
  133. package/divider/types.d.ts +21 -0
  134. package/dropdown/Dropdown.accessibility.test.js +180 -0
  135. package/dropdown/Dropdown.d.ts +1 -1
  136. package/dropdown/Dropdown.js +233 -303
  137. package/dropdown/Dropdown.stories.tsx +235 -57
  138. package/dropdown/Dropdown.test.js +575 -165
  139. package/dropdown/DropdownMenu.d.ts +4 -0
  140. package/dropdown/DropdownMenu.js +63 -0
  141. package/dropdown/DropdownMenuItem.d.ts +4 -0
  142. package/dropdown/DropdownMenuItem.js +71 -0
  143. package/dropdown/types.d.ts +35 -19
  144. package/file-input/FileInput.accessibility.test.js +160 -0
  145. package/file-input/FileInput.d.ts +2 -2
  146. package/file-input/FileInput.js +241 -391
  147. package/file-input/FileInput.stories.tsx +123 -12
  148. package/file-input/FileInput.test.js +306 -367
  149. package/file-input/FileItem.d.ts +4 -14
  150. package/file-input/FileItem.js +56 -117
  151. package/file-input/types.d.ts +25 -8
  152. package/flex/Flex.d.ts +4 -0
  153. package/flex/Flex.js +57 -0
  154. package/flex/Flex.stories.tsx +112 -0
  155. package/flex/types.d.ts +97 -0
  156. package/footer/Footer.accessibility.test.js +125 -0
  157. package/footer/Footer.d.ts +1 -1
  158. package/footer/Footer.js +73 -118
  159. package/footer/Footer.stories.tsx +99 -21
  160. package/footer/Footer.test.js +33 -57
  161. package/footer/Icons.d.ts +3 -2
  162. package/footer/Icons.js +54 -23
  163. package/footer/types.d.ts +26 -27
  164. package/grid/Grid.d.ts +7 -0
  165. package/grid/Grid.js +76 -0
  166. package/grid/Grid.stories.tsx +219 -0
  167. package/grid/types.d.ts +115 -0
  168. package/grid/types.js +5 -0
  169. package/header/Header.accessibility.test.js +93 -0
  170. package/header/Header.d.ts +4 -3
  171. package/header/Header.js +90 -183
  172. package/header/Header.stories.tsx +133 -38
  173. package/header/Header.test.js +13 -26
  174. package/header/Icons.d.ts +2 -2
  175. package/header/Icons.js +5 -15
  176. package/header/types.d.ts +7 -21
  177. package/heading/Heading.accessibility.test.js +33 -0
  178. package/heading/Heading.js +10 -32
  179. package/heading/Heading.test.js +71 -88
  180. package/heading/types.d.ts +7 -7
  181. package/icon/Icon.accessibility.test.js +30 -0
  182. package/icon/Icon.d.ts +4 -0
  183. package/icon/Icon.js +33 -0
  184. package/icon/Icon.stories.tsx +28 -0
  185. package/icon/types.d.ts +4 -0
  186. package/icon/types.js +5 -0
  187. package/image/Image.accessibility.test.js +56 -0
  188. package/image/Image.d.ts +4 -0
  189. package/image/Image.js +70 -0
  190. package/image/Image.stories.tsx +129 -0
  191. package/image/types.d.ts +72 -0
  192. package/image/types.js +5 -0
  193. package/inset/Inset.js +13 -21
  194. package/inset/Inset.stories.tsx +5 -4
  195. package/inset/types.d.ts +2 -2
  196. package/layout/ApplicationLayout.d.ts +15 -6
  197. package/layout/ApplicationLayout.js +57 -119
  198. package/layout/ApplicationLayout.stories.tsx +81 -45
  199. package/layout/Icons.d.ts +7 -5
  200. package/layout/Icons.js +41 -59
  201. package/layout/types.d.ts +21 -32
  202. package/link/Link.accessibility.test.js +108 -0
  203. package/link/Link.js +32 -51
  204. package/link/Link.stories.tsx +76 -9
  205. package/link/Link.test.js +24 -44
  206. package/link/types.d.ts +14 -14
  207. package/main.d.ts +14 -12
  208. package/main.js +51 -88
  209. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  210. package/nav-tabs/NavTabs.d.ts +7 -0
  211. package/{tabs-nav → nav-tabs}/NavTabs.js +30 -62
  212. package/nav-tabs/NavTabs.stories.tsx +279 -0
  213. package/nav-tabs/NavTabs.test.js +77 -0
  214. package/nav-tabs/NavTabsContext.d.ts +3 -0
  215. package/nav-tabs/NavTabsContext.js +8 -0
  216. package/nav-tabs/Tab.js +117 -0
  217. package/{tabs-nav → nav-tabs}/types.d.ts +15 -16
  218. package/nav-tabs/types.js +5 -0
  219. package/number-input/NumberInput.accessibility.test.js +228 -0
  220. package/number-input/NumberInput.js +46 -36
  221. package/number-input/NumberInput.stories.tsx +42 -26
  222. package/number-input/NumberInput.test.js +860 -377
  223. package/number-input/NumberInputContext.d.ts +3 -4
  224. package/number-input/NumberInputContext.js +3 -14
  225. package/number-input/types.d.ts +17 -5
  226. package/package.json +51 -51
  227. package/paginator/Paginator.accessibility.test.js +79 -0
  228. package/paginator/Paginator.js +35 -68
  229. package/paginator/Paginator.stories.tsx +24 -0
  230. package/paginator/Paginator.test.js +280 -211
  231. package/paginator/types.d.ts +3 -3
  232. package/paragraph/Paragraph.accessibility.test.js +28 -0
  233. package/paragraph/Paragraph.d.ts +3 -4
  234. package/paragraph/Paragraph.js +7 -23
  235. package/paragraph/Paragraph.stories.tsx +1 -18
  236. package/password-input/PasswordInput.accessibility.test.js +153 -0
  237. package/password-input/PasswordInput.js +58 -127
  238. package/password-input/PasswordInput.stories.tsx +1 -33
  239. package/password-input/PasswordInput.test.js +160 -142
  240. package/password-input/types.d.ts +8 -7
  241. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  242. package/progress-bar/ProgressBar.js +68 -92
  243. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +39 -4
  244. package/progress-bar/ProgressBar.test.js +72 -44
  245. package/progress-bar/types.d.ts +3 -3
  246. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  247. package/quick-nav/QuickNav.js +24 -42
  248. package/quick-nav/QuickNav.stories.tsx +146 -27
  249. package/quick-nav/types.d.ts +10 -10
  250. package/radio-group/Radio.d.ts +1 -1
  251. package/radio-group/Radio.js +59 -76
  252. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  253. package/radio-group/RadioGroup.js +68 -114
  254. package/radio-group/RadioGroup.stories.tsx +132 -18
  255. package/radio-group/RadioGroup.test.js +518 -457
  256. package/radio-group/types.d.ts +10 -10
  257. package/resultset-table/Icons.d.ts +7 -0
  258. package/resultset-table/Icons.js +47 -0
  259. package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
  260. package/resultset-table/ResultsetTable.d.ts +7 -0
  261. package/resultset-table/ResultsetTable.js +171 -0
  262. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +168 -30
  263. package/resultset-table/ResultsetTable.test.js +381 -0
  264. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  265. package/resultset-table/types.js +5 -0
  266. package/select/Listbox.d.ts +1 -1
  267. package/select/Listbox.js +68 -65
  268. package/select/Option.js +35 -56
  269. package/select/Select.accessibility.test.js +228 -0
  270. package/select/Select.js +171 -214
  271. package/select/Select.stories.tsx +515 -190
  272. package/select/Select.test.js +1934 -1789
  273. package/select/types.d.ts +17 -21
  274. package/sidenav/Sidenav.accessibility.test.js +59 -0
  275. package/sidenav/Sidenav.d.ts +6 -5
  276. package/sidenav/Sidenav.js +132 -78
  277. package/sidenav/Sidenav.stories.tsx +246 -151
  278. package/sidenav/Sidenav.test.js +26 -45
  279. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  280. package/{layout → sidenav}/SidenavContext.js +3 -9
  281. package/sidenav/types.d.ts +52 -26
  282. package/slider/Slider.accessibility.test.js +104 -0
  283. package/slider/Slider.d.ts +2 -2
  284. package/slider/Slider.js +149 -181
  285. package/slider/Slider.stories.tsx +64 -61
  286. package/slider/Slider.test.js +185 -81
  287. package/slider/types.d.ts +7 -3
  288. package/spinner/Spinner.accessibility.test.js +96 -0
  289. package/spinner/Spinner.js +34 -74
  290. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  291. package/spinner/Spinner.test.js +26 -35
  292. package/spinner/types.d.ts +3 -3
  293. package/status-light/StatusLight.accessibility.test.js +157 -0
  294. package/status-light/StatusLight.d.ts +4 -0
  295. package/status-light/StatusLight.js +51 -0
  296. package/status-light/StatusLight.stories.tsx +74 -0
  297. package/status-light/StatusLight.test.js +25 -0
  298. package/status-light/types.d.ts +17 -0
  299. package/status-light/types.js +5 -0
  300. package/switch/Switch.accessibility.test.js +98 -0
  301. package/switch/Switch.d.ts +2 -2
  302. package/switch/Switch.js +145 -126
  303. package/switch/Switch.stories.tsx +49 -60
  304. package/switch/Switch.test.js +138 -56
  305. package/switch/types.d.ts +7 -3
  306. package/table/DropdownTheme.js +62 -0
  307. package/table/Table.accessibility.test.js +93 -0
  308. package/table/Table.d.ts +6 -2
  309. package/table/Table.js +78 -35
  310. package/table/Table.stories.tsx +663 -0
  311. package/table/Table.test.js +95 -8
  312. package/table/types.d.ts +34 -6
  313. package/tabs/Tab.d.ts +4 -0
  314. package/tabs/Tab.js +117 -0
  315. package/tabs/Tabs.accessibility.test.js +56 -0
  316. package/tabs/Tabs.js +303 -141
  317. package/tabs/Tabs.stories.tsx +124 -6
  318. package/tabs/Tabs.test.js +213 -77
  319. package/tabs/types.d.ts +30 -20
  320. package/tag/Tag.accessibility.test.js +69 -0
  321. package/tag/Tag.js +35 -67
  322. package/tag/Tag.stories.tsx +18 -8
  323. package/tag/Tag.test.js +18 -37
  324. package/tag/types.d.ts +9 -9
  325. package/text-input/Suggestion.js +40 -28
  326. package/text-input/Suggestions.d.ts +4 -0
  327. package/text-input/Suggestions.js +94 -0
  328. package/text-input/TextInput.accessibility.test.js +321 -0
  329. package/text-input/TextInput.js +316 -515
  330. package/text-input/TextInput.stories.tsx +276 -276
  331. package/text-input/TextInput.test.js +1419 -1375
  332. package/text-input/types.d.ts +43 -16
  333. package/textarea/Textarea.accessibility.test.js +155 -0
  334. package/textarea/Textarea.js +71 -113
  335. package/textarea/Textarea.stories.tsx +174 -0
  336. package/textarea/Textarea.test.js +152 -183
  337. package/textarea/types.d.ts +9 -5
  338. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  339. package/toggle-group/ToggleGroup.d.ts +2 -2
  340. package/toggle-group/ToggleGroup.js +94 -107
  341. package/toggle-group/ToggleGroup.stories.tsx +52 -7
  342. package/toggle-group/ToggleGroup.test.js +69 -88
  343. package/toggle-group/types.d.ts +28 -19
  344. package/typography/Typography.accessibility.test.js +339 -0
  345. package/typography/Typography.d.ts +2 -2
  346. package/typography/Typography.js +16 -124
  347. package/typography/Typography.stories.tsx +185 -162
  348. package/typography/types.d.ts +1 -1
  349. package/useTheme.d.ts +1144 -1
  350. package/useTheme.js +2 -9
  351. package/useTranslatedLabels.d.ts +84 -1
  352. package/useTranslatedLabels.js +1 -7
  353. package/utils/BaseTypography.d.ts +21 -0
  354. package/utils/BaseTypography.js +94 -0
  355. package/utils/FocusLock.d.ts +13 -0
  356. package/utils/FocusLock.js +124 -0
  357. package/wizard/Wizard.accessibility.test.js +55 -0
  358. package/wizard/Wizard.js +34 -87
  359. package/wizard/Wizard.stories.tsx +59 -1
  360. package/wizard/Wizard.test.js +54 -81
  361. package/wizard/types.d.ts +9 -9
  362. package/card/ice-cream.jpg +0 -0
  363. package/common/OpenSans.css +0 -81
  364. package/common/RequiredComponent.js +0 -32
  365. package/common/fonts/OpenSans-Bold.ttf +0 -0
  366. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  367. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  368. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  369. package/common/fonts/OpenSans-Italic.ttf +0 -0
  370. package/common/fonts/OpenSans-Light.ttf +0 -0
  371. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  372. package/common/fonts/OpenSans-Regular.ttf +0 -0
  373. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  374. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  375. package/number-input/numberInputContextTypes.d.ts +0 -19
  376. package/paginator/Icons.js +0 -66
  377. package/resultsetTable/ResultsetTable.d.ts +0 -4
  378. package/resultsetTable/ResultsetTable.js +0 -254
  379. package/resultsetTable/ResultsetTable.test.js +0 -306
  380. package/row/Row.d.ts +0 -3
  381. package/row/Row.js +0 -127
  382. package/row/Row.stories.tsx +0 -237
  383. package/row/types.d.ts +0 -28
  384. package/select/Icons.d.ts +0 -10
  385. package/select/Icons.js +0 -93
  386. package/stack/Stack.d.ts +0 -3
  387. package/stack/Stack.js +0 -97
  388. package/stack/Stack.stories.tsx +0 -164
  389. package/stack/types.d.ts +0 -24
  390. package/table/Table.stories.jsx +0 -277
  391. package/tabs-nav/NavTabs.d.ts +0 -8
  392. package/tabs-nav/NavTabs.stories.tsx +0 -170
  393. package/tabs-nav/NavTabs.test.js +0 -82
  394. package/tabs-nav/Tab.js +0 -132
  395. package/textarea/Textarea.stories.jsx +0 -157
  396. package/typography/typographyContextTypes.d.ts +0 -16
  397. /package/{resultsetTable → action-icon}/types.js +0 -0
  398. /package/{row → breadcrumbs}/types.js +0 -0
  399. /package/{stack → container}/types.js +0 -0
  400. /package/{tabs-nav → contextual-menu}/types.js +0 -0
  401. /package/{number-input/numberInputContextTypes.js → divider/types.js} +0 -0
  402. /package/{typography/typographyContextTypes.js → flex/types.js} +0 -0
  403. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
package/table/Table.stories.tsx ADDED
@@ -0,0 +1,663 @@
1
+ import React from "react";
2
+ import DxcTable from "./Table";
3
+ import Title from "../../.storybook/components/Title";
4
+ import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
+ import { HalstackProvider } from "../HalstackContext";
6
+ import { userEvent, within } from "@storybook/testing-library";
7
+ import { disabledRules } from "../../test/accessibility/rules/specific/table/disabledRules";
8
+ import preview from "../../.storybook/preview";
9
+
10
+ export default {
11
+ title: "Table",
12
+ component: DxcTable,
13
+ parameters: {
14
+ a11y: {
15
+ config: {
16
+ rules: [
17
+ ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
18
+ ...preview?.parameters?.a11y?.config?.rules,
19
+ ],
20
+ },
21
+ },
22
+ },
23
+ };
24
+
25
+ const opinionatedTheme = {
26
+ table: {
27
+ baseColor: "#5f249f",
28
+ headerFontColor: "#ffffff",
29
+ cellFontColor: "#000000",
30
+ },
31
+ };
32
+
33
+ const advancedTheme = {
34
+ table: {
35
+ actionIconColor: "#1B75BB",
36
+ hoverActionIconColor: "#1B75BB",
37
+ activeActionIconColor: "#1B75BB",
38
+ focusActionIconColor: "#1B75BB",
39
+ hoverButtonBackgroundColor: "#cccccc",
40
+ },
41
+ };
42
+
43
+ const actions = [
44
+ {
45
+ title: "icon",
46
+ onClick: (value?) => {
47
+ console.log(value);
48
+ },
49
+ options: [
50
+ {
51
+ value: "1",
52
+ label: "Amazon with a very long text",
53
+ },
54
+ {
55
+ value: "2",
56
+ label: "Ebay",
57
+ },
58
+ {
59
+ value: "3",
60
+ label: "Apple",
61
+ },
62
+ ],
63
+ },
64
+ {
65
+ title: "icon",
66
+ onClick: (value?) => {
67
+ console.log(value);
68
+ },
69
+ options: [
70
+ {
71
+ value: "1",
72
+ label: "Amazon with a very long text",
73
+ },
74
+ {
75
+ value: "2",
76
+ label: "Ebay",
77
+ },
78
+ {
79
+ value: "3",
80
+ label: "Apple",
81
+ },
82
+ ],
83
+ },
84
+ {
85
+ disabled: true,
86
+ title: "icon",
87
+ onClick: (value?) => {
88
+ console.log(value);
89
+ },
90
+ options: [
91
+ {
92
+ value: "1",
93
+ label: "Amazon with a very long text",
94
+ },
95
+ {
96
+ value: "2",
97
+ label: "Ebay",
98
+ },
99
+ {
100
+ value: "3",
101
+ label: "Apple",
102
+ },
103
+ ],
104
+ },
105
+ {
106
+ icon: "filled_edit",
107
+ title: "icon",
108
+ onClick: () => {},
109
+ },
110
+ {
111
+ icon: "filled_delete",
112
+ title: "icon",
113
+ onClick: () => {},
114
+ disabled: true,
115
+ },
116
+ ];
117
+
118
+ export const Chromatic = () => (
119
+ <>
120
+ <ExampleContainer>
121
+ <Title title="Default" theme="light" level={4} />
122
+ <DxcTable>
123
+ <tr>
124
+ <th>header 1</th>
125
+ <th>header 2</th>
126
+ <th>actions</th>
127
+ </tr>
128
+ <tr>
129
+ <td>cell 1</td>
130
+ <td>cell 2</td>
131
+ <td>
132
+ <DxcTable.ActionsCell actions={actions} />
133
+ </td>
134
+ </tr>
135
+ <tr>
136
+ <td>cell 4</td>
137
+ <td>cell 5</td>
138
+ <td>
139
+ <DxcTable.ActionsCell actions={actions} />
140
+ </td>
141
+ </tr>
142
+ <tr>
143
+ <td>cell 7</td>
144
+ <td>cell 8</td>
145
+ <td>
146
+ <DxcTable.ActionsCell actions={actions} />
147
+ </td>
148
+ </tr>
149
+ </DxcTable>
150
+ </ExampleContainer>
151
+ <ExampleContainer>
152
+ <Title title="Custom actionsCell theme" theme="light" level={4} />
153
+ <HalstackProvider advancedTheme={advancedTheme}>
154
+ <DxcTable>
155
+ <tr>
156
+ <th>header 1</th>
157
+ <th>header 2</th>
158
+ <th>actions</th>
159
+ </tr>
160
+ <tr>
161
+ <td>cell 1</td>
162
+ <td>cell 2</td>
163
+ <td>
164
+ <DxcTable.ActionsCell actions={actions} />
165
+ </td>
166
+ </tr>
167
+ <tr>
168
+ <td>cell 4</td>
169
+ <td>cell 5</td>
170
+ <td>
171
+ <DxcTable.ActionsCell actions={actions} />
172
+ </td>
173
+ </tr>
174
+ <tr>
175
+ <td>cell 7</td>
176
+ <td>cell 8</td>
177
+ <td>
178
+ <DxcTable.ActionsCell actions={actions} />
179
+ </td>
180
+ </tr>
181
+ </DxcTable>
182
+ </HalstackProvider>
183
+ </ExampleContainer>
184
+ <ExampleContainer>
185
+ <Title title="With scrollbar" theme="light" level={4} />
186
+ <div
187
+ style={{ height: 200 + "px", display: "flex", flexDirection: "row", width: 100 + "%", marginBottom: 50 + "px" }}
188
+ >
189
+ <DxcTable>
190
+ <tr>
191
+ <th>
192
+ header<br></br>subheader
193
+ </th>
194
+ <th>
195
+ header<br></br>subheader
196
+ </th>
197
+ <th>
198
+ header<br></br>subheader
199
+ </th>
200
+ </tr>
201
+ <tr>
202
+ <td>
203
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
204
+ dolore magna aliqua.
205
+ </td>
206
+ <td>
207
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
208
+ consequat.
209
+ </td>
210
+ <td>
211
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
212
+ </td>
213
+ </tr>
214
+ <tr>
215
+ <td>cell data</td>
216
+ <td>cell data</td>
217
+ <td>cell data</td>
218
+ </tr>
219
+ <tr>
220
+ <td>cell data</td>
221
+ <td>cell data</td>
222
+ <td>cell data</td>
223
+ </tr>
224
+ <tr>
225
+ <td>cell data</td>
226
+ <td>cell data</td>
227
+ <td>cell data</td>
228
+ </tr>
229
+ <tr>
230
+ <td>cell data</td>
231
+ <td>cell data</td>
232
+ <td>cell data</td>
233
+ </tr>
234
+ <tr>
235
+ <td>cell data</td>
236
+ <td>cell data</td>
237
+ <td>cell data</td>
238
+ </tr>
239
+ <tr>
240
+ <td>cell data</td>
241
+ <td>cell data</td>
242
+ <td>cell data</td>
243
+ </tr>
244
+ <tr>
245
+ <td>cell data</td>
246
+ <td>cell data</td>
247
+ <td>cell data</td>
248
+ </tr>
249
+ <tr>
250
+ <td>cell data</td>
251
+ <td>cell data</td>
252
+ <td>cell data</td>
253
+ </tr>
254
+ </DxcTable>
255
+ </div>
256
+ </ExampleContainer>
257
+ <ExampleContainer>
258
+ <Title title="Default reduced" theme="light" level={4} />
259
+ <DxcTable mode="reduced">
260
+ <tr>
261
+ <th>header 1</th>
262
+ <th>header 2</th>
263
+ <th>header 3</th>
264
+ </tr>
265
+ <tr>
266
+ <td>cell 1</td>
267
+ <td>cell 2</td>
268
+ <td>cell 3</td>
269
+ </tr>
270
+ <tr>
271
+ <td>cell 4</td>
272
+ <td>cell 5</td>
273
+ <td>cell 6</td>
274
+ </tr>
275
+ <tr>
276
+ <td>cell 7</td>
277
+ <td>cell 8</td>
278
+ <td>Cell 9</td>
279
+ </tr>
280
+ </DxcTable>
281
+ </ExampleContainer>
282
+ <ExampleContainer>
283
+ <Title title="Reduced with scrollbar" theme="light" level={4} />
284
+ <div
285
+ style={{ height: 200 + "px", display: "flex", flexDirection: "row", width: 100 + "%", marginBottom: 50 + "px" }}
286
+ >
287
+ <DxcTable mode="reduced">
288
+ <tr>
289
+ <th>
290
+ header<br></br>subheader
291
+ </th>
292
+ <th>
293
+ header<br></br>subheader
294
+ </th>
295
+ <th>
296
+ header<br></br>subheader
297
+ </th>
298
+ </tr>
299
+ <tr>
300
+ <td>
301
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
302
+ dolore magna aliqua.
303
+ </td>
304
+ <td>
305
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
306
+ consequat.
307
+ </td>
308
+ <td>
309
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
310
+ </td>
311
+ </tr>
312
+ <tr>
313
+ <td>cell data</td>
314
+ <td>cell data</td>
315
+ <td>cell data</td>
316
+ </tr>
317
+ <tr>
318
+ <td>cell data</td>
319
+ <td>cell data</td>
320
+ <td>cell data</td>
321
+ </tr>
322
+ <tr>
323
+ <td>cell data</td>
324
+ <td>cell data</td>
325
+ <td>cell data</td>
326
+ </tr>
327
+ <tr>
328
+ <td>cell data</td>
329
+ <td>cell data</td>
330
+ <td>cell data</td>
331
+ </tr>
332
+ <tr>
333
+ <td>cell data</td>
334
+ <td>cell data</td>
335
+ <td>cell data</td>
336
+ </tr>
337
+ <tr>
338
+ <td>cell data</td>
339
+ <td>cell data</td>
340
+ <td>cell data</td>
341
+ </tr>
342
+ <tr>
343
+ <td>cell data</td>
344
+ <td>cell data</td>
345
+ <td>cell data</td>
346
+ </tr>
347
+ <tr>
348
+ <td>cell data</td>
349
+ <td>cell data</td>
350
+ <td>cell data</td>
351
+ </tr>
352
+ </DxcTable>
353
+ </div>
354
+ </ExampleContainer>
355
+ <ExampleContainer>
356
+ <Title title="Reduced table with actions" theme="light" level={4} />
357
+ <DxcTable mode="reduced">
358
+ <tr>
359
+ <th>header 1</th>
360
+ <th>header 2</th>
361
+ <th>header 3</th>
362
+ </tr>
363
+ <tr>
364
+ <td>cell 1</td>
365
+ <td>cell 2</td>
366
+ <td>
367
+ <DxcTable.ActionsCell actions={actions} />
368
+ </td>
369
+ </tr>
370
+ <tr>
371
+ <td>cell 4</td>
372
+ <td>cell 5</td>
373
+ <td>
374
+ <DxcTable.ActionsCell actions={actions} />
375
+ </td>
376
+ </tr>
377
+ <tr>
378
+ <td>cell 7</td>
379
+ <td>cell 8</td>
380
+ <td>
381
+ <DxcTable.ActionsCell actions={actions} />
382
+ </td>
383
+ </tr>
384
+ </DxcTable>
385
+ </ExampleContainer>
386
+ <Title title="Margins" theme="light" level={2} />
387
+ <ExampleContainer>
388
+ <Title title="Xxsmall margin" theme="light" level={4} />
389
+ <DxcTable margin="xxsmall">
390
+ <tr>
391
+ <th>header 1</th>
392
+ <th>header 2</th>
393
+ <th>header 3</th>
394
+ </tr>
395
+ <tr>
396
+ <td>cell 1</td>
397
+ <td>cell 2</td>
398
+ <td>cell 3</td>
399
+ </tr>
400
+ <tr>
401
+ <td>cell 4</td>
402
+ <td>cell 5</td>
403
+ <td>cell 6</td>
404
+ </tr>
405
+ <tr>
406
+ <td>cell 7</td>
407
+ <td>cell 8</td>
408
+ <td>Cell 9</td>
409
+ </tr>
410
+ </DxcTable>
411
+ <Title title="Xsmall margin" theme="light" level={4} />
412
+ <DxcTable margin="xsmall">
413
+ <tr>
414
+ <th>header 1</th>
415
+ <th>header 2</th>
416
+ <th>header 3</th>
417
+ </tr>
418
+ <tr>
419
+ <td>cell 1</td>
420
+ <td>cell 2</td>
421
+ <td>cell 3</td>
422
+ </tr>
423
+ <tr>
424
+ <td>cell 4</td>
425
+ <td>cell 5</td>
426
+ <td>cell 6</td>
427
+ </tr>
428
+ <tr>
429
+ <td>cell 7</td>
430
+ <td>cell 8</td>
431
+ <td>Cell 9</td>
432
+ </tr>
433
+ </DxcTable>
434
+ <Title title="Small margin" theme="light" level={4} />
435
+ <DxcTable margin="small">
436
+ <tr>
437
+ <th>header 1</th>
438
+ <th>header 2</th>
439
+ <th>header 3</th>
440
+ </tr>
441
+ <tr>
442
+ <td>cell 1</td>
443
+ <td>cell 2</td>
444
+ <td>cell 3</td>
445
+ </tr>
446
+ <tr>
447
+ <td>cell 4</td>
448
+ <td>cell 5</td>
449
+ <td>cell 6</td>
450
+ </tr>
451
+ <tr>
452
+ <td>cell 7</td>
453
+ <td>cell 8</td>
454
+ <td>Cell 9</td>
455
+ </tr>
456
+ </DxcTable>
457
+ <Title title="Medium margin" theme="light" level={4} />
458
+ <DxcTable margin="medium">
459
+ <tr>
460
+ <th>header 1</th>
461
+ <th>header 2</th>
462
+ <th>header 3</th>
463
+ </tr>
464
+ <tr>
465
+ <td>cell 1</td>
466
+ <td>cell 2</td>
467
+ <td>cell 3</td>
468
+ </tr>
469
+ <tr>
470
+ <td>cell 4</td>
471
+ <td>cell 5</td>
472
+ <td>cell 6</td>
473
+ </tr>
474
+ <tr>
475
+ <td>cell 7</td>
476
+ <td>cell 8</td>
477
+ <td>Cell 9</td>
478
+ </tr>
479
+ </DxcTable>
480
+ <Title title="Large margin" theme="light" level={4} />
481
+ <DxcTable margin="large">
482
+ <tr>
483
+ <th>header 1</th>
484
+ <th>header 2</th>
485
+ <th>header 3</th>
486
+ </tr>
487
+ <tr>
488
+ <td>cell 1</td>
489
+ <td>cell 2</td>
490
+ <td>cell 3</td>
491
+ </tr>
492
+ <tr>
493
+ <td>cell 4</td>
494
+ <td>cell 5</td>
495
+ <td>cell 6</td>
496
+ </tr>
497
+ <tr>
498
+ <td>cell 7</td>
499
+ <td>cell 8</td>
500
+ <td>Cell 9</td>
501
+ </tr>
502
+ </DxcTable>
503
+ <Title title="Xlarge margin" theme="light" level={4} />
504
+ <DxcTable margin="xlarge">
505
+ <tr>
506
+ <th>header 1</th>
507
+ <th>header 2</th>
508
+ <th>header 3</th>
509
+ </tr>
510
+ <tr>
511
+ <td>cell 1</td>
512
+ <td>cell 2</td>
513
+ <td>cell 3</td>
514
+ </tr>
515
+ <tr>
516
+ <td>cell 4</td>
517
+ <td>cell 5</td>
518
+ <td>cell 6</td>
519
+ </tr>
520
+ <tr>
521
+ <td>cell 7</td>
522
+ <td>cell 8</td>
523
+ <td>Cell 9</td>
524
+ </tr>
525
+ </DxcTable>
526
+ <Title title="Xxlarge margin" theme="light" level={4} />
527
+ <DxcTable margin="xxlarge">
528
+ <tr>
529
+ <th>header 1</th>
530
+ <th>header 2</th>
531
+ <th>header 3</th>
532
+ </tr>
533
+ <tr>
534
+ <td>cell 1</td>
535
+ <td>cell 2</td>
536
+ <td>cell 3</td>
537
+ </tr>
538
+ <tr>
539
+ <td>cell 4</td>
540
+ <td>cell 5</td>
541
+ <td>cell 6</td>
542
+ </tr>
543
+ <tr>
544
+ <td>cell 7</td>
545
+ <td>cell 8</td>
546
+ <td>Cell 9</td>
547
+ </tr>
548
+ </DxcTable>
549
+ </ExampleContainer>
550
+ <Title title="Opinionated theme" theme="light" level={2} />
551
+ <ExampleContainer>
552
+ <HalstackProvider theme={opinionatedTheme}>
553
+ <DxcTable>
554
+ <tr>
555
+ <th>
556
+ header<br></br>subheader
557
+ </th>
558
+ <th>
559
+ header<br></br>subheader
560
+ </th>
561
+ <th>
562
+ header<br></br>subheader
563
+ </th>
564
+ </tr>
565
+ <tr>
566
+ <td>
567
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
568
+ dolore magna aliqua.
569
+ </td>
570
+ <td>
571
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
572
+ consequat.
573
+ </td>
574
+ <td>
575
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
576
+ </td>
577
+ </tr>
578
+ <tr>
579
+ <td>cell data</td>
580
+ <td>cell data</td>
581
+ <td>cell data</td>
582
+ </tr>
583
+ <tr>
584
+ <td>cell data</td>
585
+ <td>cell data</td>
586
+ <td>cell data</td>
587
+ </tr>
588
+ <tr>
589
+ <td>cell data</td>
590
+ <td>cell data</td>
591
+ <td>cell data</td>
592
+ </tr>
593
+ <tr>
594
+ <td>cell data</td>
595
+ <td>cell data</td>
596
+ <td>cell data</td>
597
+ </tr>
598
+ <tr>
599
+ <td>cell data</td>
600
+ <td>cell data</td>
601
+ <td>cell data</td>
602
+ </tr>
603
+ <tr>
604
+ <td>cell data</td>
605
+ <td>cell data</td>
606
+ <td>cell data</td>
607
+ </tr>
608
+ <tr>
609
+ <td>cell data</td>
610
+ <td>cell data</td>
611
+ <td>cell data</td>
612
+ </tr>
613
+ <tr>
614
+ <td>cell data</td>
615
+ <td>cell data</td>
616
+ <td>cell data</td>
617
+ </tr>
618
+ </DxcTable>
619
+ </HalstackProvider>
620
+ </ExampleContainer>
621
+ </>
622
+ );
623
+
624
+ const ActionsCellDropdown = () => (
625
+ <ExampleContainer>
626
+ <Title title="Dropdown Action" theme="light" level={4} />
627
+ <DxcTable>
628
+ <tr>
629
+ <th>header 1</th>
630
+ <th>header 2</th>
631
+ <th>actions</th>
632
+ </tr>
633
+ <tr>
634
+ <td>cell 1</td>
635
+ <td>cell 2</td>
636
+ <td>
637
+ <DxcTable.ActionsCell actions={actions} />
638
+ </td>
639
+ </tr>
640
+ <tr>
641
+ <td>cell 4</td>
642
+ <td>cell 5</td>
643
+ <td>
644
+ <DxcTable.ActionsCell actions={actions} />
645
+ </td>
646
+ </tr>
647
+ <tr>
648
+ <td>cell 7</td>
649
+ <td>cell 8</td>
650
+ <td>
651
+ <DxcTable.ActionsCell actions={actions} />
652
+ </td>
653
+ </tr>
654
+ </DxcTable>
655
+ </ExampleContainer>
656
+ );
657
+
658
+ export const DropdownAction = ActionsCellDropdown.bind({});
659
+ DropdownAction.play = async ({ canvasElement }) => {
660
+ const canvas = within(canvasElement);
661
+ const nextButton = canvas.getAllByRole("button")[8];
662
+ await userEvent.click(nextButton);
663
+ };