refactor UL component to name prop as it is intended to be used rathe…

…r than using contextual info
guardian · Nov 29, 2024 · 96dbc0c · 96dbc0c
1 parent 1970f2c
commit 96dbc0c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/dotcom-rendering/src/components/Card/components/UL.tsx b/dotcom-rendering/src/components/Card/components/UL.tsx
@@ -5,7 +5,10 @@ import { palette } from '../../../palette';
 
 type Direction = 'row' | 'column' | 'row-reverse';
 
-const ulStyles = (direction: Direction, isFlexibleContainer: boolean) => css`
+const getSpacingPx = (hasLargeSpacing: boolean) =>
+	hasLargeSpacing ? space[6] : space[3];
+
+const ulStyles = (direction: Direction, spacingPx: number) => css`
 	width: 100%;
 	position: relative;
 	display: flex;
@@ -16,15 +19,15 @@ const ulStyles = (direction: Direction, isFlexibleContainer: boolean) => css`
 	}
 
 	& > li {
-		margin-bottom: ${isFlexibleContainer ? space[6] : space[3]}px;
+		margin-bottom: ${spacingPx}px;
 	}
 
 	@supports (row-gap: 1em) {
 		& > li {
 			margin-bottom: 0;
 		}
 		/* Supported in flex layout is lacking: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap#browser_compatibility */
-		row-gap: ${isFlexibleContainer ? space[6] : space[3]}px;
+		row-gap: ${spacingPx}px;
 	}
 `;
 
@@ -34,8 +37,8 @@ const wrapStyles = css`
 	}
 `;
 
-const marginBottomStyles = (isFlexibleContainer: boolean) => css`
-	margin-bottom: ${isFlexibleContainer ? space[6] : space[3]}px;
+const marginBottom = (spacingPx: number) => css`
+	margin-bottom: ${spacingPx}px;
 `;
 
 const topBarStyles = (splitTopBar: boolean) => css`
@@ -78,8 +81,8 @@ type Props = {
 	showTopBar?: boolean;
 	/** Used to add a gap in the center of the top bar */
 	splitTopBar?: boolean;
-	/** Used to give flexible container stories additional space */
-	isFlexibleContainer?: boolean;
+	/** Used to give beta containers additional space */
+	hasLargeSpacing?: boolean;
 	/** Overrides the vertical divider colour */
 	verticalDividerColour?: string;
 };
@@ -91,16 +94,17 @@ export const UL = ({
 	padBottom = false,
 	wrapCards = false,
 	showTopBar = false,
-	isFlexibleContainer = false,
+	hasLargeSpacing = false,
 	splitTopBar = false,
 	verticalDividerColour = palette('--section-border'),
 }: Props) => {
+	const spacingPx = getSpacingPx(hasLargeSpacing);
 	return (
 		<ul
 			css={[
-				ulStyles(direction, isFlexibleContainer),
+				ulStyles(direction, spacingPx),
 				showDivider && verticalDivider(verticalDividerColour),
-				padBottom && marginBottomStyles(isFlexibleContainer),
+				padBottom && marginBottom(spacingPx),
 				wrapCards && wrapStyles,
 				showTopBar && topBarStyles(splitTopBar),
 			]}

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -179,7 +179,7 @@ export const SplashCardLayout = ({
 	);
 
 	return (
-		<UL padBottom={true} isFlexibleContainer={true} showTopBar={false}>
+		<UL padBottom={true} hasLargeSpacing={true} showTopBar={false}>
 			<LI
 				padSides={true}
 				verticalDividerColour={palette('--card-border-supporting')}
@@ -279,7 +279,7 @@ export const BoostedCardLayout = ({
 		liveUpdatesPosition,
 	} = decideCardProperties(card.boostLevel);
 	return (
-		<UL padBottom={true} isFlexibleContainer={true} showTopBar={true}>
+		<UL padBottom={true} hasLargeSpacing={true} showTopBar={true}>
 			<LI
 				padSides={true}
 				verticalDividerColour={palette('--card-border-supporting')}
@@ -338,7 +338,7 @@ export const StandardCardLayout = ({
 		<UL
 			direction="row"
 			padBottom={true}
-			isFlexibleContainer={true}
+			hasLargeSpacing={true}
 			showTopBar={true}
 			splitTopBar={!isFirstRow}
 		>

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -133,7 +133,7 @@ export const OneCardLayout = ({
 		card.supportingContent?.length ?? 0,
 	);
 	return (
-		<UL padBottom={true} isFlexibleContainer={true}>
+		<UL padBottom={true} hasLargeSpacing={true}>
 			<LI padSides={true}>
 				<FrontCard
 					trail={card}
@@ -185,7 +185,7 @@ const TwoCardOrFourCardLayout = ({
 			direction="row"
 			padBottom={true}
 			showTopBar={true}
-			isFlexibleContainer={true}
+			hasLargeSpacing={true}
 		>
 			{cards.map((card, cardIndex) => {
 				return (

diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx
@@ -24,7 +24,7 @@ export const StaticFeatureTwo = ({
 			direction="row"
 			padBottom={true}
 			showTopBar={true}
-			isFlexibleContainer={true}
+			hasLargeSpacing={true}
 		>
 			{cards.map((card) => {
 				return (

diff --git a/dotcom-rendering/src/components/StaticMediumFour.tsx b/dotcom-rendering/src/components/StaticMediumFour.tsx
@@ -28,7 +28,7 @@ export const StaticMediumFour = ({
 			direction="row"
 			padBottom={true}
 			showTopBar={true}
-			isFlexibleContainer={true}
+			hasLargeSpacing={true}
 		>
 			{cards.map((card, cardIndex) => {
 				return (