add very basic gallery scaffold

Author: i-hardy

…ing/src/layouts/HostedLayout.stories.tsx …/layouts/HostedArticleLayout.stories.tsxdotcom-rendering/src/layouts/HostedLayout.stories.tsx renamed to dotcom-rendering/src/layouts/HostedArticleLayout.stories.tsx dotcom-rendering/src/layouts/HostedLayout.stories.tsx renamed to dotcom-rendering/src/layouts/HostedArticleLayout.stories.tsx

@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
-import { HostedLayout } from './HostedLayout';
+import { HostedArticleLayout } from './HostedArticleLayout';
 
 const meta = {
-	title: 'Layouts/Hosted',
-	component: HostedLayout,
+	title: 'Layouts/HostedArticle',
+	component: HostedArticleLayout,
 	parameters: {
 		chromatic: {
 			modes: {
 				'light leftCol': allModes['light leftCol'],
 			},
 		},
 	},
-} satisfies Meta<typeof HostedLayout>;
+} satisfies Meta<typeof HostedArticleLayout>;
 
 export default meta;
 

…m-rendering/src/layouts/HostedLayout.tsx …ring/src/layouts/HostedArticleLayout.tsxdotcom-rendering/src/layouts/HostedLayout.tsx renamed to dotcom-rendering/src/layouts/HostedArticleLayout.tsx dotcom-rendering/src/layouts/HostedLayout.tsx renamed to dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -18,7 +18,7 @@ const border = css`
 	border: 1px solid black;
 `;
 
-export const HostedLayout = (props: WebProps | AppProps) => {
+export const HostedArticleLayout = (props: WebProps | AppProps) => {
 	return (
 		<>
 			{props.renderingTarget === 'Web' ? 'Masthead' : null}

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,17 @@
+import { RenderingTarget } from 'src/types/renderingTarget';
+
+interface Props {
+	renderingTarget: RenderingTarget;
+}
+
+interface WebProps extends Props {
+	renderingTarget: 'Web';
+}
+
+interface AppProps extends Props {
+	renderingTarget: 'Apps';
+}
+
+export const HostedGalleryLayout = (props: WebProps | AppProps) => {
+	return <div>Hosted gallery</div>;
+};