@hero-design/rn 8.26.0 → 8.26.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 (13) hide show
  1. package/.eslintrc.js +2 -1
  2. package/.turbo/turbo-build.log +1 -1
  3. package/es/index.js +68 -12
  4. package/lib/index.js +68 -12
  5. package/package.json +6 -5
  6. package/src/components/FAB/ActionGroup/StyledActionGroup.tsx +17 -3
  7. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +558 -1066
  8. package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx +9 -15
  9. package/src/components/FAB/ActionGroup/index.tsx +97 -35
  10. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +1 -0
  11. package/src/theme/components/fab.ts +1 -0
  12. package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts +7 -1
  13. package/types/theme/components/fab.d.ts +1 -0
package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -18,551 +18,13 @@ exports[`ActionGroup has active false 1`] = `
18
18
  ]
19
19
  }
20
20
  >
21
- <View
22
- collapsable={false}
23
- pointerEvents="box-none"
24
- style={
25
- Object {
26
- "backgroundColor": "#000000",
27
- "bottom": 0,
28
- "left": 0,
29
- "opacity": 0,
30
- "position": "absolute",
31
- "right": 0,
32
- "top": 0,
33
- }
34
- }
35
- testID="back-drop"
36
- />
37
- <View
38
- collapsable={false}
39
- pointerEvents="none"
40
- style={
41
- Object {
42
- "alignItems": "flex-end",
43
- "justifyContent": "flex-end",
44
- "opacity": 0,
45
- "transform": Array [
46
- Object {
47
- "translateX": 400,
48
- },
49
- ],
50
- "width": "70%",
51
- }
52
- }
53
- testID="action-group"
54
- >
55
- <Text
56
- allowFontScaling={false}
57
- style={
58
- Array [
59
- Object {
60
- "color": "#001f23",
61
- "fontFamily": "BeVietnamPro-Regular",
62
- "fontSize": 14,
63
- "letterSpacing": 0.42,
64
- "lineHeight": 22,
65
- },
66
- Array [
67
- Object {
68
- "color": "#001f23",
69
- "fontFamily": "BeVietnamPro-SemiBold",
70
- "fontSize": 24,
71
- "lineHeight": 32,
72
- "marginBottom": 24,
73
- "marginRight": 24,
74
- "textAlign": "right",
75
- },
76
- undefined,
77
- ],
78
- ]
79
- }
80
- testID="header-text"
81
- themeFontSize="medium"
82
- themeFontWeight="regular"
83
- themeIntent="body"
84
- themeTypeface="neutral"
85
- >
86
- What would you like to create?
87
- </Text>
88
- <View>
89
- <View
90
- accessible={true}
91
- focusable={false}
92
- onClick={[Function]}
93
- onResponderGrant={[Function]}
94
- onResponderMove={[Function]}
95
- onResponderRelease={[Function]}
96
- onResponderTerminate={[Function]}
97
- onResponderTerminationRequest={[Function]}
98
- onStartShouldSetResponder={[Function]}
99
- style={
100
- Array [
101
- Object {
102
- "alignItems": "center",
103
- "alignSelf": "flex-end",
104
- "backgroundColor": "#795e90",
105
- "borderRadius": 999,
106
- "flexDirection": "row",
107
- "margin": 8,
108
- "marginRight": 24,
109
- "overflow": "hidden",
110
- "padding": 12,
111
- },
112
- undefined,
113
- ]
114
- }
115
- testID="speaker-action-item"
116
- >
117
- <View
118
- style={
119
- Array [
120
- Object {},
121
- Array [
122
- Object {
123
- "alignItems": "center",
124
- "height": 24,
125
- "justifyContent": "center",
126
- "width": 24,
127
- },
128
- undefined,
129
- ],
130
- ]
131
- }
132
- >
133
- <HeroIcon
134
- name="speaker"
135
- style={
136
- Array [
137
- Object {
138
- "color": "#001f23",
139
- "fontSize": 16,
140
- },
141
- Array [
142
- Object {
143
- "color": "#ffffff",
144
- },
145
- undefined,
146
- ],
147
- ]
148
- }
149
- themeIntent="text"
150
- themeSize="xsmall"
151
- />
152
- </View>
153
- <Text
154
- allowFontScaling={false}
155
- style={
156
- Array [
157
- Object {
158
- "color": "#001f23",
159
- "fontFamily": "BeVietnamPro-Regular",
160
- "fontSize": 14,
161
- "letterSpacing": 0.42,
162
- "lineHeight": 22,
163
- },
164
- Array [
165
- Object {
166
- "color": "#ffffff",
167
- "fontFamily": "BeVietnamPro-Regular",
168
- "fontSize": 16,
169
- "lineHeight": 22,
170
- "paddingLeft": 4,
171
- },
172
- undefined,
173
- ],
174
- ]
175
- }
176
- themeFontSize="medium"
177
- themeFontWeight="regular"
178
- themeIntent="body"
179
- themeTypeface="neutral"
180
- >
181
- Give shout out
182
- </Text>
183
- </View>
184
- <View
185
- accessible={true}
186
- focusable={false}
187
- onClick={[Function]}
188
- onResponderGrant={[Function]}
189
- onResponderMove={[Function]}
190
- onResponderRelease={[Function]}
191
- onResponderTerminate={[Function]}
192
- onResponderTerminationRequest={[Function]}
193
- onStartShouldSetResponder={[Function]}
194
- style={
195
- Array [
196
- Object {
197
- "alignItems": "center",
198
- "alignSelf": "flex-end",
199
- "backgroundColor": "#795e90",
200
- "borderRadius": 999,
201
- "flexDirection": "row",
202
- "margin": 8,
203
- "marginRight": 24,
204
- "overflow": "hidden",
205
- "padding": 12,
206
- },
207
- undefined,
208
- ]
209
- }
210
- testID="target-action-item"
211
- >
212
- <View
213
- style={
214
- Array [
215
- Object {},
216
- Array [
217
- Object {
218
- "alignItems": "center",
219
- "height": 24,
220
- "justifyContent": "center",
221
- "width": 24,
222
- },
223
- undefined,
224
- ],
225
- ]
226
- }
227
- >
228
- <HeroIcon
229
- name="target"
230
- style={
231
- Array [
232
- Object {
233
- "color": "#001f23",
234
- "fontSize": 16,
235
- },
236
- Array [
237
- Object {
238
- "color": "#ffffff",
239
- },
240
- undefined,
241
- ],
242
- ]
243
- }
244
- themeIntent="text"
245
- themeSize="xsmall"
246
- />
247
- </View>
248
- <Text
249
- allowFontScaling={false}
250
- style={
251
- Array [
252
- Object {
253
- "color": "#001f23",
254
- "fontFamily": "BeVietnamPro-Regular",
255
- "fontSize": 14,
256
- "letterSpacing": 0.42,
257
- "lineHeight": 22,
258
- },
259
- Array [
260
- Object {
261
- "color": "#ffffff",
262
- "fontFamily": "BeVietnamPro-Regular",
263
- "fontSize": 16,
264
- "lineHeight": 22,
265
- "paddingLeft": 4,
266
- },
267
- undefined,
268
- ],
269
- ]
270
- }
271
- themeFontSize="medium"
272
- themeFontWeight="regular"
273
- themeIntent="body"
274
- themeTypeface="neutral"
275
- >
276
- Goal
277
- </Text>
278
- </View>
279
- <View
280
- accessible={true}
281
- focusable={false}
282
- onClick={[Function]}
283
- onResponderGrant={[Function]}
284
- onResponderMove={[Function]}
285
- onResponderRelease={[Function]}
286
- onResponderTerminate={[Function]}
287
- onResponderTerminationRequest={[Function]}
288
- onStartShouldSetResponder={[Function]}
289
- style={
290
- Array [
291
- Object {
292
- "alignItems": "center",
293
- "alignSelf": "flex-end",
294
- "backgroundColor": "#795e90",
295
- "borderRadius": 999,
296
- "flexDirection": "row",
297
- "margin": 8,
298
- "marginRight": 24,
299
- "overflow": "hidden",
300
- "padding": 12,
301
- },
302
- undefined,
303
- ]
304
- }
305
- testID="plane-action-item"
306
- >
307
- <View
308
- style={
309
- Array [
310
- Object {},
311
- Array [
312
- Object {
313
- "alignItems": "center",
314
- "height": 24,
315
- "justifyContent": "center",
316
- "width": 24,
317
- },
318
- undefined,
319
- ],
320
- ]
321
- }
322
- >
323
- <HeroIcon
324
- name="plane"
325
- style={
326
- Array [
327
- Object {
328
- "color": "#001f23",
329
- "fontSize": 16,
330
- },
331
- Array [
332
- Object {
333
- "color": "#ffffff",
334
- },
335
- undefined,
336
- ],
337
- ]
338
- }
339
- themeIntent="text"
340
- themeSize="xsmall"
341
- />
342
- </View>
343
- <Text
344
- allowFontScaling={false}
345
- style={
346
- Array [
347
- Object {
348
- "color": "#001f23",
349
- "fontFamily": "BeVietnamPro-Regular",
350
- "fontSize": 14,
351
- "letterSpacing": 0.42,
352
- "lineHeight": 22,
353
- },
354
- Array [
355
- Object {
356
- "color": "#ffffff",
357
- "fontFamily": "BeVietnamPro-Regular",
358
- "fontSize": 16,
359
- "lineHeight": 22,
360
- "paddingLeft": 4,
361
- },
362
- undefined,
363
- ],
364
- ]
365
- }
366
- themeFontSize="medium"
367
- themeFontWeight="regular"
368
- themeIntent="body"
369
- themeTypeface="neutral"
370
- >
371
- Leave request
372
- </Text>
373
- </View>
374
- <View
375
- accessible={true}
376
- focusable={false}
377
- onClick={[Function]}
378
- onResponderGrant={[Function]}
379
- onResponderMove={[Function]}
380
- onResponderRelease={[Function]}
381
- onResponderTerminate={[Function]}
382
- onResponderTerminationRequest={[Function]}
383
- onStartShouldSetResponder={[Function]}
384
- style={
385
- Array [
386
- Object {
387
- "alignItems": "center",
388
- "alignSelf": "flex-end",
389
- "backgroundColor": "#795e90",
390
- "borderRadius": 999,
391
- "flexDirection": "row",
392
- "margin": 8,
393
- "marginRight": 24,
394
- "overflow": "hidden",
395
- "padding": 12,
396
- },
397
- undefined,
398
- ]
399
- }
400
- testID="health-bag-action-item"
401
- >
402
- <View
403
- style={
404
- Array [
405
- Object {},
406
- Array [
407
- Object {
408
- "alignItems": "center",
409
- "height": 24,
410
- "justifyContent": "center",
411
- "width": 24,
412
- },
413
- undefined,
414
- ],
415
- ]
416
- }
417
- >
418
- <HeroIcon
419
- name="health-bag"
420
- style={
421
- Array [
422
- Object {
423
- "color": "#001f23",
424
- "fontSize": 16,
425
- },
426
- Array [
427
- Object {
428
- "color": "#ffffff",
429
- },
430
- undefined,
431
- ],
432
- ]
433
- }
434
- themeIntent="text"
435
- themeSize="xsmall"
436
- />
437
- </View>
438
- <Text
439
- allowFontScaling={false}
440
- style={
441
- Array [
442
- Object {
443
- "color": "#001f23",
444
- "fontFamily": "BeVietnamPro-Regular",
445
- "fontSize": 14,
446
- "letterSpacing": 0.42,
447
- "lineHeight": 22,
448
- },
449
- Array [
450
- Object {
451
- "color": "#ffffff",
452
- "fontFamily": "BeVietnamPro-Regular",
453
- "fontSize": 16,
454
- "lineHeight": 22,
455
- "paddingLeft": 4,
456
- },
457
- undefined,
458
- ],
459
- ]
460
- }
461
- themeFontSize="medium"
462
- themeFontWeight="regular"
463
- themeIntent="body"
464
- themeTypeface="neutral"
465
- >
466
- Safety incident
467
- </Text>
468
- </View>
469
- <View
470
- accessible={true}
471
- focusable={false}
472
- onClick={[Function]}
473
- onResponderGrant={[Function]}
474
- onResponderMove={[Function]}
475
- onResponderRelease={[Function]}
476
- onResponderTerminate={[Function]}
477
- onResponderTerminationRequest={[Function]}
478
- onStartShouldSetResponder={[Function]}
479
- style={
480
- Array [
481
- Object {
482
- "alignItems": "center",
483
- "alignSelf": "flex-end",
484
- "backgroundColor": "#795e90",
485
- "borderRadius": 999,
486
- "flexDirection": "row",
487
- "margin": 8,
488
- "marginRight": 24,
489
- "overflow": "hidden",
490
- "padding": 12,
491
- },
492
- undefined,
493
- ]
494
- }
495
- testID="clock-action-item"
496
- >
497
- <View
498
- style={
499
- Array [
500
- Object {},
501
- Array [
502
- Object {
503
- "alignItems": "center",
504
- "height": 24,
505
- "justifyContent": "center",
506
- "width": 24,
507
- },
508
- undefined,
509
- ],
510
- ]
511
- }
512
- >
513
- <HeroIcon
514
- name="clock"
515
- style={
516
- Array [
517
- Object {
518
- "color": "#001f23",
519
- "fontSize": 16,
520
- },
521
- Array [
522
- Object {
523
- "color": "#ffffff",
524
- },
525
- undefined,
526
- ],
527
- ]
528
- }
529
- themeIntent="text"
530
- themeSize="xsmall"
531
- />
532
- </View>
533
- <Text
534
- allowFontScaling={false}
535
- style={
536
- Array [
537
- Object {
538
- "color": "#001f23",
539
- "fontFamily": "BeVietnamPro-Regular",
540
- "fontSize": 14,
541
- "letterSpacing": 0.42,
542
- "lineHeight": 22,
543
- },
544
- Array [
545
- Object {
546
- "color": "#ffffff",
547
- "fontFamily": "BeVietnamPro-Regular",
548
- "fontSize": 16,
549
- "lineHeight": 22,
550
- "paddingLeft": 4,
551
- },
552
- undefined,
553
- ],
554
- ]
555
- }
556
- themeFontSize="medium"
557
- themeFontWeight="regular"
558
- themeIntent="body"
559
- themeTypeface="neutral"
560
- >
561
- Timesheets
562
- </Text>
563
- </View>
564
- </View>
565
- </View>
21
+ <Modal
22
+ animationType="none"
23
+ hardwareAccelerated={false}
24
+ statusBarTranslucent={true}
25
+ transparent={true}
26
+ visible={false}
27
+ />
566
28
  <View
567
29
  accessible={true}
568
30
  focusable={false}
@@ -698,328 +160,66 @@ exports[`ActionGroup has active true 1`] = `
698
160
  ]
