basic layout scaffold with story

Author: i-hardy

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { allModes } from '../../.storybook/modes';
+import { HostedLayout } from './HostedLayout';
+
+const meta = {
+	title: 'Layouts/Hosted',
+	component: HostedLayout,
+	parameters: {
+		chromatic: {
+			modes: {
+				'light leftCol': allModes['light leftCol'],
+			},
+		},
+	},
+} satisfies Meta<typeof HostedLayout>;
+
+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/HostedLayout.tsx

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+import { RenderingTarget } from 'src/types/renderingTarget';
+import { grid } from '../grid';
+
+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 HostedLayout = (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]}>Left column</div>
+					<div css={[grid.column.right]}>Right column</div>
+					<div css={[border, grid.column.centre]}>Standfirst</div>
+					<div css={[border, grid.column.centre]}>Meta</div>
+					<article css={[border, grid.column.centre]}>Body</article>
+				</div>
+				<div css={[grid.container]}>
+					<div css={[border, grid.column.all]}>Onward</div>
+				</div>
+			</main>
+		</>
+	);
+};