@hero-design/rn 8.59.0 → 8.61.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.
Files changed (35) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +12 -0
  3. package/es/index.js +220 -112
  4. package/lib/index.js +220 -112
  5. package/package.json +1 -1
  6. package/src/components/AnimatedScroller/AnimatedFAB.tsx +99 -49
  7. package/src/components/AnimatedScroller/AnimatedScrollable.tsx +18 -3
  8. package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx +30 -9
  9. package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap +474 -447
  10. package/src/components/FAB/ActionGroup/ActionItem.tsx +3 -1
  11. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +216 -211
  12. package/src/components/FAB/ActionGroup/index.tsx +34 -28
  13. package/src/components/FAB/FAB.tsx +102 -41
  14. package/src/components/FAB/StyledFAB.tsx +10 -8
  15. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +34 -38
  16. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +191 -170
  17. package/src/components/Radio/Radio.tsx +16 -4
  18. package/src/components/Radio/RadioGroup.tsx +10 -3
  19. package/src/components/Radio/StyledRadio.tsx +20 -3
  20. package/src/components/Radio/__tests__/Radio.spec.tsx +46 -13
  21. package/src/components/Radio/__tests__/RadioGroup.spec.tsx +40 -7
  22. package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap +446 -77
  23. package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap +946 -112
  24. package/src/components/Radio/types.ts +6 -1
  25. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +8 -2
  26. package/src/theme/components/radio.ts +8 -2
  27. package/types/components/AnimatedScroller/AnimatedFAB.d.ts +3 -1
  28. package/types/components/AnimatedScroller/AnimatedScrollable.d.ts +1 -1
  29. package/types/components/FAB/StyledFAB.d.ts +4 -6
  30. package/types/components/Radio/Radio.d.ts +9 -1
  31. package/types/components/Radio/RadioGroup.d.ts +5 -1
  32. package/types/components/Radio/StyledRadio.d.ts +11 -1
  33. package/types/components/Radio/index.d.ts +1 -1
  34. package/types/components/Radio/types.d.ts +1 -0
  35. package/types/theme/components/radio.d.ts +7 -1
package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`rendering renders correctly 1`] = `
3
+ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
4
4
  <View
5
5
  style={
6
6
  {
@@ -35,14 +35,17 @@ exports[`rendering renders correctly 1`] = `
35
35
  style={
36
36
  [
37
37
  {
38
- "alignItems": "center",
39
38
  "backgroundColor": "#ffffff",
40
- "borderRadius": 4,
39
+ "borderRadius": 8,
41
40
  "flexDirection": "row",
42
- "opacity": 1,
43
41
  "padding": 16,
44
42
  },
45
- undefined,
43
+ [
44
+ {
45
+ "backgroundColor": "#f6f6f7",
46
+ },
47
+ undefined,
48
+ ],
46
49
  ]
47
50
  }
48
51
  >
