Scrollable medium setup

dotcom-rendering/src/components/DecideContainer.tsx

@@ -27,6 +27,7 @@ import { FlexibleSpecial } from './FlexibleSpecial';
 import { Island } from './Island';
 import { NavList } from './NavList';
 import { ScrollableHighlights } from './ScrollableHighlights.importable';
+import { ScrollableMedium } from './ScrollableMedium';
 import { ScrollableSmall } from './ScrollableSmall';
 
 type Props = {
@@ -262,6 +263,16 @@ export const DecideContainer = ({
 				/>
 			);
 		case 'scrollable/medium':
+			return (
+				<ScrollableMedium
+					trails={trails}
+					imageLoading={imageLoading}
+					containerType={'scrollable/small'}
+					containerPalette={containerPalette}
+					showAge={showAge}
+					absoluteServerTimes={absoluteServerTimes}
+				/>
+			);
 		case 'scrollable/feature':
 		case 'static/feature/2':
 		case 'static/medium/4':

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
+import { trails } from '../../fixtures/manual/highlights-trails';
+import { FrontSection } from './FrontSection';
+import { ScrollableMedium } from './ScrollableMedium';
+
+export default {
+	title: 'Components/ScrollableMedium',
+	component: ScrollableMedium,
+	args: {
+		trails,
+		containerPalette: undefined,
+		showAge: true,
+		absoluteServerTimes: true,
+		imageLoading: 'eager',
+		containerType: 'scrollable/medium',
+	},
+} as Meta;
+
+type Story = StoryObj<typeof ScrollableMedium>;
+
+export const Default = {};
+
+export const WithFrontSection = {
+	render: (args) => (
+		<FrontSection
+			title="Scrollable medium"
+			discussionApiUrl={discussionApiUrl}
+			editionId={'UK'}
+			showTopBorder={false}
+		>
+			<ScrollableMedium {...args} />
+		</FrontSection>
+	),
+} satisfies Story;

dotcom-rendering/src/components/ScrollableMedium.tsx

@@ -0,0 +1,100 @@
+import { css } from '@emotion/react';
+import { from } from '@guardian/source/foundations';
+import { palette } from '../palette';
+import type {
+	DCRContainerPalette,
+	DCRContainerType,
+	DCRFrontCard,
+} from '../types/front';
+import { FrontCard } from './FrontCard';
+import { Island } from './Island';
+import { ScrollableCarousel } from './ScrollableCarousel.Importable';
+
+type Props = {
+	trails: DCRFrontCard[];
+	containerPalette?: DCRContainerPalette;
+	showAge?: boolean;
+	absoluteServerTimes?: boolean;
+	imageLoading: 'lazy' | 'eager';
+	containerType: DCRContainerType;
+};
+
+const itemStyles = css`
+	scroll-snap-align: start;
+	grid-area: span 1;
+	position: relative;
+`;
+
+const verticalLineStyles = css`
+	:not(:last-child)::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: -10px;
+		width: 1px;
+		background-color: ${palette('--card-border-top')};
+		transform: translateX(-50%);
+	}
+	${from.leftCol} {
+		:first-child::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: -10px;
+			width: 1px;
+			background-color: ${palette('--card-border-top')};
+			transform: translateX(-50%);
+		}
+	}
+`;
+
+/**
+ * A container used on fronts to display a carousel of small cards
+ */
+export const ScrollableMedium = ({
+	trails,
+	containerPalette,
+	containerType,
+	absoluteServerTimes,
+	imageLoading,
+	showAge,
+}: Props) => {
+	return (
+		<Island priority="feature" defer={{ until: 'visible' }}>
+			<ScrollableCarousel carouselLength={trails.length}>
+				{trails.map((trail) => {
+					return (
+						<li
+							key={trail.url}
+							css={[itemStyles, verticalLineStyles]}
+						>
+							<FrontCard
+								trail={trail}
+								imageLoading={imageLoading}
+								absoluteServerTimes={!!absoluteServerTimes}
+								containerPalette={containerPalette}
+								containerType={containerType}
+								showAge={!!showAge}
+								headlineSize="medium"
+								headlineSizeOnMobile="medium"
+								headlineSizeOnTablet="medium"
+								imagePositionOnDesktop="bottom"
+								imagePositionOnMobile="bottom"
+								imageSize="small" // TODO - needs fixed width images
+								trailText={undefined} // unsupported
+								supportingContent={undefined} // unsupported
+								aspectRatio="5:4"
+								kickerText={trail.kickerText}
+								showLivePlayable={trail.showLivePlayable}
+								showTopBarDesktop={false}
+								showTopBarMobile={false}
+							/>
+						</li>
+					);
+				})}
+			</ScrollableCarousel>
+		</Island>
+	);
+};

dotcom-rendering/src/model/enhanceCollections.ts

@@ -14,7 +14,6 @@ const FORBIDDEN_CONTAINERS = [
 ];
 
 const UNSUPPORTED_CONTAINERS = [
-	'scrollable/medium',
 	'scrollable/feature',
 	'static/feature/2',
 	'static/medium/4',