remove the top border for the first row of beta containers (#12953)

guardian · Dec 5, 2024 · 8a3be8f · 8a3be8f
1 parent 49d41f5
commit 8a3be8f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -267,13 +267,15 @@ export const BoostedCardLayout = ({
 	absoluteServerTimes,
 	imageLoading,
 	aspectRatio,
+	isFirstRow,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
+	isFirstRow: boolean;
 }) => {
 	const card = cards[0];
 	if (!card) return null;
@@ -285,7 +287,7 @@ export const BoostedCardLayout = ({
 		liveUpdatesPosition,
 	} = decideCardProperties(card.boostLevel);
 	return (
-		<UL padBottom={true} hasLargeSpacing={true} showTopBar={true}>
+		<UL padBottom={true} hasLargeSpacing={true} showTopBar={!isFirstRow}>
 			<LI
 				padSides={true}
 				verticalDividerColour={palette('--card-border-supporting')}
@@ -329,11 +331,13 @@ export const StandardCardLayout = ({
 	showImage = true,
 	imageLoading,
 	isFirstRow,
+	isFirstStandardRow,
 	aspectRatio,
 }: {
 	cards: DCRFrontCard[];
 	imageLoading: Loading;
-	isFirstRow: boolean;
+	isFirstRow?: boolean;
+	isFirstStandardRow?: boolean;
 	containerPalette?: DCRContainerPalette;
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
@@ -347,8 +351,9 @@ export const StandardCardLayout = ({
 			direction="row"
 			padBottom={true}
 			hasLargeSpacing={true}
-			showTopBar={true}
-			splitTopBar={!isFirstRow}
+			showTopBar={!isFirstRow}
+			/** We use one full top bar for the first row and use a split one for subsequent rows */
+			splitTopBar={!isFirstStandardRow}
 		>
 			{cards.map((card, cardIndex) => {
 				return (
@@ -438,6 +443,7 @@ export const FlexibleGeneral = ({
 								absoluteServerTimes={absoluteServerTimes}
 								imageLoading={imageLoading}
 								aspectRatio={aspectRatio}
+								isFirstRow={!splash.length && i === 0}
 							/>
 						);
 
@@ -451,7 +457,8 @@ export const FlexibleGeneral = ({
 								showAge={showAge}
 								absoluteServerTimes={absoluteServerTimes}
 								imageLoading={imageLoading}
-								isFirstRow={i === 0}
+								isFirstRow={!splash.length && i === 0}
+								isFirstStandardRow={i === 0}
 								aspectRatio={aspectRatio}
 							/>
 						);

diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
@@ -26,12 +26,7 @@ export const StaticFeatureTwo = ({
 	const cards = trails.slice(0, 2);
 
 	return (
-		<UL
-			direction="row"
-			padBottom={true}
-			showTopBar={true}
-			hasLargeSpacing={true}
-		>
+		<UL direction="row" padBottom={true} hasLargeSpacing={true}>
 			{cards.map((card) => {
 				return (
 					<LI

diff --git a/dotcom-rendering/src/components/StaticMediumFour.tsx b/dotcom-rendering/src/components/StaticMediumFour.tsx
@@ -30,12 +30,7 @@ export const StaticMediumFour = ({
 	const cards = trails.slice(0, 4);
 
 	return (
-		<UL
-			direction="row"
-			padBottom={true}
-			showTopBar={true}
-			hasLargeSpacing={true}
-		>
+		<UL direction="row" padBottom={true} hasLargeSpacing={true}>
 			{cards.map((card, cardIndex) => {
 				return (
 					<LI