diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 1756f059d1..d6e25c0273 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -919,8 +919,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 d26330fa68..0653b1d399 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'; @@ -224,7 +225,7 @@ export const SplashCardLayout = ({ showTopBarMobile={true} trailTextSize={trailTextSize} canPlayInline={true} - showAccentImage={true} + showAccentImage={card.format.design === ArticleDesign.Audio} /> @@ -337,7 +338,7 @@ export const BoostedCardLayout = ({ showTopBarMobile={true} liveUpdatesPosition={liveUpdatesPosition} canPlayInline={true} - showAccentImage={true} + showAccentImage={card.format.design === ArticleDesign.Audio} /> diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index b0b0e0f3a2..a4592bb4ad 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 { @@ -167,7 +168,7 @@ export const OneCardLayout = ({ showTopBarMobile={true} trailTextSize={trailTextSize} canPlayInline={true} - showAccentImage={true} + showAccentImage={card.format.design === ArticleDesign.Audio} /> 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 && (