@ornikar/kitt-universal 1.0.0 → 1.0.1

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 (139) hide show
  1. package/package.json +4 -4
  2. package/CHANGELOG.md +0 -8
  3. package/src/.eslintrc.json +0 -19
  4. package/src/Avatar/Avatar.stories.tsx +0 -45
  5. package/src/Avatar/Avatar.tsx +0 -60
  6. package/src/Avatar/__snapshots__/Avatar.stories.tsx.snap +0 -1229
  7. package/src/Button/Button.stories.tsx +0 -301
  8. package/src/Button/Button.tsx +0 -60
  9. package/src/Button/ButtonContainer.tsx +0 -32
  10. package/src/Button/ButtonContent.tsx +0 -133
  11. package/src/Button/__snapshots__/Button.stories.tsx.snap +0 -7483
  12. package/src/Button/useButton.ts +0 -14
  13. package/src/Card/Card.stories.tsx +0 -31
  14. package/src/Card/Card.tsx +0 -25
  15. package/src/Card/__snapshots__/Card.stories.tsx.snap +0 -306
  16. package/src/FullScreenModal/Body.tsx +0 -25
  17. package/src/FullScreenModal/FullScreenModal.stories.tsx +0 -63
  18. package/src/FullScreenModal/FullScreenModal.tsx +0 -21
  19. package/src/FullScreenModal/Header.tsx +0 -129
  20. package/src/FullScreenModal/__snapshots__/FullScreenModal.stories.tsx.snap +0 -771
  21. package/src/Icon/Icon.stories.tsx +0 -59
  22. package/src/Icon/Icon.tsx +0 -37
  23. package/src/Icon/SpinningIcon.tsx +0 -38
  24. package/src/Icon/SpinningIcon.web.module.css +0 -13
  25. package/src/Icon/SpinningIcon.web.module.css.d.ts +0 -6
  26. package/src/Icon/SpinningIcon.web.tsx +0 -11
  27. package/src/Icon/__snapshots__/Icon.stories.tsx.snap +0 -5648
  28. package/src/KittBreakpoints.ts +0 -44
  29. package/src/ListItem/ListItem.stories.tsx +0 -122
  30. package/src/ListItem/ListItem.tsx +0 -61
  31. package/src/ListItem/ListItemContent.tsx +0 -17
  32. package/src/ListItem/ListItemSideContent.tsx +0 -41
  33. package/src/ListItem/__snapshots__/ListItem.stories.tsx.snap +0 -1514
  34. package/src/Loader/LargeLoader.tsx +0 -12
  35. package/src/Loader/LargeLoader.web.module.css +0 -103
  36. package/src/Loader/LargeLoader.web.module.css.d.ts +0 -11
  37. package/src/Loader/LargeLoader.web.test.tsx +0 -10
  38. package/src/Loader/LargeLoader.web.tsx +0 -18
  39. package/src/Loader/Loader.stories.tsx +0 -47
  40. package/src/Loader/Loader.tsx +0 -21
  41. package/src/Loader/Loader.web.test.tsx +0 -20
  42. package/src/Loader/Loader.web.tsx +0 -14
  43. package/src/Loader/__snapshots__/LargeLoader.web.test.tsx.snap +0 -33
  44. package/src/Loader/__snapshots__/Loader.stories.tsx.snap +0 -607
  45. package/src/Loader/__snapshots__/Loader.web.test.tsx.snap +0 -103
  46. package/src/Message/Message.stories.tsx +0 -102
  47. package/src/Message/Message.tsx +0 -114
  48. package/src/Message/__snapshots__/Message.stories.tsx.snap +0 -2776
  49. package/src/Modal/Body.tsx +0 -20
  50. package/src/Modal/Footer.tsx +0 -18
  51. package/src/Modal/Header.tsx +0 -66
  52. package/src/Modal/Modal.stories.tsx +0 -181
  53. package/src/Modal/Modal.tsx +0 -66
  54. package/src/Modal/OnCloseContext.ts +0 -3
  55. package/src/Modal/__snapshots__/Modal.stories.tsx.snap +0 -2960
  56. package/src/Notification/Notification.stories.tsx +0 -102
  57. package/src/Notification/Notification.tsx +0 -21
  58. package/src/Notification/__snapshots__/Notification.stories.tsx.snap +0 -2861
  59. package/src/Overlay/Overlay.tsx +0 -22
  60. package/src/Tag/Tag.stories.tsx +0 -18
  61. package/src/Tag/Tag.tsx +0 -31
  62. package/src/Tag/__snapshots__/Tag.stories.tsx.snap +0 -303
  63. package/src/Tooltip/Tooltip.tsx +0 -17
  64. package/src/__mocks__/react-native-safe-area-context.tsx +0 -26
  65. package/src/forms/InputFeedback/InputFeedback.stories.tsx +0 -17
  66. package/src/forms/InputFeedback/InputFeedback.tsx +0 -28
  67. package/src/forms/InputFeedback/__snapshots__/InputFeedback.stories.tsx.snap +0 -252
  68. package/src/forms/InputField/InputField.stories.tsx +0 -19
  69. package/src/forms/InputField/InputField.tsx +0 -45
  70. package/src/forms/InputField/__snapshots__/InputField.stories.tsx.snap +0 -240
  71. package/src/forms/InputFormState.ts +0 -1
  72. package/src/forms/InputText/InputText.stories.tsx +0 -85
  73. package/src/forms/InputText/InputText.tsx +0 -172
  74. package/src/forms/InputText/__snapshots__/InputText.stories.tsx.snap +0 -4274
  75. package/src/forms/InputText/useInputText.ts +0 -19
  76. package/src/forms/Label/Label.stories.tsx +0 -14
  77. package/src/forms/Label/Label.tsx +0 -17
  78. package/src/forms/Label/__snapshots__/Label.stories.tsx.snap +0 -174
  79. package/src/forms/Radio/Radio.stories.tsx +0 -48
  80. package/src/forms/Radio/Radio.tsx +0 -81
  81. package/src/forms/Radio/__snapshots__/Radio.stories.tsx.snap +0 -967
  82. package/src/forms/TextArea/TextArea.stories.tsx +0 -72
  83. package/src/forms/TextArea/TextArea.tsx +0 -12
  84. package/src/forms/TextArea/__snapshots__/TextArea.stories.tsx.snap +0 -2091
  85. package/src/index.ts +0 -61
  86. package/src/stories/Block.tsx +0 -24
  87. package/src/stories/Flex.tsx +0 -16
  88. package/src/stories/color-tokens.stories.tsx +0 -143
  89. package/src/stories-list.ts +0 -22
  90. package/src/story-components/Section.tsx +0 -56
  91. package/src/story-components/Story.tsx +0 -24
  92. package/src/story-components/StoryDecorator.tsx +0 -8
  93. package/src/story-components/StoryGrid.tsx +0 -80
  94. package/src/story-components/StoryTitle.stories.tsx +0 -12
  95. package/src/story-components/StoryTitle.tsx +0 -69
  96. package/src/story-components/__snapshots__/StoryTitle.stories.tsx.snap +0 -155
  97. package/src/story-components/index.ts +0 -5
  98. package/src/themes/default.ts +0 -34
  99. package/src/themes/late-ocean/avatarLateOceanTheme.ts +0 -12
  100. package/src/themes/late-ocean/buttonLateOceanTheme.ts +0 -37
  101. package/src/themes/late-ocean/cardLateOceanTheme.ts +0 -19
  102. package/src/themes/late-ocean/colorsLateOceanTheme.ts +0 -19
  103. package/src/themes/late-ocean/feedbackMessageLateOceanTheme.ts +0 -10
  104. package/src/themes/late-ocean/formLateOceanTheme.ts +0 -9
  105. package/src/themes/late-ocean/fullScreenModalLateOceanTheme.ts +0 -9
  106. package/src/themes/late-ocean/inputFieldLateOceanTheme.ts +0 -4
  107. package/src/themes/late-ocean/inputLateOceanTheme.ts +0 -55
  108. package/src/themes/late-ocean/listItemLateOceanTheme.ts +0 -8
  109. package/src/themes/late-ocean/radioLateOceanTheme.ts +0 -19
  110. package/src/themes/late-ocean/shadowsLateOceanTheme.ts +0 -3
  111. package/src/themes/late-ocean/tagLateOceanTheme.ts +0 -17
  112. package/src/themes/late-ocean/typographyLateOceanTheme.ts +0 -94
  113. package/src/themes/palettes/lateOceanColorPalette.ts +0 -24
  114. package/src/typings/babel-config.d.ts +0 -6
  115. package/src/typings/metro.d.ts +0 -6
  116. package/src/typography/Typography.stories.tsx +0 -113
  117. package/src/typography/Typography.tsx +0 -165
  118. package/src/typography/TypographyIcon.stories.tsx +0 -31
  119. package/src/typography/TypographyIcon.tsx +0 -35
  120. package/src/typography/TypographyLink.stories.tsx +0 -88
  121. package/src/typography/TypographyLink.tsx +0 -48
  122. package/src/typography/__snapshots__/Typography.stories.tsx.snap +0 -6118
  123. package/src/typography/__snapshots__/TypographyIcon.stories.tsx.snap +0 -334
  124. package/src/typography/__snapshots__/TypographyLink.stories.tsx.snap +0 -10945
  125. package/src/useKittTheme.tsx +0 -12
  126. package/src/utils/storybook/decorators/KittThemeDecorator.tsx +0 -27
  127. package/src/utils/storybook/decorators/SafeAreaProviderDecorator.tsx +0 -11
  128. package/src/utils/storybook/setup-global-decorators.ts +0 -6
  129. package/src/utils/tests/renderWithProvidersUtils.tsx +0 -17
  130. package/src/utils/typeUtils.ts +0 -6
  131. package/src/utils/windowSize/MatchWindowSize.tsx +0 -14
  132. package/src/utils/windowSize/__snapshots__/windowSize.stories.tsx.snap +0 -1485
  133. package/src/utils/windowSize/createWindowSizeHelper.test.ts +0 -11
  134. package/src/utils/windowSize/createWindowSizeHelper.ts +0 -65
  135. package/src/utils/windowSize/useMatchWindowSize.ts +0 -14
  136. package/src/utils/windowSize/useWindowSize.ts +0 -1
  137. package/src/utils/windowSize/windowSize.stories.tsx +0 -115
  138. package/tsconfig.build.json +0 -33
  139. package/tsconfig.json +0 -13
