My Jetpack: Protect card- Reduce the count font-size as the number of…

… digits increases. (#38953)
Automattic · Aug 23, 2024 · 45dab0f · 45dab0f
1 parent 5321148
commit 45dab0f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/...s/my-jetpack/_inc/components/product-cards-section/protect-card/logins-blocked-status.tsx b/...s/my-jetpack/_inc/components/product-cards-section/protect-card/logins-blocked-status.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import useProduct from '../../../data/products/use-product';
 import { getMyJetpackWindowInitialState } from '../../../data/utils/get-my-jetpack-window-state';
 import useMyJetpackConnection from '../../../hooks/use-my-jetpack-connection';
+import numberFormat from '../../../utils/format-number';
 import { isJetpackPluginActive } from '../../../utils/is-jetpack-plugin-active';
 import { InfoTooltip } from '../../info-tooltip';
 import baseStyles from '../style.module.scss';
@@ -63,7 +64,7 @@ function BlockedStatus( { status }: { status: 'active' | 'inactive' | 'off' } )
 					{ __( 'Logins Blocked', 'jetpack-my-jetpack' ) }
 				</div>
 				<div className="value-section__data">
-					<div className="logins_blocked__count">{ blockedLoginsCount }</div>
+					<div className="logins_blocked__count">{ numberFormat( blockedLoginsCount ) }</div>
 				</div>
 			</>
 		) : (
@@ -132,7 +133,7 @@ function BlockedStatus( { status }: { status: 'active' | 'inactive' | 'off' } )
 									) }
 								/>
 							</div>
-							<div className="logins_blocked__count">{ blockedLoginsCount }</div>
+							<div className="logins_blocked__count">{ numberFormat( blockedLoginsCount ) }</div>
 						</>
 					) : (
 						<div>

diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/style.scss b/projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/style.scss
@@ -90,7 +90,7 @@
 
 .logins_blocked {
     &__count {
-        font-size: calc(var(--font-title-large) - 4px);
+        font-size: calc(var(--font-headline-small) - 4px);
         line-height: var(--font-title-large);
         font-weight: 400;
         color: var(--jp-black);

diff --git a/projects/packages/my-jetpack/_inc/utils/format-number.ts b/projects/packages/my-jetpack/_inc/utils/format-number.ts
@@ -1,8 +1,13 @@
 import { numberFormat } from '@automattic/jetpack-components';
 
-type FormatNumberFunction = ( number: number, config: Intl.NumberFormatOptions ) => string;
+type FormatNumberFunction = ( number: number, config?: Intl.NumberFormatOptions ) => string;
 
-const formatNumber: FormatNumberFunction = ( number, config = {} ) => {
+const defaultConfig: Intl.NumberFormatOptions = {
+	maximumFractionDigits: 1,
+	notation: 'compact',
+};
+
+const formatNumber: FormatNumberFunction = ( number, config = defaultConfig ) => {
 	if ( number === null || ! Number.isFinite( number ) ) {
 		return '-';
 	}

diff --git a/...cts/packages/my-jetpack/changelog/update-my-jetpack-protect-card-logins-blocked-font-size b/...cts/packages/my-jetpack/changelog/update-my-jetpack-protect-card-logins-blocked-font-size
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Small asthetic change to the font size of an element in a My Jetpack product card.
+
+