@dxc-technology/halstack-react 0.0.0-7f7f9e4 → 0.0.0-7ffa3f4

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