@hero-design/rn 8.56.1 → 8.57.0

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 (38) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +16 -0
  3. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  4. package/es/index.js +5106 -4266
  5. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  6. package/lib/index.js +5105 -4265
  7. package/package.json +2 -1
  8. package/src/components/Button/StyledButton.tsx +16 -30
  9. package/src/components/Carousel/CardCarousel.tsx +3 -4
  10. package/src/components/Empty/__tests__/__snapshots__/index.spec.tsx.snap +2 -2
  11. package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap +4 -4
  12. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  13. package/src/components/Icon/IconList.ts +4 -0
  14. package/src/components/PinInput/index.tsx +1 -1
  15. package/src/components/Tabs/SceneView.tsx +6 -4
  16. package/src/components/Tabs/ScrollableTabs.tsx +8 -2
  17. package/src/components/Tabs/{ScrollableTabsHeader.tsx → ScrollableTabsHeader/ScrollableTabsHeader.tsx} +73 -42
  18. package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.ts +45 -0
  19. package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.ts +91 -0
  20. package/src/components/Tabs/StyledScrollableTabs.tsx +14 -3
  21. package/src/components/Tabs/__tests__/ScrollableTabsHeader.spec.tsx +7 -3
  22. package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap +42 -6
  23. package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap +623 -3
  24. package/src/components/Tabs/__tests__/useInitHighlightedAnimation.spec.tsx +56 -0
  25. package/src/components/Tabs/__tests__/useInitUnderlinedAnimation.spec.tsx +65 -0
  26. package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap +2 -2
  27. package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap +2 -2
  28. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +1 -1
  29. package/src/theme/components/typography.ts +1 -1
  30. package/types/components/Icon/IconList.d.ts +1 -1
  31. package/types/components/Icon/index.d.ts +1 -1
  32. package/types/components/Icon/utils.d.ts +1 -1
  33. package/types/components/Tabs/ScrollableTabs.d.ts +4 -1
  34. package/types/components/Tabs/{ScrollableTabsHeader.d.ts → ScrollableTabsHeader/ScrollableTabsHeader.d.ts} +7 -3
  35. package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.d.ts +9 -0
  36. package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.d.ts +10 -0
  37. package/types/components/Tabs/StyledScrollableTabs.d.ts +5 -1
  38. package/types/components/Tabs/index.d.ts +1 -1
package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`ScrollableTabsHeader renders correctly 1`] = `
3
+ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
4
4
  <View
5
5
  style={
6
6
  {
@@ -23,8 +23,6 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
23
23
  style={
24
24
  [
25
25
  {
26
- "borderBottomColor": "#e8e9ea",
27
- "borderBottomWidth": 2,
28
26
  "paddingHorizontal": 0,
29
27
  },
30
28
  undefined,
@@ -42,6 +40,8 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
42
40
  <RCTScrollView
43
41
  contentContainerStyle={
44
42
  {
43
+ "borderBottomColor": "#e8e9ea",
44
+ "borderBottomWidth": 2,
45
45
  "paddingHorizontal": 8,
46
46
  }
47
47
  }
@@ -183,8 +183,11 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
183
183
  style={
184
184
  [
185
185
  {
186
+ "alignItems": "center",
187
+ "justifyContent": "center",
186
188
  "paddingHorizontal": 8,
187
189
  "paddingVertical": 4,
190
+ "position": "relative",
188
191
  },
189
192
  undefined,
190
193
  ]
@@ -294,8 +297,11 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
294
297
  style={
295
298
  [
296
299
  {
300
+ "alignItems": "center",
301
+ "justifyContent": "center",
297
302
  "paddingHorizontal": 8,
298
303
  "paddingVertical": 4,
304
+ "position": "relative",
299
305
  },
300
306
  undefined,
301
307
  ]
@@ -399,8 +405,11 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
399
405
  style={
400
406
  [
401
407
  {
408
+ "alignItems": "center",
409
+ "justifyContent": "center",
402
410
  "paddingHorizontal": 8,
403
411
  "paddingVertical": 4,
412
+ "position": "relative",
404
413
  },
405
414
  undefined,
406
415
  ]
@@ -531,8 +540,11 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
531
540
  style={
532
541
  [
533
542
  {
543
+ "alignItems": "center",
544
+ "justifyContent": "center",
534
545
  "paddingHorizontal": 8,
535
546
  "paddingVertical": 4,
547
+ "position": "relative",
536
548
  },
537
549
  undefined,
538
550
  ]
@@ -647,3 +659,611 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
647
659
  />
648
660
  </View>
649
661
  `;
