@dxc-technology/halstack-react 0.0.0-52b2977 → 0.0.0-52f9f99

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 (336) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6683 -0
  3. package/dist/index.d.ts +6683 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +65 -61
  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/header/Header.d.ts +0 -8
  141. package/header/Header.js +0 -303
  142. package/header/Header.stories.tsx +0 -315
  143. package/header/Header.test.js +0 -79
  144. package/header/Icons.d.ts +0 -2
  145. package/header/Icons.js +0 -34
  146. package/header/types.d.ts +0 -48
  147. package/header/types.js +0 -5
  148. package/heading/Heading.d.ts +0 -4
  149. package/heading/Heading.js +0 -159
  150. package/heading/Heading.stories.tsx +0 -54
  151. package/heading/Heading.test.js +0 -186
  152. package/heading/types.d.ts +0 -33
  153. package/heading/types.js +0 -5
  154. package/inset/Inset.d.ts +0 -3
  155. package/inset/Inset.js +0 -51
  156. package/inset/Inset.stories.tsx +0 -229
  157. package/inset/types.d.ts +0 -37
  158. package/inset/types.js +0 -5
  159. package/layout/ApplicationLayout.d.ts +0 -20
  160. package/layout/ApplicationLayout.js +0 -171
  161. package/layout/ApplicationLayout.stories.tsx +0 -162
  162. package/layout/Icons.d.ts +0 -5
  163. package/layout/Icons.js +0 -66
  164. package/layout/SidenavContext.d.ts +0 -5
  165. package/layout/SidenavContext.js +0 -19
  166. package/layout/types.d.ts +0 -42
  167. package/layout/types.js +0 -5
  168. package/link/Link.d.ts +0 -4
  169. package/link/Link.js +0 -136
  170. package/link/Link.stories.tsx +0 -253
  171. package/link/Link.test.js +0 -81
  172. package/link/types.d.ts +0 -54
  173. package/link/types.js +0 -5
  174. package/main.d.ts +0 -44
  175. package/main.js +0 -369
  176. package/nav-tabs/NavTabs.d.ts +0 -8
  177. package/nav-tabs/NavTabs.js +0 -125
  178. package/nav-tabs/NavTabs.stories.tsx +0 -260
  179. package/nav-tabs/NavTabs.test.js +0 -82
  180. package/nav-tabs/Tab.d.ts +0 -4
  181. package/nav-tabs/Tab.js +0 -150
  182. package/nav-tabs/types.d.ts +0 -53
  183. package/nav-tabs/types.js +0 -5
  184. package/number-input/NumberInput.d.ts +0 -4
  185. package/number-input/NumberInput.js +0 -76
  186. package/number-input/NumberInput.stories.tsx +0 -115
  187. package/number-input/NumberInput.test.js +0 -542
  188. package/number-input/NumberInputContext.d.ts +0 -4
  189. package/number-input/NumberInputContext.js +0 -19
  190. package/number-input/numberInputContextTypes.d.ts +0 -19
  191. package/number-input/numberInputContextTypes.js +0 -5
  192. package/number-input/types.d.ts +0 -124
  193. package/number-input/types.js +0 -5
  194. package/paginator/Icons.d.ts +0 -5
  195. package/paginator/Icons.js +0 -54
  196. package/paginator/Paginator.d.ts +0 -4
  197. package/paginator/Paginator.js +0 -163
  198. package/paginator/Paginator.stories.tsx +0 -87
  199. package/paginator/Paginator.test.js +0 -305
  200. package/paginator/types.d.ts +0 -38
  201. package/paginator/types.js +0 -5
  202. package/paragraph/Paragraph.d.ts +0 -5
  203. package/paragraph/Paragraph.js +0 -38
  204. package/paragraph/Paragraph.stories.tsx +0 -44
  205. package/password-input/PasswordInput.d.ts +0 -4
  206. package/password-input/PasswordInput.js +0 -166
  207. package/password-input/PasswordInput.stories.tsx +0 -131
  208. package/password-input/PasswordInput.test.js +0 -181
  209. package/password-input/types.d.ts +0 -110
  210. package/password-input/types.js +0 -5
  211. package/progress-bar/ProgressBar.d.ts +0 -4
  212. package/progress-bar/ProgressBar.js +0 -176
  213. package/progress-bar/ProgressBar.stories.jsx +0 -93
  214. package/progress-bar/ProgressBar.test.js +0 -110
  215. package/progress-bar/types.d.ts +0 -37
  216. package/progress-bar/types.js +0 -5
  217. package/quick-nav/QuickNav.d.ts +0 -4
  218. package/quick-nav/QuickNav.js +0 -117
  219. package/quick-nav/QuickNav.stories.tsx +0 -356
  220. package/quick-nav/types.d.ts +0 -21
  221. package/quick-nav/types.js +0 -5
  222. package/radio-group/Radio.d.ts +0 -4
  223. package/radio-group/Radio.js +0 -156
  224. package/radio-group/RadioGroup.d.ts +0 -4
  225. package/radio-group/RadioGroup.js +0 -283
  226. package/radio-group/RadioGroup.stories.tsx +0 -214
  227. package/radio-group/RadioGroup.test.js +0 -722
  228. package/radio-group/types.d.ts +0 -114
  229. package/radio-group/types.js +0 -5
  230. package/resultsetTable/Icons.d.ts +0 -7
  231. package/resultsetTable/Icons.js +0 -51
  232. package/resultsetTable/ResultsetTable.d.ts +0 -4
  233. package/resultsetTable/ResultsetTable.js +0 -195
  234. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  235. package/resultsetTable/ResultsetTable.test.js +0 -325
  236. package/resultsetTable/types.d.ts +0 -67
  237. package/resultsetTable/types.js +0 -5
  238. package/select/Icons.d.ts +0 -10
  239. package/select/Icons.js +0 -93
  240. package/select/Listbox.d.ts +0 -4
  241. package/select/Listbox.js +0 -169
  242. package/select/Option.d.ts +0 -4
  243. package/select/Option.js +0 -97
  244. package/select/Select.d.ts +0 -4
  245. package/select/Select.js +0 -666
  246. package/select/Select.stories.tsx +0 -971
  247. package/select/Select.test.js +0 -2228
  248. package/select/types.d.ts +0 -210
  249. package/select/types.js +0 -5
  250. package/sidenav/Sidenav.d.ts +0 -10
  251. package/sidenav/Sidenav.js +0 -266
  252. package/sidenav/Sidenav.stories.tsx +0 -282
  253. package/sidenav/Sidenav.test.js +0 -44
  254. package/sidenav/types.d.ts +0 -73
  255. package/sidenav/types.js +0 -5
  256. package/slider/Slider.d.ts +0 -4
  257. package/slider/Slider.js +0 -342
  258. package/slider/Slider.stories.tsx +0 -240
  259. package/slider/Slider.test.js +0 -250
  260. package/slider/types.d.ts +0 -86
  261. package/slider/types.js +0 -5
  262. package/spinner/Spinner.d.ts +0 -4
  263. package/spinner/Spinner.js +0 -244
  264. package/spinner/Spinner.stories.jsx +0 -129
  265. package/spinner/Spinner.test.js +0 -64
  266. package/spinner/types.d.ts +0 -32
  267. package/spinner/types.js +0 -5
  268. package/switch/Switch.d.ts +0 -4
  269. package/switch/Switch.js +0 -262
  270. package/switch/Switch.stories.tsx +0 -171
  271. package/switch/Switch.test.js +0 -225
  272. package/switch/types.d.ts +0 -66
  273. package/switch/types.js +0 -5
  274. package/table/Table.d.ts +0 -4
  275. package/table/Table.js +0 -118
  276. package/table/Table.stories.jsx +0 -356
  277. package/table/Table.test.js +0 -26
  278. package/table/types.d.ts +0 -21
  279. package/table/types.js +0 -5
  280. package/tabs/Tab.d.ts +0 -4
  281. package/tabs/Tab.js +0 -133
  282. package/tabs/Tabs.d.ts +0 -4
  283. package/tabs/Tabs.js +0 -465
  284. package/tabs/Tabs.stories.tsx +0 -226
  285. package/tabs/Tabs.test.js +0 -350
  286. package/tabs/types.d.ts +0 -92
  287. package/tabs/types.js +0 -5
  288. package/tag/Tag.d.ts +0 -4
  289. package/tag/Tag.js +0 -181
  290. package/tag/Tag.stories.tsx +0 -155
  291. package/tag/Tag.test.js +0 -60
  292. package/tag/types.d.ts +0 -69
  293. package/tag/types.js +0 -5
  294. package/text-input/Icons.d.ts +0 -8
  295. package/text-input/Icons.js +0 -60
  296. package/text-input/Suggestion.d.ts +0 -4
  297. package/text-input/Suggestion.js +0 -84
  298. package/text-input/Suggestions.d.ts +0 -4
  299. package/text-input/Suggestions.js +0 -134
  300. package/text-input/TextInput.d.ts +0 -4
  301. package/text-input/TextInput.js +0 -673
  302. package/text-input/TextInput.stories.tsx +0 -569
  303. package/text-input/TextInput.test.js +0 -1723
  304. package/text-input/types.d.ts +0 -197
  305. package/text-input/types.js +0 -5
  306. package/textarea/Textarea.d.ts +0 -4
  307. package/textarea/Textarea.js +0 -277
  308. package/textarea/Textarea.stories.jsx +0 -216
  309. package/textarea/Textarea.test.js +0 -437
  310. package/textarea/types.d.ts +0 -137
  311. package/textarea/types.js +0 -5
  312. package/toggle-group/ToggleGroup.d.ts +0 -4
  313. package/toggle-group/ToggleGroup.js +0 -218
  314. package/toggle-group/ToggleGroup.stories.tsx +0 -215
  315. package/toggle-group/ToggleGroup.test.js +0 -156
  316. package/toggle-group/types.d.ts +0 -105
  317. package/toggle-group/types.js +0 -5
  318. package/typography/Typography.d.ts +0 -4
  319. package/typography/Typography.js +0 -32
  320. package/typography/Typography.stories.tsx +0 -198
  321. package/typography/types.d.ts +0 -18
  322. package/typography/types.js +0 -5
  323. package/useTheme.d.ts +0 -1235
  324. package/useTheme.js +0 -22
  325. package/useTranslatedLabels.d.ts +0 -85
  326. package/useTranslatedLabels.js +0 -20
  327. package/utils/BaseTypography.d.ts +0 -21
  328. package/utils/BaseTypography.js +0 -108
  329. package/utils/FocusLock.d.ts +0 -13
  330. package/utils/FocusLock.js +0 -139
  331. package/wizard/Wizard.d.ts +0 -4
  332. package/wizard/Wizard.js +0 -285
  333. package/wizard/Wizard.stories.tsx +0 -253
  334. package/wizard/Wizard.test.js +0 -141
  335. package/wizard/types.d.ts +0 -64
  336. 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
- });