@nypl/design-system-react-components 0.25.9 → 0.25.10

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 (78) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/components/DatePicker/DatePicker.d.ts +1 -1
  3. package/dist/components/Fieldset/Fieldset.d.ts +1 -3
  4. package/dist/components/Form/Form.d.ts +13 -12
  5. package/dist/components/Form/FormTypes.d.ts +2 -2
  6. package/dist/components/HorizontalRule/HorizontalRule.d.ts +1 -1
  7. package/dist/components/RadioGroup/RadioGroup.d.ts +3 -3
  8. package/dist/components/SearchBar/SearchBar.d.ts +5 -5
  9. package/dist/components/Table/Table.d.ts +9 -3
  10. package/dist/components/Template/Template.d.ts +23 -4
  11. package/dist/design-system-react-components.cjs.development.js +197 -89
  12. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  13. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  14. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  15. package/dist/design-system-react-components.esm.js +186 -91
  16. package/dist/design-system-react-components.esm.js.map +1 -1
  17. package/dist/index.d.ts +4 -4
  18. package/dist/resources.scss +0 -2
  19. package/dist/theme/components/breadcrumb.d.ts +1 -1
  20. package/dist/theme/components/customTable.d.ts +12 -3
  21. package/package.json +40 -36
  22. package/src/components/Accordion/Accordion.stories.mdx +1 -1
  23. package/src/components/Accordion/Accordion.test.tsx +45 -1
  24. package/src/components/Accordion/Accordion.tsx +20 -8
  25. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +243 -0
  26. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +13 -2
  27. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +15 -0
  28. package/src/components/Breadcrumbs/Breadcrumbs.tsx +9 -3
  29. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +5 -5
  30. package/src/components/Card/Card.stories.mdx +1 -1
  31. package/src/components/Card/Card.tsx +4 -1
  32. package/src/components/Chakra/Flex.stories.mdx +113 -0
  33. package/src/components/DatePicker/DatePicker.stories.mdx +1 -1
  34. package/src/components/DatePicker/DatePicker.test.tsx +6 -6
  35. package/src/components/DatePicker/DatePicker.tsx +3 -4
  36. package/src/components/Fieldset/Fieldset.stories.mdx +1 -1
  37. package/src/components/Fieldset/Fieldset.tsx +2 -4
  38. package/src/components/Form/Form.stories.mdx +34 -16
  39. package/src/components/Form/Form.test.tsx +92 -3
  40. package/src/components/Form/Form.tsx +25 -21
  41. package/src/components/Form/FormTypes.tsx +2 -2
  42. package/src/components/Form/__snapshots__/Form.test.tsx.snap +0 -1
  43. package/src/components/Hero/Hero.stories.mdx +1 -1
  44. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +3 -2
  45. package/src/components/HorizontalRule/HorizontalRule.tsx +2 -2
  46. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +4 -4
  47. package/src/components/List/List.stories.mdx +1 -1
  48. package/src/components/List/List.tsx +1 -1
  49. package/src/components/Pagination/Pagination.stories.mdx +1 -1
  50. package/src/components/Pagination/Pagination.tsx +2 -2
  51. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +5 -5
  52. package/src/components/RadioGroup/RadioGroup.stories.mdx +1 -1
  53. package/src/components/RadioGroup/RadioGroup.test.tsx +13 -11
  54. package/src/components/RadioGroup/RadioGroup.tsx +88 -89
  55. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +18 -18
  56. package/src/components/SearchBar/SearchBar.Test.tsx +106 -28
  57. package/src/components/SearchBar/SearchBar.stories.mdx +7 -4
  58. package/src/components/SearchBar/SearchBar.tsx +19 -20
  59. package/src/components/Select/Select.test.tsx +89 -0
  60. package/src/components/Select/Select.tsx +7 -1
  61. package/src/components/Select/__snapshots__/Select.test.tsx.snap +545 -0
  62. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +7 -0
  63. package/src/components/Table/Table.stories.mdx +118 -19
  64. package/src/components/Table/Table.test.tsx +80 -3
  65. package/src/components/Table/Table.tsx +26 -16
  66. package/src/components/Table/__snapshots__/Table.test.tsx.snap +1179 -0
  67. package/src/components/Tabs/Tabs.stories.mdx +1 -1
  68. package/src/components/Tabs/Tabs.test.tsx +21 -5
  69. package/src/components/Tabs/Tabs.tsx +33 -18
  70. package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +195 -0
  71. package/src/components/Template/Template.stories.mdx +79 -4
  72. package/src/components/Template/Template.test.tsx +65 -3
  73. package/src/components/Template/Template.tsx +58 -8
  74. package/src/components/Template/__snapshots__/Template.test.tsx.snap +93 -0
  75. package/src/index.ts +8 -2
  76. package/src/theme/components/breadcrumb.ts +1 -1
  77. package/src/theme/components/customTable.ts +16 -3
  78. package/src/utils/componentCategories.ts +1 -0
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
+ `;