@hero-design/rn 8.58.0 → 8.60.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 (22) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +12 -0
  3. package/es/index.js +185 -104
  4. package/lib/index.js +185 -104
  5. package/package.json +1 -1
  6. package/src/components/AnimatedScroller/AnimatedFAB.tsx +99 -49
  7. package/src/components/AnimatedScroller/AnimatedScrollable.tsx +18 -3
  8. package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx +30 -9
  9. package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap +474 -447
  10. package/src/components/Carousel/CarouselItem.tsx +11 -7
  11. package/src/components/Carousel/types.ts +1 -1
  12. package/src/components/FAB/ActionGroup/ActionItem.tsx +3 -1
  13. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +216 -211
  14. package/src/components/FAB/ActionGroup/index.tsx +34 -28
  15. package/src/components/FAB/FAB.tsx +102 -41
  16. package/src/components/FAB/StyledFAB.tsx +10 -8
  17. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +34 -38
  18. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +191 -170
  19. package/types/components/AnimatedScroller/AnimatedFAB.d.ts +3 -1
  20. package/types/components/AnimatedScroller/AnimatedScrollable.d.ts +1 -1
  21. package/types/components/Carousel/types.d.ts +1 -1
  22. package/types/components/FAB/StyledFAB.d.ts +4 -6
package/src/components/Carousel/CarouselItem.tsx CHANGED
@@ -1,13 +1,13 @@
1
- import React from 'react';
2
1
  import { useTheme } from '@emotion/react';
2
+ import React from 'react';
3
+ import Box from '../Box';
4
+ import Typography from '../Typography';
3
5
  import {
4
6
  StyledCarouselContentWrapper,
5
7
  StyledCarouselHeading,
6
8
  StyledCarouselImage,
7
9
  StyledCustomSizeCarouselImage,
8
10
  } from './StyledCarousel';
9
- import Box from '../Box';
10
- import Typography from '../Typography';
11
11
  import { CarouselData, CarouselImageProps } from './types';
12
12
 