662
+
663
+ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
664
+ <View
665
+ style={
666
+ {
667
+ "flex": 1,
668
+ }
669
+ }
670
+ >
671
+ <RNCSafeAreaProvider
672
+ onInsetsChange={[Function]}
673
+ style={
674
+ [
675
+ {
676
+ "flex": 1,
677
+ },
678
+ undefined,
679
+ ]
680
+ }
681
+ >
682
+ <View
683
+ style={
684
+ [
685
+ {
686
+ "paddingHorizontal": 0,
687
+ },
688
+ undefined,
689
+ ]
690
+ }
691
+ themeInsets={
692
+ {
693
+ "bottom": 0,
694
+ "left": 0,
695
+ "right": 0,
696
+ "top": 0,
697
+ }
698
+ }
699
+ >
700
+ <RCTScrollView
701
+ contentContainerStyle={
702
+ {
703
+ "borderBottomColor": "#e8e9ea",
704
+ "borderBottomWidth": 2,
705
+ "paddingHorizontal": 8,
706
+ }
707
+ }
708
+ data={
709
+ [
710
+ {
711
+ "activeItem": "Work",
712
+ "component": <Text>
713
+ Work Screen
714
+ </Text>,
715
+ "key": "work",
716
+ },
717
+ {
718
+ "activeItem": "speaker",
719
+ "component": <Text>
720
+ Personal Screen
721
+ </Text>,
722
+ "inactiveItem": "speaker-outlined",
723
+ "key": "personal",
724
+ },
725
+ {
726
+ "activeItem": "home",
727
+ "badge": {
728
+ "type": "status",
729
+ },
730
+ "component": <Text>
731
+ Home Screen
732
+ </Text>,
733
+ "inactiveItem": "home-outlined",
734
+ "key": "home",
735
+ },
736
+ {
737
+ "activeItem": "calendar",
738
+ "badge": {
739
+ "type": "counter",
740
+ "value": 50,
741
+ },
742
+ "component": <Text>
743
+ Calendar Screen
744
+ </Text>,
745
+ "inactiveItem": "calendar-dates-outlined",
746
+ "key": "calendar",
747
+ },
748
+ ]
749
+ }
750
+ getItem={[Function]}
751
+ getItemCount={[Function]}
752
+ horizontal={true}
753
+ keyExtractor={[Function]}
754
+ onContentSizeChange={[Function]}
755
+ onLayout={[Function]}
756
+ onMomentumScrollBegin={[Function]}
757
+ onMomentumScrollEnd={[Function]}
758
+ onScroll={[Function]}
759
+ onScrollBeginDrag={[Function]}
760
+ onScrollEndDrag={[Function]}
761
+ onScrollToIndexFailed={[Function]}
762
+ removeClippedSubviews={false}
763
+ renderItem={[Function]}
764
+ scrollEventThrottle={50}
765
+ showsHorizontalScrollIndicator={false}
766
+ stickyHeaderIndices={[]}
767
+ viewabilityConfigCallbackPairs={[]}
768
+ >
769
+ <View>
770
+ <View
771
+ onFocusCapture={[Function]}
772
+ onLayout={[Function]}
773
+ style={
774
+ [
775
+ {
776
+ "flexDirection": "row",
777
+ },
778
+ null,
779
+ ]
780
+ }
781
+ >
782
+ <View
783
+ accessibilityState={
784
+ {
785
+ "busy": undefined,
786
+ "checked": undefined,
787
+ "disabled": undefined,
788
+ "expanded": undefined,
789
+ "selected": undefined,
790
+ }
791
+ }
792
+ accessible={true}
793
+ collapsable={false}
794
+ focusable={true}
795
+ isFirstItem={true}
796
+ onClick={[Function]}
797
+ onResponderGrant={[Function]}
798
+ onResponderMove={[Function]}
799
+ onResponderRelease={[Function]}
800
+ onResponderTerminate={[Function]}
801
+ onResponderTerminationRequest={[Function]}
802
+ onStartShouldSetResponder={[Function]}
803
+ style={
804
+ {
805
+ "marginLeft": 0,
806
+ "paddingVertical": 8,
807
+ }
808
+ }
809
+ >
810
+ <View
811
+ style={
812
+ [
813
+ {
814
+ "alignItems": "center",
815
+ "justifyContent": "center",
816
+ "paddingHorizontal": 8,
817
+ "paddingVertical": 4,
818
+ "position": "relative",
819
+ },
820
+ undefined,
821
+ ]
822
+ }
823
+ >
824
+ <View>
825
+ <Text
826
+ allowFontScaling={false}
827
+ numberOfLines={1}
828
+ style={
829
+ [
830
+ {
831
+ "color": "#001f23",
832
+ "fontFamily": "BeVietnamPro-SemiBold",
833
+ "fontSize": 16,
834
+ "letterSpacing": 0.24,
835
+ "lineHeight": 24,
836
+ },
837
+ {
838
+ "color": "#001f23",
839
+ },
840
+ ]
841
+ }
842
+ themeIntent="body"
843
+ themeTypeface="neutral"
844
+ themeVariant="regular-bold"
845
+ >
846
+ Work
847
+ </Text>
848
+ </View>
849
+ </View>
850
+ <View
851
+ collapsable={false}
852
+ style={
853
+ {
854
+ "backgroundColor": "#401960",
855
+ "bottom": -2,
856
+ "height": 2,
857
+ "opacity": 1,
858
+ "position": "absolute",
859
+ "transform": [
860
+ {
861
+ "translateX": 0,
862
+ },
863
+ ],
864
+ "width": "100%",
865
+ "zIndex": 999,
866
+ }
867
+ }
868
+ />
869
+ </View>
870
+ </View>
871
+ <View
872
+ onFocusCapture={[Function]}
873
+ onLayout={[Function]}
874
+ style={
875
+ [
876
+ {
877
+ "flexDirection": "row",
878
+ },
879
+ null,
880
+ ]
881
+ }
882
+ >
883
+ <View
884
+ accessibilityState={
885
+ {
886
+ "busy": undefined,
887
+ "checked": undefined,
888
+ "disabled": undefined,
889
+ "expanded": undefined,
890
+ "selected": undefined,
891
+ }
892
+ }
893
+ accessible={true}
894
+ collapsable={false}
895
+ focusable={true}
896
+ isFirstItem={false}
897
+ onClick={[Function]}
898
+ onResponderGrant={[Function]}
899
+ onResponderMove={[Function]}
900
+ onResponderRelease={[Function]}
901
+ onResponderTerminate={[Function]}
902
+ onResponderTerminationRequest={[Function]}
903
+ onStartShouldSetResponder={[Function]}
904
+ style={
905
+ {
906
+ "marginLeft": 12,
907
+ "paddingVertical": 8,
908
+ }
909
+ }
910
+ >
911
+ <View
912
+ style={
913
+ [
914
+ {
915
+ "alignItems": "center",
916
+ "justifyContent": "center",
917
+ "paddingHorizontal": 8,
918
+ "paddingVertical": 4,
919
+ "position": "relative",
920
+ },
921
+ undefined,
922
+ ]
923
+ }
924
+ >
925
+ <View>
926
+ <HeroIcon
927
+ name="speaker-outlined"
928
+ style={
929
+ [
930
+ {
931
+ "color": "#001f23",
932
+ "fontSize": 20,
933
+ },
934
+ {
935
+ "color": "#001f23",
936
+ },
937
+ ]
938
+ }
939
+ testID="hero-icon-speaker-outlined"
940
+ themeIntent="text"
941
+ themeSize="small"
942
+ />
943
+ </View>
944
+ </View>
945
+ <View
946
+ collapsable={false}
947
+ style={
948
+ {
949
+ "backgroundColor": "#401960",
950
+ "bottom": -2,
951
+ "height": 2,
952
+ "opacity": 0,
953
+ "position": "absolute",
954
+ "transform": [
955
+ {
956
+ "translateX": 0,
957
+ },
958
+ ],
959
+ "width": "100%",
960
+ "zIndex": 999,
961
+ }
962
+ }
963
+ />
964
+ </View>
965
+ </View>
966
+ <View
967
+ onFocusCapture={[Function]}
968
+ onLayout={[Function]}
969
+ style={
970
+ [
971
+ {
972
+ "flexDirection": "row",
973
+ },
974
+ null,
975
+ ]
976
+ }
977
+ >
978
+ <View
979
+ accessibilityState={
980
+ {
981
+ "busy": undefined,
982
+ "checked": undefined,
983
+ "disabled": undefined,
984
+ "expanded": undefined,
985
+ "selected": undefined,
986
+ }
987
+ }
988
+ accessible={true}
989
+ collapsable={false}
990
+ focusable={true}
991
+ isFirstItem={false}
992
+ onClick={[Function]}
993
+ onResponderGrant={[Function]}
994
+ onResponderMove={[Function]}
995
+ onResponderRelease={[Function]}
996
+ onResponderTerminate={[Function]}
997
+ onResponderTerminationRequest={[Function]}
998
+ onStartShouldSetResponder={[Function]}
999
+ style={
1000
+ {
1001
+ "marginLeft": 12,
1002
+ "paddingVertical": 8,
1003
+ }
1004
+ }
1005
+ >
1006
+ <View
1007
+ style={
1008
+ [
1009
+ {
1010
+ "alignItems": "center",
1011
+ "justifyContent": "center",
1012
+ "paddingHorizontal": 8,
1013
+ "paddingVertical": 4,
1014
+ "position": "relative",
1015
+ },
1016
+ undefined,
1017
+ ]
1018
+ }
1019
+ >
1020
+ <View
1021
+ style={
1022
+ {
1023
+ "paddingHorizontal": 4,
1024
+ }
1025
+ }
1026
+ >
1027
+ <HeroIcon
1028
+ name="home-outlined"
1029
+ style={
1030
+ [
1031
+ {
1032
+ "color": "#001f23",
1033
+ "fontSize": 20,
1034
+ },
1035
+ {
1036
+ "color": "#001f23",
1037
+ },
1038
+ ]
1039
+ }
1040
+ testID="hero-icon-home-outlined"
1041
+ themeIntent="text"
1042
+ themeSize="small"
1043
+ />
1044
+ <View
1045
+ collapsable={false}
1046
+ style={
1047
+ {
1048
+ "backgroundColor": "#cb300a",
1049
+ "borderRadius": 999,
1050
+ "height": 8,
1051
+ "opacity": 1,
1052
+ "position": "absolute",
1053
+ "right": -2,
1054
+ "top": -2,
1055
+ "transform": [
1056
+ {
1057
+ "scale": 1,
1058
+ },
1059
+ ],
1060
+ "width": 8,
1061
+ }
1062
+ }
1063
+ themeIntent="danger"
1064
+ />
1065
+ </View>
1066
+ </View>
1067
+ <View
1068
+ collapsable={false}
1069
+ style={
1070
+ {
1071
+ "backgroundColor": "#401960",
1072
+ "bottom": -2,
1073
+ "height": 2,
1074
+ "opacity": 0,
1075
+ "position": "absolute",
1076
+ "transform": [
1077
+ {
1078
+ "translateX": 0,
1079
+ },
1080
+ ],
1081
+ "width": "100%",
1082
+ "zIndex": 999,
1083
+ }
1084
+ }
1085
+ />
1086
+ </View>
1087
+ </View>
1088
+ <View
1089
+ onFocusCapture={[Function]}
1090
+ onLayout={[Function]}
1091
+ style={
1092
+ [
1093
+ {
1094
+ "flexDirection": "row",
1095
+ },
1096
+ null,
1097
+ ]
1098
+ }
1099
+ >
1100
+ <View
1101
+ accessibilityState={
1102
+ {
1103
+ "busy": undefined,
1104
+ "checked": undefined,
1105
+ "disabled": undefined,
1106
+ "expanded": undefined,
1107
+ "selected": undefined,
1108
+ }
1109
+ }
1110
+ accessible={true}
1111
+ collapsable={false}
1112
+ focusable={true}
1113
+ isFirstItem={false}
1114
+ onClick={[Function]}
1115
+ onResponderGrant={[Function]}
1116
+ onResponderMove={[Function]}
1117
+ onResponderRelease={[Function]}
1118
+ onResponderTerminate={[Function]}
1119
+ onResponderTerminationRequest={[Function]}
1120
+ onStartShouldSetResponder={[Function]}
1121
+ style={
1122
+ {
1123
+ "marginLeft": 12,
1124
+ "paddingVertical": 8,
1125
+ }
1126
+ }
1127
+ >
1128
+ <View
1129
+ style={
1130
+ [
1131
+ {
1132
+ "alignItems": "center",
1133
+ "justifyContent": "center",
1134
+ "paddingHorizontal": 8,
1135
+ "paddingVertical": 4,
1136
+ "position": "relative",
1137
+ },
1138
+ undefined,
1139
+ ]
1140
+ }
1141
+ >
1142
+ <View
1143
+ style={
1144
+ [
1145
+ {
1146
+ "alignItems": "center",
1147
+ "flexDirection": "row",
1148
+ },
1149
+ undefined,
1150
+ ]
1151
+ }
1152
+ >
1153
+ <HeroIcon
1154
+ name="calendar-dates-outlined"
1155
+ style={
1156
+ [
1157
+ {
1158
+ "color": "#001f23",
1159
+ "fontSize": 20,
1160
+ },
1161
+ {
1162
+ "color": "#001f23",
1163
+ },
1164
+ ]
1165
+ }
1166
+ testID="hero-icon-calendar-dates-outlined"
1167
+ themeIntent="text"
1168
+ themeSize="small"
1169
+ />
1170
+ <View
1171
+ collapsable={false}
1172
+ style={
1173
+ {
1174
+ "alignItems": "center",
1175
+ "backgroundColor": "#355bfb",
1176
+ "borderRadius": 999,
1177
+ "height": 20,
1178
+ "justifyContent": "center",
1179
+ "marginLeft": 4,
1180
+ "minWidth": 20,
1181
+ "opacity": 1,
1182
+ "paddingHorizontal": 8,
1183
+ "transform": [
1184
+ {
1185
+ "scale": 1,
1186
+ },
1187
+ ],
1188
+ }
1189
+ }
1190
+ themeIntent="info"
1191
+ themePadding="wideContent"
1192
+ >
1193
+ <Text
1194
+ allowFontScaling={false}
1195
+ style={
1196
+ [
1197
+ {
1198
+ "color": "#001f23",
1199
+ "fontFamily": "BeVietnamPro-Regular",
1200
+ "fontSize": 12,
1201
+ "letterSpacing": 0.36,
1202
+ "lineHeight": 16,
1203
+ },
1204
+ [
1205
+ {
1206
+ "color": "#ffffff",
1207
+ "includeFontPadding": false,
1208
+ "textAlign": "center",
1209
+ "textAlignVertical": "center",
1210
+ },
1211
+ undefined,
1212
+ ],
1213
+ ]
1214
+ }
1215
+ themeFontWeight="regular"
1216
+ themeIntent="body"
1217
+ >
1218
+ 50
1219
+ </Text>
1220
+ </View>
1221
+ </View>
1222
+ </View>
1223
+ <View
1224
+ collapsable={false}
1225
+ style={
1226
+ {
1227
+ "backgroundColor": "#401960",
1228
+ "bottom": -2,
1229
+ "height": 2,
1230
+ "opacity": 0,
1231
+ "position": "absolute",
1232
+ "transform": [
1233
+ {
1234
+ "translateX": 0,
1235
+ },
1236
+ ],
1237
+ "width": "100%",
1238
+ "zIndex": 999,
1239
+ }
1240
+ }
1241
+ />
1242
+ </View>
1243
+ </View>
1244
+ </View>
1245
+ </RCTScrollView>
1246
+ </View>
1247
+ </RNCSafeAreaProvider>
1248
+ <View
1249
+ pointerEvents="box-none"
1250
+ position="bottom"
1251
+ style={
1252
+ [
1253
+ {
1254
+ "bottom": 0,
1255
+ "elevation": 9999,
1256
+ "flexDirection": "column-reverse",
1257
+ "left": 0,
1258
+ "paddingHorizontal": 24,
1259
+ "paddingVertical": 16,
1260
+ "position": "absolute",
1261
+ "right": 0,
1262
+ "top": 0,
1263
+ },
1264
+ undefined,
1265
+ ]
1266
+ }
1267
+ />
1268
+ </View>
1269
+ `;