@dxc-technology/halstack-react 0.0.0-5aa300b → 0.0.0-5aaca4c

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 (328) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +3931 -0
  3. package/dist/index.d.ts +3931 -0
  4. package/dist/index.js +14176 -0
  5. package/dist/index.mjs +14088 -0
  6. package/package.json +85 -67
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -294
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -239
  13. package/accordion/Accordion.stories.tsx +0 -346
  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 -293
  25. package/alert/Alert.stories.tsx +0 -170
  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 -116
  40. package/box/Box.stories.tsx +0 -132
  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 -334
  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 -161
  57. package/card/Card.stories.tsx +0 -201
  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 -208
  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 -149
  70. package/chip/Chip.stories.tsx +0 -151
  71. package/chip/Chip.test.js +0 -56
  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.js +0 -22
  86. package/common/variables.js +0 -1512
  87. package/date-input/Calendar.d.ts +0 -4
  88. package/date-input/Calendar.js +0 -258
  89. package/date-input/DateInput.d.ts +0 -4
  90. package/date-input/DateInput.js +0 -227
  91. package/date-input/DateInput.stories.tsx +0 -151
  92. package/date-input/DateInput.test.js +0 -752
  93. package/date-input/DatePicker.d.ts +0 -4
  94. package/date-input/DatePicker.js +0 -160
  95. package/date-input/YearPicker.d.ts +0 -4
  96. package/date-input/YearPicker.js +0 -115
  97. package/date-input/types.d.ts +0 -160
  98. package/date-input/types.js +0 -5
  99. package/dialog/Dialog.d.ts +0 -4
  100. package/dialog/Dialog.js +0 -162
  101. package/dialog/Dialog.stories.tsx +0 -267
  102. package/dialog/Dialog.test.js +0 -70
  103. package/dialog/types.d.ts +0 -44
  104. package/dialog/types.js +0 -5
  105. package/dropdown/Dropdown.d.ts +0 -4
  106. package/dropdown/Dropdown.js +0 -389
  107. package/dropdown/Dropdown.stories.tsx +0 -320
  108. package/dropdown/Dropdown.test.js +0 -585
  109. package/dropdown/DropdownMenu.d.ts +0 -4
  110. package/dropdown/DropdownMenu.js +0 -80
  111. package/dropdown/DropdownMenuItem.d.ts +0 -4
  112. package/dropdown/DropdownMenuItem.js +0 -92
  113. package/dropdown/types.d.ts +0 -100
  114. package/dropdown/types.js +0 -5
  115. package/file-input/FileInput.d.ts +0 -4
  116. package/file-input/FileInput.js +0 -551
  117. package/file-input/FileInput.stories.tsx +0 -535
  118. package/file-input/FileInput.test.js +0 -498
  119. package/file-input/FileItem.d.ts +0 -4
  120. package/file-input/FileItem.js +0 -161
  121. package/file-input/types.d.ts +0 -129
  122. package/file-input/types.js +0 -5
  123. package/flex/Flex.d.ts +0 -4
  124. package/flex/Flex.js +0 -69
  125. package/flex/Flex.stories.tsx +0 -103
  126. package/flex/types.d.ts +0 -32
  127. package/flex/types.js +0 -5
  128. package/footer/Footer.d.ts +0 -4
  129. package/footer/Footer.js +0 -185
  130. package/footer/Footer.stories.tsx +0 -137
  131. package/footer/Footer.test.js +0 -109
  132. package/footer/Icons.d.ts +0 -2
  133. package/footer/Icons.js +0 -77
  134. package/footer/types.d.ts +0 -66
  135. package/footer/types.js +0 -5
  136. package/header/Header.d.ts +0 -7
  137. package/header/Header.js +0 -305
  138. package/header/Header.stories.tsx +0 -172
  139. package/header/Header.test.js +0 -79
  140. package/header/Icons.d.ts +0 -2
  141. package/header/Icons.js +0 -34
  142. package/header/types.d.ts +0 -48
  143. package/header/types.js +0 -5
  144. package/heading/Heading.d.ts +0 -4
  145. package/heading/Heading.js +0 -159
  146. package/heading/Heading.stories.tsx +0 -54
  147. package/heading/Heading.test.js +0 -186
  148. package/heading/types.d.ts +0 -33
  149. package/heading/types.js +0 -5
  150. package/inset/Inset.d.ts +0 -3
  151. package/inset/Inset.js +0 -51
  152. package/inset/Inset.stories.tsx +0 -229
  153. package/inset/types.d.ts +0 -37
  154. package/inset/types.js +0 -5
  155. package/layout/ApplicationLayout.d.ts +0 -20
  156. package/layout/ApplicationLayout.js +0 -171
  157. package/layout/ApplicationLayout.stories.tsx +0 -162
  158. package/layout/Icons.d.ts +0 -5
  159. package/layout/Icons.js +0 -66
  160. package/layout/SidenavContext.d.ts +0 -5
  161. package/layout/SidenavContext.js +0 -19
  162. package/layout/types.d.ts +0 -42
  163. package/layout/types.js +0 -5
  164. package/link/Link.d.ts +0 -4
  165. package/link/Link.js +0 -136
  166. package/link/Link.stories.tsx +0 -193
  167. package/link/Link.test.js +0 -83
  168. package/link/types.d.ts +0 -54
  169. package/link/types.js +0 -5
  170. package/main.d.ts +0 -44
  171. package/main.js +0 -369
  172. package/number-input/NumberInput.d.ts +0 -4
  173. package/number-input/NumberInput.js +0 -76
  174. package/number-input/NumberInput.stories.tsx +0 -115
  175. package/number-input/NumberInput.test.js +0 -542
  176. package/number-input/NumberInputContext.d.ts +0 -4
  177. package/number-input/NumberInputContext.js +0 -19
  178. package/number-input/numberInputContextTypes.d.ts +0 -19
  179. package/number-input/numberInputContextTypes.js +0 -5
  180. package/number-input/types.d.ts +0 -124
  181. package/number-input/types.js +0 -5
  182. package/paginator/Icons.d.ts +0 -5
  183. package/paginator/Icons.js +0 -54
  184. package/paginator/Paginator.d.ts +0 -4
  185. package/paginator/Paginator.js +0 -165
  186. package/paginator/Paginator.stories.tsx +0 -63
  187. package/paginator/Paginator.test.js +0 -308
  188. package/paginator/types.d.ts +0 -38
  189. package/paginator/types.js +0 -5
  190. package/paragraph/Paragraph.d.ts +0 -6
  191. package/paragraph/Paragraph.js +0 -38
  192. package/paragraph/Paragraph.stories.tsx +0 -44
  193. package/password-input/PasswordInput.d.ts +0 -4
  194. package/password-input/PasswordInput.js +0 -166
  195. package/password-input/PasswordInput.stories.tsx +0 -131
  196. package/password-input/PasswordInput.test.js +0 -181
  197. package/password-input/types.d.ts +0 -110
  198. package/password-input/types.js +0 -5
  199. package/progress-bar/ProgressBar.d.ts +0 -4
  200. package/progress-bar/ProgressBar.js +0 -176
  201. package/progress-bar/ProgressBar.stories.jsx +0 -60
  202. package/progress-bar/ProgressBar.test.js +0 -110
  203. package/progress-bar/types.d.ts +0 -36
  204. package/progress-bar/types.js +0 -5
  205. package/quick-nav/QuickNav.d.ts +0 -4
  206. package/quick-nav/QuickNav.js +0 -117
  207. package/quick-nav/QuickNav.stories.tsx +0 -342
  208. package/quick-nav/types.d.ts +0 -21
  209. package/quick-nav/types.js +0 -5
  210. package/radio-group/Radio.d.ts +0 -4
  211. package/radio-group/Radio.js +0 -156
  212. package/radio-group/RadioGroup.d.ts +0 -4
  213. package/radio-group/RadioGroup.js +0 -283
  214. package/radio-group/RadioGroup.stories.tsx +0 -101
  215. package/radio-group/RadioGroup.test.js +0 -722
  216. package/radio-group/types.d.ts +0 -114
  217. package/radio-group/types.js +0 -5
  218. package/resultsetTable/Icons.d.ts +0 -7
  219. package/resultsetTable/Icons.js +0 -51
  220. package/resultsetTable/ResultsetTable.d.ts +0 -4
  221. package/resultsetTable/ResultsetTable.js +0 -195
  222. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  223. package/resultsetTable/ResultsetTable.test.js +0 -330
  224. package/resultsetTable/types.d.ts +0 -67
  225. package/resultsetTable/types.js +0 -5
  226. package/select/Icons.d.ts +0 -10
  227. package/select/Icons.js +0 -93
  228. package/select/Listbox.d.ts +0 -4
  229. package/select/Listbox.js +0 -198
  230. package/select/Option.d.ts +0 -4
  231. package/select/Option.js +0 -108
  232. package/select/Select.d.ts +0 -4
  233. package/select/Select.js +0 -645
  234. package/select/Select.stories.tsx +0 -683
  235. package/select/Select.test.js +0 -2233
  236. package/select/types.d.ts +0 -210
  237. package/select/types.js +0 -5
  238. package/sidenav/Sidenav.d.ts +0 -10
  239. package/sidenav/Sidenav.js +0 -266
  240. package/sidenav/Sidenav.stories.tsx +0 -189
  241. package/sidenav/Sidenav.test.js +0 -44
  242. package/sidenav/types.d.ts +0 -73
  243. package/sidenav/types.js +0 -5
  244. package/slider/Slider.d.ts +0 -4
  245. package/slider/Slider.js +0 -343
  246. package/slider/Slider.stories.tsx +0 -183
  247. package/slider/Slider.test.js +0 -250
  248. package/slider/types.d.ts +0 -86
  249. package/slider/types.js +0 -5
  250. package/spinner/Spinner.d.ts +0 -4
  251. package/spinner/Spinner.js +0 -250
  252. package/spinner/Spinner.stories.jsx +0 -103
  253. package/spinner/Spinner.test.js +0 -64
  254. package/spinner/types.d.ts +0 -32
  255. package/spinner/types.js +0 -5
  256. package/switch/Switch.d.ts +0 -4
  257. package/switch/Switch.js +0 -262
  258. package/switch/Switch.stories.tsx +0 -138
  259. package/switch/Switch.test.js +0 -225
  260. package/switch/types.d.ts +0 -66
  261. package/switch/types.js +0 -5
  262. package/table/Table.d.ts +0 -4
  263. package/table/Table.js +0 -118
  264. package/table/Table.stories.jsx +0 -277
  265. package/table/Table.test.js +0 -26
  266. package/table/types.d.ts +0 -21
  267. package/table/types.js +0 -5
  268. package/tabs/Tab.d.ts +0 -4
  269. package/tabs/Tab.js +0 -133
  270. package/tabs/Tabs.d.ts +0 -4
  271. package/tabs/Tabs.js +0 -467
  272. package/tabs/Tabs.stories.tsx +0 -188
  273. package/tabs/Tabs.test.js +0 -351
  274. package/tabs/types.d.ts +0 -92
  275. package/tabs/types.js +0 -5
  276. package/tabs-nav/NavTabs.d.ts +0 -8
  277. package/tabs-nav/NavTabs.js +0 -125
  278. package/tabs-nav/NavTabs.stories.tsx +0 -172
  279. package/tabs-nav/NavTabs.test.js +0 -82
  280. package/tabs-nav/Tab.d.ts +0 -4
  281. package/tabs-nav/Tab.js +0 -128
  282. package/tabs-nav/types.d.ts +0 -53
  283. package/tabs-nav/types.js +0 -5
  284. package/tag/Tag.d.ts +0 -4
  285. package/tag/Tag.js +0 -183
  286. package/tag/Tag.stories.tsx +0 -142
  287. package/tag/Tag.test.js +0 -60
  288. package/tag/types.d.ts +0 -69
  289. package/tag/types.js +0 -5
  290. package/text-input/Icons.d.ts +0 -8
  291. package/text-input/Icons.js +0 -60
  292. package/text-input/Suggestion.d.ts +0 -4
  293. package/text-input/Suggestion.js +0 -84
  294. package/text-input/Suggestions.d.ts +0 -4
  295. package/text-input/Suggestions.js +0 -134
  296. package/text-input/TextInput.d.ts +0 -4
  297. package/text-input/TextInput.js +0 -673
  298. package/text-input/TextInput.stories.tsx +0 -500
  299. package/text-input/TextInput.test.js +0 -1724
  300. package/text-input/types.d.ts +0 -197
  301. package/text-input/types.js +0 -5
  302. package/textarea/Textarea.d.ts +0 -4
  303. package/textarea/Textarea.js +0 -277
  304. package/textarea/Textarea.stories.jsx +0 -157
  305. package/textarea/Textarea.test.js +0 -437
  306. package/textarea/types.d.ts +0 -137
  307. package/textarea/types.js +0 -5
  308. package/toggle-group/ToggleGroup.d.ts +0 -4
  309. package/toggle-group/ToggleGroup.js +0 -215
  310. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  311. package/toggle-group/ToggleGroup.test.js +0 -156
  312. package/toggle-group/types.d.ts +0 -105
  313. package/toggle-group/types.js +0 -5
  314. package/typography/Typography.d.ts +0 -4
  315. package/typography/Typography.js +0 -131
  316. package/typography/Typography.stories.tsx +0 -198
  317. package/typography/types.d.ts +0 -18
  318. package/typography/types.js +0 -5
  319. package/useTheme.d.ts +0 -2
  320. package/useTheme.js +0 -22
  321. package/useTranslatedLabels.d.ts +0 -2
  322. package/useTranslatedLabels.js +0 -20
  323. package/wizard/Wizard.d.ts +0 -4
  324. package/wizard/Wizard.js +0 -285
  325. package/wizard/Wizard.stories.tsx +0 -233
  326. package/wizard/Wizard.test.js +0 -141
  327. package/wizard/types.d.ts +0 -65
  328. 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,330 +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"));
