Merge branch 'main' into sa-crossword-design

guardian · Jan 7, 2025 · 0fce0e3 · 0fce0e3
2 parents 7559d9f + 17d98a7
commit 0fce0e3
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 312 deletions.
diff --git a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -427,11 +427,6 @@ export const Card = ({
 		);
 	}
 
-	// If the card isn't playable, we need to show a play icon.
-	// Otherwise, this is handled by the YoutubeAtom
-	const showPlayIcon =
-		mainMedia?.type === 'Video' && !canPlayInline && showMainVideo;
-
 	const media = getMedia({
 		imageUrl: image?.src,
 		imageAltText: image?.altText,
@@ -569,6 +564,16 @@ export const Card = ({
 		);
 	};
 
+	const determinePadContent = (
+		mediaCard: boolean,
+		betaContainer: boolean,
+		onwardContent: boolean,
+	): 'large' | 'small' | undefined => {
+		if (mediaCard && betaContainer) return 'large';
+		if (mediaCard || onwardContent) return 'small';
+		return undefined;
+	};
+
 	return (
 		<CardWrapper
 			format={format}
@@ -641,7 +646,6 @@ export const Card = ({
 						imageType={media.type}
 						imagePositionOnDesktop={imagePositionOnDesktop}
 						imagePositionOnMobile={imagePositionOnMobile}
-						showPlayIcon={showPlayIcon}
 						hideImageOverlay={
 							media.type === 'slideshow' && isFlexibleContainer
 						}
@@ -793,17 +797,18 @@ export const Card = ({
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
 								/>
-								{showPlayIcon && mainMedia.duration > 0 && (
-									<MediaDuration
-										mediaDuration={mainMedia.duration}
-										imagePositionOnDesktop={
-											imagePositionOnDesktop
-										}
-										imagePositionOnMobile={
-											imagePositionOnMobile
-										}
-									/>
-								)}
+								{mainMedia?.type === 'Video' &&
+									mainMedia.duration > 0 && (
+										<MediaDuration
+											mediaDuration={mainMedia.duration}
+											imagePositionOnDesktop={
+												imagePositionOnDesktop
+											}
+											imagePositionOnMobile={
+												imagePositionOnMobile
+											}
+										/>
+									)}
 							</>
 						)}
 						{media.type === 'crossword' && (
@@ -817,8 +822,11 @@ export const Card = ({
 						imageType={media?.type}
 						imageSize={imageSize}
 						imagePositionOnDesktop={imagePositionOnDesktop}
-						hasBackgroundColour={isMediaCard}
-						isOnwardContent={isOnwardContent}
+						padContent={determinePadContent(
+							isMediaCard,
+							isBetaContainer,
+							isOnwardContent,
+						)}
 						isFlexibleContainer={isFlexibleContainer}
 					>
 						{/* This div is needed to keep the headline and trail text justified at the start */}

diff --git a/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx b/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx
@@ -64,6 +64,7 @@ const flexBasisStyles = ({
 const paddingStyles = (
 	imagePosition: ImagePositionType,
 	isFlexibleContainer: boolean,
+	paddingWidth: 1 | 2,
 ) => {
 	/**
 	 * If we're in a flexible container there is a 20px gap between the image
@@ -72,18 +73,20 @@ const paddingStyles = (
 	 */
 	if (isFlexibleContainer && imagePosition === 'left') {
 		return css`
-			padding: ${space[1]}px ${space[1]}px ${space[1]}px 0;
+			padding: ${space[paddingWidth]}px ${space[paddingWidth]}px
+				${space[paddingWidth]}px 0;
 		`;
 	}
 
 	if (isFlexibleContainer && imagePosition === 'right') {
 		return css`
-			padding: ${space[1]}px 0 ${space[1]}px ${space[1]}px;
+			padding: ${space[paddingWidth]}px 0 ${space[paddingWidth]}px
+				${space[paddingWidth]}px;
 		`;
 	}
 
 	return css`
-		padding: ${space[1]}px;
+		padding: ${space[paddingWidth]}px;
 	`;
 };
 
@@ -92,8 +95,7 @@ type Props = {
 	imageType?: CardImageType;
 	imageSize: ImageSizeType;
 	imagePositionOnDesktop: ImagePositionType;
-	hasBackgroundColour?: boolean;
-	isOnwardContent?: boolean;
+	padContent?: 'small' | 'large';
 	isFlexibleContainer?: boolean;
 };
 
@@ -102,8 +104,7 @@ export const ContentWrapper = ({
 	imageType,
 	imageSize,
 	imagePositionOnDesktop,
-	hasBackgroundColour,
-	isOnwardContent,
+	padContent,
 	isFlexibleContainer = false,
 }: Props) => {
 	const isHorizontalOnDesktop =
@@ -115,8 +116,12 @@ export const ContentWrapper = ({
 				sizingStyles,
 				isHorizontalOnDesktop &&
 					flexBasisStyles({ imageSize, imageType }),
-				(!!hasBackgroundColour || !!isOnwardContent) &&
-					paddingStyles(imagePositionOnDesktop, isFlexibleContainer),
+				padContent &&
+					paddingStyles(
+						imagePositionOnDesktop,
+						isFlexibleContainer,
+						padContent === 'small' ? 1 : 2,
+					),
 			]}
 		>
 			{children}