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