16
-
17
- // Mocking DOMRect for Radix Primitive Popover
18
- global.globalThis = global;
19
-
20
- global.ResizeObserver = /*#__PURE__*/function () {
21
- function ResizeObserver(cb) {
22
- (0, _classCallCheck2["default"])(this, ResizeObserver);
23
- this.cb = cb;
24
- }
25
-
26
- (0, _createClass2["default"])(ResizeObserver, [{
27
- key: "observe",
28
- value: function observe() {
29
- this.cb([{
30
- borderBoxSize: {
31
- inlineSize: 0,
32
- blockSize: 0
33
- }
34
- }]);
35
- }
36
- }, {
37
- key: "unobserve",
38
- value: function unobserve() {}
39
- }]);
40
- return ResizeObserver;
41
- }();
42
-
43
- global.DOMRect = {
44
- fromRect: function fromRect() {
45
- return {
46
- top: 0,
47
- left: 0,
48
- bottom: 0,
49
- right: 0,
50
- width: 0,
51
- height: 0
52
- };
53
- }
54
- };
55
- var columns = [{
56
- displayValue: "Id",
57
- isSortable: false
58
- }, {
59
- displayValue: "Name",
60
- isSortable: true
61
- }, {
62
- displayValue: "City",
63
- isSortable: false
64
- }];
65
- var rows = [[{
66
- displayValue: "001",
67
- sortValue: "001"
68
- }, {
69
- displayValue: "Peter",
70
- sortValue: "Peter"
71
- }, {
72
- displayValue: "Oviedo",
73
- sortValue: "Oviedo"
74
- }], [{
75
- displayValue: "002",
76
- sortValue: "002"
77
- }, {
78
- displayValue: "Louis",
79
- sortValue: "Louis"
80
- }, {
81
- displayValue: "Oviedo",
82
- sortValue: "Oviedo"
83
- }], [{
84
- displayValue: "003",
85
- sortValue: "003"
86
- }, {
87
- displayValue: "Lana",
88
- sortValue: "Lana"
89
- }, {
90
- displayValue: "Albacete",
91
- sortValue: "Albacete"
92
- }], [{
93
- displayValue: "004",
94
- sortValue: "004"
95
- }, {
96
- displayValue: "Rick",
97
- sortValue: "Rick"
98
- }, {
99
- displayValue: "Albacete",
100
- sortValue: "Albacete"
101
- }], [{
102
- displayValue: "005",
103
- sortValue: "005"
104
- }, {
105
- displayValue: "Mark",
106
- sortValue: "Mark"
107
- }, {
108
- displayValue: "Madrid",
109
- sortValue: "Madrid"
110
- }], [{
111
- displayValue: "006",
112
- sortValue: "006"
113
- }, {
114
- displayValue: "Cris",
115
- sortValue: "Cris"
116
- }, {
117
- displayValue: "Barcelona",
118
- sortValue: "Barcelona"
119
- }], [{
120
- displayValue: "007",
121
- sortValue: "007"
122
- }, {
123
- displayValue: "Susan",
124
- sortValue: "Susan"
125
- }, {
126
- displayValue: "Madrid",
127
- sortValue: "Madrid"
128
- }], [{
129
- displayValue: "008",
130
- sortValue: "008"
131
- }, {
132
- displayValue: "Tina",
133
- sortValue: "Tina"
134
- }, {
135
- displayValue: "Barcelona",
136
- sortValue: "Barcelona"
137
- }], [{
138
- displayValue: "009",
139
- sortValue: "009"
140
- }, {
141
- displayValue: "Kevin",
142
- sortValue: "Kevin"
143
- }, {
144
- displayValue: "Oviedo",
145
- sortValue: "Oviedo"
146
- }], [{
147
- displayValue: "010",
148
- sortValue: "010"
149
- }, {
150
- displayValue: "Cosmin",
151
- sortValue: "Cosmin"
152
- }, {
153
- displayValue: "Barcelona",
154
- sortValue: "Barcelona"
155
- }]];
156
- var rows2 = [[{
157
- displayValue: "546",
158
- sortValue: "465"
159
- }, {
160
- displayValue: "OtherValue",
161
- sortValue: "OtherValue"
162
- }, {
163
- displayValue: "OtherValue",
164
- sortValue: "OtherValue"
165
- }], [{
166
- displayValue: "978",
167
- sortValue: "465"
168
- }, {
169
- displayValue: "OtherValue",
170
- sortValue: "OtherValue"
171
- }, {
172
- displayValue: "OtherValue",
173
- sortValue: "OtherValue"
174
- }, {
175
- displayValue: ""
176
- }], [{
177
- displayValue: "678",
178
- sortValue: "344"
179
- }, {
180
- displayValue: "OtherValue",
181
- sortValue: "OtherValue"
182
- }, {
183
- displayValue: "OtherValue",
184
- sortValue: "OtherValue"
185
- }]];
186
- describe("Resultset table component tests", function () {
187
- test("Resultset table rendered correctly", function () {
188
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
189
- columns: columns,
190
- rows: rows,
191
- itemsPerPage: 3
192
- })),
193
- getByText = _render.getByText;
194
-
195
- expect(getByText("Peter")).toBeTruthy();
196
- });
197
- test("Resultset table shows as many rows as itemsPerPage", function () {
198
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
199
- columns: columns,
200
- rows: rows,
201
- itemsPerPage: 3
202
- })),
203
- getAllByRole = _render2.getAllByRole;
204
-
205
- expect(getAllByRole("row").length - 1).toEqual(3);
206
- });
207
- test("Resultset table shows rows on second page", function () {
208
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
209
- columns: columns,
210
- rows: rows,
211
- itemsPerPage: 3
212
- })),
213
- getByText = _render3.getByText,
214
- getAllByRole = _render3.getAllByRole;
215
-
216
- expect(getByText("Peter")).toBeTruthy();
217
- expect(getByText("Louis")).toBeTruthy();
218
- expect(getByText("Lana")).toBeTruthy();
219
- expect(getAllByRole("row").length - 1).toEqual(3);
220
- var nextButton = getAllByRole("button")[3];
221
-
222
- _react2.fireEvent.click(nextButton);
223
-
224
- expect(getByText("4 to 6 of 10")).toBeTruthy();
225
- expect(getByText("Rick")).toBeTruthy();
226
- expect(getByText("Mark")).toBeTruthy();
227
- expect(getByText("Cris")).toBeTruthy();
228
- expect(getAllByRole("row").length - 1).toEqual(3);
229
- });
230
- test("Resultset table goToPage works as expected", function () {
231
- window.HTMLElement.prototype.scrollIntoView = function () {};
232
-
233
- window.HTMLElement.prototype.scrollTo = function () {};
234
-
235
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
236
- columns: columns,
237
- showGoToPage: true,
238
- rows: rows,
239
- itemsPerPage: 3
240
- })),
241
- getByText = _render4.getByText,
242
- getAllByRole = _render4.getAllByRole;
243
-
244
- expect(getByText("Peter")).toBeTruthy();
245
- expect(getByText("Louis")).toBeTruthy();
246
- expect(getByText("Lana")).toBeTruthy();
247
- expect(getAllByRole("row").length - 1).toEqual(3);
248
- var goToPageSelect = getAllByRole("button")[3];
249
-
250
- _userEvent["default"].click(goToPageSelect);
251
-
252
- var goToPageOption = getByText("2");
253
-
254
- _userEvent["default"].click(goToPageOption);
255
-
256
- expect(getByText("4 to 6 of 10")).toBeTruthy();
257
- expect(getByText("Rick")).toBeTruthy();
258
- expect(getByText("Mark")).toBeTruthy();
259
- expect(getByText("Cris")).toBeTruthy();
260
- expect(getAllByRole("row").length - 1).toEqual(3);
261
- });
262
- test("Resultset table going to the last page shows only one row", function () {
263
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
264
- columns: columns,
265
- rows: rows,
266
- itemsPerPage: 3
267
- })),
268
- getByText = _render5.getByText,
269
- getAllByRole = _render5.getAllByRole;
270
-
271
- var lastButton = getAllByRole("button")[4];
272
-
273
- _react2.fireEvent.click(lastButton);
274
-
275
- expect(getByText("10 to 10 of 10")).toBeTruthy();
276
- expect(getAllByRole("row")).toHaveLength(2);
277
- expect(getByText("Cosmin")).toBeTruthy();
278
- });
279
- test("Resultset table sort rows by column", function () {
280
- var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
281
- columns: columns,
282
- rows: rows,
283
- itemsPerPage: 3
284
- }));
285
- expect(component.queryByText("Peter")).toBeTruthy();
286
-
287
- _react2.fireEvent.click(component.queryByText("Name"));
288
-
289
- expect(component.queryByText("Tina")).not.toBeTruthy();
290
- expect(component.queryByText("Cosmin")).toBeTruthy();
291
-
292
- _react2.fireEvent.click(component.queryByText("Name"));
293
-
294
- expect(component.queryByText("Tina")).toBeTruthy();
295
- expect(component.queryByText("Cosmin")).not.toBeTruthy();
296
- });
297
- test("Resultset table change rows should go to first page", function () {
298
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
299
- columns: columns,
300
- rows: rows,
301
- itemsPerPage: 3
302
- })),
303
- queryByText = _render6.queryByText,
304
- rerender = _render6.rerender;
305
-
306
- expect(queryByText("Peter")).toBeTruthy();
307
- rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
308
- columns: columns,
309
- rows: rows2,
310
- itemsPerPage: 3
311
- }));
312
- expect(queryByText("1 to 3 of 3")).toBeTruthy();
313
- });
314
- test("Resultset table change itemsPerPage should go to first page", function () {
315
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
316
- columns: columns,
317
- rows: rows,
318
- itemsPerPage: 3,
319
- itemsPerPageOptions: [2, 3]
320
- })),
321
- getAllByRole = _render7.getAllByRole;
322
-
323
- var lastButton = getAllByRole("button")[4];
324
- expect(getAllByRole("row").length - 1).toEqual(3);
325
-
326
- _react2.fireEvent.click(lastButton);
327
-
328
- expect(getAllByRole("row").length - 1).toEqual(1);
329
- });
330
- });
@@ -1,67 +0,0 @@
1
- /// <reference types="react" />
2
- export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- export declare type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- 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
- });