From 04ff8d2d8654b421c9800cdc4c38042303a04dac Mon Sep 17 00:00:00 2001
From: Marjan Kalanaki <marjan.kalanaki@guardian.co.uk>
Date: Wed, 25 Jun 2025 17:45:25 +0100
Subject: [PATCH 1/4] Add gallery sub meta

Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
---
 dotcom-rendering/src/components/SubMeta.tsx   | 34 ++++++++++++-------
 .../src/layouts/GalleryLayout.tsx             | 14 +++++++-
 dotcom-rendering/src/paletteDeclarations.ts   | 14 +++++---
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx
index aa1ac68b959..af29616b8c2 100644
--- a/dotcom-rendering/src/components/SubMeta.tsx
+++ b/dotcom-rendering/src/components/SubMeta.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css, type SerializedStyles } from '@emotion/react';
 import {
 	from,
 	space,
@@ -7,13 +7,15 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import { LinkButton } from '@guardian/source/react-components';
+import { grid } from '../grid';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import type { BaseLinkType } from '../model/extract-nav';
 import { palette } from '../palette';
 import { Island } from './Island';
 import { ShareButton } from './ShareButton.importable';
 
-const labelStyles = css`
+const labelStyles = (design: ArticleDesign): SerializedStyles => css`
+	${design === ArticleDesign.Gallery ? grid.column.centre : undefined};
 	${textSans12};
 	display: block;
 	color: ${palette('--sub-meta-label-text')};
@@ -46,7 +48,7 @@ const setMetaWidth = css`
 	}
 `;
 
-const listStyleNone = css`
+const listStyles = css`
 	list-style: none;
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns */
 	/* Needs double escape char: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#es2018_revision_of_illegal_escape_sequences */
@@ -79,7 +81,8 @@ const listStyleNone = css`
 	background-repeat: no-repeat;
 `;
 
-const listWrapper = css`
+const listWrapper = (design: ArticleDesign): SerializedStyles => css`
+	${design === ArticleDesign.Gallery ? grid.column.centre : undefined};
 	padding-bottom: 0.75rem;
 	margin-bottom: 6px;
 	border-bottom: 1px solid ${palette('--article-border')};
@@ -146,17 +149,23 @@ export const SubMeta = ({
 	return (
 		<div
 			data-print-layout="hide"
-			css={
+			css={[
+				bottomPadding,
 				format.design === ArticleDesign.Interactive
-					? [bottomPadding, setMetaWidth]
-					: bottomPadding
-			}
+					? setMetaWidth
+					: undefined,
+				format.design === ArticleDesign.Gallery
+					? grid.container
+					: undefined,
+			]}
 		>
 			{hasLinks && (
 				<>
-					<span css={labelStyles}>Explore more on these topics</span>
-					<div css={listWrapper}>
-						<ul css={listStyleNone}>
+					<span css={labelStyles(format.design)}>
+						Explore more on these topics
+					</span>
+					<div css={listWrapper(format.design)}>
+						<ul css={listStyles}>
 							{links.map((link) => (
 								<li css={listItemStyles} key={link.url}>
 									<a css={linkStyles} href={link.url}>
@@ -184,7 +193,8 @@ export const SubMeta = ({
 						/>
 					</Island>
 					<div css={syndicationButtonOverrides}>
-						{format.design === ArticleDesign.Interactive ? null : (
+						{format.design === ArticleDesign.Interactive ||
+						format.design === ArticleDesign.Gallery ? null : (
 							<LinkButton
 								priority="tertiary"
 								size="xsmall"
diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx
index 2882e3d2a56..9dc865a2768 100644
--- a/dotcom-rendering/src/layouts/GalleryLayout.tsx
+++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx
@@ -7,6 +7,7 @@ import { ArticleTitle } from '../components/ArticleTitle';
 import { MainMediaGallery } from '../components/MainMediaGallery';
 import { Masthead } from '../components/Masthead/Masthead';
 import { Standfirst } from '../components/Standfirst';
+import { SubMeta } from '../components/SubMeta';
 import { grid } from '../grid';
 import type { ArticleFormat } from '../lib/articleFormat';
 import type { NavType } from '../model/extract-nav';
@@ -167,7 +168,18 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					</div>
 				</header>
 				<div css={border}>Body</div>
-				<div css={border}>Submeta</div>
+				<SubMeta
+					format={format}
+					subMetaKeywordLinks={frontendData.subMetaKeywordLinks}
+					subMetaSectionLinks={frontendData.subMetaSectionLinks}
+					pageId={frontendData.pageId}
+					webUrl={frontendData.webURL}
+					webTitle={frontendData.webTitle}
+					showBottomSocialButtons={
+						frontendData.showBottomSocialButtons &&
+						props.renderingTarget === 'Web'
+					}
+				/>
 			</main>
 		</>
 	);
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 442027fa84d..a5e38fa8abb 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -3731,6 +3731,8 @@ const subMetaLabelTextLight: PaletteFunction = ({ theme, design }) => {
 				case ArticleDesign.Video:
 				case ArticleDesign.Audio:
 					return sourcePalette.neutral[60];
+				case ArticleDesign.Gallery:
+					return sourcePalette.neutral[73];
 				default:
 					return sourcePalette.neutral[46];
 			}
@@ -3775,6 +3777,7 @@ const subMetaBackgroundLight: PaletteFunction = ({
 		case ArticleDesign.Picture:
 		case ArticleDesign.Video:
 		case ArticleDesign.Audio:
+		case ArticleDesign.Gallery:
 			switch (theme) {
 				case ArticleSpecial.Labs:
 					return sourcePalette.neutral[86];
@@ -3840,6 +3843,7 @@ const subMetaTextLight: PaletteFunction = ({ design, theme }) => {
 				case ArticleDesign.Picture:
 				case ArticleDesign.Video:
 				case ArticleDesign.Audio:
+				case ArticleDesign.Gallery:
 					return sourcePalette.neutral[86];
 				case ArticleDesign.DeadBlog:
 				case ArticleDesign.LiveBlog:
@@ -3889,10 +3893,12 @@ const subMetaTextDark: PaletteFunction = ({ design, theme }) => {
 		case ArticleSpecial.SpecialReportAlt:
 			return sourcePalette.specialReportAlt[300];
 		default:
-			if (design === ArticleDesign.Picture) {
-				return sourcePalette.neutral[86];
-			} else {
-				return pillarPalette(theme, 500);
+			switch (design) {
+				case ArticleDesign.Picture:
+				case ArticleDesign.Gallery:
+					return sourcePalette.neutral[86];
+				default:
+					return pillarPalette(theme, 500);
 			}
 	}
 };

From cf0df3c457c32a2e7a75552682eedfdf87ad2765 Mon Sep 17 00:00:00 2001
From: Marjan Kalanaki <marjan.kalanaki@guardian.co.uk>
Date: Fri, 27 Jun 2025 09:09:39 +0100
Subject: [PATCH 2/4] moving the article design check outside of div for
 sindication button

---
 dotcom-rendering/src/components/SubMeta.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx
index af29616b8c2..05d7b971246 100644
--- a/dotcom-rendering/src/components/SubMeta.tsx
+++ b/dotcom-rendering/src/components/SubMeta.tsx
@@ -146,6 +146,11 @@ export const SubMeta = ({
 		};
 	};
 	const { links, hasLinks } = createLinks();
+
+	const showSindicationButton =
+		format.design !== ArticleDesign.Interactive &&
+		format.design !== ArticleDesign.Gallery;
+
 	return (
 		<div
 			data-print-layout="hide"
@@ -193,8 +198,7 @@ export const SubMeta = ({
 						/>
 					</Island>
 					<div css={syndicationButtonOverrides}>
-						{format.design === ArticleDesign.Interactive ||
-						format.design === ArticleDesign.Gallery ? null : (
+						{showSindicationButton ? (
 							<LinkButton
 								priority="tertiary"
 								size="xsmall"
@@ -219,7 +223,7 @@ export const SubMeta = ({
 							>
 								Reuse this content
 							</LinkButton>
-						)}
+						) : null}
 					</div>
 				</div>
 			)}

From c26190fa5221366342c65c6f737e10cab36783cd Mon Sep 17 00:00:00 2001
From: Marjan Kalanaki <marjan.kalanaki@guardian.co.uk>
Date: Fri, 27 Jun 2025 11:57:16 +0100
Subject: [PATCH 3/4] add gallery story for sub meta

---
 .../src/components/SubMeta.stories.tsx        | 48 ++++++++++++++++++-
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/dotcom-rendering/src/components/SubMeta.stories.tsx b/dotcom-rendering/src/components/SubMeta.stories.tsx
index 066c4bb1a34..90a21670c77 100644
--- a/dotcom-rendering/src/components/SubMeta.stories.tsx
+++ b/dotcom-rendering/src/components/SubMeta.stories.tsx
@@ -1,11 +1,16 @@
 import { css } from '@emotion/react';
 import type { StoryProps } from '../../.storybook/decorators/splitThemeDecorator';
-import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
+import {
+	defaultFormats,
+	splitTheme,
+} from '../../.storybook/decorators/splitThemeDecorator';
 import {
 	ArticleDesign,
 	ArticleDisplay,
 	getAllThemes,
+	Pillar,
 } from '../lib/articleFormat';
+import { palette } from '../palette';
 import { SubMeta } from './SubMeta';
 
 export default {
@@ -74,7 +79,46 @@ export const StandardStory = ({ format }: StoryProps) => {
 	);
 };
 StandardStory.storyName = 'Standard - All pillars';
-StandardStory.decorators = [splitTheme()];
+StandardStory.decorators = [
+	splitTheme(
+		[...defaultFormats].filter(
+			(format) => format.design !== ArticleDesign.Gallery,
+		),
+	),
+];
+
+export const GalleryStory = ({ format }: StoryProps) => {
+	return (
+		<SubMeta
+			format={format}
+			subMetaKeywordLinks={subMetaKeywordLinks}
+			subMetaSectionLinks={subMetaSectionLinks}
+			pageId=""
+			webUrl=""
+			webTitle=""
+			showBottomSocialButtons={false} // Galelries do not have bottom social buttons
+		/>
+	);
+};
+GalleryStory.storyName = 'Gallery - All pillars';
+GalleryStory.decorators = [
+	splitTheme(
+		[
+			{
+				display: ArticleDisplay.Standard,
+				design: ArticleDesign.Gallery,
+				theme: Pillar.News,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
+GalleryStory.parameters = {
+	colourSchemeBackground: {
+		light: palette('--article-background'),
+		dark: palette('--article-background'),
+	},
+};
 
 const allDeadBlogThemes = getAllThemes({
 	display: ArticleDisplay.Standard,

From a2ecd44ae2c4c2144d4c7aa948453a29e2cd8e4b Mon Sep 17 00:00:00 2001
From: Marjan Kalanaki <marjan.kalanaki@guardian.co.uk>
Date: Fri, 27 Jun 2025 11:59:02 +0100
Subject: [PATCH 4/4] fix typo

---
 dotcom-rendering/src/components/SubMeta.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx
index 05d7b971246..1fde813eb41 100644
--- a/dotcom-rendering/src/components/SubMeta.tsx
+++ b/dotcom-rendering/src/components/SubMeta.tsx
@@ -147,7 +147,7 @@ export const SubMeta = ({
 	};
 	const { links, hasLinks } = createLinks();
 
-	const showSindicationButton =
+	const showSyndicationButton =
 		format.design !== ArticleDesign.Interactive &&
 		format.design !== ArticleDesign.Gallery;
 
@@ -198,7 +198,7 @@ export const SubMeta = ({
 						/>
 					</Island>
 					<div css={syndicationButtonOverrides}>
-						{showSindicationButton ? (
+						{showSyndicationButton ? (
 							<LinkButton
 								priority="tertiary"
 								size="xsmall"