-
Notifications
You must be signed in to change notification settings - Fork 800
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Protect: Add/apply shared AdminSectionHero component (#39702)
- Loading branch information
Showing
47 changed files
with
1,003 additions
and
1,180 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/plugins/protect/changelog/add-protect-header-component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: changed | ||
|
||
Adds and applies a shared Header component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
projects/plugins/protect/src/js/components/admin-section-hero/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import { | ||
AdminSectionHero as JetpackAdminSectionHero, | ||
H3, | ||
getIconBySlug, | ||
} from '@automattic/jetpack-components'; | ||
import SeventyFiveLayout from '../seventy-five-layout'; | ||
import AdminSectionHeroNotices from './admin-section-hero-notices'; | ||
import styles from './styles.module.scss'; | ||
|
||
interface AdminSectionHeroProps { | ||
main: React.ReactNode; | ||
secondary?: React.ReactNode; | ||
preserveSecondaryOnMobile?: boolean; | ||
} | ||
|
||
interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > { | ||
Heading: React.FC< { children: React.ReactNode; showIcon?: boolean } >; | ||
Subheading: React.FC< { children: React.ReactNode } >; | ||
} | ||
|
||
const AdminSectionHero: AdminSectionHeroComponent = ( { | ||
main, | ||
secondary, | ||
preserveSecondaryOnMobile = true, | ||
} ) => { | ||
return ( | ||
<JetpackAdminSectionHero> | ||
<AdminSectionHeroNotices /> | ||
<SeventyFiveLayout | ||
spacing={ 7 } | ||
gap={ 0 } | ||
main={ main } | ||
mainClassName={ styles[ 'header-main' ] } | ||
secondary={ secondary } | ||
secondaryClassName={ styles[ 'header-secondary' ] } | ||
preserveSecondaryOnMobile={ preserveSecondaryOnMobile } | ||
fluid={ false } | ||
/> | ||
</JetpackAdminSectionHero> | ||
); | ||
}; | ||
|
||
AdminSectionHero.Heading = ( { | ||
children, | ||
showIcon = false, | ||
}: { | ||
children: React.ReactNode; | ||
showIcon?: boolean; | ||
} ) => { | ||
const Icon = getIconBySlug( 'protect' ); | ||
|
||
return ( | ||
<H3 className={ styles.heading } mt={ 2 } mb={ 2 }> | ||
{ children } | ||
{ showIcon && <Icon className={ styles[ 'heading-icon' ] } size={ 32 } /> } | ||
</H3> | ||
); | ||
}; | ||
|
||
AdminSectionHero.Subheading = ( { children }: { children: React.ReactNode } ) => { | ||
return <div className={ styles.subheading }>{ children }</div>; | ||
}; | ||
|
||
export default AdminSectionHero; |
22 changes: 22 additions & 0 deletions
22
projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { Status, Text } from '@automattic/jetpack-components'; | ||
import AdminSectionHero from '..'; | ||
import inProgressImage from '../../../../../assets/images/in-progress.png'; | ||
|
||
export default { | ||
title: 'Plugins/Protect/AdminSectionHero', | ||
component: AdminSectionHero, | ||
}; | ||
|
||
export const Default = args => <AdminSectionHero { ...args } />; | ||
Default.args = { | ||
main: ( | ||
<> | ||
<Status status={ 'active' } label={ 'Active' } /> | ||
<AdminSectionHero.Heading showIcon>{ 'No threats found' }</AdminSectionHero.Heading> | ||
<AdminSectionHero.Subheading> | ||
<Text>{ 'Most recent results' }</Text> | ||
</AdminSectionHero.Subheading> | ||
</> | ||
), | ||
secondary: <img src={ inProgressImage } alt="" />, | ||
}; |
26 changes: 26 additions & 0 deletions
26
projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
.header-main { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: flex-start; | ||
} | ||
|
||
.header-secondary { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: flex-end; | ||
} | ||
|
||
.heading-icon { | ||
margin-left: var( --spacing-base ); // 8px | ||
margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px | ||
} | ||
|
||
.subheading { | ||
width: fit-content; | ||
} | ||
|
||
.connection-error-col { | ||
margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px | ||
} |
51 changes: 51 additions & 0 deletions
51
projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import { Text } from '@automattic/jetpack-components'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { Icon, warning } from '@wordpress/icons'; | ||
import inProgressImage from '../../../../assets/images/in-progress.png'; | ||
import AdminSectionHero from '../admin-section-hero'; | ||
import ScanNavigation from '../scan-navigation'; | ||
import styles from './styles.module.scss'; | ||
|
||
interface ErrorAdminSectionHeroProps { | ||
baseErrorMessage: string; | ||
errorMessage?: string; | ||
errorCode?: string; | ||
} | ||
|
||
const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( { | ||
baseErrorMessage, | ||
errorMessage, | ||
errorCode, | ||
} ) => { | ||
let displayErrorMessage = errorMessage ? `${ errorMessage } (${ errorCode }).` : baseErrorMessage; | ||
displayErrorMessage += ' ' + __( 'Try again in a few minutes.', 'jetpack-protect' ); | ||
|
||
return ( | ||
<AdminSectionHero | ||
main={ | ||
<> | ||
<AdminSectionHero.Heading> | ||
<div className={ styles.heading }> | ||
<Icon className={ styles.warning } icon={ warning } size={ 54 } /> | ||
{ __( 'An error occurred', 'jetpack-protect' ) } | ||
</div> | ||
</AdminSectionHero.Heading> | ||
<AdminSectionHero.Subheading> | ||
<Text>{ displayErrorMessage }</Text> | ||
</AdminSectionHero.Subheading> | ||
<div className={ styles[ 'scan-navigation' ] }> | ||
<ScanNavigation /> | ||
</div> | ||
</> | ||
} | ||
secondary={ | ||
<div className={ styles.illustration }> | ||
<img src={ inProgressImage } alt="" /> | ||
</div> | ||
} | ||
preserveSecondaryOnMobile={ false } | ||
/> | ||
); | ||
}; | ||
|
||
export default ErrorAdminSectionHero; |
27 changes: 27 additions & 0 deletions
27
projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
.heading { | ||
display: flex; | ||
align-items: center; | ||
} | ||
|
||
.warning { | ||
width: 54px; | ||
height: 54px; | ||
fill: var( --jp-red ); | ||
margin-left: -8px; | ||
margin-right: var( --spacing-base ); // 8px | ||
} | ||
|
||
.illustration { | ||
display: flex; | ||
align-items: center; | ||
height: 100%; | ||
img { | ||
// let's fit images | ||
object-fit: cover; | ||
width: 100%; | ||
} | ||
} | ||
|
||
.scan-navigation { | ||
margin-top: calc( var( --spacing-base ) * 3 ); // 24px | ||
} |
49 changes: 0 additions & 49 deletions
49
projects/plugins/protect/src/js/components/error-section/index.tsx
This file was deleted.
Oops, something went wrong.
16 changes: 0 additions & 16 deletions
16
projects/plugins/protect/src/js/components/error-section/stories/index.stories.tsx
This file was deleted.
Oops, something went wrong.
3 changes: 0 additions & 3 deletions
3
projects/plugins/protect/src/js/components/error-section/styles.module.scss
This file was deleted.
Oops, something went wrong.
11 changes: 0 additions & 11 deletions
11
projects/plugins/protect/src/js/components/firewall-footer/stories/broken/index.stories.jsx
This file was deleted.
Oops, something went wrong.
30 changes: 0 additions & 30 deletions
30
projects/plugins/protect/src/js/components/firewall-footer/styles.module.scss
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.