Merge branch 'main' into rjr-fix-poster-image-on-video-articles-attempt-4

Author: KaliedaRik

dotcom-rendering/package.json

@@ -41,7 +41,7 @@
 		"@guardian/ophan-tracker-js": "2.3.0",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",
-		"@guardian/source": "9.0.0",
+		"@guardian/source": "10.2.0",
 		"@guardian/source-development-kitchen": "18.1.1",
 		"@guardian/support-dotcom-components": "7.6.2",
 		"@guardian/tsconfig": "0.2.0",

dotcom-rendering/scripts/perf/k6/article-nier-automata.json

@@ -1590,7 +1590,6 @@
 			"enableDiscussionSwitch": true,
 			"prebidXaxis": true,
 			"stickyVideos": true,
-			"interactiveFullHeaderSwitch": true,
 			"discussionAllPageSize": true,
 			"prebidUserSync": true,
 			"audioOnwardJourneySwitch": true,

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

@@ -1,16 +1,53 @@
 import { css } from '@emotion/react';
-import { remSpace, textSans15 } from '@guardian/source/foundations';
+import {
+	between,
+	from,
+	remSpace,
+	space,
+	textSans15,
+	until,
+} from '@guardian/source/foundations';
 import { ButtonLink } from '@guardian/source/react-components';
 import { useEffect, useState } from 'react';
+import { grid } from '../grid';
+import { ArticleDesign } from '../lib/articleFormat';
 import { getNavigationClient, getUserClient } from '../lib/bridgetApi';
 import { palette } from '../palette';
 
 const year = new Date().getFullYear();
 
-const footerStyles = css`
-	${textSans15}
-	padding: ${remSpace[4]} ${remSpace[3]};
-	background-color: ${palette('--apps-footer-background')};
+const footerContainerStyles = (design?: ArticleDesign) => {
+	if (design === ArticleDesign.Gallery) {
+		return css`
+			${textSans15}
+			${grid.paddedContainer}
+			background-color: ${palette('--apps-footer-background')};
+
+			${until.tablet} {
+				padding-top: ${space[1]}px;
+			}
+
+			${from.tablet} {
+				border-left: 1px solid ${palette('--footer-border')};
+				border-right: 1px solid ${palette('--footer-border')};
+			}
+		`;
+	} else {
+		return css`
+			${textSans15}
+			padding: ${remSpace[4]} ${remSpace[3]};
+			background-color: ${palette('--apps-footer-background')};
+		`;
+	}
+};
+
+const galleryFooterStyles = css`
+	${grid.column.centre}
+	padding: ${remSpace[4]} 0;
+
+	${from.leftCol} {
+		${grid.between('centre-column-start', 'right-column-end')}
+	}
 `;
 
 const linkStyles = css`
@@ -62,7 +99,40 @@ const PrivacySettings = ({
 	}
 };
 
