From c574b9159935ace46063249626761f57bb989e5a Mon Sep 17 00:00:00 2001
From: George B <705427+georgeblahblah@users.noreply.github.com>
Date: Mon, 22 Jan 2024 12:15:12 +0000
Subject: [PATCH] Only show lightbox toggle if in experiment (#10279)

---
 dotcom-rendering/src/components/CartoonComponent.tsx | 11 +++++++----
 dotcom-rendering/src/lib/renderElement.tsx           |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/dotcom-rendering/src/components/CartoonComponent.tsx b/dotcom-rendering/src/components/CartoonComponent.tsx
index 9250c642056..ff1675e0805 100644
--- a/dotcom-rendering/src/components/CartoonComponent.tsx
+++ b/dotcom-rendering/src/components/CartoonComponent.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { Hide } from '@guardian/source-react-components';
 import { isWideEnough } from '../lib/lightbox';
-import type { Switches } from '../types/config';
+import type { ServerSideTests } from '../types/config';
 import type { CartoonBlockElement, Image } from '../types/content';
 import { AppsLightboxImage } from './AppsLightboxImage.importable';
 import { Caption } from './Caption';
@@ -14,10 +14,10 @@ import { Picture } from './Picture';
 type Props = {
 	format: ArticleFormat;
 	element: CartoonBlockElement;
-	switches?: Switches;
+	abTests?: ServerSideTests;
 };
 
-export const CartoonComponent = ({ format, element, switches }: Props) => {
+export const CartoonComponent = ({ format, element, abTests }: Props) => {
 	const { renderingTarget } = useConfig();
 	const smallVariant = element.variants.find(
 		(variant) => variant.viewportSize === 'small',
@@ -26,6 +26,9 @@ export const CartoonComponent = ({ format, element, switches }: Props) => {
 		(variant) => variant.viewportSize === 'large',
 	);
 
+	const isInLightboxTest = abTests?.lightboxVariant === 'variant';
+	const webLightbox = renderingTarget === 'Web' && isInLightboxTest;
+
 	const render = (image: Image) => {
 		const altText = `${element.alt ? `${element.alt}, ` : ''}panel ${
 			image.index + 1
@@ -62,7 +65,7 @@ export const CartoonComponent = ({ format, element, switches }: Props) => {
 					/>
 				)}
 
-				{switches?.lightbox === true &&
+				{webLightbox &&
 					isWideEnough(image) &&
 					element.position !== undefined && (
 						<LightboxLink
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index 2b14b99afcc..b7ebb8be400 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -211,7 +211,7 @@ export const renderElement = ({
 				<CartoonComponent
 					format={format}
 					element={element}
-					switches={switches}
+					abTests={abTests}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.ChartAtomBlockElement':