699
161
  }
700
162
  >
701
- <View
702
- collapsable={false}
703
- pointerEvents="auto"
704
- style={
705
- Object {
706
- "backgroundColor": "#000000",
707
- "bottom": 0,
708
- "left": 0,
709
- "opacity": 0.4,
710
- "position": "absolute",
711
- "right": 0,
712
- "top": 0,
713
- }
714
- }
715
- testID="back-drop"
716
- />
717
- <View
718
- collapsable={false}
719
- pointerEvents="auto"
720
- style={
721
- Object {
722
- "alignItems": "flex-end",
723
- "justifyContent": "flex-end",
724
- "opacity": 1,
725
- "transform": Array [
726
- Object {
727
- "translateX": 0,
728
- },
729
- ],
730
- "width": "70%",
731
- }
732
- }
733
- testID="action-group"
163
+ <Modal
164
+ animationType="none"
165
+ hardwareAccelerated={false}
166
+ statusBarTranslucent={true}
167
+ transparent={true}
168
+ visible={true}
734
169
  >
735
- <Text
736
- allowFontScaling={false}
170
+ <View
171
+ collapsable={false}
172
+ pointerEvents="auto"
173
+ style={
174
+ Object {
175
+ "backgroundColor": "#000000",
176
+ "bottom": 0,
177
+ "flex": 1,
178
+ "height": "100%",
179
+ "opacity": 0.4,
180
+ "position": "absolute",
181
+ "right": 0,
182
+ "width": "100%",
183
+ }
184
+ }
185
+ testID="back-drop"
186
+ />
187
+ <View
737
188
  style={
738
189
  Array [
739
190
  Object {
740
- "color": "#001f23",
741
- "fontFamily": "BeVietnamPro-Regular",
742
- "fontSize": 14,
743
- "letterSpacing": 0.42,
744
- "lineHeight": 22,
191
+ "alignItems": "flex-end",
192
+ "backgroundColor": "transparent",
193
+ "bottom": 0,
194
+ "flex": 1,
195
+ "height": "100%",
196
+ "justifyContent": "flex-end",
197
+ "position": "absolute",
198
+ "right": 0,
199
+ "width": "100%",
745
200
  },
746
- Array [
747
- Object {
748
- "color": "#001f23",
749
- "fontFamily": "BeVietnamPro-SemiBold",
750
- "fontSize": 24,
751
- "lineHeight": 32,
752
- "marginBottom": 24,
753
- "marginRight": 24,
754
- "textAlign": "right",
755
- },
756
- undefined,
757
- ],
201
+ undefined,
758
202
  ]
759
203
  }
