Merge branch 'main' into allow-reject-all

dotcom-rendering/src/components/Caption.stories.tsx

@@ -217,3 +217,25 @@ export const ForVideos = {
 		},
 	},
 } satisfies Story;
+
+export const WhenImmersive = {
+	args: {
+		captionText:
+			'This is how a caption looks with immersive padding. Additional padding is added to the left and right of the caption to compensate for the negative margins applied to immersive images.',
+		format: Standard.args.format,
+		isImmersive: true,
+	},
+	parameters: {
+		chromatic: {
+			modes: {
+				'vertical mobileMedium': { disable: true },
+				'vertical mobile': allModes['vertical mobile'],
+				'vertical mobileLandscape':
+					allModes['vertical mobileLandscape'],
+				'vertical phablet': allModes['vertical tablet'],
+				'vertical desktop': allModes['vertical desktop'],
+				'vertical leftCol': allModes['vertical leftCol'],
+			},
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/components/Caption.tsx

@@ -28,6 +28,7 @@ type Props = {
 	isLeftCol?: boolean;
 	mediaType?: MediaType;
 	isMainMedia?: boolean;
+	isImmersive?: boolean;
 };
 
 type IconProps = {
@@ -123,6 +124,25 @@ const tabletCaptionPadding = css`
 	}
 `;
 
+const immersivePadding = css`
+	padding-left: 10px;
+	padding-right: 10px;
+	${from.mobileLandscape} {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+	${from.tablet} {
+		padding-right: 100px;
+	}
+	${from.desktop} {
+		padding-right: 340px;
+	}
+	${from.leftCol} {
+		padding-left: 0;
+		padding-right: 0;
+	}
+`;
+
 const bigLeftMargin = css`
 	width: inherit;
 	margin-left: ${space[9]}px;
@@ -228,6 +248,7 @@ export const Caption = ({
 	isLeftCol,
 	mediaType = 'Gallery',
 	isMainMedia = false,
+	isImmersive = false,
 }: Props) => {
 	// Sometimes captions come thorough as a single blank space, so we trim here to ignore those
 	const noCaption = !captionText?.trim();
@@ -249,6 +270,7 @@ export const Caption = ({
 					(isBlog || mediaType === 'Video') &&
 					tabletCaptionPadding,
 				padCaption && captionPadding,
+				isImmersive && immersivePadding,
 			]}
 			data-spacefinder-role="inline"
 		>

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

@@ -52,7 +52,7 @@ import { AvatarContainer } from './components/AvatarContainer';
 import { CardAge } from './components/CardAge';
 import { CardBranding } from './components/CardBranding';
 import { CardFooter } from './components/CardFooter';
-import { CardLayout, type GapSize } from './components/CardLayout';
+import { CardLayout, type GapSizes } from './components/CardLayout';
 import { CardLink } from './components/CardLink';
 import { CardWrapper } from './components/CardWrapper';
 import { ContentWrapper } from './components/ContentWrapper';
@@ -587,24 +587,51 @@ export const Card = ({
 	};
 
 	/** Determines the gap of between card components based on card properties */
-	const getGapSize = (): GapSize => {
-		if (isOnwardContent) return 'none';
-		if (isMediaCard && !isFlexibleContainer) return 'tiny';
+	const getGapSizes = (): GapSizes => {
+		if (isOnwardContent) {
+			return {
+				row: 'none',
+				column: 'none',
+			};
+		}
+		if (isMediaCard && !isFlexibleContainer) {
+			return {
+				row: 'tiny',
+				column: 'tiny',
+			};
+		}
 		if (!!isFlexSplash || (isFlexibleContainer && imageSize === 'jumbo')) {
-			return 'small';
+			return {
+				row: 'small',
+				column: 'small',
+			};
+		}
+		if (isSmallCard) {
+			return {
+				row: 'medium',
+				column: 'medium',
+			};
 		}
-		if (isSmallCard) return 'medium';
 		if (isBetaContainer && media?.type === 'avatar') {
-			return 'small';
+			return {
+				row: 'small',
+				column: 'small',
+			};
 		}
 		if (
 			isFlexibleContainer &&
 			(imagePositionOnDesktop === 'left' ||
 				imagePositionOnDesktop === 'right')
 		) {
-			return 'large';
+			return {
+				row: 'large',
+				column: 'large',
+			};
 		}
-		return 'small';
+		return {
+			row: isBetaContainer ? 'tiny' : 'small',
+			column: 'small',
+		};
 	};
 
 	/**
@@ -731,7 +758,7 @@ export const Card = ({
 				minWidthInPixels={minWidthInPixels}
 				imageType={media?.type}
 				containerType={containerType}
-				gapSize={getGapSize()}
+				gapSizes={getGapSizes()}
 				isBetaContainer={isBetaContainer}
 			>
 				{/**

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

@@ -9,6 +9,8 @@ const padding = 20;
 
 export type GapSize = 'none' | 'tiny' | 'small' | 'medium' | 'large';
 
+export type GapSizes = { row: GapSize; column: GapSize };
+
 type Props = {
 	children: React.ReactNode;
 	cardBackgroundColour: string;
@@ -17,7 +19,7 @@ type Props = {
 	imagePositionOnMobile: ImagePositionType;
 	minWidthInPixels?: number;
 	containerType?: DCRContainerType;
-	gapSize?: GapSize;
+	gapSizes: GapSizes;
 	isBetaContainer: boolean;
 };
 
@@ -162,27 +164,30 @@ export const CardLayout = ({
 	minWidthInPixels,
 	imageType,
 	containerType,
-	gapSize = 'small',
+	gapSizes,
 	isBetaContainer,
-}: Props) => (
-	<div
-		css={[
-			containerStyles,
-			containerType === 'fixed/video'
-				? videoWidth
-				: minWidth(minWidthInPixels),
-			decidePosition(
-				imagePositionOnMobile,
-				imagePositionOnDesktop,
-				isBetaContainer,
-				imageType === 'avatar',
-			),
-		]}
-		style={{
-			backgroundColor: cardBackgroundColour,
-			gap: decideGap(gapSize),
-		}}
-	>
-		{children}
-	</div>
-);
+}: Props) => {
+	return (
+		<div
+			css={[
+				containerStyles,
+				containerType === 'fixed/video'
+					? videoWidth
+					: minWidth(minWidthInPixels),
+				decidePosition(
+					imagePositionOnMobile,
+					imagePositionOnDesktop,
+					isBetaContainer,
+					imageType === 'avatar',
+				),
+			]}
+			style={{
+				backgroundColor: cardBackgroundColour,
+				rowGap: decideGap(gapSizes.row),
+				columnGap: decideGap(gapSizes.column),
+			}}
+		>
+			{children}
+		</div>
+	);
+};

dotcom-rendering/src/components/ImageComponent.tsx

@@ -568,6 +568,7 @@ export const ImageComponent = ({
 					shouldLimitWidth={shouldLimitWidth}
 					isMainMedia={isMainMedia}
 					padCaption={role === 'showcase' && isTimeline}
+					isImmersive={role === 'immersive'}
 				/>
 			)}
 		</>