-export const AppsFooter = () => {
+const galleryBorder = css`
+	grid-row: 1 / 3;
+	position: relative;
+
+	${between.desktop.and.leftCol} {
+		${grid.column.right}
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: -10px; /* 10px to the left of this element */
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${palette('--footer-border')};
+		}
+	}
+
+	${from.leftCol} {
+		${grid.column.left}
+
+		&::after {
+			content: '';
+			position: absolute;
+			right: -10px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${palette('--footer-border')};
+		}
+	}
+`;
+
+export const AppsFooter = ({ design }: { design?: ArticleDesign }) => {
 	const [isCcpa, setIsCcpa] = useState<boolean>(false);
 
 	useEffect(() => {
@@ -90,21 +160,32 @@ export const AppsFooter = () => {
 	};
 
 	return (
-		<div css={footerStyles}>
-			&#169; {year} Guardian News and Media Limited or its affiliated
-			companies. All rights reserved. (dcar)
-			<br />
-			<PrivacySettings
-				isCcpa={isCcpa}
-				privacySettingsClickHandler={privacySettingsClickHandler}
-			/>
-			<ButtonLink
-				priority="secondary"
-				onClick={privacyPolicyClickHandler}
-				cssOverrides={linkStyles}
+		<div css={footerContainerStyles(design)}>
+			{design === ArticleDesign.Gallery && (
+				<div css={galleryBorder}></div>
+			)}
+			<div
+				css={
+					design === ArticleDesign.Gallery
+						? galleryFooterStyles
+						: undefined
+				}
 			>
-				Privacy Policy
-			</ButtonLink>
+				&#169; {year} Guardian News and Media Limited or its affiliated
+				companies. All rights reserved. (dcar)
+				<br />
+				<PrivacySettings
+					isCcpa={isCcpa}
+					privacySettingsClickHandler={privacySettingsClickHandler}
+				/>
+				<ButtonLink
+					priority="secondary"
+					onClick={privacyPolicyClickHandler}
+					cssOverrides={linkStyles}
+				>
+					Privacy Policy
+				</ButtonLink>
+			</div>
 		</div>
 	);
 };

dotcom-rendering/src/components/ArticlePage.tsx

@@ -90,6 +90,11 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 			<Island priority="enhancement" defer={{ until: 'idle' }}>
 				<FocusStyles />
 			</Island>
+			{!!frontendData.affiliateLinksDisclaimer && (
+				<Island priority="feature" defer={{ until: 'idle' }}>
+					<EnhanceAffiliateLinks />
+				</Island>
+			)}
 			{(format.design === ArticleDesign.LiveBlog ||
 				format.design === ArticleDesign.DeadBlog) && (
 				<SkipTo id={'key-events-carousel'} label="Skip to key events" />
@@ -131,11 +136,6 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 							serverSideTests={frontendData.config.abTests}
 						/>
 					</Island>
-					{!!frontendData.affiliateLinksDisclaimer && (
-						<Island priority="feature" defer={{ until: 'idle' }}>
-							<EnhanceAffiliateLinks />
-						</Island>
-					)}
 				</>
 			)}
 			{renderingTarget === 'Web' ? (

dotcom-rendering/src/components/Caption.tsx

@@ -6,6 +6,7 @@ import {
 	textSans14,
 	until,
 } from '@guardian/source/foundations';
+import { grid } from '../grid';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -208,12 +209,21 @@ const captionLink = css`
 	}
 `;
 
+const galleryStyles = css`
+	${grid.column.centre}
+	${from.leftCol} {
+		${grid.column.left}
+		grid-row-start: 8;
+	}
+`;
+
 const CameraIcon = ({ format }: IconProps) => {
 	return (
 		<span
 			css={[
 				iconStyle,
-				format.display === ArticleDisplay.Immersive &&
+				(format.display === ArticleDisplay.Immersive ||
+					format.design === ArticleDesign.Gallery) &&
 					hideIconBelowLeftCol,
 			]}
 		>
@@ -256,6 +266,8 @@ export const Caption = ({
 	const hideCredit = !displayCredit;
 	if (noCaption && (noCredit || hideCredit)) return null;
 
+	const isGallery = format.design === ArticleDesign.Gallery;
+
 	const isBlog =
 		format.design === ArticleDesign.LiveBlog ||
 		format.design === ArticleDesign.DeadBlog;
@@ -271,6 +283,7 @@ export const Caption = ({
 					tabletCaptionPadding,
 				padCaption && captionPadding,
 				isImmersive && immersivePadding,
+				isGallery && galleryStyles,
 			]}
 			data-spacefinder-role="inline"
 		>

dotcom-rendering/src/components/FrontSection.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { isString } from '@guardian/libs';
 import { between, from, space, until } from '@guardian/source/foundations';
 import { pageSkinContainer } from '../layouts/lib/pageSkin';
-import type { EditionId } from '../lib/edition';
+import { type EditionId, isNetworkFront } from '../lib/edition';
 import { hideAge } from '../lib/hideAge';
 import { palette, palette as schemePalette } from '../palette';
 import type { CollectionBranding } from '../types/branding';
@@ -98,13 +98,21 @@ type Props = {
 const width = (columns: number, columnWidth: number, columnGap: number) =>
 	`width: ${columns * columnWidth + (columns - 1) * columnGap}px;`;
 
-const borderColourStyles = (title?: string): string => {
+const borderColourStyles = (
+	title?: string,
+	showSectionColours?: boolean,
+): string => {
+	if (!showSectionColours) {
+		return schemePalette('--section-border-primary');
+	}
+
 	switch (title) {
 		case 'News':
 			return schemePalette('--section-border-news');
 		case 'Opinion':
 			return schemePalette('--section-border-opinion');
 		case 'Sport':
+		case 'Sports':
 			return schemePalette('--section-border-sport');
 		case 'Lifestyle':
 			return schemePalette('--section-border-lifestyle');
@@ -115,13 +123,21 @@ const borderColourStyles = (title?: string): string => {
 	}
 };
 
-const articleSectionTitleStyles = (title?: string): string => {
+const articleSectionTitleStyles = (
+	title?: string,
+	showSectionColours?: boolean,
+): string => {
+	if (!showSectionColours) {
+		return schemePalette('--article-section-title');
+	}
+
 	switch (title) {
 		case 'News':
 			return schemePalette('--article-section-title-news');
 		case 'Opinion':
 			return schemePalette('--article-section-title-opinion');
 		case 'Sport':
+		case 'Sports':
 			return schemePalette('--article-section-title-sport');
 		case 'Lifestyle':
 			return schemePalette('--article-section-title-lifestyle');
@@ -435,10 +451,13 @@ const bottomPaddingBetaContainer = (
 	}
 `;
 
-const primaryLevelTopBorder = (title?: string) => css`
+const primaryLevelTopBorder = (
+	title?: string,
+	showSectionColours?: boolean,
+) => css`
 	grid-row: 1;
 	grid-column: 1 / -1;
-	border-top: 2px solid ${borderColourStyles(title)};
+	border-top: 2px solid ${borderColourStyles(title, showSectionColours)};
 	/** Ensures the top border sits above the side borders */
 	z-index: 1;
 	height: fit-content;
@@ -591,6 +610,8 @@ export const FrontSection = ({
 	const useLargeSpacingDesktop =
 		!!isNextCollectionPrimary || isAboveDesktopAd;
 
+	const showSectionColours = isNetworkFront(pageId ?? '');
+
 	/**
 	 * id is being used to set the containerId in @see {ShowMore.importable.tsx}
 	 * this id pre-existed showMore so is probably also being used for something else.
@@ -624,7 +645,10 @@ export const FrontSection = ({
 						css={[
 							containerLevel === 'Secondary'
 								? secondaryLevelTopBorder
-								: primaryLevelTopBorder(title),
+								: primaryLevelTopBorder(
+										title,
+										showSectionColours,
+								  ),
 						]}
 					/>
 				)}
@@ -663,7 +687,10 @@ export const FrontSection = ({
 										? schemePalette(
 												'--article-section-secondary-title',
 										  )
-										: articleSectionTitleStyles(title)
+										: articleSectionTitleStyles(
+												title,
+												showSectionColours,
+										  )
 								}
 								// On paid fronts the title is not treated as a link
 								url={!isOnPaidContentFront ? url : undefined}

dotcom-rendering/src/components/LoopVideo.stories.tsx

@@ -44,6 +44,7 @@ export const Without5to4Ratio: Story = {
 
 export const PausePlay: Story = {
 	...Default,
+	name: 'Pause and play interaction',
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		const videoEl = canvas.getByTestId('loop-video');
@@ -64,6 +65,7 @@ export const PausePlay: Story = {
 
 export const UnmuteMute: Story = {
 	...Default,
+	name: 'Unmute and mute interaction',
 	parameters: {
 		test: {
 			// The following error is received without this flag: "TypeError: ophan.trackClickComponentEvent is not a function"
@@ -90,6 +92,7 @@ function sleep(ms: number) {
 
 export const InteractionObserver: Story = {
 	...Default,
+	name: 'Interaction observer',
 	render: (args) => (
 		<div data-testid="test-container">
 			<LoopVideo {...args} />

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -144,6 +144,7 @@ export const LoopVideoPlayer = forwardRef(
 					data-link-name={`gu-video-loop-${
 						showPlayIcon ? 'play' : 'pause'
 					}-${atomId}`}
+					data-chromatic="ignore"
 					preload={preloadPartialData ? 'metadata' : 'none'}
 					loop={true}
 					muted={isMuted}

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

@@ -39,6 +39,7 @@ export const ScrollableFeature = ({
 		>
 			{trails.map((card) => {
 				const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
+
 				return (
 					<ScrollableCarousel.Item key={card.url}>
 						<FeatureCard