Add gallery sub meta

Co-authored-by: Jamie B <[email protected]>

Author: marjisound

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"

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>
 		</>
 	);

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);
 			}
 	}
 };