WIP

guardian · Dec 17, 2024 · 825e89a · 825e89a
1 parent 9dbff5e
commit 825e89a
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 34 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -142,6 +142,7 @@ export type Props = {
 	/** The square podcast series image, if it exists for a card */
 	podcastImage?: PodcastSeriesImage;
 	galleryCount?: number;
+	showAccentImage?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -220,7 +221,7 @@ const getMedia = ({
 		return {
 			type: 'podcast',
 			podcastImage,
-			trailImage: { src: imageUrl, altText: imageAltText },
+			...(imageUrl && { imageUrl }),
 		} as const;
 	}
 	if (imageUrl) {
@@ -260,11 +261,14 @@ const getHeadlinePosition = ({
 	isFlexSplash,
 	containerType,
 	showLivePlayable,
+	isMediaCard,
 }: {
 	containerType?: DCRContainerType;
 	isFlexSplash?: boolean;
 	showLivePlayable: boolean;
+	isMediaCard: boolean;
 }) => {
+	if (isMediaCard) return 'inner';
 	if (containerType === 'flexible/special' && isFlexSplash) {
 		return 'outer';
 	}
@@ -316,6 +320,7 @@ const podcastImageStyles = (imageSize: ImageSizeType) => {
 			`;
 	}
 };
+
 export const Card = ({
 	linkTo,
 	format,
@@ -373,7 +378,9 @@ export const Card = ({
 	podcastImage,
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added in preparation for UI changes to display gallery count
 	galleryCount,
+	showAccentImage = false,
 }: Props) => {
+	console.log({ headlineText, showAccentImage });
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
 		supportingContent,
@@ -469,6 +476,8 @@ export const Card = ({
 		isBetaContainer,
 	});
 
+	console.log({ headlineText, media });
+
 	// For opinion type cards with avatars (which aren't onwards content)
 	// we render the footer in a different location
 	const showCommentFooter =
@@ -503,6 +512,7 @@ export const Card = ({
 		containerType,
 		isFlexSplash,
 		showLivePlayable,
+		isMediaCard: isMediaCard(format),
 	});
 
 	const hideTrailTextUntil = () => {
@@ -828,24 +838,36 @@ export const Card = ({
 						{media.type === 'crossword' && (
 							<img src={media.imageUrl} alt="" />
 						)}
-						{media.type === 'podcast' && media.podcastImage.src && (
-							<div
-								css={[
-									css`
-										margin: 8px;
-									`,
-									podcastImageStyles(imageSize),
-								]}
-							>
-								<CardPicture
-									mainImage={media.podcastImage.src}
-									imageSize={imageSize}
-									alt={media.imageAltText}
-									loading={imageLoading}
-									roundedCorners={isOnwardContent}
-									aspectRatio={'1:1'}
-								/>
-							</div>
+						{media.type === 'podcast' && (
+							<>
+								{media.podcastImage.src && !showAccentImage ? (
+									<div
+										css={[
+											css`
+												margin: 8px;
+											`,
+											podcastImageStyles(imageSize),
+										]}
+									>
+										<CardPicture
+											mainImage={media.podcastImage.src}
+											imageSize={'small'}
+											alt={media.imageAltText}
+											loading={imageLoading}
+											roundedCorners={isOnwardContent}
+											aspectRatio={'1:1'}
+										/>
+									</div>
+								) : (
+									<CardPicture
+										mainImage={media.imageUrl ?? ''}
+										imageSize={imageSize}
+										alt={media.imageAltText}
+										loading={imageLoading}
+										aspectRatio={aspectRatio}
+									/>
+								)}
+							</>
 						)}
 					</ImageWrapper>
 				)}
@@ -890,6 +912,12 @@ export const Card = ({
 										showByline={showByline}
 										isExternalLink={isExternalLink}
 										isBetaContainer={isBetaContainer}
+										accentImage={
+											showAccentImage &&
+											media?.type === 'podcast'
+												? media?.podcastImage?.src
+												: ''
+										}
 									/>
 									{!isUndefined(starRating) ? (
 										<StarRatingComponent
@@ -907,7 +935,7 @@ export const Card = ({
 								</HeadlineWrapper>
 							)}
 
-							{!!trailText && (
+							{!!trailText && media?.type !== 'podcast' && (
 								<TrailText
 									trailText={trailText}
 									trailTextColour={trailTextColour}

diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
@@ -137,7 +137,9 @@ export const ImageWrapper = ({
 					flexBasisStyles({
 						imageSize,
 					}),
-				(imageType === 'picture' || imageType === 'video') &&
+				(imageType === 'picture' ||
+					imageType === 'video' ||
+					'podcast') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({
 						imageSize,

diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx
@@ -62,6 +62,7 @@ type Props = {
 	/** Optional override of the standard card kicker colour */
 	kickerColour?: string;
 	isBetaContainer?: boolean;
+	accentImage?: string;
 };
 
 const sublinkStyles = css`
@@ -230,6 +231,7 @@ export const CardHeadline = ({
 	headlineColour = palette('--card-headline'),
 	kickerColour = palette('--card-kicker-text'),
 	isBetaContainer = false,
+	accentImage,
 }: Props) => {
 	// The link is only applied directly to the headline if it is a sublink
 	const isSublink = !!linkTo;
@@ -256,6 +258,7 @@ export const CardHeadline = ({
 						color={kickerColour}
 						showPulsingDot={showPulsingDot}
 						isInline={hasInlineKicker}
+						accentImage={accentImage}
 					/>
 				)}
 				{showQuotes && <QuoteIcon colour={kickerColour} />}

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -1,3 +1,4 @@
+import { isMediaCard } from '../lib/cardHelpers';
 import { palette } from '../palette';
 import type { BoostLevel } from '../types/content';
 import type {
@@ -86,6 +87,7 @@ type BoostedSplashProperties = {
 const decideSplashCardProperties = (
 	boostLevel: BoostLevel,
 	supportingContentLength: number,
+	isMediaCard: boolean,
 ): BoostedSplashProperties => {
 	switch (boostLevel) {
 		// boostedfont sizing
@@ -98,7 +100,7 @@ const decideSplashCardProperties = (
 					mobile: 'medium',
 				},
 				imagePositionOnDesktop: 'right',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'large',
 				supportingContentAlignment:
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
@@ -113,7 +115,7 @@ const decideSplashCardProperties = (
 					mobile: 'large',
 				},
 				imagePositionOnDesktop: 'right',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment:
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
@@ -127,8 +129,8 @@ const decideSplashCardProperties = (
 					tablet: 'xlarge',
 					mobile: 'xlarge',
 				},
-				imagePositionOnDesktop: 'bottom',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
@@ -141,8 +143,8 @@ const decideSplashCardProperties = (
 					tablet: 'xlarge',
 					mobile: 'xxlarge',
 				},
-				imagePositionOnDesktop: 'bottom',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
@@ -182,6 +184,7 @@ export const SplashCardLayout = ({
 	} = decideSplashCardProperties(
 		card.boostLevel ?? 'default',
 		card.supportingContent?.length ?? 0,
+		isMediaCard(card.format),
 	);
 
 	return (
@@ -220,6 +223,7 @@ export const SplashCardLayout = ({
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					trailTextSize={trailTextSize}
+					showAccentImage={true}
 				/>
 			</LI>
 		</UL>
@@ -312,7 +316,9 @@ export const BoostedCardLayout = ({
 					absoluteServerTimes={absoluteServerTimes}
 					headlineSizes={headlineSizes}
 					imagePositionOnDesktop={'right'}
-					imagePositionOnMobile={'bottom'}
+					imagePositionOnMobile={
+						isMediaCard(card.format) ? 'top' : 'bottom'
+					}
 					imageSize={imageSize}
 					trailText={card.trailText}
 					supportingContent={card.supportingContent}
@@ -329,6 +335,7 @@ export const BoostedCardLayout = ({
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					liveUpdatesPosition={liveUpdatesPosition}
+					showAccentImage={true}
 				/>
 			</LI>
 		</UL>

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -43,6 +43,7 @@ type BoostProperties = {
 const determineCardProperties = (
 	boostLevel: BoostLevel,
 	supportingContentLength: number,
+	isMediaCard: boolean,
 ): BoostProperties => {
 	switch (boostLevel) {
 		// The default boost level is equal to no boost. It is the same as the default card layout.
@@ -54,7 +55,7 @@ const determineCardProperties = (
 					mobile: 'medium',
 				},
 				imagePositionOnDesktop: 'right',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'large',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
@@ -70,7 +71,7 @@ const determineCardProperties = (
 					mobile: 'large',
 				},
 				imagePositionOnDesktop: 'right',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
@@ -84,8 +85,8 @@ const determineCardProperties = (
 					tablet: 'xlarge',
 					mobile: 'xlarge',
 				},
-				imagePositionOnDesktop: 'bottom',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
@@ -98,8 +99,8 @@ const determineCardProperties = (
 					tablet: 'xxlarge',
 					mobile: 'xxlarge',
 				},
-				imagePositionOnDesktop: 'bottom',
-				imagePositionOnMobile: 'bottom',
+				imagePositionOnDesktop: isMediaCard ? 'top' : 'bottom',
+				imagePositionOnMobile: isMediaCard ? 'top' : 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
@@ -138,6 +139,7 @@ export const OneCardLayout = ({
 	} = determineCardProperties(
 		card.boostLevel ?? 'default',
 		card.supportingContent?.length ?? 0,
+		isMediaCard(card.format),
 	);
 	return (
 		<UL padBottom={!isLastRow} hasLargeSpacing={!isLastRow}>
@@ -164,6 +166,7 @@ export const OneCardLayout = ({
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					trailTextSize={trailTextSize}
+					showAccentImage={true}
 				/>
 			</LI>
 		</UL>

diff --git a/dotcom-rendering/src/components/Kicker.tsx b/dotcom-rendering/src/components/Kicker.tsx
@@ -6,6 +6,7 @@ import {
 	textSansBold15,
 } from '@guardian/source/foundations';
 import { palette } from '../palette';
+import { CardPicture } from './CardPicture';
 import { Island } from './Island';
 import { PulsingDot } from './PulsingDot.importable';
 
@@ -17,6 +18,7 @@ type Props = {
 	isInline?: boolean;
 	/** Controls the weight of the standard, non-live kicker. Defaults to regular */
 	fontWeight?: 'regular' | 'bold';
+	accentImage?: string;
 };
 
 const standardTextStyles = css`
@@ -62,6 +64,7 @@ export const Kicker = ({
 	showPulsingDot,
 	isInline,
 	fontWeight = 'regular',
+	accentImage,
 }: Props) => {
 	/**
 	 * @todo
@@ -88,6 +91,24 @@ export const Kicker = ({
 					: 'transparent',
 			}}
 		>
+			{accentImage && (
+				<div
+					css={[
+						css`
+							height: 88px;
+							width: 88px;
+						`,
+					]}
+				>
+					<CardPicture
+						mainImage={accentImage}
+						imageSize={'small'}
+						alt={'media.imageAltText'} // TODO : pass through
+						loading={'lazy'}
+						aspectRatio={'1:1'}
+					/>
+				</div>
+			)}
 			{showPulsingDot && (
 				<Island priority="enhancement" defer={{ until: 'visible' }}>
 					<PulsingDot colour={palette('--kicker-pulsing-dot-live')} />