@dxc-technology/halstack-react 0.0.0-f64ebd5 → 0.0.0-f70a97e

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