@dxc-technology/halstack-react 0.0.0-7ffdc43 → 0.0.0-816f33d

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 (379) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1242 -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 +30 -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 +1 -0
  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/bulleted-list/BulletedList.accessibility.test.js +119 -0
  49. package/bulleted-list/BulletedList.js +22 -53
  50. package/bulleted-list/BulletedList.stories.tsx +8 -93
  51. package/bulleted-list/types.d.ts +32 -5
  52. package/button/Button.accessibility.test.js +127 -0
  53. package/button/Button.d.ts +1 -1
  54. package/button/Button.js +71 -106
  55. package/button/Button.stories.tsx +143 -101
  56. package/button/Button.test.js +20 -17
  57. package/button/types.d.ts +9 -5
  58. package/card/Card.accessibility.test.js +36 -0
  59. package/card/Card.d.ts +1 -1
  60. package/card/Card.js +49 -89
  61. package/card/Card.stories.tsx +12 -42
  62. package/card/Card.test.js +11 -22
  63. package/card/types.d.ts +6 -11
  64. package/checkbox/Checkbox.accessibility.test.js +87 -0
  65. package/checkbox/Checkbox.d.ts +2 -2
  66. package/checkbox/Checkbox.js +139 -181
  67. package/checkbox/Checkbox.stories.tsx +128 -94
  68. package/checkbox/Checkbox.test.js +160 -39
  69. package/checkbox/types.d.ts +11 -3
  70. package/chip/Chip.accessibility.test.js +67 -0
  71. package/chip/Chip.js +45 -80
  72. package/chip/Chip.stories.tsx +107 -27
  73. package/chip/Chip.test.js +18 -33
  74. package/chip/types.d.ts +4 -4
  75. package/common/coreTokens.d.ts +237 -0
  76. package/common/coreTokens.js +184 -0
  77. package/common/utils.d.ts +1 -0
  78. package/common/utils.js +6 -12
  79. package/common/variables.d.ts +1394 -0
  80. package/common/variables.js +935 -1166
  81. package/container/Container.d.ts +4 -0
  82. package/container/Container.js +194 -0
  83. package/container/Container.stories.tsx +214 -0
  84. package/container/types.d.ts +74 -0
  85. package/contextual-menu/ContextualMenu.accessibility.test.js +97 -0
  86. package/contextual-menu/ContextualMenu.d.ts +5 -0
  87. package/contextual-menu/ContextualMenu.js +88 -0
  88. package/contextual-menu/ContextualMenu.stories.tsx +232 -0
  89. package/contextual-menu/ContextualMenu.test.js +205 -0
  90. package/contextual-menu/GroupItem.d.ts +4 -0
  91. package/contextual-menu/GroupItem.js +67 -0
  92. package/contextual-menu/ItemAction.d.ts +4 -0
  93. package/contextual-menu/ItemAction.js +52 -0
  94. package/contextual-menu/MenuItem.d.ts +4 -0
  95. package/contextual-menu/MenuItem.js +29 -0
  96. package/contextual-menu/SingleItem.d.ts +4 -0
  97. package/contextual-menu/SingleItem.js +38 -0
  98. package/contextual-menu/types.d.ts +58 -0
  99. package/date-input/Calendar.d.ts +4 -0
  100. package/date-input/Calendar.js +214 -0
  101. package/date-input/DateInput.accessibility.test.js +228 -0
  102. package/date-input/DateInput.js +149 -299
  103. package/date-input/DateInput.stories.tsx +210 -56
  104. package/date-input/DateInput.test.js +700 -371
  105. package/date-input/DatePicker.d.ts +4 -0
  106. package/date-input/DatePicker.js +121 -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 +72 -15
  110. package/dialog/Dialog.accessibility.test.js +69 -0
  111. package/dialog/Dialog.d.ts +1 -1
  112. package/dialog/Dialog.js +61 -106
  113. package/dialog/Dialog.stories.tsx +326 -167
  114. package/dialog/Dialog.test.js +287 -20
  115. package/dialog/types.d.ts +18 -25
  116. package/divider/Divider.accessibility.test.js +33 -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 +21 -0
  122. package/divider/types.js +5 -0
  123. package/dropdown/Dropdown.accessibility.test.js +180 -0
  124. package/dropdown/Dropdown.d.ts +1 -1
  125. package/dropdown/Dropdown.js +233 -303
  126. package/dropdown/Dropdown.stories.tsx +235 -57
  127. package/dropdown/Dropdown.test.js +575 -165
  128. package/dropdown/DropdownMenu.d.ts +4 -0
  129. package/dropdown/DropdownMenu.js +63 -0
  130. package/dropdown/DropdownMenuItem.d.ts +4 -0
  131. package/dropdown/DropdownMenuItem.js +71 -0
  132. package/dropdown/types.d.ts +35 -19
  133. package/file-input/FileInput.accessibility.test.js +160 -0
  134. package/file-input/FileInput.d.ts +2 -2
  135. package/file-input/FileInput.js +241 -391
  136. package/file-input/FileInput.stories.tsx +123 -12
  137. package/file-input/FileInput.test.js +292 -367
  138. package/file-input/FileItem.d.ts +4 -14
  139. package/file-input/FileItem.js +56 -117
  140. package/file-input/types.d.ts +25 -8
  141. package/flex/Flex.d.ts +1 -1
  142. package/flex/Flex.js +40 -40
  143. package/flex/Flex.stories.tsx +35 -26
  144. package/flex/types.d.ts +85 -9
  145. package/footer/Footer.accessibility.test.js +125 -0
  146. package/footer/Footer.d.ts +1 -1
  147. package/footer/Footer.js +73 -118
  148. package/footer/Footer.stories.tsx +99 -21
  149. package/footer/Footer.test.js +33 -57
  150. package/footer/Icons.d.ts +3 -2
  151. package/footer/Icons.js +53 -22
  152. package/footer/types.d.ts +26 -27
  153. package/grid/Grid.d.ts +7 -0
  154. package/grid/Grid.js +76 -0
  155. package/grid/Grid.stories.tsx +219 -0
  156. package/grid/types.d.ts +115 -0
  157. package/grid/types.js +5 -0
  158. package/header/Header.accessibility.test.js +93 -0
  159. package/header/Header.d.ts +4 -3
  160. package/header/Header.js +90 -183
  161. package/header/Header.stories.tsx +133 -38
  162. package/header/Header.test.js +13 -26
  163. package/header/Icons.d.ts +2 -2
  164. package/header/Icons.js +5 -15
  165. package/header/types.d.ts +7 -21
  166. package/heading/Heading.accessibility.test.js +33 -0
  167. package/heading/Heading.js +10 -32
  168. package/heading/Heading.test.js +71 -88
  169. package/heading/types.d.ts +7 -7
  170. package/icon/Icon.accessibility.test.js +30 -0
  171. package/icon/Icon.d.ts +4 -0
  172. package/icon/Icon.js +33 -0
  173. package/icon/Icon.stories.tsx +28 -0
  174. package/icon/types.d.ts +4 -0
  175. package/icon/types.js +5 -0
  176. package/image/Image.accessibility.test.js +56 -0
  177. package/image/Image.d.ts +4 -0
  178. package/image/Image.js +70 -0
  179. package/image/Image.stories.tsx +129 -0
  180. package/image/types.d.ts +72 -0
  181. package/image/types.js +5 -0
  182. package/inset/Inset.js +13 -21
  183. package/inset/Inset.stories.tsx +2 -1
  184. package/inset/types.d.ts +2 -2
  185. package/layout/ApplicationLayout.d.ts +5 -5
  186. package/layout/ApplicationLayout.js +36 -70
  187. package/layout/ApplicationLayout.stories.tsx +2 -1
  188. package/layout/Icons.d.ts +7 -5
  189. package/layout/Icons.js +41 -59
  190. package/layout/types.d.ts +5 -6
  191. package/link/Link.accessibility.test.js +108 -0
  192. package/link/Link.js +32 -51
  193. package/link/Link.stories.tsx +64 -4
  194. package/link/Link.test.js +24 -44
  195. package/link/types.d.ts +14 -14
  196. package/main.d.ts +10 -5
  197. package/main.js +47 -59
  198. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  199. package/nav-tabs/NavTabs.d.ts +7 -0
  200. package/{tabs-nav → nav-tabs}/NavTabs.js +30 -62
  201. package/nav-tabs/NavTabs.stories.tsx +279 -0
  202. package/nav-tabs/NavTabs.test.js +77 -0
  203. package/nav-tabs/NavTabsContext.d.ts +3 -0
  204. package/nav-tabs/NavTabsContext.js +8 -0
  205. package/nav-tabs/Tab.js +117 -0
  206. package/{tabs-nav → nav-tabs}/types.d.ts +15 -16
  207. package/nav-tabs/types.js +5 -0
  208. package/number-input/NumberInput.accessibility.test.js +228 -0
  209. package/number-input/NumberInput.js +46 -36
  210. package/number-input/NumberInput.stories.tsx +42 -26
  211. package/number-input/NumberInput.test.js +860 -377
  212. package/number-input/NumberInputContext.d.ts +3 -4
  213. package/number-input/NumberInputContext.js +3 -14
  214. package/number-input/types.d.ts +17 -5
  215. package/package.json +49 -52
  216. package/paginator/Paginator.accessibility.test.js +79 -0
  217. package/paginator/Paginator.js +35 -68
  218. package/paginator/Paginator.stories.tsx +24 -0
  219. package/paginator/Paginator.test.js +253 -226
  220. package/paginator/types.d.ts +3 -3
  221. package/paragraph/Paragraph.accessibility.test.js +28 -0
  222. package/paragraph/Paragraph.d.ts +3 -4
  223. package/paragraph/Paragraph.js +6 -22
  224. package/paragraph/Paragraph.stories.tsx +0 -17
  225. package/password-input/PasswordInput.accessibility.test.js +153 -0
  226. package/password-input/PasswordInput.js +58 -127
  227. package/password-input/PasswordInput.stories.tsx +1 -33
  228. package/password-input/PasswordInput.test.js +160 -142
  229. package/password-input/types.d.ts +8 -7
  230. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  231. package/progress-bar/ProgressBar.js +68 -92
  232. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +39 -4
  233. package/progress-bar/ProgressBar.test.js +72 -44
  234. package/progress-bar/types.d.ts +3 -3
  235. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  236. package/quick-nav/QuickNav.js +15 -39
  237. package/quick-nav/QuickNav.stories.tsx +112 -20
  238. package/quick-nav/types.d.ts +10 -10
  239. package/radio-group/Radio.d.ts +1 -1
  240. package/radio-group/Radio.js +59 -76
  241. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  242. package/radio-group/RadioGroup.js +69 -116
  243. package/radio-group/RadioGroup.stories.tsx +132 -18
  244. package/radio-group/RadioGroup.test.js +518 -457
  245. package/radio-group/types.d.ts +10 -10
  246. package/resultset-table/Icons.d.ts +7 -0
  247. package/resultset-table/Icons.js +47 -0
  248. package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
  249. package/resultset-table/ResultsetTable.d.ts +7 -0
  250. package/resultset-table/ResultsetTable.js +171 -0
  251. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +168 -30
  252. package/resultset-table/ResultsetTable.test.js +381 -0
  253. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  254. package/resultset-table/types.js +5 -0
  255. package/select/Listbox.js +44 -64
  256. package/select/Option.js +35 -56
  257. package/select/Select.accessibility.test.js +228 -0
  258. package/select/Select.js +152 -210
  259. package/select/Select.stories.tsx +496 -203
  260. package/select/Select.test.js +1919 -1816
  261. package/select/types.d.ts +17 -20
  262. package/sidenav/Sidenav.accessibility.test.js +59 -0
  263. package/sidenav/Sidenav.d.ts +2 -2
  264. package/sidenav/Sidenav.js +90 -157
  265. package/sidenav/Sidenav.stories.tsx +160 -63
  266. package/sidenav/Sidenav.test.js +3 -10
  267. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  268. package/{layout → sidenav}/SidenavContext.js +3 -9
  269. package/sidenav/types.d.ts +33 -30
  270. package/slider/Slider.accessibility.test.js +104 -0
  271. package/slider/Slider.d.ts +2 -2
  272. package/slider/Slider.js +149 -181
  273. package/slider/Slider.test.js +185 -81
  274. package/slider/types.d.ts +7 -3
  275. package/spinner/Spinner.accessibility.test.js +96 -0
  276. package/spinner/Spinner.js +34 -74
  277. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  278. package/spinner/Spinner.test.js +26 -35
  279. package/spinner/types.d.ts +3 -3
  280. package/status-light/StatusLight.accessibility.test.js +157 -0
  281. package/status-light/StatusLight.d.ts +4 -0
  282. package/status-light/StatusLight.js +51 -0
  283. package/status-light/StatusLight.stories.tsx +74 -0
  284. package/status-light/StatusLight.test.js +25 -0
  285. package/status-light/types.d.ts +17 -0
  286. package/status-light/types.js +5 -0
  287. package/switch/Switch.accessibility.test.js +98 -0
  288. package/switch/Switch.d.ts +2 -2
  289. package/switch/Switch.js +145 -126
  290. package/switch/Switch.stories.tsx +49 -60
  291. package/switch/Switch.test.js +138 -56
  292. package/switch/types.d.ts +7 -3
  293. package/table/DropdownTheme.js +62 -0
  294. package/table/Table.accessibility.test.js +93 -0
  295. package/table/Table.d.ts +6 -2
  296. package/table/Table.js +78 -35
  297. package/table/Table.stories.tsx +663 -0
  298. package/table/Table.test.js +95 -8
  299. package/table/types.d.ts +34 -6
  300. package/tabs/Tab.d.ts +4 -0
  301. package/tabs/Tab.js +117 -0
  302. package/tabs/Tabs.accessibility.test.js +56 -0
  303. package/tabs/Tabs.js +303 -141
  304. package/tabs/Tabs.stories.tsx +124 -6
  305. package/tabs/Tabs.test.js +213 -77
  306. package/tabs/types.d.ts +30 -20
  307. package/tag/Tag.accessibility.test.js +69 -0
  308. package/tag/Tag.js +35 -67
  309. package/tag/Tag.stories.tsx +18 -8
  310. package/tag/Tag.test.js +18 -37
  311. package/tag/types.d.ts +9 -9
  312. package/text-input/Suggestion.js +40 -28
  313. package/text-input/Suggestions.d.ts +4 -0
  314. package/text-input/Suggestions.js +94 -0
  315. package/text-input/TextInput.accessibility.test.js +321 -0
  316. package/text-input/TextInput.js +316 -515
  317. package/text-input/TextInput.stories.tsx +276 -276
  318. package/text-input/TextInput.test.js +1419 -1375
  319. package/text-input/types.d.ts +43 -16
  320. package/textarea/Textarea.accessibility.test.js +155 -0
  321. package/textarea/Textarea.js +71 -113
  322. package/textarea/Textarea.stories.tsx +174 -0
  323. package/textarea/Textarea.test.js +152 -183
  324. package/textarea/types.d.ts +9 -5
  325. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  326. package/toggle-group/ToggleGroup.d.ts +2 -2
  327. package/toggle-group/ToggleGroup.js +94 -107
  328. package/toggle-group/ToggleGroup.stories.tsx +52 -7
  329. package/toggle-group/ToggleGroup.test.js +69 -88
  330. package/toggle-group/types.d.ts +28 -19
  331. package/typography/Typography.accessibility.test.js +339 -0
  332. package/typography/Typography.d.ts +2 -2
  333. package/typography/Typography.js +15 -123
  334. package/typography/Typography.stories.tsx +1 -1
  335. package/typography/types.d.ts +1 -1
  336. package/useTheme.d.ts +1146 -1
  337. package/useTheme.js +2 -9
  338. package/useTranslatedLabels.d.ts +84 -1
  339. package/useTranslatedLabels.js +1 -7
  340. package/utils/BaseTypography.d.ts +21 -0
  341. package/utils/BaseTypography.js +94 -0
  342. package/utils/FocusLock.d.ts +13 -0
  343. package/utils/FocusLock.js +124 -0
  344. package/wizard/Wizard.accessibility.test.js +55 -0
  345. package/wizard/Wizard.js +29 -75
  346. package/wizard/Wizard.stories.tsx +39 -0
  347. package/wizard/Wizard.test.js +54 -81
  348. package/wizard/types.d.ts +10 -11
  349. package/card/ice-cream.jpg +0 -0
  350. package/common/OpenSans.css +0 -81
  351. package/common/RequiredComponent.js +0 -32
  352. package/common/fonts/OpenSans-Bold.ttf +0 -0
  353. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  354. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  355. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  356. package/common/fonts/OpenSans-Italic.ttf +0 -0
  357. package/common/fonts/OpenSans-Light.ttf +0 -0
  358. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  359. package/common/fonts/OpenSans-Regular.ttf +0 -0
  360. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  361. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  362. package/number-input/numberInputContextTypes.d.ts +0 -19
  363. package/paginator/Icons.js +0 -66
  364. package/resultsetTable/ResultsetTable.d.ts +0 -4
  365. package/resultsetTable/ResultsetTable.js +0 -254
  366. package/resultsetTable/ResultsetTable.test.js +0 -348
  367. package/select/Icons.d.ts +0 -10
  368. package/select/Icons.js +0 -93
  369. package/slider/Slider.stories.tsx +0 -177
  370. package/table/Table.stories.jsx +0 -277
  371. package/tabs-nav/NavTabs.d.ts +0 -8
  372. package/tabs-nav/NavTabs.stories.tsx +0 -170
  373. package/tabs-nav/NavTabs.test.js +0 -82
  374. package/tabs-nav/Tab.js +0 -132
  375. package/textarea/Textarea.stories.jsx +0 -157
  376. /package/{resultsetTable → action-icon}/types.js +0 -0
  377. /package/{tabs-nav → container}/types.js +0 -0
  378. /package/{number-input/numberInputContextTypes.js → contextual-menu/types.js} +0 -0
  379. /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
+ };