i18n: Update several cases of ShortenedNumber component with numberFo…

…rmat
Automattic · Feb 6, 2025 · 29d66d9 · 29d66d9
1 parent 0421207
commit 29d66d9
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 30 deletions.
diff --git a/apps/odyssey-stats/src/widget/modules.tsx b/apps/odyssey-stats/src/widget/modules.tsx
@@ -1,7 +1,7 @@
-import { ShortenedNumber, Button } from '@automattic/components';
+import { Button } from '@automattic/components';
 import { protect, akismet } from '@automattic/components/src/icons';
 import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useState, FunctionComponent } from 'react';
 import wpcom from 'calypso/lib/wp';
 import useModuleDataQuery from '../hooks/use-module-data-query';
@@ -64,7 +64,14 @@ const ModuleCard: FunctionComponent< ModuleCardProps > = ( {
 				<>
 					{ ( ! isError || ! canManageModule ) && (
 						<div className="stats-widget-module__value">
-							<ShortenedNumber value={ value } />
+							<span>
+								{ numberFormat( value, {
+									numberFormatOptions: {
+										notation: 'compact',
+										maximumFractionDigits: 1,
+									},
+								} ) }
+							</span>
 						</div>
 					) }
 					{ isError && canManageModule && (

diff --git a/...k-cloud/sections/agency-dashboard/sites-overview/site-expanded-content/insights-stats.tsx b/...k-cloud/sections/agency-dashboard/sites-overview/site-expanded-content/insights-stats.tsx
@@ -1,7 +1,7 @@
-import { Button, ShortenedNumber } from '@automattic/components';
+import { Button } from '@automattic/components';
 import { Icon, arrowUp, arrowDown, external } from '@wordpress/icons';
 import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import ExpandedCard from './expanded-card';
 import type { SiteStats } from '../types';
 
@@ -62,7 +62,14 @@ export default function InsightsStats( { stats, siteUrlWithScheme, trackEvent }:
 				<div className="site-expanded-content__card-content">
 					<div className="site-expanded-content__card-content-column">
 						<div className="site-expanded-content__card-content-score">
-							<ShortenedNumber value={ data.visitors } />
+							<span>
+								{ numberFormat( data.visitors, {
+									numberFormatOptions: {
+										notation: 'compact',
+										maximumFractionDigits: 1,
+									},
+								} ) }
+							</span>
 							{ getTrendContent( data.visitorsTrend, data.visitorsChange ) }
 						</div>
 						<div className="site-expanded-content__card-content-score-title">
@@ -71,7 +78,14 @@ export default function InsightsStats( { stats, siteUrlWithScheme, trackEvent }:
 					</div>
 					<div className="site-expanded-content__card-content-column">
 						<div className="site-expanded-content__card-content-score">
-							<ShortenedNumber value={ data.views } />
+							<span>
+								{ numberFormat( data.views, {
+									numberFormatOptions: {
+										notation: 'compact',
+										maximumFractionDigits: 1,
+									},
+								} ) }
+							</span>
 							{ getTrendContent( data.viewsTrend, data.viewsChange ) }
 						</div>
 						<div className="site-expanded-content__card-content-score-title">

diff --git a/...-cloud/sections/agency-dashboard/sites-overview/site-status-content/site-stats-column.tsx b/...-cloud/sections/agency-dashboard/sites-overview/site-status-content/site-stats-column.tsx
@@ -1,4 +1,4 @@
-import { Gridicon, ShortenedNumber } from '@automattic/components';
+import { Gridicon } from '@automattic/components';
 import { Icon, arrowUp, arrowDown } from '@wordpress/icons';
 import clsx from 'clsx';
 import { translate, numberFormat } from 'i18n-calypso';
@@ -109,7 +109,14 @@ export default function SiteStatsColumn( { site, stats, siteError }: Props ) {
 			{ trendIcon }
 
 			<div className="sites-overview__stats">
-				<ShortenedNumber value={ totalViews } />
+				<span>
+					{ numberFormat( totalViews, {
+						numberFormatOptions: {
+							notation: 'compact',
+							maximumFractionDigits: 1,
+						},
+					} ) }
+				</span>
 			</div>
 		</span>
 	);

diff --git a/client/my-sites/stats/sections/all-time-highlights-section/index.tsx b/client/my-sites/stats/sections/all-time-highlights-section/index.tsx
@@ -1,18 +1,12 @@
-import {
-	Card,
-	ComponentSwapper,
-	formattedNumber,
-	ShortenedNumber,
-	DotPager,
-} from '@automattic/components';
+import { Card, ComponentSwapper, formattedNumber, DotPager } from '@automattic/components';
 import {
 	formatPercentage,
 	percentCalculator,
 } from '@automattic/components/src/highlight-cards/lib/numbers';
 import { eye } from '@automattic/components/src/icons';
 import { Icon, people, postContent, starEmpty, commentContent } from '@wordpress/icons';
 import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import React, { useMemo } from 'react';
 import QueryPosts from 'calypso/components/data/query-posts';
 import QuerySiteStats from 'calypso/components/data/query-site-stats';
@@ -154,7 +148,16 @@ export default function AllTimeHighlightsSection( {
 				{
 					id: 'views',
 					header: translate( 'Views' ),
-					content: <ShortenedNumber value={ viewsBestDayTotal } />,
+					content: (
+						<span>
+							{ numberFormat( viewsBestDayTotal, {
+								numberFormatOptions: {
+									notation: 'compact',
+									maximumFractionDigits: 1,
+								},
+							} ) }
+						</span>
+					),
 					footer: translate( '%(percent)s of views', {
 						args: { percent: formatPercentage( bestViewsEverPercent, true ) },
 						context: 'Stats: Percentage of views',

diff --git a/client/my-sites/stats/stats-email-top-row/top-card.jsx b/client/my-sites/stats/stats-email-top-row/top-card.jsx
@@ -1,5 +1,5 @@
-import { Card, ShortenedNumber, Spinner } from '@automattic/components';
-import { useTranslate } from 'i18n-calypso';
+import { Card, Spinner } from '@automattic/components';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 
 /* This is a very stripped down version of HighlightCard
  * HighlightCard doesn't support non-numeric values
@@ -25,7 +25,12 @@ const TopCardValue = ( { value, isLoading } ) => {
 
 	return (
 		<span className="highlight-card-count-value" title={ String( value ) }>
-			<ShortenedNumber value={ value } />
+			{ numberFormat( value, {
+				numberFormatOptions: {
+					notation: 'compact',
+					maximumFractionDigits: 1,
+				},
+			} ) }
 		</span>
 	);
 };

diff --git a/client/my-sites/subscribers/components/subscriber-stats-card/subscriber-stats-card.tsx b/client/my-sites/subscribers/components/subscriber-stats-card/subscriber-stats-card.tsx
@@ -1,4 +1,5 @@
-import { Card, ShortenedNumber, Spinner } from '@automattic/components';
+import { Card, Spinner } from '@automattic/components';
+import { numberFormat } from 'i18n-calypso';
 import { ReactNode } from 'react';
 import InfoPopover from 'calypso/components/info-popover';
 import '@automattic/components/src/highlight-cards/style.scss';
@@ -41,7 +42,14 @@ const SubscriberStatsCardValue = ( {
 			className="highlight-card-count-value subscriber-stats-card__value"
 			title={ String( value ) }
 		>
-			<ShortenedNumber value={ value as number } />
+			{ typeof value === 'number'
+				? numberFormat( value, {
+						numberFormatOptions: {
+							notation: 'compact',
+							maximumFractionDigits: 1,
+						},
+				  } )
+				: '-' }
 		</span>
 	);
 };

diff --git a/packages/components/src/horizontal-bar-list/horizontal-bar-grid-item.tsx b/packages/components/src/horizontal-bar-list/horizontal-bar-grid-item.tsx
@@ -3,7 +3,6 @@ import { Icon, chevronDown, chevronUp, tag, file } from '@wordpress/icons';
 import clsx from 'clsx';
 import { numberFormat } from 'i18n-calypso';
 import React, { Fragment, useState } from 'react';
-import ShortenedNumber from '../number-formatters';
 import type { HorizontalBarListItemProps } from './types';
 
 import './style.scss';
@@ -106,8 +105,18 @@ const HorizontalBarListItem = ( {
 
 	const renderValue = () => {
 		if ( useShortNumber ) {
-			return <ShortenedNumber value={ value } />;
+			return (
+				<span>
+					{ numberFormat( value, {
+						numberFormatOptions: {
+							notation: 'compact',
+							maximumFractionDigits: 1,
+						},
+					} ) }
+				</span>
+			);
 		}
+
 		if ( formatValue ) {
 			return formatValue( value, data );
 		}

diff --git a/packages/components/src/post-stats-card/index.tsx b/packages/components/src/post-stats-card/index.tsx
@@ -1,9 +1,9 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Icon, commentContent, starEmpty } from '@wordpress/icons';
 import clsx from 'clsx';
-import { useTranslate } from 'i18n-calypso';
+import { useTranslate, numberFormat } from 'i18n-calypso';
 import { useMemo } from 'react';
-import { Card, ShortenedNumber, Button } from '../';
+import { Card, Button } from '../';
 import { eye } from '../icons';
 import './style.scss';
 
@@ -78,21 +78,48 @@ export default function PostStatsCard( {
 					<Icon className="gridicon" icon={ eye } />
 					<div className="post-stats-card__count-header">{ translate( 'Views' ) }</div>
 					<div className="post-stats-card__count-value">
-						<ShortenedNumber value={ isLoading ? null : viewCount } />
+						<span>
+							{ ! isLoading && viewCount !== null
+								? numberFormat( viewCount, {
+										numberFormatOptions: {
+											notation: 'compact',
+											maximumFractionDigits: 1,
+										},
+								  } )
+								: '-' }
+						</span>
 					</div>
 				</div>
 				<div className="post-stats-card__count post-stats-card__count--like">
 					<Icon className="gridicon" icon={ starEmpty } />
 					<div className="post-stats-card__count-header">{ translate( 'Likes' ) }</div>
 					<div className="post-stats-card__count-value">
-						<ShortenedNumber value={ isLoading ? null : likeCount } />
+						<span>
+							{ ! isLoading && likeCount !== null
+								? numberFormat( likeCount, {
+										numberFormatOptions: {
+											notation: 'compact',
+											maximumFractionDigits: 1,
+										},
+								  } )
+								: '-' }
+						</span>
 					</div>
 				</div>
 				<div className="post-stats-card__count post-stats-card__count--comment">
 					<Icon className="gridicon" icon={ commentContent } />
 					<div className="post-stats-card__count-header">{ translate( 'Comments' ) }</div>
 					<div className="post-stats-card__count-value">
-						<ShortenedNumber value={ isLoading ? null : commentCount } />
+						<span>
+							{ ! isLoading && commentCount !== null
+								? numberFormat( commentCount, {
+										numberFormatOptions: {
+											notation: 'compact',
+											maximumFractionDigits: 1,
+										},
+								  } )
+								: '-' }
+						</span>
 					</div>
 				</div>
 			</div>