Merge branch 'main' into ei/add-comscorekw-comment

Author: emma-imber

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

@@ -150,7 +150,6 @@ export type Props = {
 	trailTextSize?: TrailTextSize;
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
-	isInLoopVideoTest?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -411,7 +410,6 @@ export const Card = ({
 	showTopBarMobile = false,
 	trailTextSize,
 	showKickerImage = false,
-	isInLoopVideoTest = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -829,7 +827,6 @@ export const Card = ({
 							media.type === 'slideshow' && isFlexibleContainer
 						}
 						padImage={isMediaCardOrNewsletter && isBetaContainer}
-						isInLoopVideoTest={isInLoopVideoTest}
 					>
 						{media.type === 'slideshow' &&
 							(isFlexibleContainer ? (
@@ -996,7 +993,6 @@ export const Card = ({
 									loading={imageLoading}
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
-									isInLoopVideoTest={isInLoopVideoTest}
 								/>
 								{(isVideoMainMedia ||
 									(isVideoArticle && !isBetaContainer)) &&

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

@@ -42,7 +42,6 @@ type Props = {
 	 */
 	hideImageOverlay?: boolean;
 	padImage?: boolean;
-	isInLoopVideoTest?: boolean;
 };
 
 /**
@@ -129,13 +128,11 @@ export const ImageWrapper = ({
 	imagePositionOnMobile,
 	hideImageOverlay,
 	padImage,
-	isInLoopVideoTest = false,
 }: Props) => {
 	const isHorizontalOnDesktop =
 		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
 	const isHorizontalOnMobile =
 		imagePositionOnMobile === 'left' || imagePositionOnMobile === 'right';
-
 	return (
 		<div
 			css={[
@@ -182,8 +179,7 @@ export const ImageWrapper = ({
 				{children}
 				{/* This image overlay is styled when the CardLink is hovered */}
 				{(imageType === 'picture' || imageType === 'slideshow') &&
-					!hideImageOverlay &&
-					!isInLoopVideoTest && <div className="image-overlay" />}
+					!hideImageOverlay && <div className="image-overlay" />}
 			</>
 		</div>
 	);

dotcom-rendering/src/components/CardPicture.tsx

@@ -4,7 +4,6 @@ import type { ImgHTMLAttributes } from 'react';
 import React from 'react';
 import type { AspectRatio } from '../types/front';
 import type { ImageSizeType } from './Card/components/ImageWrapper';
-import { LoopVideoABTest } from './LoopVideoABTest';
 import type { ImageWidthType } from './Picture';
 import { generateSources, getFallbackSource } from './Picture';
 
@@ -18,7 +17,6 @@ type Props = {
 	roundedCorners?: boolean;
 	isCircular?: boolean;
 	aspectRatio?: AspectRatio;
-	isInLoopVideoTest?: boolean;
 };
 
 /**
@@ -157,7 +155,6 @@ export const CardPicture = ({
 	roundedCorners,
 	isCircular,
 	aspectRatio,
-	isInLoopVideoTest = false,
 }: Props) => {
 	const sources = generateSources(
 		mainImage,
@@ -167,10 +164,6 @@ export const CardPicture = ({
 
 	const fallbackSource = getFallbackSource(sources);
 
-	if (isInLoopVideoTest) {
-		return <LoopVideoABTest />;
-	}
-
 	return (
 		<picture
 			data-size={imageSize}

dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from, palette, space, textSans20 } from '@guardian/source/foundations';
+import { from, palette, space, textSans14 } from '@guardian/source/foundations';
 import { Link, SvgInfoRound } from '@guardian/source/react-components';
 import { center } from '../lib/center';
 import {
@@ -26,28 +26,24 @@ const content = css`
 	display: flex;
 	justify-content: space-between;
 	padding: 10px;
-	align-items: flex-start;
+	align-items: center;
 	${center};
 
 	${from.mobileLandscape} {
 		padding: 10px ${space[5]}px;
 	}
-
-	${from.phablet} {
-		align-items: center;
-	}
 `;
 
 const textAndLink = css`
 	display: flex;
 	flex-direction: row;
-	align-items: flex-start;
+	align-items: center;
 	gap: ${space[3]}px;
-	${textSans20};
+	${textSans14};
 
 	/* Override Source Link font styles */
 	a {
-		${textSans20};
+		${textSans14};
 	}
 `;
 
@@ -93,12 +89,10 @@ export const EditionSwitcherBanner = ({ pageId, edition }: Props) => {
 		<aside data-component="edition-switcher-banner" css={container}>
 			<div css={content}>
 				<div css={textAndLink}>
-					<div>
-						<SvgInfoRound
-							size="small"
-							theme={{ fill: palette.brand[400] }}
-						/>
-					</div>
+					<SvgInfoRound
+						size="medium"
+						theme={{ fill: palette.brand[400] }}
+					/>
 					<p>
 						You are viewing the {defaultEditionName} homepage&nbsp;
 						<Link

dotcom-rendering/src/components/FrontCard.tsx

@@ -57,7 +57,6 @@ export const FrontCard = (props: Props) => {
 		slideshowImages: trail.slideshowImages,
 		showLivePlayable: trail.showLivePlayable,
 		showMainVideo: trail.showMainVideo,
-		isInLoopVideoTest: trail.isInLoopVideoTest,
 	};
 
 	return Card({ ...defaultProps, ...cardProps });

dotcom-rendering/src/components/LoopVideoABTest.tsx

@@ -43,7 +43,6 @@ import {
 	getMobileAdPositions,
 } from '../lib/getFrontsAdPositions';
 import { hideAge } from '../lib/hideAge';
-import { testVideoCollection } from '../lib/loop-video-ab-test-data';
 import { ophanComponentId } from '../lib/ophan-helpers';
 import type { NavType } from '../model/extract-nav';
 import { palette as schemePalette } from '../palette';
@@ -109,13 +108,7 @@ const decideLeftContent = (
 
 export const FrontLayout = ({ front, NAV }: Props) => {
 	const {
-		config: {
-			abTests,
-			hasPageSkin: hasPageSkinConfig,
-			isPaidContent,
-			isPreview,
-			pageId,
-		},
+		config: { isPaidContent, hasPageSkin: hasPageSkinConfig, pageId },
 		editionId,
 	} = front;
 
@@ -125,18 +118,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const hasPageSkin = renderAds && hasPageSkinConfig;
 
-	const isInLoopVideoTest = abTests.loopVideoTestVariant === 'variant';
-
-	const filteredCollections = isInLoopVideoTest
-		? [
-				testVideoCollection,
-				...front.pressedPage.collections.filter(
-					(collection) => !isHighlights(collection),
-				),
-		  ]
-		: front.pressedPage.collections.filter(
-				(collection) => !isHighlights(collection),
-		  );
+	const filteredCollections = front.pressedPage.collections.filter(
+		(collection) => !isHighlights(collection),
+	);
 
 	const merchHighAdPosition = getMerchHighPosition(filteredCollections);
 
@@ -153,6 +137,8 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const contributionsServiceUrl = getContributionsServiceUrl(front);
 
+	const { abTests, isPreview } = front.config;
+
 	const { absoluteServerTimes = false } = front.config.switches;
 
 	const fallbackAspectRatio = (collectionType: DCRContainerType) => {
@@ -286,13 +272,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 				)}
 				{filteredCollections.map((collection, index) => {
 					// Backfills should be added to the end of any curated content
-					const trails = collection.curated
-						.concat(collection.backfill)
-						.map((tr) => ({
-							...tr,
-							isInLoopVideoTest: isInLoopVideoTest && index === 0,
-						}));
-
+					const trails = collection.curated.concat(
+						collection.backfill,
+					);
 					const [trail] = trails;
 
 					// There are some containers that have zero trails. We don't want to render these

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -351,7 +351,6 @@ export type DCRFrontCard = {
 	branding?: Branding;
 	slideshowImages?: DCRSlideshowImage[];
 	showMainVideo?: boolean;
-	isInLoopVideoTest?: boolean;
 };
 
 export type DCRSlideshowImage = {