@dxc-technology/halstack-react 0.0.0-abf35d9 → 0.0.0-accd42b

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 (341) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6665 -0
  3. package/dist/index.d.ts +6665 -0
  4. package/dist/index.js +14521 -0
  5. package/dist/index.mjs +14463 -0
  6. package/package.json +68 -66
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -1336
  10. package/HalstackContext.js +0 -335
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -234
  13. package/accordion/Accordion.stories.tsx +0 -395
  14. package/accordion/Accordion.test.js +0 -71
  15. package/accordion/types.d.ts +0 -69
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -149
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -251
  20. package/accordion-group/AccordionGroup.test.js +0 -126
  21. package/accordion-group/types.d.ts +0 -79
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -291
  25. package/alert/Alert.stories.tsx +0 -198
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -114
  40. package/box/Box.stories.tsx +0 -147
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -44
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -154
  51. package/button/Button.stories.tsx +0 -425
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -160
  57. package/card/Card.stories.tsx +0 -200
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -68
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -250
  64. package/checkbox/Checkbox.stories.tsx +0 -260
  65. package/checkbox/Checkbox.test.js +0 -155
  66. package/checkbox/types.d.ts +0 -68
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -153
  70. package/chip/Chip.stories.tsx +0 -206
  71. package/chip/Chip.test.js +0 -54
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/fonts/OpenSans-Bold.ttf +0 -0
  76. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  77. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-Italic.ttf +0 -0
  80. package/common/fonts/OpenSans-Light.ttf +0 -0
  81. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Regular.ttf +0 -0
  83. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  85. package/common/utils.d.ts +0 -1
  86. package/common/utils.js +0 -22
  87. package/common/variables.d.ts +0 -1625
  88. package/common/variables.js +0 -1504
  89. package/date-input/Calendar.d.ts +0 -4
  90. package/date-input/Calendar.js +0 -258
  91. package/date-input/DateInput.d.ts +0 -4
  92. package/date-input/DateInput.js +0 -269
  93. package/date-input/DateInput.stories.tsx +0 -304
  94. package/date-input/DateInput.test.js +0 -835
  95. package/date-input/DatePicker.d.ts +0 -4
  96. package/date-input/DatePicker.js +0 -146
  97. package/date-input/Icons.d.ts +0 -6
  98. package/date-input/Icons.js +0 -75
  99. package/date-input/YearPicker.d.ts +0 -4
  100. package/date-input/YearPicker.js +0 -126
  101. package/date-input/types.d.ts +0 -158
  102. package/date-input/types.js +0 -5
  103. package/dialog/Dialog.d.ts +0 -4
  104. package/dialog/Dialog.js +0 -149
  105. package/dialog/Dialog.stories.tsx +0 -319
  106. package/dialog/Dialog.test.js +0 -369
  107. package/dialog/types.d.ts +0 -44
  108. package/dialog/types.js +0 -5
  109. package/dropdown/Dropdown.d.ts +0 -4
  110. package/dropdown/Dropdown.js +0 -388
  111. package/dropdown/Dropdown.stories.tsx +0 -438
  112. package/dropdown/Dropdown.test.js +0 -586
  113. package/dropdown/DropdownMenu.d.ts +0 -4
  114. package/dropdown/DropdownMenu.js +0 -70
  115. package/dropdown/DropdownMenuItem.d.ts +0 -4
  116. package/dropdown/DropdownMenuItem.js +0 -79
  117. package/dropdown/types.d.ts +0 -100
  118. package/dropdown/types.js +0 -5
  119. package/file-input/FileInput.d.ts +0 -4
  120. package/file-input/FileInput.js +0 -547
  121. package/file-input/FileInput.stories.tsx +0 -618
  122. package/file-input/FileInput.test.js +0 -457
  123. package/file-input/FileItem.d.ts +0 -4
  124. package/file-input/FileItem.js +0 -162
  125. package/file-input/types.d.ts +0 -129
  126. package/file-input/types.js +0 -5
  127. package/flex/Flex.d.ts +0 -4
  128. package/flex/Flex.js +0 -69
  129. package/flex/Flex.stories.tsx +0 -103
  130. package/flex/types.d.ts +0 -32
  131. package/flex/types.js +0 -5
  132. package/footer/Footer.d.ts +0 -4
  133. package/footer/Footer.js +0 -183
  134. package/footer/Footer.stories.tsx +0 -228
  135. package/footer/Footer.test.js +0 -97
  136. package/footer/Icons.d.ts +0 -2
  137. package/footer/Icons.js +0 -77
  138. package/footer/types.d.ts +0 -66
  139. package/footer/types.js +0 -5
  140. package/grid/Grid.d.ts +0 -7
  141. package/grid/Grid.js +0 -91
  142. package/grid/Grid.stories.tsx +0 -219
  143. package/grid/types.d.ts +0 -46
  144. package/grid/types.js +0 -5
  145. package/header/Header.d.ts +0 -8
  146. package/header/Header.js +0 -303
  147. package/header/Header.stories.tsx +0 -315
  148. package/header/Header.test.js +0 -79
  149. package/header/Icons.d.ts +0 -2
  150. package/header/Icons.js +0 -34
  151. package/header/types.d.ts +0 -48
  152. package/header/types.js +0 -5
  153. package/heading/Heading.d.ts +0 -4
  154. package/heading/Heading.js +0 -159
  155. package/heading/Heading.stories.tsx +0 -54
  156. package/heading/Heading.test.js +0 -186
  157. package/heading/types.d.ts +0 -33
  158. package/heading/types.js +0 -5
  159. package/inset/Inset.d.ts +0 -3
  160. package/inset/Inset.js +0 -51
  161. package/inset/Inset.stories.tsx +0 -229
  162. package/inset/types.d.ts +0 -37
  163. package/inset/types.js +0 -5
  164. package/layout/ApplicationLayout.d.ts +0 -20
  165. package/layout/ApplicationLayout.js +0 -171
  166. package/layout/ApplicationLayout.stories.tsx +0 -162
  167. package/layout/Icons.d.ts +0 -5
  168. package/layout/Icons.js +0 -66
  169. package/layout/SidenavContext.d.ts +0 -5
  170. package/layout/SidenavContext.js +0 -19
  171. package/layout/types.d.ts +0 -42
  172. package/layout/types.js +0 -5
  173. package/link/Link.d.ts +0 -4
  174. package/link/Link.js +0 -136
  175. package/link/Link.stories.tsx +0 -253
  176. package/link/Link.test.js +0 -81
  177. package/link/types.d.ts +0 -54
  178. package/link/types.js +0 -5
  179. package/main.d.ts +0 -45
  180. package/main.js +0 -377
  181. package/nav-tabs/NavTabs.d.ts +0 -8
  182. package/nav-tabs/NavTabs.js +0 -125
  183. package/nav-tabs/NavTabs.stories.tsx +0 -260
  184. package/nav-tabs/NavTabs.test.js +0 -82
  185. package/nav-tabs/Tab.d.ts +0 -4
  186. package/nav-tabs/Tab.js +0 -150
  187. package/nav-tabs/types.d.ts +0 -53
  188. package/nav-tabs/types.js +0 -5
  189. package/number-input/NumberInput.d.ts +0 -4
  190. package/number-input/NumberInput.js +0 -76
  191. package/number-input/NumberInput.stories.tsx +0 -115
  192. package/number-input/NumberInput.test.js +0 -542
  193. package/number-input/NumberInputContext.d.ts +0 -4
  194. package/number-input/NumberInputContext.js +0 -19
  195. package/number-input/numberInputContextTypes.d.ts +0 -19
  196. package/number-input/numberInputContextTypes.js +0 -5
  197. package/number-input/types.d.ts +0 -124
  198. package/number-input/types.js +0 -5
  199. package/paginator/Icons.d.ts +0 -5
  200. package/paginator/Icons.js +0 -54
  201. package/paginator/Paginator.d.ts +0 -4
  202. package/paginator/Paginator.js +0 -163
  203. package/paginator/Paginator.stories.tsx +0 -87
  204. package/paginator/Paginator.test.js +0 -305
  205. package/paginator/types.d.ts +0 -38
  206. package/paginator/types.js +0 -5
  207. package/paragraph/Paragraph.d.ts +0 -5
  208. package/paragraph/Paragraph.js +0 -38
  209. package/paragraph/Paragraph.stories.tsx +0 -44
  210. package/password-input/PasswordInput.d.ts +0 -4
  211. package/password-input/PasswordInput.js +0 -166
  212. package/password-input/PasswordInput.stories.tsx +0 -131
  213. package/password-input/PasswordInput.test.js +0 -181
  214. package/password-input/types.d.ts +0 -110
  215. package/password-input/types.js +0 -5
  216. package/progress-bar/ProgressBar.d.ts +0 -4
  217. package/progress-bar/ProgressBar.js +0 -176
  218. package/progress-bar/ProgressBar.stories.jsx +0 -93
  219. package/progress-bar/ProgressBar.test.js +0 -110
  220. package/progress-bar/types.d.ts +0 -37
  221. package/progress-bar/types.js +0 -5
  222. package/quick-nav/QuickNav.d.ts +0 -4
  223. package/quick-nav/QuickNav.js +0 -117
  224. package/quick-nav/QuickNav.stories.tsx +0 -356
  225. package/quick-nav/types.d.ts +0 -21
  226. package/quick-nav/types.js +0 -5
  227. package/radio-group/Radio.d.ts +0 -4
  228. package/radio-group/Radio.js +0 -156
  229. package/radio-group/RadioGroup.d.ts +0 -4
  230. package/radio-group/RadioGroup.js +0 -283
  231. package/radio-group/RadioGroup.stories.tsx +0 -214
  232. package/radio-group/RadioGroup.test.js +0 -722
  233. package/radio-group/types.d.ts +0 -114
  234. package/radio-group/types.js +0 -5
  235. package/resultsetTable/Icons.d.ts +0 -7
  236. package/resultsetTable/Icons.js +0 -51
  237. package/resultsetTable/ResultsetTable.d.ts +0 -4
  238. package/resultsetTable/ResultsetTable.js +0 -195
  239. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  240. package/resultsetTable/ResultsetTable.test.js +0 -325
  241. package/resultsetTable/types.d.ts +0 -67
  242. package/resultsetTable/types.js +0 -5
  243. package/select/Icons.d.ts +0 -10
  244. package/select/Icons.js +0 -93
  245. package/select/Listbox.d.ts +0 -4
  246. package/select/Listbox.js +0 -169
  247. package/select/Option.d.ts +0 -4
  248. package/select/Option.js +0 -97
  249. package/select/Select.d.ts +0 -4
  250. package/select/Select.js +0 -666
  251. package/select/Select.stories.tsx +0 -971
  252. package/select/Select.test.js +0 -2228
  253. package/select/types.d.ts +0 -210
  254. package/select/types.js +0 -5
  255. package/sidenav/Sidenav.d.ts +0 -10
  256. package/sidenav/Sidenav.js +0 -266
  257. package/sidenav/Sidenav.stories.tsx +0 -282
  258. package/sidenav/Sidenav.test.js +0 -44
  259. package/sidenav/types.d.ts +0 -73
  260. package/sidenav/types.js +0 -5
  261. package/slider/Slider.d.ts +0 -4
  262. package/slider/Slider.js +0 -342
  263. package/slider/Slider.stories.tsx +0 -240
  264. package/slider/Slider.test.js +0 -250
  265. package/slider/types.d.ts +0 -86
  266. package/slider/types.js +0 -5
  267. package/spinner/Spinner.d.ts +0 -4
  268. package/spinner/Spinner.js +0 -244
  269. package/spinner/Spinner.stories.jsx +0 -129
  270. package/spinner/Spinner.test.js +0 -64
  271. package/spinner/types.d.ts +0 -32
  272. package/spinner/types.js +0 -5
  273. package/switch/Switch.d.ts +0 -4
  274. package/switch/Switch.js +0 -262
  275. package/switch/Switch.stories.tsx +0 -171
  276. package/switch/Switch.test.js +0 -225
  277. package/switch/types.d.ts +0 -66
  278. package/switch/types.js +0 -5
  279. package/table/Table.d.ts +0 -4
  280. package/table/Table.js +0 -118
  281. package/table/Table.stories.jsx +0 -356
  282. package/table/Table.test.js +0 -26
  283. package/table/types.d.ts +0 -21
  284. package/table/types.js +0 -5
  285. package/tabs/Tab.d.ts +0 -4
  286. package/tabs/Tab.js +0 -133
  287. package/tabs/Tabs.d.ts +0 -4
  288. package/tabs/Tabs.js +0 -465
  289. package/tabs/Tabs.stories.tsx +0 -226
  290. package/tabs/Tabs.test.js +0 -350
  291. package/tabs/types.d.ts +0 -92
  292. package/tabs/types.js +0 -5
  293. package/tag/Tag.d.ts +0 -4
  294. package/tag/Tag.js +0 -181
  295. package/tag/Tag.stories.tsx +0 -155
  296. package/tag/Tag.test.js +0 -60
  297. package/tag/types.d.ts +0 -69
  298. package/tag/types.js +0 -5
  299. package/text-input/Icons.d.ts +0 -8
  300. package/text-input/Icons.js +0 -60
  301. package/text-input/Suggestion.d.ts +0 -4
  302. package/text-input/Suggestion.js +0 -84
  303. package/text-input/Suggestions.d.ts +0 -4
  304. package/text-input/Suggestions.js +0 -134
  305. package/text-input/TextInput.d.ts +0 -4
  306. package/text-input/TextInput.js +0 -673
  307. package/text-input/TextInput.stories.tsx +0 -569
  308. package/text-input/TextInput.test.js +0 -1723
  309. package/text-input/types.d.ts +0 -197
  310. package/text-input/types.js +0 -5
  311. package/textarea/Textarea.d.ts +0 -4
  312. package/textarea/Textarea.js +0 -277
  313. package/textarea/Textarea.stories.jsx +0 -216
  314. package/textarea/Textarea.test.js +0 -437
  315. package/textarea/types.d.ts +0 -137
  316. package/textarea/types.js +0 -5
  317. package/toggle-group/ToggleGroup.d.ts +0 -4
  318. package/toggle-group/ToggleGroup.js +0 -218
  319. package/toggle-group/ToggleGroup.stories.tsx +0 -215
  320. package/toggle-group/ToggleGroup.test.js +0 -156
  321. package/toggle-group/types.d.ts +0 -105
  322. package/toggle-group/types.js +0 -5
  323. package/typography/Typography.d.ts +0 -4
  324. package/typography/Typography.js +0 -32
  325. package/typography/Typography.stories.tsx +0 -198
  326. package/typography/types.d.ts +0 -18
  327. package/typography/types.js +0 -5
  328. package/useTheme.d.ts +0 -1235
  329. package/useTheme.js +0 -22
  330. package/useTranslatedLabels.d.ts +0 -85
  331. package/useTranslatedLabels.js +0 -20
  332. package/utils/BaseTypography.d.ts +0 -21
  333. package/utils/BaseTypography.js +0 -108
  334. package/utils/FocusLock.d.ts +0 -13
  335. package/utils/FocusLock.js +0 -139
  336. package/wizard/Wizard.d.ts +0 -4
  337. package/wizard/Wizard.js +0 -285
  338. package/wizard/Wizard.stories.tsx +0 -253
  339. package/wizard/Wizard.test.js +0 -141
  340. package/wizard/types.d.ts +0 -64
  341. package/wizard/types.js +0 -5
