@hero-design/rn 8.21.0 → 8.22.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 (19) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/es/index.js +95 -31
  3. package/lib/index.js +95 -31
  4. package/package.json +5 -5
  5. package/src/components/Carousel/StyledCarousel.tsx +1 -2
  6. package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap +6 -12
  7. package/src/components/Carousel/index.tsx +1 -1
  8. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +180 -138
  9. package/src/components/FAB/FAB.tsx +17 -12
  10. package/src/components/FAB/StyledFAB.tsx +13 -4
  11. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +13 -21
  12. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +214 -151
  13. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +10 -0
  14. package/src/theme/components/fab.ts +18 -1
  15. package/src/theme/global/colors/__tests__/__snapshots__/globalDark.spec.ts.snap +19 -19
  16. package/src/theme/global/colors/__tests__/__snapshots__/swagDark.spec.ts.snap +19 -19
  17. package/src/theme/global/colors/globalDark.ts +24 -24
  18. package/types/components/FAB/StyledFAB.d.ts +7 -3
  19. package/types/theme/components/fab.d.ts +10 -0
package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -156,6 +156,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
156
156
  Array [
157
157
  Object {
158
158
  "flex": 1,
159
+ "flexGrow": 2,
159
160
  "resizeMode": "contain",
160
161
  "width": "100%",
161
162
  },
@@ -175,7 +176,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
175
176
  },
