@ornikar/bumper 3.13.0 → 3.14.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 (68) hide show
  1. package/CHANGELOG.md +6 -143
  2. package/dist/definitions/index.d.ts +2 -0
  3. package/dist/definitions/index.d.ts.map +1 -1
  4. package/dist/definitions/system/core/themes/light/light.d.ts.map +1 -1
  5. package/dist/definitions/system/core/themes/types.d.ts +3 -1
  6. package/dist/definitions/system/core/themes/types.d.ts.map +1 -1
  7. package/dist/definitions/system/dataDisplays/Avatar/Avatar.d.ts +52 -0
  8. package/dist/definitions/system/dataDisplays/Avatar/Avatar.d.ts.map +1 -0
  9. package/dist/definitions/system/dataDisplays/Avatar/components/AvatarImage.d.ts +5 -0
  10. package/dist/definitions/system/dataDisplays/Avatar/components/AvatarImage.d.ts.map +1 -0
  11. package/dist/definitions/system/dataDisplays/Avatar/components/AvatarInitial.d.ts +6 -0
  12. package/dist/definitions/system/dataDisplays/Avatar/components/AvatarInitial.d.ts.map +1 -0
  13. package/dist/definitions/system/dataDisplays/Avatar/context.d.ts +3 -0
  14. package/dist/definitions/system/dataDisplays/Avatar/context.d.ts.map +1 -0
  15. package/dist/index-metro.es.android.js +141 -9
  16. package/dist/index-metro.es.android.js.map +1 -1
  17. package/dist/index-metro.es.ios.js +141 -9
  18. package/dist/index-metro.es.ios.js.map +1 -1
  19. package/dist/index-node-22.22.cjs.js +140 -7
  20. package/dist/index-node-22.22.cjs.js.map +1 -1
  21. package/dist/index-node-22.22.cjs.web.js +140 -7
  22. package/dist/index-node-22.22.cjs.web.js.map +1 -1
  23. package/dist/index-node-22.22.es.mjs +140 -9
  24. package/dist/index-node-22.22.es.mjs.map +1 -1
  25. package/dist/index-node-22.22.es.web.mjs +140 -9
  26. package/dist/index-node-22.22.es.web.mjs.map +1 -1
  27. package/dist/index.es.js +140 -9
  28. package/dist/index.es.js.map +1 -1
  29. package/dist/index.es.web.js +140 -9
  30. package/dist/index.es.web.js.map +1 -1
  31. package/dist/storybook-metro.es.android.js +3 -1
  32. package/dist/storybook-metro.es.android.js.map +1 -1
  33. package/dist/storybook-metro.es.ios.js +3 -1
  34. package/dist/storybook-metro.es.ios.js.map +1 -1
  35. package/dist/storybook-node-22.22.cjs.js +3 -1
  36. package/dist/storybook-node-22.22.cjs.js.map +1 -1
  37. package/dist/storybook-node-22.22.cjs.web.js +3 -1
  38. package/dist/storybook-node-22.22.cjs.web.js.map +1 -1
  39. package/dist/storybook-node-22.22.es.mjs +3 -1
  40. package/dist/storybook-node-22.22.es.mjs.map +1 -1
  41. package/dist/storybook-node-22.22.es.web.mjs +3 -1
  42. package/dist/storybook-node-22.22.es.web.mjs.map +1 -1
  43. package/dist/storybook.es.js +3 -1
  44. package/dist/storybook.es.js.map +1 -1
  45. package/dist/storybook.es.web.js +3 -1
  46. package/dist/storybook.es.web.js.map +1 -1
  47. package/dist/tsbuildinfo +1 -1
  48. package/docs/migration/Avatar.md +228 -0
  49. package/package.json +1 -1
  50. package/src/Bumper.mdx +1 -0
  51. package/src/index.ts +2 -0
  52. package/src/system/core/themes/light/__snapshots__/light.stories.tsx.snap +73 -0
  53. package/src/system/core/themes/light/__snapshots_web__/light.stories.tsx.snap +21 -0
  54. package/src/system/core/themes/light/light.ts +3 -0
  55. package/src/system/core/themes/types.ts +5 -1
  56. package/src/system/dataDisplays/Avatar/Avatar.features.stories.tsx +110 -0
  57. package/src/system/dataDisplays/Avatar/Avatar.mdx +73 -0
  58. package/src/system/dataDisplays/Avatar/Avatar.stories.tsx +47 -0
  59. package/src/system/dataDisplays/Avatar/Avatar.tsx +124 -0
  60. package/src/system/dataDisplays/Avatar/__snapshots__/Avatar.features.stories.tsx.snap +891 -0
  61. package/src/system/dataDisplays/Avatar/__snapshots__/Avatar.stories.tsx.snap +50 -0
  62. package/src/system/dataDisplays/Avatar/__snapshots_web__/Avatar.features.stories.tsx.snap +545 -0
  63. package/src/system/dataDisplays/Avatar/__snapshots_web__/Avatar.stories.tsx.snap +37 -0
  64. package/src/system/dataDisplays/Avatar/assets/avatar-placeholder-disabled.webp +0 -0
  65. package/src/system/dataDisplays/Avatar/assets/avatar-placeholder.webp +0 -0
  66. package/src/system/dataDisplays/Avatar/components/AvatarImage.tsx +34 -0
  67. package/src/system/dataDisplays/Avatar/components/AvatarInitial.tsx +30 -0
  68. package/src/system/dataDisplays/Avatar/context.ts +10 -0
