Update naming

guardian · Oct 16, 2024 · 075e5e8 · 075e5e8
1 parent c57fa99
commit 075e5e8
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 31 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -58,6 +58,8 @@ import {
 	TrailTextWrapper,
 } from './components/TrailTextWrapper';
 
+type Position = 'inner' | 'outer' | 'none';
+
 export type Props = {
 	linkTo: string;
 	format: ArticleFormat;
@@ -98,6 +100,7 @@ export type Props = {
 	/** Supporting content refers to sublinks */
 	supportingContent?: DCRSupportingContent[];
 	supportingContentAlignment?: Alignment;
+	supportingContentPosition?: Position;
 	snapData?: DCRSnapType;
 	containerPalette?: DCRContainerPalette;
 	containerType?: DCRContainerType;
@@ -111,6 +114,7 @@ export type Props = {
 	/** Determines if liveblog update links are displayed on a card */
 	showLivePlayable?: boolean;
 	liveUpdatesOrientation?: Alignment;
+	liveUpdatesPosition?: Position;
 	onwardsSource?: OnwardsSource;
 	pauseOffscreenVideo?: boolean;
 	showMainVideo?: boolean;
@@ -203,6 +207,7 @@ const getMedia = ({
 };
 
 const decideSublinkPosition = (
+	sublinkCardPosition?: Position,
 	supportingContent?: DCRSupportingContent[],
 	imagePositionOnDesktop?: ImagePositionType,
 	alignment?: Alignment,
@@ -211,6 +216,9 @@ const decideSublinkPosition = (
 	if (!supportingContent || supportingContent.length === 0) {
 		return 'none';
 	}
+
+	if (sublinkCardPosition) return sublinkCardPosition;
+
 	if (
 		imagePositionOnDesktop === 'top' ||
 		imagePositionOnDesktop === 'bottom' ||
@@ -282,6 +290,7 @@ export const Card = ({
 	branding,
 	supportingContent,
 	supportingContentAlignment = 'vertical',
+	supportingContentPosition,
 	snapData,
 	containerPalette,
 	containerType,
@@ -295,6 +304,7 @@ export const Card = ({
 	slideshowImages,
 	showLivePlayable = false,
 	liveUpdatesOrientation = 'vertical',
+	liveUpdatesPosition = 'inner',
 	onwardsSource,
 	pauseOffscreenVideo = false,
 	showMainVideo = true,
@@ -310,6 +320,7 @@ export const Card = ({
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
+		supportingContentPosition,
 		supportingContent,
 		imagePositionOnDesktop,
 		supportingContentAlignment,
@@ -799,32 +810,33 @@ export const Card = ({
 									showLivePlayable={showLivePlayable}
 								/>
 							)}
-							{showLivePlayable && (
-								<Island
-									priority="feature"
-									defer={{ until: 'visible' }}
-								>
-									<LatestLinks
-										id={linkTo}
-										isDynamo={isDynamo}
-										direction={
-											isFlexibleContainer
-												? liveUpdatesOrientation
-												: supportingContentAlignment
-										}
-										containerPalette={containerPalette}
-										absoluteServerTimes={
-											absoluteServerTimes
-										}
-										displayHeader={isFlexibleContainer}
-										directionOnMobile={
-											isFlexibleContainer
-												? 'horizontal'
-												: undefined
-										}
-									></LatestLinks>
-								</Island>
-							)}
+							{showLivePlayable &&
+								liveUpdatesPosition === 'inner' && (
+									<Island
+										priority="feature"
+										defer={{ until: 'visible' }}
+									>
+										<LatestLinks
+											id={linkTo}
+											isDynamo={isDynamo}
+											direction={
+												isFlexibleContainer
+													? liveUpdatesOrientation
+													: supportingContentAlignment
+											}
+											containerPalette={containerPalette}
+											absoluteServerTimes={
+												absoluteServerTimes
+											}
+											displayHeader={isFlexibleContainer}
+											directionOnMobile={
+												isFlexibleContainer
+													? 'horizontal'
+													: undefined
+											}
+										></LatestLinks>
+									</Island>
+								)}
 						</div>
 
 						{/* This div is needed to push this content to the bottom of the card */}
@@ -850,6 +862,25 @@ export const Card = ({
 							: 0,
 				}}
 			>
+				{showLivePlayable && liveUpdatesPosition === 'outer' && (
+					<Island priority="feature" defer={{ until: 'visible' }}>
+						<LatestLinks
+							id={linkTo}
+							isDynamo={isDynamo}
+							direction={
+								isFlexibleContainer
+									? liveUpdatesOrientation
+									: supportingContentAlignment
+							}
+							containerPalette={containerPalette}
+							absoluteServerTimes={absoluteServerTimes}
+							displayHeader={isFlexibleContainer}
+							directionOnMobile={
+								isFlexibleContainer ? 'horizontal' : undefined
+							}
+						></LatestLinks>
+					</Island>
+				)}
 				{decideOuterSublinks()}
 
 				{showCommentFooter && (

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -110,7 +110,6 @@ const decideSplashCardProperties = (
 				supportingContentAlignment:
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
 				liveUpdatesOrientation: 'vertical',
-
 				trailTextSize: 'regular',
 			};
 		case 'megaboost':
@@ -123,7 +122,6 @@ const decideSplashCardProperties = (
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesOrientation: 'horizontal',
-
 				trailTextSize: 'large',
 			};
 		case 'gigaboost':
@@ -136,7 +134,6 @@ const decideSplashCardProperties = (
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesOrientation: 'horizontal',
-
 				trailTextSize: 'large',
 			};
 	}
@@ -166,6 +163,7 @@ export const SplashCardLayout = ({
 		imagePositionOnMobile,
 		imageSize,
 		supportingContentAlignment,
+		liveUpdatesOrientation,
 		trailTextSize,
 	} = decideSplashCardProperties(
 		card.boostLevel ?? 'default',
@@ -193,7 +191,7 @@ export const SplashCardLayout = ({
 					imageLoading={imageLoading}
 					aspectRatio="5:4"
 					kickerText={card.kickerText}
-					liveUpdatesOrientation="vertical"
+					liveUpdatesOrientation={liveUpdatesOrientation}
 					boostedFontSizes={true}
 					isFlexSplash={true}
 					showTopBarDesktop={false}
@@ -210,6 +208,8 @@ type BoostedCardProperties = {
 	headlineSizeOnMobile: SmallHeadlineSize;
 	headlineSizeOnTablet: SmallHeadlineSize;
 	imageSize: ImageSizeType;
+	livePlayablePosition: 'inner' | 'outer';
+	supportingContentAlignment: Alignment;
 };
 
 /**
@@ -225,14 +225,26 @@ const decideCardProperties = (
 				headlineSizeOnMobile: 'small',
 				headlineSizeOnTablet: 'tiny',
 				imageSize: 'jumbo',
+				livePlayablePosition: 'outer',
+				supportingContentAlignment: 'horizontal',
 			};
 		case 'boost':
+			return {
+				headlineSize: 'tiny',
+				headlineSizeOnMobile: 'tiny',
+				headlineSizeOnTablet: 'tiny',
+				imageSize: 'medium',
+				livePlayablePosition: 'inner',
+				supportingContentAlignment: 'horizontal',
+			};
 		default:
 			return {
 				headlineSize: 'tiny',
 				headlineSizeOnMobile: 'tiny',
 				headlineSizeOnTablet: 'tiny',
 				imageSize: 'medium',
+				livePlayablePosition: 'inner',
+				supportingContentAlignment: 'vertical',
 			};
 	}
 };
@@ -258,6 +270,8 @@ export const BoostedCardLayout = ({
 		headlineSizeOnMobile,
 		headlineSizeOnTablet,
 		imageSize,
+		livePlayablePosition,
+		supportingContentAlignment,
 	} = decideCardProperties(card.boostLevel);
 	return (
 		<UL padBottom={true} isFlexibleContainer={true} showTopBar={true}>
@@ -276,6 +290,7 @@ export const BoostedCardLayout = ({
 					imageSize={imageSize}
 					trailText={card.trailText}
 					supportingContent={card.supportingContent}
+					supportingContentAlignment={supportingContentAlignment}
 					imageLoading={imageLoading}
 					aspectRatio="5:4"
 					kickerText={card.kickerText}
@@ -284,6 +299,7 @@ export const BoostedCardLayout = ({
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					boostedFontSizes={true}
+					liveUpdatesPosition={livePlayablePosition}
 				/>
 			</LI>
 		</UL>
@@ -334,7 +350,8 @@ export const StandardCardLayout = ({
 							imageLoading={imageLoading}
 							imagePositionOnDesktop={'left'}
 							supportingContent={card.supportingContent}
-							supportingContentAlignment="horizontal"
+							supportingContentAlignment="vertical"
+							supportingContentPosition={'outer'}
 							imageSize={'medium'}
 							aspectRatio="5:4"
 							kickerText={card.kickerText}