Move background colour to wrapper rather than only content

Author: abeddow91

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

@@ -732,6 +732,7 @@ export const Card = ({
 			showTopBarMobile={showTopBarMobile}
 			containerPalette={containerPalette}
 			isOnwardContent={isOnwardContent}
+			cardBackgroundColour={backgroundColour}
 		>
 			<CardLink
 				linkTo={linkTo}
@@ -782,7 +783,6 @@ export const Card = ({
 			)}
 
 			<CardLayout
-				cardBackgroundColour={backgroundColour}
 				imagePositionOnDesktop={imagePositionOnDesktop}
 				imagePositionOnMobile={imagePositionOnMobile}
 				minWidthInPixels={minWidthInPixels}

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

@@ -13,7 +13,6 @@ export type GapSizes = { row: GapSize; column: GapSize };
 
 type Props = {
 	children: React.ReactNode;
-	cardBackgroundColour: string;
 	imageType: CardImageType | undefined;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
@@ -173,7 +172,6 @@ const isVerticalLayout = (imagePosition: ImagePositionType) => {
 
 export const CardLayout = ({
 	children,
-	cardBackgroundColour,
 	imagePositionOnDesktop,
 	imagePositionOnMobile,
 	minWidthInPixels,
@@ -199,7 +197,6 @@ export const CardLayout = ({
 				isVerticalLayout(imagePositionOnDesktop) && desktopFlexBasis,
 			]}
 			style={{
-				backgroundColor: cardBackgroundColour,
 				rowGap: decideGap(gapSizes.row),
 				columnGap: decideGap(gapSizes.column),
 			}}

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

@@ -9,6 +9,7 @@ import { FormatBoundary } from '../../FormatBoundary';
 type Props = {
 	children: React.ReactNode;
 	format: ArticleFormat;
+	cardBackgroundColour: string;
 	containerPalette?: DCRContainerPalette;
 	showTopBarDesktop?: boolean;
 	showTopBarMobile?: boolean;
@@ -98,6 +99,7 @@ export const CardWrapper = ({
 	showTopBarDesktop = true,
 	showTopBarMobile = false,
 	isOnwardContent = false,
+	cardBackgroundColour,
 }: Props) => {
 	return (
 		<FormatBoundary format={format}>
@@ -111,6 +113,7 @@ export const CardWrapper = ({
 						showTopBarMobile && mobileTopBarStyles,
 						isOnwardContent && onwardContentStyles,
 					]}
+					style={{ backgroundColor: cardBackgroundColour }}
 				>
 					{children}
 				</div>