@@ -51,37 +54,140 @@ exports[`rendering renders correctly 1`] = `
51
54
  [
52
55
  {
53
56
  "flex": 1,
57
+ "flexDirection": "column",
58
+ "flexGrow": 2,
54
59
  },
55
60
  undefined,
56
61
  ]
57
62
  }
58
63
  >
59
- <Text
60
- allowFontScaling={false}
64
+ <View
61
65
  style={
62
- [
63
- {
64
- "color": "#001f23",
65
- "fontFamily": "BeVietnamPro-Regular",
66
- "fontSize": 16,
67
- "letterSpacing": 0.48,
68
- "lineHeight": 24,
69
- },
70
- undefined,
71
- ]
66
+ {
67
+ "alignItems": "center",
68
+ "flexDirection": "row",
69
+ }
72
70
  }
73
- themeIntent="body"
74
- themeTypeface="neutral"
75
- themeVariant="regular"
76
71
  >
77
- Everything
78
- </Text>
72
+ <View
73
+ style={
74
+ [
75
+ {
76
+ "flex": 1,
77
+ },
78
+ undefined,
79
+ ]
80
+ }
81
+ >
82
+ <Text
83
+ allowFontScaling={false}
84
+ style={
85
+ [
86
+ {
87
+ "color": "#001f23",
88
+ "fontFamily": "BeVietnamPro-Regular",
89
+ "fontSize": 16,
90
+ "letterSpacing": 0.48,
91
+ "lineHeight": 24,
92
+ },
93
+ undefined,
94
+ ]
95
+ }
96
+ themeIntent="body"
97
+ themeTypeface="neutral"
98
+ themeVariant="regular"
99
+ >
100
+ Everything
101
+ </Text>
102
+ </View>
103
+ <View
104
+ style={
105
+ [
106
+ {
107
+ "marginLeft": 8,
108
+ },
109
+ undefined,
110
+ ]
111
+ }
112
+ >
113
+ <View
114
+ style={
115
+ [
116
+ {
117
+ "alignItems": "center",
118
+ "borderColor": "#401960",
119
+ "borderRadius": 999,
120
+ "borderWidth": 2,
121
+ "height": 20,
122
+ "justifyContent": "center",
123
+ "width": 20,
124
+ },
125
+ undefined,
126
+ ]
127
+ }
128
+ />
129
+ </View>
130
+ </View>
79
131
  </View>
132
+ </View>
133
+ <View
134
+ style={
135
+ [
136
+ {
137
+ "marginTop": 16,
138
+ },
139
+ undefined,
140
+ ]
141
+ }
142
+ themeIntent="dark"
143
+ />
144
+ <View
145
+ accessibilityState={
146
+ {
147
+ "disabled": false,
148
+ }
149
+ }
150
+ accessibilityValue={
151
+ {
152
+ "max": undefined,
153
+ "min": undefined,
154
+ "now": undefined,
155
+ "text": undefined,
156
+ }
157
+ }
158
+ accessible={true}
159
+ focusable={true}
160
+ onClick={[Function]}
161
+ onResponderGrant={[Function]}
162
+ onResponderMove={[Function]}
163
+ onResponderRelease={[Function]}
164
+ onResponderTerminate={[Function]}
165
+ onResponderTerminationRequest={[Function]}
166
+ onStartShouldSetResponder={[Function]}
167
+ style={
168
+ [
169
+ {
170
+ "backgroundColor": "#ffffff",
171
+ "borderRadius": 8,
172
+ "flexDirection": "row",
173
+ "padding": 16,
174
+ },
175
+ [
176
+ {
177
+ "backgroundColor": "#f6f6f7",
178
+ },
179
+ undefined,
180
+ ],
181
+ ]
182
+ }
183
+ >
80
184
  <View
81
185
  style={
82
186
  [
83
187
  {
84
- "marginLeft": 8,
188
+ "flex": 1,
189
+ "flexDirection": "column",
190
+ "flexGrow": 2,
85
191
  },
86
192
  undefined,
87
193
  ]
@@ -89,31 +195,83 @@ exports[`rendering renders correctly 1`] = `
89
195
  >
90
196
  <View
91
197
  style={
92
- [
93
- {
94
- "alignItems": "center",
95
- "borderColor": "#001f23",
96
- "borderRadius": 999,
97
- "borderWidth": 2,
98
- "height": 20,
99
- "justifyContent": "center",
100
- "width": 20,
101
- },
102
- undefined,
103
- ]
198
+ {
199
+ "alignItems": "center",
200
+ "flexDirection": "row",
201
+ }
104
202
  }
105
- />
203
+ >
204
+ <View
205
+ style={
206
+ [
207
+ {
208
+ "flex": 1,
209
+ },
210
+ undefined,
211
+ ]
212
+ }
213
+ >
214
+ <Text
215
+ allowFontScaling={false}
216
+ style={
217
+ [
218
+ {
219
+ "color": "#001f23",
220
+ "fontFamily": "BeVietnamPro-Regular",
221
+ "fontSize": 16,
222
+ "letterSpacing": 0.48,
223
+ "lineHeight": 24,
224
+ },
225
+ undefined,
226
+ ]
227
+ }
228
+ themeIntent="body"
229
+ themeTypeface="neutral"
230
+ themeVariant="regular"
231
+ >
232
+ Direct mentions only
233
+ </Text>
234
+ </View>
235
+ <View
236
+ style={
237
+ [
238
+ {
239
+ "marginLeft": 8,
240
+ },
241
+ undefined,
242
+ ]
243
+ }
244
+ >
245
+ <View
246
+ style={
247
+ [
248
+ {
249
+ "alignItems": "center",
250
+ "borderColor": "#401960",
251
+ "borderRadius": 999,
252
+ "borderWidth": 2,
253
+ "height": 20,
254
+ "justifyContent": "center",
255
+ "width": 20,
256
+ },
257
+ undefined,
258
+ ]
259
+ }
260
+ />
261
+ </View>
262
+ </View>
106
263
  </View>
