From d6f48c23755f36c77133f75b491818f22b53b439 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:54:37 +0000
Subject: [PATCH] WIP: Show pill in place of gallery icon

---
 dotcom-rendering/src/components/Card/Card.tsx | 66 ++++++++++++-------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index aa3f3c2615..0d8a8dea41 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -5,7 +5,7 @@ import {
 	palette as sourcePalette,
 	space,
 } from '@guardian/source/foundations';
-import { Hide, Link } from '@guardian/source/react-components';
+import { Hide, Link, SvgCamera } from '@guardian/source/react-components';
 import { ArticleDesign, type ArticleFormat } from '../../lib/articleFormat';
 import { isMediaCard } from '../../lib/cardHelpers';
 import { getZIndex } from '../../lib/getZIndex';
@@ -34,6 +34,7 @@ import { Island } from '../Island';
 import { LatestLinks } from '../LatestLinks.importable';
 import { MediaDuration } from '../MediaDuration';
 import { MediaMeta } from '../MediaMeta';
+import { Pill } from '../Pill';
 import { Slideshow } from '../Slideshow';
 import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
@@ -848,7 +849,8 @@ export const Card = ({
 										/>
 									) : null}
 									{!!mainMedia &&
-										mainMedia.type !== 'Video' && (
+										mainMedia.type !== 'Video' &&
+										mainMedia.type !== 'Gallery' && (
 											<MediaMeta
 												mediaType={mainMedia.type}
 												hasKicker={!!kickerText}
@@ -867,26 +869,46 @@ export const Card = ({
 								/>
 							)}
 
-							{!showCommentFooter && (
-								<CardFooter
-									format={format}
-									age={decideAge()}
-									commentCount={<CommentCount />}
-									cardBranding={
-										branding ? (
-											<CardBranding
-												branding={branding}
-												format={format}
-												onwardsSource={onwardsSource}
-												containerPalette={
-													containerPalette
-												}
-											/>
-										) : undefined
-									}
-									showLivePlayable={showLivePlayable}
-								/>
-							)}
+							{!showCommentFooter &&
+								mainMedia?.type === 'Gallery' && (
+									<div
+										css={css`
+											margin-top: auto;
+										`}
+									>
+										<Pill
+											prefix="Gallery"
+											content={(
+												galleryCount ?? 0
+											).toString()}
+											icon={<SvgCamera />}
+											iconSide="right"
+										/>
+									</div>
+								)}
+							{!showCommentFooter &&
+								mainMedia?.type !== 'Gallery' && (
+									<CardFooter
+										format={format}
+										age={decideAge()}
+										commentCount={<CommentCount />}
+										cardBranding={
+											branding ? (
+												<CardBranding
+													branding={branding}
+													format={format}
+													onwardsSource={
+														onwardsSource
+													}
+													containerPalette={
+														containerPalette
+													}
+												/>
+											) : undefined
+										}
+										showLivePlayable={showLivePlayable}
+									/>
+								)}
 							{showLivePlayable &&
 								liveUpdatesPosition === 'inner' && (
 									<Island