Merge pull request #15466 from guardian/doml/slim-homepage-abtest-safeguard

Slim homepage AB test: Hide Deeply Read if not enough space

Author: domlander

dotcom-rendering/src/components/FrontPage.tsx

@@ -21,6 +21,7 @@ import { SetABTests } from './SetABTests.importable';
 import { SetAdTargeting } from './SetAdTargeting.importable';
 import { ShowHideContainers } from './ShowHideContainers.importable';
 import { SkipTo } from './SkipTo';
+import { SlimHomepageAbTest } from './SlimHomepageAbTest.importable';
 
 type Props = {
 	front: Front;
@@ -97,6 +98,9 @@ export const FrontPage = ({ front, NAV }: Props) => {
 			<Island priority="feature" defer={{ until: 'idle' }}>
 				<ReaderRevenueDev shouldHideReaderRevenue={false} />
 			</Island>
+			<Island priority="enhancement" defer={{ until: 'idle' }}>
+				<SlimHomepageAbTest />
+			</Island>
 			{isGoogleOneTapEnabled(
 				front.config.abTests,
 				front.config.switches,

dotcom-rendering/src/components/MostPopularFrontRight.tsx

@@ -89,8 +89,13 @@ type Props = {
 export const MostPopularFrontRight = ({ heading, trails }: Props) => {
 	if (trails.length === 0) return null;
 
+	const containerId = `${heading
+		.toLowerCase()
+		.replace(' ', '-')}-front-right-container`;
+
 	return (
 		<section
+			id={containerId}
 			data-component="most-popular-front-right"
 			css={[
 				containerStyles,

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

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+/**
+ * If the "Deeply read" container is taller than the combined height of the "Features" and "More features"
+ * containers, hide the "Deeply read" container to prevent this absolute positioned component from
+ * overlapping the container or advert below it.
+ *
+ * The intention is that for the duration of the AB test there will always be enough content in these
+ * two containers to ensure that there is enough room for the "Deeply read" container, but this is added
+ * as a safety net: it is better to remove the content than to leave it overlapping other content.
+ *
+ * @returns {JSX.Element} - A React fragment (renders nothing to the DOM directly).
+ */
+export const SlimHomepageAbTest = () => {
+	useEffect(() => {
+		const featuresContainer = document.getElementById('features');
+		const moreFeaturesContainer = document.getElementById('more-features');
+		const deeplyReadFrontRightContainer = document.getElementById(
+			'deeply-read-front-right-container',
+		);
+
+		if (
+			deeplyReadFrontRightContainer &&
+			featuresContainer &&
+			moreFeaturesContainer
+		) {
+			const deeplyReadHeight =
+				deeplyReadFrontRightContainer.getBoundingClientRect().height;
+			const featuresHeight =
+				featuresContainer.getBoundingClientRect().height;
+			const moreFeaturesHeight =
+				moreFeaturesContainer.getBoundingClientRect().height;
+
+			if (deeplyReadHeight > featuresHeight + moreFeaturesHeight) {
+				deeplyReadFrontRightContainer.style.display = 'none';
+			}
+		}
+	}, []);
+
+	return <></>;
+};

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -78,25 +78,19 @@ const isToggleable = (
 	index: number,
 	collection: DCRCollectionType,
 	isNetworkFront: boolean,
-	isInSlimHomepageAbTestVariant: boolean,
+	/**
+	 * The show/hide button would be covered by the MostPopularFrontRight component
+	 * in the variant of the Slim Homepage AB test.
+	 */
+	isTargetedContainerInSlimHomepageAbTest: boolean,
 ) => {
 	if (isNetworkFront) {
-		/**
-		 * The show/hide button would be covered by the MostPopularFrontRight component
-		 * in the variant of the Slim Homepage AB test.
-		 */
-		const hideForSlimHomepageAbTest =
-			isInSlimHomepageAbTestVariant &&
-			(collection.displayName === 'News' ||
-				collection.displayName === 'Features' ||
-				collection.displayName === 'More features');
-
 		return (
 			collection.displayName.toLowerCase() !== 'headlines' &&
 			!isNavList(collection) &&
 			!isHighlights(collection) &&
 			!isLabs(collection) &&
-			!hideForSlimHomepageAbTest
+			!isTargetedContainerInSlimHomepageAbTest
 		);
 	}
 
@@ -316,9 +310,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 					 * content on the right-hand side. Other sections remain full-width.
 					 */
 					const isTargetedContainerInSlimHomepageAbTest =
-						collection.displayName === 'News' ||
-						collection.displayName === 'Features' ||
-						collection.displayName === 'More features';
+						isInSlimHomepageAbTestVariant &&
+						(collection.displayName === 'News' ||
+							collection.displayName === 'Features' ||
+							collection.displayName === 'More features');
 
 					if (collection.collectionType === 'scrollable/highlights') {
 						// Highlights are rendered in the Masthead component
@@ -499,7 +494,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 									index,
 									collection,
 									front.isNetworkFront,
-									isInSlimHomepageAbTestVariant,
+									isTargetedContainerInSlimHomepageAbTest,
 								)}
 								leftContent={decideLeftContent(
 									front,
@@ -540,7 +535,6 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 								)}
 								isLabs={isLabs(collection)}
 								slimifySectionForAbTest={
-									isInSlimHomepageAbTestVariant &&
 									isTargetedContainerInSlimHomepageAbTest
 								}
 								mostViewed={front.mostViewed}