107
264
  </View>
108
265
  <View
109
266
  style={
110
267
  [
111
268
  {
112
- "marginTop": 4,
269
+ "marginTop": 16,
113
270
  },
114
271
  undefined,
115
272
  ]
116
273
  }
274
+ themeIntent="dark"
117
275
  />
118
276
  <View
119
277
  accessibilityState={
@@ -141,14 +299,186 @@ exports[`rendering renders correctly 1`] = `
141
299
  style={
142
300
  [
143
301
  {
144
- "alignItems": "center",
302
+ "backgroundColor": "#ece8ef",
303
+ "borderRadius": 8,
304
+ "flexDirection": "row",
305
+ "padding": 16,
306
+ },
307
+ [
308
+ {
309
+ "backgroundColor": "#ece8ef",
310
+ },
311
+ undefined,
312
+ ],
313
+ ]
314
+ }
315
+ >
316
+ <View
317
+ style={
318
+ [
319
+ {
320
+ "flex": 1,
321
+ "flexDirection": "column",
322
+ "flexGrow": 2,
323
+ },
324
+ undefined,
325
+ ]
326
+ }
327
+ >
328
+ <View
329
+ style={
330
+ {
331
+ "alignItems": "center",
332
+ "flexDirection": "row",
333
+ }
334
+ }
335
+ >
336
+ <View
337
+ style={
338
+ [
339
+ {
340
+ "flex": 1,
341
+ },
342
+ undefined,
343
+ ]
344
+ }
345
+ >
346
+ <Text
347
+ allowFontScaling={false}
348
+ style={
349
+ [
350
+ {
351
+ "color": "#001f23",
352
+ "fontFamily": "BeVietnamPro-Regular",
353
+ "fontSize": 16,
354
+ "letterSpacing": 0.48,
355
+ "lineHeight": 24,
356
+ },
357
+ undefined,
358
+ ]
359
+ }
360
+ themeIntent="body"
361
+ themeTypeface="neutral"
362
+ themeVariant="regular"
363
+ >
364
+ Nothing
365
+ </Text>
366
+ </View>
367
+ <View
368
+ style={
369
+ [
370
+ {
371
+ "marginLeft": 8,
372
+ },
373
+ undefined,
374
+ ]
375
+ }
376
+ >
377
+ <View
378
+ style={
379
+ [
380
+ {
381
+ "alignItems": "center",
382
+ "borderColor": "#401960",
383
+ "borderRadius": 999,
384
+ "borderWidth": 2,
385
+ "height": 20,
386
+ "justifyContent": "center",
387
+ "width": 20,
388
+ },
389
+ undefined,
390
+ ]
391
+ }
392
+ >
393
+ <View
394
+ style={
395
+ [
396
+ {
397
+ "backgroundColor": "#401960",
398
+ "borderRadius": 999,
399
+ "height": 10,
400
+ "width": 10,
401
+ },
402
+ undefined,
403
+ ]
404
+ }
405
+ testID="Nothing-selected-circle"
406
+ />
407
+ </View>
408
+ </View>
409
+ </View>
410
+ </View>
411
+ </View>
412
+ </View>
413
+ <View
414
+ pointerEvents="box-none"
415
+ position="bottom"
416
+ style={
417
+ [
418
+ {
419
+ "bottom": 0,
420
+ "elevation": 9999,
421
+ "flexDirection": "column-reverse",
422
+ "left": 0,
423
+ "paddingHorizontal": 24,
424
+ "paddingVertical": 16,
425
+ "position": "absolute",
426
+ "right": 0,
427
+ "top": 0,
428
+ },
429
+ undefined,
430
+ ]
431
+ }
432
+ />
433
+ </View>
434
+ `;
435
+
436
+ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
437
+ <View
438
+ style={
439
+ {
440
+ "flex": 1,
441
+ }
442
+ }
443
+ >
444
+ <View>
445
+ <View
446
+ accessibilityState={
447
+ {
448
+ "disabled": false,
449
+ }
450
+ }
451
+ accessibilityValue={
452
+ {
453
+ "max": undefined,
454
+ "min": undefined,
455
+ "now": undefined,
456
+ "text": undefined,
457
+ }
458
+ }
459
+ accessible={true}
460
+ focusable={true}
461
+ onClick={[Function]}
462
+ onResponderGrant={[Function]}
463
+ onResponderMove={[Function]}
464
+ onResponderRelease={[Function]}
465
+ onResponderTerminate={[Function]}
466
+ onResponderTerminationRequest={[Function]}
467
+ onStartShouldSetResponder={[Function]}
468
+ style={
469
+ [
470
+ {
145
471
  "backgroundColor": "#ffffff",
146
- "borderRadius": 4,
472
+ "borderRadius": 8,
147
473
  "flexDirection": "row",
148
- "opacity": 1,
149
474
  "padding": 16,
150
475
  },
151
- undefined,
476
+ [
477
+ {
478
+ "backgroundColor": "#ffffff",
479
+ },
480
+ undefined,
481
+ ],
152
482
  ]
153
483
  }
154
484
  >
@@ -157,37 +487,140 @@ exports[`rendering renders correctly 1`] = `
157
487
  [
158
488
  {
159
489
  "flex": 1,
490
+ "flexDirection": "column",
491
+ "flexGrow": 2,
160
492
  },
161
493
  undefined,
162
494
  ]
163
495
  }
164
496
  >
165
- <Text
166
- allowFontScaling={false}
497
+ <View
167
498
  style={
168
- [
169
- {
170
- "color": "#001f23",
171
- "fontFamily": "BeVietnamPro-Regular",
172
- "fontSize": 16,
173
- "letterSpacing": 0.48,
174
- "lineHeight": 24,
175
- },
176
- undefined,
177
- ]
499
+ {
500
+ "alignItems": "center",
501
+ "flexDirection": "row",
502
+ }
178
503
  }
179
- themeIntent="body"
180
- themeTypeface="neutral"
181
- themeVariant="regular"
182
504
  >
183
- Direct mentions only
184
- </Text>
505
+ <View
506
+ style={
507
+ [
508
+ {
509
+ "flex": 1,
510
+ },
511
+ undefined,
512
+ ]
513
+ }
514
+ >
515
+ <Text
516
+ allowFontScaling={false}
517
+ style={
518
+ [
519
+ {
520
+ "color": "#001f23",
521
+ "fontFamily": "BeVietnamPro-Regular",
522
+ "fontSize": 16,
523
+ "letterSpacing": 0.48,
524
+ "lineHeight": 24,
525
+ },
526
+ undefined,
527
+ ]
528
+ }
529
+ themeIntent="body"
530
+ themeTypeface="neutral"
531
+ themeVariant="regular"
532
+ >
533
+ Everything
534
+ </Text>
535
+ </View>
536
+ <View
537
+ style={
538
+ [
539
+ {
540
+ "marginLeft": 8,
541
+ },
542
+ undefined,
543
+ ]
544
+ }
545
+ >
546
+ <View
547
+ style={
548
+ [
549
+ {
550
+ "alignItems": "center",
551
+ "borderColor": "#401960",
552
+ "borderRadius": 999,
553
+ "borderWidth": 2,
554
+ "height": 20,
555
+ "justifyContent": "center",
556
+ "width": 20,
557
+ },
558
+ undefined,
559
+ ]
560
+ }
561
+ />
562
+ </View>
563
+ </View>
185
564
  </View>
565
+ </View>
566
+ <View
567
+ style={
568
+ [
569
+ {
570
+ "marginTop": 4,
571
+ },
572
+ undefined,
573
+ ]
574
+ }
575
+ themeIntent="light"
576
+ />
577
+ <View
578
+ accessibilityState={
579
+ {
580
+ "disabled": false,
581
+ }
582
+ }
583
+ accessibilityValue={
584
+ {
585
+ "max": undefined,
586
+ "min": undefined,
587
+ "now": undefined,
588
+ "text": undefined,
589
+ }
590
+ }
591
+ accessible={true}
592
+ focusable={true}
593
+ onClick={[Function]}
594
+ onResponderGrant={[Function]}
595
+ onResponderMove={[Function]}
596
+ onResponderRelease={[Function]}
597
+ onResponderTerminate={[Function]}
598
+ onResponderTerminationRequest={[Function]}
599
+ onStartShouldSetResponder={[Function]}
600
+ style={
601
+ [
602
+ {
603
+ "backgroundColor": "#ffffff",
604
+ "borderRadius": 8,
605
+ "flexDirection": "row",
606
+ "padding": 16,
607
+ },
608
+ [
609
+ {
610
+ "backgroundColor": "#ffffff",
611
+ },
612
+ undefined,
613
+ ],
614
+ ]
615
+ }
616
+ >
186
617
  <View
187
618
  style={
188
619
  [
189
620
  {
190
- "marginLeft": 8,
621
+ "flex": 1,
622
+ "flexDirection": "column",
623
+ "flexGrow": 2,
191
624
  },
192
625
  undefined,
193
626
  ]
@@ -195,20 +628,71 @@ exports[`rendering renders correctly 1`] = `
195
628
  >
196
629
  <View
197
630
  style={
198
- [
199
- {
200
- "alignItems": "center",
201
- "borderColor": "#001f23",
202
- "borderRadius": 999,
203
- "borderWidth": 2,
204
- "height": 20,
205
- "justifyContent": "center",
206
- "width": 20,
207
- },
208
- undefined,
209
- ]
631
+ {
632
+ "alignItems": "center",
633
+ "flexDirection": "row",
634
+ }
210
635
  }
211
- />
636
+ >
637
+ <View
638
+ style={
639
+ [
640
+ {
641
+ "flex": 1,
642
+ },
643
+ undefined,
644
+ ]
645
+ }
646
+ >
647
+ <Text
648
+ allowFontScaling={false}
649
+ style={
650
+ [
651
+ {
652
+ "color": "#001f23",
653
+ "fontFamily": "BeVietnamPro-Regular",
654
+ "fontSize": 16,
655
+ "letterSpacing": 0.48,
656
+ "lineHeight": 24,
657
+ },
658
+ undefined,
659
+ ]
660
+ }
661
+ themeIntent="body"
662
+ themeTypeface="neutral"
663
+ themeVariant="regular"
664
+ >
665
+ Direct mentions only
666
+ </Text>
667
+ </View>
668
+ <View
669
+ style={
670
+ [
671
+ {
672
+ "marginLeft": 8,
673
+ },
674
+ undefined,
675
+ ]
676
+ }
677
+ >
678
+ <View
679
+ style={
680
+ [
681
+ {
682
+ "alignItems": "center",
683
+ "borderColor": "#401960",
684
+ "borderRadius": 999,
685
+ "borderWidth": 2,
686
+ "height": 20,
687
+ "justifyContent": "center",
688
+ "width": 20,
689
+ },
690
+ undefined,
691
+ ]
692
+ }
693
+ />
694
+ </View>
695
+ </View>
212
696
  </View>
213
697
  </View>
214
698
  <View
@@ -220,6 +704,7 @@ exports[`rendering renders correctly 1`] = `
220
704
  undefined,
221
705
  ]
222
706
  }
707
+ themeIntent="light"
223
708
  />
224
709
  <View
225
710
  accessibilityState={
@@ -247,14 +732,186 @@ exports[`rendering renders correctly 1`] = `
247
732
  style={
248
733
  [
249
734
  {
250
- "alignItems": "center",
251
735
  "backgroundColor": "#ece8ef",
252
- "borderRadius": 4,
736
+ "borderRadius": 8,
253
737
  "flexDirection": "row",
254
- "opacity": 1,
255
738
  "padding": 16,
256
739
  },
257
- undefined,
740
+ [
741
+ {
742
+ "backgroundColor": "#ece8ef",
743
+ },
744
+ undefined,
745
+ ],
746
+ ]
747
+ }
748
+ >
749
+ <View
750
+ style={
751
+ [
752
+ {
753
+ "flex": 1,
754
+ "flexDirection": "column",
755
+ "flexGrow": 2,
756
+ },
757
+ undefined,
758
+ ]
759
+ }
760
+ >
761
+ <View
762
+ style={
763
+ {
764
+ "alignItems": "center",
765
+ "flexDirection": "row",
766
+ }
767
+ }
768
+ >
769
+ <View
770
+ style={
771
+ [
772
+ {
773
+ "flex": 1,
774
+ },
775
+ undefined,
776
+ ]
777
+ }
778
+ >
779
+ <Text
780
+ allowFontScaling={false}
781
+ style={
782
+ [
783
+ {
784
+ "color": "#001f23",
785
+ "fontFamily": "BeVietnamPro-Regular",
786
+ "fontSize": 16,
787
+ "letterSpacing": 0.48,
788
+ "lineHeight": 24,
789
+ },
790
+ undefined,
791
+ ]
792
+ }
793
+ themeIntent="body"
794
+ themeTypeface="neutral"
795
+ themeVariant="regular"
796
+ >
797
+ Nothing
798
+ </Text>
799
+ </View>
800
+ <View
801
+ style={
802
+ [
803
+ {
804
+ "marginLeft": 8,
805
+ },
806
+ undefined,
807
+ ]
808
+ }
809
+ >
810
+ <View
811
+ style={
812
+ [
813
+ {
814
+ "alignItems": "center",
815
+ "borderColor": "#401960",
816
+ "borderRadius": 999,
817
+ "borderWidth": 2,
818
+ "height": 20,
819
+ "justifyContent": "center",
820
+ "width": 20,
821
+ },
822
+ undefined,
823
+ ]
824
+ }
825
+ >
826
+ <View
827
+ style={
828
+ [
829
+ {
830
+ "backgroundColor": "#401960",
831
+ "borderRadius": 999,
832
+ "height": 10,
833
+ "width": 10,
834
+ },
835
+ undefined,
836
+ ]
837
+ }
838
+ testID="Nothing-selected-circle"
839
+ />
840
+ </View>
841
+ </View>
842
+ </View>
843
+ </View>
844
+ </View>
845
+ </View>
846
+ <View
847
+ pointerEvents="box-none"
848
+ position="bottom"
849
+ style={
850
+ [
851
+ {
852
+ "bottom": 0,
853
+ "elevation": 9999,
854
+ "flexDirection": "column-reverse",
855
+ "left": 0,
856
+ "paddingHorizontal": 24,
857
+ "paddingVertical": 16,
858
+ "position": "absolute",
859
+ "right": 0,
860
+ "top": 0,
861
+ },
862
+ undefined,
863
+ ]
864
+ }
865
+ />
866
+ </View>
867
+ `;
868
+
869
+ exports[`rendering renders correctly with subtext 1`] = `
870
+ <View
871
+ style={
872
+ {
873
+ "flex": 1,
874
+ }
875
+ }
876
+ >
877
+ <View>
878
+ <View
879
+ accessibilityState={
880
+ {
881
+ "disabled": false,
882
+ }
883
+ }
884
+ accessibilityValue={
885
+ {
886
+ "max": undefined,
887
+ "min": undefined,
888
+ "now": undefined,
889
+ "text": undefined,
890
+ }
891
+ }
892
+ accessible={true}
893
+ focusable={true}
894
+ onClick={[Function]}
895
+ onResponderGrant={[Function]}
896
+ onResponderMove={[Function]}
897
+ onResponderRelease={[Function]}
898
+ onResponderTerminate={[Function]}
899
+ onResponderTerminationRequest={[Function]}
900
+ onStartShouldSetResponder={[Function]}
901
+ style={
902
+ [
903
+ {
904
+ "backgroundColor": "#ffffff",
905
+ "borderRadius": 8,
906
+ "flexDirection": "row",
907
+ "padding": 16,
908
+ },
909
+ [
910
+ {
911
+ "backgroundColor": "#ffffff",
912
+ },
913
+ undefined,
914
+ ],
258
915
  ]
259
916
  }
260
917
  >
@@ -263,37 +920,159 @@ exports[`rendering renders correctly 1`] = `
263
920
  [
264
921
  {
265
922
  "flex": 1,
923
+ "flexDirection": "column",
924
+ "flexGrow": 2,
266
925
  },
267
926
  undefined,
268
927
  ]
269
928
  }
270
929
  >
271
- <Text
272
- allowFontScaling={false}
930
+ <View
273
931
  style={
274
- [
275
- {
276
- "color": "#001f23",
277
- "fontFamily": "BeVietnamPro-Regular",
278
- "fontSize": 16,
279
- "letterSpacing": 0.48,
280
- "lineHeight": 24,
281
- },
282
- undefined,
283
- ]
932
+ {
933
+ "alignItems": "center",
934
+ "flexDirection": "row",
935
+ }
284
936
  }
285
- themeIntent="body"
286
- themeTypeface="neutral"
287
- themeVariant="regular"
288
937
  >
289
- Nothing
290
- </Text>
938
+ <View
939
+ style={
940
+ [
941
+ {
942
+ "flex": 1,
943
+ },
944
+ undefined,
945
+ ]
946
+ }
947
+ >
948
+ <Text
949
+ allowFontScaling={false}
950
+ style={
951
+ [
952
+ {
953
+ "color": "#001f23",
954
+ "fontFamily": "BeVietnamPro-Regular",
955
+ "fontSize": 16,
956
+ "letterSpacing": 0.48,
957
+ "lineHeight": 24,
958
+ },
959
+ undefined,
960
+ ]
961
+ }
962
+ themeIntent="body"
963
+ themeTypeface="neutral"
964
+ themeVariant="regular"
965
+ >
966
+ On Demand
967
+ </Text>
968
+ <Text
969
+ allowFontScaling={false}
970
+ style={
971
+ [
972
+ {
973
+ "color": "#4d6265",
974
+ "fontFamily": "BeVietnamPro-Regular",
975
+ "fontSize": 12,
976
+ "letterSpacing": 0.36,
977
+ "lineHeight": 16,
978
+ },
979
+ undefined,
980
+ ]
981
+ }
982
+ themeFontWeight="regular"
983
+ themeIntent="subdued"
984
+ >
985
+ InstaPay Now
986
+ </Text>
987
+ </View>
988
+ <View
989
+ style={
990
+ [
991
+ {
992
+ "marginLeft": 8,
993
+ },
994
+ undefined,
995
+ ]
996
+ }
997
+ >
998
+ <View
999
+ style={
1000
+ [
1001
+ {
1002
+ "alignItems": "center",
1003
+ "borderColor": "#401960",
1004
+ "borderRadius": 999,
1005
+ "borderWidth": 2,
1006
+ "height": 20,
1007
+ "justifyContent": "center",
1008
+ "width": 20,
1009
+ },
1010
+ undefined,
1011
+ ]
1012
+ }
1013
+ />
1014
+ </View>
1015
+ </View>
291
1016
  </View>
1017
+ </View>
1018
+ <View
1019
+ style={
1020
+ [
1021
+ {
1022
+ "marginTop": 4,
1023
+ },
1024
+ undefined,
1025
+ ]
1026
+ }
1027
+ themeIntent="light"
1028
+ />
1029
+ <View
1030
+ accessibilityState={
1031
+ {
1032
+ "disabled": false,
1033
+ }
1034
+ }
1035
+ accessibilityValue={
1036
+ {
1037
+ "max": undefined,
1038
+ "min": undefined,
1039
+ "now": undefined,
1040
+ "text": undefined,
1041
+ }
1042
+ }
1043
+ accessible={true}
1044
+ focusable={true}
1045
+ onClick={[Function]}
1046
+ onResponderGrant={[Function]}
1047
+ onResponderMove={[Function]}
1048
+ onResponderRelease={[Function]}
1049
+ onResponderTerminate={[Function]}
1050
+ onResponderTerminationRequest={[Function]}
1051
+ onStartShouldSetResponder={[Function]}
1052
+ style={
1053
+ [
1054
+ {
1055
+ "backgroundColor": "#ffffff",
1056
+ "borderRadius": 8,
1057
+ "flexDirection": "row",
1058
+ "padding": 16,
1059
+ },
1060
+ [
1061
+ {
1062
+ "backgroundColor": "#ffffff",
1063
+ },
1064
+ undefined,
1065
+ ],
1066
+ ]
1067
+ }
1068
+ >
292
1069
  <View
293
1070
  style={
294
1071
  [
295
1072
  {
296
- "marginLeft": 8,
1073
+ "flex": 1,
1074
+ "flexDirection": "column",
1075
+ "flexGrow": 2,
297
1076
  },
298
1077
  undefined,
299
1078
  ]
@@ -301,34 +1080,89 @@ exports[`rendering renders correctly 1`] = `
301
1080
  >
302
1081
  <View
303
1082
  style={
304
- [
305
- {
306
- "alignItems": "center",
307
- "borderColor": "#001f23",
308
- "borderRadius": 999,
309
- "borderWidth": 2,
310
- "height": 20,
311
- "justifyContent": "center",
312
- "width": 20,
313
- },
314
- undefined,
315
- ]
1083
+ {
1084
+ "alignItems": "center",
1085
+ "flexDirection": "row",
1086
+ }
316
1087
  }
317
1088
  >
318
1089
  <View
319
1090
  style={
320
1091
  [
321
1092
  {
322
- "backgroundColor": "#001f23",
323
- "borderRadius": 999,
324
- "height": 10,
325
- "width": 10,
1093
+ "flex": 1,
1094
+ },
1095
+ undefined,
1096
+ ]
1097
+ }
1098
+ >
1099
+ <Text
1100
+ allowFontScaling={false}
1101
+ style={
1102
+ [
1103
+ {
1104
+ "color": "#001f23",
1105
+ "fontFamily": "BeVietnamPro-Regular",
1106
+ "fontSize": 16,
1107
+ "letterSpacing": 0.48,
1108
+ "lineHeight": 24,
1109
+ },
1110
+ undefined,
1111
+ ]
1112
+ }
1113
+ themeIntent="body"
1114
+ themeTypeface="neutral"
1115
+ themeVariant="regular"
1116
+ >
1117
+ Daily
1118
+ </Text>
1119
+ <Text
1120
+ allowFontScaling={false}
1121
+ style={
1122
+ [
1123
+ {
1124
+ "color": "#4d6265",
1125
+ "fontFamily": "BeVietnamPro-Regular",
1126
+ "fontSize": 12,
1127
+ "letterSpacing": 0.36,
1128
+ "lineHeight": 16,
1129
+ },
1130
+ undefined,
1131
+ ]
1132
+ }
1133
+ themeFontWeight="regular"
1134
+ themeIntent="subdued"
1135
+ >
1136
+ InstaPay Daily
1137
+ </Text>
1138
+ </View>
1139
+ <View
1140
+ style={
1141
+ [
1142
+ {
1143
+ "marginLeft": 8,
326
1144
  },
327
1145
  undefined,
328
1146
  ]
329
1147
  }
330
- testID="Nothing-selected-circle"
331
- />
1148
+ >
1149
+ <View
1150
+ style={
1151
+ [
1152
+ {
1153
+ "alignItems": "center",
1154
+ "borderColor": "#401960",
1155
+ "borderRadius": 999,
1156
+ "borderWidth": 2,
1157
+ "height": 20,
1158
+ "justifyContent": "center",
1159
+ "width": 20,
1160
+ },
1161
+ undefined,
1162
+ ]
1163
+ }
1164
+ />
1165
+ </View>
332
1166
  </View>
333
1167
  </View>
334
1168
  </View>