Merge pull request #14137 from guardian/add-gallery-sub-meta

Add gallery sub meta

Author: marjisound

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,

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')};
@@ -143,20 +146,31 @@ export const SubMeta = ({
 		};
 	};
 	const { links, hasLinks } = createLinks();
+
+	const showSyndicationButton =
+		format.design !== ArticleDesign.Interactive &&
+		format.design !== ArticleDesign.Gallery;
+
 	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 +198,7 @@ export const SubMeta = ({
 						/>
 					</Island>
 					<div css={syndicationButtonOverrides}>
-						{format.design === ArticleDesign.Interactive ? null : (
+						{showSyndicationButton ? (
 							<LinkButton
 								priority="tertiary"
 								size="xsmall"
@@ -209,7 +223,7 @@ export const SubMeta = ({
 							>
 								Reuse this content
 							</LinkButton>
-						)}
+						) : null}
 					</div>
 				</div>
 			)}

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