Add shareButton colour to Hosted Content

dotcom-rendering/src/layouts/DecideLayout.tsx

@@ -170,13 +170,15 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 					return (
 						<HostedArticleLayout
 							content={article}
+							format={format}
 							renderingTarget={renderingTarget}
 						/>
 					);
 				case ArticleDesign.HostedGallery:
 					return (
 						<HostedGalleryLayout
 							content={article}
+							format={format}
 							renderingTarget={renderingTarget}
 						/>
 					);
@@ -365,13 +367,15 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 					return (
 						<HostedArticleLayout
 							content={article}
+							format={format}
 							renderingTarget={renderingTarget}
 						/>
 					);
 				case ArticleDesign.HostedGallery:
 					return (
 						<HostedGalleryLayout
 							content={article}
+							format={format}
 							renderingTarget={renderingTarget}
 						/>
 					);

dotcom-rendering/src/layouts/HostedArticleLayout.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
 import { hostedArticle } from '../../fixtures/manual/hostedArticle';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+} from '../lib/articleFormat';
 import { enhanceArticleType } from '../types/article';
 import { HostedArticleLayout } from './HostedArticleLayout';
 
@@ -20,9 +25,16 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const format = {
+	theme: ArticleSpecial.Labs,
+	design: ArticleDesign.HostedArticle,
+	display: ArticleDisplay.Standard,
+};
+
 export const Apps = {
 	args: {
 		content: enhanceArticleType(hostedArticle, 'Apps'),
+		format,
 		renderingTarget: 'Apps',
 	},
 	parameters: {
@@ -35,6 +47,7 @@ export const Apps = {
 export const Web = {
 	args: {
 		content: enhanceArticleType(hostedArticle, 'Web'),
+		format,
 		renderingTarget: 'Web',
 	},
 	parameters: {

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -9,18 +9,15 @@ import { Island } from '../components/Island';
 import { Section } from '../components/Section';
 import { ShareButton } from '../components/ShareButton.importable';
 import { grid } from '../grid';
-import {
-	ArticleDesign,
-	ArticleDisplay,
-	ArticleSpecial,
-} from '../lib/articleFormat';
+import type { ArticleFormat } from '../lib/articleFormat';
 import type { Article } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { Stuck } from './lib/stickiness';
 
 interface Props {
-	renderingTarget: RenderingTarget;
 	content: Article;
+	format: ArticleFormat;
+	renderingTarget: RenderingTarget;
 }
 
 interface WebProps extends Props {
@@ -54,8 +51,9 @@ const shareButtonWrapper = css`
 export const HostedArticleLayout = (props: WebProps | AppProps) => {
 	const {
 		content: {
-			frontendData: { headline, standfirst },
+			frontendData: { headline, standfirst, pageId, webTitle },
 		},
+		format,
 	} = props;
 
 	return (
@@ -117,15 +115,9 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 									defer={{ until: 'visible' }}
 								>
 									<ShareButton
-										pageId={'replace with actual pageId'}
-										webTitle={
-											'replace with actual webTitle'
-										}
-										format={{
-											theme: ArticleSpecial.Labs,
-											design: ArticleDesign.Standard,
-											display: ArticleDisplay.Standard,
-										}} // replace with Hosted Content format if there is one
+										pageId={pageId}
+										webTitle={webTitle}
+										format={format}
 										context="ArticleMeta"
 									/>
 								</Island>

dotcom-rendering/src/layouts/HostedGalleryLayout.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
 import { hostedGallery } from '../../fixtures/manual/hostedGallery';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+} from '../lib/articleFormat';
 import { enhanceArticleType } from '../types/article';
 import { HostedGalleryLayout } from './HostedGalleryLayout';
 
@@ -20,9 +25,16 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const format = {
+	theme: ArticleSpecial.Labs,
+	design: ArticleDesign.HostedGallery,
+	display: ArticleDisplay.Standard,
+};
+
 export const Apps = {
 	args: {
 		content: enhanceArticleType(hostedGallery, 'Apps'),
+		format,
 		renderingTarget: 'Apps',
 	},
 	parameters: {
@@ -35,6 +47,7 @@ export const Apps = {
 export const Web = {
 	args: {
 		content: enhanceArticleType(hostedGallery, 'Web'),
+		format,
 		renderingTarget: 'Web',
 	},
 	parameters: {

dotcom-rendering/src/layouts/HostedGalleryLayout.tsx

@@ -1,15 +1,23 @@
 import { css } from '@emotion/react';
-import { palette as sourcePalette } from '@guardian/source/foundations';
+import {
+	from,
+	palette as sourcePalette,
+	space,
+} from '@guardian/source/foundations';
 import { HostedContentHeader } from '../components/HostedContentHeader';
+import { Island } from '../components/Island';
 import { Section } from '../components/Section';
+import { ShareButton } from '../components/ShareButton.importable';
 import { grid } from '../grid';
+import type { ArticleFormat } from '../lib/articleFormat';
 import type { Article } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { Stuck } from './lib/stickiness';
 
 interface Props {
-	renderingTarget: RenderingTarget;
 	content: Article;
+	format: ArticleFormat;
+	renderingTarget: RenderingTarget;
 }
 
 interface WebProps extends Props {
@@ -24,7 +32,21 @@ const border = css`
 	border: 1px solid black;
 `;
 
+const metaFlex = css`
+	margin-bottom: ${space[3]}px;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+`;
+
 export const HostedGalleryLayout = (props: WebProps | AppProps) => {
+	const {
+		content: {
+			frontendData: { pageId, webTitle },
+		},
+		format,
+	} = props;
+
 	return (
 		<>
 			{props.renderingTarget === 'Web' ? (
@@ -59,8 +81,38 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
 						<div css={border}>Onward</div>
 					</article>
 				</div>
-				<div css={[grid.container, border]}>
-					<div css={[grid.column.all]}>Footer</div>
+				<div
+					css={[
+						grid.container,
+						border,
+						css`
+							padding: ${space[2]}px;
+
+							${from.desktop} {
+								padding: ${space[4]}px ${space[8]}px;
+							}
+						`,
+					]}
+				>
+					<div css={[grid.column.all]}>
+						<div css={[grid.column.left]}>
+							<div data-print-layout="hide" css={metaFlex}>
+								{props.renderingTarget === 'Web' && (
+									<Island
+										priority="feature"
+										defer={{ until: 'visible' }}
+									>
+										<ShareButton
+											pageId={pageId}
+											webTitle={webTitle}
+											format={format}
+											context="ArticleMeta"
+										/>
+									</Island>
+								)}
+							</div>
+						</div>
+					</div>
 				</div>
 			</main>
 		</>

dotcom-rendering/src/paletteDeclarations.ts

@@ -3703,6 +3703,9 @@ const shareButtonHoverLight: PaletteFunction = ({ design, theme }) => {
 		case ArticleDesign.Audio:
 		case ArticleDesign.Video:
 		case ArticleDesign.Picture:
+		case ArticleDesign.HostedArticle:
+		case ArticleDesign.HostedGallery:
+		case ArticleDesign.HostedVideo:
 			switch (theme) {
 				case ArticleSpecial.Labs:
 					return sourcePalette.neutral[100];
@@ -3780,6 +3783,9 @@ const shareButtonLight: PaletteFunction = ({ design, theme, display }) => {
 		case ArticleDesign.Audio:
 		case ArticleDesign.Video:
 		case ArticleDesign.Picture:
+		case ArticleDesign.HostedArticle:
+		case ArticleDesign.HostedGallery:
+		case ArticleDesign.HostedVideo:
 			switch (theme) {
 				case ArticleSpecial.Labs:
 					return sourcePalette.neutral[7];