@nypl/design-system-react-components 0.25.8 → 0.25.11

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 (282) hide show
  1. package/CHANGELOG.md +110 -1
  2. package/README.md +1 -1
  3. package/dist/components/Button/Button.d.ts +6 -6
  4. package/dist/components/Button/ButtonTypes.d.ts +0 -1
  5. package/dist/components/Card/Card.d.ts +6 -4
  6. package/dist/components/Checkbox/Checkbox.d.ts +3 -2
  7. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +3 -2
  8. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +8 -2
  9. package/dist/components/DatePicker/DatePicker.d.ts +4 -3
  10. package/dist/components/Fieldset/Fieldset.d.ts +1 -3
  11. package/dist/components/Form/Form.d.ts +15 -14
  12. package/dist/components/Form/FormTypes.d.ts +2 -2
  13. package/dist/components/Heading/Heading.d.ts +7 -3
  14. package/dist/components/Heading/HeadingTypes.d.ts +6 -6
  15. package/dist/components/HelperErrorText/HelperErrorText.d.ts +5 -2
  16. package/dist/components/HorizontalRule/HorizontalRule.d.ts +3 -3
  17. package/dist/components/Icons/Icon.d.ts +4 -4
  18. package/dist/components/Icons/IconSvgs.d.ts +0 -21
  19. package/dist/components/Icons/IconTypes.d.ts +0 -23
  20. package/dist/components/Image/Image.d.ts +11 -3
  21. package/dist/components/List/List.d.ts +1 -1
  22. package/dist/components/Logo/Logo.d.ts +28 -0
  23. package/dist/components/Logo/LogoSvgs.d.ts +34 -0
  24. package/dist/components/Logo/LogoTypes.d.ts +46 -0
  25. package/dist/components/Modal/Modal.d.ts +0 -4
  26. package/dist/components/Notification/Notification.d.ts +4 -2
  27. package/dist/components/Placeholder/Placeholder.d.ts +3 -5
  28. package/dist/components/Radio/Radio.d.ts +6 -5
  29. package/dist/components/RadioGroup/RadioGroup.d.ts +6 -5
  30. package/dist/components/SearchBar/SearchBar.d.ts +15 -7
  31. package/dist/components/Select/Select.d.ts +7 -2
  32. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +8 -4
  33. package/dist/components/Slider/Slider.d.ts +3 -2
  34. package/dist/components/StatusBadge/StatusBadge.d.ts +2 -1
  35. package/dist/components/StructuredContent/StructuredContent.d.ts +41 -0
  36. package/dist/components/StructuredContent/StructuredContentTypes.d.ts +5 -0
  37. package/dist/components/Table/Table.d.ts +29 -0
  38. package/dist/components/Template/Template.d.ts +30 -6
  39. package/dist/components/Text/Text.d.ts +2 -2
  40. package/dist/components/TextInput/TextInput.d.ts +4 -3
  41. package/dist/components/Toggle/Toggle.d.ts +3 -2
  42. package/dist/components/VideoPlayer/VideoPlayer.d.ts +14 -5
  43. package/dist/design-system-react-components.cjs.development.js +6721 -5777
  44. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  45. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  46. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  47. package/dist/design-system-react-components.esm.js +6774 -5839
  48. package/dist/design-system-react-components.esm.js.map +1 -1
  49. package/dist/index.d.ts +10 -8
  50. package/dist/resources.scss +0 -2
  51. package/dist/styles.css +2 -2
  52. package/dist/theme/components/breadcrumb.d.ts +1 -1
  53. package/dist/theme/components/button.d.ts +0 -12
  54. package/dist/theme/components/card.d.ts +14 -2
  55. package/dist/theme/components/customTable.d.ts +56 -0
  56. package/dist/theme/components/fieldset.d.ts +2 -2
  57. package/dist/theme/components/global.d.ts +1 -1
  58. package/dist/theme/components/heading.d.ts +4 -0
  59. package/dist/theme/components/label.d.ts +1 -1
  60. package/dist/theme/components/link.d.ts +14 -1
  61. package/dist/theme/components/list.d.ts +0 -2
  62. package/dist/theme/components/logo.d.ts +4 -0
  63. package/dist/theme/components/notification.d.ts +13 -4
  64. package/dist/theme/components/searchBar.d.ts +9 -11
  65. package/dist/theme/components/select.d.ts +1 -0
  66. package/dist/theme/components/structuredContent.d.ts +33 -0
  67. package/dist/theme/components/template.d.ts +10 -10
  68. package/dist/theme/components/textInput.d.ts +4 -0
  69. package/dist/theme/components/toggle.d.ts +8 -5
  70. package/dist/utils/utils.d.ts +10 -0
  71. package/package.json +40 -37
  72. package/src/__tests__/utils/utils.test.ts +23 -1
  73. package/src/components/Accordion/Accordion.stories.mdx +15 -13
  74. package/src/components/Accordion/Accordion.test.tsx +45 -1
  75. package/src/components/Accordion/Accordion.tsx +20 -8
  76. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +243 -0
  77. package/src/components/Autosuggest/Autosuggest.stories.mdx +2 -1
  78. package/src/components/Autosuggest/Autosuggest.stories.tsx +24 -48
  79. package/src/components/Autosuggest/_Autosuggest.scss +2 -6
  80. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +43 -13
  81. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +15 -0
  82. package/src/components/Breadcrumbs/Breadcrumbs.tsx +9 -3
  83. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +5 -5
  84. package/src/components/Button/Button.stories.mdx +93 -48
  85. package/src/components/Button/Button.test.tsx +0 -12
  86. package/src/components/Button/Button.tsx +7 -7
  87. package/src/components/Button/ButtonTypes.tsx +0 -1
  88. package/src/components/Button/__snapshots__/Button.test.tsx.snap +0 -12
  89. package/src/components/Card/Card.stories.mdx +186 -71
  90. package/src/components/Card/Card.test.tsx +45 -22
  91. package/src/components/Card/Card.tsx +21 -6
  92. package/src/components/Card/__snapshots__/Card.test.tsx.snap +9 -3
  93. package/src/components/Chakra/Box.stories.mdx +3 -3
  94. package/src/components/Chakra/Center.stories.mdx +5 -5
  95. package/src/components/Chakra/Flex.stories.mdx +113 -0
  96. package/src/components/Chakra/Grid.stories.mdx +3 -3
  97. package/src/components/Chakra/Stack.stories.mdx +2 -2
  98. package/src/components/Checkbox/Checkbox.stories.mdx +37 -15
  99. package/src/components/Checkbox/Checkbox.tsx +13 -8
  100. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +48 -16
  101. package/src/components/CheckboxGroup/CheckboxGroup.tsx +14 -10
  102. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +6 -3
  103. package/src/components/ComponentWrapper/ComponentWrapper.test.tsx +151 -0
  104. package/src/components/ComponentWrapper/ComponentWrapper.tsx +36 -23
  105. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +85 -0
  106. package/src/components/DatePicker/DatePicker.stories.mdx +63 -18
  107. package/src/components/DatePicker/DatePicker.test.tsx +6 -6
  108. package/src/components/DatePicker/DatePicker.tsx +17 -11
  109. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +50 -24
  110. package/src/components/Fieldset/Fieldset.stories.mdx +20 -9
  111. package/src/components/Fieldset/Fieldset.tsx +2 -4
  112. package/src/components/Form/Form.stories.mdx +75 -49
  113. package/src/components/Form/Form.test.tsx +92 -3
  114. package/src/components/Form/Form.tsx +28 -23
  115. package/src/components/Form/FormTypes.tsx +2 -2
  116. package/src/components/Form/__snapshots__/Form.test.tsx.snap +0 -1
  117. package/src/components/Grid/SimpleGrid.stories.mdx +26 -26
  118. package/src/components/Heading/Heading.stories.mdx +59 -23
  119. package/src/components/Heading/Heading.test.tsx +82 -18
  120. package/src/components/Heading/Heading.tsx +31 -31
  121. package/src/components/Heading/HeadingTypes.tsx +6 -6
  122. package/src/components/Heading/__snapshots__/Heading.test.tsx.snap +71 -0
  123. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +55 -27
  124. package/src/components/HelperErrorText/HelperErrorText.test.tsx +42 -15
  125. package/src/components/HelperErrorText/HelperErrorText.tsx +24 -24
  126. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +41 -4
  127. package/src/components/Hero/Hero.stories.mdx +72 -53
  128. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +11 -9
  129. package/src/components/HorizontalRule/HorizontalRule.tsx +4 -6
  130. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +4 -4
  131. package/src/components/Icons/Icon.stories.mdx +78 -77
  132. package/src/components/Icons/Icon.test.tsx +1 -1
  133. package/src/components/Icons/Icon.tsx +5 -6
  134. package/src/components/Icons/IconSvgs.tsx +0 -42
  135. package/src/components/Icons/IconTypes.tsx +0 -24
  136. package/src/components/Image/Image.stories.mdx +66 -18
  137. package/src/components/Image/Image.tsx +21 -10
  138. package/src/components/Label/Label.stories.mdx +20 -19
  139. package/src/components/Link/Link.stories.mdx +102 -51
  140. package/src/components/Link/Link.test.tsx +38 -8
  141. package/src/components/Link/Link.tsx +19 -12
  142. package/src/components/Link/__snapshots__/Link.test.tsx.snap +60 -0
  143. package/src/components/List/List.stories.mdx +60 -29
  144. package/src/components/List/List.test.tsx +1 -1
  145. package/src/components/List/List.tsx +2 -2
  146. package/src/components/List/__snapshots__/List.test.tsx.snap +3 -1
  147. package/src/components/Logo/Logo.stories.mdx +222 -0
  148. package/src/components/Logo/Logo.test.tsx +98 -0
  149. package/src/components/Logo/Logo.tsx +97 -0
  150. package/src/components/Logo/LogoSvgs.tsx +66 -0
  151. package/src/components/Logo/LogoTypes.tsx +48 -0
  152. package/src/components/Logo/__snapshots__/Logo.test.tsx.snap +71 -0
  153. package/src/components/Modal/Modal.stories.mdx +20 -5
  154. package/src/components/Modal/Modal.tsx +2 -8
  155. package/src/components/Notification/Notification.stories.mdx +128 -38
  156. package/src/components/Notification/Notification.test.tsx +49 -1
  157. package/src/components/Notification/Notification.tsx +25 -12
  158. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +4 -0
  159. package/src/components/Pagination/Pagination.stories.mdx +18 -7
  160. package/src/components/Pagination/Pagination.tsx +3 -3
  161. package/src/components/Placeholder/Placeholder.tsx +7 -14
  162. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +72 -43
  163. package/src/components/Radio/Radio.stories.mdx +39 -19
  164. package/src/components/Radio/Radio.tsx +13 -9
  165. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +5 -5
  166. package/src/components/RadioGroup/RadioGroup.stories.mdx +50 -16
  167. package/src/components/RadioGroup/RadioGroup.test.tsx +13 -11
  168. package/src/components/RadioGroup/RadioGroup.tsx +97 -94
  169. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +24 -21
  170. package/src/components/SearchBar/SearchBar.Test.tsx +160 -34
  171. package/src/components/SearchBar/SearchBar.stories.mdx +115 -33
  172. package/src/components/SearchBar/SearchBar.tsx +72 -51
  173. package/src/components/Select/Select.stories.mdx +48 -14
  174. package/src/components/Select/Select.test.tsx +89 -0
  175. package/src/components/Select/Select.tsx +27 -12
  176. package/src/components/Select/__snapshots__/Select.test.tsx.snap +545 -0
  177. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +50 -16
  178. package/src/components/SkeletonLoader/SkeletonLoader.tsx +8 -4
  179. package/src/components/Slider/Slider.stories.mdx +72 -22
  180. package/src/components/Slider/Slider.tsx +15 -10
  181. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +67 -30
  182. package/src/components/StatusBadge/StatusBadge.stories.mdx +33 -18
  183. package/src/components/StatusBadge/StatusBadge.tsx +2 -1
  184. package/src/components/StructuredContent/StructuredContent.stories.mdx +427 -0
  185. package/src/components/StructuredContent/StructuredContent.test.tsx +376 -0
  186. package/src/components/StructuredContent/StructuredContent.tsx +153 -0
  187. package/src/components/StructuredContent/StructuredContentTypes.tsx +5 -0
  188. package/src/components/StructuredContent/__snapshots__/StructuredContent.test.tsx.snap +283 -0
  189. package/src/components/StyleGuide/Bidirectionality.stories.mdx +32 -83
  190. package/src/components/StyleGuide/Breakpoints.stories.mdx +1 -11
  191. package/src/components/StyleGuide/Buttons.stories.mdx +3 -18
  192. package/src/components/StyleGuide/ColorCard.tsx +1 -2
  193. package/src/components/StyleGuide/Colors.stories.mdx +3 -11
  194. package/src/components/StyleGuide/DesignTokens.stories.mdx +3 -8
  195. package/src/components/StyleGuide/Forms.stories.mdx +2 -10
  196. package/src/components/StyleGuide/Iconography.stories.mdx +8 -34
  197. package/src/components/StyleGuide/Spacing.stories.mdx +3 -14
  198. package/src/components/StyleGuide/Typography.stories.mdx +64 -76
  199. package/src/components/Table/Table.stories.mdx +165 -0
  200. package/src/components/Table/Table.test.tsx +137 -0
  201. package/src/components/Table/Table.tsx +126 -0
  202. package/src/components/Table/__snapshots__/Table.test.tsx.snap +1179 -0
  203. package/src/components/Tabs/Tabs.stories.mdx +20 -14
  204. package/src/components/Tabs/Tabs.test.tsx +21 -5
  205. package/src/components/Tabs/Tabs.tsx +35 -20
  206. package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +195 -0
  207. package/src/components/Template/Template.stories.mdx +132 -48
  208. package/src/components/Template/Template.test.tsx +128 -6
  209. package/src/components/Template/Template.tsx +93 -13
  210. package/src/components/Template/__snapshots__/Template.test.tsx.snap +169 -0
  211. package/src/components/Text/Text.stories.mdx +33 -11
  212. package/src/components/Text/Text.tsx +2 -2
  213. package/src/components/TextInput/TextInput.stories.mdx +84 -17
  214. package/src/components/TextInput/TextInput.test.tsx +96 -0
  215. package/src/components/TextInput/TextInput.tsx +12 -8
  216. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +240 -0
  217. package/src/components/Toggle/Toggle.stories.mdx +33 -9
  218. package/src/components/Toggle/Toggle.tsx +14 -9
  219. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +4 -4
  220. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +64 -14
  221. package/src/components/VideoPlayer/VideoPlayer.tsx +17 -7
  222. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +12 -6
  223. package/src/docs/Chakra.stories.mdx +5 -8
  224. package/src/docs/Intro.stories.mdx +2 -2
  225. package/src/index.ts +13 -6
  226. package/src/styles/base/_03-base.scss +1 -1
  227. package/src/styles/base/_place-holder.scss +7 -7
  228. package/src/styles.scss +1 -5
  229. package/src/theme/components/breadcrumb.ts +4 -4
  230. package/src/theme/components/button.ts +5 -12
  231. package/src/theme/components/card.ts +5 -2
  232. package/src/theme/components/checkbox.ts +1 -1
  233. package/src/theme/components/customTable.ts +63 -0
  234. package/src/theme/components/datePicker.ts +1 -1
  235. package/src/theme/components/global.ts +7 -7
  236. package/src/theme/components/heading.ts +13 -11
  237. package/src/theme/components/helperErrorText.ts +1 -1
  238. package/src/theme/components/image.ts +1 -1
  239. package/src/theme/components/link.ts +17 -5
  240. package/src/theme/components/list.ts +3 -5
  241. package/src/theme/components/logo.ts +54 -0
  242. package/src/theme/components/notification.ts +19 -9
  243. package/src/theme/components/searchBar.ts +11 -13
  244. package/src/theme/components/select.ts +1 -0
  245. package/src/theme/components/statusBadge.ts +1 -1
  246. package/src/theme/components/structuredContent.ts +74 -0
  247. package/src/theme/components/template.ts +10 -10
  248. package/src/theme/components/text.ts +6 -6
  249. package/src/theme/components/textInput.ts +2 -0
  250. package/src/theme/components/toggle.ts +10 -6
  251. package/src/theme/components/videoPlayer.ts +0 -2
  252. package/src/theme/foundations/global.ts +2 -2
  253. package/src/theme/foundations/typography.ts +84 -12
  254. package/src/theme/index.ts +6 -0
  255. package/src/utils/componentCategories.ts +2 -1
  256. package/src/utils/utils.ts +17 -0
  257. package/dist/__tests__/utils/bem.test.d.ts +0 -1
  258. package/dist/components/CardEdition/CardEdition.d.ts +0 -21
  259. package/dist/components/CardEdition/CardEdition.stories.d.ts +0 -27
  260. package/dist/components/Input/Input.d.ts +0 -36
  261. package/dist/components/Input/Input.stories.d.ts +0 -29
  262. package/dist/components/Input/InputTypes.d.ts +0 -6
  263. package/dist/components/StyleGuide/UIDocCard.d.ts +0 -11
  264. package/dist/helpers/CSSVariablesHelper.d.ts +0 -3
  265. package/dist/helpers/getCSSVariable.d.ts +0 -1
  266. package/dist/interfaces.d.ts +0 -3
  267. package/dist/utils/bem.d.ts +0 -1
  268. package/src/__tests__/utils/bem.test.ts +0 -37
  269. package/src/components/CardEdition/CardEdition.stories.tsx +0 -122
  270. package/src/components/CardEdition/CardEdition.test.tsx +0 -395
  271. package/src/components/CardEdition/CardEdition.tsx +0 -60
  272. package/src/components/CardEdition/_CardEdition.scss +0 -137
  273. package/src/components/Input/Input.stories.tsx +0 -133
  274. package/src/components/Input/Input.test.tsx +0 -266
  275. package/src/components/Input/Input.tsx +0 -81
  276. package/src/components/Input/InputTypes.tsx +0 -8
  277. package/src/components/Input/_Input.scss +0 -78
  278. package/src/components/StyleGuide/UIDocCard.tsx +0 -36
  279. package/src/helpers/CSSVariablesHelper.tsx +0 -34
  280. package/src/helpers/getCSSVariable.tsx +0 -5
  281. package/src/interfaces.ts +0 -3
  282. package/src/utils/bem.ts +0 -44
