Disable show/hide button if covered by Most Popular Front Right containers

Author: domlander

dotcom-rendering/src/components/FrontSection.tsx

@@ -398,7 +398,7 @@ const sectionContentBorderFromLeftCol = css`
 			bottom: 0;
 			border-left: 1px solid ${schemePalette('--section-border')};
 			transform: translateX(-50%);
-			/** Keeps the vertical divider ontop of carousel item dividers */
+			/** Keeps the vertical divider on top of carousel item dividers */
 			z-index: 1;
 		}
 	}
@@ -414,7 +414,7 @@ const slimHomepageRightBorderStyles = css`
 			right: 0;
 			border-right: 1px solid ${schemePalette('--section-border')};
 			transform: translateX(-50%);
-			/** Keeps the vertical divider ontop of carousel item dividers */
+			/** Keeps the vertical divider on top of carousel item dividers */
 			z-index: 1;
 		}
 	}

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -78,13 +78,25 @@ const isToggleable = (
 	index: number,
 	collection: DCRCollectionType,
 	isNetworkFront: boolean,
+	isInSlimHomepageAbTestVariant: 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)
+			!isLabs(collection) &&
+			!hideForSlimHomepageAbTest
 		);
 	}
 
@@ -487,6 +499,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 									index,
 									collection,
 									front.isNetworkFront,
+									isInSlimHomepageAbTestVariant,
 								)}
 								leftContent={decideLeftContent(
 									front,