Use tighter types on accent image

guardian · Dec 18, 2024 · 0495064 · 0495064
1 parent 4d98639
commit 0495064
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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'}
 					/>