Rework container level spacing for beta containers (#12951)

* Add container spacing context and space * Lift small spacing into front section and out of rows * fix linting * Use boolean rather than falsey
guardian · Dec 12, 2024 · c8f5b09 · c8f5b09
1 parent 332c1e9
commit c8f5b09
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 207 deletions.
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -158,13 +158,15 @@ export const SplashCardLayout = ({
 	absoluteServerTimes,
 	imageLoading,
 	aspectRatio,
+	isLastRow,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
+	isLastRow: boolean;
 }) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -183,7 +185,11 @@ export const SplashCardLayout = ({
 	);
 
 	return (
-		<UL padBottom={true} hasLargeSpacing={true} showTopBar={false}>
+		<UL
+			padBottom={!isLastRow}
+			hasLargeSpacing={!isLastRow}
+			showTopBar={false}
+		>
 			<LI
 				padSides={true}
 				verticalDividerColour={palette('--card-border-supporting')}
@@ -268,6 +274,7 @@ export const BoostedCardLayout = ({
 	imageLoading,
 	aspectRatio,
 	isFirstRow,
+	isLastRow,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
@@ -276,6 +283,7 @@ export const BoostedCardLayout = ({
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
 	isFirstRow: boolean;
+	isLastRow: boolean;
 }) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -287,7 +295,11 @@ export const BoostedCardLayout = ({
 		liveUpdatesPosition,
 	} = decideCardProperties(card.boostLevel);
 	return (
-		<UL padBottom={true} hasLargeSpacing={true} showTopBar={!isFirstRow}>
+		<UL
+			showTopBar={!isFirstRow}
+			padBottom={!isLastRow}
+			hasLargeSpacing={!isLastRow}
+		>
 			<LI
 				padSides={true}
 				verticalDividerColour={palette('--card-border-supporting')}
@@ -333,6 +345,7 @@ export const StandardCardLayout = ({
 	isFirstRow,
 	isFirstStandardRow,
 	aspectRatio,
+	isLastRow,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
@@ -343,14 +356,15 @@ export const StandardCardLayout = ({
 	absoluteServerTimes: boolean;
 	showImage?: boolean;
 	aspectRatio: AspectRatio;
+	isLastRow: boolean;
 }) => {
 	if (cards.length === 0) return null;
 
 	return (
 		<UL
 			direction="row"
-			padBottom={true}
-			hasLargeSpacing={true}
+			padBottom={!isLastRow}
+			hasLargeSpacing={!isLastRow}
 			showTopBar={!isFirstRow}
 			/** We use one full top bar for the first row and use a split one for subsequent rows */
 			splitTopBar={!isFirstStandardRow}
@@ -429,6 +443,7 @@ export const FlexibleGeneral = ({
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
+					isLastRow={cards.length === 0}
 				/>
 			)}
 
@@ -444,6 +459,7 @@ export const FlexibleGeneral = ({
 								imageLoading={imageLoading}
 								aspectRatio={aspectRatio}
 								isFirstRow={!splash.length && i === 0}
+								isLastRow={i === groupedCards.length - 1}
 							/>
 						);
 
@@ -460,6 +476,7 @@ export const FlexibleGeneral = ({
 								isFirstRow={!splash.length && i === 0}
 								isFirstStandardRow={i === 0}
 								aspectRatio={aspectRatio}
+								isLastRow={i === groupedCards.length - 1}
 							/>
 						);
 				}

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -113,13 +113,15 @@ export const OneCardLayout = ({
 	absoluteServerTimes,
 	imageLoading,
 	aspectRatio,
+	isLastRow,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
+	isLastRow: boolean;
 }) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -137,7 +139,7 @@ export const OneCardLayout = ({
 		card.supportingContent?.length ?? 0,
 	);
 	return (
-		<UL padBottom={true} hasLargeSpacing={true}>
+		<UL padBottom={!isLastRow} hasLargeSpacing={!isLastRow}>
 			<LI padSides={true}>
 				<FrontCard
 					trail={card}
@@ -187,12 +189,7 @@ const TwoCardOrFourCardLayout = ({
 	if (cards.length === 0) return null;
 	const hasTwoOrFewerCards = cards.length <= 2;
 	return (
-		<UL
-			direction="row"
-			padBottom={true}
-			showTopBar={true}
-			hasLargeSpacing={true}
-		>
+		<UL direction="row" showTopBar={true}>
 			{cards.map((card, cardIndex) => {
 				return (
 					<LI
@@ -250,6 +247,7 @@ export const FlexibleSpecial = ({
 				absoluteServerTimes={absoluteServerTimes}
 				imageLoading={imageLoading}
 				aspectRatio={aspectRatio}
+				isLastRow={splash.length === 0 && cards.length === 0}
 			/>
 			<OneCardLayout
 				cards={splash}
@@ -258,6 +256,7 @@ export const FlexibleSpecial = ({
 				absoluteServerTimes={absoluteServerTimes}
 				imageLoading={imageLoading}
 				aspectRatio={aspectRatio}
+				isLastRow={cards.length === 0}
 			/>
 			<TwoCardOrFourCardLayout
 				cards={cards}