[Fairground 🎡] Add the static/medium/four container to DCR

dotcom-rendering/src/components/DecideContainer.tsx

@@ -29,6 +29,7 @@ import { NavList } from './NavList';
 import { ScrollableHighlights } from './ScrollableHighlights.importable';
 import { ScrollableMedium } from './ScrollableMedium.importable';
 import { ScrollableSmall } from './ScrollableSmall.importable';
+import { StaticMediumFour } from './StaticMediumFour';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -277,9 +278,18 @@ export const DecideContainer = ({
 					/>
 				</Island>
 			);
+		case 'static/medium/4':
+			return (
+				<StaticMediumFour
+					trails={trails}
+					containerPalette={containerPalette}
+					showAge={showAge}
+					absoluteServerTimes={absoluteServerTimes}
+					imageLoading={imageLoading}
+				/>
+			);
 		case 'scrollable/feature':
 		case 'static/feature/2':
-		case 'static/medium/4':
 		default:
 			return <p>{containerType} is not yet supported</p>;
 	}

dotcom-rendering/src/components/StaticMediumFour.stories.tsx

@@ -0,0 +1,67 @@
+import { breakpoints } from '@guardian/source/foundations';
+import type { Meta, StoryObj } from '@storybook/react';
+import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
+import { trails } from '../../fixtures/manual/trails';
+import { FrontSection } from './FrontSection';
+import { StaticMediumFour } from './StaticMediumFour';
+
+const meta = {
+	component: StaticMediumFour,
+	title: 'Components/StaticMediumFour',
+	parameters: {
+		chromatic: {
+			viewports: [
+				breakpoints.mobile,
+				breakpoints.tablet,
+				breakpoints.wide,
+			],
+		},
+	},
+	args: {
+		trails,
+		showAge: true,
+		absoluteServerTimes: true,
+		imageLoading: 'eager',
+	},
+	render: (args) => (
+		<FrontSection
+			discussionApiUrl={discussionApiUrl}
+			editionId={'UK'}
+			showTopBorder={true}
+		>
+			<StaticMediumFour {...args} />
+		</FrontSection>
+	),
+} satisfies Meta<typeof StaticMediumFour>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const One: Story = {
+	name: 'With one card',
+	args: {
+		trails: trails.slice(0, 1),
+	},
+};
+
+export const Two: Story = {
+	name: 'With two cards',
+	args: {
+		trails: trails.slice(0, 2),
+	},
+};
+
+export const Three: Story = {
+	name: 'With three cards',
+	args: {
+		trails: trails.slice(0, 3),
+	},
+};
+
+export const Four: Story = {
+	name: 'With four cards',
+	args: {
+		trails: trails.slice(0, 4),
+	},
+};

dotcom-rendering/src/components/StaticMediumFour.tsx

@@ -0,0 +1,65 @@
+import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
+import { LI } from './Card/components/LI';
+import { UL } from './Card/components/UL';
+import type { Loading } from './CardPicture';
+import { FrontCard } from './FrontCard';
+
+type Props = {
+	trails: DCRFrontCard[];
+	imageLoading: Loading;
+	containerPalette?: DCRContainerPalette;
+	showAge?: boolean;
+	absoluteServerTimes: boolean;
+	showImage?: boolean;
+};
+
+export const StaticMediumFour = ({
+	trails,
+	containerPalette,
+	showAge,
+	absoluteServerTimes,
+	imageLoading,
+	showImage = true,
+}: Props) => {
+	const cards = trails.splice(0, 4);
+
+	return (
+		<UL
+			direction="row"
+			padBottom={true}
+			showTopBar={true}
+			isFlexibleContainer={true}
+		>
+			{cards.map((card, cardIndex) => {
+				return (
+					<LI
+						stretch={false}
+						percentage={'25%'}
+						key={card.url}
+						padSides={true}
+						showDivider={cardIndex > 0}
+					>
+						<FrontCard
+							trail={card}
+							containerPalette={containerPalette}
+							containerType="flexible/special"
+							showAge={showAge}
+							absoluteServerTimes={absoluteServerTimes}
+							image={showImage ? card.image : undefined}
+							imageLoading={imageLoading}
+							imagePositionOnDesktop={'bottom'}
+							/* we don't want to support sublinks on standard cards here so we hard code to undefined */
+							supportingContent={undefined}
+							imageSize={'medium'}
+							aspectRatio="5:4"
+							kickerText={card.kickerText}
+							showLivePlayable={false}
+							showTopBarDesktop={false}
+							showTopBarMobile={true}
+						/>
+					</LI>
+				);
+			})}
+		</UL>
+	);
+};

dotcom-rendering/src/model/enhanceCollections.ts

@@ -13,11 +13,7 @@ const FORBIDDEN_CONTAINERS = [
 	'qatar treat',
 ];
 
-const UNSUPPORTED_CONTAINERS = [
-	'scrollable/feature',
-	'static/feature/2',
-	'static/medium/4',
-];
+const UNSUPPORTED_CONTAINERS = ['scrollable/feature', 'static/feature/2'];
 
 const PALETTE_STYLES_URI =
 	'https://content.guardianapis.com/atom/interactive/interactives/2022/03/29/fronts-container-colours/default';