@dxc-technology/halstack-react 0.0.0-951bb80 → 0.0.0-95b953e

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 (359) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1249 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +116 -181
  8. package/accordion/Accordion.stories.tsx +103 -127
  9. package/accordion/Accordion.test.js +56 -0
  10. package/accordion/types.d.ts +9 -16
  11. package/accordion-group/AccordionGroup.d.ts +5 -4
  12. package/accordion-group/AccordionGroup.js +38 -107
  13. package/accordion-group/AccordionGroup.stories.tsx +95 -68
  14. package/accordion-group/AccordionGroup.test.js +98 -0
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +15 -16
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +47 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +23 -59
  24. package/alert/Alert.stories.tsx +28 -0
  25. package/alert/Alert.test.js +75 -0
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +4 -0
  28. package/badge/Badge.js +141 -41
  29. package/badge/Badge.stories.tsx +210 -0
  30. package/badge/Badge.test.js +30 -0
  31. package/badge/types.d.ts +54 -0
  32. package/bleed/Bleed.js +14 -55
  33. package/bleed/Bleed.stories.tsx +95 -95
  34. package/bleed/types.d.ts +26 -2
  35. package/box/Box.d.ts +1 -1
  36. package/box/Box.js +30 -81
  37. package/box/Box.stories.tsx +38 -51
  38. package/box/Box.test.js +13 -0
  39. package/box/types.d.ts +3 -14
  40. package/bulleted-list/BulletedList.d.ts +7 -0
  41. package/bulleted-list/BulletedList.js +89 -0
  42. package/bulleted-list/BulletedList.stories.tsx +115 -0
  43. package/bulleted-list/types.d.ts +38 -0
  44. package/button/Button.d.ts +1 -1
  45. package/button/Button.js +62 -113
  46. package/button/Button.stories.tsx +160 -90
  47. package/button/Button.test.js +38 -0
  48. package/button/types.d.ts +12 -8
  49. package/card/Card.d.ts +1 -1
  50. package/card/Card.js +58 -102
  51. package/card/Card.stories.tsx +12 -42
  52. package/card/Card.test.js +39 -0
  53. package/card/types.d.ts +6 -11
  54. package/checkbox/Checkbox.d.ts +2 -2
  55. package/checkbox/Checkbox.js +144 -182
  56. package/checkbox/Checkbox.stories.tsx +166 -136
  57. package/checkbox/Checkbox.test.js +199 -0
  58. package/checkbox/types.d.ts +18 -6
  59. package/chip/Chip.js +39 -79
  60. package/chip/Chip.stories.tsx +121 -26
  61. package/chip/Chip.test.js +41 -0
  62. package/chip/types.d.ts +4 -4
  63. package/common/OpenSans.css +68 -80
  64. package/common/coreTokens.d.ts +237 -0
  65. package/common/coreTokens.js +184 -0
  66. package/common/utils.d.ts +1 -0
  67. package/common/utils.js +6 -12
  68. package/common/variables.d.ts +1395 -0
  69. package/common/variables.js +1029 -1373
  70. package/container/Container.d.ts +4 -0
  71. package/container/Container.js +194 -0
  72. package/container/Container.stories.tsx +214 -0
  73. package/container/types.d.ts +74 -0
  74. package/date-input/Calendar.d.ts +4 -0
  75. package/date-input/Calendar.js +214 -0
  76. package/date-input/DateInput.js +171 -306
  77. package/date-input/DateInput.stories.tsx +203 -56
  78. package/date-input/DateInput.test.js +808 -0
  79. package/date-input/DatePicker.d.ts +4 -0
  80. package/date-input/DatePicker.js +115 -0
  81. package/date-input/Icons.d.ts +6 -0
  82. package/date-input/Icons.js +58 -0
  83. package/date-input/YearPicker.d.ts +4 -0
  84. package/date-input/YearPicker.js +100 -0
  85. package/date-input/types.d.ts +86 -22
  86. package/dialog/Dialog.d.ts +1 -1
  87. package/dialog/Dialog.js +68 -130
  88. package/dialog/Dialog.stories.tsx +320 -167
  89. package/dialog/Dialog.test.js +307 -0
  90. package/dialog/types.d.ts +18 -25
  91. package/dropdown/Dropdown.d.ts +1 -1
  92. package/dropdown/Dropdown.js +248 -307
  93. package/dropdown/Dropdown.stories.tsx +245 -56
  94. package/dropdown/Dropdown.test.js +599 -0
  95. package/dropdown/DropdownMenu.d.ts +4 -0
  96. package/dropdown/DropdownMenu.js +63 -0
  97. package/dropdown/DropdownMenuItem.d.ts +4 -0
  98. package/dropdown/DropdownMenuItem.js +67 -0
  99. package/dropdown/types.d.ts +32 -14
  100. package/file-input/FileInput.d.ts +2 -2
  101. package/file-input/FileInput.js +246 -357
  102. package/file-input/FileInput.stories.tsx +123 -12
  103. package/file-input/FileInput.test.js +459 -0
  104. package/file-input/FileItem.d.ts +4 -14
  105. package/file-input/FileItem.js +50 -99
  106. package/file-input/types.d.ts +25 -8
  107. package/flex/Flex.d.ts +4 -0
  108. package/flex/Flex.js +57 -0
  109. package/flex/Flex.stories.tsx +112 -0
  110. package/flex/types.d.ts +97 -0
  111. package/footer/Footer.d.ts +1 -1
  112. package/footer/Footer.js +70 -190
  113. package/footer/Footer.stories.tsx +60 -19
  114. package/footer/Footer.test.js +85 -0
  115. package/footer/Icons.d.ts +3 -2
  116. package/footer/Icons.js +67 -8
  117. package/footer/types.d.ts +25 -26
  118. package/grid/Grid.d.ts +7 -0
  119. package/grid/Grid.js +76 -0
  120. package/grid/Grid.stories.tsx +219 -0
  121. package/grid/types.d.ts +115 -0
  122. package/header/Header.d.ts +4 -3
  123. package/header/Header.js +99 -203
  124. package/header/Header.stories.tsx +152 -63
  125. package/header/Header.test.js +66 -0
  126. package/header/Icons.d.ts +2 -2
  127. package/header/Icons.js +4 -9
  128. package/header/types.d.ts +5 -19
  129. package/heading/Heading.js +10 -32
  130. package/heading/Heading.test.js +169 -0
  131. package/heading/types.d.ts +7 -7
  132. package/image/Image.d.ts +4 -0
  133. package/image/Image.js +70 -0
  134. package/image/Image.stories.tsx +127 -0
  135. package/image/types.d.ts +72 -0
  136. package/image/types.js +5 -0
  137. package/inset/Inset.js +14 -55
  138. package/inset/Inset.stories.tsx +37 -36
  139. package/inset/types.d.ts +26 -2
  140. package/layout/ApplicationLayout.d.ts +16 -6
  141. package/layout/ApplicationLayout.js +83 -174
  142. package/layout/ApplicationLayout.stories.tsx +85 -94
  143. package/layout/Icons.d.ts +8 -0
  144. package/layout/Icons.js +51 -48
  145. package/layout/SidenavContext.d.ts +5 -0
  146. package/layout/SidenavContext.js +13 -0
  147. package/layout/types.d.ts +19 -35
  148. package/link/Link.d.ts +3 -2
  149. package/link/Link.js +61 -99
  150. package/link/Link.stories.tsx +155 -53
  151. package/link/Link.test.js +63 -0
  152. package/link/types.d.ts +15 -31
  153. package/main.d.ts +16 -18
  154. package/main.js +63 -123
  155. package/nav-tabs/NavTabs.d.ts +8 -0
  156. package/nav-tabs/NavTabs.js +93 -0
  157. package/nav-tabs/NavTabs.stories.tsx +276 -0
  158. package/nav-tabs/NavTabs.test.js +76 -0
  159. package/nav-tabs/Tab.d.ts +4 -0
  160. package/nav-tabs/Tab.js +118 -0
  161. package/nav-tabs/types.d.ts +52 -0
  162. package/nav-tabs/types.js +5 -0
  163. package/number-input/NumberInput.d.ts +7 -0
  164. package/number-input/NumberInput.js +48 -45
  165. package/number-input/NumberInput.stories.tsx +44 -28
  166. package/number-input/NumberInput.test.js +989 -0
  167. package/number-input/types.d.ts +28 -15
  168. package/package.json +46 -47
  169. package/paginator/Icons.d.ts +5 -0
  170. package/paginator/Icons.js +21 -47
  171. package/paginator/Paginator.js +34 -91
  172. package/paginator/Paginator.stories.tsx +24 -0
  173. package/paginator/Paginator.test.js +335 -0
  174. package/paginator/types.d.ts +3 -3
  175. package/paragraph/Paragraph.d.ts +5 -0
  176. package/paragraph/Paragraph.js +22 -0
  177. package/paragraph/Paragraph.stories.tsx +27 -0
  178. package/password-input/Icons.d.ts +6 -0
  179. package/password-input/Icons.js +35 -0
  180. package/password-input/PasswordInput.js +57 -123
  181. package/password-input/PasswordInput.stories.tsx +1 -33
  182. package/password-input/PasswordInput.test.js +198 -0
  183. package/password-input/types.d.ts +21 -17
  184. package/progress-bar/ProgressBar.js +65 -91
  185. package/progress-bar/ProgressBar.stories.tsx +93 -0
  186. package/progress-bar/ProgressBar.test.js +93 -0
  187. package/progress-bar/types.d.ts +3 -3
  188. package/quick-nav/QuickNav.d.ts +4 -0
  189. package/quick-nav/QuickNav.js +94 -0
  190. package/quick-nav/QuickNav.stories.tsx +356 -0
  191. package/quick-nav/types.d.ts +21 -0
  192. package/quick-nav/types.js +5 -0
  193. package/radio-group/Radio.d.ts +1 -1
  194. package/radio-group/Radio.js +64 -80
  195. package/radio-group/RadioGroup.js +101 -139
  196. package/radio-group/RadioGroup.stories.tsx +171 -36
  197. package/radio-group/RadioGroup.test.js +691 -183
  198. package/radio-group/types.d.ts +89 -11
  199. package/resultset-table/Icons.d.ts +7 -0
  200. package/resultset-table/Icons.js +47 -0
  201. package/resultset-table/ResultsetTable.d.ts +7 -0
  202. package/resultset-table/ResultsetTable.js +167 -0
  203. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +152 -30
  204. package/resultset-table/ResultsetTable.test.js +371 -0
  205. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  206. package/resultset-table/types.js +5 -0
  207. package/select/Icons.d.ts +10 -0
  208. package/select/Icons.js +89 -0
  209. package/select/Listbox.d.ts +4 -0
  210. package/select/Listbox.js +143 -0
  211. package/select/Option.d.ts +4 -0
  212. package/select/Option.js +87 -0
  213. package/select/Select.js +229 -502
  214. package/select/Select.stories.tsx +603 -204
  215. package/select/Select.test.js +2370 -0
  216. package/select/types.d.ts +64 -25
  217. package/sidenav/Icons.d.ts +7 -0
  218. package/sidenav/Icons.js +47 -0
  219. package/sidenav/Sidenav.d.ts +6 -5
  220. package/sidenav/Sidenav.js +131 -71
  221. package/sidenav/Sidenav.stories.tsx +251 -151
  222. package/sidenav/Sidenav.test.js +37 -0
  223. package/sidenav/types.d.ts +52 -26
  224. package/slider/Slider.d.ts +2 -2
  225. package/slider/Slider.js +148 -180
  226. package/slider/Slider.test.js +254 -0
  227. package/slider/types.d.ts +11 -3
  228. package/spinner/Spinner.js +31 -75
  229. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  230. package/spinner/Spinner.test.js +55 -0
  231. package/spinner/types.d.ts +3 -3
  232. package/status-light/StatusLight.d.ts +4 -0
  233. package/status-light/StatusLight.js +51 -0
  234. package/status-light/StatusLight.stories.tsx +74 -0
  235. package/status-light/StatusLight.test.js +25 -0
  236. package/status-light/types.d.ts +17 -0
  237. package/status-light/types.js +5 -0
  238. package/switch/Switch.d.ts +2 -2
  239. package/switch/Switch.js +149 -114
  240. package/switch/Switch.stories.tsx +44 -67
  241. package/switch/Switch.test.js +180 -0
  242. package/switch/types.d.ts +13 -5
  243. package/table/ActionsCell.d.ts +4 -0
  244. package/table/ActionsCell.js +67 -0
  245. package/table/DropdownTheme.js +62 -0
  246. package/table/Table.d.ts +4 -1
  247. package/table/Table.js +26 -32
  248. package/table/Table.stories.tsx +658 -0
  249. package/table/Table.test.js +113 -0
  250. package/table/types.d.ts +45 -6
  251. package/tabs/Tab.d.ts +4 -0
  252. package/tabs/Tab.js +116 -0
  253. package/tabs/Tabs.d.ts +1 -1
  254. package/tabs/Tabs.js +316 -145
  255. package/tabs/Tabs.stories.tsx +120 -14
  256. package/tabs/Tabs.test.js +294 -0
  257. package/tabs/types.d.ts +29 -15
  258. package/tag/Tag.js +41 -78
  259. package/tag/Tag.stories.tsx +25 -8
  260. package/tag/Tag.test.js +49 -0
  261. package/tag/types.d.ts +7 -7
  262. package/text-input/Icons.d.ts +8 -0
  263. package/text-input/Icons.js +56 -0
  264. package/text-input/Suggestion.d.ts +4 -0
  265. package/text-input/Suggestion.js +67 -0
  266. package/text-input/Suggestions.d.ts +4 -0
  267. package/text-input/Suggestions.js +84 -0
  268. package/text-input/TextInput.js +327 -556
  269. package/text-input/TextInput.stories.tsx +281 -272
  270. package/text-input/TextInput.test.js +1756 -0
  271. package/text-input/types.d.ts +70 -24
  272. package/textarea/Textarea.js +85 -135
  273. package/textarea/Textarea.stories.tsx +174 -0
  274. package/textarea/Textarea.test.js +406 -0
  275. package/textarea/types.d.ts +27 -16
  276. package/toggle-group/ToggleGroup.d.ts +2 -2
  277. package/toggle-group/ToggleGroup.js +92 -105
  278. package/toggle-group/ToggleGroup.stories.tsx +53 -8
  279. package/toggle-group/ToggleGroup.test.js +137 -0
  280. package/toggle-group/types.d.ts +34 -17
  281. package/typography/Typography.d.ts +4 -0
  282. package/typography/Typography.js +23 -0
  283. package/typography/Typography.stories.tsx +198 -0
  284. package/typography/types.d.ts +18 -0
  285. package/typography/types.js +5 -0
  286. package/useTheme.d.ts +1147 -1
  287. package/useTheme.js +4 -11
  288. package/useTranslatedLabels.d.ts +85 -0
  289. package/useTranslatedLabels.js +14 -0
  290. package/utils/BaseTypography.d.ts +21 -0
  291. package/utils/BaseTypography.js +94 -0
  292. package/utils/FocusLock.d.ts +13 -0
  293. package/utils/FocusLock.js +124 -0
  294. package/wizard/Wizard.d.ts +1 -1
  295. package/wizard/Wizard.js +70 -101
  296. package/wizard/Wizard.stories.tsx +48 -19
  297. package/wizard/Wizard.test.js +114 -0
  298. package/wizard/types.d.ts +12 -8
  299. package/ThemeContext.d.ts +0 -15
  300. package/ThemeContext.js +0 -243
  301. package/V3Select/V3Select.js +0 -455
  302. package/V3Select/index.d.ts +0 -27
  303. package/V3Textarea/V3Textarea.js +0 -260
  304. package/V3Textarea/index.d.ts +0 -27
  305. package/card/ice-cream.jpg +0 -0
  306. package/common/RequiredComponent.js +0 -32
  307. package/date/Date.js +0 -373
  308. package/date/index.d.ts +0 -27
  309. package/input-text/Icons.js +0 -22
  310. package/input-text/InputText.js +0 -611
  311. package/input-text/index.d.ts +0 -36
  312. package/list/List.d.ts +0 -4
  313. package/list/List.js +0 -47
  314. package/list/List.stories.tsx +0 -95
  315. package/list/types.d.ts +0 -7
  316. package/number-input/NumberInputContext.d.ts +0 -4
  317. package/number-input/NumberInputContext.js +0 -19
  318. package/number-input/numberInputContextTypes.d.ts +0 -19
  319. package/progress-bar/ProgressBar.stories.jsx +0 -58
  320. package/radio/Radio.d.ts +0 -4
  321. package/radio/Radio.js +0 -174
  322. package/radio/Radio.stories.tsx +0 -192
  323. package/radio/types.d.ts +0 -54
  324. package/resultsetTable/ResultsetTable.d.ts +0 -4
  325. package/resultsetTable/ResultsetTable.js +0 -251
  326. package/row/Row.d.ts +0 -3
  327. package/row/Row.js +0 -127
  328. package/row/Row.stories.tsx +0 -237
  329. package/row/types.d.ts +0 -10
  330. package/slider/Slider.stories.tsx +0 -177
  331. package/stack/Stack.d.ts +0 -3
  332. package/stack/Stack.js +0 -97
  333. package/stack/Stack.stories.tsx +0 -164
  334. package/stack/types.d.ts +0 -9
  335. package/table/Table.stories.jsx +0 -277
  336. package/text/Text.d.ts +0 -7
  337. package/text/Text.js +0 -30
  338. package/text/Text.stories.tsx +0 -19
  339. package/textarea/Textarea.stories.jsx +0 -136
  340. package/toggle/Toggle.js +0 -186
  341. package/toggle/index.d.ts +0 -21
  342. package/upload/Upload.js +0 -201
  343. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  344. package/upload/buttons-upload/Icons.js +0 -40
  345. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  346. package/upload/dragAndDropArea/Icons.js +0 -39
  347. package/upload/file-upload/FileToUpload.js +0 -115
  348. package/upload/file-upload/Icons.js +0 -66
  349. package/upload/files-upload/FilesToUpload.js +0 -109
  350. package/upload/index.d.ts +0 -15
  351. package/upload/transaction/Icons.js +0 -160
  352. package/upload/transaction/Transaction.js +0 -104
  353. package/upload/transactions/Transactions.js +0 -94
  354. /package/{list → action-icon}/types.js +0 -0
  355. /package/{radio → badge}/types.js +0 -0
  356. /package/{resultsetTable → bulleted-list}/types.js +0 -0
  357. /package/{row → container}/types.js +0 -0
  358. /package/{stack → flex}/types.js +0 -0
  359. /package/{number-input/numberInputContextTypes.js → grid/types.js} +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
+ };