Merge branch 'main' into feat/sponsored-content-label

Author: on-ye

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -397,6 +397,8 @@ const galleryStyles = css`
 	${grid.between('grid-start', 'centre-column-end')}
 
 	grid-row: 7/9;
+	position: relative;
+	z-index: ${getZIndex('articleHeadline')};
 
 	${from.tablet} {
 		${grid.between('centre-column-start', 'grid-end')};

dotcom-rendering/src/components/MainMediaGallery.tsx

@@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs';
 import { from } from '@guardian/source/foundations';
 import { grid } from '../grid';
 import { type ArticleFormat } from '../lib/articleFormat';
+import { getZIndex } from '../lib/getZIndex';
 import { getImage } from '../lib/image';
 import { type ImageBlockElement } from '../types/content';
 import { type RenderingTarget } from '../types/renderingTarget';
@@ -19,8 +20,10 @@ type Props = {
 
 const styles = css`
 	${grid.column.all}
+	position: relative;
 	height: calc(80vh - 48px);
 	grid-row: 1/8;
+	z-index: ${getZIndex('mainMedia')};
 	${from.desktop} {
 		height: calc(100vh - 48px);
 	}

dotcom-rendering/src/components/MostViewedFooterGrid.tsx

@@ -10,7 +10,7 @@ import { palette } from '../palette';
 import type { TrailTabType, TrailType } from '../types/trails';
 import { MostViewedFooterItem } from './MostViewedFooterItem';
 
-const thinGreySolid = `1px solid ${palette('--article-border')}`;
+const thinGreySolid = `1px solid ${palette('--article-section-border')}`;
 
 const hidePanel = css`
 	display: none;
@@ -85,7 +85,7 @@ const gridContainer = css`
 
 	/* We set left border on the grid container, and then right border on
     the gridItems to prevent borders doubling up */
-	border-left: 1px solid ${palette('--article-border')};
+	border-left: 1px solid ${palette('--article-section-border')};
 `;
 
 type Props = {

dotcom-rendering/src/components/MostViewedFooterItem.tsx

@@ -15,10 +15,10 @@ import { LinkHeadline } from './LinkHeadline';
 const gridItem = css`
 	position: relative;
 
-	border-top: 1px solid ${palette('--article-border')};
+	border-top: 1px solid ${palette('--article-section-border')};
 
 	/* The left border is set on the container */
-	border-right: 1px solid ${palette('--article-border')};
+	border-right: 1px solid ${palette('--article-section-border')};
 	min-height: 52px;
 
 	&:hover {

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

@@ -308,7 +308,7 @@ export const OnwardsUpper = ({
 			{!!url && (
 				<Section
 					fullWidth={true}
-					borderColour={palette('--article-border')}
+					borderColour={palette('--article-section-border')}
 				>
 					<FetchOnwardsData
 						url={url}
@@ -325,7 +325,7 @@ export const OnwardsUpper = ({
 			{!!curatedDataUrl && !isPaidContent && (
 				<Section
 					fullWidth={true}
-					borderColour={palette('--article-border')}
+					borderColour={palette('--article-section-border')}
 				>
 					<FetchOnwardsData
 						url={curatedDataUrl}

dotcom-rendering/src/components/SeriesSectionLink.tsx

@@ -19,6 +19,7 @@ import {
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
+import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
 import type { TagType } from '../types/tag';
 import { Hide } from './Hide';
@@ -370,6 +371,8 @@ export const SeriesSectionLink = ({
 							format.design === ArticleDesign.Gallery &&
 								css`
 									display: inline-block;
+									position: relative;
+									z-index: ${getZIndex('articleHeadline')};
 								`,
 							format.display === ArticleDisplay.Immersive &&
 								css`

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -471,7 +471,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					data-link-name="most-popular"
 					data-component="most-popular"
 					backgroundColour={palette('--article-section-background')}
-					borderColour={palette('--article-border')}
+					borderColour={palette('--article-section-border')}
 					fontColour={palette('--article-section-title')}
 				>
 					<MostViewedFooterLayout renderAds={isWeb && renderAds}>

dotcom-rendering/src/paletteDeclarations.ts

@@ -3401,6 +3401,18 @@ const articleBorderLight: PaletteFunction = ({ design, theme }) => {
 	}
 };
 
+const articleSectionBorderLight: PaletteFunction = (format) => {
+	if (format.design === ArticleDesign.Gallery) {
+		return sourcePalette.neutral[86];
+	}
+
+	return articleBorderLight(format);
+};
+
+const articleSectionBorderDark: PaletteFunction = () => {
+	return sourcePalette.neutral[20];
+};
+
 const footerBorderLight: PaletteFunction = () => {
 	return sourcePalette.neutral[86];
 };
@@ -6340,6 +6352,10 @@ const paletteColours = {
 		light: articleSectionBackgroundLight,
 		dark: articleSectionBackgroundDark,
 	},
+	'--article-section-border': {
+		light: articleSectionBorderLight,
+		dark: articleSectionBorderDark,
+	},
 	'--article-section-secondary-title': {
 		light: articleSectionSecondaryTitleLight,
 		dark: articleSectionSecondaryTitleDark,