Refactor headline positioning logic

dotcom-rendering/src/components/Card/Card.stories.tsx

@@ -48,6 +48,7 @@ const basicCardProps: CardProps = {
 	discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/',
 	showVideo: true,
 	absoluteServerTimes: true,
+	headlinePosition: 'inner',
 };
 
 const aBasicLink = {

dotcom-rendering/src/components/Card/Card.tsx

@@ -147,6 +147,8 @@ export type Props = {
 	trailTextSize?: TrailTextSize;
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
+	/** Determines if the headline should be positioned within the content or outside the content */
+	headlinePosition?: 'inner' | 'outer';
 	isInLoopingVideoTestVariant?: boolean;
 	isInLoopingVideoTestControl?: boolean;
 };
@@ -326,36 +328,6 @@ const decideSublinkPosition = (
 	return alignment === 'vertical' ? 'inner' : 'outer';
 };
 
-const getHeadlinePosition = ({
-	isFlexSplash,
-	containerType,
-	showLivePlayable,
-	isMediaCardOrNewsletter,
-}: {
-	containerType?: DCRContainerType;
-	isFlexSplash?: boolean;
-	showLivePlayable: boolean;
-	isMediaCardOrNewsletter: boolean;
-}) => {
-	if (isMediaCardOrNewsletter) {
-		return 'inner';
-	}
-
-	if (containerType === 'flexible/special' && isFlexSplash) {
-		return 'outer';
-	}
-
-	if (
-		containerType === 'flexible/general' &&
-		isFlexSplash &&
-		showLivePlayable
-	) {
-		return 'outer';
-	}
-
-	return 'inner';
-};
-
 const liveBulletStyles = css`
 	width: 9px;
 	height: 9px;
@@ -420,6 +392,7 @@ export const Card = ({
 	showTopBarMobile = true,
 	trailTextSize,
 	showKickerImage = false,
+	headlinePosition = 'inner',
 	isInLoopingVideoTestVariant = false,
 	isInLoopingVideoTestControl = false,
 }: Props) => {
@@ -616,13 +589,6 @@ export const Card = ({
 		return { mobile: 'medium' };
 	};
 
-	const headlinePosition = getHeadlinePosition({
-		containerType,
-		isFlexSplash,
-		showLivePlayable,
-		isMediaCardOrNewsletter,
-	});
-
 	const hideTrailTextUntil = () => {
 		if (isFlexibleContainer) {
 			return undefined;

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -339,6 +339,7 @@ const SplashCardLayout = ({
 					trailTextSize={trailTextSize}
 					canPlayInline={true}
 					showKickerImage={card.format.design === ArticleDesign.Audio}
+					headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
 					isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
 					isInLoopingVideoTestControl={isInLoopingVideoTestControl}
 				/>

dotcom-rendering/src/components/FlexibleSpecial.stories.tsx

@@ -285,7 +285,7 @@ export const LoopVideoCards: Story = {
 		frontSectionTitle: 'Looping video',
 		groupedTrails: {
 			...emptyGroupedTrails,
-			snap: [loopVideoCard],
+			snap: [],
 			standard: [loopVideoCard],
 		},
 		collectionId: 1,

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -119,6 +119,7 @@ type OneCardLayoutProps = {
 	isLastRow: boolean;
 	isFirstRow: boolean;
 	containerLevel: DCRContainerLevel;
+	isSplashCard?: boolean;
 	isInLoopingVideoTestVariant?: boolean;
 	isInLoopingVideoTestControl?: boolean;
 };
@@ -133,6 +134,7 @@ export const OneCardLayout = ({
 	isLastRow,
 	isFirstRow,
 	containerLevel,
+	isSplashCard,
 	isInLoopingVideoTestVariant = false,
 	isInLoopingVideoTestControl = false,
 }: OneCardLayoutProps) => {
@@ -183,6 +185,7 @@ export const OneCardLayout = ({
 					trailTextSize={trailTextSize}
 					canPlayInline={true}
 					showKickerImage={card.format.design === ArticleDesign.Audio}
+					headlinePosition={isSplashCard ? 'outer' : 'inner'}
 					isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
 					isInLoopingVideoTestControl={isInLoopingVideoTestControl}
 				/>
@@ -299,32 +302,39 @@ export const FlexibleSpecial = ({
 
 	return (
 		<>
-			<OneCardLayout
-				cards={snaps}
-				containerPalette={containerPalette}
-				showAge={showAge}
-				absoluteServerTimes={absoluteServerTimes}
-				imageLoading={imageLoading}
-				aspectRatio={aspectRatio}
-				isFirstRow={true}
-				isLastRow={splash.length === 0 && cards.length === 0}
-				containerLevel={containerLevel}
-				isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
-				isInLoopingVideoTestControl={isInLoopingVideoTestControl}
-			/>
-			<OneCardLayout
-				cards={splash}
-				containerPalette={containerPalette}
-				showAge={showAge}
-				absoluteServerTimes={absoluteServerTimes}
-				imageLoading={imageLoading}
-				aspectRatio={aspectRatio}
-				isLastRow={cards.length === 0}
-				isFirstRow={!isNonEmptyArray(snaps)}
-				containerLevel={containerLevel}
-				isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
-				isInLoopingVideoTestControl={isInLoopingVideoTestControl}
-			/>
+			{isNonEmptyArray(snaps) && (
+				<OneCardLayout
+					cards={snaps}
+					containerPalette={containerPalette}
+					showAge={showAge}
+					absoluteServerTimes={absoluteServerTimes}
+					imageLoading={imageLoading}
+					aspectRatio={aspectRatio}
+					isFirstRow={true}
+					isLastRow={splash.length === 0 && cards.length === 0}
+					containerLevel={containerLevel}
+					isSplashCard={false}
+					isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
+					isInLoopingVideoTestControl={isInLoopingVideoTestControl}
+				/>
+			)}
+			{isNonEmptyArray(splash) && (
+				<OneCardLayout
+					cards={splash}
+					containerPalette={containerPalette}
+					showAge={showAge}
+					absoluteServerTimes={absoluteServerTimes}
+					imageLoading={imageLoading}
+					aspectRatio={aspectRatio}
+					isLastRow={cards.length === 0}
+					isFirstRow={!isNonEmptyArray(snaps)}
+					containerLevel={containerLevel}
+					isSplashCard={true}
+					isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
+					isInLoopingVideoTestControl={isInLoopingVideoTestControl}
+				/>
+			)}
+
 			<TwoOrFourCardLayout
 				cards={cards}
 				containerPalette={containerPalette}