Updates heading text to Sentence case. (#308)

WordPress · Aug 29, 2024 · 620b04b · 620b04b
1 parent 06fffce
commit 620b04b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 39 deletions.
diff --git a/settings/src/components/account-status.js b/settings/src/components/account-status.js
@@ -48,7 +48,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="email"
 				status={ emailStatus }
-				headerText="Account Email"
+				headerText="Account email"
 				bodyText={
 					pendingEmail
 						? `Your account email is pending a change to ${ pendingEmail }.`
@@ -59,7 +59,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="webauthn"
 				status={ hasPrimaryProvider && ! webAuthnEnabled ? 'info' : webAuthnEnabled }
-				headerText="Two-Factor Security Key"
+				headerText="Two-factor security key"
 				bodyText={
 					webAuthnEnabled
 						? 'You have two-factor authentication enabled using security keys.'
@@ -71,7 +71,7 @@ export default function AccountStatus() {
 			<SettingStatusCard
 				screen="totp"
 				status={ hasPrimaryProvider && ! totpEnabled ? 'info' : totpEnabled }
-				headerText="Two-Factor App"
+				headerText="Two-factor app"
 				bodyText={
 					totpEnabled
 						? 'You have two-factor authentication enabled using an app.'
@@ -85,7 +85,7 @@ export default function AccountStatus() {
 				status={
 					! hasPrimaryProvider && ! backupCodesEnabled ? 'pending' : backupCodesEnabled
 				}
-				headerText="Two-Factor Backup Codes"
+				headerText="Two-factor backup codes"
 				bodyText={ backupBodyText }
 				disabled={ ! hasPrimaryProvider }
 			/>

diff --git a/settings/src/components/screen-navigation.js b/settings/src/components/screen-navigation.js
@@ -32,14 +32,7 @@ const ScreenNavigation = ( { screen, children, title = '', canNavigate = true }
 				/>
 			) }
 
-			<h3>
-				{ title.length
-					? title
-					: screen
-							.replace( '-', ' ' )
-							.replace( 'totp', 'Two-Factor Authentication' )
-							.replace( 'webauthn', 'Two-Factor Security Key' ) }
-			</h3>
+			<h3>{ title }</h3>
 		</CardHeader>
 		<CardBody className={ 'wporg-2fa__' + screen }>{ children }</CardBody>
 	</Card>

diff --git a/settings/src/components/screen-navigation.scss b/settings/src/components/screen-navigation.scss
@@ -21,7 +21,6 @@
 	h3 {
 		font-weight: 600;
 		margin: unset;
-		text-transform: capitalize;
 	}
 
 }
diff --git a/settings/src/components/settings.js b/settings/src/components/settings.js
@@ -24,37 +24,53 @@ export default function Settings() {
 
 	// The index is the URL slug and the value is the React component.
 	const components = {
-		home: <AccountStatus />,
-		email: <EmailAddress />,
-		password: <Password />,
-		totp: (
-			<TOTP
-				onSuccess={ () => {
-					if ( ! backupCodesEnabled ) {
-						navigateToScreen( 'backup-codes' );
-					} else {
-						navigateToScreen( 'home' );
-					}
-				} }
-			/>
-		),
-		webauthn: (
-			<WebAuthn
-				onKeyAdd={ () => {
-					if ( ! backupCodesEnabled ) {
-						navigateToScreen( 'backup-codes' );
-					}
-				} }
-			/>
-		),
-		'backup-codes': <BackupCodes onSuccess={ () => navigateToScreen( 'home' ) } />,
+		email: {
+			title: 'Account email',
+			component: <EmailAddress />,
+		},
+		password: {
+			title: 'Password',
+			component: <Password />,
+		},
+		totp: {
+			title: 'Two-factor authentication',
+			component: (
+				<TOTP
+					onSuccess={ () => {
+						if ( ! backupCodesEnabled ) {
+							navigateToScreen( 'backup-codes' );
+						} else {
+							navigateToScreen( 'home' );
+						}
+					} }
+				/>
+			),
+		},
+		'backup-codes': {
+			title: 'Backup codes',
+			component: <BackupCodes onSuccess={ () => navigateToScreen( 'home' ) } />,
+		},
+		webauthn: {
+			title: 'Two-factor security key',
+			component: (
+				<WebAuthn
+					onKeyAdd={ () => {
+						if ( ! backupCodesEnabled ) {
+							navigateToScreen( 'backup-codes' );
+						}
+					} }
+				/>
+			),
+		},
 	};
 
 	const currentScreenComponent =
 		'home' === screen ? (
-			components[ screen ]
+			<AccountStatus />
 		) : (
-			<ScreenNavigation screen={ screen }>{ components[ screen ] }</ScreenNavigation>
+			<ScreenNavigation screen={ screen } title={ components[ screen ].title }>
+				{ components[ screen ].component }
+			</ScreenNavigation>
 		);
 
 	return currentScreenComponent;