@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.
- package/.turbo/turbo-build.log +1 -1
- package/CHANGELOG.md +16 -0
- package/assets/fonts/hero-icons-mobile.ttf +0 -0
- package/es/index.js +5106 -4266
- package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
- package/lib/index.js +5105 -4265
- package/package.json +2 -1
- package/src/components/Button/StyledButton.tsx +16 -30
- package/src/components/Carousel/CardCarousel.tsx +3 -4
- package/src/components/Empty/__tests__/__snapshots__/index.spec.tsx.snap +2 -2
- package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap +4 -4
- package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
- package/src/components/Icon/IconList.ts +4 -0
- package/src/components/PinInput/index.tsx +1 -1
- package/src/components/Tabs/SceneView.tsx +6 -4
- package/src/components/Tabs/ScrollableTabs.tsx +8 -2
- package/src/components/Tabs/{ScrollableTabsHeader.tsx → ScrollableTabsHeader/ScrollableTabsHeader.tsx} +73 -42
- package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.ts +45 -0
- package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.ts +91 -0
- package/src/components/Tabs/StyledScrollableTabs.tsx +14 -3
- package/src/components/Tabs/__tests__/ScrollableTabsHeader.spec.tsx +7 -3
- package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap +42 -6
- package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap +623 -3
- package/src/components/Tabs/__tests__/useInitHighlightedAnimation.spec.tsx +56 -0
- package/src/components/Tabs/__tests__/useInitUnderlinedAnimation.spec.tsx +65 -0
- package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap +2 -2
- package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap +2 -2
- package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +1 -1
- package/src/theme/components/typography.ts +1 -1
- package/types/components/Icon/IconList.d.ts +1 -1
- package/types/components/Icon/index.d.ts +1 -1
- package/types/components/Icon/utils.d.ts +1 -1
- package/types/components/Tabs/ScrollableTabs.d.ts +4 -1
- package/types/components/Tabs/{ScrollableTabsHeader.d.ts → ScrollableTabsHeader/ScrollableTabsHeader.d.ts} +7 -3
- package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.d.ts +9 -0
- package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.d.ts +10 -0
- package/types/components/Tabs/StyledScrollableTabs.d.ts +5 -1
- package/types/components/Tabs/index.d.ts +1 -1
|
@@ -17,10 +17,8 @@ const ContentWrapper = styled(PagerView)({
|
|
|
17
17
|
|
|
18
18
|
const HeaderTabWrapper = styled(View)<{
|
|
19
19
|
themeInsets: { top: number; right: number; bottom: number; left: number };
|
|
20
|
-
}>(({
|
|
20
|
+
}>(({ themeInsets }) => ({
|
|
21
21
|
paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
|
|
22
|
-
borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
|
|
23
|
-
borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
|
|
24
22
|
}));
|
|
25
23
|
|
|
26
24
|
const HeaderTabItem = styled(Animated.View)<{ isFirstItem?: boolean }>(
|
|
@@ -47,6 +45,18 @@ const HeaderTabItemOutline = styled(Animated.View)<{ themeActive: boolean }>(
|
|
|
47
45
|
const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
|
|
48
46
|
paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
|
|
49
47
|
paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
|
|
48
|
+
position: 'relative',
|
|
49
|
+
justifyContent: 'center',
|
|
50
|
+
alignItems: 'center',
|
|
51
|
+
}));
|
|
52
|
+
|
|
53
|
+
const HeaderTabItemIndicator = styled(Animated.View)(({ theme }) => ({
|
|
54
|
+
width: '100%',
|
|
55
|
+
height: theme.__hd__.tabs.sizes.indicator,
|
|
56
|
+
position: 'absolute',
|
|
57
|
+
bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
|
|
58
|
+
zIndex: 999,
|
|
59
|
+
backgroundColor: theme.__hd__.tabs.colors.indicator,
|
|
50
60
|
}));
|
|
51
61
|
|
|
52
62
|
export {
|
|
@@ -58,4 +68,5 @@ export {
|
|
|
58
68
|
HeaderTabItemOutlineWrapper,
|
|
59
69
|
HeaderTabItemOutline,
|
|
60
70
|
HeaderTabItemWrapper,
|
|
71
|
+
HeaderTabItemIndicator,
|
|
61
72
|
};
|
|
@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react-native';
|
|
|
4
4
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
5
5
|
import type { ComponentProps } from 'react';
|
|
6
6
|
import renderWithTheme from '../../../testHelpers/renderWithTheme';
|
|
7
|
-
import ScrollableTabsHeader from '../ScrollableTabsHeader';
|
|
7
|
+
import ScrollableTabsHeader from '../ScrollableTabsHeader/ScrollableTabsHeader';
|
|
8
8
|
import type { TabType } from '..';
|
|
9
9
|
|
|
10
10
|
const TestTabsComponent = (
|
|
@@ -59,10 +59,14 @@ const TestTabsComponent = (
|
|
|
59
59
|
};
|
|
60
60
|
|
|
61
61
|
describe('ScrollableTabsHeader', () => {
|
|
62
|
-
it
|
|
62
|
+
it.each`
|
|
63
|
+
variant
|
|
64
|
+
${'underlined'}
|
|
65
|
+
${'highlighted'}
|
|
66
|
+
`('$variant variant renders correctly', ({ variant }) => {
|
|
63
67
|
const onTabPress = jest.fn();
|
|
64
68
|
const { getByTestId, getByText, toJSON } = renderWithTheme(
|
|
65
|
-
<TestTabsComponent onTabPress={onTabPress} />
|
|
69
|
+
<TestTabsComponent variant={variant} onTabPress={onTabPress} />
|
|
66
70
|
);
|
|
67
71
|
|
|
68
72
|
expect(toJSON()).toMatchSnapshot();
|
|
@@ -128,8 +128,6 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
|
|
|
128
128
|
style={
|
|
129
129
|
[
|
|
130
130
|
{
|
|
131
|
-
"borderBottomColor": "#e8e9ea",
|
|
132
|
-
"borderBottomWidth": 2,
|
|
133
131
|
"paddingHorizontal": 0,
|
|
134
132
|
},
|
|
135
133
|
undefined,
|
|
@@ -147,6 +145,8 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
|
|
|
147
145
|
<RCTScrollView
|
|
148
146
|
contentContainerStyle={
|
|
149
147
|
{
|
|
148
|
+
"borderBottomColor": "#e8e9ea",
|
|
149
|
+
"borderBottomWidth": 2,
|
|
150
150
|
"paddingHorizontal": 8,
|
|
151
151
|
}
|
|
152
152
|
}
|
|
@@ -288,8 +288,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
|
|
|
288
288
|
style={
|
|
289
289
|
[
|
|
290
290
|
{
|
|
291
|
+
"alignItems": "center",
|
|
292
|
+
"justifyContent": "center",
|
|
291
293
|
"paddingHorizontal": 8,
|
|
292
294
|
"paddingVertical": 4,
|
|
295
|
+
"position": "relative",
|
|
293
296
|
},
|
|
294
297
|
undefined,
|
|
295
298
|
]
|
|
@@ -399,8 +402,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
|
|
|
399
402
|
style={
|
|
400
403
|
[
|
|
401
404
|
{
|
|
405
|
+
"alignItems": "center",
|
|
406
|
+
"justifyContent": "center",
|
|
402
407
|
"paddingHorizontal": 8,
|
|
403
408
|
"paddingVertical": 4,
|
|
409
|
+
"position": "relative",
|
|
404
410
|
},
|
|
405
411
|
undefined,
|
|
406
412
|
]
|
|
@@ -504,8 +510,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
|
|
|
504
510
|
style={
|
|
505
511
|
[
|
|
506
512
|
{
|
|
513
|
+
"alignItems": "center",
|
|
514
|
+
"justifyContent": "center",
|
|
507
515
|
"paddingHorizontal": 8,
|
|
508
516
|
"paddingVertical": 4,
|
|
517
|
+
"position": "relative",
|
|
509
518
|
},
|
|
510
519
|
undefined,
|
|
511
520
|
]
|
|
@@ -636,8 +645,11 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
|
|
|
636
645
|
style={
|
|
637
646
|
[
|
|
638
647
|
{
|
|
648
|
+
"alignItems": "center",
|
|
649
|
+
"justifyContent": "center",
|
|
639
650
|
"paddingHorizontal": 8,
|
|
640
651
|
"paddingVertical": 4,
|
|
652
|
+
"position": "relative",
|
|
641
653
|
},
|
|
642
654
|
undefined,
|
|
643
655
|
]
|
|
@@ -1032,8 +1044,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
|
|
|
1032
1044
|
style={
|
|
1033
1045
|
[
|
|
1034
1046
|
{
|
|
1035
|
-
"borderBottomColor": "#e8e9ea",
|
|
1036
|
-
"borderBottomWidth": 2,
|
|
1037
1047
|
"paddingHorizontal": 0,
|
|
1038
1048
|
},
|
|
1039
1049
|
undefined,
|
|
@@ -1051,6 +1061,8 @@ exports[`Tabs.Scroll renders correctly 1`] = `
|
|
|
1051
1061
|
<RCTScrollView
|
|
1052
1062
|
contentContainerStyle={
|
|
1053
1063
|
{
|
|
1064
|
+
"borderBottomColor": "#e8e9ea",
|
|
1065
|
+
"borderBottomWidth": 2,
|
|
1054
1066
|
"paddingHorizontal": 8,
|
|
1055
1067
|
}
|
|
1056
1068
|
}
|
|
@@ -1192,8 +1204,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
|
|
|
1192
1204
|
style={
|
|
1193
1205
|
[
|
|
1194
1206
|
{
|
|
1207
|
+
"alignItems": "center",
|
|
1208
|
+
"justifyContent": "center",
|
|
1195
1209
|
"paddingHorizontal": 8,
|
|
1196
1210
|
"paddingVertical": 4,
|
|
1211
|
+
"position": "relative",
|
|
1197
1212
|
},
|
|
1198
1213
|
undefined,
|
|
1199
1214
|
]
|
|
@@ -1303,8 +1318,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
|
|
|
1303
1318
|
style={
|
|
1304
1319
|
[
|
|
1305
1320
|
{
|
|
1321
|
+
"alignItems": "center",
|
|
1322
|
+
"justifyContent": "center",
|
|
1306
1323
|
"paddingHorizontal": 8,
|
|
1307
1324
|
"paddingVertical": 4,
|
|
1325
|
+
"position": "relative",
|
|
1308
1326
|
},
|
|
1309
1327
|
undefined,
|
|
1310
1328
|
]
|
|
@@ -1408,8 +1426,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
|
|
|
1408
1426
|
style={
|
|
1409
1427
|
[
|
|
1410
1428
|
{
|
|
1429
|
+
"alignItems": "center",
|
|
1430
|
+
"justifyContent": "center",
|
|
1411
1431
|
"paddingHorizontal": 8,
|
|
1412
1432
|
"paddingVertical": 4,
|
|
1433
|
+
"position": "relative",
|
|
1413
1434
|
},
|
|
1414
1435
|
undefined,
|
|
1415
1436
|
]
|
|
@@ -1540,8 +1561,11 @@ exports[`Tabs.Scroll renders correctly 1`] = `
|
|
|
1540
1561
|
style={
|
|
1541
1562
|
[
|
|
1542
1563
|
{
|
|
1564
|
+
"alignItems": "center",
|
|
1565
|
+
"justifyContent": "center",
|
|
1543
1566
|
"paddingHorizontal": 8,
|
|
1544
1567
|
"paddingVertical": 4,
|
|
1568
|
+
"position": "relative",
|
|
1545
1569
|
},
|
|
1546
1570
|
undefined,
|
|
1547
1571
|
]
|
|
@@ -1936,8 +1960,6 @@ exports[`useIsFocused renders correctly 1`] = `
|
|
|
1936
1960
|
style={
|
|
1937
1961
|
[
|
|
1938
1962
|
{
|
|
1939
|
-
"borderBottomColor": "#e8e9ea",
|
|
1940
|
-
"borderBottomWidth": 2,
|
|
1941
1963
|
"paddingHorizontal": 0,
|
|
1942
1964
|
},
|
|
1943
1965
|
undefined,
|
|
@@ -1955,6 +1977,8 @@ exports[`useIsFocused renders correctly 1`] = `
|
|
|
1955
1977
|
<RCTScrollView
|
|
1956
1978
|
contentContainerStyle={
|
|
1957
1979
|
{
|
|
1980
|
+
"borderBottomColor": "#e8e9ea",
|
|
1981
|
+
"borderBottomWidth": 2,
|
|
1958
1982
|
"paddingHorizontal": 8,
|
|
1959
1983
|
}
|
|
1960
1984
|
}
|
|
@@ -2096,8 +2120,11 @@ exports[`useIsFocused renders correctly 1`] = `
|
|
|
2096
2120
|
style={
|
|
2097
2121
|
[
|
|
2098
2122
|
{
|
|
2123
|
+
"alignItems": "center",
|
|
2124
|
+
"justifyContent": "center",
|
|
2099
2125
|
"paddingHorizontal": 8,
|
|
2100
2126
|
"paddingVertical": 4,
|
|
2127
|
+
"position": "relative",
|
|
2101
2128
|
},
|
|
2102
2129
|
undefined,
|
|
2103
2130
|
]
|
|
@@ -2207,8 +2234,11 @@ exports[`useIsFocused renders correctly 1`] = `
|
|
|
2207
2234
|
style={
|
|
2208
2235
|
[
|
|
2209
2236
|
{
|
|
2237
|
+
"alignItems": "center",
|
|
2238
|
+
"justifyContent": "center",
|
|
2210
2239
|
"paddingHorizontal": 8,
|
|
2211
2240
|
"paddingVertical": 4,
|
|
2241
|
+
"position": "relative",
|
|
2212
2242
|
},
|
|
2213
2243
|
undefined,
|
|
2214
2244
|
]
|
|
@@ -2312,8 +2342,11 @@ exports[`useIsFocused renders correctly 1`] = `
|
|
|
2312
2342
|
style={
|
|
2313
2343
|
[
|
|
2314
2344
|
{
|
|
2345
|
+
"alignItems": "center",
|
|
2346
|
+
"justifyContent": "center",
|
|
2315
2347
|
"paddingHorizontal": 8,
|
|
2316
2348
|
"paddingVertical": 4,
|
|
2349
|
+
"position": "relative",
|
|
2317
2350
|
},
|
|
2318
2351
|
undefined,
|
|
2319
2352
|
]
|
|
@@ -2444,8 +2477,11 @@ exports[`useIsFocused renders correctly 1`] = `
|
|
|
2444
2477
|
style={
|
|
2445
2478
|
[
|
|
2446
2479
|
{
|
|
2480
|
+
"alignItems": "center",
|
|
2481
|
+
"justifyContent": "center",
|
|
2447
2482
|
"paddingHorizontal": 8,
|
|
2448
2483
|
"paddingVertical": 4,
|
|
2484
|
+
"position": "relative",
|
|
2449
2485
|
},
|
|
2450
2486
|
undefined,
|
|
2451
2487
|
]
|