Pad content based on card properties (#13076)

* Pad content based on card properties * Fix linting * Refactor to avoid interpolating space values
guardian · Jan 7, 2025 · 1994408 · 1994408
1 parent 91e0c5a
commit 1994408
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -569,6 +569,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}
@@ -817,8 +827,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}