13
13
  interface CarouselItemProps extends Omit<CarouselData, 'background'> {
@@ -60,10 +60,14 @@ const CarouselItem = ({
60
60
 
61
61
  <StyledCarouselContentWrapper paddingHorizontal="medium" width={width}>
62
62
  {content}
63
- <StyledCarouselHeading level="h1" typeface="playful">
64
- {heading}
65
- </StyledCarouselHeading>
66
- {body ? <Typography.Body>{body}</Typography.Body> : null}
63
+
64
+ {!!heading && (
65
+ <StyledCarouselHeading level="h1" typeface="playful">
66
+ {heading}
67
+ </StyledCarouselHeading>
68
+ )}
69
+
70
+ {!!body && <Typography.Body>{body}</Typography.Body>}
67
71
  </StyledCarouselContentWrapper>
68
72
  </Box>
69
73
  );
package/src/components/Carousel/types.ts CHANGED
@@ -10,7 +10,7 @@ export type CarouselImageProps = ImageSourcePropType & {
10
10
  export type CarouselData = {
11
11
  image?: CarouselImageProps | string;
12
12
  content?: ReactNode;
13
- heading: string;
13
+ heading?: string;
14
14
  body?: string;
15
15
  background: string;
16
16
  };
package/src/components/FAB/ActionGroup/ActionItem.tsx CHANGED
@@ -50,7 +50,9 @@ const ActionItem = ({
50
50
  Animated.spring(animatedValue.current, {
51
51
  toValue: active ? 1 : 0,
52
52
  useNativeDriver: Platform.OS !== 'web',
53
- delay: index * 20,
53
+ delay: index * 30,
54
+ speed: 10,
55
+ bounciness: 10,
54
56
  }).start();
55
57
  }, [active, index]);
56
58
 
package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -27,11 +27,7 @@ exports[`ActionGroup has active false 1`] = `
27
27
  >
28
28
  <View
29
29
  collapsable={false}
30
- style={
31
- {
32
- "opacity": 1,
33
- }
34
- }
30
+ style={{}}
35
31
  >
36
32
  <View
37
33
  accessibilityValue={
@@ -53,69 +49,99 @@ exports[`ActionGroup has active false 1`] = `
53
49
  onResponderTerminationRequest={[Function]}
54
50
  onStartShouldSetResponder={[Function]}
55
51
  style={
56
- [
57
- {
58
- "alignItems": "center",
59
- "alignSelf": "flex-start",
60
- "backgroundColor": "#401960",
61
- "borderRadius": 999,
62
- "elevation": 3,
63
- "flexDirection": "row",
64
- "justifyContent": "center",
65
- "padding": 20,
66
- "shadowColor": "#001f23",
67
- "shadowOffset": {
68
- "height": 2,
69
- "width": 0,
70
- },
71
- "shadowOpacity": 0.12,
72
- "shadowRadius": 4,
52
+ {
53
+ "alignItems": "center",
54
+ "alignSelf": "flex-end",
55
+ "backgroundColor": "#401960",
56
+ "borderRadius": 999,
57
+ "bottom": undefined,
58
+ "elevation": 3,
59
+ "flexDirection": "row",
60
+ "height": 64,
61
+ "justifyContent": "center",
62
+ "marginRight": 24,
63
+ "marginTop": 24,
64
+ "padding": 20,
65
+ "shadowColor": "#001f23",
66
+ "shadowOffset": {
67
+ "height": 2,
68
+ "width": 0,
73
69
  },
74
- [
75
- [
76
- {
77
- "alignSelf": "flex-end",
78
- "marginRight": 24,
79
- "marginTop": 24,
80
- },
81
- undefined,
82
- ],
70
+ "shadowOpacity": 0.12,
71
+ "shadowRadius": 4,
72
+ "transform": [
83
73
  {
84
- "bottom": undefined,
74
+ "translateY": 0,
85
75
  },
86
76
  ],
87
- ]
77
+ }
88
78
  }
89
79
  testID="fab"
90
80
  >
91
81
  <View
82
+ collapsable={false}
92
83
  style={
93
- [
94
- {},
95
- [
96
- {
97
- "alignItems": "center",
98
- "height": 24,
99
- "justifyContent": "center",
100
- "width": 24,
101
- },
102
- undefined,
103
- ],
104
- ]
84
+ {
85
+ "flexDirection": "row",
86
+ "opacity": 1,
87
+ }
105
88
  }
106
89
  >
107
- <HeroIcon
108
- name="add"
90
+ <View
91
+ style={
92
+ [
93
+ {},
94
+ [
95
+ {
96
+ "alignItems": "center",
97
+ "height": 24,
98
+ "justifyContent": "center",
99
+ "width": 24,
100
+ },
101
+ undefined,
102
+ ],
103
+ ]
104
+ }
105
+ >
106
+ <HeroIcon
107
+ name="add"
108
+ style={
109
+ [
110
+ {
111
+ "color": "#001f23",
112
+ "fontSize": 16,
113
+ },
114
+ [
115
+ {
116
+ "color": "#ffffff",
117
+ "lineHeight": 24,
118
+ "textAlign": "center",
119
+ "textAlignVertical": "center",
120
+ },
121
+ undefined,
122
+ ],
123
+ ]
124
+ }
125
+ testID="styled-fab-icon"
126
+ themeIntent="text"
127
+ themeSize="xsmall"
128
+ />
129
+ </View>
130
+ <Text
131
+ allowFontScaling={false}
109
132
  style={
110
133
  [
111
134
  {
112
135
  "color": "#001f23",
136
+ "fontFamily": "BeVietnamPro-Regular",
113
137
  "fontSize": 16,
138
+ "letterSpacing": 0.48,
139
+ "lineHeight": 24,
114
140
  },
115
141
  [
116
142
  {
117
143
  "color": "#ffffff",
118
- "lineHeight": 24,
144
+ "marginHorizontal": 8,
119
145
  "textAlign": "center",
120
146
  "textAlignVertical": "center",
121
147
  },
@@ -123,39 +149,13 @@ exports[`ActionGroup has active false 1`] = `
123
149
  ],
124
150
  ]
125
151
  }
126
- testID="styled-fab-icon"
127
- themeIntent="text"
128
- themeSize="xsmall"
129
- />
152
+ themeIntent="body"
153
+ themeTypeface="neutral"
154
+ themeVariant="regular"
155
+ >
156
+ Shout out
157
+ </Text>
130
158
  </View>
131
- <Text
132
- allowFontScaling={false}
133
- style={
134
- [
135
- {
136
- "color": "#001f23",
137
- "fontFamily": "BeVietnamPro-Regular",
138
- "fontSize": 16,
139
- "letterSpacing": 0.48,
140
- "lineHeight": 24,
141
- },
142
- [
143
- {
144
- "color": "#ffffff",
145
- "marginHorizontal": 8,
146
- "textAlign": "center",
147
- "textAlignVertical": "center",
148
- },
149
- undefined,
150
- ],
151
- ]
152
- }
153
- themeIntent="body"
154
- themeTypeface="neutral"
155
- themeVariant="regular"
156
- >
157
- Shout out
158
- </Text>
159
159
  </View>
160
160
  </View>
161
161
  <Modal
@@ -216,11 +216,7 @@ exports[`ActionGroup has active true 1`] = `
216
216
  >
217
217
  <View
218
218
  collapsable={false}
219
- style={
220
- {
221
- "opacity": 0,
222
- }
223
- }
219
+ style={{}}
224
220
  >
225
221
  <View
226
222
  accessibilityValue={
@@ -242,92 +238,96 @@ exports[`ActionGroup has active true 1`] = `
242
238
  onResponderTerminationRequest={[Function]}
243
239
  onStartShouldSetResponder={[Function]}
244
240
  style={
245
- [
246
- {
247
- "alignItems": "center",
248
- "alignSelf": "flex-start",
249
- "backgroundColor": "#33144d",
250
- "borderRadius": 999,
251
- "elevation": 3,
252
- "flexDirection": "row",
253
- "justifyContent": "center",
254
- "padding": 20,
255
- "shadowColor": "#001f23",
256
- "shadowOffset": {
257
- "height": 2,
258
- "width": 0,
259
- },
260
- "shadowOpacity": 0.12,
261
- "shadowRadius": 4,
241
+ {
242
+ "alignItems": "center",
243
+ "alignSelf": "flex-end",
244
+ "backgroundColor": "#33144d",
245
+ "borderRadius": 999,
246
+ "bottom": undefined,
247
+ "elevation": 3,
248
+ "flexDirection": "row",
249
+ "height": 64,
250
+ "justifyContent": "center",
251
+ "marginRight": 24,
252
+ "marginTop": 24,
253
+ "padding": 20,
254
+ "shadowColor": "#001f23",
255
+ "shadowOffset": {
256
+ "height": 2,
257
+ "width": 0,
262
258
  },
263
- [
264
- [
265
- {
266
- "alignSelf": "flex-end",
267
- "marginRight": 24,
268
- "marginTop": 24,
269
- },
270
- undefined,
271
- ],
259
+ "shadowOpacity": 0.12,
260
+ "shadowRadius": 4,
261
+ "transform": [
272
262
  {
273
- "bottom": undefined,
263
+ "translateY": 0,
274
264
  },
275
265
  ],
276
- ]
266
+ }
277
267
  }
278
268
  testID="fab"
279
269
  >
280
270
  <View
271
+ collapsable={false}
281
272
  style={
282
- [
283
- {},
284
- [
285
- {
286
- "alignItems": "center",
287
- "height": 24,
288
- "justifyContent": "center",
289
- "width": 24,
290
- },
291
- undefined,
292
- ],
293
- ]
273
+ {
274
+ "flexDirection": "row",
275
+ "opacity": 1,
276
+ }
294
277
  }
295
278
  >
296
279
  <View
297
- collapsable={false}
298
280
  style={
299
- {
300
- "transform": [
281
+ [
282
+ {},
283
+ [
301
284
  {
302
- "rotate": "-45deg",
285
+ "alignItems": "center",
286
+ "height": 24,
287
+ "justifyContent": "center",
288
+ "width": 24,
303
289
  },
290
+ undefined,
304
291
  ],
305
- }
292
+ ]
306
293
  }
307
294
  >
308
- <HeroIcon
309
- name="add"
295
+ <View
296
+ collapsable={false}
310
297
  style={
311
- [
312
- {
313
- "color": "#001f23",
314
- "fontSize": 16,
315
- },
316
- [
298
+ {
299
+ "transform": [
317
300
  {
318
- "color": "#ffffff",
319
- "lineHeight": 24,
320
- "textAlign": "center",
321
- "textAlignVertical": "center",
301
+ "rotate": "-45deg",
322
302
  },
323
- {},
324
303
  ],
325
- ]
304
+ }
326
305
  }
327
- testID="animated-fab-icon"
328
- themeIntent="text"
329
- themeSize="xsmall"
330
- />
306
+ >
307
+ <HeroIcon
308
+ name="add"
309
+ style={
310
+ [
311
+ {
312
+ "color": "#001f23",
313
+ "fontSize": 16,
314
+ },
315
+ [
316
+ {
317
+ "color": "#ffffff",
318
+ "lineHeight": 24,
319
+ "textAlign": "center",
320
+ "textAlignVertical": "center",
321
+ },
322
+ {},
323
+ ],
324
+ ]
325
+ }
326
+ testID="animated-fab-icon"
327
+ themeIntent="text"
328
+ themeSize="xsmall"
329
+ />
330
+ </View>
331
331
  </View>
332
332
  </View>
333
333
  </View>
@@ -1003,92 +1003,97 @@ exports[`ActionGroup has active true 1`] = `
1003
1003
  onResponderTerminationRequest={[Function]}
1004
1004
  onStartShouldSetResponder={[Function]}
1005
1005
  style={
1006
- [
1007
- {
1008
- "alignItems": "center",
1009
- "alignSelf": "flex-start",
1010
- "backgroundColor": "#33144d",
1011
- "borderRadius": 999,
1012
- "elevation": 3,
1013
- "flexDirection": "row",
1014
- "justifyContent": "center",
1015
- "padding": 20,
1016
- "shadowColor": "#001f23",
1017
- "shadowOffset": {
1018
- "height": 2,
1019
- "width": 0,
1020
- },
1021
- "shadowOpacity": 0.12,
1022
- "shadowRadius": 4,
1006
+ {
1007
+ "alignItems": "center",
1008
+ "alignSelf": "flex-end",
1009
+ "backgroundColor": "#33144d",
1010
+ "borderRadius": 999,
1011
+ "bottom": undefined,
1012
+ "elevation": 3,
1013
+ "flexDirection": "row",
1014
+ "height": 64,
1015
+ "justifyContent": "center",
1016
+ "marginBottom": -2,
1017
+ "marginRight": 24,
1018
+ "marginTop": 24,
1019
+ "padding": 20,
1020
+ "shadowColor": "#001f23",
1021
+ "shadowOffset": {
1022
+ "height": 2,
1023
+ "width": 0,
1023
1024
  },
1024
- [
1025
- [
1026
- {
1027
- "alignSelf": "flex-end",
1028
- "marginRight": 24,
1029
- "marginTop": 24,
1030
- },
1031
- undefined,
1032
- ],
1025
+ "shadowOpacity": 0.12,
1026
+ "shadowRadius": 4,
1027
+ "transform": [
1033
1028
  {
1034
- "bottom": undefined,
1029
+ "translateY": 0,
1035
1030
  },
1036
1031
  ],
1037
- ]
1032
+ }
1038
1033
  }
1039
1034
  testID="fab-in-portal"
1040
1035
  >
1041
1036
  <View
1037
+ collapsable={false}
1042
1038
  style={
1043
- [
1044
- {},
1045
- [
1046
- {
1047
- "alignItems": "center",
1048
- "height": 24,
1049
- "justifyContent": "center",
1050
- "width": 24,
1051
- },
1052
- undefined,
1053
- ],
1054
- ]
1039
+ {
1040
+ "flexDirection": "row",
1041
+ "opacity": 1,
1042
+ }
1055
1043
  }
1056
1044
  >
1057
1045
  <View
1058
- collapsable={false}
1059
1046
  style={
1060
- {
1061
- "transform": [
1047
+ [
1048
+ {},
1049
+ [
1062
1050
  {
1063
- "rotate": "-45deg",
1051
+ "alignItems": "center",
1052
+ "height": 24,
1053
+ "justifyContent": "center",
1054
+ "width": 24,
1064
1055
  },
1056
+ undefined,
1065
1057
  ],
1066
- }
1058
+ ]
1067
1059
  }
1068
1060
  >
1069
- <HeroIcon
1070
- name="add"
1061
+ <View
1062
+ collapsable={false}
1071
1063
  style={
1072
- [
1073
- {
1074
- "color": "#001f23",
1075
- "fontSize": 16,
1076
- },
1077
- [
1064
+ {
1065
+ "transform": [
1078
1066
  {
1079
- "color": "#ffffff",
1080
- "lineHeight": 24,
1081
- "textAlign": "center",
1082
- "textAlignVertical": "center",
1067
+ "rotate": "-45deg",
1083
1068
  },
1084
- {},
1085
1069
  ],
1086
- ]
1070
+ }
1087
1071
  }
1088
- testID="animated-fab-icon"
1089
- themeIntent="text"
1090
- themeSize="xsmall"
1091
- />
1072
+ >
1073
+ <HeroIcon
1074
+ name="add"
1075
+ style={
1076
+ [
1077
+ {
1078
+ "color": "#001f23",
1079
+ "fontSize": 16,
1080
+ },
1081
+ [
1082
+ {
1083
+ "color": "#ffffff",
1084
+ "lineHeight": 24,
1085
+ "textAlign": "center",
1086
+ "textAlignVertical": "center",
1087
+ },
1088
+ {},
1089
+ ],
1090
+ ]
1091
+ }
1092
+ testID="animated-fab-icon"
1093
+ themeIntent="text"
1094
+ themeSize="xsmall"
1095
+ />
1096
+ </View>
1092
1097
  </View>
1093
1098
  </View>
1094
1099
  </View>