@ornikar/bumper 3.11.0 → 3.12.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 (49) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/definitions/index.d.ts +2 -0
  3. package/dist/definitions/index.d.ts.map +1 -1
  4. package/dist/definitions/system/dataDisplays/Sticker/Sticker.d.ts +18 -0
  5. package/dist/definitions/system/dataDisplays/Sticker/Sticker.d.ts.map +1 -0
  6. package/dist/definitions/system/dataDisplays/Sticker/components/StickerLabel.d.ts +7 -0
  7. package/dist/definitions/system/dataDisplays/Sticker/components/StickerLabel.d.ts.map +1 -0
  8. package/dist/definitions/system/dataDisplays/Sticker/context.d.ts +3 -0
  9. package/dist/definitions/system/dataDisplays/Sticker/context.d.ts.map +1 -0
  10. package/dist/definitions/system/dataDisplays/Sticker/types.d.ts +24 -0
  11. package/dist/definitions/system/dataDisplays/Sticker/types.d.ts.map +1 -0
  12. package/dist/definitions/system/layout/divider/Divider.d.ts.map +1 -1
  13. package/dist/definitions/system/types.d.ts +10 -9
  14. package/dist/definitions/system/types.d.ts.map +1 -1
  15. package/dist/index-metro.es.android.js +146 -9
  16. package/dist/index-metro.es.android.js.map +1 -1
  17. package/dist/index-metro.es.ios.js +146 -9
  18. package/dist/index-metro.es.ios.js.map +1 -1
  19. package/dist/index-node-22.22.cjs.js +145 -6
  20. package/dist/index-node-22.22.cjs.js.map +1 -1
  21. package/dist/index-node-22.22.cjs.web.js +145 -6
  22. package/dist/index-node-22.22.cjs.web.js.map +1 -1
  23. package/dist/index-node-22.22.es.mjs +145 -7
  24. package/dist/index-node-22.22.es.mjs.map +1 -1
  25. package/dist/index-node-22.22.es.web.mjs +145 -7
  26. package/dist/index-node-22.22.es.web.mjs.map +1 -1
  27. package/dist/index.es.js +141 -9
  28. package/dist/index.es.js.map +1 -1
  29. package/dist/index.es.web.js +141 -9
  30. package/dist/index.es.web.js.map +1 -1
  31. package/dist/tsbuildinfo +1 -1
  32. package/docs/migration/Sticker.md +222 -0
  33. package/package.json +1 -1
  34. package/src/index.ts +2 -0
  35. package/src/system/dataDisplays/Sticker/Sticker.features.stories.tsx +50 -0
  36. package/src/system/dataDisplays/Sticker/Sticker.mdx +38 -0
  37. package/src/system/dataDisplays/Sticker/Sticker.stories.tsx +49 -0
  38. package/src/system/dataDisplays/Sticker/Sticker.tsx +52 -0
  39. package/src/system/dataDisplays/Sticker/__snapshots__/Sticker.features.stories.tsx.snap +747 -0
  40. package/src/system/dataDisplays/Sticker/__snapshots__/Sticker.stories.tsx.snap +52 -0
  41. package/src/system/dataDisplays/Sticker/__snapshots_web__/Sticker.features.stories.tsx.snap +294 -0
  42. package/src/system/dataDisplays/Sticker/__snapshots_web__/Sticker.stories.tsx.snap +35 -0
  43. package/src/system/dataDisplays/Sticker/components/StickerLabel.tsx +33 -0
  44. package/src/system/dataDisplays/Sticker/context.ts +10 -0
  45. package/src/system/dataDisplays/Sticker/types.ts +61 -0
  46. package/src/system/layout/divider/Divider.tsx +7 -2
  47. package/src/system/layout/divider/__snapshots_web__/Divider.features.stories.tsx.snap +7 -0
  48. package/src/system/layout/divider/__snapshots_web__/Divider.stories.tsx.snap +1 -0
  49. package/src/system/types.ts +26 -14
