@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/utils/windowSize/__snapshots__/windowSize.stories.tsx.snap DELETED
@@ -1,1485 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`kitt-universal/Utils Window Size 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
- Window Size
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
- Breakpoints Values
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
- BASE
158
- </Text>
159
- </View>
160
- <Text
161
- color="black"
162
- isHeader={false}
163
- style={
164
- Array [
165
- Object {
166
- "color": "#000000",
167
- "fontFamily": "NotoSans",
168
- "fontSize": 16,
169
- "fontStyle": "normal",
170
- "fontWeight": "400",
171
- "lineHeight": 26,
172
- "textDecorationColor": "#000000",
173
- },
174
- ]
175
- }
176
- type="body"
177
- variant="regular"
178
- >
179
- min-width: 0
180
- </Text>
181
- </View>
182
- <View
183
- style={
184
- Array [
185
- Object {
186
- "paddingBottom": 20,
187
- "paddingLeft": 0,
188
- "paddingRight": 0,
189
- "paddingTop": 10,
190
- },
191
- ]
192
- }
193
- >
194
- <View
195
- style={
196
- Array [
197
- Object {
198
- "marginBottom": 10,
199
- },
200
- ]
201
- }
202
- >
203
- <Text
204
- aria-level="4"
205
- color="black"
206
- isHeader={true}
207
- medium="header5"
208
- numberOfLines={1}
209
- style={
210
- Array [
211
- Object {
212
- "color": "#000000",
213
- "fontFamily": "Moderat-Extended-Bold",
214
- "fontSize": 18,
215
- "fontStyle": "normal",
216
- "fontWeight": "400",
217
- "lineHeight": 23,
218
- "textDecorationColor": "#000000",
219
- },
220
- ]
221
- }
222
- type="header4"
223
- variant="bold"
224
- >
225
- SMALL
226
- </Text>
227
- </View>
228
- <Text
229
- color="black"
230
- isHeader={false}
231
- style={
232
- Array [
233
- Object {
234
- "color": "#000000",
235
- "fontFamily": "NotoSans",
236
- "fontSize": 16,
237
- "fontStyle": "normal",
238
- "fontWeight": "400",
239
- "lineHeight": 26,
240
- "textDecorationColor": "#000000",
241
- },
242
- ]
243
- }
244
- type="body"
245
- variant="regular"
246
- >
247
- min-width: 480
248
- </Text>
249
- </View>
250
- <View
251
- style={
252
- Array [
253
- Object {
254
- "paddingBottom": 20,
255
- "paddingLeft": 0,
256
- "paddingRight": 0,
257
- "paddingTop": 10,
258
- },
259
- ]
260
- }
261
- >
262
- <View
263
- style={
264
- Array [
265
- Object {
266
- "marginBottom": 10,
267
- },
268
- ]
269
- }
270
- >
271
- <Text
272
- aria-level="4"
273
- color="black"
274
- isHeader={true}
275
- medium="header5"
276
- numberOfLines={1}
277
- style={
278
- Array [
279
- Object {
280
- "color": "#000000",
281
- "fontFamily": "Moderat-Extended-Bold",
282
- "fontSize": 18,
283
- "fontStyle": "normal",
284
- "fontWeight": "400",
285
- "lineHeight": 23,
286
- "textDecorationColor": "#000000",
287
- },
288
- ]
289
- }
290
- type="header4"
291
- variant="bold"
292
- >
293
- MEDIUM
294
- </Text>
295
- </View>
296
- <Text
297
- color="black"
298
- isHeader={false}
299
- style={
300
- Array [
301
- Object {
302
- "color": "#000000",
303
- "fontFamily": "NotoSans",
304
- "fontSize": 16,
305
- "fontStyle": "normal",
306
- "fontWeight": "400",
307
- "lineHeight": 26,
308
- "textDecorationColor": "#000000",
309
- },
310
- ]
311
- }
312
- type="body"
313
- variant="regular"
314
- >
315
- min-width: 768
316
- </Text>
317
- </View>
318
- <View
319
- style={
320
- Array [
321
- Object {
322
- "paddingBottom": 20,
323
- "paddingLeft": 0,
324
- "paddingRight": 0,
325
- "paddingTop": 10,
326
- },
327
- ]
328
- }
329
- >
330
- <View
331
- style={
332
- Array [
333
- Object {
334
- "marginBottom": 10,
335
- },
336
- ]
337
- }
338
- >
339
- <Text
340
- aria-level="4"
341
- color="black"
342
- isHeader={true}
343
- medium="header5"
344
- numberOfLines={1}
345
- style={
346
- Array [
347
- Object {
348
- "color": "#000000",
349
- "fontFamily": "Moderat-Extended-Bold",
350
- "fontSize": 18,
351
- "fontStyle": "normal",
352
- "fontWeight": "400",
353
- "lineHeight": 23,
354
- "textDecorationColor": "#000000",
355
- },
356
- ]
357
- }
358
- type="header4"
359
- variant="bold"
360
- >
361
- LARGE
362
- </Text>
363
- </View>
364
- <Text
365
- color="black"
366
- isHeader={false}
367
- style={
368
- Array [
369
- Object {
370
- "color": "#000000",
371
- "fontFamily": "NotoSans",
372
- "fontSize": 16,
373
- "fontStyle": "normal",
374
- "fontWeight": "400",
375
- "lineHeight": 26,
376
- "textDecorationColor": "#000000",
377
- },
378
- ]
379
- }
380
- type="body"
381
- variant="regular"
382
- >
383
- min-width: 1024
384
- </Text>
385
- </View>
386
- <View
387
- style={
388
- Array [
389
- Object {
390
- "paddingBottom": 20,
391
- "paddingLeft": 0,
392
- "paddingRight": 0,
393
- "paddingTop": 10,
394
- },
395
- ]
396
- }
397
- >
398
- <View
399
- style={
400
- Array [
401
- Object {
402
- "marginBottom": 10,
403
- },
404
- ]
405
- }
406
- >
407
- <Text
408
- aria-level="4"
409
- color="black"
410
- isHeader={true}
411
- medium="header5"
412
- numberOfLines={1}
413
- style={
414
- Array [
415
- Object {
416
- "color": "#000000",
417
- "fontFamily": "Moderat-Extended-Bold",
418
- "fontSize": 18,
419
- "fontStyle": "normal",
420
- "fontWeight": "400",
421
- "lineHeight": 23,
422
- "textDecorationColor": "#000000",
423
- },
424
- ]
425
- }
426
- type="header4"
427
- variant="bold"
428
- >
429
- WIDE
430
- </Text>
431
- </View>
432
- <Text
433
- color="black"
434
- isHeader={false}
435
- style={
436
- Array [
437
- Object {
438
- "color": "#000000",
439
- "fontFamily": "NotoSans",
440
- "fontSize": 16,
441
- "fontStyle": "normal",
442
- "fontWeight": "400",
443
- "lineHeight": 26,
444
- "textDecorationColor": "#000000",
445
- },
446
- ]
447
- }
448
- type="body"
449
- variant="regular"
450
- >
451
- min-width: 1280
452
- </Text>
453
- </View>
454
- </View>
455
- </View>
456
- <View
457
- style={
458
- Array [
459
- Object {
460
- "marginBottom": 30,
461
- },
462
- ]
463
- }
464
- >
465
- <View
466
- style={
467
- Array [
468
- Object {
469
- "marginBottom": 30,
470
- },
471
- ]
472
- }
473
- >
474
- <Text
475
- aria-level="2"
476
- color="black"
477
- isHeader={true}
478
- style={
479
- Array [
480
- Object {
481
- "color": "#000000",
482
- "fontFamily": "Moderat-Extended-Bold",
483
- "fontSize": 32,
484
- "fontStyle": "normal",
485
- "fontWeight": "400",
486
- "lineHeight": 42,
487
- "textDecorationColor": "#000000",
488
- },
489
- ]
490
- }
491
- type="header2"
492
- variant="bold"
493
- >
494
- In Breakpoint
495
- </Text>
496
- </View>
497
- <View
498
- style={
499
- Array [
500
- Object {
501
- "flexDirection": "column",
502
- "marginBottom": 0,
503
- "marginLeft": 0,
504
- "marginRight": 0,
505
- "marginTop": 0,
506
- },
507
- ]
508
- }
509
- >
510
- <View
511
- style={
512
- Array [
513
- Object {
514
- "paddingBottom": 20,
515
- "paddingLeft": 0,
516
- "paddingRight": 0,
517
- "paddingTop": 10,
518
- },
519
- ]
520
- }
521
- >
522
- <View
523
- style={
524
- Array [
525
- Object {
526
- "marginBottom": 10,
527
- },
528
- ]
529
- }
530
- >
531
- <Text
532
- aria-level="4"
533
- color="black"
534
- isHeader={true}
535
- medium="header5"
536
- numberOfLines={1}
537
- style={
538
- Array [
539
- Object {
540
- "color": "#000000",
541
- "fontFamily": "Moderat-Extended-Bold",
542
- "fontSize": 18,
543
- "fontStyle": "normal",
544
- "fontWeight": "400",
545
- "lineHeight": 23,
546
- "textDecorationColor": "#000000",
547
- },
548
- ]
549
- }
550
- type="header4"
551
- variant="bold"
552
- >
553
- BASE
554
- </Text>
555
- </View>
556
- <Text
557
- color="black"
558
- isHeader={false}
559
- style={
560
- Array [
561
- Object {
562
- "color": "#000000",
563
- "fontFamily": "NotoSans",
564
- "fontSize": 16,
565
- "fontStyle": "normal",
566
- "fontWeight": "400",
567
- "lineHeight": 26,
568
- "textDecorationColor": "#000000",
569
- },
570
- ]
571
- }
572
- type="body"
573
- variant="regular"
574
- >
575
- yes
576
- </Text>
577
- </View>
578
- <View
579
- style={
580
- Array [
581
- Object {
582
- "paddingBottom": 20,
583
- "paddingLeft": 0,
584
- "paddingRight": 0,
585
- "paddingTop": 10,
586
- },
587
- ]
588
- }
589
- >
590
- <View
591
- style={
592
- Array [
593
- Object {
594
- "marginBottom": 10,
595
- },
596
- ]
597
- }
598
- >
599
- <Text
600
- aria-level="4"
601
- color="black"
602
- isHeader={true}
603
- medium="header5"
604
- numberOfLines={1}
605
- style={
606
- Array [
607
- Object {
608
- "color": "#000000",
609
- "fontFamily": "Moderat-Extended-Bold",
610
- "fontSize": 18,
611
- "fontStyle": "normal",
612
- "fontWeight": "400",
613
- "lineHeight": 23,
614
- "textDecorationColor": "#000000",
615
- },
616
- ]
617
- }
618
- type="header4"
619
- variant="bold"
620
- >
621
- SMALL
622
- </Text>
623
- </View>
624
- </View>
625
- <View
626
- style={
627
- Array [
628
- Object {
629
- "paddingBottom": 20,
630
- "paddingLeft": 0,
631
- "paddingRight": 0,
632
- "paddingTop": 10,
633
- },
634
- ]
635
- }
636
- >
637
- <View
638
- style={
639
- Array [
640
- Object {
641
- "marginBottom": 10,
642
- },
643
- ]
644
- }
645
- >
646
- <Text
647
- aria-level="4"
648
- color="black"
649
- isHeader={true}
650
- medium="header5"
651
- numberOfLines={1}
652
- style={
653
- Array [
654
- Object {
655
- "color": "#000000",
656
- "fontFamily": "Moderat-Extended-Bold",
657
- "fontSize": 18,
658
- "fontStyle": "normal",
659
- "fontWeight": "400",
660
- "lineHeight": 23,
661
- "textDecorationColor": "#000000",
662
- },
663
- ]
664
- }
665
- type="header4"
666
- variant="bold"
667
- >
668
- MEDIUM
669
- </Text>
670
- </View>
671
- </View>
672
- <View
673
- style={
674
- Array [
675
- Object {
676
- "paddingBottom": 20,
677
- "paddingLeft": 0,
678
- "paddingRight": 0,
679
- "paddingTop": 10,
680
- },
681
- ]
682
- }
683
- >
684
- <View
685
- style={
686
- Array [
687
- Object {
688
- "marginBottom": 10,
689
- },
690
- ]
691
- }
692
- >
693
- <Text
694
- aria-level="4"
695
- color="black"
696
- isHeader={true}
697
- medium="header5"
698
- numberOfLines={1}
699
- style={
700
- Array [
701
- Object {
702
- "color": "#000000",
703
- "fontFamily": "Moderat-Extended-Bold",
704
- "fontSize": 18,
705
- "fontStyle": "normal",
706
- "fontWeight": "400",
707
- "lineHeight": 23,
708
- "textDecorationColor": "#000000",
709
- },
710
- ]
711
- }
712
- type="header4"
713
- variant="bold"
714
- >
715
- LARGE
716
- </Text>
717
- </View>
718
- </View>
719
- <View
720
- style={
721
- Array [
722
- Object {
723
- "paddingBottom": 20,
724
- "paddingLeft": 0,
725
- "paddingRight": 0,
726
- "paddingTop": 10,
727
- },
728
- ]
729
- }
730
- >
731
- <View
732
- style={
733
- Array [
734
- Object {
735
- "marginBottom": 10,
736
- },
737
- ]
738
- }
739
- >
740
- <Text
741
- aria-level="4"
742
- color="black"
743
- isHeader={true}
744
- medium="header5"
745
- numberOfLines={1}
746
- style={
747
- Array [
748
- Object {
749
- "color": "#000000",
750
- "fontFamily": "Moderat-Extended-Bold",
751
- "fontSize": 18,
752
- "fontStyle": "normal",
753
- "fontWeight": "400",
754
- "lineHeight": 23,
755
- "textDecorationColor": "#000000",
756
- },
757
- ]
758
- }
759
- type="header4"
760
- variant="bold"
761
- >
762
- WIDE
763
- </Text>
764
- </View>
765
- </View>
766
- </View>
767
- </View>
768
- <View
769
- style={
770
- Array [
771
- Object {
772
- "marginBottom": 30,
773
- },
774
- ]
775
- }
776
- >
777
- <View
778
- style={
779
- Array [
780
- Object {
781
- "marginBottom": 30,
782
- },
783
- ]
784
- }
785
- >
786
- <Text
787
- aria-level="2"
788
- color="black"
789
- isHeader={true}
790
- style={
791
- Array [
792
- Object {
793
- "color": "#000000",
794
- "fontFamily": "Moderat-Extended-Bold",
795
- "fontSize": 32,
796
- "fontStyle": "normal",
797
- "fontWeight": "400",
798
- "lineHeight": 42,
799
- "textDecorationColor": "#000000",
800
- },
801
- ]
802
- }
803
- type="header2"
804
- variant="bold"
805
- >
806
- minWidth
807
- </Text>
808
- </View>
809
- <View
810
- style={
811
- Array [
812
- Object {
813
- "flexDirection": "column",
814
- "marginBottom": 0,
815
- "marginLeft": 0,
816
- "marginRight": 0,
817
- "marginTop": 0,
818
- },
819
- ]
820
- }
821
- >
822
- <View
823
- style={
824
- Array [
825
- Object {
826
- "paddingBottom": 20,
827
- "paddingLeft": 0,
828
- "paddingRight": 0,
829
- "paddingTop": 10,
830
- },
831
- ]
832
- }
833
- >
834
- <View
835
- style={
836
- Array [
837
- Object {
838
- "marginBottom": 10,
839
- },
840
- ]
841
- }
842
- >
843
- <Text
844
- aria-level="4"
845
- color="black"
846
- isHeader={true}
847
- medium="header5"
848
- numberOfLines={1}
849
- style={
850
- Array [
851
- Object {
852
- "color": "#000000",
853
- "fontFamily": "Moderat-Extended-Bold",
854
- "fontSize": 18,
855
- "fontStyle": "normal",
856
- "fontWeight": "400",
857
- "lineHeight": 23,
858
- "textDecorationColor": "#000000",
859
- },
860
- ]
861
- }
862
- type="header4"
863
- variant="bold"
864
- >
865
- BASE
866
- </Text>
867
- </View>
868
- <Text
869
- color="black"
870
- isHeader={false}
871
- style={
872
- Array [
873
- Object {
874
- "color": "#000000",
875
- "fontFamily": "NotoSans",
876
- "fontSize": 16,
877
- "fontStyle": "normal",
878
- "fontWeight": "400",
879
- "lineHeight": 26,
880
- "textDecorationColor": "#000000",
881
- },
882
- ]
883
- }
884
- type="body"
885
- variant="regular"
886
- >
887
- yes
888
- </Text>
889
- </View>
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
- SMALL
934
- </Text>
935
- </View>
936
- </View>
937
- <View
938
- style={
939
- Array [
940
- Object {
941
- "paddingBottom": 20,
942
- "paddingLeft": 0,
943
- "paddingRight": 0,
944
- "paddingTop": 10,
945
- },
946
- ]
947
- }
948
- >
949
- <View
950
- style={
951
- Array [
952
- Object {
953
- "marginBottom": 10,
954
- },
955
- ]
956
- }
957
- >
958
- <Text
959
- aria-level="4"
960
- color="black"
961
- isHeader={true}
962
- medium="header5"
963
- numberOfLines={1}
964
- style={
965
- Array [
966
- Object {
967
- "color": "#000000",
968
- "fontFamily": "Moderat-Extended-Bold",
969
- "fontSize": 18,
970
- "fontStyle": "normal",
971
- "fontWeight": "400",
972
- "lineHeight": 23,
973
- "textDecorationColor": "#000000",
974
- },
975
- ]
976
- }
977
- type="header4"
978
- variant="bold"
979
- >
980
- MEDIUM
981
- </Text>
982
- </View>
983
- </View>
984
- <View
985
- style={
986
- Array [
987
- Object {
988
- "paddingBottom": 20,
989
- "paddingLeft": 0,
990
- "paddingRight": 0,
991
- "paddingTop": 10,
992
- },
993
- ]
994
- }
995
- >
996
- <View
997
- style={
998
- Array [
999
- Object {
1000
- "marginBottom": 10,
1001
- },
1002
- ]
1003
- }
1004
- >
1005
- <Text
1006
- aria-level="4"
1007
- color="black"
1008
- isHeader={true}
1009
- medium="header5"
1010
- numberOfLines={1}
1011
- style={
1012
- Array [
1013
- Object {
1014
- "color": "#000000",
1015
- "fontFamily": "Moderat-Extended-Bold",
1016
- "fontSize": 18,
1017
- "fontStyle": "normal",
1018
- "fontWeight": "400",
1019
- "lineHeight": 23,
1020
- "textDecorationColor": "#000000",
1021
- },
1022
- ]
1023
- }
1024
- type="header4"
1025
- variant="bold"
1026
- >
1027
- LARGE
1028
- </Text>
1029
- </View>
1030
- </View>
1031
- <View
1032
- style={
1033
- Array [
1034
- Object {
1035
- "paddingBottom": 20,
1036
- "paddingLeft": 0,
1037
- "paddingRight": 0,
1038
- "paddingTop": 10,
1039
- },
1040
- ]
1041
- }
1042
- >
1043
- <View
1044
- style={
1045
- Array [
1046
- Object {
1047
- "marginBottom": 10,
1048
- },
1049
- ]
1050
- }
1051
- >
1052
- <Text
1053
- aria-level="4"
1054
- color="black"
1055
- isHeader={true}
1056
- medium="header5"
1057
- numberOfLines={1}
1058
- style={
1059
- Array [
1060
- Object {
1061
- "color": "#000000",
1062
- "fontFamily": "Moderat-Extended-Bold",
1063
- "fontSize": 18,
1064
- "fontStyle": "normal",
1065
- "fontWeight": "400",
1066
- "lineHeight": 23,
1067
- "textDecorationColor": "#000000",
1068
- },
1069
- ]
1070
- }
1071
- type="header4"
1072
- variant="bold"
1073
- >
1074
- WIDE
1075
- </Text>
1076
- </View>
1077
- </View>
1078
- </View>
1079
- </View>
1080
- <View
1081
- style={
1082
- Array [
1083
- Object {
1084
- "marginBottom": 30,
1085
- },
1086
- ]
1087
- }
1088
- >
1089
- <View
1090
- style={
1091
- Array [
1092
- Object {
1093
- "marginBottom": 30,
1094
- },
1095
- ]
1096
- }
1097
- >
1098
- <Text
1099
- aria-level="2"
1100
- color="black"
1101
- isHeader={true}
1102
- style={
1103
- Array [
1104
- Object {
1105
- "color": "#000000",
1106
- "fontFamily": "Moderat-Extended-Bold",
1107
- "fontSize": 32,
1108
- "fontStyle": "normal",
1109
- "fontWeight": "400",
1110
- "lineHeight": 42,
1111
- "textDecorationColor": "#000000",
1112
- },
1113
- ]
1114
- }
1115
- type="header2"
1116
- variant="bold"
1117
- >
1118
- maxWidth
1119
- </Text>
1120
- </View>
1121
- <View
1122
- style={
1123
- Array [
1124
- Object {
1125
- "flexDirection": "column",
1126
- "marginBottom": 0,
1127
- "marginLeft": 0,
1128
- "marginRight": 0,
1129
- "marginTop": 0,
1130
- },
1131
- ]
1132
- }
1133
- >
1134
- <View
1135
- style={
1136
- Array [
1137
- Object {
1138
- "paddingBottom": 20,
1139
- "paddingLeft": 0,
1140
- "paddingRight": 0,
1141
- "paddingTop": 10,
1142
- },
1143
- ]
1144
- }
1145
- >
1146
- <View
1147
- style={
1148
- Array [
1149
- Object {
1150
- "marginBottom": 10,
1151
- },
1152
- ]
1153
- }
1154
- >
1155
- <Text
1156
- aria-level="4"
1157
- color="black"
1158
- isHeader={true}
1159
- medium="header5"
1160
- numberOfLines={1}
1161
- style={
1162
- Array [
1163
- Object {
1164
- "color": "#000000",
1165
- "fontFamily": "Moderat-Extended-Bold",
1166
- "fontSize": 18,
1167
- "fontStyle": "normal",
1168
- "fontWeight": "400",
1169
- "lineHeight": 23,
1170
- "textDecorationColor": "#000000",
1171
- },
1172
- ]
1173
- }
1174
- type="header4"
1175
- variant="bold"
1176
- >
1177
- BASE
1178
- </Text>
1179
- </View>
1180
- <Text
1181
- color="black"
1182
- isHeader={false}
1183
- style={
1184
- Array [
1185
- Object {
1186
- "color": "#000000",
1187
- "fontFamily": "NotoSans",
1188
- "fontSize": 16,
1189
- "fontStyle": "normal",
1190
- "fontWeight": "400",
1191
- "lineHeight": 26,
1192
- "textDecorationColor": "#000000",
1193
- },
1194
- ]
1195
- }
1196
- type="body"
1197
- variant="regular"
1198
- >
1199
- yes
1200
- </Text>
1201
- </View>
1202
- <View
1203
- style={
1204
- Array [
1205
- Object {
1206
- "paddingBottom": 20,
1207
- "paddingLeft": 0,
1208
- "paddingRight": 0,
1209
- "paddingTop": 10,
1210
- },
1211
- ]
1212
- }
1213
- >
1214
- <View
1215
- style={
1216
- Array [
1217
- Object {
1218
- "marginBottom": 10,
1219
- },
1220
- ]
1221
- }
1222
- >
1223
- <Text
1224
- aria-level="4"
1225
- color="black"
1226
- isHeader={true}
1227
- medium="header5"
1228
- numberOfLines={1}
1229
- style={
1230
- Array [
1231
- Object {
1232
- "color": "#000000",
1233
- "fontFamily": "Moderat-Extended-Bold",
1234
- "fontSize": 18,
1235
- "fontStyle": "normal",
1236
- "fontWeight": "400",
1237
- "lineHeight": 23,
1238
- "textDecorationColor": "#000000",
1239
- },
1240
- ]
1241
- }
1242
- type="header4"
1243
- variant="bold"
1244
- >
1245
- SMALL
1246
- </Text>
1247
- </View>
1248
- <Text
1249
- color="black"
1250
- isHeader={false}
1251
- style={
1252
- Array [
1253
- Object {
1254
- "color": "#000000",
1255
- "fontFamily": "NotoSans",
1256
- "fontSize": 16,
1257
- "fontStyle": "normal",
1258
- "fontWeight": "400",
1259
- "lineHeight": 26,
1260
- "textDecorationColor": "#000000",
1261
- },
1262
- ]
1263
- }
1264
- type="body"
1265
- variant="regular"
1266
- >
1267
- yes
1268
- </Text>
1269
- </View>
1270
- <View
1271
- style={
1272
- Array [
1273
- Object {
1274
- "paddingBottom": 20,
1275
- "paddingLeft": 0,
1276
- "paddingRight": 0,
1277
- "paddingTop": 10,
1278
- },
1279
- ]
1280
- }
1281
- >
1282
- <View
1283
- style={
1284
- Array [
1285
- Object {
1286
- "marginBottom": 10,
1287
- },
1288
- ]
1289
- }
1290
- >
1291
- <Text
1292
- aria-level="4"
1293
- color="black"
1294
- isHeader={true}
1295
- medium="header5"
1296
- numberOfLines={1}
1297
- style={
1298
- Array [
1299
- Object {
1300
- "color": "#000000",
1301
- "fontFamily": "Moderat-Extended-Bold",
1302
- "fontSize": 18,
1303
- "fontStyle": "normal",
1304
- "fontWeight": "400",
1305
- "lineHeight": 23,
1306
- "textDecorationColor": "#000000",
1307
- },
1308
- ]
1309
- }
1310
- type="header4"
1311
- variant="bold"
1312
- >
1313
- MEDIUM
1314
- </Text>
1315
- </View>
1316
- <Text
1317
- color="black"
1318
- isHeader={false}
1319
- style={
1320
- Array [
1321
- Object {
1322
- "color": "#000000",
1323
- "fontFamily": "NotoSans",
1324
- "fontSize": 16,
1325
- "fontStyle": "normal",
1326
- "fontWeight": "400",
1327
- "lineHeight": 26,
1328
- "textDecorationColor": "#000000",
1329
- },
1330
- ]
1331
- }
1332
- type="body"
1333
- variant="regular"
1334
- >
1335
- yes
1336
- </Text>
1337
- </View>
1338
- <View
1339
- style={
1340
- Array [
1341
- Object {
1342
- "paddingBottom": 20,
1343
- "paddingLeft": 0,
1344
- "paddingRight": 0,
1345
- "paddingTop": 10,
1346
- },
1347
- ]
1348
- }
1349
- >
1350
- <View
1351
- style={
1352
- Array [
1353
- Object {
1354
- "marginBottom": 10,
1355
- },
1356
- ]
1357
- }
1358
- >
1359
- <Text
1360
- aria-level="4"
1361
- color="black"
1362
- isHeader={true}
1363
- medium="header5"
1364
- numberOfLines={1}
1365
- style={
1366
- Array [
1367
- Object {
1368
- "color": "#000000",
1369
- "fontFamily": "Moderat-Extended-Bold",
1370
- "fontSize": 18,
1371
- "fontStyle": "normal",
1372
- "fontWeight": "400",
1373
- "lineHeight": 23,
1374
- "textDecorationColor": "#000000",
1375
- },
1376
- ]
1377
- }
1378
- type="header4"
1379
- variant="bold"
1380
- >
1381
- LARGE
1382
- </Text>
1383
- </View>
1384
- <Text
1385
- color="black"
1386
- isHeader={false}
1387
- style={
1388
- Array [
1389
- Object {
1390
- "color": "#000000",
1391
- "fontFamily": "NotoSans",
1392
- "fontSize": 16,
1393
- "fontStyle": "normal",
1394
- "fontWeight": "400",
1395
- "lineHeight": 26,
1396
- "textDecorationColor": "#000000",
1397
- },
1398
- ]
1399
- }
1400
- type="body"
1401
- variant="regular"
1402
- >
1403
- yes
1404
- </Text>
1405
- </View>
1406
- </View>
1407
- </View>
1408
- <View
1409
- style={
1410
- Array [
1411
- Object {
1412
- "marginBottom": 30,
1413
- },
1414
- ]
1415
- }
1416
- >
1417
- <View
1418
- style={
1419
- Array [
1420
- Object {
1421
- "marginBottom": 30,
1422
- },
1423
- ]
1424
- }
1425
- >
1426
- <Text
1427
- aria-level="2"
1428
- color="black"
1429
- isHeader={true}
1430
- style={
1431
- Array [
1432
- Object {
1433
- "color": "#000000",
1434
- "fontFamily": "Moderat-Extended-Bold",
1435
- "fontSize": 32,
1436
- "fontStyle": "normal",
1437
- "fontWeight": "400",
1438
- "lineHeight": 42,
1439
- "textDecorationColor": "#000000",
1440
- },
1441
- ]
1442
- }
1443
- type="header2"
1444
- variant="bold"
1445
- >
1446
- Styled View
1447
- </Text>
1448
- </View>
1449
- <View
1450
- style={
1451
- Array [
1452
- Object {
1453
- "backgroundColor": "blue",
1454
- "marginBottom": 15,
1455
- },
1456
- ]
1457
- }
1458
- >
1459
- <Text
1460
- color="black"
1461
- isHeader={false}
1462
- style={
1463
- Array [
1464
- Object {
1465
- "color": "#000000",
1466
- "fontFamily": "NotoSans",
1467
- "fontSize": 16,
1468
- "fontStyle": "normal",
1469
- "fontWeight": "400",
1470
- "lineHeight": 26,
1471
- "textDecorationColor": "#000000",
1472
- },
1473
- ]
1474
- }
1475
- type="body"
1476
- variant="regular"
1477
- >
1478
- styled view
1479
- </Text>
1480
- </View>
1481
- </View>
1482
- </View>
1483
- </RCTScrollView>
1484
- </RNCSafeAreaProvider>
1485
- `;