add gallery lightbox

Author: marjisound

dotcom-rendering/src/components/GalleryImage.tsx

@@ -1,18 +1,22 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import { from, space, until } from '@guardian/source/foundations';
 import { grid } from '../grid';
 import { type ArticleFormat } from '../lib/articleFormat';
 import { getImage } from '../lib/image';
 import { palette } from '../palette';
 import { type ImageBlockElement } from '../types/content';
+import { type RenderingTarget } from '../types/renderingTarget';
 import { GalleryCaption } from './GalleryCaption';
+import { LightboxLink } from './LightboxLink';
 import { Picture } from './Picture';
 
 type Props = {
 	format: ArticleFormat;
 	image: ImageBlockElement;
 	pageId: string;
 	webTitle: string;
+	renderingTarget: RenderingTarget;
 };
 
 const styles = css`
@@ -31,7 +35,30 @@ const styles = css`
 	}
 `;
 
-export const GalleryImage = ({ format, image, pageId, webTitle }: Props) => {
+const galleryBodyImageStyles = css`
+	display: flex;
+	${grid.column.all}
+
+	${from.tablet} {
+		${grid.column.centre}
+	}
+
+	${from.desktop} {
+		padding-bottom: ${space[10]}px;
+	}
+
+	${from.leftCol} {
+		${grid.between('centre-column-start', 'right-column-end')}
+	}
+`;
+
+export const GalleryImage = ({
+	format,
+	image,
+	pageId,
+	webTitle,
+	renderingTarget,
+}: Props) => {
 	const asset = getImage(image.media.allImages);
 
 	if (asset === undefined) {
@@ -47,15 +74,34 @@ export const GalleryImage = ({ format, image, pageId, webTitle }: Props) => {
 
 	return (
 		<figure css={styles}>
-			<Picture
-				alt={image.data.alt ?? ''}
-				format={format}
-				role={image.role}
-				master={asset.url}
-				width={width}
-				height={height}
-				loading="lazy"
-			/>
+			<span css={galleryBodyImageStyles}>
+				<span
+					css={css`
+						position: relative;
+					`}
+				>
+					<Picture
+						alt={image.data.alt ?? ''}
+						format={format}
+						role={image.role}
+						master={asset.url}
+						width={width}
+						height={height}
+						loading="lazy"
+					/>
+					{renderingTarget === 'Web' &&
+						!isUndefined(image.position) && (
+							<LightboxLink
+								role={image.role}
+								format={format}
+								elementId={image.elementId}
+								isMainMedia={false}
+								position={image.position}
+							/>
+						)}
+				</span>
+			</span>
+
 			<GalleryCaption
 				captionHtml={image.data.caption}
 				credit={image.data.credit}

dotcom-rendering/src/components/Picture.tsx

@@ -1,13 +1,12 @@
 import { css } from '@emotion/react';
-import { breakpoints, from, space } from '@guardian/source/foundations';
+import { breakpoints } from '@guardian/source/foundations';
 import {
 	type CSSProperties,
 	Fragment,
 	useCallback,
 	useEffect,
 	useState,
 } from 'react';
-import { grid } from '../grid';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -472,50 +471,28 @@ export const Sources = ({ sources }: { sources: ImageSource[] }) => {
 	);
 };
 
-const galleryBodyImageStyles = css`
-	${grid.column.all}
-
-	${from.tablet} {
-		${grid.column.centre}
-	}
-
-	${from.desktop} {
-		padding-bottom: ${space[10]}px;
-	}
-
-	${from.leftCol} {
-		${grid.between('centre-column-start', 'right-column-end')}
-	}
-`;
-
 /**
  * This ensures that the image height never goes above 96vh.
  * The ratio parameter should be width:height.
  */
 const imageMaxWidth = (
 	design: ArticleDesign,
 	ratio: number,
+	isMainMedia: boolean,
 ): CSSProperties | undefined =>
-	design === ArticleDesign.Gallery
+	design === ArticleDesign.Gallery && !isMainMedia
 		? { maxWidth: `calc(${ratio} * 96vh)` }
 		: undefined;
 
-const styles = (
-	{ design }: ArticleFormat,
-	isLightbox: boolean,
-	isMainMedia: boolean,
-) => {
+const styles = ({ design }: ArticleFormat, isLightbox: boolean) => {
 	if (design === ArticleDesign.Gallery) {
-		return css(
-			css`
-				img {
-					width: 100%;
-					height: 100%;
-					object-fit: cover;
-				}
-			`,
-			isMainMedia ? undefined : galleryBodyImageStyles,
-		);
+		return css(css`
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		`);
 	}
 	return isLightbox ? flex : block;
 };
@@ -581,10 +558,7 @@ export const Picture = ({
 	const fallbackSource = getFallbackSource(sources);
 
 	return (
-		<picture
-			css={styles(format, isLightbox, isMainMedia)}
-			style={imageMaxWidth(format.design, 1 / ratio)}
-		>
+		<picture css={styles(format, isLightbox)}>
 			{/* Immersive Main Media images get additional sources specifically for when in portrait orientation */}
 			{format.display === ArticleDisplay.Immersive && isMainMedia && (
 				<>
@@ -621,6 +595,7 @@ export const Picture = ({
 				height={fallbackSource.width * ratio}
 				loading={Picture.disableLazyLoading ? undefined : loading}
 				css={isLightbox ? flex : block}
+				style={imageMaxWidth(format.design, 1 / ratio, isMainMedia)}
 			/>
 		</picture>
 	);

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -179,6 +179,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						pageId={frontendData.pageId}
 						webTitle={frontendData.webTitle}
 						key={idx}
+						renderingTarget={props.renderingTarget}
 					/>
 				))}
 				<SubMeta