760
- testID="header-text"
761
- themeFontSize="medium"
762
- themeFontWeight="regular"
763
- themeIntent="body"
764
- themeTypeface="neutral"
765
204
  >
766
- What would you like to create?
767
- </Text>
768
- <View>
769
- <View
770
- accessible={true}
771
- focusable={false}
772
- onClick={[Function]}
773
- onResponderGrant={[Function]}
774
- onResponderMove={[Function]}
775
- onResponderRelease={[Function]}
776
- onResponderTerminate={[Function]}
777
- onResponderTerminationRequest={[Function]}
778
- onStartShouldSetResponder={[Function]}
779
- style={
780
- Array [
781
- Object {
782
- "alignItems": "center",
783
- "alignSelf": "flex-end",
784
- "backgroundColor": "#795e90",
785
- "borderRadius": 999,
786
- "flexDirection": "row",
787
- "margin": 8,
788
- "marginRight": 24,
789
- "overflow": "hidden",
790
- "padding": 12,
791
- },
792
- undefined,
793
- ]
794
- }
795
- testID="speaker-action-item"
796
- >
797
- <View
798
- style={
799
- Array [
800
- Object {},
801
- Array [
802
- Object {
803
- "alignItems": "center",
804
- "height": 24,
805
- "justifyContent": "center",
806
- "width": 24,
807
- },
808
- undefined,
809
- ],
810
- ]
811
- }
812
- >
813
- <HeroIcon
814
- name="speaker"
815
- style={
816
- Array [
817
- Object {
818
- "color": "#001f23",
819
- "fontSize": 16,
820
- },
821
- Array [
822
- Object {
823
- "color": "#ffffff",
824
- },
825
- undefined,
826
- ],
827
- ]
828
- }
829
- themeIntent="text"
830
- themeSize="xsmall"
831
- />
832
- </View>
833
- <Text
834
- allowFontScaling={false}
835
- style={
836
- Array [
837
- Object {
838
- "color": "#001f23",
839
- "fontFamily": "BeVietnamPro-Regular",
840
- "fontSize": 14,
841
- "letterSpacing": 0.42,
842
- "lineHeight": 22,
843
- },
844
- Array [
845
- Object {
846
- "color": "#ffffff",
847
- "fontFamily": "BeVietnamPro-Regular",
848
- "fontSize": 16,
849
- "lineHeight": 22,
850
- "paddingLeft": 4,
851
- },
852
- undefined,
853
- ],
854
- ]
855
- }
856
- themeFontSize="medium"
857
- themeFontWeight="regular"
858
- themeIntent="body"
859
- themeTypeface="neutral"
860
- >
861
- Give shout out
862
- </Text>
863
- </View>
864
205
  <View
