@dxc-technology/halstack-react 0.0.0-4e1277a → 0.0.0-4e2c35b

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