Refactor Podcast image styling

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 */
@@ -228,10 +226,10 @@ const HorizontalDivider = () => (
 );
 
 const podcastImageStyles = (
-	fixImageWidth: boolean,
+	isSmallCard: boolean,
 	imagePositionOnDesktop: MediaPositionType,
 ) => {
-	if (fixImageWidth) {
+	if (isSmallCard) {
 		return css`
 			width: 69px;
 			height: 69px;
@@ -242,22 +240,17 @@ const podcastImageStyles = (
 		`;
 	}
 
-	if (
-		imagePositionOnDesktop === 'top' ||
-		imagePositionOnDesktop === 'bottom'
-	) {
-		return css`
-			width: 98px;
-			height: 98px;
-			${from.tablet} {
-				width: 120px;
-				height: 120px;
-			}
-		`;
-	}
+	const isHorizontalOnDesktop =
+		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
 
-	// Don't fix the image width if the image is horizontal on desktop
-	return undefined;
+	return css`
+		width: 98px;
+		height: 98px;
+		${from.tablet} {
+			width: ${isHorizontalOnDesktop ? 'unset' : '120px'};
+			height: ${isHorizontalOnDesktop ? 'unset' : '120px'};
+		}
+	`;
 };
 
 const getMedia = ({
@@ -403,7 +396,6 @@ export const Card = ({
 	showTopBarMobile = true,
 	trailTextSize,
 	showKickerImage = false,
-	fixImageWidth,
 	headlinePosition = 'inner',
 	showLabsRedesign = false,
 }: Props) => {
@@ -590,27 +582,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) {
@@ -664,7 +636,10 @@ export const Card = ({
 			return { row: 'small', column: 'small' };
 		}
 
-		if (isSmallCard) {
+		if (
+			containerType === 'scrollable/small' ||
+			containerType === 'scrollable/medium'
+		) {
 			return {
 				row: 'medium',
 				column: 'medium',
@@ -906,19 +881,13 @@ export const Card = ({
 				{media && (
 					<MediaWrapper
 						mediaSize={mediaSize}
-						mediaFixedSizes={mediaFixedSizeOptions()}
 						mediaType={media.type}
 						mediaPositionOnDesktop={mediaPositionOnDesktop}
 						mediaPositionOnMobile={mediaPositionOnMobile}
-						fixImageWidth={
-							fixImageWidth ??
-							(!isBetaContainer &&
-								(mediaPositionOnMobile === 'left' ||
-									mediaPositionOnMobile === 'right'))
-						}
 						hideImageOverlay={media.type === 'slideshow'}
 						padMedia={isMediaCardOrNewsletter && isBetaContainer}
 						isBetaContainer={isBetaContainer}
+						isSmallCard={isSmallCard}
 					>
 						{media.type === 'slideshow' && (
 							<div
@@ -1126,7 +1095,7 @@ export const Card = ({
 								{media.podcastImage?.src && !showKickerImage ? (
 									<div
 										css={podcastImageStyles(
-											!!fixImageWidth,
+											isSmallCard,
 											mediaPositionOnDesktop,
 										)}
 									>

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;
 };
 
@@ -150,6 +141,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 +155,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])}
-		}
-	`}
-	${tablet &&
-	css`
-		${between.tablet.and.desktop} {
-			${fixMediaWidthStyles(mediaFixedSize[tablet])}
+			${fixMediaWidthStyles(size)}
 		}
-	`}
-	${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';
 
@@ -215,15 +212,6 @@ export const MediaWrapper = ({
 						mediaSize,
 						isBetaContainer,
 					}),
-				mediaType === 'podcast' &&
-					isHorizontalOnDesktop &&
-					!fixImageWidth &&
-					css`
-						flex-basis: 120px;
-						${from.desktop} {
-							flex-basis: 168px;
-						}
-					`,
 				mediaType === 'avatar' &&
 					css`
 						display: flex;
@@ -236,7 +224,19 @@ export const MediaWrapper = ({
 							display: none;
 						}
 					`,
-				fixImageWidth && fixMediaWidth(mediaFixedSizes),
+				isHorizontalOnMobile &&
+					mediaType !== 'podcast' &&
+					fixMobileMediaWidth(isBetaContainer, isSmallCard),
+				isSmallCard && fixDesktopMediaWidth(),
+				mediaType === 'podcast' &&
+					isHorizontalOnDesktop &&
+					!isSmallCard &&
+					css`
+						flex-basis: 120px;
+						${from.desktop} {
+							flex-basis: 168px;
+						}
+					`,
 				isHorizontalOnDesktop &&
 					css`
 						${from.tablet} {

dotcom-rendering/src/components/ScrollableSmall.importable.tsx

@@ -104,7 +104,6 @@ export const ScrollableSmall = ({
 							showTopBarMobile={mobileBottomCards.includes(index)}
 							canPlayInline={false}
 							showLabsRedesign={showLabsRedesign}
-							fixImageWidth={true}
 						/>
 					</ScrollableCarousel.Item>
 				);