Extract ScreenNavigation

WordPress · Jun 9, 2023 · f7e9790 · f7e9790
1 parent fe2689f
commit f7e9790
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 55 deletions.
diff --git a/settings/src/components/screen-navigation.js b/settings/src/components/screen-navigation.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, chevronLeft } from '@wordpress/icons';
+import { Card, CardHeader, CardBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenLink from './screen-link';
+
+/**
+ * @param props
+ * @param props.children
+ * @param props.screen
+ */
+const ScreenNavigation = ( { screen, children } ) => (
+	<Card>
+		<CardHeader className="wporg-2fa__navigation" size="xSmall">
+			<ScreenLink
+				screen="account-status"
+				ariaLabel="Back to the account status page"
+				anchorText={
+					<>
+						<Icon icon={ chevronLeft } />
+						Back
+					</>
+				}
+			/>
+
+			<h3>
+				{ screen
+					.replace( '-', ' ' )
+					.replace( 'totp', 'Two-Factor Authentication' )
+					.replace( 'webauthn', 'Two-Factor Security Key' ) }
+			</h3>
+		</CardHeader>
+		<CardBody className={ 'wporg-2fa__' + screen }>{ children }</CardBody>
+	</Card>
+);
+
+export default ScreenNavigation;
diff --git a/settings/src/components/screen-navigation.scss b/settings/src/components/screen-navigation.scss
@@ -0,0 +1,22 @@
+.wporg-2fa__navigation {
+	padding: 24px 0 !important; /* Override Gutenberg auto-generated. */
+	justify-content: center !important;
+	position: relative;
+
+	a {
+		display: flex;
+    	align-items: center;
+		position: absolute;
+		left: 24px;
+	}
+
+	svg {
+		fill: #4ca6cf;
+	}
+
+	h3 {
+		margin: unset;
+		text-transform: capitalize;
+	}
+
+}
diff --git a/settings/src/script.js b/settings/src/script.js
@@ -9,14 +9,13 @@ import {
 	useState,
 	createRoot,
 } from '@wordpress/element';
-import { Icon, chevronLeft } from '@wordpress/icons';
-import { Card, CardHeader, CardBody, Spinner } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useUser } from './hooks/useUser';
-import ScreenLink from './components/screen-link';
+import ScreenNavigation from './components/screen-navigation';
 import AccountStatus from './components/account-status';
 import Password from './components/password';
 import EmailAddress from './components/email-address';
@@ -143,35 +142,12 @@ function Main( { userId } ) {
 		return <Spinner />;
 	}
 
-	const currentScreen = components[ screen ];
-	let screenContent = currentScreen;
-
-	if ( 'account-status' !== screen ) {
-		screenContent = (
-			<Card>
-				<CardHeader className="wporg-2fa__navigation" size="xSmall">
-					<ScreenLink
-						screen="account-status"
-						ariaLabel="Back to the account status page"
-						anchorText={
-							<>
-								<Icon icon={ chevronLeft } />
-								Back
-							</>
-						}
-					/>
-
-					<h3>
-						{ screen
-							.replace( '-', ' ' )
-							.replace( 'totp', 'Two-Factor Authentication' )
-							.replace( 'webauthn', 'Two-Factor Security Key' ) }
-					</h3>
-				</CardHeader>
-				<CardBody className={ 'wporg-2fa__' + screen }>{ currentScreen }</CardBody>
-			</Card>
+	const currentScreenComponent =
+		'account-status' === screen ? (
+			components[ screen ]
+		) : (
+			<ScreenNavigation screen={ screen }>{ components[ screen ] }</ScreenNavigation>
 		);
-	}
 
 	const isRevalidationExpired =
 		twoFactorRequiredScreens.includes( screen ) &&
@@ -185,7 +161,7 @@ function Main( { userId } ) {
 			value={ { navigateToScreen, user, setGlobalNotice, setError, error } }
 		>
 			<GlobalNotice notice={ globalNotice } setNotice={ setGlobalNotice } />
-			{ screenContent }
+			{ currentScreenComponent }
 			{ shouldRevalidate && <RevalidateModal /> }
 		</GlobalContext.Provider>
 	);

diff --git a/settings/src/style.scss b/settings/src/style.scss
@@ -50,29 +50,6 @@ $alert-blue: #72aee6;
 	flex-wrap: wrap;
 }
 
-.wporg-2fa__navigation {
-	padding: 24px 0 !important; /* Override Gutenberg auto-generated. */
-	justify-content: center !important;
-	position: relative;
-
-	a {
-		display: flex;
-    	align-items: center;
-		position: absolute;
-		left: 24px;
-	}
-
-	svg {
-		fill: #4ca6cf;
-	}
-
-	h3 {
-		margin: unset;
-		text-transform: capitalize;
-	}
-
-}
-
 .wporg-2fa__token {
 	letter-spacing: .3em;
 }
@@ -105,5 +82,6 @@ $alert-blue: #72aee6;
 @import "components/setup-progress-bar";
 @import "components/global-notice";
 @import "components/screen-link";
+@import "components/screen-navigation";
 @import "components/auto-tabbing-input";
 @import "components/revalidate-modal";