@@ -1,300 +0,0 @@
1
- import React from "react";
2
- import DxcResultsetTable from "./ResultsetTable";
3
- import DxcButton from "../button/Button";
4
- import Title from "../../.storybook/components/Title";
5
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
- import { userEvent, within } from "@storybook/testing-library";
7
- import styled from "styled-components";
8
-
9
- export default {
10
- title: "Resultset Table",
11
- component: DxcResultsetTable,
12
- };
13
-
14
- const deleteIcon = (
15
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
16
- <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
17
- <path d="M0 0h24v24H0z" fill="none" />
18
- </svg>
19
- );
20
-
21
- const columns = [{ displayValue: "Id" }, { displayValue: "Name" }, { displayValue: "City" }];
22
-
23
- const rows = [
24
- [{ displayValue: "001" }, { displayValue: "Peter" }, { displayValue: "Miami" }],
25
- [{ displayValue: "002" }, { displayValue: "Louis" }, { displayValue: "London" }],
26
- [{ displayValue: "003" }, { displayValue: "Lana" }, { displayValue: "Amsterdam" }],
27
- [{ displayValue: "004" }, { displayValue: "Rick" }, { displayValue: "London" }],
28
- [{ displayValue: "005" }, { displayValue: "Mark" }, { displayValue: "Miami" }],
29
- [{ displayValue: "006" }, { displayValue: "Cris" }, { displayValue: "Paris" }],
30
- ];
31
-
32
- const rowsIcon = [
33
- [
34
- { displayValue: "001", sortValue: "001" },
35
- { displayValue: "Peter" },
36
- { displayValue: <DxcButton icon={deleteIcon} /> },
37
- ],
38
- [{ displayValue: "002", sortValue: "002" }, { displayValue: "Louis" }, { displayValue: "" }],
39
- [
40
- { displayValue: "003", sortValue: "003" },
41
- { displayValue: "Mark" },
42
- { displayValue: <DxcButton icon={deleteIcon} /> },
43
- ],
44
- ];
45
-
46
- const columnsSortable = [
47
- { displayValue: "Id", isSortable: true },
48
- { displayValue: "Name", isSortable: true },
49
- { displayValue: "City", isSortable: false },
50
- ];
51
-
52
- const longValues = [
53
- [
54
- { displayValue: "000000000000000001", sortValue: "000000000000000001" },
55
- { displayValue: "Peter Larsson González", sortValue: "Peter" },
56
- { displayValue: "Miami: The city that never sleeps", sortValue: "Miami" },
57
- ],
58
- [
59
- { displayValue: "002", sortValue: "002" },
60
- { displayValue: "Louis", sortValue: "Louis" },
61
- { displayValue: "London", sortValue: "London" },
62
- ],
63
- [
64
- { displayValue: "003", sortValue: "003" },
65
- { displayValue: "Aida", sortValue: "Aida" },
66
- { displayValue: "Wroclaw", sortValue: "Wroclaw" },
67
- ],
68
- ];
69
-
70
- const rowsSortable = [
71
- [
72
- { displayValue: "001", sortValue: "001" },
73
- { displayValue: "Peter", sortValue: "Peter" },
74
- { displayValue: "Miami", sortValue: "Miami" },
75
- ],
76
- [
77
- { displayValue: "002", sortValue: "002" },
78
- { displayValue: "Louis", sortValue: "Louis" },
79
- { displayValue: "London", sortValue: "London" },
80
- ],
81
- [
82
- { displayValue: "003", sortValue: "003" },
83
- { displayValue: "Aida", sortValue: "Aida" },
84
- { displayValue: "Wroclaw", sortValue: "Wroclaw" },
85
- ],
86
- [
87
- { displayValue: "004", sortValue: "004" },
88
- { displayValue: "Lana", sortValue: "Lana" },
89
- { displayValue: "Amsterdam", sortValue: "Amsterdam" },
90
- ],
91
- ];
92
-
93
- const longColumns = [
94
- { displayValue: "Column1" },
95
- { displayValue: "Column2" },
96
- { displayValue: "Column3" },
97
- { displayValue: "Column4" },
98
- { displayValue: "Column5" },
99
- { displayValue: "Column6" },
100
- { displayValue: "Column7" },
101
- { displayValue: "Column8" },
102
- { displayValue: "Column9" },
103
- { displayValue: "Column10" },
104
- { displayValue: "Column11" },
105
- { displayValue: "Column12" },
106
- { displayValue: "Column13" },
107
- { displayValue: "Column14" },
108
- { displayValue: "Column15" },
109
- { displayValue: "Column16" },
110
- { displayValue: "Column17" },
111
- { displayValue: "Column18" },
112
- { displayValue: "Column19" },
113
- { displayValue: "Column20" },
114
- ];
115
-
116
- const longRows = [
117
- [
118
- { displayValue: "001", sortValue: "001" },
119
- { displayValue: "Peter", sortValue: "Peter" },
120
- { displayValue: "Miami", sortValue: "Miami" },
121
- { displayValue: "001", sortValue: "001" },
122
- { displayValue: "Peter", sortValue: "Peter" },
123
- { displayValue: "Miami", sortValue: "Miami" },
124
- { displayValue: "Miami", sortValue: "Miami" },
125
- { displayValue: "001", sortValue: "001" },
126
- { displayValue: "Peter", sortValue: "Peter" },
127
- { displayValue: "Miami", sortValue: "Miami" },
128
- { displayValue: "002", sortValue: "002" },
129
- { displayValue: "Louis", sortValue: "Louis" },
130
- { displayValue: "London", sortValue: "London" },
131
- { displayValue: "002", sortValue: "002" },
132
- { displayValue: "Louis", sortValue: "Louis" },
133
- { displayValue: "London", sortValue: "London" },
134
- { displayValue: "002", sortValue: "002" },
135
- { displayValue: "Louis", sortValue: "Louis" },
136
- { displayValue: "London", sortValue: "London" },
137
- { displayValue: "London", sortValue: "London" },
138
- ],
139
- [
140
- { displayValue: "002", sortValue: "002" },
141
- { displayValue: "Louis", sortValue: "Louis" },
142
- { displayValue: "London", sortValue: "London" },
143
- { displayValue: "002", sortValue: "002" },
144
- { displayValue: "Louis", sortValue: "Louis" },
145
- { displayValue: "London", sortValue: "London" },
146
- { displayValue: "002", sortValue: "002" },
147
- { displayValue: "Louis", sortValue: "Louis" },
148
- { displayValue: "London", sortValue: "London" },
149
- { displayValue: "London", sortValue: "London" },
150
- { displayValue: "002", sortValue: "002" },
151
- { displayValue: "Louis", sortValue: "Louis" },
152
- { displayValue: "London", sortValue: "London" },
153
- { displayValue: "002", sortValue: "002" },
154
- { displayValue: "Louis", sortValue: "Louis" },
155
- { displayValue: "London", sortValue: "London" },
156
- { displayValue: "002", sortValue: "002" },
157
- { displayValue: "Louis", sortValue: "Louis" },
158
- { displayValue: "London", sortValue: "London" },
159
- { displayValue: "London", sortValue: "London" },
160
- ],
161
- [
162
- { displayValue: "002", sortValue: "002" },
163
- { displayValue: "Louis", sortValue: "Louis" },
164
- { displayValue: "London", sortValue: "London" },
165
- { displayValue: "002", sortValue: "002" },
166
- { displayValue: "Louis", sortValue: "Louis" },
167
- { displayValue: "London", sortValue: "London" },
168
- { displayValue: "002", sortValue: "002" },
169
- { displayValue: "Louis", sortValue: "Louis" },
170
- { displayValue: "London", sortValue: "London" },
171
- { displayValue: "London", sortValue: "London" },
172
- { displayValue: "002", sortValue: "002" },
173
- { displayValue: "Louis", sortValue: "Louis" },
174
- { displayValue: "London", sortValue: "London" },
175
- { displayValue: "002", sortValue: "002" },
176
- { displayValue: "Louis", sortValue: "Louis" },
177
- { displayValue: "London", sortValue: "London" },
178
- { displayValue: "002", sortValue: "002" },
179
- { displayValue: "Louis", sortValue: "Louis" },
180
- { displayValue: "London", sortValue: "London" },
181
- { displayValue: "London", sortValue: "London" },
182
- ],
183
- ];
184
-
185
- export const Chromatic = () => (
186
- <>
187
- <ExampleContainer>
188
- <Title title="Sortable table" theme="light" level={4} />
189
- <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
190
- </ExampleContainer>
191
- <ExampleContainer>
192
- <Title title="With action" theme="light" level={4} />
193
- <DxcResultsetTable columns={columns} rows={rowsIcon} />
194
- </ExampleContainer>
195
- <ExampleContainer>
196
- <Title title="With items per page option" theme="light" level={4} />
197
- <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} itemsPerPageOptions={[2, 3]} />
198
- </ExampleContainer>
199
- <ExampleContainer>
200
- <Title title="Scroll resultset table" theme="light" level={4} />
201
- <DxcResultsetTable columns={longColumns} rows={longRows} />
202
- </ExampleContainer>
203
- <ExampleContainer>
204
- <SmallContainer>
205
- <Title title="Small container and text overflow" theme="light" level={4} />
206
- <DxcResultsetTable columns={columnsSortable} rows={longValues} />
207
- </SmallContainer>
208
- </ExampleContainer>
209
- <Title title="Margins" theme="light" level={2} />
210
- <ExampleContainer>
211
- <Title title="Xxsmall" theme="light" level={4} />
212
- <DxcResultsetTable columns={columns} rows={rows} margin={"xxsmall"} />
213
- </ExampleContainer>
214
- <ExampleContainer>
215
- <Title title="Xsmall" theme="light" level={4} />
216
- <DxcResultsetTable columns={columns} rows={rows} margin={"xsmall"} />
217
- </ExampleContainer>
218
- <ExampleContainer>
219
- <Title title="Small" theme="light" level={4} />
220
- <DxcResultsetTable columns={columns} rows={rows} margin={"small"} />
221
- </ExampleContainer>
222
- <ExampleContainer>
223
- <Title title="Medium" theme="light" level={4} />
224
- <DxcResultsetTable columns={columns} rows={rows} margin={"medium"} />
225
- </ExampleContainer>
226
- <ExampleContainer>
227
- <Title title="Large" theme="light" level={4} />
228
- <DxcResultsetTable columns={columns} rows={rows} margin={"large"} />
229
- </ExampleContainer>
230
- <ExampleContainer>
231
- <Title title="Xlarge" theme="light" level={4} />
232
- <DxcResultsetTable columns={columns} rows={rows} margin={"xlarge"} />
233
- </ExampleContainer>
234
- <ExampleContainer expanded>
235
- <Title title="Xxlarge" theme="light" level={4} />
236
- <DxcResultsetTable columns={columns} rows={rows} margin={"xxlarge"} />
237
- </ExampleContainer>
238
- </>
239
- );
240
-
241
- const SmallContainer = styled.div`
242
- width: 500px;
243
- `;
244
-
245
- const ResultsetTableAsc = () => (
246
- <ExampleContainer>
247
- <Title title="Ascendant sorting" theme="light" level={4} />
248
- <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
249
- </ExampleContainer>
250
- );
251
-
252
- export const AscendentSorting = ResultsetTableAsc.bind({});
253
- AscendentSorting.play = async ({ canvasElement }) => {
254
- const canvas = within(canvasElement);
255
- const idHeader = canvas.getAllByRole("button")[0];
256
- await userEvent.click(idHeader);
257
- };
258
-
259
- const ResultsetTableDesc = () => (
260
- <ExampleContainer>
261
- <Title title="Descendant sorting" theme="light" level={4} />
262
- <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
263
- </ExampleContainer>
264
- );
265
-
266
- export const DescendantSorting = ResultsetTableDesc.bind({});
267
- DescendantSorting.play = async ({ canvasElement }) => {
268
- const canvas = within(canvasElement);
269
- const nameHeader = canvas.getAllByRole("button")[1];
270
- await userEvent.click(nameHeader);
271
- await userEvent.click(nameHeader);
272
- };
273
-
274
- const ResultsetTableMiddle = () => (
275
- <ExampleContainer>
276
- <Title title="Middle page" theme="light" level={4} />
277
- <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
278
- </ExampleContainer>
279
- );
280
-
281
- export const MiddlePage = ResultsetTableMiddle.bind({});
282
- MiddlePage.play = async ({ canvasElement }) => {
283
- const canvas = within(canvasElement);
284
- const nextButton = canvas.getAllByRole("button")[2];
285
- await userEvent.click(nextButton);
286
- };
287
-
288
- const ResultsetTableLast = () => (
289
- <ExampleContainer>
290
- <Title title="Last page" theme="light" level={4} />
291
- <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
292
- </ExampleContainer>
293
- );
294
-
295
- export const LastPage = ResultsetTableLast.bind({});
296
- LastPage.play = async ({ canvasElement }) => {
297
- const canvas = within(canvasElement);
298
- const nextButton = canvas.getAllByRole("button")[3];
299
- await userEvent.click(nextButton);
300
- };
@@ -1,325 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
6
-
7
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
8
-
9
- var _react = _interopRequireDefault(require("react"));
10
-
11
- var _react2 = require("@testing-library/react");
12
-
13
- var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
14
-
15
- var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable.tsx"));
16
-
17
- // Mocking DOMRect for Radix Primitive Popover
18
- global.globalThis = global;
19
- global.DOMRect = {
20
- fromRect: function fromRect() {
21
- return {
22
- top: 0,
23
- left: 0,
24
- bottom: 0,
25
- right: 0,
26
- width: 0,
27
- height: 0
28
- };
29
- }
30
- };
31
-
32
- global.ResizeObserver = /*#__PURE__*/function () {
33
- function ResizeObserver() {
34
- (0, _classCallCheck2["default"])(this, ResizeObserver);
35
- }
36
-
37
- (0, _createClass2["default"])(ResizeObserver, [{
38
- key: "observe",
39
- value: function observe() {}
40
- }, {
41
- key: "unobserve",
42
- value: function unobserve() {}
43
- }, {
44
- key: "disconnect",
45
- value: function disconnect() {}
46
- }]);
47
- return ResizeObserver;
48
- }();
49
-
50
- var columns = [{
51
- displayValue: "Id",
52
- isSortable: false
53
- }, {
54
- displayValue: "Name",
55
- isSortable: true
56
- }, {
57
- displayValue: "City",
58
- isSortable: false
59
- }];
60
- var rows = [[{
61
- displayValue: "001",
62
- sortValue: "001"
63
- }, {
64
- displayValue: "Peter",
65
- sortValue: "Peter"
66
- }, {
67
- displayValue: "Oviedo",
68
- sortValue: "Oviedo"
69
- }], [{
70
- displayValue: "002",
71
- sortValue: "002"
72
- }, {
73
- displayValue: "Louis",
74
- sortValue: "Louis"
75
- }, {
76
- displayValue: "Oviedo",
77
- sortValue: "Oviedo"
78
- }], [{
79
- displayValue: "003",
80
- sortValue: "003"
81
- }, {
82
- displayValue: "Lana",
83
- sortValue: "Lana"
84
- }, {
85
- displayValue: "Albacete",
86
- sortValue: "Albacete"
87
- }], [{
88
- displayValue: "004",
89
- sortValue: "004"
90
- }, {
91
- displayValue: "Rick",
92
- sortValue: "Rick"
93
- }, {
94
- displayValue: "Albacete",
95
- sortValue: "Albacete"
96
- }], [{
97
- displayValue: "005",
98
- sortValue: "005"
99
- }, {
100
- displayValue: "Mark",
101
- sortValue: "Mark"
102
- }, {
103
- displayValue: "Madrid",
104
- sortValue: "Madrid"
105
- }], [{
106
- displayValue: "006",
107
- sortValue: "006"
108
- }, {
109
- displayValue: "Cris",
110
- sortValue: "Cris"
111
- }, {
112
- displayValue: "Barcelona",
113
- sortValue: "Barcelona"
114
- }], [{
115
- displayValue: "007",
116
- sortValue: "007"
117
- }, {
118
- displayValue: "Susan",
119
- sortValue: "Susan"
120
- }, {
121
- displayValue: "Madrid",
122
- sortValue: "Madrid"
123
- }], [{
124
- displayValue: "008",
125
- sortValue: "008"
126
- }, {
127
- displayValue: "Tina",
128
- sortValue: "Tina"
129
- }, {
130
- displayValue: "Barcelona",
131
- sortValue: "Barcelona"
132
- }], [{
133
- displayValue: "009",
134
- sortValue: "009"
135
- }, {
136
- displayValue: "Kevin",
137
- sortValue: "Kevin"
138
- }, {
139
- displayValue: "Oviedo",
140
- sortValue: "Oviedo"
141
- }], [{
142
- displayValue: "010",
143
- sortValue: "010"
144
- }, {
145
- displayValue: "Cosmin",
146
- sortValue: "Cosmin"
147
- }, {
148
- displayValue: "Barcelona",
149
- sortValue: "Barcelona"
150
- }]];
151
- var rows2 = [[{
152
- displayValue: "546",
153
- sortValue: "465"
154
- }, {
155
- displayValue: "OtherValue",
156
- sortValue: "OtherValue"
157
- }, {
158
- displayValue: "OtherValue",
159
- sortValue: "OtherValue"
160
- }], [{
161
- displayValue: "978",
162
- sortValue: "465"
163
- }, {
164
- displayValue: "OtherValue",
165
- sortValue: "OtherValue"
166
- }, {
167
- displayValue: "OtherValue",
168
- sortValue: "OtherValue"
169
- }, {
170
- displayValue: ""
171
- }], [{
172
- displayValue: "678",
173
- sortValue: "344"
174
- }, {
175
- displayValue: "OtherValue",
176
- sortValue: "OtherValue"
177
- }, {
178
- displayValue: "OtherValue",
179
- sortValue: "OtherValue"
180
- }]];
181
- describe("Resultset table component tests", function () {
182
- test("Resultset table rendered correctly", function () {
183
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
184
- columns: columns,
185
- rows: rows,
186
- itemsPerPage: 3
187
- })),
188
- getByText = _render.getByText;
189
-
190
- expect(getByText("Peter")).toBeTruthy();
191
- });
192
- test("Resultset table shows as many rows as itemsPerPage", function () {
193
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
194
- columns: columns,
195
- rows: rows,
196
- itemsPerPage: 3
197
- })),
198
- getAllByRole = _render2.getAllByRole;
199
-
200
- expect(getAllByRole("row").length - 1).toEqual(3);
201
- });
202
- test("Resultset table shows rows on second page", function () {
203
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
204
- columns: columns,
205
- rows: rows,
206
- itemsPerPage: 3
207
- })),
208
- getByText = _render3.getByText,
209
- getAllByRole = _render3.getAllByRole;
210
-
211
- expect(getByText("Peter")).toBeTruthy();
212
- expect(getByText("Louis")).toBeTruthy();
213
- expect(getByText("Lana")).toBeTruthy();
214
- expect(getAllByRole("row").length - 1).toEqual(3);
215
- var nextButton = getAllByRole("button")[3];
216
-
217
- _react2.fireEvent.click(nextButton);
218
-
219
- expect(getByText("4 to 6 of 10")).toBeTruthy();
220
- expect(getByText("Rick")).toBeTruthy();
221
- expect(getByText("Mark")).toBeTruthy();
222
- expect(getByText("Cris")).toBeTruthy();
223
- expect(getAllByRole("row").length - 1).toEqual(3);
224
- });
225
- test("Resultset table goToPage works as expected", function () {
226
- window.HTMLElement.prototype.scrollIntoView = function () {};
227
-
228
- window.HTMLElement.prototype.scrollTo = function () {};
229
-
230
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
231
- columns: columns,
232
- showGoToPage: true,
233
- rows: rows,
234
- itemsPerPage: 3
235
- })),
236
- getByText = _render4.getByText,
237
- getAllByRole = _render4.getAllByRole;
238
-
239
- expect(getByText("Peter")).toBeTruthy();
240
- expect(getByText("Louis")).toBeTruthy();
241
- expect(getByText("Lana")).toBeTruthy();
242
- expect(getAllByRole("row").length - 1).toEqual(3);
243
- var goToPageSelect = getAllByRole("button")[3];
244
-
245
- _userEvent["default"].click(goToPageSelect);
246
-
247
- var goToPageOption = getByText("2");
248
-
249
- _userEvent["default"].click(goToPageOption);
250
-
251
- expect(getByText("4 to 6 of 10")).toBeTruthy();
252
- expect(getByText("Rick")).toBeTruthy();
253
- expect(getByText("Mark")).toBeTruthy();
254
- expect(getByText("Cris")).toBeTruthy();
255
- expect(getAllByRole("row").length - 1).toEqual(3);
256
- });
257
- test("Resultset table going to the last page shows only one row", function () {
258
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
259
- columns: columns,
260
- rows: rows,
261
- itemsPerPage: 3
262
- })),
263
- getByText = _render5.getByText,
264
- getAllByRole = _render5.getAllByRole;
265
-
266
- var lastButton = getAllByRole("button")[4];
267
-
268
- _react2.fireEvent.click(lastButton);
269
-
270
- expect(getByText("10 to 10 of 10")).toBeTruthy();
271
- expect(getAllByRole("row")).toHaveLength(2);
272
- expect(getByText("Cosmin")).toBeTruthy();
273
- });
274
- test("Resultset table sort rows by column", function () {
275
- var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
276
- columns: columns,
277
- rows: rows,
278
- itemsPerPage: 3
279
- }));
280
- expect(component.queryByText("Peter")).toBeTruthy();
281
-
282
- _react2.fireEvent.click(component.queryByText("Name"));
283
-
284
- expect(component.queryByText("Tina")).not.toBeTruthy();
285
- expect(component.queryByText("Cosmin")).toBeTruthy();
286
-
287
- _react2.fireEvent.click(component.queryByText("Name"));
288
-
289
- expect(component.queryByText("Tina")).toBeTruthy();
290
- expect(component.queryByText("Cosmin")).not.toBeTruthy();
291
- });
292
- test("Resultset table change rows should go to first page", function () {
293
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
294
- columns: columns,
295
- rows: rows,
296
- itemsPerPage: 3
297
- })),
298
- queryByText = _render6.queryByText,
299
- rerender = _render6.rerender;
300
-
301
- expect(queryByText("Peter")).toBeTruthy();
302
- rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
303
- columns: columns,
304
- rows: rows2,
305
- itemsPerPage: 3
306
- }));
307
- expect(queryByText("1 to 3 of 3")).toBeTruthy();
308
- });
309
- test("Resultset table change itemsPerPage should go to first page", function () {
310
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
311
- columns: columns,
312
- rows: rows,
313
- itemsPerPage: 3,
314
- itemsPerPageOptions: [2, 3]
315
- })),
316
- getAllByRole = _render7.getAllByRole;
317
-
318
- var lastButton = getAllByRole("button")[4];
319
- expect(getAllByRole("row").length - 1).toEqual(3);
320
-
321
- _react2.fireEvent.click(lastButton);
322
-
323
- expect(getAllByRole("row").length - 1).toEqual(1);
324
- });
325
- });
@@ -1,67 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- export declare type Column = {
10
- /**
11
- * Column display value.
12
- */
13
- displayValue: React.ReactNode;
14
- /**
15
- * Boolean value to indicate whether the column is sortable or not.
16
- */
17
- isSortable?: boolean;
18
- };
19
- declare type Row = {
20
- /**
21
- * Value to be displayed in the cell.
22
- */
23
- displayValue: React.ReactNode;
24
- /**
25
- * Value to be used when sorting the table by that
26
- * column. If not indicated displayValue will be used for sorting.
27
- */
28
- sortValue?: string;
29
- };
30
- declare type Props = {
31
- /**
32
- * An array of objects representing the columns of the table.
33
- */
34
- columns: Column[];
35
- /**
36
- * An array of objects representing the rows of the table, you will have
37
- * as many objects as columns in the table.
38
- */
39
- rows: Row[][];
40
- /**
41
- * If true, a select component for navigation between pages will be displayed.
42
- */
43
- showGoToPage?: boolean;
44
- /**
45
- * Number of items per page.
46
- */
47
- itemsPerPage?: number;
48
- /**
49
- * An array of numbers representing the items per page options.
50
- */
51
- itemsPerPageOptions?: number[];
52
- /**
53
- * This function will be called when the user selects an item per page
54
- * option. The value selected will be passed as a parameter.
55
- */
56
- itemsPerPageFunction?: (newValue: number) => void;
57
- /**
58
- * Size of the margin to be applied to the component. You can pass an object with 'top',
59
- * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
60
- */
61
- margin?: Space | Margin;
62
- /**
63
- * Value of the tabindex attribute given to the sortable icon.
64
- */
65
- tabIndex?: number;
66
- };
67
- export default Props;
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });