@hero-design/rn 8.75.0-alpha.0 → 8.76.0

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.
@@ -0,0 +1,751 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
4
+ <View
5
+ style={
6
+ {
7
+ "flex": 1,
8
+ }
9
+ }
10
+ >
11
+ <View
12
+ pointerEvents="box-none"
13
+ position="bottom"
14
+ style={
15
+ [
16
+ {
17
+ "bottom": 0,
18
+ "elevation": 9999,
19
+ "flexDirection": "column-reverse",
20
+ "left": 0,
21
+ "paddingHorizontal": 24,
22
+ "paddingVertical": 16,
23
+ "position": "absolute",
24
+ "right": 0,
25
+ "top": 0,
26
+ },
27
+ undefined,
28
+ ]
29
+ }
30
+ />
31
+ </View>
32
+ `;
33
+
34
+ exports[`BottomSheet renders correctly with close state 1`] = `
35
+ <View
36
+ style={
37
+ {
38
+ "flex": 1,
39
+ }
40
+ }
41
+ >
42
+ <View
43
+ pointerEvents="box-none"
44
+ position="bottom"
45
+ style={
46
+ [
47
+ {
48
+ "bottom": 0,
49
+ "elevation": 9999,
50
+ "flexDirection": "column-reverse",
51
+ "left": 0,
52
+ "paddingHorizontal": 24,
53
+ "paddingVertical": 16,
54
+ "position": "absolute",
55
+ "right": 0,
56
+ "top": 0,
57
+ },
58
+ undefined,
59
+ ]
60
+ }
61
+ />
62
+ </View>
63
+ `;
64
+
65
+ exports[`BottomSheet renders correctly with open state 1`] = `
66
+ <View
67
+ style={
68
+ {
69
+ "flex": 1,
70
+ }
71
+ }
72
+ >
73
+ <Modal
74
+ hardwareAccelerated={false}
75
+ onRequestClose={[MockFunction]}
76
+ supportedOrientations={
77
+ [
78
+ "portrait",
79
+ ]
80
+ }
81
+ transparent={true}
82
+ visible={true}
83
+ >
84
+ <View
85
+ pointerEvents="box-none"
86
+ style={
87
+ [
88
+ {
89
+ "bottom": 0,
90
+ "flexDirection": "column-reverse",
91
+ "left": 0,
92
+ "position": "absolute",
93
+ "right": 0,
94
+ "top": 0,
95
+ },
96
+ undefined,
97
+ ]
98
+ }
99
+ >
100
+ <View
101
+ onLayout={[Function]}
102
+ style={
103
+ [
104
+ [
105
+ {
106
+ "flex": 1,
107
+ "flexDirection": "column-reverse",
108
+ },
109
+ undefined,
110
+ ],
111
+ {
112
+ "paddingBottom": 0,
113
+ },
114
+ ]
115
+ }
116
+ >
117
+ <View
118
+ accessibilityState={
119
+ {
120
+ "busy": undefined,
121
+ "checked": undefined,
122
+ "disabled": undefined,
123
+ "expanded": undefined,
124
+ "selected": undefined,
125
+ }
126
+ }
127
+ accessibilityValue={
128
+ {
129
+ "max": undefined,
130
+ "min": undefined,
131
+ "now": undefined,
132
+ "text": undefined,
133
+ }
134
+ }
135
+ accessible={true}
136
+ collapsable={false}
137
+ focusable={true}
138
+ onBlur={[Function]}
139
+ onClick={[Function]}
140
+ onFocus={[Function]}
141
+ onResponderGrant={[Function]}
142
+ onResponderMove={[Function]}
143
+ onResponderRelease={[Function]}
144
+ onResponderTerminate={[Function]}
145
+ onResponderTerminationRequest={[Function]}
146
+ onStartShouldSetResponder={[Function]}
147
+ style={
148
+ {
149
+ "backgroundColor": "#000000",
150
+ "bottom": 0,
151
+ "left": 0,
152
+ "opacity": 0,
153
+ "position": "absolute",
154
+ "right": 0,
155
+ "top": 0,
156
+ }
157
+ }
158
+ />
159
+ <RCTSafeAreaView
160
+ collapsable={false}
161
+ style={
162
+ {
163
+ "backgroundColor": "#ffffff",
164
+ "borderTopLeftRadius": 16,
165
+ "borderTopRightRadius": 16,
166
+ "elevation": 10,
167
+ "maxHeight": "94%",
168
+ "shadowColor": "#001f23",
169
+ "shadowOffset": {
170
+ "height": 3,
171
+ "width": 0,
172
+ },
173
+ "shadowOpacity": 0.4,
174
+ "shadowRadius": 16,
175
+ "transform": [
176
+ {
177
+ "scaleY": 1,
178
+ },
179
+ {
180
+ "translateY": 1334,
181
+ },
182
+ ],
183
+ "width": "100%",
184
+ }
185
+ }
186
+ >
187
+ <View
188
+ style={
189
+ [
190
+ {
191
+ "flexDirection": "row",
192
+ "paddingHorizontal": 16,
193
+ "paddingVertical": 8,
194
+ },
195
+ undefined,
196
+ ]
197
+ }
198
+ >
199
+ <View
200
+ style={
201
+ [
202
+ {
203
+ "flex": 1,
204
+ "justifyContent": "center",
205
+ },
206
+ undefined,
207
+ ]
208
+ }
209
+ >
210
+ <Text
211
+ allowFontScaling={false}
212
+ style={
213
+ [
214
+ {
215
+ "color": "#001f23",
216
+ "fontFamily": "BeVietnamPro-SemiBold",
217
+ "fontSize": 16,
218
+ "letterSpacing": 0.24,
219
+ "lineHeight": 24,
220
+ },
221
+ undefined,
222
+ ]
223
+ }
224
+ themeIntent="body"
225
+ themeTypeface="neutral"
226
+ themeVariant="regular-bold"
227
+ >
228
+ Title
229
+ </Text>
230
+ </View>
231
+ <View
232
+ style={
233
+ [
234
+ {
235
+ "alignItems": "flex-end",
236
+ "height": 48,
237
+ "justifyContent": "center",
238
+ "marginLeft": 12,
239
+ "width": 48,
240
+ },
241
+ undefined,
242
+ ]
243
+ }
244
+ >
245
+ <View
246
+ accessibilityState={
247
+ {
248
+ "busy": undefined,
249
+ "checked": undefined,
250
+ "disabled": undefined,
251
+ "expanded": undefined,
252
+ "selected": undefined,
253
+ }
254
+ }
255
+ accessibilityValue={
256
+ {
257
+ "max": undefined,
258
+ "min": undefined,
259
+ "now": undefined,
260
+ "text": undefined,
261
+ }
262
+ }
263
+ accessible={true}
264
+ collapsable={false}
265
+ focusable={true}
266
+ onClick={[Function]}
267
+ onResponderGrant={[Function]}
268
+ onResponderMove={[Function]}
269
+ onResponderRelease={[Function]}
270
+ onResponderTerminate={[Function]}
271
+ onResponderTerminationRequest={[Function]}
272
+ onStartShouldSetResponder={[Function]}
273
+ style={
274
+ {
275
+ "opacity": 1,
276
+ }
277
+ }
278
+ testID="bottom-sheet-close-icon"
279
+ >
280
+ <HeroIcon
281
+ name="cancel"
282
+ style={
283
+ [
284
+ {
285
+ "color": "#001f23",
286
+ "fontSize": 16,
287
+ },
288
+ undefined,
289
+ ]
290
+ }
291
+ themeIntent="text"
292
+ themeSize="xsmall"
293
+ />
294
+ </View>
295
+ </View>
296
+ </View>
297
+ <Text>
298
+ Content
299
+ </Text>
300
+ <View>
301
+ <View
302
+ style={
303
+ [
304
+ {
305
+ "alignItems": "center",
306
+ "flexDirection": "row",
307
+ "justifyContent": "flex-end",
308
+ "paddingHorizontal": 12,
309
+ "paddingVertical": 2,
310
+ },
311
+ undefined,
312
+ ]
313
+ }
314
+ >
315
+ <View
316
+ accessibilityRole="button"
317
+ accessibilityState={
318
+ {
319
+ "busy": undefined,
320
+ "checked": undefined,
321
+ "disabled": undefined,
322
+ "expanded": undefined,
323
+ "selected": undefined,
324
+ }
325
+ }
326
+ accessibilityValue={
327
+ {
328
+ "max": undefined,
329
+ "min": undefined,
330
+ "now": undefined,
331
+ "text": undefined,
332
+ }
333
+ }
334
+ accessible={true}
335
+ collapsable={false}
336
+ focusable={false}
337
+ onClick={[Function]}
338
+ onResponderGrant={[Function]}
339
+ onResponderMove={[Function]}
340
+ onResponderRelease={[Function]}
341
+ onResponderTerminate={[Function]}
342
+ onResponderTerminationRequest={[Function]}
343
+ onStartShouldSetResponder={[Function]}
344
+ style={
345
+ {
346
+ "opacity": 1,
347
+ }
348
+ }
349
+ >
350
+ <View
351
+ style={
352
+ [
353
+ {},
354
+ ]
355
+ }
356
+ >
357
+ <Text
358
+ style={
359
+ [
360
+ {
361
+ "color": "#007AFF",
362
+ "fontSize": 18,
363
+ "margin": 8,
364
+ "textAlign": "center",
365
+ },
366
+ ]
367
+ }
368
+ >
369
+ Footer CTA
370
+ </Text>
371
+ </View>
372
+ </View>
373
+ </View>
374
+ </View>
375
+ </RCTSafeAreaView>
376
+ </View>
377
+ </View>
378
+ </Modal>
379
+ <View
380
+ pointerEvents="box-none"
381
+ position="bottom"
382
+ style={
383
+ [
384
+ {
385
+ "bottom": 0,
386
+ "elevation": 9999,
387
+ "flexDirection": "column-reverse",
388
+ "left": 0,
389
+ "paddingHorizontal": 24,
390
+ "paddingVertical": 16,
391
+ "position": "absolute",
392
+ "right": 0,
393
+ "top": 0,
394
+ },
395
+ undefined,
396
+ ]
397
+ }
398
+ />
399
+ </View>
400
+ `;
401
+
402
+ exports[`BottomSheet renders floating BottomSheet correctly 1`] = `
403
+ <View
404
+ style={
405
+ {
406
+ "flex": 1,
407
+ }
408
+ }
409
+ >
410
+ <Modal
411
+ hardwareAccelerated={false}
412
+ onRequestClose={[MockFunction]}
413
+ supportedOrientations={
414
+ [
415
+ "portrait",
416
+ ]
417
+ }
418
+ transparent={true}
419
+ visible={true}
420
+ >
421
+ <View
422
+ pointerEvents="box-none"
423
+ style={
424
+ [
425
+ {
426
+ "bottom": 0,
427
+ "flexDirection": "column-reverse",
428
+ "left": 0,
429
+ "position": "absolute",
430
+ "right": 0,
431
+ "top": 0,
432
+ },
433
+ undefined,
434
+ ]
435
+ }
436
+ >
437
+ <View
438
+ onLayout={[Function]}
439
+ style={
440
+ [
441
+ [
442
+ {
443
+ "flex": 1,
444
+ "flexDirection": "column-reverse",
445
+ },
446
+ undefined,
447
+ ],
448
+ {
449
+ "paddingBottom": 0,
450
+ },
451
+ ]
452
+ }
453
+ >
454
+ <View
455
+ accessibilityState={
456
+ {
457
+ "busy": undefined,
458
+ "checked": undefined,
459
+ "disabled": undefined,
460
+ "expanded": undefined,
461
+ "selected": undefined,
462
+ }
463
+ }
464
+ accessibilityValue={
465
+ {
466
+ "max": undefined,
467
+ "min": undefined,
468
+ "now": undefined,
469
+ "text": undefined,
470
+ }
471
+ }
472
+ accessible={true}
473
+ collapsable={false}
474
+ focusable={true}
475
+ onBlur={[Function]}
476
+ onClick={[Function]}
477
+ onFocus={[Function]}
478
+ onResponderGrant={[Function]}
479
+ onResponderMove={[Function]}
480
+ onResponderRelease={[Function]}
481
+ onResponderTerminate={[Function]}
482
+ onResponderTerminationRequest={[Function]}
483
+ onStartShouldSetResponder={[Function]}
484
+ style={
485
+ {
486
+ "backgroundColor": "#000000",
487
+ "bottom": 0,
488
+ "left": 0,
489
+ "opacity": 0,
490
+ "position": "absolute",
491
+ "right": 0,
492
+ "top": 0,
493
+ }
494
+ }
495
+ />
496
+ <RCTSafeAreaView
497
+ collapsable={false}
498
+ style={
499
+ {
500
+ "margin": 16,
501
+ }
502
+ }
503
+ >
504
+ <View
505
+ collapsable={false}
506
+ style={
507
+ {
508
+ "backgroundColor": "#ffffff",
509
+ "borderRadius": 32,
510
+ "elevation": 10,
511
+ "maxHeight": "100%",
512
+ "padding": 8,
513
+ "shadowColor": "#001f23",
514
+ "shadowOffset": {
515
+ "height": 3,
516
+ "width": 0,
517
+ },
518
+ "shadowOpacity": 0.4,
519
+ "shadowRadius": 16,
520
+ "transform": [
521
+ {
522
+ "scaleY": 1,
523
+ },
524
+ {
525
+ "translateY": 1334,
526
+ },
527
+ ],
528
+ "width": "100%",
529
+ }
530
+ }
531
+ >
532
+ <View
533
+ style={
534
+ [
535
+ {
536
+ "flexDirection": "row",
537
+ "paddingHorizontal": 16,
538
+ "paddingVertical": 8,
539
+ },
540
+ undefined,
541
+ ]
542
+ }
543
+ >
544
+ <View
545
+ style={
546
+ [
547
+ {
548
+ "flex": 1,
549
+ "justifyContent": "center",
550
+ },
551
+ undefined,
552
+ ]
553
+ }
554
+ >
555
+ <Text
556
+ allowFontScaling={false}
557
+ style={
558
+ [
559
+ {
560
+ "color": "#001f23",
561
+ "fontFamily": "BeVietnamPro-SemiBold",
562
+ "fontSize": 16,
563
+ "letterSpacing": 0.24,
564
+ "lineHeight": 24,
565
+ },
566
+ undefined,
567
+ ]
568
+ }
569
+ themeIntent="body"
570
+ themeTypeface="neutral"
571
+ themeVariant="regular-bold"
572
+ >
573
+ Title
574
+ </Text>
575
+ </View>
576
+ <View
577
+ style={
578
+ [
579
+ {
580
+ "alignItems": "flex-end",
581
+ "height": 48,
582
+ "justifyContent": "center",
583
+ "marginLeft": 12,
584
+ "width": 48,
585
+ },
586
+ undefined,
587
+ ]
588
+ }
589
+ >
590
+ <View
591
+ accessibilityState={
592
+ {
593
+ "busy": undefined,
594
+ "checked": undefined,
595
+ "disabled": undefined,
596
+ "expanded": undefined,
597
+ "selected": undefined,
598
+ }
599
+ }
600
+ accessibilityValue={
601
+ {
602
+ "max": undefined,
603
+ "min": undefined,
604
+ "now": undefined,
605
+ "text": undefined,
606
+ }
607
+ }
608
+ accessible={true}
609
+ collapsable={false}
610
+ focusable={true}
611
+ onClick={[Function]}
612
+ onResponderGrant={[Function]}
613
+ onResponderMove={[Function]}
614
+ onResponderRelease={[Function]}
615
+ onResponderTerminate={[Function]}
616
+ onResponderTerminationRequest={[Function]}
617
+ onStartShouldSetResponder={[Function]}
618
+ style={
619
+ {
620
+ "backgroundColor": "#dadbde",
621
+ "borderRadius": 999,
622
+ "opacity": 1,
623
+ "padding": 8,
624
+ }
625
+ }
626
+ testID="bottom-sheet-close-icon"
627
+ >
628
+ <HeroIcon
629
+ name="cancel"
630
+ style={
631
+ [
632
+ {
633
+ "color": "#001f23",
634
+ "fontSize": 24,
635
+ },
636
+ {
637
+ "fontSize": 12,
638
+ },
639
+ ]
640
+ }
641
+ themeIntent="text"
642
+ themeSize="medium"
643
+ />
644
+ </View>
645
+ </View>
646
+ </View>
647
+ <Text>
648
+ Content
649
+ </Text>
650
+ <View>
651
+ <View
652
+ style={
653
+ [
654
+ {
655
+ "alignItems": "center",
656
+ "flexDirection": "row",
657
+ "justifyContent": "flex-end",
658
+ "paddingHorizontal": 12,
659
+ "paddingVertical": 2,
660
+ },
661
+ undefined,
662
+ ]
663
+ }
664
+ >
665
+ <View
666
+ accessibilityRole="button"
667
+ accessibilityState={
668
+ {
669
+ "busy": undefined,
670
+ "checked": undefined,
671
+ "disabled": undefined,
672
+ "expanded": undefined,
673
+ "selected": undefined,
674
+ }
675
+ }
676
+ accessibilityValue={
677
+ {
678
+ "max": undefined,
679
+ "min": undefined,
680
+ "now": undefined,
681
+ "text": undefined,
682
+ }
683
+ }
684
+ accessible={true}
685
+ collapsable={false}
686
+ focusable={false}
687
+ onClick={[Function]}
688
+ onResponderGrant={[Function]}
689
+ onResponderMove={[Function]}
690
+ onResponderRelease={[Function]}
691
+ onResponderTerminate={[Function]}
692
+ onResponderTerminationRequest={[Function]}
693
+ onStartShouldSetResponder={[Function]}
694
+ style={
695
+ {
696
+ "opacity": 1,
697
+ }
698
+ }
699
+ >
700
+ <View
701
+ style={
702
+ [
703
+ {},
704
+ ]
705
+ }
706
+ >
707
+ <Text
708
+ style={
709
+ [
710
+ {
711
+ "color": "#007AFF",
712
+ "fontSize": 18,
713
+ "margin": 8,
714
+ "textAlign": "center",
715
+ },
716
+ ]
717
+ }
718
+ >
719
+ Footer CTA
720
+ </Text>
721
+ </View>
722
+ </View>
723
+ </View>
724
+ </View>
725
+ </View>
726
+ </RCTSafeAreaView>
727
+ </View>
728
+ </View>
729
+ </Modal>
730
+ <View
731
+ pointerEvents="box-none"
732
+ position="bottom"
733
+ style={
734
+ [
735
+ {
736
+ "bottom": 0,
737
+ "elevation": 9999,
738
+ "flexDirection": "column-reverse",
739
+ "left": 0,
740
+ "paddingHorizontal": 24,
741
+ "paddingVertical": 16,
742
+ "position": "absolute",
743
+ "right": 0,
744
+ "top": 0,
745
+ },
746
+ undefined,
747
+ ]
748
+ }
749
+ />
750
+ </View>
751
+ `;