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

Author: KaliedaRik

apps-rendering/README.md

@@ -8,7 +8,7 @@
 4. Install dependencies:
 
 ```sh
-pnpm
+pnpm install
 ```
 
 ### Run (Development)

dotcom-rendering/package.json

@@ -43,7 +43,7 @@
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "18.1.1",
-		"@guardian/support-dotcom-components": "7.5.0",
+		"@guardian/support-dotcom-components": "7.6.2",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "7.75.1",

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

@@ -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

@@ -98,6 +98,40 @@ type Props = {
 const width = (columns: number, columnWidth: number, columnGap: number) =>
 	`width: ${columns * columnWidth + (columns - 1) * columnGap}px;`;
 
+const borderColourStyles = (title?: string): string => {
+	switch (title) {
+		case 'News':
+			return schemePalette('--section-border-news');
+		case 'Opinion':
+			return schemePalette('--section-border-opinion');
+		case 'Sport':
+			return schemePalette('--section-border-sport');
+		case 'Lifestyle':
+			return schemePalette('--section-border-lifestyle');
+		case 'Culture':
+			return schemePalette('--section-border-culture');
+		default:
+			return schemePalette('--section-border-primary');
+	}
+};
+
+const articleSectionTitleStyles = (title?: string): string => {
+	switch (title) {
+		case 'News':
+			return schemePalette('--article-section-title-news');
+		case 'Opinion':
+			return schemePalette('--article-section-title-opinion');
+		case 'Sport':
+			return schemePalette('--article-section-title-sport');
+		case 'Lifestyle':
+			return schemePalette('--article-section-title-lifestyle');
+		case 'Culture':
+			return schemePalette('--article-section-title-culture');
+		default:
+			return schemePalette('--article-section-title');
+	}
+};
+
 /** Not all browsers support CSS grid, so we set explicit width as a fallback */
 const fallbackStyles = css`
 	@supports not (display: grid) {
@@ -401,10 +435,10 @@ const bottomPaddingBetaContainer = (
 	}
 `;
 
-const primaryLevelTopBorder = css`
+const primaryLevelTopBorder = (title?: string) => css`
 	grid-row: 1;
 	grid-column: 1 / -1;
-	border-top: 2px solid ${schemePalette('--section-border-primary')};
+	border-top: 2px solid ${borderColourStyles(title)};
 	/** Ensures the top border sits above the side borders */
 	z-index: 1;
 	height: fit-content;
@@ -590,7 +624,7 @@ export const FrontSection = ({
 						css={[
 							containerLevel === 'Secondary'
 								? secondaryLevelTopBorder
-								: primaryLevelTopBorder,
+								: primaryLevelTopBorder(title),
 						]}
 					/>
 				)}
@@ -629,9 +663,7 @@ export const FrontSection = ({
 										? schemePalette(
 												'--article-section-secondary-title',
 										  )
-										: schemePalette(
-												'--article-section-title',
-										  )
+										: articleSectionTitleStyles(title)
 								}
 								// On paid fronts the title is not treated as a link
 								url={!isOnPaidContentFront ? url : undefined}

dotcom-rendering/src/components/FrontsAdSlots.tsx

@@ -64,7 +64,6 @@ export const MerchandisingSlot = ({
 		renderAds && (
 			<Section
 				fullWidth={true}
-				data-print-layout="hide"
 				padSides={false}
 				showTopBorder={false}
 				showSideBorders={false}

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

@@ -117,15 +117,15 @@ export const LoopVideo = ({
 		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- In earlier versions of the HTML specification, play() didn't return a value
 		if (startPlayPromise !== undefined) {
 			await startPlayPromise
+				.then(() => {
+					// Autoplay succeeded
+					setPlayerState('PLAYING');
+				})
 				.catch((error: Error) => {
 					// Autoplay failed
 					logAndReportError(src, error);
 					setPosterImage(image);
-					setShowPlayIcon(true);
-				})
-				.then(() => {
-					// Autoplay succeeded
-					setPlayerState('PLAYING');
+					setPlayerState('PAUSED_BY_BROWSER');
 				});
 		}
 	}, [src, image]);