865
- accessible={true}
866
- focusable={false}
867
- onClick={[Function]}
868
- onResponderGrant={[Function]}
869
- onResponderMove={[Function]}
870
- onResponderRelease={[Function]}
871
- onResponderTerminate={[Function]}
872
- onResponderTerminationRequest={[Function]}
873
- onStartShouldSetResponder={[Function]}
206
+ collapsable={false}
207
+ pointerEvents="auto"
874
208
  style={
875
- Array [
876
- Object {
877
- "alignItems": "center",
878
- "alignSelf": "flex-end",
879
- "backgroundColor": "#795e90",
880
- "borderRadius": 999,
881
- "flexDirection": "row",
882
- "margin": 8,
883
- "marginRight": 24,
884
- "overflow": "hidden",
885
- "padding": 12,
886
- },
887
- undefined,
888
- ]
889
- }
890
- testID="target-action-item"
891
- >
892
- <View
893
- style={
894
- Array [
895
- Object {},
896
- Array [
897
- Object {
898
- "alignItems": "center",
899
- "height": 24,
900
- "justifyContent": "center",
901
- "width": 24,
902
- },
903
- undefined,
904
- ],
905
- ]
906
- }
907
- >
908
- <HeroIcon
909
- name="target"
910
- style={
911
- Array [
912
- Object {
913
- "color": "#001f23",
914
- "fontSize": 16,
915
- },
916
- Array [
917
- Object {
918
- "color": "#ffffff",
919
- },
920
- undefined,
921
- ],
922
- ]
923
- }
924
- themeIntent="text"
925
- themeSize="xsmall"
926
- />
927
- </View>
928
- <Text
929
- allowFontScaling={false}
930
- style={
931
- Array [
209
+ Object {
210
+ "alignItems": "flex-end",
211
+ "justifyContent": "flex-end",
212
+ "opacity": 1,
213
+ "transform": Array [
932
214
  Object {
933
- "color": "#001f23",
934
- "fontFamily": "BeVietnamPro-Regular",
935
- "fontSize": 14,
936
- "letterSpacing": 0.42,
937
- "lineHeight": 22,
215
+ "translateX": 0,
938
216
  },
939
- Array [
940
- Object {
941
- "color": "#ffffff",
942
- "fontFamily": "BeVietnamPro-Regular",
943
- "fontSize": 16,
944
- "lineHeight": 22,
945
- "paddingLeft": 4,
946
- },
947
- undefined,
948
- ],
949
- ]
950
- }
951
- themeFontSize="medium"
952
- themeFontWeight="regular"
953
- themeIntent="body"
954
- themeTypeface="neutral"
955
- >
956
- Goal
957
- </Text>
958
- </View>
959
- <View
960
- accessible={true}
961
- focusable={false}
962
- onClick={[Function]}
963
- onResponderGrant={[Function]}
964
- onResponderMove={[Function]}
965
- onResponderRelease={[Function]}
966
- onResponderTerminate={[Function]}
967
- onResponderTerminationRequest={[Function]}
968
- onStartShouldSetResponder={[Function]}
969
- style={
970
- Array [
971
- Object {
972
- "alignItems": "center",
973
- "alignSelf": "flex-end",
974
- "backgroundColor": "#795e90",
975
- "borderRadius": 999,
976
- "flexDirection": "row",
977
- "margin": 8,
978
- "marginRight": 24,
979
- "overflow": "hidden",
980
- "padding": 12,
981
- },
982
- undefined,
983
- ]
984
- }
985
- testID="plane-action-item"
986
- >
987
- <View
988
- style={
989
- Array [
990
- Object {},
991
- Array [
992
- Object {
993
- "alignItems": "center",
994
- "height": 24,
995
- "justifyContent": "center",
996
- "width": 24,
997
- },
998
- undefined,
999
- ],
1000
- ]
217
+ ],
218
+ "width": "70%",
1001
219
  }
1002
- >
1003
- <HeroIcon
1004
- name="plane"
1005
- style={
1006
- Array [
1007
- Object {
1008
- "color": "#001f23",
1009
- "fontSize": 16,
1010
- },
1011
- Array [
1012
- Object {
1013
- "color": "#ffffff",
1014
- },
1015
- undefined,
1016
- ],
1017
- ]
1018
- }
1019
- themeIntent="text"
1020
- themeSize="xsmall"
1021
- />
1022
- </View>
220
+ }
221
+ testID="action-group"
222
+ >
1023
223
  <Text
