@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/Modal/__snapshots__/Modal.stories.tsx.snap DELETED
@@ -1,2960 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`kitt-universal/Modal Default 1`] = `
4
- <RNCSafeAreaProvider
5
- onInsetsChange={[Function]}
6
- style={
7
- Array [
8
- Object {
9
- "flex": 1,
10
- },
11
- undefined,
12
- ]
13
- }
14
- >
15
- <View
16
- style={
17
- Array [
18
- Object {
19
- "marginBottom": 30,
20
- },
21
- ]
22
- }
23
- >
24
- <View
25
- style={
26
- Array [
27
- Object {
28
- "marginBottom": 30,
29
- },
30
- ]
31
- }
32
- >
33
- <Text
34
- aria-level="2"
35
- color="black"
36
- isHeader={true}
37
- style={
38
- Array [
39
- Object {
40
- "color": "#000000",
41
- "fontFamily": "Moderat-Extended-Bold",
42
- "fontSize": 32,
43
- "fontStyle": "normal",
44
- "fontWeight": "400",
45
- "lineHeight": 42,
46
- "textDecorationColor": "#000000",
47
- },
48
- ]
49
- }
50
- type="header2"
51
- variant="bold"
52
- >
53
- Default
54
- </Text>
55
- </View>
56
- <View
57
- accessibilityRole="button"
58
- accessible={true}
59
- collapsable={false}
60
- focusable={true}
61
- isPressed={false}
62
- onBlur={[Function]}
63
- onClick={[Function]}
64
- onFocus={[Function]}
65
- onResponderGrant={[Function]}
66
- onResponderMove={[Function]}
67
- onResponderRelease={[Function]}
68
- onResponderTerminate={[Function]}
69
- onResponderTerminationRequest={[Function]}
70
- onStartShouldSetResponder={[Function]}
71
- style={
72
- Array [
73
- Object {
74
- "alignSelf": "flex-start",
75
- "backgroundColor": "#4C34E0",
76
- "borderColor": "transparent",
77
- "borderRadius": 30,
78
- "borderWidth": 2,
79
- "flexDirection": "row",
80
- "maxWidth": 335,
81
- "minHeight": 42,
82
- "minWidth": 40,
83
- "paddingBottom": 8,
84
- "paddingLeft": 16,
85
- "paddingRight": 16,
86
- "paddingTop": 8,
87
- "width": "auto",
88
- },
89
- ]
90
- }
91
- type="primary"
92
- >
93
- <View
94
- style={
95
- Array [
96
- Object {
97
- "alignItems": "center",
98
- "flexBasis": "auto",
99
- "flexDirection": "row",
100
- "flexGrow": 0,
101
- "flexShrink": 1,
102
- "justifyContent": "center",
103
- },
104
- ]
105
- }
106
- >
107
- <Text
108
- color="white"
109
- isHeader={false}
110
- style={
111
- Array [
112
- Object {
113
- "color": "#FFFFFF",
114
- "fontFamily": "NotoSans-Bold",
115
- "fontSize": 16,
116
- "fontStyle": "normal",
117
- "fontWeight": "700",
118
- "lineHeight": 26,
119
- "textDecorationColor": "#FFFFFF",
120
- },
121
- Object {
122
- "textAlign": "center",
123
- },
124
- ]
125
- }
126
- type="body"
127
- variant="bold"
128
- >
129
- <Text
130
- isHeader={false}
131
- style={
132
- Array [
133
- Object {
134
- "fontFamily": "NotoSans",
135
- "fontSize": 16,
136
- "fontStyle": "normal",
137
- "fontWeight": "400",
138
- "lineHeight": 26,
139
- },
140
- ]
141
- }
142
- type="body"
143
- variant="regular"
144
- >
145
- Toggle modal
146
- </Text>
147
- </Text>
148
- </View>
149
- </View>
150
- <Modal
151
- animationType="fade"
152
- hardwareAccelerated={false}
153
- onRequestClose={[Function]}
154
- transparent={true}
155
- visible={false}
156
- >
157
- <View
158
- style={
159
- Array [
160
- Object {
161
- "alignItems": "center",
162
- "display": "flex",
163
- "height": "100%",
164
- "justifyContent": "center",
165
- "left": 0,
166
- "paddingBottom": 80,
167
- "paddingLeft": 16,
168
- "paddingRight": 16,
169
- "paddingTop": 80,
170
- "top": 0,
171
- "width": "100%",
172
- },
173
- ]
174
- }
175
- >
176
- <View
177
- accessible={true}
178
- collapsable={false}
179
- focusable={true}
180
- onBlur={[Function]}
181
- onClick={[Function]}
182
- onFocus={[Function]}
183
- onResponderGrant={[Function]}
184
- onResponderMove={[Function]}
185
- onResponderRelease={[Function]}
186
- onResponderTerminate={[Function]}
187
- onResponderTerminationRequest={[Function]}
188
- onStartShouldSetResponder={[Function]}
189
- style={
190
- Array [
191
- Object {
192
- "backgroundColor": "rgba(41, 48, 51, 0.25)",
193
- "bottom": 0,
194
- "left": 0,
195
- "position": "absolute",
196
- "right": 0,
197
- "top": 0,
198
- },
199
- ]
200
- }
201
- >
202
- <View />
203
- </View>
204
- <View
205
- style={
206
- Array [
207
- Object {
208
- "backgroundColor": "#FFFFFF",
209
- "borderRadius": 20,
210
- "display": "flex",
211
- "flexDirection": "column",
212
- "height": "auto",
213
- "maxHeight": "100%",
214
- "maxWidth": 540,
215
- "position": "relative",
216
- "width": "100%",
217
- },
218
- ]
219
- }
220
- >
221
- <View
222
- style={
223
- Array [
224
- Object {
225
- "alignItems": "center",
226
- "borderBottomColor": "#E5E5E5",
227
- "borderBottomWidth": 1,
228
- "display": "flex",
229
- "flexBasis": "auto",
230
- "flexDirection": "row",
231
- "flexGrow": 0,
232
- "flexShrink": 0,
233
- "justifyContent": "space-between",
234
- "minHeight": 57,
235
- "paddingBottom": 8,
236
- "paddingLeft": 8,
237
- "paddingRight": 8,
238
- "paddingTop": 8,
239
- "position": "relative",
240
- },
241
- ]
242
- }
243
- >
244
- <View
245
- isIconLeft={false}
246
- style={
247
- Array [
248
- Object {
249
- "flexShrink": 1,
250
- "paddingLeft": 8,
251
- },
252
- ]
253
- }
254
- >
255
- <Text
256
- color="black"
257
- isHeader={false}
258
- style={
259
- Array [
260
- Object {
261
- "color": "#000000",
262
- "fontFamily": "NotoSans-Bold",
263
- "fontSize": 16,
264
- "fontStyle": "normal",
265
- "fontWeight": "700",
266
- "lineHeight": 26,
267
- "textDecorationColor": "#000000",
268
- },
269
- ]
270
- }
271
- type="body"
272
- variant="bold"
273
- >
274
- Title
275
- </Text>
276
- </View>
277
- <View
278
- style={
279
- Array [
280
- Object {
281
- "alignSelf": "flex-start",
282
- "marginLeft": 8,
283
- },
284
- ]
285
- }
286
- >
287
- <View
288
- accessibilityRole="button"
289
- accessible={true}
290
- collapsable={false}
291
- focusable={true}
292
- isPressed={false}
293
- onBlur={[Function]}
294
- onClick={[Function]}
295
- onFocus={[Function]}
296
- onResponderGrant={[Function]}
297
- onResponderMove={[Function]}
298
- onResponderRelease={[Function]}
299
- onResponderTerminate={[Function]}
300
- onResponderTerminationRequest={[Function]}
301
- onStartShouldSetResponder={[Function]}
302
- style={
303
- Array [
304
- Object {
305
- "alignSelf": "flex-start",
306
- "backgroundColor": "transparent",
307
- "borderColor": "transparent",
308
- "borderRadius": 30,
309
- "borderWidth": 2,
310
- "flexDirection": "row",
311
- "maxWidth": 335,
312
- "minHeight": 42,
313
- "minWidth": 40,
314
- "paddingBottom": 8,
315
- "paddingLeft": 16,
316
- "paddingRight": 16,
317
- "paddingTop": 8,
318
- "width": "auto",
319
- },
320
- ]
321
- }
322
- type="subtle-dark"
323
- >
324
- <View
325
- iconOnly={true}
326
- style={
327
- Array [
328
- Object {
329
- "alignItems": "center",
330
- "flexBasis": "auto",
331
- "flexDirection": "row",
332
- "flexGrow": 1,
333
- "flexShrink": 1,
334
- "justifyContent": "center",
335
- },
336
- ]
337
- }
338
- >
339
- <View
340
- color="#000000"
341
- size={18}
342
- style={
343
- Array [
344
- Object {
345
- "alignSelf": "auto",
346
- "color": "#000000",
347
- "height": 18,
348
- "width": 18,
349
- },
350
- ]
351
- }
352
- >
353
- <svg
354
- color="#000000"
355
- data-file-name="SvgXInline"
356
- />
357
- </View>
358
- </View>
359
- </View>
360
- </View>
361
- </View>
362
- <RCTScrollView>
363
- <View>
364
- <View
365
- style={
366
- Array [
367
- Object {
368
- "paddingBottom": 24,
369
- "paddingLeft": 16,
370
- "paddingRight": 16,
371
- "paddingTop": 24,
372
- },
373
- ]
374
- }
375
- >
376
- <Text
377
- color="black"
378
- isHeader={false}
379
- style={
380
- Array [
381
- Object {
382
- "color": "#000000",
383
- "fontFamily": "NotoSans",
384
- "fontSize": 16,
385
- "fontStyle": "normal",
386
- "fontWeight": "400",
387
- "lineHeight": 26,
388
- "textDecorationColor": "#000000",
389
- },
390
- ]
391
- }
392
- type="body"
393
- variant="regular"
394
- >
395
- Modal body goes here...
396
- </Text>
397
- </View>
398
- </View>
399
- </RCTScrollView>
400
- </View>
401
- </View>
402
- </Modal>
403
- </View>
404
- </RNCSafeAreaProvider>
405
- `;
406
-
407
- exports[`kitt-universal/Modal With Custom Right Action 1`] = `
408
- <RNCSafeAreaProvider
409
- onInsetsChange={[Function]}
410
- style={
411
- Array [
412
- Object {
413
- "flex": 1,
414
- },
415
- undefined,
416
- ]
417
- }
418
- >
419
- <View
420
- style={
421
- Array [
422
- Object {
423
- "marginBottom": 30,
424
- },
425
- ]
426
- }
427
- >
428
- <View
429
- style={
430
- Array [
431
- Object {
432
- "marginBottom": 30,
433
- },
434
- ]
435
- }
436
- >
437
- <Text
438
- aria-level="2"
439
- color="black"
440
- isHeader={true}
441
- style={
442
- Array [
443
- Object {
444
- "color": "#000000",
445
- "fontFamily": "Moderat-Extended-Bold",
446
- "fontSize": 32,
447
- "fontStyle": "normal",
448
- "fontWeight": "400",
449
- "lineHeight": 42,
450
- "textDecorationColor": "#000000",
451
- },
452
- ]
453
- }
454
- type="header2"
455
- variant="bold"
456
- >
457
- With Custom Right Action
458
- </Text>
459
- </View>
460
- <View
461
- accessibilityRole="button"
462
- accessible={true}
463
- collapsable={false}
464
- focusable={true}
465
- isPressed={false}
466
- onBlur={[Function]}
467
- onClick={[Function]}
468
- onFocus={[Function]}
469
- onResponderGrant={[Function]}
470
- onResponderMove={[Function]}
471
- onResponderRelease={[Function]}
472
- onResponderTerminate={[Function]}
473
- onResponderTerminationRequest={[Function]}
474
- onStartShouldSetResponder={[Function]}
475
- style={
476
- Array [
477
- Object {
478
- "alignSelf": "flex-start",
479
- "backgroundColor": "#4C34E0",
480
- "borderColor": "transparent",
481
- "borderRadius": 30,
482
- "borderWidth": 2,
483
- "flexDirection": "row",
484
- "maxWidth": 335,
485
- "minHeight": 42,
486
- "minWidth": 40,
487
- "paddingBottom": 8,
488
- "paddingLeft": 16,
489
- "paddingRight": 16,
490
- "paddingTop": 8,
491
- "width": "auto",
492
- },
493
- ]
494
- }
495
- type="primary"
496
- >
497
- <View
498
- style={
499
- Array [
500
- Object {
501
- "alignItems": "center",
502
- "flexBasis": "auto",
503
- "flexDirection": "row",
504
- "flexGrow": 0,
505
- "flexShrink": 1,
506
- "justifyContent": "center",
507
- },
508
- ]
509
- }
510
- >
511
- <Text
512
- color="white"
513
- isHeader={false}
514
- style={
515
- Array [
516
- Object {
517
- "color": "#FFFFFF",
518
- "fontFamily": "NotoSans-Bold",
519
- "fontSize": 16,
520
- "fontStyle": "normal",
521
- "fontWeight": "700",
522
- "lineHeight": 26,
523
- "textDecorationColor": "#FFFFFF",
524
- },
525
- Object {
526
- "textAlign": "center",
527
- },
528
- ]
529
- }
530
- type="body"
531
- variant="bold"
532
- >
533
- <Text
534
- isHeader={false}
535
- style={
536
- Array [
537
- Object {
538
- "fontFamily": "NotoSans",
539
- "fontSize": 16,
540
- "fontStyle": "normal",
541
- "fontWeight": "400",
542
- "lineHeight": 26,
543
- },
544
- ]
545
- }
546
- type="body"
547
- variant="regular"
548
- >
549
- Toggle modal
550
- </Text>
551
- </Text>
552
- </View>
553
- </View>
554
- <Modal
555
- animationType="fade"
556
- hardwareAccelerated={false}
557
- onRequestClose={[Function]}
558
- transparent={true}
559
- visible={false}
560
- >
561
- <View
562
- style={
563
- Array [
564
- Object {
565
- "alignItems": "center",
566
- "display": "flex",
567
- "height": "100%",
568
- "justifyContent": "center",
569
- "left": 0,
570
- "paddingBottom": 80,
571
- "paddingLeft": 16,
572
- "paddingRight": 16,
573
- "paddingTop": 80,
574
- "top": 0,
575
- "width": "100%",
576
- },
577
- ]
578
- }
579
- >
580
- <View
581
- accessible={true}
582
- collapsable={false}
583
- focusable={true}
584
- onBlur={[Function]}
585
- onClick={[Function]}
586
- onFocus={[Function]}
587
- onResponderGrant={[Function]}
588
- onResponderMove={[Function]}
589
- onResponderRelease={[Function]}
590
- onResponderTerminate={[Function]}
591
- onResponderTerminationRequest={[Function]}
592
- onStartShouldSetResponder={[Function]}
593
- style={
594
- Array [
595
- Object {
596
- "backgroundColor": "rgba(41, 48, 51, 0.25)",
597
- "bottom": 0,
598
- "left": 0,
599
- "position": "absolute",
600
- "right": 0,
601
- "top": 0,
602
- },
603
- ]
604
- }
605
- >
606
- <View />
607
- </View>
608
- <View
609
- style={
610
- Array [
611
- Object {
612
- "backgroundColor": "#FFFFFF",
613
- "borderRadius": 20,
614
- "display": "flex",
615
- "flexDirection": "column",
616
- "height": "auto",
617
- "maxHeight": "100%",
618
- "maxWidth": 540,
619
- "position": "relative",
620
- "width": "100%",
621
- },
622
- ]
623
- }
624
- >
625
- <View
626
- style={
627
- Array [
628
- Object {
629
- "alignItems": "center",
630
- "borderBottomColor": "#E5E5E5",
631
- "borderBottomWidth": 1,
632
- "display": "flex",
633
- "flexBasis": "auto",
634
- "flexDirection": "row",
635
- "flexGrow": 0,
636
- "flexShrink": 0,
637
- "justifyContent": "space-between",
638
- "minHeight": 57,
639
- "paddingBottom": 8,
640
- "paddingLeft": 8,
641
- "paddingRight": 8,
642
- "paddingTop": 8,
643
- "position": "relative",
644
- },
645
- ]
646
- }
647
- >
648
- <View
649
- isIconLeft={false}
650
- style={
651
- Array [
652
- Object {
653
- "flexShrink": 1,
654
- "paddingLeft": 8,
655
- },
656
- ]
657
- }
658
- >
659
- <Text
660
- color="black"
661
- isHeader={false}
662
- style={
663
- Array [
664
- Object {
665
- "color": "#000000",
666
- "fontFamily": "NotoSans-Bold",
667
- "fontSize": 16,
668
- "fontStyle": "normal",
669
- "fontWeight": "700",
670
- "lineHeight": 26,
671
- "textDecorationColor": "#000000",
672
- },
673
- ]
674
- }
675
- type="body"
676
- variant="bold"
677
- >
678
- Title
679
- </Text>
680
- </View>
681
- <View
682
- accessibilityRole="button"
683
- accessible={true}
684
- collapsable={false}
685
- focusable={true}
686
- isPressed={false}
687
- onBlur={[Function]}
688
- onClick={[Function]}
689
- onFocus={[Function]}
690
- onResponderGrant={[Function]}
691
- onResponderMove={[Function]}
692
- onResponderRelease={[Function]}
693
- onResponderTerminate={[Function]}
694
- onResponderTerminationRequest={[Function]}
695
- onStartShouldSetResponder={[Function]}
696
- style={
697
- Array [
698
- Object {
699
- "alignSelf": "flex-start",
700
- "backgroundColor": "transparent",
701
- "borderColor": "transparent",
702
- "borderRadius": 30,
703
- "borderWidth": 2,
704
- "flexDirection": "row",
705
- "maxWidth": 335,
706
- "minHeight": 42,
707
- "minWidth": 40,
708
- "paddingBottom": 8,
709
- "paddingLeft": 16,
710
- "paddingRight": 16,
711
- "paddingTop": 8,
712
- "width": "auto",
713
- },
714
- ]
715
- }
716
- type="subtle-dark"
717
- >
718
- <View
719
- iconOnly={true}
720
- style={
721
- Array [
722
- Object {
723
- "alignItems": "center",
724
- "flexBasis": "auto",
725
- "flexDirection": "row",
726
- "flexGrow": 1,
727
- "flexShrink": 1,
728
- "justifyContent": "center",
729
- },
730
- ]
731
- }
732
- >
733
- <View
734
- color="#000000"
735
- size={18}
736
- style={
737
- Array [
738
- Object {
739
- "alignSelf": "auto",
740
- "color": "#000000",
741
- "height": 18,
742
- "width": 18,
743
- },
744
- ]
745
- }
746
- >
747
- <svg
748
- color="#000000"
749
- data-file-name="SvgCalendarInline"
750
- />
751
- </View>
752
- </View>
753
- </View>
754
- </View>
755
- <RCTScrollView>
756
- <View>
757
- <View
758
- style={
759
- Array [
760
- Object {
761
- "paddingBottom": 24,
762
- "paddingLeft": 16,
763
- "paddingRight": 16,
764
- "paddingTop": 24,
765
- },
766
- ]
767
- }
768
- >
769
- <Text
770
- color="black"
771
- isHeader={false}
772
- style={
773
- Array [
774
- Object {
775
- "color": "#000000",
776
- "fontFamily": "NotoSans",
777
- "fontSize": 16,
778
- "fontStyle": "normal",
779
- "fontWeight": "400",
780
- "lineHeight": 26,
781
- "textDecorationColor": "#000000",
782
- },
783
- ]
784
- }
785
- type="body"
786
- variant="regular"
787
- >
788
- Modal body goes here...
789
- </Text>
790
- </View>
791
- </View>
792
- </RCTScrollView>
793
- </View>
794
- </View>
795
- </Modal>
796
- </View>
797
- </RNCSafeAreaProvider>
798
- `;
799
-
800
- exports[`kitt-universal/Modal With Footer 1`] = `
801
- <RNCSafeAreaProvider
802
- onInsetsChange={[Function]}
803
- style={
804
- Array [
805
- Object {
806
- "flex": 1,
807
- },
808
- undefined,
809
- ]
810
- }
811
- >
812
- <View
813
- style={
814
- Array [
815
- Object {
816
- "marginBottom": 30,
817
- },
818
- ]
819
- }
820
- >
821
- <View
822
- style={
823
- Array [
824
- Object {
825
- "marginBottom": 30,
826
- },
827
- ]
828
- }
829
- >
830
- <Text
831
- aria-level="2"
832
- color="black"
833
- isHeader={true}
834
- style={
835
- Array [
836
- Object {
837
- "color": "#000000",
838
- "fontFamily": "Moderat-Extended-Bold",
839
- "fontSize": 32,
840
- "fontStyle": "normal",
841
- "fontWeight": "400",
842
- "lineHeight": 42,
843
- "textDecorationColor": "#000000",
844
- },
845
- ]
846
- }
847
- type="header2"
848
- variant="bold"
849
- >
850
- With Footer
851
- </Text>
852
- </View>
853
- <View
854
- accessibilityRole="button"
855
- accessible={true}
856
- collapsable={false}
857
- focusable={true}
858
- isPressed={false}
859
- onBlur={[Function]}
860
- onClick={[Function]}
861
- onFocus={[Function]}
862
- onResponderGrant={[Function]}
863
- onResponderMove={[Function]}
864
- onResponderRelease={[Function]}
865
- onResponderTerminate={[Function]}
866
- onResponderTerminationRequest={[Function]}
867
- onStartShouldSetResponder={[Function]}
868
- style={
869
- Array [
870
- Object {
871
- "alignSelf": "flex-start",
872
- "backgroundColor": "#4C34E0",
873
- "borderColor": "transparent",
874
- "borderRadius": 30,
875
- "borderWidth": 2,
876
- "flexDirection": "row",
877
- "maxWidth": 335,
878
- "minHeight": 42,
879
- "minWidth": 40,
880
- "paddingBottom": 8,
881
- "paddingLeft": 16,
882
- "paddingRight": 16,
883
- "paddingTop": 8,
884
- "width": "auto",
885
- },
886
- ]
887
- }
888
- type="primary"
889
- >
890
- <View
891
- style={
892
- Array [
893
- Object {
894
- "alignItems": "center",
895
- "flexBasis": "auto",
896
- "flexDirection": "row",
897
- "flexGrow": 0,
898
- "flexShrink": 1,
899
- "justifyContent": "center",
900
- },
901
- ]
902
- }
903
- >
904
- <Text
905
- color="white"
906
- isHeader={false}
907
- style={
908
- Array [
909
- Object {
910
- "color": "#FFFFFF",
911
- "fontFamily": "NotoSans-Bold",
912
- "fontSize": 16,
913
- "fontStyle": "normal",
914
- "fontWeight": "700",
915
- "lineHeight": 26,
916
- "textDecorationColor": "#FFFFFF",
917
- },
918
- Object {
919
- "textAlign": "center",
920
- },
921
- ]
922
- }
923
- type="body"
924
- variant="bold"
925
- >
926
- <Text
927
- isHeader={false}
928
- style={
929
- Array [
930
- Object {
931
- "fontFamily": "NotoSans",
932
- "fontSize": 16,
933
- "fontStyle": "normal",
934
- "fontWeight": "400",
935
- "lineHeight": 26,
936
- },
937
- ]
938
- }
939
- type="body"
940
- variant="regular"
941
- >
942
- Toggle modal
943
- </Text>
944
- </Text>
945
- </View>
946
- </View>
947
- <Modal
948
- animationType="fade"
949
- hardwareAccelerated={false}
950
- onRequestClose={[Function]}
951
- transparent={true}
952
- visible={false}
953
- >
954
- <View
955
- style={
956
- Array [
957
- Object {
958
- "alignItems": "center",
959
- "display": "flex",
960
- "height": "100%",
961
- "justifyContent": "center",
962
- "left": 0,
963
- "paddingBottom": 80,
964
- "paddingLeft": 16,
965
- "paddingRight": 16,
966
- "paddingTop": 80,
967
- "top": 0,
968
- "width": "100%",
969
- },
970
- ]
971
- }
972
- >
973
- <View
974
- accessible={true}
975
- collapsable={false}
976
- focusable={true}
977
- onBlur={[Function]}
978
- onClick={[Function]}
979
- onFocus={[Function]}
980
- onResponderGrant={[Function]}
981
- onResponderMove={[Function]}
982
- onResponderRelease={[Function]}
983
- onResponderTerminate={[Function]}
984
- onResponderTerminationRequest={[Function]}
985
- onStartShouldSetResponder={[Function]}
986
- style={
987
- Array [
988
- Object {
989
- "backgroundColor": "rgba(41, 48, 51, 0.25)",
990
- "bottom": 0,
991
- "left": 0,
992
- "position": "absolute",
993
- "right": 0,
994
- "top": 0,
995
- },
996
- ]
997
- }
998
- >
999
- <View />
1000
- </View>
1001
- <View
1002
- style={
1003
- Array [
1004
- Object {
1005
- "backgroundColor": "#FFFFFF",
1006
- "borderRadius": 20,
1007
- "display": "flex",
1008
- "flexDirection": "column",
1009
- "height": "auto",
1010
- "maxHeight": "100%",
1011
- "maxWidth": 540,
1012
- "position": "relative",
1013
- "width": "100%",
1014
- },
1015
- ]
1016
- }
1017
- >
1018
- <View
1019
- style={
1020
- Array [
1021
- Object {
1022
- "alignItems": "center",
1023
- "borderBottomColor": "#E5E5E5",
1024
- "borderBottomWidth": 1,
1025
- "display": "flex",
1026
- "flexBasis": "auto",
1027
- "flexDirection": "row",
1028
- "flexGrow": 0,
1029
- "flexShrink": 0,
1030
- "justifyContent": "space-between",
1031
- "minHeight": 57,
1032
- "paddingBottom": 8,
1033
- "paddingLeft": 8,
1034
- "paddingRight": 8,
1035
- "paddingTop": 8,
1036
- "position": "relative",
1037
- },
1038
- ]
1039
- }
1040
- >
1041
- <View
1042
- isIconLeft={false}
1043
- style={
1044
- Array [
1045
- Object {
1046
- "flexShrink": 1,
1047
- "paddingLeft": 8,
1048
- },
1049
- ]
1050
- }
1051
- >
1052
- <Text
1053
- color="black"
1054
- isHeader={false}
1055
- style={
1056
- Array [
1057
- Object {
1058
- "color": "#000000",
1059
- "fontFamily": "NotoSans-Bold",
1060
- "fontSize": 16,
1061
- "fontStyle": "normal",
1062
- "fontWeight": "700",
1063
- "lineHeight": 26,
1064
- "textDecorationColor": "#000000",
1065
- },
1066
- ]
1067
- }
1068
- type="body"
1069
- variant="bold"
1070
- >
1071
- Title
1072
- </Text>
1073
- </View>
1074
- <View
1075
- style={
1076
- Array [
1077
- Object {
1078
- "alignSelf": "flex-start",
1079
- "marginLeft": 8,
1080
- },
1081
- ]
1082
- }
1083
- >
1084
- <View
1085
- accessibilityRole="button"
1086
- accessible={true}
1087
- collapsable={false}
1088
- focusable={true}
1089
- isPressed={false}
1090
- onBlur={[Function]}
1091
- onClick={[Function]}
1092
- onFocus={[Function]}
1093
- onResponderGrant={[Function]}
1094
- onResponderMove={[Function]}
1095
- onResponderRelease={[Function]}
1096
- onResponderTerminate={[Function]}
1097
- onResponderTerminationRequest={[Function]}
1098
- onStartShouldSetResponder={[Function]}
1099
- style={
1100
- Array [
1101
- Object {
1102
- "alignSelf": "flex-start",
1103
- "backgroundColor": "transparent",
1104
- "borderColor": "transparent",
1105
- "borderRadius": 30,
1106
- "borderWidth": 2,
1107
- "flexDirection": "row",
1108
- "maxWidth": 335,
1109
- "minHeight": 42,
1110
- "minWidth": 40,
1111
- "paddingBottom": 8,
1112
- "paddingLeft": 16,
1113
- "paddingRight": 16,
1114
- "paddingTop": 8,
1115
- "width": "auto",
1116
- },
1117
- ]
1118
- }
1119
- type="subtle-dark"
1120
- >
1121
- <View
1122
- iconOnly={true}
1123
- style={
1124
- Array [
1125
- Object {
1126
- "alignItems": "center",
1127
- "flexBasis": "auto",
1128
- "flexDirection": "row",
1129
- "flexGrow": 1,
1130
- "flexShrink": 1,
1131
- "justifyContent": "center",
1132
- },
1133
- ]
1134
- }
1135
- >
1136
- <View
1137
- color="#000000"
1138
- size={18}
1139
- style={
1140
- Array [
1141
- Object {
1142
- "alignSelf": "auto",
1143
- "color": "#000000",
1144
- "height": 18,
1145
- "width": 18,
1146
- },
1147
- ]
1148
- }
1149
- >
1150
- <svg
1151
- color="#000000"
1152
- data-file-name="SvgXInline"
1153
- />
1154
- </View>
1155
- </View>
1156
- </View>
1157
- </View>
1158
- </View>
1159
- <RCTScrollView>
1160
- <View>
1161
- <View
1162
- style={
1163
- Array [
1164
- Object {
1165
- "paddingBottom": 24,
1166
- "paddingLeft": 16,
1167
- "paddingRight": 16,
1168
- "paddingTop": 24,
1169
- },
1170
- ]
1171
- }
1172
- >
1173
- <Text
1174
- color="black"
1175
- isHeader={false}
1176
- style={
1177
- Array [
1178
- Object {
1179
- "color": "#000000",
1180
- "fontFamily": "NotoSans",
1181
- "fontSize": 16,
1182
- "fontStyle": "normal",
1183
- "fontWeight": "400",
1184
- "lineHeight": 26,
1185
- "textDecorationColor": "#000000",
1186
- },
1187
- ]
1188
- }
1189
- type="body"
1190
- variant="regular"
1191
- >
1192
- The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile. This car is virtually indestructible, due to a high-tech coating applied to it.
1193
- </Text>
1194
- </View>
1195
- </View>
1196
- </RCTScrollView>
1197
- <View
1198
- style={
1199
- Array [
1200
- Object {
1201
- "borderTopColor": "#E5E5E5",
1202
- "borderTopWidth": 1,
1203
- "flexBasis": "auto",
1204
- "flexGrow": 0,
1205
- "flexShrink": 0,
1206
- "paddingBottom": 16,
1207
- "paddingLeft": 16,
1208
- "paddingRight": 16,
1209
- "paddingTop": 16,
1210
- },
1211
- ]
1212
- }
1213
- >
1214
- <View
1215
- accessibilityRole="button"
1216
- accessible={true}
1217
- collapsable={false}
1218
- focusable={true}
1219
- isPressed={false}
1220
- onBlur={[Function]}
1221
- onClick={[Function]}
1222
- onFocus={[Function]}
1223
- onResponderGrant={[Function]}
1224
- onResponderMove={[Function]}
1225
- onResponderRelease={[Function]}
1226
- onResponderTerminate={[Function]}
1227
- onResponderTerminationRequest={[Function]}
1228
- onStartShouldSetResponder={[Function]}
1229
- stretch={true}
1230
- style={
1231
- Array [
1232
- Object {
1233
- "alignSelf": "flex-start",
1234
- "backgroundColor": "#4C34E0",
1235
- "borderColor": "transparent",
1236
- "borderRadius": 30,
1237
- "borderWidth": 2,
1238
- "flexDirection": "row",
1239
- "maxWidth": "auto",
1240
- "minHeight": 42,
1241
- "minWidth": 40,
1242
- "paddingBottom": 8,
1243
- "paddingLeft": 16,
1244
- "paddingRight": 16,
1245
- "paddingTop": 8,
1246
- "width": "100%",
1247
- },
1248
- ]
1249
- }
1250
- type="primary"
1251
- >
1252
- <View
1253
- stretch={true}
1254
- style={
1255
- Array [
1256
- Object {
1257
- "alignItems": "center",
1258
- "flexBasis": "auto",
1259
- "flexDirection": "row",
1260
- "flexGrow": 1,
1261
- "flexShrink": 1,
1262
- "justifyContent": "center",
1263
- },
1264
- ]
1265
- }
1266
- >
1267
- <Text
1268
- color="white"
1269
- isHeader={false}
1270
- style={
1271
- Array [
1272
- Object {
1273
- "color": "#FFFFFF",
1274
- "fontFamily": "NotoSans-Bold",
1275
- "fontSize": 16,
1276
- "fontStyle": "normal",
1277
- "fontWeight": "700",
1278
- "lineHeight": 26,
1279
- "textDecorationColor": "#FFFFFF",
1280
- },
1281
- Object {
1282
- "textAlign": "center",
1283
- },
1284
- ]
1285
- }
1286
- type="body"
1287
- variant="bold"
1288
- >
1289
- <Text
1290
- isHeader={false}
1291
- style={
1292
- Array [
1293
- Object {
1294
- "fontFamily": "NotoSans-Bold",
1295
- "fontSize": 16,
1296
- "fontStyle": "normal",
1297
- "fontWeight": "700",
1298
- "lineHeight": 26,
1299
- },
1300
- ]
1301
- }
1302
- type="body"
1303
- variant="bold"
1304
- >
1305
- Primary
1306
- </Text>
1307
- </Text>
1308
- </View>
1309
- </View>
1310
- <View
1311
- accessibilityRole="button"
1312
- accessible={true}
1313
- collapsable={false}
1314
- focusable={true}
1315
- isPressed={false}
1316
- onBlur={[Function]}
1317
- onClick={[Function]}
1318
- onFocus={[Function]}
1319
- onResponderGrant={[Function]}
1320
- onResponderMove={[Function]}
1321
- onResponderRelease={[Function]}
1322
- onResponderTerminate={[Function]}
1323
- onResponderTerminationRequest={[Function]}
1324
- onStartShouldSetResponder={[Function]}
1325
- stretch={true}
1326
- style={
1327
- Array [
1328
- Object {
1329
- "alignSelf": "flex-start",
1330
- "backgroundColor": "transparent",
1331
- "borderColor": "transparent",
1332
- "borderRadius": 30,
1333
- "borderWidth": 2,
1334
- "flexDirection": "row",
1335
- "maxWidth": "auto",
1336
- "minHeight": 42,
1337
- "minWidth": 40,
1338
- "paddingBottom": 8,
1339
- "paddingLeft": 16,
1340
- "paddingRight": 16,
1341
- "paddingTop": 8,
1342
- "width": "100%",
1343
- },
1344
- ]
1345
- }
1346
- type="subtle"
1347
- >
1348
- <View
1349
- stretch={true}
1350
- style={
1351
- Array [
1352
- Object {
1353
- "alignItems": "center",
1354
- "flexBasis": "auto",
1355
- "flexDirection": "row",
1356
- "flexGrow": 1,
1357
- "flexShrink": 1,
1358
- "justifyContent": "center",
1359
- },
1360
- ]
1361
- }
1362
- >
1363
- <Text
1364
- color="primary"
1365
- isHeader={false}
1366
- style={
1367
- Array [
1368
- Object {
1369
- "color": "#4C34E0",
1370
- "fontFamily": "NotoSans-Bold",
1371
- "fontSize": 16,
1372
- "fontStyle": "normal",
1373
- "fontWeight": "700",
1374
- "lineHeight": 26,
1375
- "textDecorationColor": "#4C34E0",
1376
- },
1377
- Object {
1378
- "textAlign": "center",
1379
- },
1380
- ]
1381
- }
1382
- type="body"
1383
- variant="bold"
1384
- >
1385
- <Text
1386
- isHeader={false}
1387
- style={
1388
- Array [
1389
- Object {
1390
- "fontFamily": "NotoSans-Bold",
1391
- "fontSize": 16,
1392
- "fontStyle": "normal",
1393
- "fontWeight": "700",
1394
- "lineHeight": 26,
1395
- },
1396
- ]
1397
- }
1398
- type="body"
1399
- variant="bold"
1400
- >
1401
- Secondary
1402
- </Text>
1403
- </Text>
1404
- </View>
1405
- </View>
1406
- </View>
1407
- </View>
1408
- </View>
1409
- </Modal>
1410
- </View>
1411
- </RNCSafeAreaProvider>
1412
- `;
1413
-
1414
- exports[`kitt-universal/Modal With Left Action 1`] = `
1415
- <RNCSafeAreaProvider
1416
- onInsetsChange={[Function]}
1417
- style={
1418
- Array [
1419
- Object {
1420
- "flex": 1,
1421
- },
1422
- undefined,
1423
- ]
1424
- }
1425
- >
1426
- <View
1427
- style={
1428
- Array [
1429
- Object {
1430
- "marginBottom": 30,
1431
- },
1432
- ]
1433
- }
1434
- >
1435
- <View
1436
- style={
1437
- Array [
1438
- Object {
1439
- "marginBottom": 30,
1440
- },
1441
- ]
1442
- }
1443
- >
1444
- <Text
1445
- aria-level="2"
1446
- color="black"
1447
- isHeader={true}
1448
- style={
1449
- Array [
1450
- Object {
1451
- "color": "#000000",
1452
- "fontFamily": "Moderat-Extended-Bold",
1453
- "fontSize": 32,
1454
- "fontStyle": "normal",
1455
- "fontWeight": "400",
1456
- "lineHeight": 42,
1457
- "textDecorationColor": "#000000",
1458
- },
1459
- ]
1460
- }
1461
- type="header2"
1462
- variant="bold"
1463
- >
1464
- With Left Action
1465
- </Text>
1466
- </View>
1467
- <View
1468
- accessibilityRole="button"
1469
- accessible={true}
1470
- collapsable={false}
1471
- focusable={true}
1472
- isPressed={false}
1473
- onBlur={[Function]}
1474
- onClick={[Function]}
1475
- onFocus={[Function]}
1476
- onResponderGrant={[Function]}
1477
- onResponderMove={[Function]}
1478
- onResponderRelease={[Function]}
1479
- onResponderTerminate={[Function]}
1480
- onResponderTerminationRequest={[Function]}
1481
- onStartShouldSetResponder={[Function]}
1482
- style={
1483
- Array [
1484
- Object {
1485
- "alignSelf": "flex-start",
1486
- "backgroundColor": "#4C34E0",
1487
- "borderColor": "transparent",
1488
- "borderRadius": 30,
1489
- "borderWidth": 2,
1490
- "flexDirection": "row",
1491
- "maxWidth": 335,
1492
- "minHeight": 42,
1493
- "minWidth": 40,
1494
- "paddingBottom": 8,
1495
- "paddingLeft": 16,
1496
- "paddingRight": 16,
1497
- "paddingTop": 8,
1498
- "width": "auto",
1499
- },
1500
- ]
1501
- }
1502
- type="primary"
1503
- >
1504
- <View
1505
- style={
1506
- Array [
1507
- Object {
1508
- "alignItems": "center",
1509
- "flexBasis": "auto",
1510
- "flexDirection": "row",
1511
- "flexGrow": 0,
1512
- "flexShrink": 1,
1513
- "justifyContent": "center",
1514
- },
1515
- ]
1516
- }
1517
- >
1518
- <Text
1519
- color="white"
1520
- isHeader={false}
1521
- style={
1522
- Array [
1523
- Object {
1524
- "color": "#FFFFFF",
1525
- "fontFamily": "NotoSans-Bold",
1526
- "fontSize": 16,
1527
- "fontStyle": "normal",
1528
- "fontWeight": "700",
1529
- "lineHeight": 26,
1530
- "textDecorationColor": "#FFFFFF",
1531
- },
1532
- Object {
1533
- "textAlign": "center",
1534
- },
1535
- ]
1536
- }
1537
- type="body"
1538
- variant="bold"
1539
- >
1540
- <Text
1541
- isHeader={false}
1542
- style={
1543
- Array [
1544
- Object {
1545
- "fontFamily": "NotoSans",
1546
- "fontSize": 16,
1547
- "fontStyle": "normal",
1548
- "fontWeight": "400",
1549
- "lineHeight": 26,
1550
- },
1551
- ]
1552
- }
1553
- type="body"
1554
- variant="regular"
1555
- >
1556
- Toggle modal
1557
- </Text>
1558
- </Text>
1559
- </View>
1560
- </View>
1561
- <Modal
1562
- animationType="fade"
1563
- hardwareAccelerated={false}
1564
- onRequestClose={[Function]}
1565
- transparent={true}
1566
- visible={false}
1567
- >
1568
- <View
1569
- style={
1570
- Array [
1571
- Object {
1572
- "alignItems": "center",
1573
- "display": "flex",
1574
- "height": "100%",
1575
- "justifyContent": "center",
1576
- "left": 0,
1577
- "paddingBottom": 80,
1578
- "paddingLeft": 16,
1579
- "paddingRight": 16,
1580
- "paddingTop": 80,
1581
- "top": 0,
1582
- "width": "100%",
1583
- },
1584
- ]
1585
- }
1586
- >
1587
- <View
1588
- accessible={true}
1589
- collapsable={false}
1590
- focusable={true}
1591
- onBlur={[Function]}
1592
- onClick={[Function]}
1593
- onFocus={[Function]}
1594
- onResponderGrant={[Function]}
1595
- onResponderMove={[Function]}
1596
- onResponderRelease={[Function]}
1597
- onResponderTerminate={[Function]}
1598
- onResponderTerminationRequest={[Function]}
1599
- onStartShouldSetResponder={[Function]}
1600
- style={
1601
- Array [
1602
- Object {
1603
- "backgroundColor": "rgba(41, 48, 51, 0.25)",
1604
- "bottom": 0,
1605
- "left": 0,
1606
- "position": "absolute",
1607
- "right": 0,
1608
- "top": 0,
1609
- },
1610
- ]
1611
- }
1612
- >
1613
- <View />
1614
- </View>
1615
- <View
1616
- style={
1617
- Array [
1618
- Object {
1619
- "backgroundColor": "#FFFFFF",
1620
- "borderRadius": 20,
1621
- "display": "flex",
1622
- "flexDirection": "column",
1623
- "height": "auto",
1624
- "maxHeight": "100%",
1625
- "maxWidth": 540,
1626
- "position": "relative",
1627
- "width": "100%",
1628
- },
1629
- ]
1630
- }
1631
- >
1632
- <View
1633
- style={
1634
- Array [
1635
- Object {
1636
- "alignItems": "center",
1637
- "borderBottomColor": "#E5E5E5",
1638
- "borderBottomWidth": 1,
1639
- "display": "flex",
1640
- "flexBasis": "auto",
1641
- "flexDirection": "row",
1642
- "flexGrow": 0,
1643
- "flexShrink": 0,
1644
- "justifyContent": "space-between",
1645
- "minHeight": 57,
1646
- "paddingBottom": 8,
1647
- "paddingLeft": 8,
1648
- "paddingRight": 8,
1649
- "paddingTop": 8,
1650
- "position": "relative",
1651
- },
1652
- ]
1653
- }
1654
- >
1655
- <View
1656
- style={
1657
- Array [
1658
- Object {
1659
- "alignSelf": "flex-start",
1660
- "marginRight": 8,
1661
- },
1662
- ]
1663
- }
1664
- >
1665
- <View
1666
- accessibilityRole="button"
1667
- accessible={true}
1668
- collapsable={false}
1669
- focusable={true}
1670
- isPressed={false}
1671
- onBlur={[Function]}
1672
- onClick={[Function]}
1673
- onFocus={[Function]}
1674
- onResponderGrant={[Function]}
1675
- onResponderMove={[Function]}
1676
- onResponderRelease={[Function]}
1677
- onResponderTerminate={[Function]}
1678
- onResponderTerminationRequest={[Function]}
1679
- onStartShouldSetResponder={[Function]}
1680
- style={
1681
- Array [
1682
- Object {
1683
- "alignSelf": "flex-start",
1684
- "backgroundColor": "transparent",
1685
- "borderColor": "transparent",
1686
- "borderRadius": 30,
1687
- "borderWidth": 2,
1688
- "flexDirection": "row",
1689
- "maxWidth": 335,
1690
- "minHeight": 42,
1691
- "minWidth": 40,
1692
- "paddingBottom": 8,
1693
- "paddingLeft": 16,
1694
- "paddingRight": 16,
1695
- "paddingTop": 8,
1696
- "width": "auto",
1697
- },
1698
- ]
1699
- }
1700
- type="subtle-dark"
1701
- >
1702
- <View
1703
- iconOnly={true}
1704
- style={
1705
- Array [
1706
- Object {
1707
- "alignItems": "center",
1708
- "flexBasis": "auto",
1709
- "flexDirection": "row",
1710
- "flexGrow": 1,
1711
- "flexShrink": 1,
1712
- "justifyContent": "center",
1713
- },
1714
- ]
1715
- }
1716
- >
1717
- <View
1718
- color="#000000"
1719
- size={18}
1720
- style={
1721
- Array [
1722
- Object {
1723
- "alignSelf": "auto",
1724
- "color": "#000000",
1725
- "height": 18,
1726
- "width": 18,
1727
- },
1728
- ]
1729
- }
1730
- >
1731
- <svg
1732
- color="#000000"
1733
- data-file-name="SvgArrowLeftInline"
1734
- />
1735
- </View>
1736
- </View>
1737
- </View>
1738
- </View>
1739
- <View
1740
- isIconLeft={true}
1741
- style={
1742
- Array [
1743
- Object {
1744
- "flexShrink": 1,
1745
- "paddingLeft": 0,
1746
- },
1747
- ]
1748
- }
1749
- >
1750
- <Text
1751
- color="black"
1752
- isHeader={false}
1753
- style={
1754
- Array [
1755
- Object {
1756
- "color": "#000000",
1757
- "fontFamily": "NotoSans-Bold",
1758
- "fontSize": 16,
1759
- "fontStyle": "normal",
1760
- "fontWeight": "700",
1761
- "lineHeight": 26,
1762
- "textDecorationColor": "#000000",
1763
- },
1764
- ]
1765
- }
1766
- type="body"
1767
- variant="bold"
1768
- >
1769
- Title
1770
- </Text>
1771
- </View>
1772
- <View
1773
- style={
1774
- Array [
1775
- Object {
1776
- "alignSelf": "flex-start",
1777
- "marginLeft": 8,
1778
- },
1779
- ]
1780
- }
1781
- >
1782
- <View
1783
- accessibilityRole="button"
1784
- accessible={true}
1785
- collapsable={false}
1786
- focusable={true}
1787
- isPressed={false}
1788
- onBlur={[Function]}
1789
- onClick={[Function]}
1790
- onFocus={[Function]}
1791
- onResponderGrant={[Function]}
1792
- onResponderMove={[Function]}
1793
- onResponderRelease={[Function]}
1794
- onResponderTerminate={[Function]}
1795
- onResponderTerminationRequest={[Function]}
1796
- onStartShouldSetResponder={[Function]}
1797
- style={
1798
- Array [
1799
- Object {
1800
- "alignSelf": "flex-start",
1801
- "backgroundColor": "transparent",
1802
- "borderColor": "transparent",
1803
- "borderRadius": 30,
1804
- "borderWidth": 2,
1805
- "flexDirection": "row",
1806
- "maxWidth": 335,
1807
- "minHeight": 42,
1808
- "minWidth": 40,
1809
- "paddingBottom": 8,
1810
- "paddingLeft": 16,
1811
- "paddingRight": 16,
1812
- "paddingTop": 8,
1813
- "width": "auto",
1814
- },
1815
- ]
1816
- }
1817
- type="subtle-dark"
1818
- >
1819
- <View
1820
- iconOnly={true}
1821
- style={
1822
- Array [
1823
- Object {
1824
- "alignItems": "center",
1825
- "flexBasis": "auto",
1826
- "flexDirection": "row",
1827
- "flexGrow": 1,
1828
- "flexShrink": 1,
1829
- "justifyContent": "center",
1830
- },
1831
- ]
1832
- }
1833
- >
1834
- <View
1835
- color="#000000"
1836
- size={18}
1837
- style={
1838
- Array [
1839
- Object {
1840
- "alignSelf": "auto",
1841
- "color": "#000000",
1842
- "height": 18,
1843
- "width": 18,
1844
- },
1845
- ]
1846
- }
1847
- >
1848
- <svg
1849
- color="#000000"
1850
- data-file-name="SvgXInline"
1851
- />
1852
- </View>
1853
- </View>
1854
- </View>
1855
- </View>
1856
- </View>
1857
- <RCTScrollView>
1858
- <View>
1859
- <View
1860
- style={
1861
- Array [
1862
- Object {
1863
- "paddingBottom": 24,
1864
- "paddingLeft": 16,
1865
- "paddingRight": 16,
1866
- "paddingTop": 24,
1867
- },
1868
- ]
1869
- }
1870
- >
1871
- <Text
1872
- color="black"
1873
- isHeader={false}
1874
- style={
1875
- Array [
1876
- Object {
1877
- "color": "#000000",
1878
- "fontFamily": "NotoSans",
1879
- "fontSize": 16,
1880
- "fontStyle": "normal",
1881
- "fontWeight": "400",
1882
- "lineHeight": 26,
1883
- "textDecorationColor": "#000000",
1884
- },
1885
- ]
1886
- }
1887
- type="body"
1888
- variant="regular"
1889
- >
1890
- Modal body goes here...
1891
- </Text>
1892
- </View>
1893
- </View>
1894
- </RCTScrollView>
1895
- </View>
1896
- </View>
1897
- </Modal>
1898
- </View>
1899
- </RNCSafeAreaProvider>
1900
- `;
1901
-
1902
- exports[`kitt-universal/Modal With Long Content 1`] = `
1903
- <RNCSafeAreaProvider
1904
- onInsetsChange={[Function]}
1905
- style={
1906
- Array [
1907
- Object {
1908
- "flex": 1,
1909
- },
1910
- undefined,
1911
- ]
1912
- }
1913
- >
1914
- <View
1915
- style={
1916
- Array [
1917
- Object {
1918
- "marginBottom": 30,
1919
- },
1920
- ]
1921
- }
1922
- >
1923
- <View
1924
- style={
1925
- Array [
1926
- Object {
1927
- "marginBottom": 30,
1928
- },
1929
- ]
1930
- }
1931
- >
1932
- <Text
1933
- aria-level="2"
1934
- color="black"
1935
- isHeader={true}
1936
- style={
1937
- Array [
1938
- Object {
1939
- "color": "#000000",
1940
- "fontFamily": "Moderat-Extended-Bold",
1941
- "fontSize": 32,
1942
- "fontStyle": "normal",
1943
- "fontWeight": "400",
1944
- "lineHeight": 42,
1945
- "textDecorationColor": "#000000",
1946
- },
1947
- ]
1948
- }
1949
- type="header2"
1950
- variant="bold"
1951
- >
1952
- With Long Content
1953
- </Text>
1954
- </View>
1955
- <View
1956
- accessibilityRole="button"
1957
- accessible={true}
1958
- collapsable={false}
1959
- focusable={true}
1960
- isPressed={false}
1961
- onBlur={[Function]}
1962
- onClick={[Function]}
1963
- onFocus={[Function]}
1964
- onResponderGrant={[Function]}
1965
- onResponderMove={[Function]}
1966
- onResponderRelease={[Function]}
1967
- onResponderTerminate={[Function]}
1968
- onResponderTerminationRequest={[Function]}
1969
- onStartShouldSetResponder={[Function]}
1970
- style={
1971
- Array [
1972
- Object {
1973
- "alignSelf": "flex-start",
1974
- "backgroundColor": "#4C34E0",
1975
- "borderColor": "transparent",
1976
- "borderRadius": 30,
1977
- "borderWidth": 2,
1978
- "flexDirection": "row",
1979
- "maxWidth": 335,
1980
- "minHeight": 42,
1981
- "minWidth": 40,
1982
- "paddingBottom": 8,
1983
- "paddingLeft": 16,
1984
- "paddingRight": 16,
1985
- "paddingTop": 8,
1986
- "width": "auto",
1987
- },
1988
- ]
1989
- }
1990
- type="primary"
1991
- >
1992
- <View
1993
- style={
1994
- Array [
1995
- Object {
1996
- "alignItems": "center",
1997
- "flexBasis": "auto",
1998
- "flexDirection": "row",
1999
- "flexGrow": 0,
2000
- "flexShrink": 1,
2001
- "justifyContent": "center",
2002
- },
2003
- ]
2004
- }
2005
- >
2006
- <Text
2007
- color="white"
2008
- isHeader={false}
2009
- style={
2010
- Array [
2011
- Object {
2012
- "color": "#FFFFFF",
2013
- "fontFamily": "NotoSans-Bold",
2014
- "fontSize": 16,
2015
- "fontStyle": "normal",
2016
- "fontWeight": "700",
2017
- "lineHeight": 26,
2018
- "textDecorationColor": "#FFFFFF",
2019
- },
2020
- Object {
2021
- "textAlign": "center",
2022
- },
2023
- ]
2024
- }
2025
- type="body"
2026
- variant="bold"
2027
- >
2028
- <Text
2029
- isHeader={false}
2030
- style={
2031
- Array [
2032
- Object {
2033
- "fontFamily": "NotoSans",
2034
- "fontSize": 16,
2035
- "fontStyle": "normal",
2036
- "fontWeight": "400",
2037
- "lineHeight": 26,
2038
- },
2039
- ]
2040
- }
2041
- type="body"
2042
- variant="regular"
2043
- >
2044
- Toggle modal
2045
- </Text>
2046
- </Text>
2047
- </View>
2048
- </View>
2049
- <Modal
2050
- animationType="fade"
2051
- hardwareAccelerated={false}
2052
- onRequestClose={[Function]}
2053
- transparent={true}
2054
- visible={false}
2055
- >
2056
- <View
2057
- style={
2058
- Array [
2059
- Object {
2060
- "alignItems": "center",
2061
- "display": "flex",
2062
- "height": "100%",
2063
- "justifyContent": "center",
2064
- "left": 0,
2065
- "paddingBottom": 80,
2066
- "paddingLeft": 16,
2067
- "paddingRight": 16,
2068
- "paddingTop": 80,
2069
- "top": 0,
2070
- "width": "100%",
2071
- },
2072
- ]
2073
- }
2074
- >
2075
- <View
2076
- accessible={true}
2077
- collapsable={false}
2078
- focusable={true}
2079
- onBlur={[Function]}
2080
- onClick={[Function]}
2081
- onFocus={[Function]}
2082
- onResponderGrant={[Function]}
2083
- onResponderMove={[Function]}
2084
- onResponderRelease={[Function]}
2085
- onResponderTerminate={[Function]}
2086
- onResponderTerminationRequest={[Function]}
2087
- onStartShouldSetResponder={[Function]}
2088
- style={
2089
- Array [
2090
- Object {
2091
- "backgroundColor": "rgba(41, 48, 51, 0.25)",
2092
- "bottom": 0,
2093
- "left": 0,
2094
- "position": "absolute",
2095
- "right": 0,
2096
- "top": 0,
2097
- },
2098
- ]
2099
- }
2100
- >
2101
- <View />
2102
- </View>
2103
- <View
2104
- style={
2105
- Array [
2106
- Object {
2107
- "backgroundColor": "#FFFFFF",
2108
- "borderRadius": 20,
2109
- "display": "flex",
2110
- "flexDirection": "column",
2111
- "height": "auto",
2112
- "maxHeight": "100%",
2113
- "maxWidth": 540,
2114
- "position": "relative",
2115
- "width": "100%",
2116
- },
2117
- ]
2118
- }
2119
- >
2120
- <View
2121
- style={
2122
- Array [
2123
- Object {
2124
- "alignItems": "center",
2125
- "borderBottomColor": "#E5E5E5",
2126
- "borderBottomWidth": 1,
2127
- "display": "flex",
2128
- "flexBasis": "auto",
2129
- "flexDirection": "row",
2130
- "flexGrow": 0,
2131
- "flexShrink": 0,
2132
- "justifyContent": "space-between",
2133
- "minHeight": 57,
2134
- "paddingBottom": 8,
2135
- "paddingLeft": 8,
2136
- "paddingRight": 8,
2137
- "paddingTop": 8,
2138
- "position": "relative",
2139
- },
2140
- ]
2141
- }
2142
- >
2143
- <View
2144
- isIconLeft={false}
2145
- style={
2146
- Array [
2147
- Object {
2148
- "flexShrink": 1,
2149
- "paddingLeft": 8,
2150
- },
2151
- ]
2152
- }
2153
- >
2154
- <Text
2155
- color="black"
2156
- isHeader={false}
2157
- style={
2158
- Array [
2159
- Object {
2160
- "color": "#000000",
2161
- "fontFamily": "NotoSans-Bold",
2162
- "fontSize": 16,
2163
- "fontStyle": "normal",
2164
- "fontWeight": "700",
2165
- "lineHeight": 26,
2166
- "textDecorationColor": "#000000",
2167
- },
2168
- ]
2169
- }
2170
- type="body"
2171
- variant="bold"
2172
- >
2173
- Title
2174
- </Text>
2175
- </View>
2176
- <View
2177
- style={
2178
- Array [
2179
- Object {
2180
- "alignSelf": "flex-start",
2181
- "marginLeft": 8,
2182
- },
2183
- ]
2184
- }
2185
- >
2186
- <View
2187
- accessibilityRole="button"
2188
- accessible={true}
2189
- collapsable={false}
2190
- focusable={true}
2191
- isPressed={false}
2192
- onBlur={[Function]}
2193
- onClick={[Function]}
2194
- onFocus={[Function]}
2195
- onResponderGrant={[Function]}
2196
- onResponderMove={[Function]}
2197
- onResponderRelease={[Function]}
2198
- onResponderTerminate={[Function]}
2199
- onResponderTerminationRequest={[Function]}
2200
- onStartShouldSetResponder={[Function]}
2201
- style={
2202
- Array [
2203
- Object {
2204
- "alignSelf": "flex-start",
2205
- "backgroundColor": "transparent",
2206
- "borderColor": "transparent",
2207
- "borderRadius": 30,
2208
- "borderWidth": 2,
2209
- "flexDirection": "row",
2210
- "maxWidth": 335,
2211
- "minHeight": 42,
2212
- "minWidth": 40,
2213
- "paddingBottom": 8,
2214
- "paddingLeft": 16,
2215
- "paddingRight": 16,
2216
- "paddingTop": 8,
2217
- "width": "auto",
2218
- },
2219
- ]
2220
- }
2221
- type="subtle-dark"
2222
- >
2223
- <View
2224
- iconOnly={true}
2225
- style={
2226
- Array [
2227
- Object {
2228
- "alignItems": "center",
2229
- "flexBasis": "auto",
2230
- "flexDirection": "row",
2231
- "flexGrow": 1,
2232
- "flexShrink": 1,
2233
- "justifyContent": "center",
2234
- },
2235
- ]
2236
- }
2237
- >
2238
- <View
2239
- color="#000000"
2240
- size={18}
2241
- style={
2242
- Array [
2243
- Object {
2244
- "alignSelf": "auto",
2245
- "color": "#000000",
2246
- "height": 18,
2247
- "width": 18,
2248
- },
2249
- ]
2250
- }
2251
- >
2252
- <svg
2253
- color="#000000"
2254
- data-file-name="SvgXInline"
2255
- />
2256
- </View>
2257
- </View>
2258
- </View>
2259
- </View>
2260
- </View>
2261
- <RCTScrollView>
2262
- <View>
2263
- <View
2264
- style={
2265
- Array [
2266
- Object {
2267
- "paddingBottom": 24,
2268
- "paddingLeft": 16,
2269
- "paddingRight": 16,
2270
- "paddingTop": 24,
2271
- },
2272
- ]
2273
- }
2274
- >
2275
- <Text
2276
- color="black"
2277
- isHeader={false}
2278
- style={
2279
- Array [
2280
- Object {
2281
- "color": "#000000",
2282
- "fontFamily": "NotoSans",
2283
- "fontSize": 16,
2284
- "fontStyle": "normal",
2285
- "fontWeight": "400",
2286
- "lineHeight": 26,
2287
- "textDecorationColor": "#000000",
2288
- },
2289
- ]
2290
- }
2291
- type="body"
2292
- variant="regular"
2293
- >
2294
- The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile. This car is virtually indestructible, due to a high-tech coating applied to it.
2295
- </Text>
2296
- <Text
2297
- color="black"
2298
- isHeader={false}
2299
- style={
2300
- Array [
2301
- Object {
2302
- "color": "#000000",
2303
- "fontFamily": "NotoSans",
2304
- "fontSize": 16,
2305
- "fontStyle": "normal",
2306
- "fontWeight": "400",
2307
- "lineHeight": 26,
2308
- "textDecorationColor": "#000000",
2309
- },
2310
- ]
2311
- }
2312
- type="body"
2313
- variant="regular"
2314
- >
2315
- Knight Rider stories usually depict either average citizens, or ethical heads of corporations, being bullied series is instructed by the Foundation for Law and Government (FLAG) to assist in some manner. The
2316
- </Text>
2317
- <Text
2318
- color="black"
2319
- isHeader={false}
2320
- style={
2321
- Array [
2322
- Object {
2323
- "color": "#000000",
2324
- "fontFamily": "NotoSans",
2325
- "fontSize": 16,
2326
- "fontStyle": "normal",
2327
- "fontWeight": "400",
2328
- "lineHeight": 26,
2329
- "textDecorationColor": "#000000",
2330
- },
2331
- ]
2332
- }
2333
- type="body"
2334
- variant="regular"
2335
- >
2336
- KITT is essentially an advanced supercomputer on wheels. The brain of KITT is the Knight 2000 microprocessor which is the centre of a self-aware cybernetic logic module that allowed KITT to think, learn, communicate and interact with humans. He always had an ego that was easy to bruise and displayed a very sensitive, but kind and dryly humorous personality. He also has an in-dash entertainment system that can play music and video, and run various computer programs including arcade games which Michael sometimes indulged in while KITT was driving.
2337
- </Text>
2338
- </View>
2339
- </View>
2340
- </RCTScrollView>
2341
- <View
2342
- style={
2343
- Array [
2344
- Object {
2345
- "borderTopColor": "#E5E5E5",
2346
- "borderTopWidth": 1,
2347
- "flexBasis": "auto",
2348
- "flexGrow": 0,
2349
- "flexShrink": 0,
2350
- "paddingBottom": 16,
2351
- "paddingLeft": 16,
2352
- "paddingRight": 16,
2353
- "paddingTop": 16,
2354
- },
2355
- ]
2356
- }
2357
- >
2358
- <View
2359
- accessibilityRole="button"
2360
- accessible={true}
2361
- collapsable={false}
2362
- focusable={true}
2363
- isPressed={false}
2364
- onBlur={[Function]}
2365
- onClick={[Function]}
2366
- onFocus={[Function]}
2367
- onResponderGrant={[Function]}
2368
- onResponderMove={[Function]}
2369
- onResponderRelease={[Function]}
2370
- onResponderTerminate={[Function]}
2371
- onResponderTerminationRequest={[Function]}
2372
- onStartShouldSetResponder={[Function]}
2373
- stretch={true}
2374
- style={
2375
- Array [
2376
- Object {
2377
- "alignSelf": "flex-start",
2378
- "backgroundColor": "#4C34E0",
2379
- "borderColor": "transparent",
2380
- "borderRadius": 30,
2381
- "borderWidth": 2,
2382
- "flexDirection": "row",
2383
- "maxWidth": "auto",
2384
- "minHeight": 42,
2385
- "minWidth": 40,
2386
- "paddingBottom": 8,
2387
- "paddingLeft": 16,
2388
- "paddingRight": 16,
2389
- "paddingTop": 8,
2390
- "width": "100%",
2391
- },
2392
- ]
2393
- }
2394
- type="primary"
2395
- >
2396
- <View
2397
- stretch={true}
2398
- style={
2399
- Array [
2400
- Object {
2401
- "alignItems": "center",
2402
- "flexBasis": "auto",
2403
- "flexDirection": "row",
2404
- "flexGrow": 1,
2405
- "flexShrink": 1,
2406
- "justifyContent": "center",
2407
- },
2408
- ]
2409
- }
2410
- >
2411
- <Text
2412
- color="white"
2413
- isHeader={false}
2414
- style={
2415
- Array [
2416
- Object {
2417
- "color": "#FFFFFF",
2418
- "fontFamily": "NotoSans-Bold",
2419
- "fontSize": 16,
2420
- "fontStyle": "normal",
2421
- "fontWeight": "700",
2422
- "lineHeight": 26,
2423
- "textDecorationColor": "#FFFFFF",
2424
- },
2425
- Object {
2426
- "textAlign": "center",
2427
- },
2428
- ]
2429
- }
2430
- type="body"
2431
- variant="bold"
2432
- >
2433
- <Text
2434
- isHeader={false}
2435
- style={
2436
- Array [
2437
- Object {
2438
- "fontFamily": "NotoSans-Bold",
2439
- "fontSize": 16,
2440
- "fontStyle": "normal",
2441
- "fontWeight": "700",
2442
- "lineHeight": 26,
2443
- },
2444
- ]
2445
- }
2446
- type="body"
2447
- variant="bold"
2448
- >
2449
- Primary
2450
- </Text>
2451
- </Text>
2452
- </View>
2453
- </View>
2454
- <View
2455
- accessibilityRole="button"
2456
- accessible={true}
2457
- collapsable={false}
2458
- focusable={true}
2459
- isPressed={false}
2460
- onBlur={[Function]}
2461
- onClick={[Function]}
2462
- onFocus={[Function]}
2463
- onResponderGrant={[Function]}
2464
- onResponderMove={[Function]}
2465
- onResponderRelease={[Function]}
2466
- onResponderTerminate={[Function]}
2467
- onResponderTerminationRequest={[Function]}
2468
- onStartShouldSetResponder={[Function]}
2469
- stretch={true}
2470
- style={
2471
- Array [
2472
- Object {
2473
- "alignSelf": "flex-start",
2474
- "backgroundColor": "transparent",
2475
- "borderColor": "transparent",
2476
- "borderRadius": 30,
2477
- "borderWidth": 2,
2478
- "flexDirection": "row",
2479
- "maxWidth": "auto",
2480
- "minHeight": 42,
2481
- "minWidth": 40,
2482
- "paddingBottom": 8,
2483
- "paddingLeft": 16,
2484
- "paddingRight": 16,
2485
- "paddingTop": 8,
2486
- "width": "100%",
2487
- },
2488
- ]
2489
- }
2490
- type="subtle"
2491
- >
2492
- <View
2493
- stretch={true}
2494
- style={
2495
- Array [
2496
- Object {
2497
- "alignItems": "center",
2498
- "flexBasis": "auto",
2499
- "flexDirection": "row",
2500
- "flexGrow": 1,
2501
- "flexShrink": 1,
2502
- "justifyContent": "center",
2503
- },
2504
- ]
2505
- }
2506
- >
2507
- <Text
2508
- color="primary"
2509
- isHeader={false}
2510
- style={
2511
- Array [
2512
- Object {
2513
- "color": "#4C34E0",
2514
- "fontFamily": "NotoSans-Bold",
2515
- "fontSize": 16,
2516
- "fontStyle": "normal",
2517
- "fontWeight": "700",
2518
- "lineHeight": 26,
2519
- "textDecorationColor": "#4C34E0",
2520
- },
2521
- Object {
2522
- "textAlign": "center",
2523
- },
2524
- ]
2525
- }
2526
- type="body"
2527
- variant="bold"
2528
- >
2529
- <Text
2530
- isHeader={false}
2531
- style={
2532
- Array [
2533
- Object {
2534
- "fontFamily": "NotoSans-Bold",
2535
- "fontSize": 16,
2536
- "fontStyle": "normal",
2537
- "fontWeight": "700",
2538
- "lineHeight": 26,
2539
- },
2540
- ]
2541
- }
2542
- type="body"
2543
- variant="bold"
2544
- >
2545
- Secondary
2546
- </Text>
2547
- </Text>
2548
- </View>
2549
- </View>
2550
- </View>
2551
- </View>
2552
- </View>
2553
- </Modal>
2554
- </View>
2555
- </RNCSafeAreaProvider>
2556
- `;
2557
-
2558
- exports[`kitt-universal/Modal With a Long Heading 1`] = `
2559
- <RNCSafeAreaProvider
2560
- onInsetsChange={[Function]}
2561
- style={
2562
- Array [
2563
- Object {
2564
- "flex": 1,
2565
- },
2566
- undefined,
2567
- ]
2568
- }
2569
- >
2570
- <View
2571
- style={
2572
- Array [
2573
- Object {
2574
- "marginBottom": 30,
2575
- },
2576
- ]
2577
- }
2578
- >
2579
- <View
2580
- style={
2581
- Array [
2582
- Object {
2583
- "marginBottom": 30,
2584
- },
2585
- ]
2586
- }
2587
- >
2588
- <Text
2589
- aria-level="2"
2590
- color="black"
2591
- isHeader={true}
2592
- style={
2593
- Array [
2594
- Object {
2595
- "color": "#000000",
2596
- "fontFamily": "Moderat-Extended-Bold",
2597
- "fontSize": 32,
2598
- "fontStyle": "normal",
2599
- "fontWeight": "400",
2600
- "lineHeight": 42,
2601
- "textDecorationColor": "#000000",
2602
- },
2603
- ]
2604
- }
2605
- type="header2"
2606
- variant="bold"
2607
- >
2608
- With a Long Heading
2609
- </Text>
2610
- </View>
2611
- <View
2612
- accessibilityRole="button"
2613
- accessible={true}
2614
- collapsable={false}
2615
- focusable={true}
2616
- isPressed={false}
2617
- onBlur={[Function]}
2618
- onClick={[Function]}
2619
- onFocus={[Function]}
2620
- onResponderGrant={[Function]}
2621
- onResponderMove={[Function]}
2622
- onResponderRelease={[Function]}
2623
- onResponderTerminate={[Function]}
2624
- onResponderTerminationRequest={[Function]}
2625
- onStartShouldSetResponder={[Function]}
2626
- style={
2627
- Array [
2628
- Object {
2629
- "alignSelf": "flex-start",
2630
- "backgroundColor": "#4C34E0",
2631
- "borderColor": "transparent",
2632
- "borderRadius": 30,
2633
- "borderWidth": 2,
2634
- "flexDirection": "row",
2635
- "maxWidth": 335,
2636
- "minHeight": 42,
2637
- "minWidth": 40,
2638
- "paddingBottom": 8,
2639
- "paddingLeft": 16,
2640
- "paddingRight": 16,
2641
- "paddingTop": 8,
2642
- "width": "auto",
2643
- },
2644
- ]
2645
- }
2646
- type="primary"
2647
- >
2648
- <View
2649
- style={
2650
- Array [
2651
- Object {
2652
- "alignItems": "center",
2653
- "flexBasis": "auto",
2654
- "flexDirection": "row",
2655
- "flexGrow": 0,
2656
- "flexShrink": 1,
2657
- "justifyContent": "center",
2658
- },
2659
- ]
2660
- }
2661
- >
2662
- <Text
2663
- color="white"
2664
- isHeader={false}
2665
- style={
2666
- Array [
2667
- Object {
2668
- "color": "#FFFFFF",
2669
- "fontFamily": "NotoSans-Bold",
2670
- "fontSize": 16,
2671
- "fontStyle": "normal",
2672
- "fontWeight": "700",
2673
- "lineHeight": 26,
2674
- "textDecorationColor": "#FFFFFF",
2675
- },
2676
- Object {
2677
- "textAlign": "center",
2678
- },
2679
- ]
2680
- }
2681
- type="body"
2682
- variant="bold"
2683
- >
2684
- <Text
2685
- isHeader={false}
2686
- style={
2687
- Array [
2688
- Object {
2689
- "fontFamily": "NotoSans",
2690
- "fontSize": 16,
2691
- "fontStyle": "normal",
2692
- "fontWeight": "400",
2693
- "lineHeight": 26,
2694
- },
2695
- ]
2696
- }
2697
- type="body"
2698
- variant="regular"
2699
- >
2700
- Toggle modal
2701
- </Text>
2702
- </Text>
2703
- </View>
2704
- </View>
2705
- <Modal
2706
- animationType="fade"
2707
- hardwareAccelerated={false}
2708
- onRequestClose={[Function]}
2709
- transparent={true}
2710
- visible={false}
2711
- >
2712
- <View
2713
- style={
2714
- Array [
2715
- Object {
2716
- "alignItems": "center",
2717
- "display": "flex",
2718
- "height": "100%",
2719
- "justifyContent": "center",
2720
- "left": 0,
2721
- "paddingBottom": 80,
2722
- "paddingLeft": 16,
2723
- "paddingRight": 16,
2724
- "paddingTop": 80,
2725
- "top": 0,
2726
- "width": "100%",
2727
- },
2728
- ]
2729
- }
2730
- >
2731
- <View
2732
- accessible={true}
2733
- collapsable={false}
2734
- focusable={true}
2735
- onBlur={[Function]}
2736
- onClick={[Function]}
2737
- onFocus={[Function]}
2738
- onResponderGrant={[Function]}
2739
- onResponderMove={[Function]}
2740
- onResponderRelease={[Function]}
2741
- onResponderTerminate={[Function]}
2742
- onResponderTerminationRequest={[Function]}
2743
- onStartShouldSetResponder={[Function]}
2744
- style={
2745
- Array [
2746
- Object {
2747
- "backgroundColor": "rgba(41, 48, 51, 0.25)",
2748
- "bottom": 0,
2749
- "left": 0,
2750
- "position": "absolute",
2751
- "right": 0,
2752
- "top": 0,
2753
- },
2754
- ]
2755
- }
2756
- >
2757
- <View />
2758
- </View>
2759
- <View
2760
- style={
2761
- Array [
2762
- Object {
2763
- "backgroundColor": "#FFFFFF",
2764
- "borderRadius": 20,
2765
- "display": "flex",
2766
- "flexDirection": "column",
2767
- "height": "auto",
2768
- "maxHeight": "100%",
2769
- "maxWidth": 540,
2770
- "position": "relative",
2771
- "width": "100%",
2772
- },
2773
- ]
2774
- }
2775
- >
2776
- <View
2777
- style={
2778
- Array [
2779
- Object {
2780
- "alignItems": "center",
2781
- "borderBottomColor": "#E5E5E5",
2782
- "borderBottomWidth": 1,
2783
- "display": "flex",
2784
- "flexBasis": "auto",
2785
- "flexDirection": "row",
2786
- "flexGrow": 0,
2787
- "flexShrink": 0,
2788
- "justifyContent": "space-between",
2789
- "minHeight": 57,
2790
- "paddingBottom": 8,
2791
- "paddingLeft": 8,
2792
- "paddingRight": 8,
2793
- "paddingTop": 8,
2794
- "position": "relative",
2795
- },
2796
- ]
2797
- }
2798
- >
2799
- <View
2800
- isIconLeft={false}
2801
- style={
2802
- Array [
2803
- Object {
2804
- "flexShrink": 1,
2805
- "paddingLeft": 8,
2806
- },
2807
- ]
2808
- }
2809
- >
2810
- <Text
2811
- color="black"
2812
- isHeader={false}
2813
- style={
2814
- Array [
2815
- Object {
2816
- "color": "#000000",
2817
- "fontFamily": "NotoSans-Bold",
2818
- "fontSize": 16,
2819
- "fontStyle": "normal",
2820
- "fontWeight": "700",
2821
- "lineHeight": 26,
2822
- "textDecorationColor": "#000000",
2823
- },
2824
- ]
2825
- }
2826
- type="body"
2827
- variant="bold"
2828
- >
2829
- The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile. This car is virtually indestructible, due to a high-tech coating applied to it.
2830
- </Text>
2831
- </View>
2832
- <View
2833
- style={
2834
- Array [
2835
- Object {
2836
- "alignSelf": "flex-start",
2837
- "marginLeft": 8,
2838
- },
2839
- ]
2840
- }
2841
- >
2842
- <View
2843
- accessibilityRole="button"
2844
- accessible={true}
2845
- collapsable={false}
2846
- focusable={true}
2847
- isPressed={false}
2848
- onBlur={[Function]}
2849
- onClick={[Function]}
2850
- onFocus={[Function]}
2851
- onResponderGrant={[Function]}
2852
- onResponderMove={[Function]}
2853
- onResponderRelease={[Function]}
2854
- onResponderTerminate={[Function]}
2855
- onResponderTerminationRequest={[Function]}
2856
- onStartShouldSetResponder={[Function]}
2857
- style={
2858
- Array [
2859
- Object {
2860
- "alignSelf": "flex-start",
2861
- "backgroundColor": "transparent",
2862
- "borderColor": "transparent",
2863
- "borderRadius": 30,
2864
- "borderWidth": 2,
2865
- "flexDirection": "row",
2866
- "maxWidth": 335,
2867
- "minHeight": 42,
2868
- "minWidth": 40,
2869
- "paddingBottom": 8,
2870
- "paddingLeft": 16,
2871
- "paddingRight": 16,
2872
- "paddingTop": 8,
2873
- "width": "auto",
2874
- },
2875
- ]
2876
- }
2877
- type="subtle-dark"
2878
- >
2879
- <View
2880
- iconOnly={true}
2881
- style={
2882
- Array [
2883
- Object {
2884
- "alignItems": "center",
2885
- "flexBasis": "auto",
2886
- "flexDirection": "row",
2887
- "flexGrow": 1,
2888
- "flexShrink": 1,
2889
- "justifyContent": "center",
2890
- },
2891
- ]
2892
- }
2893
- >
2894
- <View
2895
- color="#000000"
2896
- size={18}
2897
- style={
2898
- Array [
2899
- Object {
2900
- "alignSelf": "auto",
2901
- "color": "#000000",
2902
- "height": 18,
2903
- "width": 18,
2904
- },
2905
- ]
2906
- }
2907
- >
2908
- <svg
2909
- color="#000000"
2910
- data-file-name="SvgXInline"
2911
- />
2912
- </View>
2913
- </View>
2914
- </View>
2915
- </View>
2916
- </View>
2917
- <RCTScrollView>
2918
- <View>
2919
- <View
2920
- style={
2921
- Array [
2922
- Object {
2923
- "paddingBottom": 24,
2924
- "paddingLeft": 16,
2925
- "paddingRight": 16,
2926
- "paddingTop": 24,
2927
- },
2928
- ]
2929
- }
2930
- >
2931
- <Text
2932
- color="black"
2933
- isHeader={false}
2934
- style={
2935
- Array [
2936
- Object {
2937
- "color": "#000000",
2938
- "fontFamily": "NotoSans",
2939
- "fontSize": 16,
2940
- "fontStyle": "normal",
2941
- "fontWeight": "400",
2942
- "lineHeight": 26,
2943
- "textDecorationColor": "#000000",
2944
- },
2945
- ]
2946
- }
2947
- type="body"
2948
- variant="regular"
2949
- >
2950
- Modal body goes here...
2951
- </Text>
2952
- </View>
2953
- </View>
2954
- </RCTScrollView>
2955
- </View>
2956
- </View>
2957
- </Modal>
2958
- </View>
2959
- </RNCSafeAreaProvider>
2960
- `;