Skip to content

Commit 319fce1

Browse files
natewellernateweller
committed
Protect: Refactor AdminSectionHero (#40516)
1 parent b038a39 commit 319fce1

File tree

11 files changed

+278
-231
lines changed

11 files changed

+278
-231
lines changed

‎projects/plugins/protect/src/js/components/admin-section-hero/index.tsx‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,67 +2,73 @@ import {
22
AdminSectionHero as JetpackAdminSectionHero,
33
H3,
44
ShieldIcon,
5+
Container,
6+
Col,
57
} from '@automattic/jetpack-components';
6-
import SeventyFiveLayout from '../seventy-five-layout';
8+
import clsx from 'clsx';
79
import AdminSectionHeroNotices from './admin-section-hero-notices';
810
import styles from './styles.module.scss';
911

10-
interface AdminSectionHeroProps {
11-
main: React.ReactNode;
12-
secondary?: React.ReactNode;
13-
preserveSecondaryOnMobile?: boolean;
14-
spacing?: number;
15-
}
16-
17-
interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
18-
Heading: React.FC< {
19-
children: React.ReactNode;
20-
showIcon?: boolean;
21-
variant?: 'default' | 'success' | 'error';
22-
outline?: boolean;
23-
} >;
24-
Subheading: React.FC< { children: React.ReactNode } >;
25-
}
26-
27-
const AdminSectionHero: AdminSectionHeroComponent = ( {
28-
main,
29-
secondary,
30-
preserveSecondaryOnMobile = true,
31-
spacing = 7,
32-
} ) => {
12+
const AdminSectionHero = ( {
13+
children,
14+
...props
15+
}: React.ComponentProps< typeof JetpackAdminSectionHero > ) => {
3316
return (
34-
<JetpackAdminSectionHero>
17+
<JetpackAdminSectionHero { ...props }>
3518
<AdminSectionHeroNotices />
36-
<SeventyFiveLayout
37-
spacing={ spacing }
38-
gap={ 0 }
39-
main={ main }
40-
mainClassName={ styles[ 'header-main' ] }
41-
secondary={ secondary }
42-
secondaryClassName={ styles[ 'header-secondary' ] }
43-
preserveSecondaryOnMobile={ preserveSecondaryOnMobile }
44-
fluid={ false }
45-
/>
19+
<Container horizontalSpacing={ 0 }>
20+
<Col>
21+
<div className={ styles[ 'admin-section-hero' ] }>{ children }</div>
22+
</Col>
23+
</Container>
4624
</JetpackAdminSectionHero>
4725
);
4826
};
4927

50-
AdminSectionHero.Heading = ( {
28+
AdminSectionHero.Main = ( {
5129
children,
52-
variant = 'default',
53-
showIcon = false,
30+
className,
31+
...props
5432
}: {
5533
children: React.ReactNode;
56-
variant?: 'default' | 'success' | 'error';
57-
showIcon?: boolean;
34+
className?: string;
35+
[ key: string ]: unknown;
36+
} ) => {
37+
return (
38+
<div className={ clsx( styles[ 'admin-section-hero__main' ], className ) } { ...props }>
39+
{ children }
40+
</div>
41+
);
42+
};
43+
44+
AdminSectionHero.Aside = ( {
45+
children,
46+
className,
47+
...props
48+
}: React.ComponentProps< 'div' > & {
49+
className?: string;
5850
} ) => {
5951
return (
60-
<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
52+
<div className={ clsx( styles[ 'admin-section-hero__aside' ], className ) } { ...props }>
6153
{ children }
62-
{ showIcon && (
54+
</div>
55+
);
56+
};
57+
58+
AdminSectionHero.Heading = ( {
59+
children,
60+
icon,
61+
...props
62+
}: React.ComponentProps< typeof H3 > & {
63+
icon?: 'default' | 'success' | 'error';
64+
} ) => {
65+
return (
66+
<H3 mb={ 1 } { ...props }>
67+
{ children }
68+
{ !! icon && (
6369
<ShieldIcon
6470
height={ 38 }
65-
variant={ variant }
71+
variant={ icon }
6672
outline
6773
fill="default"
6874
className={ styles[ 'heading-icon' ] }
@@ -72,8 +78,4 @@ AdminSectionHero.Heading = ( {
7278
);
7379
};
7480

75-
AdminSectionHero.Subheading = ( { children }: { children: React.ReactNode } ) => {
76-
return <div className={ styles.subheading }>{ children }</div>;
77-
};
78-
7981
export default AdminSectionHero;

‎projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ export default {
99

1010
export const Default = args => <AdminSectionHero { ...args } />;
1111
Default.args = {
12-
main: (
12+
children: (
1313
<>
14-
<Status status={ 'active' } label={ 'Active' } />
15-
<AdminSectionHero.Heading showIcon variant="success">
16-
{ 'No threats found' }
17-
</AdminSectionHero.Heading>
18-
<AdminSectionHero.Subheading>
14+
<AdminSectionHero.Main>
15+
<Status status={ 'active' } label={ 'Active' } />
16+
<AdminSectionHero.Heading icon="success">{ 'No threats found' }</AdminSectionHero.Heading>
1917
<Text>{ 'Most recent results' }</Text>
20-
</AdminSectionHero.Subheading>
18+
</AdminSectionHero.Main>
19+
<AdminSectionHero.Aside>
20+
<InProgressAnimation />
21+
</AdminSectionHero.Aside>
2122
</>
2223
),
23-
secondary: <InProgressAnimation />,
2424
};

‎projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,46 @@
1-
.header-main {
1+
.admin-section-hero {
22
display: flex;
33
flex-direction: column;
4-
justify-content: center;
5-
align-items: flex-start;
4+
gap: calc( var( --spacing-base ) * 6 ); // 48px
5+
6+
max-width: var(--max-container-width);
7+
padding: calc( var( --spacing-base ) * 6 ) 0; // 48px 0
8+
margin: 0 auto;
9+
10+
@media (min-width: 600px) {
11+
padding: calc( var( --spacing-base ) * 7 ) 0; // 56px 0
12+
}
13+
14+
@media (min-width: 600px) {
15+
padding: calc( var( --spacing-base ) * 7 ) 0; // 56px 0
16+
}
17+
18+
@media ( min-width: 1100px ) {
19+
flex-direction: row;
20+
align-items: center;
21+
gap: calc( var( --spacing-base ) * 3 ); // 24px
22+
}
623
}
724

8-
.header-secondary {
9-
display: flex;
10-
flex-direction: column;
11-
justify-content: center;
12-
align-items: flex-end;
25+
.admin-section-hero__main {
26+
flex: 2;
27+
}
28+
29+
.admin-section-hero__aside {
30+
flex: 1;
31+
flex-shrink: 0;
32+
33+
@media ( min-width: 1200px ) {
34+
display: flex;
35+
justify-content: flex-end;
36+
}
1337
}
1438

1539
.heading-icon {
1640
margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
1741
margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px
1842
}
1943

20-
.subheading {
21-
width: fit-content;
22-
}
23-
2444
.connection-error-col {
2545
margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
2646
}

‎projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { Text } from '@automattic/jetpack-components';
1+
import { ShieldIcon, Text } from '@automattic/jetpack-components';
22
import { __ } from '@wordpress/i18n';
3-
import { Icon, warning } from '@wordpress/icons';
43
import AdminSectionHero from '../admin-section-hero';
54
import styles from './styles.module.scss';
65

@@ -19,22 +18,17 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( {
1918
displayErrorMessage += ' ' + __( 'Try again in a few minutes.', 'jetpack-protect' );
2019

2120
return (
22-
<AdminSectionHero
23-
main={
24-
<>
25-
<AdminSectionHero.Heading>
26-
<div className={ styles.heading }>
27-
<Icon className={ styles.warning } icon={ warning } size={ 54 } />
28-
{ __( 'An error occurred', 'jetpack-protect' ) }
29-
</div>
30-
</AdminSectionHero.Heading>
31-
<AdminSectionHero.Subheading>
32-
<Text>{ displayErrorMessage }</Text>
33-
</AdminSectionHero.Subheading>
34-
</>
35-
}
36-
preserveSecondaryOnMobile={ false }
37-
/>
21+
<AdminSectionHero>
22+
<AdminSectionHero.Main>
23+
<AdminSectionHero.Heading>
24+
<div className={ styles.heading }>
25+
{ __( 'An error occurred', 'jetpack-protect' ) }
26+
<ShieldIcon className={ styles.warning } variant="error" height={ 38 } outline />
27+
</div>
28+
</AdminSectionHero.Heading>
29+
<Text>{ displayErrorMessage }</Text>
30+
</AdminSectionHero.Main>
31+
</AdminSectionHero>
3832
);
3933
};
4034

‎projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@
44
}
55

66
.warning {
7-
width: 54px;
8-
height: 54px;
9-
fill: var( --jp-red );
10-
margin-left: -8px;
11-
margin-right: var( --spacing-base ); // 8px
7+
margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px
128
}
139

1410
.scan-navigation {

‎projects/plugins/protect/src/js/routes/firewall/firewall-admin-section-hero.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import AdminSectionHero from '../../components/admin-section-hero';
55
import useWafData from '../../hooks/use-waf-data';
66
import FirewallStatCards from './firewall-statcards';
77
import FirewallSubheading from './firewall-subheading';
8+
import styles from './styles.module.scss';
89

910
const FirewallAdminSectionHero = () => {
1011
const {
@@ -84,16 +85,22 @@ const FirewallAdminSectionHero = () => {
8485
}, [ status ] );
8586

8687
return (
87-
<AdminSectionHero
88-
main={
89-
<>
90-
<Status status={ 'on' === status ? 'active' : 'inactive' } label={ statusLabel } />
91-
<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
92-
<AdminSectionHero.Subheading>{ subheading }</AdminSectionHero.Subheading>
93-
</>
94-
}
95-
secondary={ wafSupported && <FirewallStatCards /> }
96-
/>
88+
<AdminSectionHero>
89+
<AdminSectionHero.Main>
90+
<Status
91+
status={ 'on' === status ? 'active' : 'inactive' }
92+
label={ statusLabel }
93+
className={ styles.status }
94+
/>
95+
<AdminSectionHero.Heading>{ heading }</AdminSectionHero.Heading>
96+
<Text>{ subheading }</Text>
97+
</AdminSectionHero.Main>
98+
{ wafSupported && (
99+
<AdminSectionHero.Aside>
100+
<FirewallStatCards />
101+
</AdminSectionHero.Aside>
102+
) }
103+
</AdminSectionHero>
97104
);
98105
};
99106

‎projects/plugins/protect/src/js/routes/firewall/firewall-statcards.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const FirewallStatCards = () => {
9393
);
9494

9595
return (
96-
<div className={ styles[ 'stat-card-wrapper' ] }>
96+
<div className={ styles[ 'stat-cards-wrapper' ] }>
9797
<StatCard { ...currentDayArgs } />
9898
<StatCard { ...thirtyDaysArgs } />
9999
</div>

‎projects/plugins/protect/src/js/routes/firewall/styles.module.scss‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
max-width: calc( 744px + ( var( --spacing-base ) * 6 ) ); // 744px + 48px (desired inner width + horizontal padding)
44
}
55

6+
.status {
7+
margin-bottom: calc( var( --spacing-base ) * 2 ); // 16px
8+
}
9+
610
.toggle-section {
711
display: flex;
812

@@ -145,14 +149,10 @@
145149
align-items: center;
146150
}
147151

148-
.stat-card-wrapper {
152+
.stat-cards-wrapper {
149153
display: flex;
150-
margin-left: auto;
151-
flex-wrap: wrap;
152-
153-
>:first-child {
154-
margin-right: calc( var( --spacing-base ) * 3 ); // 24px
155-
}
154+
justify-content: flex-end;
155+
gap: calc( var( --spacing-base ) * 3 ); // 24px
156156

157157
.disabled {
158158
opacity: 0.5;
@@ -220,6 +220,23 @@
220220
background-color: var( --jp-white-off );
221221
}
222222

223+
@media ( max-width: 1200px ) {
224+
.stat-cards-wrapper {
225+
justify-content: flex-start;
226+
}
227+
}
228+
229+
@media ( max-width: 599px ) {
230+
.stat-cards-wrapper {
231+
flex-direction: column;
232+
gap: var( --spacing-base ); // 8px
233+
}
234+
235+
.stat-card-icon {
236+
margin-bottom: 0;
237+
}
238+
}
239+
223240
.standalone-mode, .share-data {
224241
display: flex;
225242
flex-direction: column;

0 commit comments

Comments
 (0)