Put lightbox behind a switch

guardian · Jul 6, 2023 · 460e83d · 460e83d
1 parent d76e316
commit 460e83d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 7 deletions.
diff --git a/dotcom-rendering/src/components/ArticlePage.tsx b/dotcom-rendering/src/components/ArticlePage.tsx
@@ -59,7 +59,7 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 			/>
 			<SkipTo id="maincontent" label="Skip to main content" />
 			<SkipTo id="navigation" label="Skip to navigation" />
-			{article.imagesForLightbox && (
+			{article.config.switches.lightbox && article.imagesForLightbox && (
 				<>
 					<LightboxLayout
 						imageCount={article.imagesForLightbox.length}

diff --git a/dotcom-rendering/src/components/ImageBlockComponent.tsx b/dotcom-rendering/src/components/ImageBlockComponent.tsx
@@ -1,4 +1,5 @@
-import { ImageBlockElement } from '../types/content';
+import type { Switches } from '../types/config';
+import type { ImageBlockElement } from '../types/content';
 import { ImageComponent } from './ImageComponent';
 
 type Props = {
@@ -9,6 +10,7 @@ type Props = {
 	isMainMedia?: boolean;
 	starRating?: number;
 	isAvatar?: boolean;
+	switches?: Switches;
 };
 
 export const ImageBlockComponent = ({
@@ -19,6 +21,7 @@ export const ImageBlockComponent = ({
 	isMainMedia,
 	starRating,
 	isAvatar,
+	switches,
 }: Props) => {
 	const { role } = element;
 	return (
@@ -31,6 +34,7 @@ export const ImageBlockComponent = ({
 			role={role}
 			title={title}
 			isAvatar={isAvatar}
+			switches={switches}
 		/>
 	);
 };
diff --git a/dotcom-rendering/src/components/ImageComponent.tsx b/dotcom-rendering/src/components/ImageComponent.tsx
@@ -9,6 +9,7 @@ import {
 	until,
 } from '@guardian/source-foundations';
 import { decidePalette } from '../lib/decidePalette';
+import type { Switches } from '../types/config';
 import type { Image, ImageBlockElement, RoleType } from '../types/content';
 import type { Palette } from '../types/palette';
 import { Caption } from './Caption';
@@ -26,6 +27,7 @@ type Props = {
 	starRating?: number;
 	title?: string;
 	isAvatar?: boolean;
+	switches?: Switches;
 };
 
 const starsWrapper = css`
@@ -233,6 +235,7 @@ export const ImageComponent = ({
 	starRating,
 	title,
 	isAvatar,
+	switches,
 }: Props) => {
 	// Its possible the tools wont send us any images urls
 	// if so, don't try to render
@@ -329,7 +332,8 @@ export const ImageComponent = ({
 				{!!title && (
 					<ImageTitle title={title} role={role} palette={palette} />
 				)}
-				{parseInt(imageWidth, 10) > 620 &&
+				{switches?.lightbox === true &&
+					parseInt(imageWidth, 10) > 620 &&
 					element.position !== undefined && (
 						<LightboxLink
 							role={role}
@@ -378,7 +382,8 @@ export const ImageComponent = ({
 				{!!title && (
 					<ImageTitle title={title} role={role} palette={palette} />
 				)}
-				{parseInt(imageWidth, 10) > 620 &&
+				{switches?.lightbox === true &&
+					parseInt(imageWidth, 10) > 620 &&
 					element.position !== undefined && (
 						<LightboxLink
 							role={role}
@@ -466,7 +471,8 @@ export const ImageComponent = ({
 					<ImageTitle title={title} role={role} palette={palette} />
 				)}
 
-				{parseInt(imageWidth, 10) > 620 &&
+				{switches?.lightbox === true &&
+					parseInt(imageWidth, 10) > 620 &&
 					element.position !== undefined && (
 						<LightboxLink
 							role={role}

diff --git a/dotcom-rendering/src/components/MultiImageBlockComponent.tsx b/dotcom-rendering/src/components/MultiImageBlockComponent.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { from, space, until } from '@guardian/source-foundations';
+import type { Switches } from '../types/config';
 import type { ImageBlockElement } from '../types/content';
 import { Caption } from './Caption';
 import { GridItem } from './GridItem';
@@ -9,6 +10,7 @@ type Props = {
 	images: ImageBlockElement[];
 	format: ArticleFormat;
 	caption?: string;
+	switches?: Switches;
 };
 
 const ieFallback = css`
@@ -102,17 +104,20 @@ const OneImage = ({
 	images,
 	format,
 	caption,
+	switches,
 }: {
 	images: [ImageBlockElement];
 	format: ArticleFormat;
 	caption?: string;
+	switches?: Switches;
 }) => (
 	<div css={wrapper}>
 		<ImageComponent
 			format={format}
 			element={images[0]}
 			hideCaption={true}
 			role={images[0].role}
+			switches={switches}
 		/>
 		{!!caption && (
 			<Caption
@@ -128,10 +133,12 @@ const TwoImage = ({
 	images,
 	format,
 	caption,
+	switches,
 }: {
 	images: [ImageBlockElement, ImageBlockElement];
 	format: ArticleFormat;
 	caption?: string;
+	switches?: Switches;
 }) => (
 	<div css={wrapper}>
 		<SideBySideGrid>
@@ -141,6 +148,7 @@ const TwoImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[0].role}
+					switches={switches}
 				/>
 			</GridItem>
 			<GridItem area="second">
@@ -149,6 +157,7 @@ const TwoImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[1].role}
+					switches={switches}
 				/>
 			</GridItem>
 		</SideBySideGrid>
@@ -166,10 +175,12 @@ const ThreeImage = ({
 	images,
 	format,
 	caption,
+	switches,
 }: {
 	images: [ImageBlockElement, ImageBlockElement, ImageBlockElement];
 	format: ArticleFormat;
 	caption?: string;
+	switches?: Switches;
 }) => (
 	<div css={wrapper}>
 		<OneAboveTwoGrid>
@@ -179,6 +190,7 @@ const ThreeImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[0].role}
+					switches={switches}
 				/>
 			</GridItem>
 			<GridItem area="second">
@@ -187,6 +199,7 @@ const ThreeImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[1].role}
+					switches={switches}
 				/>
 			</GridItem>
 			<GridItem area="third">
@@ -195,6 +208,7 @@ const ThreeImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[2].role}
+					switches={switches}
 				/>
 			</GridItem>
 		</OneAboveTwoGrid>
@@ -212,6 +226,7 @@ const FourImage = ({
 	images,
 	format,
 	caption,
+	switches,
 }: {
 	images: [
 		ImageBlockElement,
@@ -221,6 +236,7 @@ const FourImage = ({
 	];
 	format: ArticleFormat;
 	caption?: string;
+	switches?: Switches;
 }) => (
 	<div css={wrapper}>
 		<GridOfFour>
@@ -230,6 +246,7 @@ const FourImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[0].role}
+					switches={switches}
 				/>
 			</GridItem>
 			<GridItem area="second">
@@ -238,6 +255,7 @@ const FourImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[1].role}
+					switches={switches}
 				/>
 			</GridItem>
 			<GridItem area="third">
@@ -246,6 +264,7 @@ const FourImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[2].role}
+					switches={switches}
 				/>
 			</GridItem>
 			<GridItem area="forth">
@@ -254,6 +273,7 @@ const FourImage = ({
 					format={format}
 					hideCaption={true}
 					role={images[3].role}
+					switches={switches}
 				/>
 			</GridItem>
 		</GridOfFour>
@@ -271,6 +291,7 @@ export const MultiImageBlockComponent = ({
 	images,
 	format,
 	caption,
+	switches,
 }: Props) => {
 	const [one, two, three, four] = images;
 
@@ -280,6 +301,7 @@ export const MultiImageBlockComponent = ({
 				images={[one, two, three, four]}
 				format={format}
 				caption={caption}
+				switches={switches}
 			/>
 		);
 	}
@@ -290,18 +312,31 @@ export const MultiImageBlockComponent = ({
 				images={[one, two, three]}
 				format={format}
 				caption={caption}
+				switches={switches}
 			/>
 		);
 	}
 
 	if (one && two) {
 		return (
-			<TwoImage images={[one, two]} format={format} caption={caption} />
+			<TwoImage
+				images={[one, two]}
+				format={format}
+				caption={caption}
+				switches={switches}
+			/>
 		);
 	}
 
 	if (one) {
-		return <OneImage images={[one]} format={format} caption={caption} />;
+		return (
+			<OneImage
+				images={[one]}
+				format={format}
+				caption={caption}
+				switches={switches}
+			/>
+		);
 	}
 
 	return null;

diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
@@ -347,6 +347,7 @@ export const renderElement = ({
 					starRating={starRating ?? element.starRating}
 					title={element.title}
 					isAvatar={element.isAvatar}
+					switches={switches}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.InstagramBlockElement':
@@ -448,6 +449,7 @@ export const renderElement = ({
 					key={index}
 					images={element.images}
 					caption={element.caption}
+					switches={switches}
 				/>
 			);
 		case 'model.dotcomrendering.pageElements.NewsletterSignupBlockElement':