Added meta component to galleries for apps

Co-authored-by: Marjan Kalanaki <[email protected]>

Author: JamieB-gu

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

@@ -9,6 +9,7 @@ import {
 	Pillar,
 } from '../lib/articleFormat';
 import { ArticleMetaApps } from './ArticleMeta.apps';
+import { palette } from '../palette';
 
 const meta = {
 	component: ArticleMetaApps,
@@ -186,3 +187,23 @@ 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;

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

@@ -22,6 +22,7 @@ import { Dateline } from './Dateline';
 import { FollowWrapper } from './FollowWrapper.importable';
 import { Island } from './Island';
 import { LiveblogNotifications } from './LiveblogNotifications.importable';
+import { grid } from '../grid';
 
 type Props = {
 	format: ArticleFormat;
@@ -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/layouts/GalleryLayout.stories.tsx

@@ -4,7 +4,7 @@ import { WithBranding } from '../components/ArticleMeta.web.stories';
 import { ArticleDesign } from '../lib/articleFormat';
 import { getCurrentPillar } from '../lib/layoutHelpers';
 import { extractNAV } from '../model/extract-nav';
-import { enhanceArticleType } from '../types/article';
+import { enhanceArticleType, type Gallery } from '../types/article';
 import { GalleryLayout } from './GalleryLayout';
 
 const meta = {
@@ -16,6 +16,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const addBranding = (gallery: Gallery): Gallery => ({
+	...gallery,
+	frontendData: {
+		...gallery.frontendData,
+		commercialProperties: {
+			...gallery.frontendData.commercialProperties,
+			UK: {
+				...gallery.frontendData.commercialProperties.UK,
+				branding: WithBranding.args.branding,
+			},
+		},
+	},
+});
+
 const appsArticle = enhanceArticleType(GalleryFixture, 'Apps');
 
 if (appsArticle.design !== ArticleDesign.Gallery) {
@@ -25,7 +39,7 @@ if (appsArticle.design !== ArticleDesign.Gallery) {
 export const Apps = {
 	args: {
 		renderingTarget: 'Apps',
-		gallery: appsArticle,
+		gallery: addBranding(appsArticle),
 	},
 	parameters: {
 		formats: [
@@ -35,6 +49,9 @@ export const Apps = {
 				theme: appsArticle.theme,
 			},
 		],
+		config: {
+			renderingTarget: 'Apps',
+		},
 	},
 } satisfies Story;
 
@@ -51,19 +68,7 @@ export const Web = {
 			...extractNAV(webArticle.frontendData.nav),
 			selectedPillar: getCurrentPillar(webArticle.frontendData),
 		},
-		gallery: {
-			...webArticle,
-			frontendData: {
-				...webArticle.frontendData,
-				commercialProperties: {
-					...webArticle.frontendData.commercialProperties,
-					UK: {
-						...webArticle.frontendData.commercialProperties.UK,
-						branding: WithBranding.args.branding,
-					},
-				},
-			},
-		},
+		gallery: addBranding(webArticle),
 	},
 	parameters: {
 		formats: [

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -12,6 +12,7 @@ import type { NavType } from '../model/extract-nav';
 import { palette } from '../palette';
 import type { Gallery } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
+import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 
 interface Props {
 	gallery: Gallery;
@@ -94,25 +95,55 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						format={format}
 						standfirst={frontendData.standfirst}
 					/>
-					<ArticleMeta
-						branding={
-							frontendData.commercialProperties[
-								frontendData.editionId
-							].branding
-						}
-						format={format}
-						pageId={frontendData.pageId}
-						webTitle={frontendData.webTitle}
-						byline={frontendData.byline}
-						tags={frontendData.tags}
-						primaryDateline={frontendData.webPublicationDateDisplay}
-						secondaryDateline={
-							frontendData.webPublicationSecondaryDateDisplay
-						}
-						isCommentable={frontendData.isCommentable}
-						discussionApiUrl={frontendData.config.discussionApiUrl}
-						shortUrlId={frontendData.config.shortUrlId}
-					/>
+					{props.renderingTarget === 'Web' ? (
+						<ArticleMeta
+							branding={
+								frontendData.commercialProperties[
+									frontendData.editionId
+								].branding
+							}
+							format={format}
+							pageId={frontendData.pageId}
+							webTitle={frontendData.webTitle}
+							byline={frontendData.byline}
+							tags={frontendData.tags}
+							primaryDateline={
+								frontendData.webPublicationDateDisplay
+							}
+							secondaryDateline={
+								frontendData.webPublicationSecondaryDateDisplay
+							}
+							isCommentable={frontendData.isCommentable}
+							discussionApiUrl={
+								frontendData.config.discussionApiUrl
+							}
+							shortUrlId={frontendData.config.shortUrlId}
+						/>
+					) : null}
+					{props.renderingTarget === 'Apps' ? (
+						<ArticleMetaApps
+							branding={
+								frontendData.commercialProperties[
+									frontendData.editionId
+								].branding
+							}
+							format={format}
+							pageId={frontendData.pageId}
+							byline={frontendData.byline}
+							tags={frontendData.tags}
+							primaryDateline={
+								frontendData.webPublicationDateDisplay
+							}
+							secondaryDateline={
+								frontendData.webPublicationSecondaryDateDisplay
+							}
+							isCommentable={frontendData.isCommentable}
+							discussionApiUrl={
+								frontendData.config.discussionApiUrl
+							}
+							shortUrlId={frontendData.config.shortUrlId}
+						/>
+					) : null}
 					<div
 						css={[
 							border,