1024
224
  allowFontScaling={false}
1025
225
  style={
@@ -1033,122 +233,507 @@ exports[`ActionGroup has active true 1`] = `
1033
233
  },
1034
234
  Array [
1035
235
  Object {
1036
- "color": "#ffffff",
1037
- "fontFamily": "BeVietnamPro-Regular",
1038
- "fontSize": 16,
1039
- "lineHeight": 22,
1040
- "paddingLeft": 4,
236
+ "color": "#001f23",
237
+ "fontFamily": "BeVietnamPro-SemiBold",
238
+ "fontSize": 24,
239
+ "lineHeight": 32,
240
+ "marginBottom": 24,
241
+ "marginRight": 24,
242
+ "textAlign": "right",
1041
243
  },
1042
244
  undefined,
1043
245
  ],
1044
246
  ]
1045
247
  }
248
+ testID="header-text"
1046
249
  themeFontSize="medium"
1047
250
  themeFontWeight="regular"
1048
251
  themeIntent="body"
1049
252
  themeTypeface="neutral"
1050
253
  >
1051
- Leave request
254
+ What would you like to create?
1052
255
  </Text>
1053
- </View>
1054
- <View
1055
- accessible={true}
1056
- focusable={false}
1057
- onClick={[Function]}
1058
- onResponderGrant={[Function]}
1059
- onResponderMove={[Function]}
1060
- onResponderRelease={[Function]}
1061
- onResponderTerminate={[Function]}
1062
- onResponderTerminationRequest={[Function]}
1063
- onStartShouldSetResponder={[Function]}
1064
- style={
1065
- Array [
1066
- Object {
1067
- "alignItems": "center",
1068
- "alignSelf": "flex-end",
1069
- "backgroundColor": "#795e90",
1070
- "borderRadius": 999,
1071
- "flexDirection": "row",
1072
- "margin": 8,
1073
- "marginRight": 24,
1074
- "overflow": "hidden",
1075
- "padding": 12,
1076
- },
1077
- undefined,
1078
- ]
1079
- }
1080
- testID="health-bag-action-item"
1081
- >
1082
- <View
1083
- style={
1084
- Array [
1085
- Object {},
256
+ <View>
257
+ <View
258
+ accessible={true}
259
+ focusable={false}
260
+ onClick={[Function]}
261
+ onResponderGrant={[Function]}
262
+ onResponderMove={[Function]}
263
+ onResponderRelease={[Function]}
264
+ onResponderTerminate={[Function]}
265
+ onResponderTerminationRequest={[Function]}
266
+ onStartShouldSetResponder={[Function]}
267
+ style={
1086
268
  Array [
1087
269
  Object {
1088
270
  "alignItems": "center",
1089
- "height": 24,
1090
- "justifyContent": "center",
1091
- "width": 24,
271
+ "alignSelf": "flex-end",
272
+ "backgroundColor": "#795e90",
273
+ "borderRadius": 999,
274
+ "flexDirection": "row",
275
+ "margin": 8,
276
+ "marginRight": 24,
277
+ "overflow": "hidden",
278
+ "padding": 12,
1092
279
  },
1093
280
  undefined,
1094
- ],
1095
- ]
1096
- }
1097
- >
1098
- <HeroIcon
1099
- name="health-bag"
281
+ ]
282
+ }
283
+ testID="speaker-action-item"
284
+ >
285
+ <View
286
+ style={
287
+ Array [
288
+ Object {},
289
+ Array [
290
+ Object {
291
+ "alignItems": "center",
292
+ "height": 24,
293
+ "justifyContent": "center",
294
+ "width": 24,
295
+ },
296
+ undefined,
297
+ ],
298
+ ]
299
+ }
300
+ >
301
+ <HeroIcon
302
+ name="speaker"
303
+ style={
304
+ Array [
305
+ Object {
306
+ "color": "#001f23",
307
+ "fontSize": 16,
308
+ },
309
+ Array [
310
+ Object {
311
+ "color": "#ffffff",
312
+ },
313
+ undefined,
314
+ ],
315
+ ]
316
+ }
317
+ themeIntent="text"
318
+ themeSize="xsmall"
319
+ />
320
+ </View>
321
+ <Text
322
+ allowFontScaling={false}
323
+ style={
324
+ Array [
325
+ Object {
326
+ "color": "#001f23",
327
+ "fontFamily": "BeVietnamPro-Regular",
328
+ "fontSize": 14,
329
+ "letterSpacing": 0.42,
330
+ "lineHeight": 22,
331
+ },
332
+ Array [
333
+ Object {
334
+ "color": "#ffffff",
335
+ "fontFamily": "BeVietnamPro-Regular",
336
+ "fontSize": 16,
337
+ "lineHeight": 22,
338
+ "paddingLeft": 4,
339
+ },
340
+ undefined,
341
+ ],
342
+ ]
343
+ }
344
+ themeFontSize="medium"
345
+ themeFontWeight="regular"
346
+ themeIntent="body"
347
+ themeTypeface="neutral"
348
+ >
349
+ Give shout out
350
+ </Text>
351
+ </View>
352
+ <View
353
+ accessible={true}
354
+ focusable={false}
355
+ onClick={[Function]}
356
+ onResponderGrant={[Function]}
357
+ onResponderMove={[Function]}
358
+ onResponderRelease={[Function]}
359
+ onResponderTerminate={[Function]}
360
+ onResponderTerminationRequest={[Function]}
361
+ onStartShouldSetResponder={[Function]}
1100
362
  style={
1101
363
  Array [
1102
364
  Object {
1103
- "color": "#001f23",
1104
- "fontSize": 16,
365
+ "alignItems": "center",
366
+ "alignSelf": "flex-end",
367
+ "backgroundColor": "#795e90",
368
+ "borderRadius": 999,
369
+ "flexDirection": "row",
370
+ "margin": 8,
371
+ "marginRight": 24,
372
+ "overflow": "hidden",
373
+ "padding": 12,
1105
374
  },
375
+ undefined,
376
+ ]
377
+ }
378
+ testID="target-action-item"
379
+ >
380
+ <View
381
+ style={
382
+ Array [
383
+ Object {},
384
+ Array [
385
+ Object {
386
+ "alignItems": "center",
387
+ "height": 24,
388
+ "justifyContent": "center",
389
+ "width": 24,
390
+ },
391
+ undefined,
392
+ ],
393
+ ]
394
+ }
395
+ >
396
+ <HeroIcon
397
+ name="target"
398
+ style={
399
+ Array [
400
+ Object {
401
+ "color": "#001f23",
402
+ "fontSize": 16,
403
+ },
404
+ Array [
405
+ Object {
406
+ "color": "#ffffff",
407
+ },
408
+ undefined,
409
+ ],
410
+ ]
411
+ }
412
+ themeIntent="text"
413
+ themeSize="xsmall"
414
+ />
415
+ </View>
416
+ <Text
417
+ allowFontScaling={false}
418
+ style={
1106
419
  Array [
1107
420
  Object {
1108
- "color": "#ffffff",
421
+ "color": "#001f23",
422
+ "fontFamily": "BeVietnamPro-Regular",
423
+ "fontSize": 14,
424
+ "letterSpacing": 0.42,
425
+ "lineHeight": 22,
1109
426
  },
1110
- undefined,
1111
- ],
427
+ Array [
428
+ Object {
429
+ "color": "#ffffff",
430
+ "fontFamily": "BeVietnamPro-Regular",
431
+ "fontSize": 16,
432
+ "lineHeight": 22,
433
+ "paddingLeft": 4,
434
+ },
435
+ undefined,
436
+ ],
437
+ ]
438
+ }
439
+ themeFontSize="medium"
440
+ themeFontWeight="regular"
441
+ themeIntent="body"
442
+ themeTypeface="neutral"
443
+ >
444
+ Goal
445
+ </Text>
446
+ </View>
447
+ <View
448
+ accessible={true}
449
+ focusable={false}
450
+ onClick={[Function]}
451
+ onResponderGrant={[Function]}
452
+ onResponderMove={[Function]}
453
+ onResponderRelease={[Function]}
454
+ onResponderTerminate={[Function]}
455
+ onResponderTerminationRequest={[Function]}
456
+ onStartShouldSetResponder={[Function]}
457
+ style={
458
+ Array [
459
+ Object {
460
+ "alignItems": "center",
461
+ "alignSelf": "flex-end",
462
+ "backgroundColor": "#795e90",
463
+ "borderRadius": 999,
464
+ "flexDirection": "row",
465
+ "margin": 8,
466
+ "marginRight": 24,
467
+ "overflow": "hidden",
468
+ "padding": 12,
469
+ },
470
+ undefined,
1112
471
  ]
1113
472
  }
1114
- themeIntent="text"
1115
- themeSize="xsmall"
1116
- />
1117
- </View>
1118
- <Text
1119
- allowFontScaling={false}
1120
- style={
1121
- Array [
1122
- Object {
1123
- "color": "#001f23",
1124
- "fontFamily": "BeVietnamPro-Regular",
1125
- "fontSize": 14,
1126
- "letterSpacing": 0.42,
1127
- "lineHeight": 22,
1128
- },
473
+ testID="plane-action-item"
474
+ >
475
+ <View
476
+ style={
477
+ Array [
478
+ Object {},
479
+ Array [
480
+ Object {
481
+ "alignItems": "center",
482
+ "height": 24,
483
+ "justifyContent": "center",
484
+ "width": 24,
485
+ },
486
+ undefined,
487
+ ],
488
+ ]
489
+ }
490
+ >
491
+ <HeroIcon
492
+ name="plane"
493
+ style={
494
+ Array [
495
+ Object {
496
+ "color": "#001f23",
497
+ "fontSize": 16,
498
+ },
499
+ Array [
500
+ Object {
501
+ "color": "#ffffff",
502
+ },
503
+ undefined,
504
+ ],
505
+ ]
506
+ }
507
+ themeIntent="text"
508
+ themeSize="xsmall"
509
+ />
510
+ </View>
511
+ <Text
512
+ allowFontScaling={false}
513
+ style={
514
+ Array [
515
+ Object {
516
+ "color": "#001f23",
517
+ "fontFamily": "BeVietnamPro-Regular",
518
+ "fontSize": 14,
519
+ "letterSpacing": 0.42,
520
+ "lineHeight": 22,
521
+ },
522
+ Array [
523
+ Object {
524
+ "color": "#ffffff",
525
+ "fontFamily": "BeVietnamPro-Regular",
526
+ "fontSize": 16,
527
+ "lineHeight": 22,
528
+ "paddingLeft": 4,
529
+ },
530
+ undefined,
531
+ ],
532
+ ]
533
+ }
534
+ themeFontSize="medium"
535
+ themeFontWeight="regular"
536
+ themeIntent="body"
537
+ themeTypeface="neutral"
538
+ >
539
+ Leave request
540
+ </Text>
541
+ </View>
542
+ <View
543
+ accessible={true}
544
+ focusable={false}
545
+ onClick={[Function]}
546
+ onResponderGrant={[Function]}
547
+ onResponderMove={[Function]}
548
+ onResponderRelease={[Function]}
549
+ onResponderTerminate={[Function]}
550
+ onResponderTerminationRequest={[Function]}
551
+ onStartShouldSetResponder={[Function]}
552
+ style={
1129
553
  Array [
1130
554
  Object {
1131
- "color": "#ffffff",
1132
- "fontFamily": "BeVietnamPro-Regular",
1133
- "fontSize": 16,
1134
- "lineHeight": 22,
1135
- "paddingLeft": 4,
555
+ "alignItems": "center",
556
+ "alignSelf": "flex-end",
557
+ "backgroundColor": "#795e90",
558
+ "borderRadius": 999,
559
+ "flexDirection": "row",
560
+ "margin": 8,
561
+ "marginRight": 24,
562
+ "overflow": "hidden",
563
+ "padding": 12,
1136
564
  },
1137
565
  undefined,
1138
- ],
1139
- ]
1140
- }
1141
- themeFontSize="medium"
1142
- themeFontWeight="regular"
1143
- themeIntent="body"
1144
- themeTypeface="neutral"
1145
- >
1146
- Safety incident
1147
- </Text>
566
+ ]
567
+ }
568
+ testID="health-bag-action-item"
569
+ >
570
+ <View
571
+ style={
572
+ Array [
573
+ Object {},
574
+ Array [
575
+ Object {
576
+ "alignItems": "center",
577
+ "height": 24,
578
+ "justifyContent": "center",
579
+ "width": 24,
580
+ },
581
+ undefined,
582
+ ],
583
+ ]
584
+ }
585
+ >
586
+ <HeroIcon
587
+ name="health-bag"
588
+ style={
589
+ Array [
590
+ Object {
591
+ "color": "#001f23",
592
+ "fontSize": 16,
593
+ },
594
+ Array [
595
+ Object {
596
+ "color": "#ffffff",
597
+ },
598
+ undefined,
599
+ ],
600
+ ]
601
+ }
602
+ themeIntent="text"
603
+ themeSize="xsmall"
604
+ />
605
+ </View>
606
+ <Text
607
+ allowFontScaling={false}
608
+ style={
609
+ Array [
610
+ Object {
611
+ "color": "#001f23",
612
+ "fontFamily": "BeVietnamPro-Regular",
613
+ "fontSize": 14,
614
+ "letterSpacing": 0.42,
615
+ "lineHeight": 22,
616
+ },
617
+ Array [
618
+ Object {
619
+ "color": "#ffffff",
620
+ "fontFamily": "BeVietnamPro-Regular",
621
+ "fontSize": 16,
622
+ "lineHeight": 22,
623
+ "paddingLeft": 4,
624
+ },
625
+ undefined,
626
+ ],
627
+ ]
628
+ }
629
+ themeFontSize="medium"
630
+ themeFontWeight="regular"
631
+ themeIntent="body"
632
+ themeTypeface="neutral"
633
+ >
634
+ Safety incident
635
+ </Text>
636
+ </View>
637
+ <View
638
+ accessible={true}
639
+ focusable={false}
640
+ onClick={[Function]}
641
+ onResponderGrant={[Function]}
642
+ onResponderMove={[Function]}
643
+ onResponderRelease={[Function]}
644
+ onResponderTerminate={[Function]}
645
+ onResponderTerminationRequest={[Function]}
646
+ onStartShouldSetResponder={[Function]}
647
+ style={
648
+ Array [
649
+ Object {
650
+ "alignItems": "center",
651
+ "alignSelf": "flex-end",
652
+ "backgroundColor": "#795e90",
653
+ "borderRadius": 999,
654
+ "flexDirection": "row",
655
+ "margin": 8,
656
+ "marginRight": 24,
657
+ "overflow": "hidden",
658
+ "padding": 12,
659
+ },
660
+ undefined,
661
+ ]
662
+ }
663
+ testID="clock-action-item"
664
+ >
665
+ <View
666
+ style={
667
+ Array [
668
+ Object {},
669
+ Array [
670
+ Object {
671
+ "alignItems": "center",
672
+ "height": 24,
673
+ "justifyContent": "center",
674
+ "width": 24,
675
+ },
676
+ undefined,
677
+ ],
678
+ ]
679
+ }
680
+ >
681
+ <HeroIcon
682
+ name="clock"
683
+ style={
684
+ Array [
685
+ Object {
686
+ "color": "#001f23",
687
+ "fontSize": 16,
688
+ },
689
+ Array [
690
+ Object {
691
+ "color": "#ffffff",
692
+ },
693
+ undefined,
694
+ ],
695
+ ]
696
+ }
697
+ themeIntent="text"
698
+ themeSize="xsmall"
699
+ />
700
+ </View>
701
+ <Text
702
+ allowFontScaling={false}
703
+ style={
704
+ Array [
705
+ Object {
706
+ "color": "#001f23",
707
+ "fontFamily": "BeVietnamPro-Regular",
708
+ "fontSize": 14,
709
+ "letterSpacing": 0.42,
710
+ "lineHeight": 22,
711
+ },
712
+ Array [
713
+ Object {
714
+ "color": "#ffffff",
715
+ "fontFamily": "BeVietnamPro-Regular",
716
+ "fontSize": 16,
717
+ "lineHeight": 22,
718
+ "paddingLeft": 4,
719
+ },
720
+ undefined,
721
+ ],
722
+ ]
723
+ }
724
+ themeFontSize="medium"
725
+ themeFontWeight="regular"
726
+ themeIntent="body"
727
+ themeTypeface="neutral"
728
+ >
729
+ Timesheets
730
+ </Text>
731
+ </View>
732
+ </View>
1148
733
  </View>
1149
734
  <View
1150
735
  accessible={true}
1151
- focusable={false}
736
+ focusable={true}
1152
737
  onClick={[Function]}
1153
738
  onResponderGrant={[Function]}
1154
739
  onResponderMove={[Function]}
@@ -1160,19 +745,34 @@ exports[`ActionGroup has active true 1`] = `
1160
745
  Array [
1161
746
  Object {
1162
747
  "alignItems": "center",
1163
- "alignSelf": "flex-end",
1164
- "backgroundColor": "#795e90",
748
+ "alignSelf": "flex-start",
749
+ "backgroundColor": "#401960",
1165
750
  "borderRadius": 999,
751
+ "elevation": 2,
1166
752
  "flexDirection": "row",
1167
- "margin": 8,
1168
- "marginRight": 24,
1169
- "overflow": "hidden",
1170
- "padding": 12,
753
+ "justifyContent": "center",
754
+ "padding": 20,
755
+ "shadowColor": "#001f23",
756
+ "shadowOffset": Object {
757
+ "height": 2,
758
+ "width": 0,
759
+ },
760
+ "shadowOpacity": 0.12,
761
+ "shadowRadius": 8,
1171
762
  },
1172
- undefined,
763
+ Array [
764
+ Object {
765
+ "alignSelf": "flex-end",
766
+ "marginRight": 24,
767
+ "marginTop": 24,
768
+ },
769
+ Object {
770
+ "marginBottom": 24,
771
+ },
772
+ ],
1173
773
  ]
1174
774
  }