package/src/system/dataDisplays/Avatar/__snapshots__/Avatar.features.stories.tsx.snap ADDED
@@ -0,0 +1,891 @@
1
+ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
+
3
+ exports[`Bumper/Data Displays/Avatar/Features CircleSizes 1`] = `
4
+ <RNCSafeAreaProvider
5
+ onInsetsChange={[Function]}
6
+ style={
7
+ [
8
+ {
9
+ "flex": 1,
10
+ },
11
+ undefined,
12
+ ]
13
+ }
14
+ >
15
+ <View
16
+ style={
17
+ {
18
+ "alignItems": "center",
19
+ "flexDirection": "row",
20
+ "gap": 16,
21
+ }
22
+ }
23
+ >
24
+ <View
25
+ firstname="John"
26
+ lastname="Doe"
27
+ style={
28
+ {
29
+ "alignItems": "center",
30
+ "backgroundColor": "#EAE3D6",
31
+ "borderBottomLeftRadius": 1000,
32
+ "borderBottomRightRadius": 1000,
33
+ "borderTopLeftRadius": 1000,
34
+ "borderTopRightRadius": 1000,
35
+ "height": 32,
36
+ "justifyContent": "center",
37
+ "overflow": "hidden",
38
+ "width": 32,
39
+ }
40
+ }
41
+ >
42
+ <Text
43
+ style={
44
+ {
45
+ "color": "#563B56",
46
+ "fontFamily": "GTStandardSemibold",
47
+ "fontSize": 14,
48
+ "letterSpacing": 0,
49
+ "lineHeight": 18,
50
+ "textAlign": "left",
51
+ }
52
+ }
53
+ suppressHighlighting={true}
54
+ >
55
+ JD
56
+ </Text>
57
+ </View>
58
+ <View
59
+ firstname="John"
60
+ lastname="Doe"
61
+ style={
62
+ {
63
+ "alignItems": "center",
64
+ "backgroundColor": "#EAE3D6",
65
+ "borderBottomLeftRadius": 1000,
66
+ "borderBottomRightRadius": 1000,
67
+ "borderTopLeftRadius": 1000,
68
+ "borderTopRightRadius": 1000,
69
+ "height": 40,
70
+ "justifyContent": "center",
71
+ "overflow": "hidden",
72
+ "width": 40,
73
+ }
74
+ }
75
+ >
76
+ <Text
77
+ style={
78
+ {
79
+ "color": "#563B56",
80
+ "fontFamily": "GTStandardSemibold",
81
+ "fontSize": 16,
82
+ "letterSpacing": 0,
83
+ "lineHeight": 20,
84
+ "textAlign": "left",
85
+ }
86
+ }
87
+ suppressHighlighting={true}
88
+ >
89
+ JD
90
+ </Text>
91
+ </View>
92
+ <View
93
+ firstname="John"
94
+ lastname="Doe"
95
+ style={
96
+ {
97
+ "alignItems": "center",
98
+ "backgroundColor": "#EAE3D6",
99
+ "borderBottomLeftRadius": 1000,
100
+ "borderBottomRightRadius": 1000,
101
+ "borderTopLeftRadius": 1000,
102
+ "borderTopRightRadius": 1000,
103
+ "height": 48,
104
+ "justifyContent": "center",
105
+ "overflow": "hidden",
106
+ "width": 48,
107
+ }
108
+ }
109
+ >
110
+ <Text
111
+ style={
112
+ {
113
+ "color": "#563B56",
114
+ "fontFamily": "GTStandardSemibold",
115
+ "fontSize": 16,
116
+ "letterSpacing": 0,
117
+ "lineHeight": 20,
118
+ "textAlign": "left",
119
+ }
120
+ }
121
+ suppressHighlighting={true}
122
+ >
123
+ JD
124
+ </Text>
125
+ </View>
126
+ <View
127
+ firstname="John"
128
+ lastname="Doe"
129
+ style={
130
+ {
131
+ "alignItems": "center",
132
+ "backgroundColor": "#EAE3D6",
133
+ "borderBottomLeftRadius": 1000,
134
+ "borderBottomRightRadius": 1000,
135
+ "borderTopLeftRadius": 1000,
136
+ "borderTopRightRadius": 1000,
137
+ "height": 64,
138
+ "justifyContent": "center",
139
+ "overflow": "hidden",
140
+ "width": 64,
141
+ }
142
+ }
143
+ >
144
+ <Text
145
+ style={
146
+ {
147
+ "color": "#563B56",
148
+ "fontFamily": "GTStandardSemibold",
149
+ "fontSize": 16,
150
+ "letterSpacing": 0,
151
+ "lineHeight": 20,
152
+ "textAlign": "left",
153
+ }
154
+ }
155
+ suppressHighlighting={true}
156
+ >
157
+ JD
158
+ </Text>
159
+ </View>
160
+ </View>
161
+ </RNCSafeAreaProvider>
162
+ `;
163
+
164
+ exports[`Bumper/Data Displays/Avatar/Features Disabled 1`] = `
165
+ <RNCSafeAreaProvider
166
+ onInsetsChange={[Function]}
167
+ style={
168
+ [
169
+ {
170
+ "flex": 1,
171
+ },
172
+ undefined,
173
+ ]
174
+ }
175
+ >
176
+ <View
177
+ style={
178
+ {
179
+ "alignItems": "center",
180
+ "flexDirection": "row",
181
+ "gap": 16,
182
+ }
183
+ }
184
+ >
185
+ <View
186
+ style={
187
+ {
188
+ "alignItems": "center",
189
+ "backgroundColor": "#BABABA",
190
+ "borderBottomLeftRadius": 4,
191
+ "borderBottomRightRadius": 4,
192
+ "borderTopLeftRadius": 4,
193
+ "borderTopRightRadius": 4,
194
+ "height": 48,
195
+ "justifyContent": "center",
196
+ "overflow": "hidden",
197
+ "width": 48,
198
+ }
199
+ }
200
+ >
201
+ <Image
202
+ alt=""
203
+ resizeMode="contain"
204
+ source={
205
+ {
206
+ "testUri": "../../../@ornikar/bumper/src/system/dataDisplays/Avatar/assets/avatar-placeholder-disabled.webp",
207
+ }
208
+ }
209
+ style={
210
+ {
211
+ "height": "100%",
212
+ "width": "100%",
213
+ }
214
+ }
215
+ />
216
+ <View
217
+ style={
218
+ {
219
+ "backgroundColor": "#F7F4EE",
220
+ "height": "100%",
221
+ "opacity": 0.5,
222
+ "position": "absolute",
223
+ "width": "100%",
224
+ }
225
+ }
226
+ />
227
+ </View>
228
+ <View
229
+ firstname="John"
230
+ lastname="Doe"
231
+ style={
232
+ {
233
+ "alignItems": "center",
234
+ "backgroundColor": "#BABABA",
235
+ "borderBottomLeftRadius": 4,
236
+ "borderBottomRightRadius": 4,
237
+ "borderTopLeftRadius": 4,
238
+ "borderTopRightRadius": 4,
239
+ "height": 48,
240
+ "justifyContent": "center",
241
+ "overflow": "hidden",
242
+ "width": 48,
243
+ }
244
+ }
245
+ >
246
+ <Text
247
+ style={
248
+ {
249
+ "color": "#ffffff",
250
+ "fontFamily": "GTStandardSemibold",
251
+ "fontSize": 16,
252
+ "letterSpacing": 0,
253
+ "lineHeight": 20,
254
+ "textAlign": "left",
255
+ }
256
+ }
257
+ suppressHighlighting={true}
258
+ >
259
+ JD
260
+ </Text>
261
+ </View>
262
+ <View
263
+ src="https://i.pravatar.cc/150?img=5"
264
+ style={
265
+ {
266
+ "alignItems": "center",
267
+ "backgroundColor": "#BABABA",
268
+ "borderBottomLeftRadius": 4,
269
+ "borderBottomRightRadius": 4,
270
+ "borderTopLeftRadius": 4,
271
+ "borderTopRightRadius": 4,
272
+ "height": 48,
273
+ "justifyContent": "center",
274
+ "overflow": "hidden",
275
+ "width": 48,
276
+ }
277
+ }
278
+ >
279
+ <Image
280
+ alt=""
281
+ resizeMode="contain"
282
+ source={
283
+ {
284
+ "uri": "https://i.pravatar.cc/150?img=5",
285
+ }
286
+ }
287
+ style={
288
+ {
289
+ "height": "100%",
290
+ "width": "100%",
291
+ }
292
+ }
293
+ />
294
+ <View
295
+ style={
296
+ {
297
+ "backgroundColor": "#F7F4EE",
298
+ "height": "100%",
299
+ "opacity": 0.5,
300
+ "position": "absolute",
301
+ "width": "100%",
302
+ }
303
+ }
304
+ />
305
+ </View>
306
+ </View>
307
+ </RNCSafeAreaProvider>
308
+ `;
309
+
310
+ exports[`Bumper/Data Displays/Avatar/Features DisabledShapes 1`] = `
311
+ <RNCSafeAreaProvider
312
+ onInsetsChange={[Function]}
313
+ style={
314
+ [
315
+ {
316
+ "flex": 1,
317
+ },
318
+ undefined,
319
+ ]
320
+ }
321
+ >
322
+ <View
323
+ style={
324
+ {
325
+ "alignItems": "center",
326
+ "flexDirection": "row",
327
+ "gap": 16,
328
+ }
329
+ }
330
+ >
331
+ <View
332
+ firstname="John"
333
+ lastname="Doe"
334
+ style={
335
+ {
336
+ "alignItems": "center",
337
+ "backgroundColor": "#BABABA",
338
+ "borderBottomLeftRadius": 4,
339
+ "borderBottomRightRadius": 4,
340
+ "borderTopLeftRadius": 4,
341
+ "borderTopRightRadius": 4,
342
+ "height": 48,
343
+ "justifyContent": "center",
344
+ "overflow": "hidden",
345
+ "width": 48,
346
+ }
347
+ }
348
+ >
349
+ <Text
350
+ style={
351
+ {
352
+ "color": "#ffffff",
353
+ "fontFamily": "GTStandardSemibold",
354
+ "fontSize": 16,
355
+ "letterSpacing": 0,
356
+ "lineHeight": 20,
357
+ "textAlign": "left",
358
+ }
359
+ }
360
+ suppressHighlighting={true}
361
+ >
362
+ JD
363
+ </Text>
364
+ </View>
365
+ <View
366
+ firstname="John"
367
+ lastname="Doe"
368
+ style={
369
+ {
370
+ "alignItems": "center",
371
+ "backgroundColor": "#BABABA",
372
+ "borderBottomLeftRadius": 1000,
373
+ "borderBottomRightRadius": 1000,
374
+ "borderTopLeftRadius": 1000,
375
+ "borderTopRightRadius": 1000,
376
+ "height": 48,
377
+ "justifyContent": "center",
378
+ "overflow": "hidden",
379
+ "width": 48,
380
+ }
381
+ }
382
+ >
383
+ <Text
384
+ style={
385
+ {
386
+ "color": "#ffffff",
387
+ "fontFamily": "GTStandardSemibold",
388
+ "fontSize": 16,
389
+ "letterSpacing": 0,
390
+ "lineHeight": 20,
391
+ "textAlign": "left",
392
+ }
393
+ }
394
+ suppressHighlighting={true}
395
+ >
396
+ JD
397
+ </Text>
398
+ </View>
399
+ </View>
400
+ </RNCSafeAreaProvider>
401
+ `;
402
+
403
+ exports[`Bumper/Data Displays/Avatar/Features Placeholder 1`] = `
404
+ <RNCSafeAreaProvider
405
+ onInsetsChange={[Function]}
406
+ style={
407
+ [
408
+ {
409
+ "flex": 1,
410
+ },
411
+ undefined,
412
+ ]
413
+ }
414
+ >
415
+ <View
416
+ style={
417
+ {
418
+ "alignItems": "center",
419
+ "backgroundColor": "#EAE3D6",
420
+ "borderBottomLeftRadius": 4,
421
+ "borderBottomRightRadius": 4,
422
+ "borderTopLeftRadius": 4,
423
+ "borderTopRightRadius": 4,
424
+ "height": 48,
425
+ "justifyContent": "center",
426
+ "overflow": "hidden",
427
+ "width": 48,
428
+ }
429
+ }
430
+ >
431
+ <Image
432
+ alt=""
433
+ resizeMode="contain"
434
+ source={
435
+ {
436
+ "testUri": "../../../@ornikar/bumper/src/system/dataDisplays/Avatar/assets/avatar-placeholder.webp",
437
+ }
438
+ }
439
+ style={
440
+ {
441
+ "height": "100%",
442
+ "width": "100%",
443
+ }
444
+ }
445
+ />
446
+ </View>
447
+ </RNCSafeAreaProvider>
448
+ `;
449
+
450
+ exports[`Bumper/Data Displays/Avatar/Features Responsive 1`] = `
451
+ <RNCSafeAreaProvider
452
+ onInsetsChange={[Function]}
453
+ style={
454
+ [
455
+ {
456
+ "flex": 1,
457
+ },
458
+ undefined,
459
+ ]
460
+ }
461
+ >
462
+ <View
463
+ style={
464
+ {
465
+ "flexDirection": "column",
466
+ "gap": 16,
467
+ }
468
+ }
469
+ >
470
+ <View
471
+ firstname="John"
472
+ lastname="Doe"
473
+ style={
474
+ {
475
+ "alignItems": "center",
476
+ "backgroundColor": "#EAE3D6",
477
+ "borderBottomLeftRadius": 4,
478
+ "borderBottomRightRadius": 4,
479
+ "borderTopLeftRadius": 4,
480
+ "borderTopRightRadius": 4,
481
+ "height": 32,
482
+ "justifyContent": "center",
483
+ "overflow": "hidden",
484
+ "width": 32,
485
+ }
486
+ }
487
+ >
488
+ <Text
489
+ style={
490
+ {
491
+ "color": "#563B56",
492
+ "fontFamily": "GTStandardSemibold",
493
+ "fontSize": 14,
494
+ "letterSpacing": 0,
495
+ "lineHeight": 18,
496
+ "textAlign": "left",
497
+ }
498
+ }
499
+ suppressHighlighting={true}
500
+ >
501
+ JD
502
+ </Text>
503
+ </View>
504
+ <View
505
+ firstname="John"
506
+ lastname="Doe"
507
+ style={
508
+ {
509
+ "alignItems": "center",
510
+ "backgroundColor": "#EAE3D6",
511
+ "borderBottomLeftRadius": 4,
512
+ "borderBottomRightRadius": 4,
513
+ "borderTopLeftRadius": 4,
514
+ "borderTopRightRadius": 4,
515
+ "height": 48,
516
+ "justifyContent": "center",
517
+ "overflow": "hidden",
518
+ "width": 48,
519
+ }
520
+ }
521
+ >
522
+ <Text
523
+ style={
524
+ {
525
+ "color": "#563B56",
526
+ "fontFamily": "GTStandardSemibold",
527
+ "fontSize": 16,
528
+ "letterSpacing": 0,
529
+ "lineHeight": 20,
530
+ "textAlign": "left",
531
+ }
532
+ }
533
+ suppressHighlighting={true}
534
+ >
535
+ JD
536
+ </Text>
537
+ </View>
538
+ </View>
539
+ </RNCSafeAreaProvider>
540
+ `;
541
+
542
+ exports[`Bumper/Data Displays/Avatar/Features Shapes 1`] = `
543
+ <RNCSafeAreaProvider
544
+ onInsetsChange={[Function]}
545
+ style={
546
+ [
547
+ {
548
+ "flex": 1,
549
+ },
550
+ undefined,
551
+ ]
552
+ }
553
+ >
554
+ <View
555
+ style={
556
+ {
557
+ "alignItems": "center",
558
+ "flexDirection": "row",
559
+ "gap": 16,
560
+ }
561
+ }
562
+ >
563
+ <View
564
+ firstname="John"
565
+ lastname="Doe"
566
+ style={
567
+ {
568
+ "alignItems": "center",
569
+ "backgroundColor": "#EAE3D6",
570
+ "borderBottomLeftRadius": 4,
571
+ "borderBottomRightRadius": 4,
572
+ "borderTopLeftRadius": 4,
573
+ "borderTopRightRadius": 4,
574
+ "height": 48,
575
+ "justifyContent": "center",
576
+ "overflow": "hidden",
577
+ "width": 48,
578
+ }
579
+ }
580
+ >
581
+ <Text
582
+ style={
583
+ {
584
+ "color": "#563B56",
585
+ "fontFamily": "GTStandardSemibold",
586
+ "fontSize": 16,
587
+ "letterSpacing": 0,
588
+ "lineHeight": 20,
589
+ "textAlign": "left",
590
+ }
591
+ }
592
+ suppressHighlighting={true}
593
+ >
594
+ JD
595
+ </Text>
596
+ </View>
597
+ <View
598
+ firstname="John"
599
+ lastname="Doe"
600
+ style={
601
+ {
602
+ "alignItems": "center",
603
+ "backgroundColor": "#EAE3D6",
604
+ "borderBottomLeftRadius": 1000,
605
+ "borderBottomRightRadius": 1000,
606
+ "borderTopLeftRadius": 1000,
607
+ "borderTopRightRadius": 1000,
608
+ "height": 48,
609
+ "justifyContent": "center",
610
+ "overflow": "hidden",
611
+ "width": 48,
612
+ }
613
+ }
614
+ >
615
+ <Text
616
+ style={
617
+ {
618
+ "color": "#563B56",
619
+ "fontFamily": "GTStandardSemibold",
620
+ "fontSize": 16,
621
+ "letterSpacing": 0,
622
+ "lineHeight": 20,
623
+ "textAlign": "left",
624
+ }
625
+ }
626
+ suppressHighlighting={true}
627
+ >
628
+ JD
629
+ </Text>
630
+ </View>
631
+ </View>
632
+ </RNCSafeAreaProvider>
633
+ `;
634
+
635
+ exports[`Bumper/Data Displays/Avatar/Features Sizes 1`] = `
636
+ <RNCSafeAreaProvider
637
+ onInsetsChange={[Function]}
638
+ style={
639
+ [
640
+ {
641
+ "flex": 1,
642
+ },
643
+ undefined,
644
+ ]
645
+ }
646
+ >
647
+ <View
648
+ style={
649
+ {
650
+ "alignItems": "center",
651
+ "flexDirection": "row",
652
+ "gap": 16,
653
+ }
654
+ }
655
+ >
656
+ <View
657
+ firstname="John"
658
+ lastname="Doe"
659
+ style={
660
+ {
661
+ "alignItems": "center",
662
+ "backgroundColor": "#EAE3D6",
663
+ "borderBottomLeftRadius": 4,
664
+ "borderBottomRightRadius": 4,
665
+ "borderTopLeftRadius": 4,
666
+ "borderTopRightRadius": 4,
667
+ "height": 32,
668
+ "justifyContent": "center",
669
+ "overflow": "hidden",
670
+ "width": 32,
671
+ }
672
+ }
673
+ >
674
+ <Text
675
+ style={
676
+ {
677
+ "color": "#563B56",
678
+ "fontFamily": "GTStandardSemibold",
679
+ "fontSize": 14,
680
+ "letterSpacing": 0,
681
+ "lineHeight": 18,
682
+ "textAlign": "left",
683
+ }
684
+ }
685
+ suppressHighlighting={true}
686
+ >
687
+ JD
688
+ </Text>
689
+ </View>
690
+ <View
691
+ firstname="John"
692
+ lastname="Doe"
693
+ style={
694
+ {
695
+ "alignItems": "center",
696
+ "backgroundColor": "#EAE3D6",
697
+ "borderBottomLeftRadius": 4,
698
+ "borderBottomRightRadius": 4,
699
+ "borderTopLeftRadius": 4,
700
+ "borderTopRightRadius": 4,
701
+ "height": 40,
702
+ "justifyContent": "center",
703
+ "overflow": "hidden",
704
+ "width": 40,
705
+ }
706
+ }
707
+ >
708
+ <Text
709
+ style={
710
+ {
711
+ "color": "#563B56",
712
+ "fontFamily": "GTStandardSemibold",
713
+ "fontSize": 16,
714
+ "letterSpacing": 0,
715
+ "lineHeight": 20,
716
+ "textAlign": "left",
717
+ }
718
+ }
719
+ suppressHighlighting={true}
720
+ >
721
+ JD
722
+ </Text>
723
+ </View>
724
+ <View
725
+ firstname="John"
726
+ lastname="Doe"
727
+ style={
728
+ {
729
+ "alignItems": "center",
730
+ "backgroundColor": "#EAE3D6",
731
+ "borderBottomLeftRadius": 4,
732
+ "borderBottomRightRadius": 4,
733
+ "borderTopLeftRadius": 4,
734
+ "borderTopRightRadius": 4,
735
+ "height": 48,
736
+ "justifyContent": "center",
737
+ "overflow": "hidden",
738
+ "width": 48,
739
+ }
740
+ }
741
+ >
742
+ <Text
743
+ style={
744
+ {
745
+ "color": "#563B56",
746
+ "fontFamily": "GTStandardSemibold",
747
+ "fontSize": 16,
748
+ "letterSpacing": 0,
749
+ "lineHeight": 20,
750
+ "textAlign": "left",
751
+ }
752
+ }
753
+ suppressHighlighting={true}
754
+ >
755
+ JD
756
+ </Text>
757
+ </View>
758
+ <View
759
+ firstname="John"
760
+ lastname="Doe"
761
+ style={
762
+ {
763
+ "alignItems": "center",
764
+ "backgroundColor": "#EAE3D6",
765
+ "borderBottomLeftRadius": 4,
766
+ "borderBottomRightRadius": 4,
767
+ "borderTopLeftRadius": 4,
768
+ "borderTopRightRadius": 4,
769
+ "height": 64,
770
+ "justifyContent": "center",
771
+ "overflow": "hidden",
772
+ "width": 64,
773
+ }
774
+ }
775
+ >
776
+ <Text
777
+ style={
778
+ {
779
+ "color": "#563B56",
780
+ "fontFamily": "GTStandardSemibold",
781
+ "fontSize": 16,
782
+ "letterSpacing": 0,
783
+ "lineHeight": 20,
784
+ "textAlign": "left",
785
+ }
786
+ }
787
+ suppressHighlighting={true}
788
+ >
789
+ JD
790
+ </Text>
791
+ </View>
792
+ </View>
793
+ </RNCSafeAreaProvider>
794
+ `;
795
+
796
+ exports[`Bumper/Data Displays/Avatar/Features WithImage 1`] = `
797
+ <RNCSafeAreaProvider
798
+ onInsetsChange={[Function]}
799
+ style={
800
+ [
801
+ {
802
+ "flex": 1,
803
+ },
804
+ undefined,
805
+ ]
806
+ }
807
+ >
808
+ <View
809
+ src="https://i.pravatar.cc/150?img=5"
810
+ style={
811
+ {
812
+ "alignItems": "center",
813
+ "backgroundColor": "#EAE3D6",
814
+ "borderBottomLeftRadius": 4,
815
+ "borderBottomRightRadius": 4,
816
+ "borderTopLeftRadius": 4,
817
+ "borderTopRightRadius": 4,
818
+ "height": 48,
819
+ "justifyContent": "center",
820
+ "overflow": "hidden",
821
+ "width": 48,
822
+ }
823
+ }
824
+ >
825
+ <Image
826
+ alt=""
827
+ resizeMode="contain"
828
+ source={
829
+ {
830
+ "uri": "https://i.pravatar.cc/150?img=5",
831
+ }
832
+ }
833
+ style={
834
+ {
835
+ "height": "100%",
836
+ "width": "100%",
837
+ }
838
+ }
839
+ />
840
+ </View>
841
+ </RNCSafeAreaProvider>
842
+ `;
843
+
844
+ exports[`Bumper/Data Displays/Avatar/Features WithInitials 1`] = `
845
+ <RNCSafeAreaProvider
846
+ onInsetsChange={[Function]}
847
+ style={
848
+ [
849
+ {
850
+ "flex": 1,
851
+ },
852
+ undefined,
853
+ ]
854
+ }
855
+ >
856
+ <View
857
+ firstname="John"
858
+ lastname="Doe"
859
+ style={
860
+ {
861
+ "alignItems": "center",
862
+ "backgroundColor": "#EAE3D6",
863
+ "borderBottomLeftRadius": 4,
864
+ "borderBottomRightRadius": 4,
865
+ "borderTopLeftRadius": 4,
866
+ "borderTopRightRadius": 4,
867
+ "height": 48,
868
+ "justifyContent": "center",
869
+ "overflow": "hidden",
870
+ "width": 48,
871
+ }
872
+ }
873
+ >
874
+ <Text
875
+ style={
876
+ {
877
+ "color": "#563B56",
878
+ "fontFamily": "GTStandardSemibold",
879
+ "fontSize": 16,
880
+ "letterSpacing": 0,
881
+ "lineHeight": 20,
882
+ "textAlign": "left",
883
+ }
884
+ }
885
+ suppressHighlighting={true}
886
+ >
887
+ JD
888
+ </Text>
889
+ </View>
890
+ </RNCSafeAreaProvider>
891
+ `;