Merge pull request #14068 from guardian/add-meta-for-gallery

Add meta for gallery

Author: marjisound

dotcom-rendering/fixtures/generated/fe-articles/GalleryLabs.ts

@@ -38,6 +38,10 @@ const articles = [
 		name: 'Gallery',
 		url: 'https://www.theguardian.com/artanddesign/gallery/2025/jun/06/the-week-around-the-world-in-20-pictures',
 	},
+	{
+		name: 'GalleryLabs',
+		url: 'https://www.theguardian.com/uncommon-holidays/gallery/2025/apr/28/mysterious-islands-medieval-castles-monets-gardens-must-see-places-normandy-in-pictures',
+	},
 	{
 		name: 'Audio',
 		url: 'https://www.theguardian.com/world/2013/jun/06/nsa-phone-records-verizon-court-order',

dotcom-rendering/scripts/test-data/gen-fixtures.js

@@ -2,12 +2,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { leftColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { defaultFormats } from '../../.storybook/decorators/splitThemeDecorator';
 import { allModes } from '../../.storybook/modes';
+import { GalleryLabs as GalleryLabsFixture } from '../../fixtures/generated/fe-articles/GalleryLabs';
+import type { ArticleFormat } from '../lib/articleFormat';
 import {
 	ArticleDesign,
 	ArticleDisplay,
 	getAllThemes,
 	Pillar,
 } from '../lib/articleFormat';
+import { palette } from '../palette';
+import { enhanceArticleType } from '../types/article';
 import { ArticleMetaApps } from './ArticleMeta.apps';
 
 const meta = {
@@ -58,7 +62,9 @@ export const WithFollowStory = {
 		config: {
 			renderingTarget: 'Apps',
 		},
-		formats: defaultFormats,
+		formats: defaultFormats.filter(
+			(format: ArticleFormat) => format.design !== ArticleDesign.Gallery,
+		),
 	},
 } satisfies Story;
 
@@ -186,3 +192,56 @@ export const WithBrandingStoryForAdvertisingPartner = {
 		},
 	},
 } satisfies Story;
+
+export const GalleryDesign = {
+	args: {
+		...WithFollowStory.args,
+		isCommentable: true,
+	},
+	parameters: {
+		formats: getAllThemes({
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Gallery,
+		}),
+		config: {
+			renderingTarget: 'Apps',
+		},
+		colourSchemeBackground: {
+			light: palette('--article-background'),
+			dark: palette('--article-background'),
+		},
+	},
+} satisfies Story;
+
+const appArticle = enhanceArticleType(GalleryLabsFixture, 'Web');
+export const GalleryLabsWithBranding = {
+	args: {
+		branding:
+			appArticle.frontendData.commercialProperties[
+				appArticle.frontendData.editionId
+			].branding,
+		format: {
+			design: appArticle.design,
+			display: appArticle.display,
+			theme: appArticle.theme,
+		},
+		pageId: appArticle.frontendData.pageId,
+		byline: appArticle.frontendData.byline,
+		tags: appArticle.frontendData.tags,
+		primaryDateline: appArticle.frontendData.webPublicationDateDisplay,
+		secondaryDateline:
+			appArticle.frontendData.webPublicationSecondaryDateDisplay,
+		isCommentable: appArticle.frontendData.isCommentable,
+		discussionApiUrl: appArticle.frontendData.config.discussionApiUrl,
+		shortUrlId: appArticle.frontendData.config.shortUrlId,
+	},
+	parameters: {
+		config: {
+			renderingTarget: 'Apps',
+		},
+		colourSchemeBackground: {
+			light: palette('--article-background'),
+			dark: palette('--article-background'),
+		},
+	},
+} satisfies Story;

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

