Merge branch 'main' into ab/tag-page-formatting

Author: abeddow91

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/ArticleHeadline.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import {
+	between,
 	from,
 	headlineBold28,
 	headlineBold34,
@@ -116,13 +117,24 @@ const decideMobileHeadlineFont = (format: ArticleFormat) => {
 	}
 };
 
-const headlineFont = (format: ArticleFormat) => css`
-	${decideMobileHeadlineFont(format)}
+const headlineFont = (format: ArticleFormat) => {
+	if (format.design === ArticleDesign.Gallery) {
+		return css`
+			${decideMobileHeadlineFont(format)}
 
-	${from.tablet} {
-		${decideHeadlineFont(format)}
+			${from.desktop} {
+				${decideHeadlineFont(format)}
+			}
+		`;
 	}
-`;
+	return css`
+		${decideMobileHeadlineFont(format)}
+
+		${from.tablet} {
+			${decideHeadlineFont(format)}
+		}
+	`;
+};
 
 const invertedFontLineHeight = css`
 	line-height: 2.1875rem;
@@ -371,6 +383,17 @@ const decideBottomPadding = ({
 	}
 };
 
+const galleryStyles = css`
+	${grid.between('grid-start', 'centre-column-end')}
+
+	grid-row: 7/9;
+
+	${from.tablet} {
+		${grid.between('centre-column-start', 'grid-end')};
+		margin-left: -10px;
+	}
+`;
+
 export const ArticleHeadline = ({
 	headlineString,
 	format,
@@ -825,15 +848,7 @@ export const ArticleHeadline = ({
 					);
 				case ArticleDesign.Gallery: {
 					return (
-						<div
-							css={[
-								darkBackground,
-								grid.between('centre-column-start', 'grid-end'),
-								css`
-									grid-row: 7/9;
-								`,
-							]}
-						>
+						<div css={galleryStyles}>
 							<WithAgeWarning
 								tags={tags}
 								webPublicationDateDeprecated={
@@ -850,9 +865,16 @@ export const ArticleHeadline = ({
 											color: ${themePalette(
 												'--headline-colour',
 											)};
+											${darkBackground};
+											min-height: 84px;
 											padding-bottom: ${space[6]}px;
 											padding-left: ${space[3]}px;
 											padding-right: ${space[3]}px;
+
+											${between.mobileLandscape.and
+												.tablet} {
+												padding-left: ${space[5]}px;
+											}
 										`,
 									]}
 								>

dotcom-rendering/src/components/ArticleMeta.apps.tsx

@@ -201,6 +201,23 @@ const stretchLines = css`
 	grid-column: 1 / -1;
 `;
 
+const galleryMetaContainer = css`
+	${grid.column.centre}
+	padding-bottom: ${space[2]}px;
+	${from.tablet} {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			left: -10px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${themePalette('--article-border')};
+		}
+	}
+`;
+
 export const ArticleMetaApps = ({
 	branding,
 	format,
@@ -244,13 +261,7 @@ export const ArticleMetaApps = ({
 			}
 			css={[
 				metaContainerMargins,
-				isGallery ? grid.column.centre : undefined,
-				isGallery
-					? {
-							marginLeft: space[3],
-							paddingBottom: space[2],
-					  }
-					: undefined,
+				isGallery ? galleryMetaContainer : undefined,
 			]}
 		>
 			<div

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -190,9 +190,21 @@ export const metaContainer = (format: ArticleFormat) => {
 				case ArticleDesign.Gallery:
 					return css`
 						${grid.column.centre}
-						margin-bottom: ${space[3]}px;
-						margin-left: ${space[3]}px;
-						margin-right: ${space[3]}px;
+						padding-bottom: ${space[3]}px;
+						${from.tablet} {
+							position: relative;
+							&::before {
+								content: '';
+								position: absolute;
+								left: -10px;
+								top: 0;
+								bottom: 0;
+								width: 1px;
+								background-color: ${themePalette(
+									'--article-border',
+								)};
+							}
+						}
 					`;
 				default:
 					return defaultMargins;

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' ? (
@@ -177,15 +177,13 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 			)}
 			{renderingTarget === 'Apps' ? (
 				<DecideLayout
-					article={frontendData}
-					format={format}
+					article={props.article}
 					renderingTarget={renderingTarget}
 				/>
 			) : (
 				<DecideLayout
-					article={frontendData}
+					article={props.article}
 					NAV={props.NAV}
-					format={format}
 					renderingTarget={renderingTarget}
 				/>
 			)}

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -43,10 +43,16 @@ const immersiveMargins = css`
 `;
 
 const galleryStyles = css`
-	${grid.between('centre-column-start', 'grid-end')};
+	${grid.column.all}
+
 	grid-row: 6/7;
 	max-width: 400px;
 	min-width: 200px;
+
+	${from.tablet} {
+		${grid.between('centre-column-start', 'grid-end')};
+		margin-left: -10px;
+	}
 `;
 
 export const ArticleTitle = ({

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}