1175
- testID="clock-action-item"
775
+ testID="fab"
1176
776
  >
1177
777
  <View
1178
778
  style={
@@ -1191,7 +791,7 @@ exports[`ActionGroup has active true 1`] = `
1191
791
  }
1192
792
  >
1193
793
  <HeroIcon
1194
- name="clock"
794
+ name="add"
1195
795
  style={
1196
796
  Array [
1197
797
  Object {
@@ -1201,11 +801,15 @@ exports[`ActionGroup has active true 1`] = `
1201
801
  Array [
1202
802
  Object {
1203
803
  "color": "#ffffff",
804
+ "lineHeight": 24,
805
+ "textAlign": "center",
806
+ "textAlignVertical": "center",
1204
807
  },
1205
808
  undefined,
1206
809
  ],
1207
810
  ]
1208
811
  }
812
+ testID="styled-fab-icon"
1209
813
  themeIntent="text"
1210
814
  themeSize="xsmall"
1211
815
  />
@@ -1224,10 +828,12 @@ exports[`ActionGroup has active true 1`] = `
1224
828
  Array [
1225
829
  Object {
1226
830
  "color": "#ffffff",
1227
- "fontFamily": "BeVietnamPro-Regular",
831
+ "fontFamily": "BeVietnamPro-SemiBold",
1228
832
  "fontSize": 16,
1229
- "lineHeight": 22,
1230
- "paddingLeft": 4,
833
+ "lineHeight": 24,
834
+ "marginHorizontal": 8,
835
+ "textAlign": "center",
836
+ "textAlignVertical": "center",
1231
837
  },
1232
838
  undefined,
1233
839
  ],
@@ -1238,124 +844,10 @@ exports[`ActionGroup has active true 1`] = `
1238
844
  themeIntent="body"
