Apply padding to immersive image captions (#13163)

* Add immersive caption padding to compensate for negative margins

* Add immersive padding story

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/ImageComponent.tsx

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