Stats: only expand location section when not empty

Automattic · Jan 15, 2025 · 2d39ac6 · 2d39ac6
1 parent 633528c
commit 2d39ac6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/components/src/horizontal-bar-list/stats-card.scss b/packages/components/src/horizontal-bar-list/stats-card.scss
@@ -25,6 +25,9 @@
 	.stats-card--hero {
 		padding-bottom: $card-vertical-space;
 
+	}
+
+	.stats-card--hero-expanded {
 		@media (min-width: $break-medium) {
 			min-height: 512px;
 			min-width: 860px;

diff --git a/packages/components/src/horizontal-bar-list/stats-card.tsx b/packages/components/src/horizontal-bar-list/stats-card.tsx
@@ -77,6 +77,11 @@ const StatsCard = ( {
 		</div>
 	);
 
+	let heroClasses = `${ BASE_CLASS_NAME }--hero`;
+	if ( ! isEmpty ) {
+		heroClasses += ` ${ BASE_CLASS_NAME }--hero-expanded`;
+	}
+
 	return (
 		<div
 			className={ clsx( className, BASE_CLASS_NAME, {
@@ -85,7 +90,7 @@ const StatsCard = ( {
 		>
 			<div className={ `${ BASE_CLASS_NAME }__content` }>
 				{ !! heroElement && (
-					<div className={ `${ BASE_CLASS_NAME }--hero` }>
+					<div className={ heroClasses }>
 						{ splitHeader && <div className={ `${ BASE_CLASS_NAME }-header` }>{ titleNode }</div> }
 						{ heroElement }
 					</div>