conditionally pad trailtext (#12575)

guardian · Oct 21, 2024 · f929e73 · f929e73
1 parent 7319722
commit f929e73
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -788,6 +788,7 @@ export const Card = ({
 									shouldHide={isFlexSplash ? false : true}
 									trailTextColour={trailTextColour}
 									trailTextSize={trailTextSize}
+									padTop={headlinePosition === 'inner'}
 								>
 									<div
 										dangerouslySetInnerHTML={{

diff --git a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx b/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx
@@ -21,6 +21,7 @@ type Props = {
 	trailTextSize?: TrailTextSize;
 	/** Optionally overrides the trail text colour */
 	trailTextColour?: string;
+	padTop: boolean;
 };
 
 /**
@@ -55,7 +56,11 @@ const decideVisibilityStyles = (
 const trailTextStyles = css`
 	display: flex;
 	flex-direction: column;
-	padding: ${space[2]}px 0;
+	padding-bottom: ${space[2]}px;
+`;
+
+const topPadding = css`
+	padding-top: ${space[2]}px;
 `;
 
 const fontStyles = (trailTextSize: TrailTextSize) => css`
@@ -76,6 +81,7 @@ export const TrailTextWrapper = ({
 	shouldHide = true,
 	trailTextSize = 'regular',
 	trailTextColour = palette('--card-trail-text'),
+	padTop,
 }: Props) => {
 	return (
 		<div
@@ -91,6 +97,7 @@ export const TrailTextWrapper = ({
 						imageSize,
 						imageType,
 					),
+				padTop && topPadding,
 			]}
 		>
 			{children}