Skip to content

Commit d231920

Browse files
vinnyhowardvinnyhoward
committed
feat: replaced section headers in other areas of app
1 parent 4c17476 commit d231920

6 files changed

Lines changed: 64 additions & 148 deletions

File tree

‎app/component-library/components-temp/SectionHeader/SectionHeader.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,11 @@ describe('SectionHeader', () => {
8585

8686
it('calls onPress when the header is pressed', () => {
8787
const onPress = jest.fn();
88-
const { getByText } = render(
88+
const { getByTestId } = render(
8989
<SectionHeader title="Tokens" onPress={onPress} />,
9090
);
9191

92-
fireEvent.press(getByText('Tokens'));
92+
fireEvent.press(getByTestId(BUTTON_ICON_TEST_ID));
9393

9494
expect(onPress).toHaveBeenCalledTimes(1);
9595
});

‎app/component-library/components-temp/SectionHeader/SectionHeader.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -57,38 +57,38 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({
5757
return (
5858
<View style={style} testID={testID}>
5959
<Box paddingHorizontal={4} twClassName={twClassName}>
60-
<TouchableOpacity
61-
onPress={onPress}
62-
disabled={!onPress}
63-
accessibilityRole={onPress ? 'button' : undefined}
64-
accessibilityLabel={typeof title === 'string' ? title : undefined}
60+
<Box
61+
flexDirection={BoxFlexDirection.Row}
62+
alignItems={BoxAlignItems.Center}
63+
justifyContent={BoxJustifyContent.Between}
6564
>
65+
{/* Left side: Title + optional endAccessory */}
6666
<Box
6767
flexDirection={BoxFlexDirection.Row}
6868
alignItems={BoxAlignItems.Center}
69-
justifyContent={BoxJustifyContent.Between}
69+
gap={1}
7070
>
71-
{/* Left side: Title + optional endAccessory */}
72-
<Box
73-
flexDirection={BoxFlexDirection.Row}
74-
alignItems={BoxAlignItems.Center}
75-
gap={1}
76-
>
77-
{typeof title === 'string' ? (
78-
<Text
79-
variant={TextVariant.HeadingMd}
80-
color={TextColor.TextDefault}
81-
>
82-
{title}
83-
</Text>
84-
) : (
85-
title
86-
)}
87-
{endAccessory}
88-
</Box>
71+
{typeof title === 'string' ? (
72+
<Text
73+
variant={TextVariant.HeadingMd}
74+
color={TextColor.TextDefault}
75+
>
76+
{title}
77+
</Text>
78+
) : (
79+
title
80+
)}
81+
{endAccessory}
82+
</Box>
8983

90-
{/* Right side: Icon in circle — touch handled by parent TouchableOpacity */}
91-
{onPress && (
84+
{/* Right side: Icon in circle — touch handled by parent TouchableOpacity */}
85+
{onPress && (
86+
<TouchableOpacity
87+
onPress={onPress}
88+
disabled={!onPress}
89+
accessibilityRole="button"
90+
accessibilityLabel={typeof title === 'string' ? title : undefined}
91+
>
9292
<View
9393
pointerEvents="none"
9494
style={tw.style(
@@ -98,9 +98,9 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({
9898
>
9999
<ButtonIcon iconName={endIconName} size={ButtonIconSize.Sm} />
100100
</View>
101-
)}
102-
</Box>
103-
</TouchableOpacity>
101+
</TouchableOpacity>
102+
)}
103+
</Box>
104104
</Box>
105105
</View>
106106
);

‎app/components/UI/Perps/components/PerpsHomeSection/PerpsHomeSection.tsx‎

Lines changed: 10 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React, { ReactNode } from 'react';
2-
import { View, TouchableOpacity, StyleSheet } from 'react-native';
2+
import { View, StyleSheet } from 'react-native';
33
import Text, {
44
TextVariant,
55
TextColor,
66
} from '../../../../../component-library/components/Texts/Text';
7-
import Icon, {
8-
IconName,
9-
IconSize,
10-
IconColor,
11-
} from '../../../../../component-library/components/Icons/Icon';
7+
import { IconName } from '@metamask/design-system-react-native';
8+
import SectionHeader from '../../../../../component-library/components-temp/SectionHeader';
129

1310
export interface PerpsHomeSectionProps {
1411
/**
@@ -46,7 +43,7 @@ export interface PerpsHomeSectionProps {
4643
*/
4744
showWhenEmpty?: boolean;
4845
/**
49-
* Optional action handler - when provided, shows ">" chevron and makes header row pressable
46+
* Optional action handler - when provided, shows "..." icon and makes header row pressable
5047
*/
5148
onActionPress?: () => void;
5249
/**
@@ -72,11 +69,6 @@ const styles = StyleSheet.create({
7269
marginBottom: 12,
7370
marginTop: 12,
7471
},
75-
titleRow: {
76-
flexDirection: 'row',
77-
justifyContent: 'space-between',
78-
alignItems: 'center',
79-
},
8072
content: {
8173
// Content styling handled by children
8274
},
@@ -126,34 +118,16 @@ const PerpsHomeSection: React.FC<PerpsHomeSectionProps> = ({
126118

127119
const showAction = onActionPress && !isLoading && !isEmpty;
128120

129-
// Title row content (pressable when action is available)
130-
const titleRowContent = (
131-
<>
132-
<Text variant={TextVariant.HeadingMD} color={TextColor.Default}>
133-
{title}
134-
</Text>
135-
{showAction && (
136-
<Icon
137-
name={IconName.MoreHorizontal}
138-
size={IconSize.Md}
139-
color={IconColor.Alternative}
140-
/>
141-
)}
142-
</>
143-
);
144-
145121
return (
146122
<View style={styles.section} testID={testID}>
147123
{/* Section Header */}
148124
<View style={styles.headerContainer}>
149-
{/* Title row - only this is pressable */}
150-
{showAction ? (
151-
<TouchableOpacity style={styles.titleRow} onPress={onActionPress}>
152-
{titleRowContent}
153-
</TouchableOpacity>
154-
) : (
155-
<View style={styles.titleRow}>{titleRowContent}</View>
156-
)}
125+
<SectionHeader
126+
title={title}
127+
onPress={showAction ? onActionPress : undefined}
128+
endIconName={IconName.MoreHorizontal}
129+
twClassName="px-0 mb-2"
130+
/>
157131

158132
{/* Subtitle - NOT pressable */}
159133
{subtitle && (

‎app/components/UI/Perps/components/PerpsMarketTypeSection/PerpsMarketTypeSection.styles.ts‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,6 @@ const styleSheet = (params: { theme: Theme }) => {
77
section: {
88
marginBottom: 30,
99
},
10-
header: {
11-
flexDirection: 'row',
12-
alignItems: 'center',
13-
paddingHorizontal: 16,
14-
marginBottom: 12,
15-
},
16-
titleRow: {
17-
flexDirection: 'row',
18-
alignItems: 'center',
19-
gap: 4,
20-
},
2110
contentContainer: {
2211
marginHorizontal: 16,
2312
borderRadius: 16,

‎app/components/UI/Perps/components/PerpsMarketTypeSection/PerpsMarketTypeSection.tsx‎

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
import React, { useCallback } from 'react';
2-
import { View, TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
2+
import { View, StyleProp, ViewStyle } from 'react-native';
33
import { useNavigation } from '@react-navigation/native';
4-
import Text, {
5-
TextVariant,
6-
TextColor,
7-
} from '../../../../../component-library/components/Texts/Text';
8-
import Icon, {
9-
IconName,
10-
IconSize,
11-
IconColor,
12-
} from '../../../../../component-library/components/Icons/Icon';
134
import Routes from '../../../../../constants/navigation/Routes';
145
import {
156
type PerpsMarketData,
@@ -20,6 +11,7 @@ import { useStyles } from '../../../../../component-library/hooks';
2011
import PerpsMarketList from '../PerpsMarketList';
2112
import styleSheet from './PerpsMarketTypeSection.styles';
2213
import PerpsRowSkeleton from '../PerpsRowSkeleton';
14+
import SectionHeader from '../../../../../component-library/components-temp/SectionHeader';
2315

2416
export interface PerpsMarketTypeSectionProps {
2517
/** Section title (e.g., "Perps", "Stocks", "Commodities") */
@@ -99,33 +91,17 @@ const PerpsMarketTypeSection: React.FC<PerpsMarketTypeSectionProps> = ({
9991
[navigation],
10092
);
10193

102-
// Header component - full row is pressable with chevron icon next to title
103-
const SectionHeader = useCallback(
104-
() => (
105-
<TouchableOpacity
106-
style={[styles.header, headerStyle]}
107-
onPress={handleViewAll}
108-
>
109-
<View style={styles.titleRow}>
110-
<Text variant={TextVariant.BodyLGMedium} color={TextColor.Default}>
111-
{title}
112-
</Text>
113-
<Icon
114-
name={IconName.ArrowRight}
115-
size={IconSize.Sm}
116-
color={IconColor.Alternative}
117-
/>
118-
</View>
119-
</TouchableOpacity>
120-
),
121-
[styles.header, styles.titleRow, title, handleViewAll, headerStyle],
122-
);
123-
12494
// Show skeleton during initial load
12595
if (isLoading) {
12696
return (
12797
<View style={[styles.section, style]} testID={testID}>
128-
<SectionHeader />
98+
<SectionHeader
99+
title={title}
100+
onPress={handleViewAll}
101+
showEndIconBackground={false}
102+
twClassName="mb-2"
103+
style={headerStyle}
104+
/>
129105
<View style={[styles.contentContainer, contentContainerStyle]}>
130106
<PerpsRowSkeleton count={5} />
131107
</View>
@@ -141,7 +117,12 @@ const PerpsMarketTypeSection: React.FC<PerpsMarketTypeSectionProps> = ({
141117
// Render market list
142118
return (
143119
<View style={[styles.section, style]} testID={testID}>
144-
<SectionHeader />
120+
<SectionHeader
121+
title={title}
122+
onPress={handleViewAll}
123+
twClassName="mb-2"
124+
style={headerStyle}
125+
/>
145126
<View style={[styles.contentContainer, contentContainerStyle]}>
146127
<PerpsMarketList
147128
markets={markets}

‎app/components/Views/TrendingView/components/SectionHeader/SectionHeader.tsx‎

Lines changed: 8 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
11
import React from 'react';
2-
import { TouchableOpacity } from 'react-native';
3-
import { useTailwind } from '@metamask/design-system-twrnc-preset';
4-
import {
5-
Box,
6-
Text,
7-
TextVariant,
8-
TextColor,
9-
Icon,
10-
IconName,
11-
IconSize,
12-
IconColor,
13-
BoxFlexDirection,
14-
BoxAlignItems,
15-
} from '@metamask/design-system-react-native';
16-
import { SectionId, SECTIONS_CONFIG } from '../../sections.config';
172
import { useNavigation } from '@react-navigation/native';
3+
import { SectionId, SECTIONS_CONFIG } from '../../sections.config';
4+
import SectionHeader from '../../../../../component-library/components-temp/SectionHeader';
185

196
export interface SectionHeaderProps {
207
sectionId: SectionId;
@@ -27,33 +14,18 @@ export interface SectionHeaderProps {
2714
* This component is part of the centralized section management system that ensures
2815
* consistency between QuickActions buttons and section "View All" buttons.
2916
*/
30-
const SectionHeader: React.FC<SectionHeaderProps> = ({ sectionId }) => {
31-
const tw = useTailwind();
17+
const TrendingSectionHeader: React.FC<SectionHeaderProps> = ({ sectionId }) => {
3218
const navigation = useNavigation();
3319
const sectionConfig = SECTIONS_CONFIG[sectionId];
3420

3521
return (
36-
<TouchableOpacity
22+
<SectionHeader
3723
testID={`section-header-view-all-${sectionId}`}
38-
style={tw.style('flex-row items-center mb-2')}
24+
title={sectionConfig.title}
3925
onPress={() => sectionConfig.viewAllAction(navigation)}
40-
>
41-
<Box
42-
flexDirection={BoxFlexDirection.Row}
43-
alignItems={BoxAlignItems.Center}
44-
gap={1}
45-
>
46-
<Text variant={TextVariant.HeadingMd} color={TextColor.TextDefault}>
47-
{sectionConfig.title}
48-
</Text>
49-
<Icon
50-
name={IconName.ArrowRight}
51-
size={IconSize.Sm}
52-
color={IconColor.IconAlternative}
53-
/>
54-
</Box>
55-
</TouchableOpacity>
26+
twClassName="px-0 mb-2"
27+
/>
5628
);
5729
};
5830

59-
export default SectionHeader;
31+
export default TrendingSectionHeader;

0 commit comments

Comments
 (0)