package/src/Avatar/__snapshots__/Avatar.stories.tsx.snap DELETED
@@ -1,1229 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`kitt-universal/Data Display Avatar 1`] = `
4
- <RNCSafeAreaProvider
5
- onInsetsChange={[Function]}
6
- style={
7
- Array [
8
- Object {
9
- "flex": 1,
10
- },
11
- undefined,
12
- ]
13
- }
14
- >
15
- <RCTScrollView
16
- style={
17
- Array [
18
- Object {
19
- "paddingBottom": 10,
20
- "paddingLeft": 10,
21
- "paddingRight": 10,
22
- "paddingTop": 10,
23
- },
24
- ]
25
- }
26
- >
27
- <View>
28
- <View
29
- style={
30
- Array [
31
- Object {
32
- "marginBottom": 30,
33
- },
34
- ]
35
- }
36
- >
37
- <Text
38
- aria-level="1"
39
- color="black"
40
- isHeader={true}
41
- style={
42
- Array [
43
- Object {
44
- "color": "#000000",
45
- "fontFamily": "Moderat-Extended-Bold",
46
- "fontSize": 38,
47
- "fontStyle": "normal",
48
- "fontWeight": "400",
49
- "lineHeight": 49,
50
- "textDecorationColor": "#000000",
51
- },
52
- ]
53
- }
54
- type="header1"
55
- variant="bold"
56
- >
57
- Avatar
58
- </Text>
59
- </View>
60
- <View
61
- style={
62
- Array [
63
- Object {
64
- "marginBottom": 30,
65
- },
66
- ]
67
- }
68
- >
69
- <View
70
- style={
71
- Array [
72
- Object {
73
- "marginBottom": 30,
74
- },
75
- ]
76
- }
77
- >
78
- <Text
79
- aria-level="2"
80
- color="black"
81
- isHeader={true}
82
- style={
83
- Array [
84
- Object {
85
- "color": "#000000",
86
- "fontFamily": "Moderat-Extended-Bold",
87
- "fontSize": 32,
88
- "fontStyle": "normal",
89
- "fontWeight": "400",
90
- "lineHeight": 42,
91
- "textDecorationColor": "#000000",
92
- },
93
- ]
94
- }
95
- type="header2"
96
- variant="bold"
97
- >
98
- With Source
99
- </Text>
100
- </View>
101
- <View
102
- style={
103
- Array [
104
- Object {
105
- "flexDirection": "column",
106
- "marginBottom": 0,
107
- "marginLeft": 0,
108
- "marginRight": 0,
109
- "marginTop": 0,
110
- },
111
- ]
112
- }
113
- >
114
- <View
115
- style={
116
- Array [
117
- Object {
118
- "paddingBottom": 20,
119
- "paddingLeft": 0,
120
- "paddingRight": 0,
121
- "paddingTop": 10,
122
- },
123
- ]
124
- }
125
- >
126
- <View
127
- style={
128
- Array [
129
- Object {
130
- "marginBottom": 10,
131
- },
132
- ]
133
- }
134
- >
135
- <Text
136
- aria-level="4"
137
- color="black"
138
- isHeader={true}
139
- medium="header5"
140
- numberOfLines={1}
141
- style={
142
- Array [
143
- Object {
144
- "color": "#000000",
145
- "fontFamily": "Moderat-Extended-Bold",
146
- "fontSize": 18,
147
- "fontStyle": "normal",
148
- "fontWeight": "400",
149
- "lineHeight": 23,
150
- "textDecorationColor": "#000000",
151
- },
152
- ]
153
- }
154
- type="header4"
155
- variant="bold"
156
- >
157
- Default
158
- </Text>
159
- </View>
160
- <View
161
- size={40}
162
- src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
163
- style={
164
- Array [
165
- Object {
166
- "alignItems": "center",
167
- "backgroundColor": "#4C34E0",
168
- "borderRadius": 10,
169
- "height": 40,
170
- "justifyContent": "center",
171
- "overflow": "hidden",
172
- "width": 40,
173
- },
174
- ]
175
- }
176
- >
177
- <Image
178
- source={
179
- Object {
180
- "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
181
- }
182
- }
183
- style={
184
- Object {
185
- "height": 40,
186
- "width": 40,
187
- }
188
- }
189
- />
190
- </View>
191
- </View>
192
- <View
193
- style={
194
- Array [
195
- Object {
196
- "paddingBottom": 20,
197
- "paddingLeft": 0,
198
- "paddingRight": 0,
199
- "paddingTop": 10,
200
- },
201
- ]
202
- }
203
- >
204
- <View
205
- style={
206
- Array [
207
- Object {
208
- "marginBottom": 10,
209
- },
210
- ]
211
- }
212
- >
213
- <Text
214
- aria-level="4"
215
- color="black"
216
- isHeader={true}
217
- medium="header5"
218
- numberOfLines={1}
219
- style={
220
- Array [
221
- Object {
222
- "color": "#000000",
223
- "fontFamily": "Moderat-Extended-Bold",
224
- "fontSize": 18,
225
- "fontStyle": "normal",
226
- "fontWeight": "400",
227
- "lineHeight": 23,
228
- "textDecorationColor": "#000000",
229
- },
230
- ]
231
- }
232
- type="header4"
233
- variant="bold"
234
- >
235
- Round
236
- </Text>
237
- </View>
238
- <View
239
- round={true}
240
- size={40}
241
- src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
242
- style={
243
- Array [
244
- Object {
245
- "alignItems": "center",
246
- "backgroundColor": "#4C34E0",
247
- "borderRadius": 20,
248
- "height": 40,
249
- "justifyContent": "center",
250
- "overflow": "hidden",
251
- "width": 40,
252
- },
253
- ]
254
- }
255
- >
256
- <Image
257
- source={
258
- Object {
259
- "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
260
- }
261
- }
262
- style={
263
- Object {
264
- "height": 40,
265
- "width": 40,
266
- }
267
- }
268
- />
269
- </View>
270
- </View>
271
- <View
272
- style={
273
- Array [
274
- Object {
275
- "paddingBottom": 20,
276
- "paddingLeft": 0,
277
- "paddingRight": 0,
278
- "paddingTop": 10,
279
- },
280
- ]
281
- }
282
- >
283
- <View
284
- style={
285
- Array [
286
- Object {
287
- "marginBottom": 10,
288
- },
289
- ]
290
- }
291
- >
292
- <Text
293
- aria-level="4"
294
- color="black"
295
- isHeader={true}
296
- medium="header5"
297
- numberOfLines={1}
298
- style={
299
- Array [
300
- Object {
301
- "color": "#000000",
302
- "fontFamily": "Moderat-Extended-Bold",
303
- "fontSize": 18,
304
- "fontStyle": "normal",
305
- "fontWeight": "400",
306
- "lineHeight": 23,
307
- "textDecorationColor": "#000000",
308
- },
309
- ]
310
- }
311
- type="header4"
312
- variant="bold"
313
- >
314
- Light
315
- </Text>
316
- </View>
317
- <View
318
- light={true}
319
- size={40}
320
- src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
321
- style={
322
- Array [
323
- Object {
324
- "alignItems": "center",
325
- "backgroundColor": "#E5E5E5",
326
- "borderRadius": 10,
327
- "height": 40,
328
- "justifyContent": "center",
329
- "overflow": "hidden",
330
- "width": 40,
331
- },
332
- ]
333
- }
334
- >
335
- <Image
336
- source={
337
- Object {
338
- "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
339
- }
340
- }
341
- style={
342
- Object {
343
- "height": 40,
344
- "width": 40,
345
- }
346
- }
347
- />
348
- </View>
349
- </View>
350
- <View
351
- style={
352
- Array [
353
- Object {
354
- "paddingBottom": 20,
355
- "paddingLeft": 0,
356
- "paddingRight": 0,
357
- "paddingTop": 10,
358
- },
359
- ]
360
- }
361
- >
362
- <View
363
- style={
364
- Array [
365
- Object {
366
- "marginBottom": 10,
367
- },
368
- ]
369
- }
370
- >
371
- <Text
372
- aria-level="4"
373
- color="black"
374
- isHeader={true}
375
- medium="header5"
376
- numberOfLines={1}
377
- style={
378
- Array [
379
- Object {
380
- "color": "#000000",
381
- "fontFamily": "Moderat-Extended-Bold",
382
- "fontSize": 18,
383
- "fontStyle": "normal",
384
- "fontWeight": "400",
385
- "lineHeight": 23,
386
- "textDecorationColor": "#000000",
387
- },
388
- ]
389
- }
390
- type="header4"
391
- variant="bold"
392
- >
393
- Small
394
- </Text>
395
- </View>
396
- <View
397
- size={32}
398
- src="https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg"
399
- style={
400
- Array [
401
- Object {
402
- "alignItems": "center",
403
- "backgroundColor": "#4C34E0",
404
- "borderRadius": 10,
405
- "height": 32,
406
- "justifyContent": "center",
407
- "overflow": "hidden",
408
- "width": 32,
409
- },
410
- ]
411
- }
412
- >
413
- <Image
414
- source={
415
- Object {
416
- "uri": "https://assets.staging-fr-onroad.com/avatars/2237155ce2af98ee5fd.jpeg",
417
- }
418
- }
419
- style={
420
- Object {
421
- "height": 32,
422
- "width": 32,
423
- }
424
- }
425
- />
426
- </View>
427
- </View>
428
- </View>
429
- </View>
430
- <View
431
- style={
432
- Array [
433
- Object {
434
- "marginBottom": 30,
435
- },
436
- ]
437
- }
438
- >
439
- <View
440
- style={
441
- Array [
442
- Object {
443
- "marginBottom": 30,
444
- },
445
- ]
446
- }
447
- >
448
- <Text
449
- aria-level="2"
450
- color="black"
451
- isHeader={true}
452
- style={
453
- Array [
454
- Object {
455
- "color": "#000000",
456
- "fontFamily": "Moderat-Extended-Bold",
457
- "fontSize": 32,
458
- "fontStyle": "normal",
459
- "fontWeight": "400",
460
- "lineHeight": 42,
461
- "textDecorationColor": "#000000",
462
- },
463
- ]
464
- }
465
- type="header2"
466
- variant="bold"
467
- >
468
- With Initials
469
- </Text>
470
- </View>
471
- <View
472
- style={
473
- Array [
474
- Object {
475
- "flexDirection": "column",
476
- "marginBottom": 0,
477
- "marginLeft": 0,
478
- "marginRight": 0,
479
- "marginTop": 0,
480
- },
481
- ]
482
- }
483
- >
484
- <View
485
- style={
486
- Array [
487
- Object {
488
- "paddingBottom": 20,
489
- "paddingLeft": 0,
490
- "paddingRight": 0,
491
- "paddingTop": 10,
492
- },
493
- ]
494
- }
495
- >
496
- <View
497
- style={
498
- Array [
499
- Object {
500
- "marginBottom": 10,
501
- },
502
- ]
503
- }
504
- >
505
- <Text
506
- aria-level="4"
507
- color="black"
508
- isHeader={true}
509
- medium="header5"
510
- numberOfLines={1}
511
- style={
512
- Array [
513
- Object {
514
- "color": "#000000",
515
- "fontFamily": "Moderat-Extended-Bold",
516
- "fontSize": 18,
517
- "fontStyle": "normal",
518
- "fontWeight": "400",
519
- "lineHeight": 23,
520
- "textDecorationColor": "#000000",
521
- },
522
- ]
523
- }
524
- type="header4"
525
- variant="bold"
526
- >
527
- Default
528
- </Text>
529
- </View>
530
- <View
531
- firstname="Michael"
532
- lastname="Knight"
533
- size={40}
534
- style={
535
- Array [
536
- Object {
537
- "alignItems": "center",
538
- "backgroundColor": "#4C34E0",
539
- "borderRadius": 10,
540
- "height": 40,
541
- "justifyContent": "center",
542
- "overflow": "hidden",
543
- "width": 40,
544
- },
545
- ]
546
- }
547
- >
548
- <Text
549
- color="white"
550
- isHeader={false}
551
- style={
552
- Array [
553
- Object {
554
- "color": "#FFFFFF",
555
- "fontFamily": "NotoSans-Bold",
556
- "fontSize": 14,
557
- "fontStyle": "normal",
558
- "fontWeight": "700",
559
- "lineHeight": 22,
560
- "textDecorationColor": "#FFFFFF",
561
- },
562
- ]
563
- }
564
- type="body-small"
565
- variant="bold"
566
- >
567
- MK
568
- </Text>
569
- </View>
570
- </View>
571
- <View
572
- style={
573
- Array [
574
- Object {
575
- "paddingBottom": 20,
576
- "paddingLeft": 0,
577
- "paddingRight": 0,
578
- "paddingTop": 10,
579
- },
580
- ]
581
- }
582
- >
583
- <View
584
- style={
585
- Array [
586
- Object {
587
- "marginBottom": 10,
588
- },
589
- ]
590
- }
591
- >
592
- <Text
593
- aria-level="4"
594
- color="black"
595
- isHeader={true}
596
- medium="header5"
597
- numberOfLines={1}
598
- style={
599
- Array [
600
- Object {
601
- "color": "#000000",
602
- "fontFamily": "Moderat-Extended-Bold",
603
- "fontSize": 18,
604
- "fontStyle": "normal",
605
- "fontWeight": "400",
606
- "lineHeight": 23,
607
- "textDecorationColor": "#000000",
608
- },
609
- ]
610
- }
611
- type="header4"
612
- variant="bold"
613
- >
614
- Round
615
- </Text>
616
- </View>
617
- <View
618
- firstname="Michael"
619
- lastname="Knight"
620
- round={true}
621
- size={40}
622
- style={
623
- Array [
624
- Object {
625
- "alignItems": "center",
626
- "backgroundColor": "#4C34E0",
627
- "borderRadius": 20,
628
- "height": 40,
629
- "justifyContent": "center",
630
- "overflow": "hidden",
631
- "width": 40,
632
- },
633
- ]
634
- }
635
- >
636
- <Text
637
- color="white"
638
- isHeader={false}
639
- style={
640
- Array [
641
- Object {
642
- "color": "#FFFFFF",
643
- "fontFamily": "NotoSans-Bold",
644
- "fontSize": 14,
645
- "fontStyle": "normal",
646
- "fontWeight": "700",
647
- "lineHeight": 22,
648
- "textDecorationColor": "#FFFFFF",
649
- },
650
- ]
651
- }
652
- type="body-small"
653
- variant="bold"
654
- >
655
- MK
656
- </Text>
657
- </View>
658
- </View>
659
- <View
660
- style={
661
- Array [
662
- Object {
663
- "paddingBottom": 20,
664
- "paddingLeft": 0,
665
- "paddingRight": 0,
666
- "paddingTop": 10,
667
- },
668
- ]
669
- }
670
- >
671
- <View
672
- style={
673
- Array [
674
- Object {
675
- "marginBottom": 10,
676
- },
677
- ]
678
- }
679
- >
680
- <Text
681
- aria-level="4"
682
- color="black"
683
- isHeader={true}
684
- medium="header5"
685
- numberOfLines={1}
686
- style={
687
- Array [
688
- Object {
689
- "color": "#000000",
690
- "fontFamily": "Moderat-Extended-Bold",
691
- "fontSize": 18,
692
- "fontStyle": "normal",
693
- "fontWeight": "400",
694
- "lineHeight": 23,
695
- "textDecorationColor": "#000000",
696
- },
697
- ]
698
- }
699
- type="header4"
700
- variant="bold"
701
- >
702
- Light
703
- </Text>
704
- </View>
705
- <View
706
- firstname="Michael"
707
- lastname="Knight"
708
- light={true}
709
- size={40}
710
- style={
711
- Array [
712
- Object {
713
- "alignItems": "center",
714
- "backgroundColor": "#E5E5E5",
715
- "borderRadius": 10,
716
- "height": 40,
717
- "justifyContent": "center",
718
- "overflow": "hidden",
719
- "width": 40,
720
- },
721
- ]
722
- }
723
- >
724
- <Text
725
- color="black"
726
- isHeader={false}
727
- style={
728
- Array [
729
- Object {
730
- "color": "#000000",
731
- "fontFamily": "NotoSans-Bold",
732
- "fontSize": 14,
733
- "fontStyle": "normal",
734
- "fontWeight": "700",
735
- "lineHeight": 22,
736
- "textDecorationColor": "#000000",
737
- },
738
- ]
739
- }
740
- type="body-small"
741
- variant="bold"
742
- >
743
- MK
744
- </Text>
745
- </View>
746
- </View>
747
- <View
748
- style={
749
- Array [
750
- Object {
751
- "paddingBottom": 20,
752
- "paddingLeft": 0,
753
- "paddingRight": 0,
754
- "paddingTop": 10,
755
- },
756
- ]
757
- }
758
- >
759
- <View
760
- style={
761
- Array [
762
- Object {
763
- "marginBottom": 10,
764
- },
765
- ]
766
- }
767
- >
768
- <Text
769
- aria-level="4"
770
- color="black"
771
- isHeader={true}
772
- medium="header5"
773
- numberOfLines={1}
774
- style={
775
- Array [
776
- Object {
777
- "color": "#000000",
778
- "fontFamily": "Moderat-Extended-Bold",
779
- "fontSize": 18,
780
- "fontStyle": "normal",
781
- "fontWeight": "400",
782
- "lineHeight": 23,
783
- "textDecorationColor": "#000000",
784
- },
785
- ]
786
- }
787
- type="header4"
788
- variant="bold"
789
- >
790
- Small
791
- </Text>
792
- </View>
793
- <View
794
- firstname="Michael"
795
- lastname="Knight"
796
- size={32}
797
- style={
798
- Array [
799
- Object {
800
- "alignItems": "center",
801
- "backgroundColor": "#4C34E0",
802
- "borderRadius": 10,
803
- "height": 32,
804
- "justifyContent": "center",
805
- "overflow": "hidden",
806
- "width": 32,
807
- },
808
- ]
809
- }
810
- >
811
- <Text
812
- color="white"
813
- isHeader={false}
814
- style={
815
- Array [
816
- Object {
817
- "color": "#FFFFFF",
818
- "fontFamily": "NotoSans-Bold",
819
- "fontSize": 14,
820
- "fontStyle": "normal",
821
- "fontWeight": "700",
822
- "lineHeight": 22,
823
- "textDecorationColor": "#FFFFFF",
824
- },
825
- ]
826
- }
827
- type="body-small"
828
- variant="bold"
829
- >
830
- MK
831
- </Text>
832
- </View>
833
- </View>
834
- </View>
835
- </View>
836
- <View
837
- style={
838
- Array [
839
- Object {
840
- "marginBottom": 30,
841
- },
842
- ]
843
- }
844
- >
845
- <View
846
- style={
847
- Array [
848
- Object {
849
- "marginBottom": 30,
850
- },
851
- ]
852
- }
853
- >
854
- <Text
855
- aria-level="2"
856
- color="black"
857
- isHeader={true}
858
- style={
859
- Array [
860
- Object {
861
- "color": "#000000",
862
- "fontFamily": "Moderat-Extended-Bold",
863
- "fontSize": 32,
864
- "fontStyle": "normal",
865
- "fontWeight": "400",
866
- "lineHeight": 42,
867
- "textDecorationColor": "#000000",
868
- },
869
- ]
870
- }
871
- type="header2"
872
- variant="bold"
873
- >
874
- Without Name
875
- </Text>
876
- </View>
877
- <View
878
- style={
879
- Array [
880
- Object {
881
- "flexDirection": "column",
882
- "marginBottom": 0,
883
- "marginLeft": 0,
884
- "marginRight": 0,
885
- "marginTop": 0,
886
- },
887
- ]
888
- }
889
- >
890
- <View
891
- style={
892
- Array [
893
- Object {
894
- "paddingBottom": 20,
895
- "paddingLeft": 0,
896
- "paddingRight": 0,
897
- "paddingTop": 10,
898
- },
899
- ]
900
- }
901
- >
902
- <View
903
- style={
904
- Array [
905
- Object {
906
- "marginBottom": 10,
907
- },
908
- ]
909
- }
910
- >
911
- <Text
912
- aria-level="4"
913
- color="black"
914
- isHeader={true}
915
- medium="header5"
916
- numberOfLines={1}
917
- style={
918
- Array [
919
- Object {
920
- "color": "#000000",
921
- "fontFamily": "Moderat-Extended-Bold",
922
- "fontSize": 18,
923
- "fontStyle": "normal",
924
- "fontWeight": "400",
925
- "lineHeight": 23,
926
- "textDecorationColor": "#000000",
927
- },
928
- ]
929
- }
930
- type="header4"
931
- variant="bold"
932
- >
933
- Default
934
- </Text>
935
- </View>
936
- <View
937
- size={40}
938
- style={
939
- Array [
940
- Object {
941
- "alignItems": "center",
942
- "backgroundColor": "#4C34E0",
943
- "borderRadius": 10,
944
- "height": 40,
945
- "justifyContent": "center",
946
- "overflow": "hidden",
947
- "width": 40,
948
- },
949
- ]
950
- }
951
- >
952
- <View
953
- color="white"
954
- size={20}
955
- style={
956
- Array [
957
- Object {
958
- "alignSelf": "auto",
959
- "color": "white",
960
- "height": 20,
961
- "width": 20,
962
- },
963
- ]
964
- }
965
- >
966
- <svg
967
- color="white"
968
- data-file-name="SvgUserInline"
969
- />
970
- </View>
971
- </View>
972
- </View>
973
- <View
974
- style={
975
- Array [
976
- Object {
977
- "paddingBottom": 20,
978
- "paddingLeft": 0,
979
- "paddingRight": 0,
980
- "paddingTop": 10,
981
- },
982
- ]
983
- }
984
- >
985
- <View
986
- style={
987
- Array [
988
- Object {
989
- "marginBottom": 10,
990
- },
991
- ]
992
- }
993
- >
994
- <Text
995
- aria-level="4"
996
- color="black"
997
- isHeader={true}
998
- medium="header5"
999
- numberOfLines={1}
1000
- style={
1001
- Array [
1002
- Object {
1003
- "color": "#000000",
1004
- "fontFamily": "Moderat-Extended-Bold",
1005
- "fontSize": 18,
1006
- "fontStyle": "normal",
1007
- "fontWeight": "400",
1008
- "lineHeight": 23,
1009
- "textDecorationColor": "#000000",
1010
- },
1011
- ]
1012
- }
1013
- type="header4"
1014
- variant="bold"
1015
- >
1016
- Round
1017
- </Text>
1018
- </View>
1019
- <View
1020
- round={true}
1021
- size={40}
1022
- style={
1023
- Array [
1024
- Object {
1025
- "alignItems": "center",
1026
- "backgroundColor": "#4C34E0",
1027
- "borderRadius": 20,
1028
- "height": 40,
1029
- "justifyContent": "center",
1030
- "overflow": "hidden",
1031
- "width": 40,
1032
- },
1033
- ]
1034
- }
1035
- >
1036
- <View
1037
- color="white"
1038
- size={20}
1039
- style={
1040
- Array [
1041
- Object {
1042
- "alignSelf": "auto",
1043
- "color": "white",
1044
- "height": 20,
1045
- "width": 20,
1046
- },
1047
- ]
1048
- }
1049
- >
1050
- <svg
1051
- color="white"
1052
- data-file-name="SvgUserInline"
1053
- />
1054
- </View>
1055
- </View>
1056
- </View>
1057
- <View
1058
- style={
1059
- Array [
1060
- Object {
1061
- "paddingBottom": 20,
1062
- "paddingLeft": 0,
1063
- "paddingRight": 0,
1064
- "paddingTop": 10,
1065
- },
1066
- ]
1067
- }
1068
- >
1069
- <View
1070
- style={
1071
- Array [
1072
- Object {
1073
- "marginBottom": 10,
1074
- },
1075
- ]
1076
- }
1077
- >
1078
- <Text
1079
- aria-level="4"
1080
- color="black"
1081
- isHeader={true}
1082
- medium="header5"
1083
- numberOfLines={1}
1084
- style={
1085
- Array [
1086
- Object {
1087
- "color": "#000000",
1088
- "fontFamily": "Moderat-Extended-Bold",
1089
- "fontSize": 18,
1090
- "fontStyle": "normal",
1091
- "fontWeight": "400",
1092
- "lineHeight": 23,
1093
- "textDecorationColor": "#000000",
1094
- },
1095
- ]
1096
- }
1097
- type="header4"
1098
- variant="bold"
1099
- >
1100
- Light
1101
- </Text>
1102
- </View>
1103
- <View
1104
- light={true}
1105
- size={40}
1106
- style={
1107
- Array [
1108
- Object {
1109
- "alignItems": "center",
1110
- "backgroundColor": "#E5E5E5",
1111
- "borderRadius": 10,
1112
- "height": 40,
1113
- "justifyContent": "center",
1114
- "overflow": "hidden",
1115
- "width": 40,
1116
- },
1117
- ]
1118
- }
1119
- >
1120
- <View
1121
- color="black"
1122
- size={20}
1123
- style={
1124
- Array [
1125
- Object {
1126
- "alignSelf": "auto",
1127
- "color": "black",
1128
- "height": 20,
1129
- "width": 20,
1130
- },
1131
- ]
1132
- }
1133
- >
1134
- <svg
1135
- color="black"
1136
- data-file-name="SvgUserInline"
1137
- />
1138
- </View>
1139
- </View>
1140
- </View>
1141
- <View
1142
- style={
1143
- Array [
1144
- Object {
1145
- "paddingBottom": 20,
1146
- "paddingLeft": 0,
1147
- "paddingRight": 0,
1148
- "paddingTop": 10,
1149
- },
1150
- ]
1151
- }
1152
- >
1153
- <View
1154
- style={
1155
- Array [
1156
- Object {
1157
- "marginBottom": 10,
1158
- },
1159
- ]
1160
- }
1161
- >
1162
- <Text
1163
- aria-level="4"
1164
- color="black"
1165
- isHeader={true}
1166
- medium="header5"
1167
- numberOfLines={1}
1168
- style={
1169
- Array [
1170
- Object {
1171
- "color": "#000000",
1172
- "fontFamily": "Moderat-Extended-Bold",
1173
- "fontSize": 18,
1174
- "fontStyle": "normal",
1175
- "fontWeight": "400",
1176
- "lineHeight": 23,
1177
- "textDecorationColor": "#000000",
1178
- },
1179
- ]
1180
- }
1181
- type="header4"
1182
- variant="bold"
1183
- >
1184
- Small
1185
- </Text>
1186
- </View>
1187
- <View
1188
- size={32}
1189
- style={
1190
- Array [
1191
- Object {
1192
- "alignItems": "center",
1193
- "backgroundColor": "#4C34E0",
1194
- "borderRadius": 10,
1195
- "height": 32,
1196
- "justifyContent": "center",
1197
- "overflow": "hidden",
1198
- "width": 32,
1199
- },
1200
- ]
1201
- }
1202
- >
1203
- <View
1204
- color="white"
1205
- size={16}
1206
- style={
1207
- Array [
1208
- Object {
1209
- "alignSelf": "auto",
1210
- "color": "white",
1211
- "height": 16,
1212
- "width": 16,
1213
- },
1214
- ]
1215
- }
1216
- >
1217
- <svg
1218
- color="white"
1219
- data-file-name="SvgUserInline"
1220
- />
1221
- </View>
1222
- </View>
1223
- </View>
1224
- </View>
1225
- </View>
1226
- </View>
1227
- </RCTScrollView>
1228
- </RNCSafeAreaProvider>
1229
- `;