176
177
  Array [
177
178
  Object {
178
- "minHeight": 250,
179
179
  "width": 750,
180
180
  },
181
181
  undefined,
@@ -275,6 +275,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
275
275
  Array [
276
276
  Object {
277
277
  "flex": 1,
278
+ "flexGrow": 2,
278
279
  "resizeMode": "contain",
279
280
  "width": "100%",
280
281
  },
@@ -294,7 +295,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
294
295
  },
295
296
  Array [
296
297
  Object {
297
- "minHeight": 250,
298
298
  "width": 750,
299
299
  },
300
300
  undefined,
@@ -437,7 +437,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
437
437
  },
438
438
  Array [
439
439
  Object {
440
- "minHeight": 250,
441
440
  "width": 750,
442
441
  },
443
442
  undefined,
@@ -561,7 +560,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
561
560
  },
562
561
  Array [
563
562
  Object {
564
- "minHeight": 250,
565
563
  "width": 750,
566
564
  },
567
565
  undefined,
@@ -992,6 +990,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
992
990
  Array [
993
991
  Object {
994
992
  "flex": 1,
993
+ "flexGrow": 2,
995
994
  "resizeMode": "contain",
996
995
  "width": "100%",
997
996
  },
@@ -1011,7 +1010,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1011
1010
  },
1012
1011
  Array [
1013
1012
  Object {
1014
- "minHeight": 250,
1015
1013
  "width": 750,
1016
1014
  },
1017
1015
  undefined,
@@ -1111,6 +1109,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1111
1109
  Array [
1112
1110
  Object {
1113
1111
  "flex": 1,
1112
+ "flexGrow": 2,
1114
1113
  "resizeMode": "contain",
1115
1114
  "width": "100%",
1116
1115
  },
@@ -1130,7 +1129,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1130
1129
  },
1131
1130
  Array [
1132
1131
  Object {
1133
- "minHeight": 250,
1134
1132
  "width": 750,
1135
1133
  },
1136
1134
  undefined,
@@ -1273,7 +1271,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1273
1271
  },
1274
1272
  Array [
1275
1273
  Object {
1276
- "minHeight": 250,
1277
1274
  "width": 750,
1278
1275
  },
1279
1276
  undefined,
@@ -1397,7 +1394,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1397
1394
  },
1398
1395
  Array [
1399
1396
  Object {
1400
- "minHeight": 250,
1401
1397
  "width": 750,
1402
1398
  },
1403
1399
  undefined,
@@ -1681,6 +1677,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
1681
1677
  Array [
1682
1678
  Object {
1683
1679
  "flex": 1,
1680
+ "flexGrow": 2,
1684
1681
  "resizeMode": "contain",
1685
1682
  "width": "100%",
1686
1683
  },
@@ -1700,7 +1697,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
1700
1697
  },
1701
1698
  Array [
1702
1699
  Object {
1703
- "minHeight": 250,
1704
1700
  "width": 750,
1705
1701
  },
1706
1702
  undefined,
@@ -1800,6 +1796,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
1800
1796
  Array [
1801
1797
  Object {
1802
1798
  "flex": 1,
1799
+ "flexGrow": 2,
1803
1800
  "resizeMode": "contain",
1804
1801
  "width": "100%",
1805
1802
  },
@@ -1819,7 +1816,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
1819
1816
  },
1820
1817
  Array [
1821
1818
  Object {
1822
- "minHeight": 250,
1823
1819
  "width": 750,
1824
1820
  },
1825
1821
  undefined,
@@ -1962,7 +1958,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
1962
1958
  },
1963
1959
  Array [
1964
1960
  Object {
1965
- "minHeight": 250,
1966
1961
  "width": 750,
1967
1962
  },
1968
1963
  undefined,
@@ -2086,7 +2081,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
2086
2081
  },
2087
2082
  Array [
2088
2083
  Object {
2089
- "minHeight": 250,
2090
2084
  "width": 750,
2091
2085
  },
2092
2086
  undefined,
package/src/components/Carousel/index.tsx CHANGED
@@ -94,7 +94,7 @@ const Carousel = ({
94
94
  );
95
95
  useDeprecation(
96
96
  `The use of 'pageControlPosition == bottom' has been deprecated`,
97
- pageControlPosition !== 'bottom'
97
+ pageControlPosition === 'bottom'
98
98
  );
99
99
  const carouselRef = useRef<FlatList>(null);
100
100
 
package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -494,95 +494,116 @@ exports[`ActionGroup has active false 1`] = `
494
494
  </View>
495
495
  </View>
496
496
  <View
497
- accessible={true}
498
- focusable={false}
499
- onClick={[Function]}
500
- onResponderGrant={[Function]}
501
- onResponderMove={[Function]}
502
- onResponderRelease={[Function]}
503
- onResponderTerminate={[Function]}
504
- onResponderTerminationRequest={[Function]}
505
- onStartShouldSetResponder={[Function]}
506
497
  style={
507
498
  Array [
508
- Object {
509
- "alignItems": "center",
510
- "alignSelf": "flex-start",
511
- "backgroundColor": "#401960",
512
- "borderRadius": 999,
513
- "flexDirection": "row",
514
- "justifyContent": "center",
515
- "overflow": "hidden",
516
- "paddingHorizontal": 16,
517
- "paddingVertical": 16,
518
- },
499
+ Object {},
519
500
  Array [
520
501
  Object {
521
- "alignSelf": "flex-end",
522
- "marginRight": 24,
523
- "marginTop": 24,
502
+ "shadowColor": "#001f23",
503
+ "shadowOffset": Object {
504
+ "height": 2,
505
+ "width": 0,
506
+ },
507
+ "shadowOpacity": 0.12,
508
+ "shadowRadius": 8,
524
509
  },
525
- undefined,
510
+ Array [
511
+ Object {
512
+ "alignSelf": "flex-end",
513
+ "marginRight": 24,
514
+ "marginTop": 24,
515
+ },
516
+ undefined,
517
+ ],
526
518
  ],
527
519
  ]
528
520
  }
529
521
  testID="fab"
530
522
  >
531
- <HeroIcon
532
- name="add"
523
+ <View
524
+ accessible={true}
525
+ focusable={false}
526
+ onClick={[Function]}
527
+ onResponderGrant={[Function]}
528
+ onResponderMove={[Function]}
529
+ onResponderRelease={[Function]}
530
+ onResponderTerminate={[Function]}
531
+ onResponderTerminationRequest={[Function]}
532
+ onStartShouldSetResponder={[Function]}
533
533
  style={
534
534
  Array [
535
535
  Object {
536
- "color": "#001f23",
537
- "fontSize": 16,
536
+ "alignItems": "center",
537
+ "alignSelf": "flex-start",
538
+ "backgroundColor": "#401960",
539
+ "borderRadius": 999,
540
+ "elevation": 2,
541
+ "flexDirection": "row",
542
+ "justifyContent": "center",
543
+ "overflow": "hidden",
544
+ "paddingHorizontal": 16,
545
+ "paddingVertical": 16,
538
546
  },
539
- Array [
540
- Object {
541
- "color": "#ffffff",
542
- "lineHeight": 24,
543
- "textAlign": "center",
544
- "textAlignVertical": "center",
545
- },
546
- undefined,
547
- ],
547
+ undefined,
548
548
  ]
549
549
  }
550
- testID="styled-fab-icon"
551
- themeIntent="text"
552
- themeSize="xsmall"
553
- />
554
- <Text
555
- allowFontScaling={false}
556
- style={
557
- Array [
558
- Object {
559
- "color": "#001f23",
560
- "fontFamily": "BeVietnamPro-Regular",
561
- "fontSize": 14,
562
- "letterSpacing": 0.42,
563
- "lineHeight": 22,
564
- },
550
+ >
551
+ <HeroIcon
552
+ name="add"
553
+ style={
565
554
  Array [
566
555
  Object {
567
- "color": "#ffffff",
568
- "fontFamily": "BeVietnamPro-SemiBold",
556
+ "color": "#001f23",
569
557
  "fontSize": 16,
570
- "lineHeight": 24,
571
- "marginHorizontal": 8,
572
- "textAlign": "center",
573
- "textAlignVertical": "center",
574
558
  },
575
- undefined,
576
- ],
577
- ]
578
- }
579
- themeFontSize="medium"
580
- themeFontWeight="regular"
581
- themeIntent="body"
582
- themeTypeface="neutral"
583
- >
584
- Shout out
585
- </Text>
559
+ Array [
560
+ Object {
561
+ "color": "#ffffff",
562
+ "lineHeight": 24,
563
+ "textAlign": "center",
564
+ "textAlignVertical": "center",
565
+ },
566
+ undefined,
567
+ ],
568
+ ]
569
+ }
570
+ testID="styled-fab-icon"
571
+ themeIntent="text"
572
+ themeSize="xsmall"
573
+ />
574
+ <Text
575
+ allowFontScaling={false}
576
+ style={
577
+ Array [
578
+ Object {
579
+ "color": "#001f23",
580
+ "fontFamily": "BeVietnamPro-Regular",
581
+ "fontSize": 14,
582
+ "letterSpacing": 0.42,
583
+ "lineHeight": 22,
584
+ },
585
+ Array [
586
+ Object {
587
+ "color": "#ffffff",
588
+ "fontFamily": "BeVietnamPro-SemiBold",
589
+ "fontSize": 16,
590
+ "lineHeight": 24,
591
+ "marginHorizontal": 8,
592
+ "textAlign": "center",
593
+ "textAlignVertical": "center",
594
+ },
595
+ undefined,
596
+ ],
597
+ ]
598
+ }
599
+ themeFontSize="medium"
600
+ themeFontWeight="regular"
601
+ themeIntent="body"
602
+ themeTypeface="neutral"
603
+ >
604
+ Shout out
605
+ </Text>
606
+ </View>
586
607
  </View>
587
608
  </View>
588
609
  `;
@@ -1081,95 +1102,116 @@ exports[`ActionGroup has active true 1`] = `
1081
1102
  </View>
1082
1103
  </View>
1083
1104
  <View
1084
- accessible={true}
1085
- focusable={false}
1086
- onClick={[Function]}
1087
- onResponderGrant={[Function]}
1088
- onResponderMove={[Function]}
1089
- onResponderRelease={[Function]}
1090
- onResponderTerminate={[Function]}
1091
- onResponderTerminationRequest={[Function]}
1092
- onStartShouldSetResponder={[Function]}
1093
1105
  style={
1094
1106
  Array [
1095
- Object {
1096
- "alignItems": "center",
1097
- "alignSelf": "flex-start",
1098
- "backgroundColor": "#401960",
1099
- "borderRadius": 999,
1100
- "flexDirection": "row",
1101
- "justifyContent": "center",
1102
- "overflow": "hidden",
1103
- "paddingHorizontal": 16,
1104
- "paddingVertical": 16,
1105
- },
1107
+ Object {},
1106
1108
  Array [
1107
1109
  Object {
1108
- "alignSelf": "flex-end",
1109
- "marginRight": 24,
1110
- "marginTop": 24,
1110
+ "shadowColor": "#001f23",
1111
+ "shadowOffset": Object {
1112
+ "height": 2,
1113
+ "width": 0,
1114
+ },
1115
+ "shadowOpacity": 0.12,
1116
+ "shadowRadius": 8,
1111
1117
  },
1112
- undefined,
1118
+ Array [
1119
+ Object {
1120
+ "alignSelf": "flex-end",
1121
+ "marginRight": 24,
1122
+ "marginTop": 24,
1123
+ },
1124
+ undefined,
1125
+ ],
1113
1126
  ],
1114
1127
  ]
1115
1128
  }
1116
1129
  testID="fab"
1117
1130
  >
1118
- <HeroIcon
1119
- name="add"
1131
+ <View
1132
+ accessible={true}
1133
+ focusable={false}
1134
+ onClick={[Function]}
1135
+ onResponderGrant={[Function]}
1136
+ onResponderMove={[Function]}
1137
+ onResponderRelease={[Function]}
1138
+ onResponderTerminate={[Function]}
1139
+ onResponderTerminationRequest={[Function]}
1140
+ onStartShouldSetResponder={[Function]}
1120
1141
  style={
1121
1142
  Array [
1122
1143
  Object {
1123
- "color": "#001f23",
1124
- "fontSize": 16,
1144
+ "alignItems": "center",
1145
+ "alignSelf": "flex-start",
1146
+ "backgroundColor": "#401960",
1147
+ "borderRadius": 999,
1148
+ "elevation": 2,
1149
+ "flexDirection": "row",
1150
+ "justifyContent": "center",
1151
+ "overflow": "hidden",
1152
+ "paddingHorizontal": 16,
1153
+ "paddingVertical": 16,
1125
1154
  },
1126
- Array [
1127
- Object {
1128
- "color": "#ffffff",
1129
- "lineHeight": 24,
1130
- "textAlign": "center",
1131
- "textAlignVertical": "center",
1132
- },
1133
- undefined,
1134
- ],
1155
+ undefined,
1135
1156
  ]
1136
1157
  }
1137
- testID="styled-fab-icon"
1138
- themeIntent="text"
1139
- themeSize="xsmall"
1140
- />
1141
- <Text
1142
- allowFontScaling={false}
1143
- style={
1144
- Array [
1145
- Object {
1146
- "color": "#001f23",
1147
- "fontFamily": "BeVietnamPro-Regular",
1148
- "fontSize": 14,
1149
- "letterSpacing": 0.42,
1150
- "lineHeight": 22,
1151
- },
1158
+ >
1159
+ <HeroIcon
1160
+ name="add"
1161
+ style={
1152
1162
  Array [
1153
1163
  Object {
1154
- "color": "#ffffff",
1155
- "fontFamily": "BeVietnamPro-SemiBold",
1164
+ "color": "#001f23",
1156
1165
  "fontSize": 16,
1157
- "lineHeight": 24,
1158
- "marginHorizontal": 8,
1159
- "textAlign": "center",
1160
- "textAlignVertical": "center",
1161
1166
  },
1162
- undefined,
1163
- ],
1164
- ]
1165
- }
1166
- themeFontSize="medium"
1167
- themeFontWeight="regular"
1168
- themeIntent="body"
1169
- themeTypeface="neutral"
1170
- >
1171
- Shout out
1172
- </Text>
1167
+ Array [
1168
+ Object {
1169
+ "color": "#ffffff",
1170
+ "lineHeight": 24,
1171
+ "textAlign": "center",
1172
+ "textAlignVertical": "center",
1173
+ },
1174
+ undefined,
1175
+ ],
1176
+ ]
1177
+ }
1178
+ testID="styled-fab-icon"
1179
+ themeIntent="text"
1180
+ themeSize="xsmall"
1181
+ />
1182
+ <Text
1183
+ allowFontScaling={false}
1184
+ style={
1185
+ Array [
1186
+ Object {
1187
+ "color": "#001f23",
1188
+ "fontFamily": "BeVietnamPro-Regular",
1189
+ "fontSize": 14,
1190
+ "letterSpacing": 0.42,
1191
+ "lineHeight": 22,
1192
+ },
1193
+ Array [
1194
+ Object {
1195
+ "color": "#ffffff",
1196
+ "fontFamily": "BeVietnamPro-SemiBold",
1197
+ "fontSize": 16,
1198
+ "lineHeight": 24,
1199
+ "marginHorizontal": 8,
1200
+ "textAlign": "center",
1201
+ "textAlignVertical": "center",
1202
+ },
1203
+ undefined,
1204
+ ],
1205
+ ]
1206
+ }
1207
+ themeFontSize="medium"
1208
+ themeFontWeight="regular"
1209
+ themeIntent="body"
1210
+ themeTypeface="neutral"
1211
+ >
1212
+ Shout out
1213
+ </Text>
1214
+ </View>
1173
1215
  </View>
1174
1216
  </View>
1175
1217
  `;
package/src/components/FAB/FAB.tsx CHANGED
@@ -1,7 +1,12 @@
1
1
  import React from 'react';
2
2
  import type { StyleProp, ViewStyle } from 'react-native';
3
3
  import { AnimatedFABIcon } from './AnimatedFABIcon';
4
- import { StyledFABContainer, StyledFABIcon, StyledFABText } from './StyledFAB';
4
+ import {
5
+ StyledFAB,
6
+ StyledFABIcon,
7
+ StyledFABText,
8
+ StyledFABContainer,
9
+ } from './StyledFAB';
5
10
  import type { IconName } from '../Icon';
6
11
  import { useTheme } from '../../theme';
7
12
 
@@ -84,17 +89,17 @@ const FAB = ({
84
89
  const isIconOnly = !title;
85
90
  const theme = useTheme();
86
91
  return (
87
- <StyledFABContainer
88
- underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
89
- testID={testID}
90
- style={style}
91
- onPress={onPress}
92
- >
93
- {isIconOnly ? (
94
- <IconOnlyContent animated={animated} active={active} icon={icon} />
95
- ) : (
96
- <IconWithTextContent icon={icon} title={title} />
97
- )}
92
+ <StyledFABContainer style={style} testID={testID}>
93
+ <StyledFAB
94
+ underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
95
+ onPress={onPress}
96
+ >
97
+ {isIconOnly ? (
98
+ <IconOnlyContent animated={animated} active={active} icon={icon} />
99
+ ) : (
100
+ <IconWithTextContent icon={icon} title={title} />
101
+ )}
102
+ </StyledFAB>
98
103
  </StyledFABContainer>
99
104
  );
100
105
  };
package/src/components/FAB/StyledFAB.tsx CHANGED
@@ -1,11 +1,12 @@
1
- import { TouchableHighlight } from 'react-native';
2
1
  import styled from '@emotion/native';
3
2
  import type { TextProps, TouchableHighlightProps } from 'react-native';
4
- import Icon from '../Icon';
3
+ import { TouchableHighlight } from 'react-native';
4
+ import Box from '../Box';
5
5
  import type { IconProps } from '../Icon';
6
+ import Icon from '../Icon';
6
7
  import Typography from '../Typography';
7
8
 
8
- const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
9
+ const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
9
10
  ({ theme }) => ({
10
11
  backgroundColor: theme.__hd__.fab.colors.buttonBackground,
11
12
  borderRadius: theme.radii.rounded,
@@ -16,6 +17,7 @@ const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
16
17
  paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
17
18
  paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
18
19
  flexDirection: 'row',
20
+ elevation: theme.__hd__.fab.shadows.elevation,
19
21
  })
20
22
  );
21
23
 
@@ -36,4 +38,11 @@ const StyledFABText = styled(Typography.Text)<TextProps>(({ theme }) => ({
36
38
  marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal,
37
39
  }));
38
40
 
39
- export { StyledFABContainer, StyledFABIcon, StyledFABText };
41
+ const StyledFABContainer = styled(Box)(({ theme }) => ({
42
+ shadowColor: theme.__hd__.fab.colors.shadow,
43
+ shadowOffset: theme.__hd__.fab.shadows.offset,
44
+ shadowRadius: theme.__hd__.fab.shadows.radius,
45
+ shadowOpacity: theme.__hd__.fab.shadows.opacity,
46
+ }));
47
+
48
+ export { StyledFAB, StyledFABIcon, StyledFABText, StyledFABContainer };
package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap CHANGED
@@ -2,29 +2,21 @@
2
2
 
3
3
  exports[`StyledFABContainer renders correctly 1`] = `
4
4
  <View
5
- accessible={true}
6
- focusable={false}
7
- onClick={[Function]}
8
- onResponderGrant={[Function]}
9
- onResponderMove={[Function]}
10
- onResponderRelease={[Function]}
11
- onResponderTerminate={[Function]}
12
- onResponderTerminationRequest={[Function]}
13
- onStartShouldSetResponder={[Function]}
14
5
  style={
15
6
  Array [
16
- Object {
17
- "alignItems": "center",
18
- "alignSelf": "flex-start",
19
- "backgroundColor": "#401960",
20
- "borderRadius": 999,
21
- "flexDirection": "row",
22
- "justifyContent": "center",
23
- "overflow": "hidden",
24
- "paddingHorizontal": 16,
25
- "paddingVertical": 16,
26
- },
27
- undefined,
7
+ Object {},
8
+ Array [
9
+ Object {
10
+ "shadowColor": "#001f23",
11
+ "shadowOffset": Object {
12
+ "height": 2,
13
+ "width": 0,
14
+ },
15
+ "shadowOpacity": 0.12,
16
+ "shadowRadius": 8,
17
+ },
18
+ undefined,
19
+ ],
28
20
  ]
29
21
  }
30
22
  >