package/src/components/Table/__snapshots__/Table.test.tsx.snap ADDED
@@ -0,0 +1,1179 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Table renders the UI snapshot correctly 1`] = `
4
+ <table
5
+ className="chakra-table css-0"
6
+ id="basic"
7
+ role="table"
8
+ >
9
+ <tbody
10
+ className="css-0"
11
+ >
12
+ <tr
13
+ className="css-0"
14
+ role="row"
15
+ >
16
+ <td
17
+ className="css-0"
18
+ role="gridcell"
19
+ >
20
+ Tom
21
+ </td>
22
+ <td
23
+ className="css-0"
24
+ role="gridcell"
25
+ >
26
+ Nook
27
+ </td>
28
+ <td
29
+ className="css-0"
30
+ role="gridcell"
31
+ >
32
+ Tanukichi
33
+ </td>
34
+ <td
35
+ className="css-0"
36
+ role="gridcell"
37
+ >
38
+ Main Street
39
+ </td>
40
+ <td
41
+ className="css-0"
42
+ role="gridcell"
43
+ >
44
+ New York
45
+ </td>
46
+ <td
47
+ className="css-0"
48
+ role="gridcell"
49
+ >
50
+ 23458
51
+ </td>
52
+ <td
53
+ className="css-0"
54
+ role="gridcell"
55
+ >
56
+ NY
57
+ </td>
58
+ </tr>
59
+ <tr
60
+ className="css-0"
61
+ role="row"
62
+ >
63
+ <td
64
+ className="css-0"
65
+ role="gridcell"
66
+ >
67
+ Isabelle
68
+ </td>
69
+ <td
70
+ className="css-0"
71
+ role="gridcell"
72
+ >
73
+ -
74
+ </td>
75
+ <td
76
+ className="css-0"
77
+ role="gridcell"
78
+ >
79
+ Shizue
80
+ </td>
81
+ <td
82
+ className="css-0"
83
+ role="gridcell"
84
+ >
85
+ Walnut Street
86
+ </td>
87
+ <td
88
+ className="css-0"
89
+ role="gridcell"
90
+ >
91
+ New York
92
+ </td>
93
+ <td
94
+ className="css-0"
95
+ role="gridcell"
96
+ >
97
+ 23458
98
+ </td>
99
+ <td
100
+ className="css-0"
101
+ role="gridcell"
102
+ >
103
+ NY
104
+ </td>
105
+ </tr>
106
+ <tr
107
+ className="css-0"
108
+ role="row"
109
+ >
110
+ <td
111
+ className="css-0"
112
+ role="gridcell"
113
+ >
114
+ K.K.
115
+ </td>
116
+ <td
117
+ className="css-0"
118
+ role="gridcell"
119
+ >
120
+ Slider
121
+ </td>
122
+ <td
123
+ className="css-0"
124
+ role="gridcell"
125
+ >
126
+ Totakeke
127
+ </td>
128
+ <td
129
+ className="css-0"
130
+ role="gridcell"
131
+ >
132
+ Niper Place
133
+ </td>
134
+ <td
135
+ className="css-0"
136
+ role="gridcell"
137
+ >
138
+ New York
139
+ </td>
140
+ <td
141
+ className="css-0"
142
+ role="gridcell"
143
+ >
144
+ 98765
145
+ </td>
146
+ <td
147
+ className="css-0"
148
+ role="gridcell"
149
+ >
150
+ NY
151
+ </td>
152
+ </tr>
153
+ <tr
154
+ className="css-0"
155
+ role="row"
156
+ >
157
+ <td
158
+ className="css-0"
159
+ role="gridcell"
160
+ >
161
+ Sonny
162
+ </td>
163
+ <td
164
+ className="css-0"
165
+ role="gridcell"
166
+ >
167
+ Resetti
168
+ </td>
169
+ <td
170
+ className="css-0"
171
+ role="gridcell"
172
+ >
173
+ Risetto san
174
+ </td>
175
+ <td
176
+ className="css-0"
177
+ role="gridcell"
178
+ >
179
+ Village Road
180
+ </td>
181
+ <td
182
+ className="css-0"
183
+ role="gridcell"
184
+ >
185
+ New York
186
+ </td>
187
+ <td
188
+ className="css-0"
189
+ role="gridcell"
190
+ >
191
+ 09873
192
+ </td>
193
+ <td
194
+ className="css-0"
195
+ role="gridcell"
196
+ >
197
+ NY
198
+ </td>
199
+ </tr>
200
+ </tbody>
201
+ </table>
202
+ `;
203
+
204
+ exports[`Table renders the UI snapshot correctly 2`] = `
205
+ <table
206
+ className="chakra-table css-0"
207
+ id="withCaption"
208
+ role="table"
209
+ >
210
+ <caption
211
+ className="css-18i7bby"
212
+ >
213
+ this is the caption
214
+ </caption>
215
+ <tbody
216
+ className="css-0"
217
+ >
218
+ <tr
219
+ className="css-0"
220
+ role="row"
221
+ >
222
+ <td
223
+ className="css-0"
224
+ role="gridcell"
225
+ >
226
+ Tom
227
+ </td>
228
+ <td
229
+ className="css-0"
230
+ role="gridcell"
231
+ >
232
+ Nook
233
+ </td>
234
+ <td
235
+ className="css-0"
236
+ role="gridcell"
237
+ >
238
+ Tanukichi
239
+ </td>
240
+ <td
241
+ className="css-0"
242
+ role="gridcell"
243
+ >
244
+ Main Street
245
+ </td>
246
+ <td
247
+ className="css-0"
248
+ role="gridcell"
249
+ >
250
+ New York
251
+ </td>
252
+ <td
253
+ className="css-0"
254
+ role="gridcell"
255
+ >
256
+ 23458
257
+ </td>
258
+ <td
259
+ className="css-0"
260
+ role="gridcell"
261
+ >
262
+ NY
263
+ </td>
264
+ </tr>
265
+ <tr
266
+ className="css-0"
267
+ role="row"
268
+ >
269
+ <td
270
+ className="css-0"
271
+ role="gridcell"
272
+ >
273
+ Isabelle
274
+ </td>
275
+ <td
276
+ className="css-0"
277
+ role="gridcell"
278
+ >
279
+ -
280
+ </td>
281
+ <td
282
+ className="css-0"
283
+ role="gridcell"
284
+ >
285
+ Shizue
286
+ </td>
287
+ <td
288
+ className="css-0"
289
+ role="gridcell"
290
+ >
291
+ Walnut Street
292
+ </td>
293
+ <td
294
+ className="css-0"
295
+ role="gridcell"
296
+ >
297
+ New York
298
+ </td>
299
+ <td
300
+ className="css-0"
301
+ role="gridcell"
302
+ >
303
+ 23458
304
+ </td>
305
+ <td
306
+ className="css-0"
307
+ role="gridcell"
308
+ >
309
+ NY
310
+ </td>
311
+ </tr>
312
+ <tr
313
+ className="css-0"
314
+ role="row"
315
+ >
316
+ <td
317
+ className="css-0"
318
+ role="gridcell"
319
+ >
320
+ K.K.
321
+ </td>
322
+ <td
323
+ className="css-0"
324
+ role="gridcell"
325
+ >
326
+ Slider
327
+ </td>
328
+ <td
329
+ className="css-0"
330
+ role="gridcell"
331
+ >
332
+ Totakeke
333
+ </td>
334
+ <td
335
+ className="css-0"
336
+ role="gridcell"
337
+ >
338
+ Niper Place
339
+ </td>
340
+ <td
341
+ className="css-0"
342
+ role="gridcell"
343
+ >
344
+ New York
345
+ </td>
346
+ <td
347
+ className="css-0"
348
+ role="gridcell"
349
+ >
350
+ 98765
351
+ </td>
352
+ <td
353
+ className="css-0"
354
+ role="gridcell"
355
+ >
356
+ NY
357
+ </td>
358
+ </tr>
359
+ <tr
360
+ className="css-0"
361
+ role="row"
362
+ >
363
+ <td
364
+ className="css-0"
365
+ role="gridcell"
366
+ >
367
+ Sonny
368
+ </td>
369
+ <td
370
+ className="css-0"
371
+ role="gridcell"
372
+ >
373
+ Resetti
374
+ </td>
375
+ <td
376
+ className="css-0"
377
+ role="gridcell"
378
+ >
379
+ Risetto san
380
+ </td>
381
+ <td
382
+ className="css-0"
383
+ role="gridcell"
384
+ >
385
+ Village Road
386
+ </td>
387
+ <td
388
+ className="css-0"
389
+ role="gridcell"
390
+ >
391
+ New York
392
+ </td>
393
+ <td
394
+ className="css-0"
395
+ role="gridcell"
396
+ >
397
+ 09873
398
+ </td>
399
+ <td
400
+ className="css-0"
401
+ role="gridcell"
402
+ >
403
+ NY
404
+ </td>
405
+ </tr>
406
+ </tbody>
407
+ </table>
408
+ `;
409
+
410
+ exports[`Table renders the UI snapshot correctly 3`] = `
411
+ <table
412
+ className="chakra-table css-0"
413
+ id="withHeaders"
414
+ role="table"
415
+ >
416
+ <caption
417
+ className="css-18i7bby"
418
+ >
419
+ this is the caption
420
+ </caption>
421
+ <thead
422
+ className="css-0"
423
+ >
424
+ <tr
425
+ className="css-0"
426
+ role="row"
427
+ >
428
+ <th
429
+ className="css-0"
430
+ scope="col"
431
+ >
432
+ First Name
433
+ </th>
434
+ <th
435
+ className="css-0"
436
+ scope="col"
437
+ >
438
+ Last Name
439
+ </th>
440
+ <th
441
+ className="css-0"
442
+ scope="col"
443
+ >
444
+ Nick Name
445
+ </th>
446
+ <th
447
+ className="css-0"
448
+ scope="col"
449
+ >
450
+ Address1
451
+ </th>
452
+ <th
453
+ className="css-0"
454
+ scope="col"
455
+ >
456
+ City
457
+ </th>
458
+ <th
459
+ className="css-0"
460
+ scope="col"
461
+ >
462
+ Zipcode
463
+ </th>
464
+ <th
465
+ className="css-0"
466
+ scope="col"
467
+ >
468
+ State
469
+ </th>
470
+ </tr>
471
+ </thead>
472
+ <tbody
473
+ className="css-0"
474
+ >
475
+ <tr
476
+ className="css-0"
477
+ role="row"
478
+ >
479
+ <td
480
+ className="css-0"
481
+ role="gridcell"
482
+ >
483
+ Tom
484
+ </td>
485
+ <td
486
+ className="css-0"
487
+ role="gridcell"
488
+ >
489
+ Nook
490
+ </td>
491
+ <td
492
+ className="css-0"
493
+ role="gridcell"
494
+ >
495
+ Tanukichi
496
+ </td>
497
+ <td
498
+ className="css-0"
499
+ role="gridcell"
500
+ >
501
+ Main Street
502
+ </td>
503
+ <td
504
+ className="css-0"
505
+ role="gridcell"
506
+ >
507
+ New York
508
+ </td>
509
+ <td
510
+ className="css-0"
511
+ role="gridcell"
512
+ >
513
+ 23458
514
+ </td>
515
+ <td
516
+ className="css-0"
517
+ role="gridcell"
518
+ >
519
+ NY
520
+ </td>
521
+ </tr>
522
+ <tr
523
+ className="css-0"
524
+ role="row"
525
+ >
526
+ <td
527
+ className="css-0"
528
+ role="gridcell"
529
+ >
530
+ Isabelle
531
+ </td>
532
+ <td
533
+ className="css-0"
534
+ role="gridcell"
535
+ >
536
+ -
537
+ </td>
538
+ <td
539
+ className="css-0"
540
+ role="gridcell"
541
+ >
542
+ Shizue
543
+ </td>
544
+ <td
545
+ className="css-0"
546
+ role="gridcell"
547
+ >
548
+ Walnut Street
549
+ </td>
550
+ <td
551
+ className="css-0"
552
+ role="gridcell"
553
+ >
554
+ New York
555
+ </td>
556
+ <td
557
+ className="css-0"
558
+ role="gridcell"
559
+ >
560
+ 23458
561
+ </td>
562
+ <td
563
+ className="css-0"
564
+ role="gridcell"
565
+ >
566
+ NY
567
+ </td>
568
+ </tr>
569
+ <tr
570
+ className="css-0"
571
+ role="row"
572
+ >
573
+ <td
574
+ className="css-0"
575
+ role="gridcell"
576
+ >
577
+ K.K.
578
+ </td>
579
+ <td
580
+ className="css-0"
581
+ role="gridcell"
582
+ >
583
+ Slider
584
+ </td>
585
+ <td
586
+ className="css-0"
587
+ role="gridcell"
588
+ >
589
+ Totakeke
590
+ </td>
591
+ <td
592
+ className="css-0"
593
+ role="gridcell"
594
+ >
595
+ Niper Place
596
+ </td>
597
+ <td
598
+ className="css-0"
599
+ role="gridcell"
600
+ >
601
+ New York
602
+ </td>
603
+ <td
604
+ className="css-0"
605
+ role="gridcell"
606
+ >
607
+ 98765
608
+ </td>
609
+ <td
610
+ className="css-0"
611
+ role="gridcell"
612
+ >
613
+ NY
614
+ </td>
615
+ </tr>
616
+ <tr
617
+ className="css-0"
618
+ role="row"
619
+ >
620
+ <td
621
+ className="css-0"
622
+ role="gridcell"
623
+ >
624
+ Sonny
625
+ </td>
626
+ <td
627
+ className="css-0"
628
+ role="gridcell"
629
+ >
630
+ Resetti
631
+ </td>
632
+ <td
633
+ className="css-0"
634
+ role="gridcell"
635
+ >
636
+ Risetto san
637
+ </td>
638
+ <td
639
+ className="css-0"
640
+ role="gridcell"
641
+ >
642
+ Village Road
643
+ </td>
644
+ <td
645
+ className="css-0"
646
+ role="gridcell"
647
+ >
648
+ New York
649
+ </td>
650
+ <td
651
+ className="css-0"
652
+ role="gridcell"
653
+ >
654
+ 09873
655
+ </td>
656
+ <td
657
+ className="css-0"
658
+ role="gridcell"
659
+ >
660
+ NY
661
+ </td>
662
+ </tr>
663
+ </tbody>
664
+ </table>
665
+ `;
666
+
667
+ exports[`Table renders the UI snapshot correctly 4`] = `
668
+ <table
669
+ className="chakra-table css-0"
670
+ id="withHeaders"
671
+ role="table"
672
+ >
673
+ <caption
674
+ className="css-18i7bby"
675
+ >
676
+ this is the caption
677
+ </caption>
678
+ <thead
679
+ className="css-0"
680
+ >
681
+ <tr
682
+ className="css-0"
683
+ role="row"
684
+ >
685
+ <th
686
+ className="css-0"
687
+ scope="col"
688
+ >
689
+ First Name
690
+ </th>
691
+ <th
692
+ className="css-0"
693
+ scope="col"
694
+ >
695
+ Last Name
696
+ </th>
697
+ <th
698
+ className="css-0"
699
+ scope="col"
700
+ >
701
+ Nick Name
702
+ </th>
703
+ <th
704
+ className="css-0"
705
+ scope="col"
706
+ >
707
+ Address1
708
+ </th>
709
+ <th
710
+ className="css-0"
711
+ scope="col"
712
+ >
713
+ City
714
+ </th>
715
+ <th
716
+ className="css-0"
717
+ scope="col"
718
+ >
719
+ Zipcode
720
+ </th>
721
+ <th
722
+ className="css-0"
723
+ scope="col"
724
+ >
725
+ State
726
+ </th>
727
+ </tr>
728
+ </thead>
729
+ <tbody
730
+ className="css-0"
731
+ >
732
+ <tr
733
+ className="css-0"
734
+ role="row"
735
+ >
736
+ <th
737
+ className="css-0"
738
+ scope="row"
739
+ >
740
+ Tom
741
+ </th>
742
+ <td
743
+ className="css-0"
744
+ role="gridcell"
745
+ >
746
+ Nook
747
+ </td>
748
+ <td
749
+ className="css-0"
750
+ role="gridcell"
751
+ >
752
+ Tanukichi
753
+ </td>
754
+ <td
755
+ className="css-0"
756
+ role="gridcell"
757
+ >
758
+ Main Street
759
+ </td>
760
+ <td
761
+ className="css-0"
762
+ role="gridcell"
763
+ >
764
+ New York
765
+ </td>
766
+ <td
767
+ className="css-0"
768
+ role="gridcell"
769
+ >
770
+ 23458
771
+ </td>
772
+ <td
773
+ className="css-0"
774
+ role="gridcell"
775
+ >
776
+ NY
777
+ </td>
778
+ </tr>
779
+ <tr
780
+ className="css-0"
781
+ role="row"
782
+ >
783
+ <th
784
+ className="css-0"
785
+ scope="row"
786
+ >
787
+ Isabelle
788
+ </th>
789
+ <td
790
+ className="css-0"
791
+ role="gridcell"
792
+ >
793
+ -
794
+ </td>
795
+ <td
796
+ className="css-0"
797
+ role="gridcell"
798
+ >
799
+ Shizue
800
+ </td>
801
+ <td
802
+ className="css-0"
803
+ role="gridcell"
804
+ >
805
+ Walnut Street
806
+ </td>
807
+ <td
808
+ className="css-0"
809
+ role="gridcell"
810
+ >
811
+ New York
812
+ </td>
813
+ <td
814
+ className="css-0"
815
+ role="gridcell"
816
+ >
817
+ 23458
818
+ </td>
819
+ <td
820
+ className="css-0"
821
+ role="gridcell"
822
+ >
823
+ NY
824
+ </td>
825
+ </tr>
826
+ <tr
827
+ className="css-0"
828
+ role="row"
829
+ >
830
+ <th
831
+ className="css-0"
832
+ scope="row"
833
+ >
834
+ K.K.
835
+ </th>
836
+ <td
837
+ className="css-0"
838
+ role="gridcell"
839
+ >
840
+ Slider
841
+ </td>
842
+ <td
843
+ className="css-0"
844
+ role="gridcell"
845
+ >
846
+ Totakeke
847
+ </td>
848
+ <td
849
+ className="css-0"
850
+ role="gridcell"
851
+ >
852
+ Niper Place
853
+ </td>
854
+ <td
855
+ className="css-0"
856
+ role="gridcell"
857
+ >
858
+ New York
859
+ </td>
860
+ <td
861
+ className="css-0"
862
+ role="gridcell"
863
+ >
864
+ 98765
865
+ </td>
866
+ <td
867
+ className="css-0"
868
+ role="gridcell"
869
+ >
870
+ NY
871
+ </td>
872
+ </tr>
873
+ <tr
874
+ className="css-0"
875
+ role="row"
876
+ >
877
+ <th
878
+ className="css-0"
879
+ scope="row"
880
+ >
881
+ Sonny
882
+ </th>
883
+ <td
884
+ className="css-0"
885
+ role="gridcell"
886
+ >
887
+ Resetti
888
+ </td>
889
+ <td
890
+ className="css-0"
891
+ role="gridcell"
892
+ >
893
+ Risetto san
894
+ </td>
895
+ <td
896
+ className="css-0"
897
+ role="gridcell"
898
+ >
899
+ Village Road
900
+ </td>
901
+ <td
902
+ className="css-0"
903
+ role="gridcell"
904
+ >
905
+ New York
906
+ </td>
907
+ <td
908
+ className="css-0"
909
+ role="gridcell"
910
+ >
911
+ 09873
912
+ </td>
913
+ <td
914
+ className="css-0"
915
+ role="gridcell"
916
+ >
917
+ NY
918
+ </td>
919
+ </tr>
920
+ </tbody>
921
+ </table>
922
+ `;
923
+
924
+ exports[`Table renders the UI snapshot correctly 5`] = `
925
+ <table
926
+ className="chakra-table css-0"
927
+ id="withHeaders"
928
+ role="table"
929
+ >
930
+ <caption
931
+ className="css-18i7bby"
932
+ >
933
+ this is the caption
934
+ </caption>
935
+ <thead
936
+ className="css-0"
937
+ >
938
+ <tr
939
+ className="css-0"
940
+ role="row"
941
+ >
942
+ <th
943
+ className="css-1adspbs"
944
+ scope="col"
945
+ >
946
+ First Name
947
+ </th>
948
+ <th
949
+ className="css-1adspbs"
950
+ scope="col"
951
+ >
952
+ Last Name
953
+ </th>
954
+ <th
955
+ className="css-1adspbs"
956
+ scope="col"
957
+ >
958
+ Nick Name
959
+ </th>
960
+ <th
961
+ className="css-1adspbs"
962
+ scope="col"
963
+ >
964
+ Address1
965
+ </th>
966
+ <th
967
+ className="css-1adspbs"
968
+ scope="col"
969
+ >
970
+ City
971
+ </th>
972
+ <th
973
+ className="css-1adspbs"
974
+ scope="col"
975
+ >
976
+ Zipcode
977
+ </th>
978
+ <th
979
+ className="css-1adspbs"
980
+ scope="col"
981
+ >
982
+ State
983
+ </th>
984
+ </tr>
985
+ </thead>
986
+ <tbody
987
+ className="css-0"
988
+ >
989
+ <tr
990
+ className="css-0"
991
+ role="row"
992
+ >
993
+ <th
994
+ className="css-0"
995
+ scope="row"
996
+ >
997
+ Tom
998
+ </th>
999
+ <td
1000
+ className="css-0"
1001
+ role="gridcell"
1002
+ >
1003
+ Nook
1004
+ </td>
1005
+ <td
1006
+ className="css-0"
1007
+ role="gridcell"
1008
+ >
1009
+ Tanukichi
1010
+ </td>
1011
+ <td
1012
+ className="css-0"
1013
+ role="gridcell"
1014
+ >
1015
+ Main Street
1016
+ </td>
1017
+ <td
1018
+ className="css-0"
1019
+ role="gridcell"
1020
+ >
1021
+ New York
1022
+ </td>
1023
+ <td
1024
+ className="css-0"
1025
+ role="gridcell"
1026
+ >
1027
+ 23458
1028
+ </td>
1029
+ <td
1030
+ className="css-0"
1031
+ role="gridcell"
1032
+ >
1033
+ NY
1034
+ </td>
1035
+ </tr>
1036
+ <tr
1037
+ className="css-0"
1038
+ role="row"
1039
+ >
1040
+ <th
1041
+ className="css-0"
1042
+ scope="row"
1043
+ >
1044
+ Isabelle
1045
+ </th>
1046
+ <td
1047
+ className="css-0"
1048
+ role="gridcell"
1049
+ >
1050
+ -
1051
+ </td>
1052
+ <td
1053
+ className="css-0"
1054
+ role="gridcell"
1055
+ >
1056
+ Shizue
1057
+ </td>
1058
+ <td
1059
+ className="css-0"
1060
+ role="gridcell"
1061
+ >
1062
+ Walnut Street
1063
+ </td>
1064
+ <td
1065
+ className="css-0"
1066
+ role="gridcell"
1067
+ >
1068
+ New York
1069
+ </td>
1070
+ <td
1071
+ className="css-0"
1072
+ role="gridcell"
1073
+ >
1074
+ 23458
1075
+ </td>
1076
+ <td
1077
+ className="css-0"
1078
+ role="gridcell"
1079
+ >
1080
+ NY
1081
+ </td>
1082
+ </tr>
1083
+ <tr
1084
+ className="css-0"
1085
+ role="row"
1086
+ >
1087
+ <th
1088
+ className="css-0"
1089
+ scope="row"
1090
+ >
1091
+ K.K.
1092
+ </th>
1093
+ <td
1094
+ className="css-0"
1095
+ role="gridcell"
1096
+ >
1097
+ Slider
1098
+ </td>
1099
+ <td
1100
+ className="css-0"
1101
+ role="gridcell"
1102
+ >
1103
+ Totakeke
1104
+ </td>
1105
+ <td
1106
+ className="css-0"
1107
+ role="gridcell"
1108
+ >
1109
+ Niper Place
1110
+ </td>
1111
+ <td
1112
+ className="css-0"
1113
+ role="gridcell"
1114
+ >
1115
+ New York
1116
+ </td>
1117
+ <td
1118
+ className="css-0"
1119
+ role="gridcell"
1120
+ >
1121
+ 98765
1122
+ </td>
1123
+ <td
1124
+ className="css-0"
1125
+ role="gridcell"
1126
+ >
1127
+ NY
1128
+ </td>
1129
+ </tr>
1130
+ <tr
1131
+ className="css-0"
1132
+ role="row"
1133
+ >
1134
+ <th
1135
+ className="css-0"
1136
+ scope="row"
1137
+ >
1138
+ Sonny
1139
+ </th>
1140
+ <td
1141
+ className="css-0"
1142
+ role="gridcell"
1143
+ >
1144
+ Resetti
1145
+ </td>
1146
+ <td
1147
+ className="css-0"
1148
+ role="gridcell"
1149
+ >
1150
+ Risetto san
1151
+ </td>
1152
+ <td
1153
+ className="css-0"
1154
+ role="gridcell"
1155
+ >
1156
+ Village Road
1157
+ </td>
1158
+ <td
1159
+ className="css-0"
1160
+ role="gridcell"
1161
+ >
1162
+ New York
1163
+ </td>
1164
+ <td
1165
+ className="css-0"
1166
+ role="gridcell"
1167
+ >
1168
+ 09873
1169
+ </td>
1170
+ <td
1171
+ className="css-0"
1172
+ role="gridcell"
1173
+ >
1174
+ NY
1175
+ </td>
1176
+ </tr>
1177
+ </tbody>
1178
+ </table>
1179
+ `;