Allow consumers to control the column and row gap sizing based on a small, medium, large model. (#13813)

Author: abeddow91

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -5,13 +5,17 @@ import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { palette } from '../palette';
 import { CarouselNavigationButtons } from './CarouselNavigationButtons';
 
+type GapSize = 'small' | 'medium' | 'large';
+type GapSizes = { row: GapSize; column: GapSize };
+
 type Props = {
 	children: React.ReactNode;
 	carouselLength: number;
 	visibleCardsOnMobile: number;
 	visibleCardsOnTablet: number;
 	sectionId?: string;
 	shouldStackCards?: { desktop: boolean; mobile: boolean };
+	gapSizes?: GapSizes;
 };
 
 /**
@@ -53,7 +57,6 @@ const carouselStyles = css`
 	width: 100%;
 	grid-auto-columns: 1fr;
 	grid-auto-flow: column;
-	gap: 20px;
 	overflow-x: auto;
 	overflow-y: hidden;
 	scroll-snap-type: x mandatory;
@@ -87,6 +90,13 @@ const carouselStyles = css`
 	}
 `;
 
+const carouselGapStyles = (column: number, row: number) => {
+	return css`
+		column-gap: ${column}px;
+		row-gap: ${row}px;
+	`;
+};
+
 const itemStyles = css`
 	display: flex;
 	scroll-snap-align: start;
@@ -194,6 +204,17 @@ const generateCarouselColumnStyles = (
 	`;
 };
 
+const getGapSize = (gap: GapSize) => {
+	switch (gap) {
+		case 'small':
+			return space[3];
+		case 'medium':
+			return space[4];
+		case 'large':
+			return space[5];
+	}
+};
+
 /**
  * A component used in the carousel fronts containers (e.g. small/medium/feature)
  */
@@ -204,6 +225,7 @@ export const ScrollableCarousel = ({
 	visibleCardsOnTablet,
 	sectionId,
 	shouldStackCards = { desktop: false, mobile: false },
+	gapSizes = { column: 'large', row: 'large' },
 }: Props) => {
 	const carouselRef = useRef<HTMLOListElement | null>(null);
 	const [previousButtonEnabled, setPreviousButtonEnabled] = useState(false);
@@ -223,6 +245,9 @@ export const ScrollableCarousel = ({
 		});
 	};
 
+	const rowGap = getGapSize(gapSizes.row);
+	const columnGap = getGapSize(gapSizes.column);
+
 	/**
 	 * Updates state of navigation buttons based on carousel's scroll position.
 	 *
@@ -284,6 +309,7 @@ export const ScrollableCarousel = ({
 				ref={carouselRef}
 				css={[
 					carouselStyles,
+					carouselGapStyles(columnGap, rowGap),
 					generateCarouselColumnStyles(
 						carouselLength,
 						visibleCardsOnMobile,

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

@@ -70,6 +70,7 @@ export const ScrollableSmall = ({
 			visibleCardsOnTablet={2}
 			sectionId={sectionId}
 			shouldStackCards={{ desktop: trails.length > 2, mobile: true }}
+			gapSizes={{ column: 'large', row: 'medium' }}
 		>
 			{trails.map((trail, index) => {
 				return (