Extract generic carousel logic from scrollable small

dotcom-rendering/src/components/DecideContainer.tsx

@@ -27,7 +27,7 @@ import { FlexibleSpecial } from './FlexibleSpecial';
 import { Island } from './Island';
 import { NavList } from './NavList';
 import { ScrollableHighlights } from './ScrollableHighlights.importable';
-import { ScrollableSmall } from './ScrollableSmall.importable';
+import { ScrollableSmall } from './ScrollableSmall';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -252,16 +252,14 @@ export const DecideContainer = ({
 			);
 		case 'scrollable/small':
 			return (
-				<Island priority="critical">
-					<ScrollableSmall
-						trails={trails}
-						imageLoading={imageLoading}
-						containerType={'scrollable/small'}
-						containerPalette={containerPalette}
-						showAge={showAge}
-						absoluteServerTimes={absoluteServerTimes}
-					/>
-				</Island>
+				<ScrollableSmall
+					trails={trails}
+					imageLoading={imageLoading}
+					containerType={'scrollable/small'}
+					containerPalette={containerPalette}
+					showAge={showAge}
+					absoluteServerTimes={absoluteServerTimes}
+				/>
 			);
 		case 'scrollable/medium':
 		case 'scrollable/feature':

dotcom-rendering/src/components/ScrollableSmall.importable.tsx → dotcom-rendering/src/components/ScrollableCarousel.Importable.tsx

@@ -4,29 +4,24 @@ import {
 	headlineMedium24Object,
 	space,
 } from '@guardian/source/foundations';
+import type { ThemeButton } from '@guardian/source/react-components';
 import {
 	Button,
 	Hide,
 	SvgChevronLeftSingle,
 	SvgChevronRightSingle,
-	type ThemeButton,
 } from '@guardian/source/react-components';
 import { useEffect, useRef, useState } from 'react';
 import { palette } from '../palette';
-import type {
-	DCRContainerPalette,
-	DCRContainerType,
-	DCRFrontCard,
-} from '../types/front';
-import { FrontCard } from './FrontCard';
+
+type CarouselColumnLayout = {
+	totalCards: number;
+	peepingCardWidth: number;
+};
 
 type Props = {
-	trails: DCRFrontCard[];
-	containerPalette?: DCRContainerPalette;
-	showAge?: boolean;
-	absoluteServerTimes?: boolean;
-	imageLoading: 'lazy' | 'eager';
-	containerType: DCRContainerType;
+	children: React.ReactNode;
+	carouselColumnLayout: CarouselColumnLayout;
 };
 
 /**
@@ -55,12 +50,8 @@ const themeButtonDisabled: Partial<ThemeButton> = {
 const carouselContainerStyles = css`
 	display: flex;
 	flex-direction: column-reverse;
-	${from.tablet} {
-		gap: ${space[2]}px;
-	}
 	${from.wide} {
 		flex-direction: row;
-		gap: ${space[1]}px;
 	}
 
 	/* Extend carousel into outer margins on mobile */
@@ -133,39 +124,11 @@ const carouselStyles = css`
 	}
 `;
 
-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%);
-		}
-	}
-`;
-
 const buttonContainerStyles = css`
 	margin-left: auto;
+	${from.wide} {
+		margin-left: ${space[1]}px;
+	}
 `;
 
 const buttonLayoutStyles = css`
@@ -176,40 +139,38 @@ const buttonLayoutStyles = css`
 /**
  * Generates CSS styles for a grid layout used in a carousel.
  *
- * @param {number} totalCards - The total number of cards in the carousel.
+ * @param {CarouselColumnLayout} carouselColumnLayout - An object containing the total number of cards in the carousel and the desired peeping card width.
  * @returns {string} - The CSS styles for the grid layout.
  */
-const generateCarouselColumnStyles = (totalCards: number) => {
-	const peepingCardWidth = space[8];
-
+const generateCarouselColumnStyles = (
+	carouselColumnLayout: CarouselColumnLayout,
+) => {
 	return css`
 		grid-template-columns: repeat(
-			${totalCards},
-			calc((100% - ${peepingCardWidth}px - 20px))
+			${carouselColumnLayout.totalCards},
+			calc((100% - ${carouselColumnLayout.peepingCardWidth}px - 20px))
 		);
 		${from.tablet} {
-			grid-template-columns: repeat(${totalCards}, calc(50% - 10px));
+			grid-template-columns: repeat(
+				${carouselColumnLayout.totalCards},
+				calc(50% - 10px)
+			);
 		}
 	`;
 };
 
 /**
- * A container used on fronts to display a carousel of small cards
+ * A component used in the carousel fronts containers (e.g. small/medium/feature)
  *
- * ## Why does this need to be an Island?
+ *  ## Why does this need to be an Island?
  *
  * The carouselling arrow buttons need to run javascript.
  */
-export const ScrollableSmall = ({
-	trails,
-	containerPalette,
-	containerType,
-	absoluteServerTimes,
-	imageLoading,
-	showAge,
+export const ScrollableCarousel = ({
+	children,
+	carouselColumnLayout,
 }: Props) => {
 	const carouselRef = useRef<HTMLOListElement | null>(null);
-	const carouselLength = trails.length;
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
 	const [nextButtonEnabled, setNextButtonEnabled] = useState(true);
 
@@ -268,45 +229,15 @@ export const ScrollableSmall = ({
 				ref={carouselRef}
 				css={[
 					carouselStyles,
-					generateCarouselColumnStyles(carouselLength),
+					generateCarouselColumnStyles(carouselColumnLayout),
 				]}
 				data-heatphan-type="carousel"
 			>
-				{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="small"
-								headlineSizeOnMobile="small"
-								headlineSizeOnTablet="small"
-								imagePositionOnDesktop="left"
-								imagePositionOnMobile="left"
-								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>
-					);
-				})}
+				{children}
 			</ol>
-
 			<div css={buttonContainerStyles}>
 				<Hide until={'tablet'}>
-					{carouselLength > 2 && (
+					{carouselColumnLayout.totalCards > 2 && (
 						<div css={buttonLayoutStyles}>
 							<Button
 								hideLabel={true}

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

@@ -3,7 +3,7 @@ import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
 import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
-import { ScrollableSmall } from './ScrollableSmall.importable';
+import { ScrollableSmall } from './ScrollableSmall';
 
 export default {
 	title: 'Components/ScrollableSmall',

dotcom-rendering/src/components/ScrollableSmall.tsx

@@ -0,0 +1,105 @@
+import { css } from '@emotion/react';
+import { from, space } 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 ScrollableSmall = ({
+	trails,
+	containerPalette,
+	containerType,
+	absoluteServerTimes,
+	imageLoading,
+	showAge,
+}: Props) => {
+	return (
+		<Island priority="feature" defer={{ until: 'visible' }}>
+			<ScrollableCarousel
+				carouselColumnLayout={{
+					totalCards: trails.length,
+					peepingCardWidth: space[8],
+				}}
+			>
+				{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="small"
+								headlineSizeOnMobile="small"
+								headlineSizeOnTablet="small"
+								imagePositionOnDesktop="left"
+								imagePositionOnMobile="left"
+								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>
+	);
+};