Use new variant on lightbox

Author: abeddow91

dotcom-rendering/src/components/ArticlePage.tsx

@@ -78,6 +78,10 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 			<Lightbox
 				format={format}
 				switches={frontendData.config.switches}
+				isInStarRatingVariant={
+					frontendData.config.abTests.starRatingRedesignVariant ===
+					'variant'
+				}
 				{...(renderingTarget === 'Web'
 					? {
 							lightboxImages: frontendData.imagesForLightbox,

dotcom-rendering/src/components/Lightbox.tsx

@@ -12,6 +12,7 @@ interface BaseProps {
 	format: ArticleFormat;
 	renderingTarget: RenderingTarget;
 	switches: Switches;
+	isInStarRatingVariant?: boolean;
 }
 
 interface WebProps extends BaseProps {
@@ -29,6 +30,7 @@ export const Lightbox = ({
 	lightboxImages,
 	renderingTarget,
 	switches,
+	isInStarRatingVariant,
 }: WebProps | AppProps) => {
 	switch (renderingTarget) {
 		case 'Web':
@@ -46,6 +48,7 @@ export const Lightbox = ({
 						<LightboxLayout
 							format={format}
 							images={lightboxImages}
+							isInStarRatingVariant={isInStarRatingVariant}
 						/>
 					</Island>
 					<Island priority="feature" defer={{ until: 'idle' }}>

dotcom-rendering/src/components/LightboxImages.tsx

@@ -10,17 +10,19 @@ import {
 	visuallyHidden,
 } from '@guardian/source/foundations';
 import { Hide, Link } from '@guardian/source/react-components';
-import { StarRating } from '@guardian/source-development-kitchen/react-components';
+import { StarRating as SourceStarRating } from '@guardian/source-development-kitchen/react-components';
 import { useEffect, useState } from 'react';
 import type { ArticleFormat } from '../lib/articleFormat';
 import type { ImageForLightbox } from '../types/content';
 import { LightboxCaption } from './LightboxCaption';
 import { LightboxLoader } from './LightboxLoader';
 import { Picture } from './Picture';
+import { StarRating } from './StarRating/StarRating';
 
 type Props = {
 	format: ArticleFormat;
 	images: ImageForLightbox[];
+	isInStarRatingVariant?: boolean;
 };
 
 const liStyles = css`
@@ -46,7 +48,7 @@ const imageStyles = (orientation: 'landscape' | 'portrait') => {
 		case 'portrait': {
 			return css`
 				img {
-					${baseImgStyles}
+					${baseImgStyles};
 					width: auto;
 					max-width: 100%;
 					height: 100vh;
@@ -60,7 +62,7 @@ const imageStyles = (orientation: 'landscape' | 'portrait') => {
 		default: {
 			return css`
 				img {
-					${baseImgStyles}
+					${baseImgStyles};
 					width: 100%;
 					height: auto;
 					max-height: 100vh;
@@ -128,6 +130,12 @@ const figureStyles = css`
 	}
 `;
 
+const starRatingMarginStyles = css`
+	margin-bottom: ${space[2]}px;
+	${from.tablet} {
+		margin-bottom: ${space[3]}px;
+	}
+`;
 const Selection = ({
 	countOfImages,
 	initialPosition = 1,
@@ -173,7 +181,11 @@ const Selection = ({
 	);
 };
 
-export const LightboxImages = ({ format, images }: Props) => {
+export const LightboxImages = ({
+	format,
+	images,
+	isInStarRatingVariant,
+}: Props) => {
 	const [loaded, setLoaded] = useState(new Set<number>());
 
 	useEffect(() => {
@@ -231,7 +243,7 @@ export const LightboxImages = ({ format, images }: Props) => {
 									<h2
 										css={css`
 											width: 100%;
-											${headlineLight24}
+											${headlineLight24};
 											color: ${palette.neutral[100]};
 											margin-bottom: ${space[1]}px;
 											${from.tablet} {
@@ -243,9 +255,16 @@ export const LightboxImages = ({ format, images }: Props) => {
 									</h2>
 								)}
 
-								{
-									/* TODO : Remove this star rating once the starRatingVariant testing is complete and new designs are merged (eta Jan 2026)*/
-									typeof image.starRating === 'number' && (
+								{!isUndefined(image.starRating) &&
+									(isInStarRatingVariant ? (
+										<div css={starRatingMarginStyles}>
+											<StarRating
+												size="medium"
+												rating={image.starRating}
+												useAlternativeTheme={true}
+											/>
+										</div>
+									) : (
 										<div
 											css={css`
 												display: inline-block;
@@ -260,13 +279,13 @@ export const LightboxImages = ({ format, images }: Props) => {
 												}
 											`}
 										>
-											<StarRating
+											<SourceStarRating
 												size="medium"
 												rating={image.starRating}
 											/>
 										</div>
-									)
-								}
+									))}
+
 								<Hide from="tablet">
 									<Selection
 										countOfImages={images.length}

dotcom-rendering/src/components/LightboxJavascript.tsx

@@ -554,9 +554,11 @@ const ulStyles = css`
 export const LightboxJavascript = ({
 	format,
 	images,
+	isInStarRatingVariant,
 }: {
 	format: ArticleFormat;
 	images: ImageForLightbox[];
+	isInStarRatingVariant?: boolean;
 }) => {
 	/**
 	 * Hydration has been requested so the first step is to render the list of images and put them into
@@ -588,7 +590,12 @@ export const LightboxJavascript = ({
 	log('dotcom', '💡 Generating HTML for lightbox images...');
 	return (
 		<ul css={ulStyles} aria-label="All images">
-			<LightboxImages format={format} images={images} />;
+			<LightboxImages
+				format={format}
+				images={images}
+				isInStarRatingVariant={isInStarRatingVariant}
+			/>
+			;
 		</ul>
 	);
 };

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

@@ -21,6 +21,7 @@ import { LightboxJavascript } from './LightboxJavascript';
 type Props = {
 	format: ArticleFormat;
 	images: ImageForLightbox[];
+	isInStarRatingVariant?: boolean;
 };
 
 const lightboxStyles = css`
@@ -196,7 +197,11 @@ const Selection = ({
 	);
 };
 
-export const LightboxLayout = ({ format, images }: Props) => {
+export const LightboxLayout = ({
+	format,
+	images,
+	isInStarRatingVariant,
+}: Props) => {
 	return (
 		<>
 			<Global
@@ -222,7 +227,11 @@ export const LightboxLayout = ({ format, images }: Props) => {
 				hidden={true}
 			>
 				<div css={containerStyles}>
-					<LightboxJavascript format={format} images={images} />
+					<LightboxJavascript
+						format={format}
+						images={images}
+						isInStarRatingVariant={isInStarRatingVariant}
+					/>
 					<nav css={navStyles}>
 						<button
 							type="button"

dotcom-rendering/src/types/content.ts

@@ -1002,7 +1002,7 @@ export type ImageForLightbox = {
 	caption?: string;
 	displayCredit?: boolean;
 	title?: string;
-	starRating?: number;
+	starRating?: StarRating;
 	/**
 	 * Used for liveblog images to generate a link back to the
 	 * original post where the image was used