@@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs';
 import { from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { ReactNode } from 'react';
+import { grid } from '../grid';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
 	ArticleDesign,
@@ -224,6 +225,7 @@ export const ArticleMetaApps = ({
 	const isImmersive = format.display === ArticleDisplay.Immersive;
 	const isAnalysis = format.design === ArticleDesign.Analysis;
 	const isLiveBlog = format.design === ArticleDesign.LiveBlog;
+	const isGallery = format.design === ArticleDesign.Gallery;
 
 	const shouldShowFollowButtons = (layoutOrDesignType: boolean) =>
 		layoutOrDesignType && !!byline && !isUndefined(soleContributor);
@@ -239,7 +241,16 @@ export const ArticleMetaApps = ({
 			className={
 				isInteractive ? interactiveLegacyClasses.metaContainer : ''
 			}
-			css={metaContainerMargins}
+			css={[
+				metaContainerMargins,
+				isGallery ? grid.column.centre : undefined,
+				isGallery
+					? {
+							marginLeft: space[3],
+							paddingBottom: space[2],
+					  }
+					: undefined,
+			]}
 		>
 			<div
 				css={[

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

@@ -9,13 +9,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { leftColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { defaultFormats } from '../../.storybook/decorators/splitThemeDecorator';
 import { allModes } from '../../.storybook/modes';
+import { GalleryLabs as GalleryLabsFixture } from '../../fixtures/generated/fe-articles/GalleryLabs';
 import {
 	ArticleDesign,
 	ArticleDisplay,
+	type ArticleFormat,
 	getAllThemes,
 	Pillar,
 } from '../lib/articleFormat';
 import { palette } from '../palette';
+import { enhanceArticleType } from '../types/article';
 import { ArticleMeta } from './ArticleMeta.web';
 
 const meta = {
@@ -64,7 +67,9 @@ export const Default = {
 		shortUrlId: '',
 	},
 	parameters: {
-		formats: defaultFormats,
+		formats: defaultFormats.filter(
+			(format: ArticleFormat) => format.design !== ArticleDesign.Gallery,
+		),
 	},
 	decorators: [leftColumnDecorator],
 } satisfies Story;
@@ -328,3 +333,59 @@ export const VideoDesignWithSource = {
 		}),
 	},
 } satisfies Story;
+
+export const GalleryDesign = {
+	args: {
+		...Default.args,
+		isCommentable: true,
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		shortUrlId: '/p/d8ex5',
+	},
+
+	parameters: {
+		...Default.parameters,
+		formats: getAllThemes({
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Gallery,
+		}),
+		colourSchemeBackground: {
+			light: palette('--article-background'),
+			dark: palette('--article-background'),
+		},
+	},
+	decorators: [leftColumnDecorator],
+} satisfies Story;
+
+const webArticle = enhanceArticleType(GalleryLabsFixture, 'Web');
+
+export const GalleryLabsWithBranding = {
+	args: {
+		branding:
+			webArticle.frontendData.commercialProperties[
+				webArticle.frontendData.editionId
+			].branding,
+		format: {
+			design: webArticle.design,
+			display: webArticle.display,
+			theme: webArticle.theme,
+		},
+		pageId: webArticle.frontendData.pageId,
+		webTitle: webArticle.frontendData.webTitle,
+		byline: webArticle.frontendData.byline,
+		tags: webArticle.frontendData.tags,
+		primaryDateline: webArticle.frontendData.webPublicationDateDisplay,
+		secondaryDateline:
+			webArticle.frontendData.webPublicationSecondaryDateDisplay,
+		isCommentable: webArticle.frontendData.isCommentable,
+		discussionApiUrl: webArticle.frontendData.config.discussionApiUrl,
+		shortUrlId: webArticle.frontendData.config.shortUrlId,
+	},
+
+	parameters: {
+		colourSchemeBackground: {
+			light: palette('--article-background'),
+			dark: palette('--article-background'),
+		},
+	},
+	decorators: [leftColumnDecorator],
+} satisfies Story;

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
+import { grid } from '../../src/grid';
 import type { FEArticle } from '../frontend/feArticle';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
@@ -57,6 +58,10 @@ const meta = (format: ArticleFormat) => {
 		`;
 	}
 
+	if (format.design === ArticleDesign.Gallery) {
+		return '';
+	}
+
 	return css`
 		${between.tablet.and.leftCol} {
 			order: 3;
@@ -182,6 +187,13 @@ export const metaContainer = (format: ArticleFormat) => {
 				case ArticleDesign.DeadBlog: {
 					return '';
 				}
+				case ArticleDesign.Gallery:
+					return css`
+						${grid.column.centre}
+						margin-bottom: ${space[3]}px;
+						margin-left: ${space[3]}px;
+						margin-right: ${space[3]}px;
+					`;
 				default:
 					return defaultMargins;
 			}

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

@@ -134,11 +134,11 @@ function decideArticleLogo(
 	const maybeDarkLogo = branding.logoForDarkBackground ?? branding.logo;
 
 	const useDarkColourScheme =
-		(format.design === ArticleDesign.Video ||
+		format.design === ArticleDesign.Gallery ||
+		((format.design === ArticleDesign.Video ||
 			format.design === ArticleDesign.Audio ||
-			format.design === ArticleDesign.Gallery ||
 			format.design === ArticleDesign.Picture) &&
-		format.theme !== ArticleSpecial.Labs;
+			format.theme !== ArticleSpecial.Labs);
 
 	return (
 		<picture>

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import {
 	headlineMedium17,
+	palette as sourcePalette,
 	textSansItalic17,
 	until,
 } from '@guardian/source/foundations';
@@ -29,24 +30,44 @@ const standfirstColourBelowDesktop = css`
 	}
 `;
 
-const bylineStyles = css`
-	${headlineMedium17}
+const bylineStyles = (format: ArticleFormat) => {
+	const defaultStyles = css`
+		${headlineMedium17}
 
-	padding-bottom: 8px;
-	font-style: italic;
+		padding-bottom: 8px;
+		font-style: italic;
 
-	color: ${schemedPalette('--byline')};
+		color: ${schemedPalette('--byline')};
 
-	a {
-		color: ${schemedPalette('--byline-anchor')};
-		font-weight: 700;
-		text-decoration: none;
-		font-style: normal;
-		:hover {
-			text-decoration: underline;
+		a {
+			color: ${schemedPalette('--byline-anchor')};
+			font-weight: 700;
+			text-decoration: none;
+			font-style: normal;
+			:hover {
+				text-decoration: underline;
+			}
 		}
+	`;
+
+	switch (format.design) {
+		case ArticleDesign.Gallery:
+			return css`
+				${defaultStyles}
+				a {
+					font-style: italic;
+					border-bottom: 0.5px solid ${sourcePalette.neutral[46]};
+					:hover {
+						text-decoration: none;
+						border-color: ${schemedPalette('--byline-anchor')};
+					}
+				}
+			`;
+
+		default:
+			return defaultStyles;
 	}
-`;
+};
 
 const labsBylineStyles = css`
 	${textSansItalic17};
@@ -74,7 +95,7 @@ export const Contributor = ({ byline, tags, format, source }: Props) => (
 						: ''
 				}
 				css={[
-					bylineStyles,
+					bylineStyles(format),
 					format.theme === ArticleSpecial.Labs && labsBylineStyles,
 					format.design === ArticleDesign.LiveBlog &&
 						standfirstColourBelowDesktop,