package/src/system/dataDisplays/Sticker/__snapshots__/Sticker.features.stories.tsx.snap ADDED
@@ -0,0 +1,747 @@
1
+ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
+
3
+ exports[`Bumper/Data Displays/Sticker/Features Colors 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": "flex-start",
19
+ "flexDirection": "column",
20
+ "gap": 8,
21
+ }
22
+ }
23
+ >
24
+ <View
25
+ style={
26
+ {
27
+ "alignSelf": "flex-start",
28
+ "backgroundColor": "#4DA00A",
29
+ "borderBottomLeftRadius": 2,
30
+ "borderBottomRightRadius": 2,
31
+ "borderTopLeftRadius": 2,
32
+ "borderTopRightRadius": 2,
33
+ "maxWidth": "100%",
34
+ "paddingBottom": 4,
35
+ "paddingLeft": 4,
36
+ "paddingRight": 4,
37
+ "paddingTop": 4,
38
+ }
39
+ }
40
+ >
41
+ <Text
42
+ ellipsizeMode="tail"
43
+ numberOfLines={1}
44
+ style={
45
+ {
46
+ "color": "#DEF985",
47
+ "fontFamily": "GTStandardNarrowBold",
48
+ "fontSize": 12,
49
+ "letterSpacing": 0,
50
+ "lineHeight": 14,
51
+ "textAlign": "left",
52
+ "textTransform": "uppercase",
53
+ }
54
+ }
55
+ suppressHighlighting={true}
56
+ >
57
+ green
58
+ </Text>
59
+ </View>
60
+ <View
61
+ style={
62
+ {
63
+ "alignSelf": "flex-start",
64
+ "backgroundColor": "#1C5D47",
65
+ "borderBottomLeftRadius": 2,
66
+ "borderBottomRightRadius": 2,
67
+ "borderTopLeftRadius": 2,
68
+ "borderTopRightRadius": 2,
69
+ "maxWidth": "100%",
70
+ "paddingBottom": 4,
71
+ "paddingLeft": 4,
72
+ "paddingRight": 4,
73
+ "paddingTop": 4,
74
+ }
75
+ }
76
+ >
77
+ <Text
78
+ ellipsizeMode="tail"
79
+ numberOfLines={1}
80
+ style={
81
+ {
82
+ "color": "#B2F0FD",
83
+ "fontFamily": "GTStandardNarrowBold",
84
+ "fontSize": 12,
85
+ "letterSpacing": 0,
86
+ "lineHeight": 14,
87
+ "textAlign": "left",
88
+ "textTransform": "uppercase",
89
+ }
90
+ }
91
+ suppressHighlighting={true}
92
+ >
93
+ greenDark
94
+ </Text>
95
+ </View>
96
+ <View
97
+ style={
98
+ {
99
+ "alignSelf": "flex-start",
100
+ "backgroundColor": "#B2F0FD",
101
+ "borderBottomLeftRadius": 2,
102
+ "borderBottomRightRadius": 2,
103
+ "borderTopLeftRadius": 2,
104
+ "borderTopRightRadius": 2,
105
+ "maxWidth": "100%",
106
+ "paddingBottom": 4,
107
+ "paddingLeft": 4,
108
+ "paddingRight": 4,
109
+ "paddingTop": 4,
110
+ }
111
+ }
112
+ >
113
+ <Text
114
+ ellipsizeMode="tail"
115
+ numberOfLines={1}
116
+ style={
117
+ {
118
+ "color": "#1C5D47",
119
+ "fontFamily": "GTStandardNarrowBold",
120
+ "fontSize": 12,
121
+ "letterSpacing": 0,
122
+ "lineHeight": 14,
123
+ "textAlign": "left",
124
+ "textTransform": "uppercase",
125
+ }
126
+ }
127
+ suppressHighlighting={true}
128
+ >
129
+ blue
130
+ </Text>
131
+ </View>
132
+ <View
133
+ style={
134
+ {
135
+ "alignSelf": "flex-start",
136
+ "backgroundColor": "#2850C4",
137
+ "borderBottomLeftRadius": 2,
138
+ "borderBottomRightRadius": 2,
139
+ "borderTopLeftRadius": 2,
140
+ "borderTopRightRadius": 2,
141
+ "maxWidth": "100%",
142
+ "paddingBottom": 4,
143
+ "paddingLeft": 4,
144
+ "paddingRight": 4,
145
+ "paddingTop": 4,
146
+ }
147
+ }
148
+ >
149
+ <Text
150
+ ellipsizeMode="tail"
151
+ numberOfLines={1}
152
+ style={
153
+ {
154
+ "color": "#EAE3D6",
155
+ "fontFamily": "GTStandardNarrowBold",
156
+ "fontSize": 12,
157
+ "letterSpacing": 0,
158
+ "lineHeight": 14,
159
+ "textAlign": "left",
160
+ "textTransform": "uppercase",
161
+ }
162
+ }
163
+ suppressHighlighting={true}
164
+ >
165
+ blueDark
166
+ </Text>
167
+ </View>
168
+ <View
169
+ style={
170
+ {
171
+ "alignSelf": "flex-start",
172
+ "backgroundColor": "#951D12",
173
+ "borderBottomLeftRadius": 2,
174
+ "borderBottomRightRadius": 2,
175
+ "borderTopLeftRadius": 2,
176
+ "borderTopRightRadius": 2,
177
+ "maxWidth": "100%",
178
+ "paddingBottom": 4,
179
+ "paddingLeft": 4,
180
+ "paddingRight": 4,
181
+ "paddingTop": 4,
182
+ }
183
+ }
184
+ >
185
+ <Text
186
+ ellipsizeMode="tail"
187
+ numberOfLines={1}
188
+ style={
189
+ {
190
+ "color": "#EFD346",
191
+ "fontFamily": "GTStandardNarrowBold",
192
+ "fontSize": 12,
193
+ "letterSpacing": 0,
194
+ "lineHeight": 14,
195
+ "textAlign": "left",
196
+ "textTransform": "uppercase",
197
+ }
198
+ }
199
+ suppressHighlighting={true}
200
+ >
201
+ red
202
+ </Text>
203
+ </View>
204
+ <View
205
+ style={
206
+ {
207
+ "alignSelf": "flex-start",
208
+ "backgroundColor": "#DB6E2E",
209
+ "borderBottomLeftRadius": 2,
210
+ "borderBottomRightRadius": 2,
211
+ "borderTopLeftRadius": 2,
212
+ "borderTopRightRadius": 2,
213
+ "maxWidth": "100%",
214
+ "paddingBottom": 4,
215
+ "paddingLeft": 4,
216
+ "paddingRight": 4,
217
+ "paddingTop": 4,
218
+ }
219
+ }
220
+ >
221
+ <Text
222
+ ellipsizeMode="tail"
223
+ numberOfLines={1}
224
+ style={
225
+ {
226
+ "color": "#F1ECE4",
227
+ "fontFamily": "GTStandardNarrowBold",
228
+ "fontSize": 12,
229
+ "letterSpacing": 0,
230
+ "lineHeight": 14,
231
+ "textAlign": "left",
232
+ "textTransform": "uppercase",
233
+ }
234
+ }
235
+ suppressHighlighting={true}
236
+ >
237
+ orange
238
+ </Text>
239
+ </View>
240
+ <View
241
+ style={
242
+ {
243
+ "alignSelf": "flex-start",
244
+ "backgroundColor": "#E4A4F9",
245
+ "borderBottomLeftRadius": 2,
246
+ "borderBottomRightRadius": 2,
247
+ "borderTopLeftRadius": 2,
248
+ "borderTopRightRadius": 2,
249
+ "maxWidth": "100%",
250
+ "paddingBottom": 4,
251
+ "paddingLeft": 4,
252
+ "paddingRight": 4,
253
+ "paddingTop": 4,
254
+ }
255
+ }
256
+ >
257
+ <Text
258
+ ellipsizeMode="tail"
259
+ numberOfLines={1}
260
+ style={
261
+ {
262
+ "color": "#951D12",
263
+ "fontFamily": "GTStandardNarrowBold",
264
+ "fontSize": 12,
265
+ "letterSpacing": 0,
266
+ "lineHeight": 14,
267
+ "textAlign": "left",
268
+ "textTransform": "uppercase",
269
+ }
270
+ }
271
+ suppressHighlighting={true}
272
+ >
273
+ pink
274
+ </Text>
275
+ </View>
276
+ <View
277
+ style={
278
+ {
279
+ "alignSelf": "flex-start",
280
+ "backgroundColor": "#9A7600",
281
+ "borderBottomLeftRadius": 2,
282
+ "borderBottomRightRadius": 2,
283
+ "borderTopLeftRadius": 2,
284
+ "borderTopRightRadius": 2,
285
+ "maxWidth": "100%",
286
+ "paddingBottom": 4,
287
+ "paddingLeft": 4,
288
+ "paddingRight": 4,
289
+ "paddingTop": 4,
290
+ }
291
+ }
292
+ >
293
+ <Text
294
+ ellipsizeMode="tail"
295
+ numberOfLines={1}
296
+ style={
297
+ {
298
+ "color": "#F7F4EE",
299
+ "fontFamily": "GTStandardNarrowBold",
300
+ "fontSize": 12,
301
+ "letterSpacing": 0,
302
+ "lineHeight": 14,
303
+ "textAlign": "left",
304
+ "textTransform": "uppercase",
305
+ }
306
+ }
307
+ suppressHighlighting={true}
308
+ >
309
+ gold
310
+ </Text>
311
+ </View>
312
+ <View
313
+ style={
314
+ {
315
+ "alignSelf": "flex-start",
316
+ "backgroundColor": "#F7F4EE",
317
+ "borderBottomLeftRadius": 2,
318
+ "borderBottomRightRadius": 2,
319
+ "borderTopLeftRadius": 2,
320
+ "borderTopRightRadius": 2,
321
+ "maxWidth": "100%",
322
+ "paddingBottom": 4,
323
+ "paddingLeft": 4,
324
+ "paddingRight": 4,
325
+ "paddingTop": 4,
326
+ }
327
+ }
328
+ >
329
+ <Text
330
+ ellipsizeMode="tail"
331
+ numberOfLines={1}
332
+ style={
333
+ {
334
+ "color": "#951D12",
335
+ "fontFamily": "GTStandardNarrowBold",
336
+ "fontSize": 12,
337
+ "letterSpacing": 0,
338
+ "lineHeight": 14,
339
+ "textAlign": "left",
340
+ "textTransform": "uppercase",
341
+ }
342
+ }
343
+ suppressHighlighting={true}
344
+ >
345
+ cream
346
+ </Text>
347
+ </View>
348
+ <View
349
+ style={
350
+ {
351
+ "alignSelf": "flex-start",
352
+ "backgroundColor": "#EAE3D6",
353
+ "borderBottomLeftRadius": 2,
354
+ "borderBottomRightRadius": 2,
355
+ "borderTopLeftRadius": 2,
356
+ "borderTopRightRadius": 2,
357
+ "maxWidth": "100%",
358
+ "paddingBottom": 4,
359
+ "paddingLeft": 4,
360
+ "paddingRight": 4,
361
+ "paddingTop": 4,
362
+ }
363
+ }
364
+ >
365
+ <Text
366
+ ellipsizeMode="tail"
367
+ numberOfLines={1}
368
+ style={
369
+ {
370
+ "color": "#563B56",
371
+ "fontFamily": "GTStandardNarrowBold",
372
+ "fontSize": 12,
373
+ "letterSpacing": 0,
374
+ "lineHeight": 14,
375
+ "textAlign": "left",
376
+ "textTransform": "uppercase",
377
+ }
378
+ }
379
+ suppressHighlighting={true}
380
+ >
381
+ linen
382
+ </Text>
383
+ </View>
384
+ <View
385
+ style={
386
+ {
387
+ "alignSelf": "flex-start",
388
+ "backgroundColor": "#FFF500",
389
+ "borderBottomLeftRadius": 2,
390
+ "borderBottomRightRadius": 2,
391
+ "borderTopLeftRadius": 2,
392
+ "borderTopRightRadius": 2,
393
+ "maxWidth": "100%",
394
+ "paddingBottom": 4,
395
+ "paddingLeft": 4,
396
+ "paddingRight": 4,
397
+ "paddingTop": 4,
398
+ }
399
+ }
400
+ >
401
+ <Text
402
+ ellipsizeMode="tail"
403
+ numberOfLines={1}
404
+ style={
405
+ {
406
+ "color": "#43390A",
407
+ "fontFamily": "GTStandardNarrowBold",
408
+ "fontSize": 12,
409
+ "letterSpacing": 0,
410
+ "lineHeight": 14,
411
+ "textAlign": "left",
412
+ "textTransform": "uppercase",
413
+ }
414
+ }
415
+ suppressHighlighting={true}
416
+ >
417
+ lightning
418
+ </Text>
419
+ </View>
420
+ <View
421
+ style={
422
+ {
423
+ "alignSelf": "flex-start",
424
+ "backgroundColor": "#43390A",
425
+ "borderBottomLeftRadius": 2,
426
+ "borderBottomRightRadius": 2,
427
+ "borderTopLeftRadius": 2,
428
+ "borderTopRightRadius": 2,
429
+ "maxWidth": "100%",
430
+ "paddingBottom": 4,
431
+ "paddingLeft": 4,
432
+ "paddingRight": 4,
433
+ "paddingTop": 4,
434
+ }
435
+ }
436
+ >
437
+ <Text
438
+ ellipsizeMode="tail"
439
+ numberOfLines={1}
440
+ style={
441
+ {
442
+ "color": "#FFF500",
443
+ "fontFamily": "GTStandardNarrowBold",
444
+ "fontSize": 12,
445
+ "letterSpacing": 0,
446
+ "lineHeight": 14,
447
+ "textAlign": "left",
448
+ "textTransform": "uppercase",
449
+ }
450
+ }
451
+ suppressHighlighting={true}
452
+ >
453
+ lightningDark
454
+ </Text>
455
+ </View>
456
+ </View>
457
+ </RNCSafeAreaProvider>
458
+ `;
459
+
460
+ exports[`Bumper/Data Displays/Sticker/Features Disabled 1`] = `
461
+ <RNCSafeAreaProvider
462
+ onInsetsChange={[Function]}
463
+ style={
464
+ [
465
+ {
466
+ "flex": 1,
467
+ },
468
+ undefined,
469
+ ]
470
+ }
471
+ >
472
+ <View
473
+ style={
474
+ {
475
+ "alignItems": "center",
476
+ "flexDirection": "row",
477
+ "gap": 16,
478
+ }
479
+ }
480
+ >
481
+ <View
482
+ style={
483
+ {
484
+ "alignSelf": "flex-start",
485
+ "backgroundColor": "#FFF500",
486
+ "borderBottomLeftRadius": 2,
487
+ "borderBottomRightRadius": 2,
488
+ "borderTopLeftRadius": 2,
489
+ "borderTopRightRadius": 2,
490
+ "maxWidth": "100%",
491
+ "paddingBottom": 4,
492
+ "paddingLeft": 4,
493
+ "paddingRight": 4,
494
+ "paddingTop": 4,
495
+ }
496
+ }
497
+ >
498
+ <Text
499
+ ellipsizeMode="tail"
500
+ numberOfLines={1}
501
+ style={
502
+ {
503
+ "color": "#43390A",
504
+ "fontFamily": "GTStandardNarrowBold",
505
+ "fontSize": 12,
506
+ "letterSpacing": 0,
507
+ "lineHeight": 14,
508
+ "textAlign": "left",
509
+ "textTransform": "uppercase",
510
+ }
511
+ }
512
+ suppressHighlighting={true}
513
+ >
514
+ Enabled
515
+ </Text>
516
+ </View>
517
+ <View
518
+ style={
519
+ {
520
+ "alignSelf": "flex-start",
521
+ "backgroundColor": "#BABABA",
522
+ "borderBottomLeftRadius": 2,
523
+ "borderBottomRightRadius": 2,
524
+ "borderTopLeftRadius": 2,
525
+ "borderTopRightRadius": 2,
526
+ "maxWidth": "100%",
527
+ "paddingBottom": 4,
528
+ "paddingLeft": 4,
529
+ "paddingRight": 4,
530
+ "paddingTop": 4,
531
+ }
532
+ }
533
+ >
534
+ <Text
535
+ ellipsizeMode="tail"
536
+ numberOfLines={1}
537
+ style={
538
+ {
539
+ "color": "#ffffff",
540
+ "fontFamily": "GTStandardNarrowBold",
541
+ "fontSize": 12,
542
+ "letterSpacing": 0,
543
+ "lineHeight": 14,
544
+ "textAlign": "left",
545
+ "textTransform": "uppercase",
546
+ }
547
+ }
548
+ suppressHighlighting={true}
549
+ >
550
+ Disabled
551
+ </Text>
552
+ </View>
553
+ </View>
554
+ </RNCSafeAreaProvider>
555
+ `;
556
+
557
+ exports[`Bumper/Data Displays/Sticker/Features LongLabel 1`] = `
558
+ <RNCSafeAreaProvider
559
+ onInsetsChange={[Function]}
560
+ style={
561
+ [
562
+ {
563
+ "flex": 1,
564
+ },
565
+ undefined,
566
+ ]
567
+ }
568
+ >
569
+ <View
570
+ style={
571
+ {
572
+ "width": 200,
573
+ }
574
+ }
575
+ >
576
+ <View
577
+ style={
578
+ {
579
+ "alignSelf": "flex-start",
580
+ "backgroundColor": "#EAE3D6",
581
+ "borderBottomLeftRadius": 2,
582
+ "borderBottomRightRadius": 2,
583
+ "borderTopLeftRadius": 2,
584
+ "borderTopRightRadius": 2,
585
+ "maxWidth": "100%",
586
+ "paddingBottom": 4,
587
+ "paddingLeft": 4,
588
+ "paddingRight": 4,
589
+ "paddingTop": 4,
590
+ }
591
+ }
592
+ >
593
+ <Text
594
+ ellipsizeMode="tail"
595
+ numberOfLines={1}
596
+ style={
597
+ {
598
+ "color": "#563B56",
599
+ "fontFamily": "GTStandardNarrowBold",
600
+ "fontSize": 12,
601
+ "letterSpacing": 0,
602
+ "lineHeight": 14,
603
+ "textAlign": "left",
604
+ "textTransform": "uppercase",
605
+ }
606
+ }
607
+ suppressHighlighting={true}
608
+ >
609
+ A very long label that should be truncated with an ellipsis
610
+ </Text>
611
+ </View>
612
+ </View>
613
+ </RNCSafeAreaProvider>
614
+ `;
615
+
616
+ exports[`Bumper/Data Displays/Sticker/Features Sizes 1`] = `
617
+ <RNCSafeAreaProvider
618
+ onInsetsChange={[Function]}
619
+ style={
620
+ [
621
+ {
622
+ "flex": 1,
623
+ },
624
+ undefined,
625
+ ]
626
+ }
627
+ >
628
+ <View
629
+ style={
630
+ {
631
+ "alignItems": "center",
632
+ "flexDirection": "row",
633
+ "gap": 16,
634
+ }
635
+ }
636
+ >
637
+ <View
638
+ style={
639
+ {
640
+ "alignSelf": "flex-start",
641
+ "backgroundColor": "#4DA00A",
642
+ "borderBottomLeftRadius": 2,
643
+ "borderBottomRightRadius": 2,
644
+ "borderTopLeftRadius": 2,
645
+ "borderTopRightRadius": 2,
646
+ "maxWidth": "100%",
647
+ "paddingBottom": 4,
648
+ "paddingLeft": 4,
649
+ "paddingRight": 4,
650
+ "paddingTop": 4,
651
+ }
652
+ }
653
+ >
654
+ <Text
655
+ ellipsizeMode="tail"
656
+ numberOfLines={1}
657
+ style={
658
+ {
659
+ "color": "#DEF985",
660
+ "fontFamily": "GTStandardNarrowBold",
661
+ "fontSize": 12,
662
+ "letterSpacing": 0,
663
+ "lineHeight": 14,
664
+ "textAlign": "left",
665
+ "textTransform": "uppercase",
666
+ }
667
+ }
668
+ suppressHighlighting={true}
669
+ >
670
+ Small
671
+ </Text>
672
+ </View>
673
+ <View
674
+ style={
675
+ {
676
+ "alignSelf": "flex-start",
677
+ "backgroundColor": "#4DA00A",
678
+ "borderBottomLeftRadius": 4,
679
+ "borderBottomRightRadius": 4,
680
+ "borderTopLeftRadius": 4,
681
+ "borderTopRightRadius": 4,
682
+ "maxWidth": "100%",
683
+ "paddingBottom": 4,
684
+ "paddingLeft": 4,
685
+ "paddingRight": 4,
686
+ "paddingTop": 4,
687
+ }
688
+ }
689
+ >
690
+ <Text
691
+ ellipsizeMode="tail"
692
+ numberOfLines={1}
693
+ style={
694
+ {
695
+ "color": "#DEF985",
696
+ "fontFamily": "GTStandardNarrowBold",
697
+ "fontSize": 16,
698
+ "letterSpacing": 0,
699
+ "lineHeight": 18,
700
+ "textAlign": "left",
701
+ "textTransform": "uppercase",
702
+ }
703
+ }
704
+ suppressHighlighting={true}
705
+ >
706
+ Medium
707
+ </Text>
708
+ </View>
709
+ <View
710
+ style={
711
+ {
712
+ "alignSelf": "flex-start",
713
+ "backgroundColor": "#4DA00A",
714
+ "borderBottomLeftRadius": 4,
715
+ "borderBottomRightRadius": 4,
716
+ "borderTopLeftRadius": 4,
717
+ "borderTopRightRadius": 4,
718
+ "maxWidth": "100%",
719
+ "paddingBottom": 4,
720
+ "paddingLeft": 4,
721
+ "paddingRight": 4,
722
+ "paddingTop": 4,
723
+ }
724
+ }
725
+ >
726
+ <Text
727
+ ellipsizeMode="tail"
728
+ numberOfLines={1}
729
+ style={
730
+ {
731
+ "color": "#DEF985",
732
+ "fontFamily": "GTStandardNarrowBold",
733
+ "fontSize": 18,
734
+ "letterSpacing": 0,
735
+ "lineHeight": 20,
736
+ "textAlign": "left",
737
+ "textTransform": "uppercase",
738
+ }
739
+ }
740
+ suppressHighlighting={true}
741
+ >
742
+ Large
743
+ </Text>
744
+ </View>
745
+ </View>
746
+ </RNCSafeAreaProvider>
747
+ `;