[Fairground 🎡] Scrollable Feature Container (#12733)

Co-authored-by: Charlotte <[email protected]>

dotcom-rendering/src/components/DecideContainer.tsx

@@ -26,6 +26,7 @@ import { FlexibleGeneral } from './FlexibleGeneral';
 import { FlexibleSpecial } from './FlexibleSpecial';
 import { Island } from './Island';
 import { NavList } from './NavList';
+import { ScrollableFeature } from './ScrollableFeature.importable';
 import { ScrollableHighlights } from './ScrollableHighlights.importable';
 import { ScrollableMedium } from './ScrollableMedium.importable';
 import { ScrollableSmall } from './ScrollableSmall.importable';
@@ -289,6 +290,16 @@ export const DecideContainer = ({
 				/>
 			);
 		case 'scrollable/feature':
+			return (
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<ScrollableFeature
+						trails={trails}
+						imageLoading={imageLoading}
+						containerPalette={containerPalette}
+						absoluteServerTimes={absoluteServerTimes}
+					/>
+				</Island>
+			);
 		case 'static/feature/2':
 		default:
 			return <p>{containerType} is not yet supported</p>;

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -51,6 +51,7 @@ const carouselContainerStyles = css`
 	${from.tablet} {
 		gap: ${space[2]}px;
 	}
+
 	${from.wide} {
 		flex-direction: row;
 		gap: ${space[1]}px;
@@ -91,6 +92,7 @@ const carouselContainerStyles = css`
 
 const carouselStyles = css`
 	display: grid;
+	width: 100%;
 	grid-auto-columns: 1fr;
 	grid-auto-flow: column;
 	gap: 20px;

dotcom-rendering/src/components/ScrollableFeature.importable.tsx

@@ -0,0 +1,68 @@
+import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
+import { FeatureCard } from './FeatureCard';
+import { ScrollableCarousel } from './ScrollableCarousel';
+
+type Props = {
+	trails: DCRFrontCard[];
+	containerPalette?: DCRContainerPalette;
+	absoluteServerTimes: boolean;
+	imageLoading: 'lazy' | 'eager';
+};
+
+/**
+ * A container used on fronts to display a carousel of small cards
+ *
+ * ## Why does this need to be an Island?
+ *
+ * The carouselling arrow buttons need to run javascript.
+ */
+export const ScrollableFeature = ({
+	trails,
+	containerPalette,
+	absoluteServerTimes,
+	imageLoading,
+}: Props) => {
+	return (
+		<ScrollableCarousel
+			carouselLength={trails.length}
+			visibleCardsOnMobile={1}
+			visibleCardsOnTablet={3}
+		>
+			{trails.map((card) => {
+				return (
+					<ScrollableCarousel.Item key={card.url}>
+						<FeatureCard
+							linkTo={card.url}
+							format={card.format}
+							headlineText={card.headline}
+							byline={card.byline}
+							showByline={card.showByline}
+							webPublicationDate={card.webPublicationDate}
+							kickerText={card.kickerText}
+							showClock={false}
+							image={card.image}
+							isPlayableMediaCard={true}
+							starRating={card.starRating}
+							dataLinkName={card.dataLinkName}
+							discussionApiUrl={card.discussionApiUrl}
+							discussionId={card.discussionId}
+							mainMedia={card.mainMedia}
+							isExternalLink={card.isExternalLink}
+							// branding={card.branding}
+							containerPalette={containerPalette}
+							absoluteServerTimes={absoluteServerTimes}
+							imageLoading={imageLoading}
+							aspectRatio="4:5"
+							imageSize={'feature'}
+							headlineSizes={{
+								desktop: 'xsmall',
+								tablet: 'xxsmall',
+								mobile: 'xsmall',
+							}}
+						/>
+					</ScrollableCarousel.Item>
+				);
+			})}
+		</ScrollableCarousel>
+	);
+};

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

@@ -0,0 +1,41 @@
+import { breakpoints } from '@guardian/source/foundations';
+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 { ScrollableFeature } from './ScrollableFeature.importable';
+
+export default {
+	title: 'Components/ScrollableFeature',
+	component: ScrollableFeature,
+	parameters: {
+		chromatic: {
+			viewports: [
+				breakpoints.mobile,
+				breakpoints.tablet,
+				breakpoints.wide,
+			],
+		},
+	},
+	args: {
+		trails,
+		containerPalette: undefined,
+		absoluteServerTimes: true,
+		imageLoading: 'eager',
+	},
+} as Meta;
+
+type Story = StoryObj<typeof ScrollableFeature>;
+
+export const WithFrontSection = {
+	render: (args) => (
+		<FrontSection
+			title="Scrollable feature"
+			discussionApiUrl={discussionApiUrl}
+			editionId={'UK'}
+			showTopBorder={false}
+		>
+			<ScrollableFeature {...args} />
+		</FrontSection>
+	),
+} satisfies Story;

dotcom-rendering/src/model/enhanceCollections.ts

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