Merge pull request #14753 from guardian/doml/podcast-sizing-flexgen

Extend podcast image size in Flexible General half-width slot

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -66,7 +66,6 @@ import { CardWrapper } from './components/CardWrapper';
 import { ContentWrapper } from './components/ContentWrapper';
 import { HeadlineWrapper } from './components/HeadlineWrapper';
 import type {
-	MediaFixedSizeOptions,
 	MediaPositionType,
 	MediaSizeType,
 } from './components/MediaWrapper';
@@ -157,7 +156,6 @@ export type Props = {
 	trailTextSize?: TrailTextSize;
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
-	fixImageWidth?: boolean;
 	/** Determines if the headline should be positioned within the content or outside the content */
 	headlinePosition?: 'inner' | 'outer';
 	/** Feature flag for the labs redesign work */
@@ -227,33 +225,37 @@ const HorizontalDivider = () => (
 	/>
 );
 
-const podcastImageStyles = (imageSize: MediaSizeType) => {
-	switch (imageSize) {
-		case 'scrollable-small':
-			return css`
-				width: 69px;
-				height: 69px;
-				${from.tablet} {
-					width: 98px;
-					height: 98px;
-				}
-			`;
-
-		case 'scrollable-medium':
-			return css`
+const podcastImageStyles = (
+	isSmallCard: boolean,
+	imagePositionOnDesktop: MediaPositionType,
+) => {
+	if (isSmallCard) {
+		return css`
+			width: 69px;
+			height: 69px;
+			${from.tablet} {
 				width: 98px;
 				height: 98px;
-				${from.tablet} {
-					width: 120px;
-					height: 120px;
-				}
-			`;
-		default:
-			return css`
-				width: 120px;
-				height: 120px;
-			`;
+			}
+		`;
 	}
+
+	const isHorizontalOnDesktop =
+		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
+
+	return css`
+		width: 98px;
+		height: 98px;
+		${from.tablet} {
+			width: 120px;
+			height: 120px;
+		}
+		/** The image takes the full height on desktop, so that the waveform sticks to the bottom of the card. */
+		${from.desktop} {
+			width: ${isHorizontalOnDesktop ? 'unset' : '120px'};
+			height: ${isHorizontalOnDesktop ? 'unset' : '120px'};
+		}
+	`;
 };
 
 const getMedia = ({
@@ -399,7 +401,6 @@ export const Card = ({
 	showTopBarMobile = true,
 	trailTextSize,
 	showKickerImage = false,
-	fixImageWidth,
 	headlinePosition = 'inner',
 	showLabsRedesign = false,
 }: Props) => {
@@ -586,27 +587,7 @@ export const Card = ({
 		containerType === 'flexible/special' ||
 		containerType === 'flexible/general';
 
-	const isSmallCard =
-		containerType === 'scrollable/small' ||
-		containerType === 'scrollable/medium';
-
-	const mediaFixedSizeOptions = (): MediaFixedSizeOptions => {
-		if (isSmallCard) {
-			return {
-				mobile: 'tiny',
-				tablet: 'small',
-				desktop: 'small',
-			};
-		}
-
-		if (isFlexibleContainer) {
-			return {
-				mobile: 'small',
-			};
-		}
-
-		return { mobile: 'medium' };
-	};
+	const isSmallCard = containerType === 'scrollable/small';
 
 	const hideTrailTextUntil = () => {
 		if (isFlexibleContainer) {
@@ -660,7 +641,10 @@ export const Card = ({
 			return { row: 'small', column: 'small' };
 		}
 
-		if (isSmallCard) {
+		if (
+			containerType === 'scrollable/small' ||
+			containerType === 'scrollable/medium'
+		) {
 			return {
 				row: 'medium',
 				column: 'medium',
@@ -902,18 +886,13 @@ export const Card = ({
 				{media && (
 					<MediaWrapper
 						mediaSize={mediaSize}
-						mediaFixedSizes={mediaFixedSizeOptions()}
 						mediaType={media.type}
 						mediaPositionOnDesktop={mediaPositionOnDesktop}
 						mediaPositionOnMobile={mediaPositionOnMobile}
-						fixImageWidth={
-							fixImageWidth ??
-							(mediaPositionOnMobile === 'left' ||
-								mediaPositionOnMobile === 'right')
-						}
 						hideImageOverlay={media.type === 'slideshow'}
 						padMedia={isMediaCardOrNewsletter && isBetaContainer}
 						isBetaContainer={isBetaContainer}
+						isSmallCard={isSmallCard}
 					>
 						{media.type === 'slideshow' && (
 							<div
@@ -1119,7 +1098,12 @@ export const Card = ({
 						{media.type === 'podcast' && (
 							<>
 								{media.podcastImage?.src && !showKickerImage ? (
-									<div css={podcastImageStyles(mediaSize)}>
+									<div
+										css={podcastImageStyles(
+											isSmallCard,
+											mediaPositionOnDesktop,
+										)}
+									>
 										<CardPicture
 											mainImage={media.podcastImage.src}
 											imageSize="small"

dotcom-rendering/src/components/Card/components/MediaWrapper.tsx

@@ -9,14 +9,6 @@ const mediaFixedSize = {
 	medium: 125,
 };
 
-type MediaFixedSize = keyof typeof mediaFixedSize;
-
-export type MediaFixedSizeOptions = {
-	mobile?: MediaFixedSize;
-	tablet?: MediaFixedSize;
-	desktop?: MediaFixedSize;
-};
-
 export type MediaPositionType = 'left' | 'top' | 'right' | 'bottom' | 'none';
 export type MediaSizeType =
 	| 'small'
@@ -36,18 +28,17 @@ export type MediaSizeType =
 type Props = {
 	children: React.ReactNode;
 	mediaSize: MediaSizeType;
-	mediaFixedSizes?: MediaFixedSizeOptions;
 	mediaType?: CardMediaType;
 	mediaPositionOnDesktop: MediaPositionType;
 	mediaPositionOnMobile: MediaPositionType;
-	fixImageWidth: boolean;
 	/**
 	 * Forces hiding the image overlay added to pictures & slideshows on hover.
 	 * This is to allow hiding the overlay on slideshow carousels where we don't
 	 * want it to be shown whilst retaining it for existing slideshows.
 	 */
 	hideImageOverlay?: boolean;
-	isBetaContainer?: boolean;
+	isBetaContainer: boolean;
+	isSmallCard: boolean;
 	padMedia?: boolean;
 };
 
@@ -86,9 +77,13 @@ const mediaPaddingStyles = (
  */
 const flexBasisStyles = ({
 	mediaSize,
+	mediaType,
+	isSmallCard,
 	isBetaContainer,
 }: {
 	mediaSize: MediaSizeType;
+	mediaType: CardMediaType;
+	isSmallCard: boolean;
 	isBetaContainer: boolean;
 }): SerializedStyles => {
 	if (!isBetaContainer) {
@@ -119,6 +114,15 @@ const flexBasisStyles = ({
 		}
 	}
 
+	if (mediaType === 'podcast' && !isSmallCard) {
+		return css`
+			flex-basis: 120px;
+			${from.desktop} {
+				flex-basis: 168px;
+			}
+		`;
+	}
+
 	switch (mediaSize) {
 		default:
 		case 'small':
@@ -150,6 +154,7 @@ const flexBasisStyles = ({
 			`;
 	}
 };
+
 /**
  * Below tablet, we fix the size of the media and add a margin around it.
  * The corresponding content flex grows to fill the space.
@@ -163,43 +168,48 @@ const fixMediaWidthStyles = (width: number) => css`
 	align-self: flex-start;
 `;
 
-const fixMediaWidth = ({
-	mobile,
-	tablet,
-	desktop,
-}: MediaFixedSizeOptions) => css`
-	${mobile &&
-	css`
+const fixMobileMediaWidth = (
+	isBetaContainer: boolean,
+	isSmallCard: boolean,
+) => {
+	if (!isBetaContainer) {
+		return css`
+			${until.tablet} {
+				${fixMediaWidthStyles(mediaFixedSize.medium)}
+			}
+		`;
+	}
+
+	const size = isSmallCard ? mediaFixedSize.tiny : mediaFixedSize.small;
+
+	return css`
 		${until.tablet} {
-			${fixMediaWidthStyles(mediaFixedSize[mobile])}
+			${fixMediaWidthStyles(size)}
 		}
-	`}
-	${tablet &&
-	css`
-		${between.tablet.and.desktop} {
-			${fixMediaWidthStyles(mediaFixedSize[tablet])}
-		}
-	`}
-	${desktop &&
-	css`
-		${from.desktop} {
-			${fixMediaWidthStyles(mediaFixedSize[desktop])}
+	`;
+};
+
+const fixDesktopMediaWidth = () => {
+	return css`
+		${from.tablet} {
+			${fixMediaWidthStyles(mediaFixedSize.small)}
 		}
-	`}
-`;
+	`;
+};
 
 export const MediaWrapper = ({
 	children,
 	mediaSize,
-	mediaFixedSizes = { mobile: 'medium' },
 	mediaType,
 	mediaPositionOnDesktop,
 	mediaPositionOnMobile,
-	fixImageWidth,
 	hideImageOverlay,
-	isBetaContainer = false,
+	isBetaContainer,
+	isSmallCard,
 	padMedia,
 }: Props) => {
+	const isHorizontalOnMobile =
+		mediaPositionOnMobile === 'left' || mediaPositionOnMobile === 'right';
 	const isHorizontalOnDesktop =
 		mediaPositionOnDesktop === 'left' || mediaPositionOnDesktop === 'right';
 
@@ -209,10 +219,13 @@ export const MediaWrapper = ({
 				(mediaType === 'slideshow' ||
 					mediaType === 'picture' ||
 					mediaType === 'youtube-video' ||
-					mediaType === 'loop-video') &&
+					mediaType === 'loop-video' ||
+					mediaType === 'podcast') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({
 						mediaSize,
+						mediaType,
+						isSmallCard,
 						isBetaContainer,
 					}),
 				mediaType === 'avatar' &&
@@ -227,7 +240,10 @@ export const MediaWrapper = ({
 							display: none;
 						}
 					`,
-				fixImageWidth && fixMediaWidth(mediaFixedSizes),
+				isHorizontalOnMobile &&
+					mediaType !== 'podcast' &&
+					fixMobileMediaWidth(isBetaContainer, isSmallCard),
+				isSmallCard && fixDesktopMediaWidth(),
 				isHorizontalOnDesktop &&
 					css`
 						${from.tablet} {