Stats: improve tooltips consistency (#97301)

Automattic · Dec 11, 2024 · 4823dde · 4823dde
1 parent ec05da9
commit 4823dde
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 6 deletions.
diff --git a/client/my-sites/stats/stats-subscribers-highlight-section/index.tsx b/client/my-sites/stats/stats-subscribers-highlight-section/index.tsx
@@ -84,13 +84,16 @@ function SubscriberHighlightsStandard( {
 	highlights,
 	isLoading,
 }: SubscriberHighlightsRenderProps ) {
+	const translate = useTranslate();
+
 	return (
 		<div className="highlight-cards-list">
 			{ highlights.map( ( highlight ) => (
 				<CountCard
 					heading={ isLoading ? '-' : highlight.heading }
 					key={ highlight.heading }
 					showValueTooltip
+					label={ translate( 'subscribers' ) }
 					note={ highlight.note }
 					value={ isLoading ? null : highlight.count }
 				/>

diff --git a/client/my-sites/stats/stats-subscribers-overview/index.tsx b/client/my-sites/stats/stats-subscribers-overview/index.tsx
@@ -1,4 +1,5 @@
 import { CountCard } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
 import React from 'react';
 import useSubscribersOverview from 'calypso/my-sites/stats/hooks/use-subscribers-overview';
 
@@ -8,16 +9,25 @@ interface SubscribersOverviewProps {
 
 const SubscribersOverview: React.FC< SubscribersOverviewProps > = ( { siteId } ) => {
 	const { isLoading, isError, overviewData } = useSubscribersOverview( siteId );
+	const translate = useTranslate();
 
 	return (
 		<div className="subscribers-overview highlight-cards">
 			<div className="highlight-cards-list">
 				{ overviewData.map( ( { count, heading }, index ) => {
+					let note = translate( 'As of today' );
+					if ( heading !== 'Today' ) {
+						const prefix = translate( 'Since' );
+						note = `${ prefix } ${ heading }`;
+					}
+
 					return (
 						// TODO: Communicate loading vs error state to the user.
 						<CountCard
 							key={ index }
 							heading={ heading }
+							label={ translate( 'subscribers' ) }
+							note={ note }
 							value={ isLoading || isError ? null : count }
 							showValueTooltip
 						/>

diff --git a/packages/components/src/highlight-cards/annual-highlight-cards.tsx b/packages/components/src/highlight-cards/annual-highlight-cards.tsx
@@ -48,6 +48,7 @@ function AnnualHighlightsStandard( { counts }: AnnualHighlightsProps ) {
 				<CountCard
 					key={ index }
 					heading={ heading }
+					label={ heading.toLocaleLowerCase() }
 					value={ count }
 					icon={ <Icon icon={ icon } /> }
 					showValueTooltip

diff --git a/packages/components/src/highlight-cards/count-card.tsx b/packages/components/src/highlight-cards/count-card.tsx
@@ -7,24 +7,28 @@ import { formatNumber } from './lib/numbers';
 interface CountCardProps {
 	heading?: React.ReactNode;
 	icon?: JSX.Element;
+	label?: string;
 	note?: string;
 	showValueTooltip?: boolean;
 	value: number | string | null;
 }
 
-function TooltipContent( { value }: CountCardProps ) {
+function TooltipContent( { value, label, note }: CountCardProps ) {
 	return (
 		<div className="highlight-card-tooltip-content">
 			<span className="highlight-card-tooltip-counts">
 				{ formatNumber( value as number, false ) }
+				{ label && ` ${ label }` }
 			</span>
+			{ note && <div className="highlight-card-tooltip-note">{ note }</div> }
 		</div>
 	);
 }
 
 export default function CountCard( {
 	heading,
 	icon,
+	label,
 	note,
 	value,
 	showValueTooltip,
@@ -58,8 +62,7 @@ export default function CountCard( {
 					position="bottom right"
 					context={ textRef.current }
 				>
-					<TooltipContent value={ value } />
-					{ note && <div className="highlight-card-tooltip-note">{ note }</div> }
+					<TooltipContent value={ value } label={ label } note={ note } />
 				</Popover>
 			) }
 		</Card>

diff --git a/packages/components/src/highlight-cards/style.scss b/packages/components/src/highlight-cards/style.scss
@@ -342,7 +342,7 @@ $highlight-card-tooltip-font: Inter, $sans !default;
 }
 
 .highlight-card-tooltip-content {
-	display: flex;
+	display: block;
 	align-items: center;
 	justify-content: space-between;
 	font-size: $font-body-small;
@@ -397,8 +397,8 @@ $highlight-card-tooltip-font: Inter, $sans !default;
 }
 
 .highlight-card-tooltip-note {
-	font-size: $font-body-extra-small;
-	padding-top: 8px;
+	color: var(--studio-gray-30);
+	font-size: $font-body-small;
 }
 .highlight-card__settings-tooltip {
 	.highlight-card-tooltip-content {