From 0495064d4aaaa873578b4ed7807b8ffad7d1590b Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Wed, 18 Dec 2024 11:05:15 +0000
Subject: [PATCH] Use tighter types on accent image

---
 dotcom-rendering/src/components/Card/Card.tsx       | 4 ++--
 dotcom-rendering/src/components/CardHeadline.tsx    | 3 ++-
 dotcom-rendering/src/components/FlexibleGeneral.tsx | 5 +++--
 dotcom-rendering/src/components/FlexibleSpecial.tsx | 3 ++-
 dotcom-rendering/src/components/Kicker.tsx          | 9 +++++----
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index c751c9acec..61cfa56064 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -914,8 +914,8 @@ export const Card = ({
 										accentImage={
 											showAccentImage &&
 											media?.type === 'podcast'
-												? media?.podcastImage?.src
-												: ''
+												? media?.podcastImage
+												: undefined
 										}
 									/>
 									{!isUndefined(starRating) ? (
diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx
index 1aed72b12f..309ef1d1b9 100644
--- a/dotcom-rendering/src/components/CardHeadline.tsx
+++ b/dotcom-rendering/src/components/CardHeadline.tsx
@@ -37,6 +37,7 @@ import {
 } from '../lib/articleFormat';
 import { getZIndex } from '../lib/getZIndex';
 import { palette } from '../palette';
+import { PodcastSeriesImage } from '../types/tag';
 import { Byline } from './Byline';
 import { Kicker } from './Kicker';
 import { QuoteIcon } from './QuoteIcon';
@@ -62,7 +63,7 @@ type Props = {
 	/** Optional override of the standard card kicker colour */
 	kickerColour?: string;
 	isBetaContainer?: boolean;
-	accentImage?: string;
+	accentImage?: PodcastSeriesImage;
 };
 
 const sublinkStyles = css`
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
index c4b46956bf..a69ae43f9f 100644
--- a/dotcom-rendering/src/components/FlexibleGeneral.tsx
+++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -1,3 +1,4 @@
+import { ArticleDesign } from '../lib/articleFormat';
 import { isMediaCard } from '../lib/cardHelpers';
 import { palette } from '../palette';
 import type { BoostLevel } from '../types/content';
@@ -223,7 +224,7 @@ export const SplashCardLayout = ({
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					trailTextSize={trailTextSize}
-					showAccentImage={true}
+					showAccentImage={card.format.design === ArticleDesign.Audio}
 				/>
 			</LI>
 		</UL>
@@ -335,7 +336,7 @@ export const BoostedCardLayout = ({
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					liveUpdatesPosition={liveUpdatesPosition}
-					showAccentImage={true}
+					showAccentImage={card.format.design === ArticleDesign.Audio}
 				/>
 			</LI>
 		</UL>
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
index 96c2f47b2f..7740ef0336 100644
--- a/dotcom-rendering/src/components/FlexibleSpecial.tsx
+++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -1,3 +1,4 @@
+import { ArticleDesign } from '../lib/articleFormat';
 import { isMediaCard } from '../lib/cardHelpers';
 import type { BoostLevel } from '../types/content';
 import type {
@@ -166,7 +167,7 @@ export const OneCardLayout = ({
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					trailTextSize={trailTextSize}
-					showAccentImage={true}
+					showAccentImage={card.format.design === ArticleDesign.Audio}
 				/>
 			</LI>
 		</UL>
diff --git a/dotcom-rendering/src/components/Kicker.tsx b/dotcom-rendering/src/components/Kicker.tsx
index 9563869657..a414f36283 100644
--- a/dotcom-rendering/src/components/Kicker.tsx
+++ b/dotcom-rendering/src/components/Kicker.tsx
@@ -9,6 +9,7 @@ import { palette } from '../palette';
 import { CardPicture } from './CardPicture';
 import { Island } from './Island';
 import { PulsingDot } from './PulsingDot.importable';
+import { PodcastSeriesImage } from '../types/tag';
 
 type Props = {
 	text: string;
@@ -18,7 +19,7 @@ type Props = {
 	isInline?: boolean;
 	/** Controls the weight of the standard, non-live kicker. Defaults to regular */
 	fontWeight?: 'regular' | 'bold';
-	accentImage?: string;
+	accentImage?: PodcastSeriesImage;
 };
 
 const standardTextStyles = css`
@@ -91,7 +92,7 @@ export const Kicker = ({
 					: 'transparent',
 			}}
 		>
-			{accentImage && (
+			{accentImage?.src && (
 				<div
 					css={[
 						css`
@@ -101,9 +102,9 @@ export const Kicker = ({
 					]}
 				>
 					<CardPicture
-						mainImage={accentImage}
+						mainImage={accentImage.src}
 						imageSize={'small'}
-						alt={'media.imageAltText'} // TODO : pass through
+						alt={accentImage.altText}
 						loading={'lazy'}
 						aspectRatio={'1:1'}
 					/>