Merge pull request #14956 from guardian/ih/hosted-article-layout

Add layout scaffolds for hosted content

Author: i-hardy

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { allModes } from '../../.storybook/modes';
+import { HostedArticleLayout } from './HostedArticleLayout';
+
+const meta = {
+	title: 'Layouts/HostedArticle',
+	component: HostedArticleLayout,
+	parameters: {
+		chromatic: {
+			modes: {
+				'light leftCol': allModes['light leftCol'],
+			},
+		},
+	},
+} satisfies Meta<typeof HostedArticleLayout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Apps = {
+	args: {
+		renderingTarget: 'Apps',
+	},
+	parameters: {
+		config: {
+			renderingTarget: 'Apps',
+		},
+	},
+} satisfies Story;
+
+export const Web = {
+	args: {
+		renderingTarget: 'Web',
+	},
+	parameters: {
+		config: {
+			renderingTarget: 'Web',
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -0,0 +1,53 @@
+import { css } from '@emotion/react';
+import { grid } from '../grid';
+import type { RenderingTarget } from '../types/renderingTarget';
+
+interface Props {
+	renderingTarget: RenderingTarget;
+}
+
+interface WebProps extends Props {
+	renderingTarget: 'Web';
+}
+
+interface AppProps extends Props {
+	renderingTarget: 'Apps';
+}
+
+const border = css`
+	border: 1px solid black;
+`;
+
+export const HostedArticleLayout = (props: WebProps | AppProps) => {
+	return (
+		<>
+			{props.renderingTarget === 'Web' ? 'Masthead' : null}
+			<main>
+				<header css={[grid.container, border]}>
+					<div css={[grid.column.all]}>Main media</div>
+					<div
+						css={[grid.between('centre-column-start', 'grid-end')]}
+					>
+						Headline
+					</div>
+				</header>
+				<div css={[grid.container]}>
+					<div css={[grid.column.left, 'grid-row: 1']}>
+						Left column
+					</div>
+					<div css={[grid.column.right, 'grid-row: 1']}>
+						Onward content
+					</div>
+					<div css={[border, grid.column.centre, 'grid-row: 1']}>
+						Standfirst
+					</div>
+					<div css={[border, grid.column.centre]}>Meta</div>
+					<article css={[border, grid.column.centre]}>Body</article>
+				</div>
+				<div css={[grid.container, border]}>
+					<div css={[grid.column.all]}>Footer</div>
+				</div>
+			</main>
+		</>
+	);
+};

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { allModes } from '../../.storybook/modes';
+import { HostedGalleryLayout } from './HostedGalleryLayout';
+
+const meta = {
+	title: 'Layouts/HostedGallery',
+	component: HostedGalleryLayout,
+	parameters: {
+		chromatic: {
+			modes: {
+				'light leftCol': allModes['light leftCol'],
+			},
+		},
+	},
+} satisfies Meta<typeof HostedGalleryLayout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Apps = {
+	args: {
+		renderingTarget: 'Apps',
+	},
+	parameters: {
+		config: {
+			renderingTarget: 'Apps',
+		},
+	},
+} satisfies Story;
+
+export const Web = {
+	args: {
+		renderingTarget: 'Web',
+	},
+	parameters: {
+		config: {
+			renderingTarget: 'Web',
+		},
+	},
+} satisfies Story;

dotcom-rendering/src/layouts/HostedGalleryLayout.tsx

@@ -0,0 +1,45 @@
+import { css } from '@emotion/react';
+import { grid } from '../grid';
+import type { RenderingTarget } from '../types/renderingTarget';
+
+interface Props {
+	renderingTarget: RenderingTarget;
+}
+
+interface WebProps extends Props {
+	renderingTarget: 'Web';
+}
+
+interface AppProps extends Props {
+	renderingTarget: 'Apps';
+}
+
+const border = css`
+	border: 1px solid black;
+`;
+
+export const HostedGalleryLayout = (props: WebProps | AppProps) => {
+	return (
+		<>
+			{props.renderingTarget === 'Web' ? 'Masthead' : null}
+			<main>
+				<header css={[grid.container, border]}>
+					<div
+						css={[grid.between('centre-column-start', 'grid-end')]}
+					>
+						Headline
+					</div>
+				</header>
+				<div css={[grid.container]}>
+					<article css={[grid.column.all]}>
+						<div css={border}>Gallery</div>
+						<div css={border}>Onward</div>
+					</article>
+				</div>
+				<div css={[grid.container, border]}>
+					<div css={[grid.column.all]}>Footer</div>
+				</div>
+			</main>
+		</>
+	);
+};