Allow the ScrollableCarousel.tsx to define card width by a fraction of the card using Visable slides on either mobile or tablet. Remove the css in the carousel that is front specific and put that behind the !isArticle boolean

Author: oliverabrahams

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -1,30 +1,60 @@
+import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
+import type { Breakpoint } from '@guardian/source/foundations';
 import { from, space, until } from '@guardian/source/foundations';
 import { useEffect, useRef, useState } from 'react';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { palette } from '../palette';
 import { CarouselNavigationButtons } from './CarouselNavigationButtons';
 
-type GapSize = 'small' | 'medium' | 'large';
+type GapSize = 'small' | 'medium' | 'large' | 'none';
 type GapSizes = { row: GapSize; column: GapSize };
-
-type Props = {
-	children: React.ReactNode;
-	carouselLength: number;
-	visibleCarouselSlidesOnMobile: number;
-	visibleCarouselSlidesOnTablet: number;
-	sectionId?: string;
-	shouldStackCards?: { desktop: boolean; mobile: boolean };
-	gapSizes?: GapSizes;
+export type FixedSlideWidth = {
+	defaultWidth: number;
+	widthFromBreakpoints: { breakpoint: Breakpoint; width: number }[];
 };
 
+export enum CarouselKind {
+	'VisibleSlides',
+	'FixedWidthSlides',
+}
+
+type Props =
+	| {
+			kind: CarouselKind.VisibleSlides;
+			children: React.ReactNode;
+			isArticle?: boolean;
+			carouselLength: number;
+			visibleCarouselSlidesOnMobile: number;
+			visibleCarouselSlidesOnTablet: number;
+			fixedSlideWidth?: never;
+			sectionId?: string;
+			shouldStackCards?: { desktop: boolean; mobile: boolean };
+			gapSizes?: GapSizes;
+	  }
+	| {
+			kind: CarouselKind.FixedWidthSlides;
+			isArticle?: boolean;
+			children: React.ReactNode;
+			carouselLength: number;
+			visibleCarouselSlidesOnMobile?: never;
+			visibleCarouselSlidesOnTablet?: never;
+			fixedSlideWidth: FixedSlideWidth;
+			sectionId?: string;
+			shouldStackCards?: never;
+			gapSizes?: GapSizes;
+	  };
+
 /**
  * Grid sizing values to calculate negative margin used to pull navigation
  * buttons outside of container into the outer grid column at wide breakpoint.
  */
 const gridGap = 20;
 const gridGapMobile = 10;
 
+const baseContainerStyles = css`
+	position: relative;
+`;
 /**
  * On mobile the carousel extends into the outer margins to use the full width
  * of the screen. From tablet onwards the carousel sits within the page grid.
@@ -35,8 +65,7 @@ const gridGapMobile = 10;
  * left side so that the carousel extends into the the middle of the gutter
  * between the grid columns to meet the dividing line.
  */
-const containerStyles = css`
-	position: relative;
+const frontContainerStyles = css`
 	margin-left: -${gridGapMobile}px;
 	margin-right: -${gridGapMobile}px;
 	${from.mobileLandscape} {
@@ -52,25 +81,7 @@ const containerStyles = css`
 	}
 `;
 
-const carouselStyles = css`
-	display: grid;
-	width: 100%;
-	grid-auto-columns: 1fr;
-	grid-auto-flow: column;
-	overflow-x: auto;
-	overflow-y: hidden;
-	scroll-snap-type: x mandatory;
-	scroll-behavior: smooth;
-	overscroll-behavior: contain auto;
-	/**
-	 * Hide scrollbars
-	 * See: https://stackoverflow.com/a/38994837
-	 */
-	::-webkit-scrollbar {
-		display: none; /* Safari and Chrome */
-	}
-	scrollbar-width: none; /* Firefox */
-
+const frontCarouselStyles = css`
 	padding-left: ${gridGapMobile}px;
 	padding-right: ${gridGapMobile}px;
 	scroll-padding-left: ${gridGapMobile}px;
@@ -90,13 +101,44 @@ const carouselStyles = css`
 	}
 `;
 
+const baseCarouselStyles = css`
+	display: grid;
+	width: 100%;
+	grid-auto-columns: 1fr;
+	grid-auto-flow: column;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	scroll-behavior: smooth;
+	overscroll-behavior: contain auto;
+	/**
+	 * Hide scrollbars
+	 * See: https://stackoverflow.com/a/38994837
+	 */
+	::-webkit-scrollbar {
+		display: none; /* Safari and Chrome */
+	}
+	scrollbar-width: none; /* Firefox */
+`;
+
 const carouselGapStyles = (column: number, row: number) => {
 	return css`
 		column-gap: ${column}px;
 		row-gap: ${row}px;
 	`;
 };
 
+const subgridStyles = ({ subgridRows }: { subgridRows: number }) => css`
+	scroll-snap-align: start;
+	position: relative;
+	display: grid;
+	@supports (grid-template-rows: subgrid) {
+		grid-column: span 1;
+		grid-row: span ${subgridRows};
+		grid-template-rows: subgrid;
+	}
+`;
+
 const itemStyles = css`
 	display: flex;
 	scroll-snap-align: start;
@@ -151,6 +193,29 @@ const stackedCardRowsStyles = ({
 	}
 `;
 
+const generateFixedWidthColumStyles = ({
+	fixedSlideWidth,
+	carouselLength,
+}: {
+	fixedSlideWidth: FixedSlideWidth;
+	carouselLength: number;
+}) => {
+	const fixedWidths: SerializedStyles[] = [];
+	fixedWidths.push(css`
+		grid-template-columns: repeat(
+			${carouselLength},
+			${fixedSlideWidth.defaultWidth}px
+		);
+	`);
+	for (const { breakpoint, width } of fixedSlideWidth.widthFromBreakpoints) {
+		fixedWidths.push(css`
+			${from[breakpoint]} {
+				grid-template-columns: repeat(${carouselLength}, ${width}px);
+			}
+		`);
+	}
+	return fixedWidths;
+};
 /**
  * Generates CSS styles for a grid layout used in a carousel.
  *
@@ -163,7 +228,7 @@ const generateCarouselColumnStyles = (
 	totalCards: number,
 	visibleCarouselSlidesOnMobile: number,
 	visibleCarouselSlidesOnTablet: number,
-) => {
+): SerializedStyles => {
 	const peepingCardWidth = space[8];
 	const cardGap = 20;
 	const offsetPeepingCardWidth =
@@ -220,17 +285,22 @@ const getGapSize = (gap: GapSize) => {
 			return space[4];
 		case 'large':
 			return space[5];
+		case 'none':
+			return 0;
 	}
 };
 
 /**
  * A component used in the carousel fronts containers (e.g. small/medium/feature)
  */
 export const ScrollableCarousel = ({
+	kind,
 	children,
+	isArticle = false,
 	carouselLength,
 	visibleCarouselSlidesOnMobile,
 	visibleCarouselSlidesOnTablet,
+	fixedSlideWidth,
 	sectionId,
 	shouldStackCards = { desktop: false, mobile: false },
 	gapSizes = { column: 'large', row: 'large' },
@@ -239,7 +309,10 @@ export const ScrollableCarousel = ({
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
 	const [nextButtonEnabled, setNextButtonEnabled] = useState(true);
 
-	const showNavigation = carouselLength > visibleCarouselSlidesOnTablet;
+	const showNavigation =
+		kind === CarouselKind.VisibleSlides
+			? carouselLength > visibleCarouselSlidesOnTablet
+			: false;
 
 	const scrollTo = (direction: 'left' | 'right') => {
 		if (!carouselRef.current) return;
@@ -368,17 +441,25 @@ export const ScrollableCarousel = ({
 	}, []);
 
 	return (
-		<div css={containerStyles}>
+		<div css={[baseContainerStyles, !isArticle && frontContainerStyles]}>
 			<ol
 				ref={carouselRef}
 				css={[
-					carouselStyles,
+					baseCarouselStyles,
+					!isArticle && frontCarouselStyles,
 					carouselGapStyles(columnGap, rowGap),
-					generateCarouselColumnStyles(
-						carouselLength,
-						visibleCarouselSlidesOnMobile,
-						visibleCarouselSlidesOnTablet,
-					),
+					kind === CarouselKind.VisibleSlides &&
+						generateCarouselColumnStyles(
+							carouselLength,
+							visibleCarouselSlidesOnMobile,
+							visibleCarouselSlidesOnTablet,
+						),
+					...(kind === CarouselKind.FixedWidthSlides
+						? generateFixedWidthColumStyles({
+								carouselLength,
+								fixedSlideWidth,
+						  })
+						: []),
 					stackedCardRowsStyles(shouldStackCards),
 				]}
 				data-heatphan-type="carousel"
@@ -428,3 +509,23 @@ ScrollableCarousel.Item = ({
 		{children}
 	</li>
 );
+
+ScrollableCarousel.SubgridItem = ({
+	subgridRows,
+	children,
+	borderColour = palette('--card-border-top'),
+}: {
+	subgridRows: number;
+	children: React.ReactNode;
+	borderColour?: string;
+}) => (
+	<li
+		css={[
+			itemStyles,
+			subgridStyles({ subgridRows }),
+			singleRowLeftBorderStyles(borderColour),
+		]}
+	>
+		{children}
+	</li>
+);

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

@@ -5,7 +5,7 @@ import type {
 	DCRFrontCard,
 } from '../types/front';
 import { FeatureCard } from './FeatureCard';
-import { ScrollableCarousel } from './ScrollableCarousel';
+import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -33,6 +33,7 @@ export const ScrollableFeature = ({
 }: Props) => {
 	return (
 		<ScrollableCarousel
+			kind={CarouselKind.VisibleSlides}
 			carouselLength={trails.length}
 			visibleCarouselSlidesOnMobile={1}
 			visibleCarouselSlidesOnTablet={3}

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

@@ -5,7 +5,7 @@ import type {
 	DCRFrontCard,
 } from '../types/front';
 import { FrontCard } from './FrontCard';
-import { ScrollableCarousel } from './ScrollableCarousel';
+import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -35,6 +35,7 @@ export const ScrollableMedium = ({
 }: Props) => {
 	return (
 		<ScrollableCarousel
+			kind={CarouselKind.VisibleSlides}
 			carouselLength={trails.length}
 			visibleCarouselSlidesOnMobile={2}
 			visibleCarouselSlidesOnTablet={4}

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

@@ -4,7 +4,7 @@ import type {
 	DCRFrontCard,
 } from '../types/front';
 import { FrontCard } from './FrontCard';
-import { ScrollableCarousel } from './ScrollableCarousel';
+import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -63,6 +63,7 @@ export const ScrollableSmall = ({
 
 	return (
 		<ScrollableCarousel
+			kind={CarouselKind.VisibleSlides}
 			carouselLength={Math.ceil(trails.length / 2)}
 			visibleCarouselSlidesOnMobile={1}
 			visibleCarouselSlidesOnTablet={2}

dotcom-rendering/src/components/ScrollableSmallOnwards.tsx

@@ -13,9 +13,9 @@ import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
 import { type OnwardsSource } from '../types/onwards';
 import { type TrailType } from '../types/trails';
-import { Card } from './Card/Card';
 import type { Props as CardProps } from './Card/Card';
-import { ScrollableCarousel } from './ScrollableCarousel';
+import { Card } from './Card/Card';
+import { CarouselKind, ScrollableCarousel } from './ScrollableCarousel';
 
 type Props = {
 	serverTime?: number;
@@ -94,6 +94,7 @@ export const ScrollableSmallOnwards = (props: Props) => {
 			<Title title={props.heading} headingUrl={props.headingUrl} />
 			<div css={cardsContainerStyles}>
 				<ScrollableCarousel
+					kind={CarouselKind.VisibleSlides}
 					carouselLength={Math.ceil(trails.length / 2)}
 					visibleCarouselSlidesOnMobile={1}
 					visibleCarouselSlidesOnTablet={2}