1239
845
  themeTypeface="neutral"
1240
846
  >
1241
- Timesheets
847
+ Shout out
1242
848
  </Text>
1243
849
  </View>
1244
850
  </View>
1245
- </View>
1246
- <View
1247
- accessible={true}
1248
- focusable={false}
1249
- onClick={[Function]}
1250
- onResponderGrant={[Function]}
1251
- onResponderMove={[Function]}
1252
- onResponderRelease={[Function]}
1253
- onResponderTerminate={[Function]}
1254
- onResponderTerminationRequest={[Function]}
1255
- onStartShouldSetResponder={[Function]}
1256
- style={
1257
- Array [
1258
- Object {
1259
- "alignItems": "center",
1260
- "alignSelf": "flex-start",
1261
- "backgroundColor": "#401960",
1262
- "borderRadius": 999,
1263
- "elevation": 2,
1264
- "flexDirection": "row",
1265
- "justifyContent": "center",
1266
- "padding": 20,
1267
- "shadowColor": "#001f23",
1268
- "shadowOffset": Object {
1269
- "height": 2,
1270
- "width": 0,
1271
- },
1272
- "shadowOpacity": 0.12,
1273
- "shadowRadius": 8,
1274
- },
1275
- Array [
1276
- Object {
1277
- "alignSelf": "flex-end",
1278
- "marginRight": 24,
1279
- "marginTop": 24,
1280
- },
1281
- undefined,
1282
- ],
1283
- ]
1284
- }
1285
- testID="fab"
1286
- >
1287
- <View
1288
- style={
1289
- Array [
1290
- Object {},
1291
- Array [
1292
- Object {
1293
- "alignItems": "center",
1294
- "height": 24,
1295
- "justifyContent": "center",
1296
- "width": 24,
1297
- },
1298
- undefined,
1299
- ],
1300
- ]
1301
- }
1302
- >
1303
- <HeroIcon
1304
- name="add"
1305
- style={
1306
- Array [
1307
- Object {
1308
- "color": "#001f23",
1309
- "fontSize": 16,
1310
- },
1311
- Array [
1312
- Object {
1313
- "color": "#ffffff",
1314
- "lineHeight": 24,
1315
- "textAlign": "center",
1316
- "textAlignVertical": "center",
1317
- },
1318
- undefined,
1319
- ],
1320
- ]
1321
- }
1322
- testID="styled-fab-icon"
1323
- themeIntent="text"
1324
- themeSize="xsmall"
1325
- />
1326
- </View>
1327
- <Text
1328
- allowFontScaling={false}
1329
- style={
1330
- Array [
1331
- Object {
1332
- "color": "#001f23",
1333
- "fontFamily": "BeVietnamPro-Regular",
1334
- "fontSize": 14,
1335
- "letterSpacing": 0.42,
1336
- "lineHeight": 22,
1337
- },
1338
- Array [
1339
- Object {
1340
- "color": "#ffffff",
1341
- "fontFamily": "BeVietnamPro-SemiBold",
1342
- "fontSize": 16,
1343
- "lineHeight": 24,
1344
- "marginHorizontal": 8,
1345
- "textAlign": "center",
1346
- "textAlignVertical": "center",
1347
- },
1348
- undefined,
1349
- ],
1350
- ]
1351
- }
1352
- themeFontSize="medium"
1353
- themeFontWeight="regular"
1354
- themeIntent="body"
1355
- themeTypeface="neutral"
1356
- >
1357
- Shout out
1358
- </Text>
1359
- </View>
851
+ </Modal>
1360
852
  </View>
1361
853
  `;