Move pill and container to separate component

guardian · Dec 13, 2024 · e88e910 · e88e910
1 parent 1b953f7
commit e88e910
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -342,7 +342,6 @@ export const Card = ({
 	trailTextSize,
 	trailTextColour,
 	podcastImage,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added in preparation for UI changes to display gallery count
 	galleryCount,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
@@ -415,6 +414,21 @@ export const Card = ({
 			</Link>
 		);
 
+	const MediaPill = () => (
+		<div
+			css={css`
+				margin-top: auto;
+			`}
+		>
+			<Pill
+				prefix="Gallery"
+				content={galleryCount?.toString() ?? ''}
+				icon={<SvgCamera />}
+				iconSide="right"
+			/>
+		</div>
+	);
+
 	if (snapData?.embedHtml) {
 		return (
 			<SnapCssSandbox snapData={snapData}>
@@ -873,11 +887,8 @@ export const Card = ({
 							)}
 
 							{!showCommentFooter && showPill ? (
-								<div
-									css={css`
-										margin-top: auto;
-									`}
-								>
+								<>
+									<MediaPill />
 									{branding && (
 										<CardBranding
 											branding={branding}
@@ -886,13 +897,7 @@ export const Card = ({
 											containerPalette={containerPalette}
 										/>
 									)}
-									<Pill
-										prefix="Gallery"
-										content={(galleryCount ?? 0).toString()}
-										icon={<SvgCamera />}
-										iconSide="right"
-									/>
-								</div>
+								</>
 							) : (
 								<CardFooter
 									format={format}