[Fairground 🎡] live link design (#12564)

* Add direction override on mobile * Seperate liveupdate alignment from supporting content and add inner and outer variants * outer live links on mobile should always be horizontal * PR requested changes * keep show live playable on splash * import Position as a type
guardian · Oct 17, 2024 · 20b3a14 · 20b3a14
1 parent 651c255
commit 20b3a14
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 20 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -58,7 +58,7 @@ import {
 	TrailTextWrapper,
 } from './components/TrailTextWrapper';
 
-type Position = 'inner' | 'outer' | 'none';
+export type Position = 'inner' | 'outer' | 'none';
 
 export type Props = {
 	linkTo: string;
@@ -97,6 +97,7 @@ export type Props = {
 	dataLinkName?: string;
 	/** Only used on Labs cards */
 	branding?: Branding;
+	/** Supporting content refers to sublinks */
 	supportingContent?: DCRSupportingContent[];
 	supportingContentAlignment?: Alignment;
 	supportingContentPosition?: Position;
@@ -107,10 +108,13 @@ export type Props = {
 	discussionApiUrl: string;
 	discussionId?: string;
 	/** The first card in a dynamic package is ”Dynamo” and gets special styling */
-	isDynamo?: true;
+	isDynamo?: boolean;
 	isExternalLink: boolean;
 	slideshowImages?: DCRSlideshowImage[];
+	/** Determines if liveblog update links are displayed on a card */
 	showLivePlayable?: boolean;
+	liveUpdatesAlignment?: Alignment;
+	liveUpdatesPosition?: Position;
 	onwardsSource?: OnwardsSource;
 	pauseOffscreenVideo?: boolean;
 	showMainVideo?: boolean;
@@ -304,6 +308,8 @@ export const Card = ({
 	isExternalLink,
 	slideshowImages,
 	showLivePlayable = false,
+	liveUpdatesAlignment = 'vertical',
+	liveUpdatesPosition = 'inner',
 	onwardsSource,
 	pauseOffscreenVideo = false,
 	showMainVideo = true,
@@ -810,29 +816,39 @@ export const Card = ({
 									showLivePlayable={showLivePlayable}
 								/>
 							)}
+							{showLivePlayable &&
+								liveUpdatesPosition === 'inner' && (
+									<Island
+										priority="feature"
+										defer={{ until: 'visible' }}
+									>
+										<LatestLinks
+											id={linkTo}
+											isDynamo={isDynamo}
+											direction={
+												isFlexibleContainer
+													? liveUpdatesAlignment
+													: 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 */}
 						<div
 							style={isOnwardContent ? { marginTop: 'auto' } : {}}
 						>
-							{showLivePlayable && (
-								<Island
-									priority="feature"
-									defer={{ until: 'visible' }}
-								>
-									<LatestLinks
-										id={linkTo}
-										isDynamo={isDynamo}
-										direction={supportingContentAlignment}
-										containerPalette={containerPalette}
-										absoluteServerTimes={
-											absoluteServerTimes
-										}
-										displayHeader={isFlexibleContainer}
-									></LatestLinks>
-								</Island>
-							)}
 							{decideInnerSublinks()}
 						</div>
 
@@ -853,6 +869,23 @@ export const Card = ({
 							: 0,
 				}}
 			>
+				{showLivePlayable && liveUpdatesPosition === 'outer' && (
+					<Island priority="feature" defer={{ until: 'visible' }}>
+						<LatestLinks
+							id={linkTo}
+							isDynamo={isDynamo}
+							direction={
+								isFlexibleContainer
+									? liveUpdatesAlignment
+									: supportingContentAlignment
+							}
+							containerPalette={containerPalette}
+							absoluteServerTimes={absoluteServerTimes}
+							displayHeader={isFlexibleContainer}
+							directionOnMobile={'horizontal'}
+						></LatestLinks>
+					</Island>
+				)}
 				{decideOuterSublinks()}
 
 				{showCommentFooter && (

diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -5,6 +5,7 @@ import type {
 	DCRFrontCard,
 	DCRGroupedTrails,
 } from '../types/front';
+import type { Position } from './Card/Card';
 import type {
 	ImagePositionType,
 	ImageSizeType,
@@ -74,6 +75,7 @@ type BoostedSplashProperties = {
 	imagePositionOnMobile: ImagePositionType;
 	imageSize: ImageSizeType;
 	supportingContentAlignment: Alignment;
+	liveUpdatesAlignment: Alignment;
 	trailTextSize: TrailTextSize;
 };
 
@@ -96,6 +98,7 @@ const decideSplashCardProperties = (
 				imageSize: 'large',
 				supportingContentAlignment:
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
+				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
 			};
 		case 'boost':
@@ -108,6 +111,7 @@ const decideSplashCardProperties = (
 				imageSize: 'jumbo',
 				supportingContentAlignment:
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
+				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
 			};
 		case 'megaboost':
@@ -119,6 +123,7 @@ const decideSplashCardProperties = (
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
+				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
 			};
 		case 'gigaboost':
@@ -130,6 +135,7 @@ const decideSplashCardProperties = (
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
+				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
 			};
 	}
@@ -159,6 +165,7 @@ export const SplashCardLayout = ({
 		imagePositionOnMobile,
 		imageSize,
 		supportingContentAlignment,
+		liveUpdatesAlignment,
 		trailTextSize,
 	} = decideSplashCardProperties(
 		card.boostLevel ?? 'default',
@@ -194,6 +201,7 @@ export const SplashCardLayout = ({
 					aspectRatio="5:4"
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
+					liveUpdatesAlignment={liveUpdatesAlignment}
 					boostedFontSizes={true}
 					isFlexSplash={true}
 					showTopBarDesktop={false}
@@ -210,6 +218,7 @@ type BoostedCardProperties = {
 	headlineSizeOnMobile: SmallHeadlineSize;
 	headlineSizeOnTablet: SmallHeadlineSize;
 	imageSize: ImageSizeType;
+	liveUpdatesPosition: Position;
 	supportingContentAlignment: Alignment;
 };
 
@@ -226,6 +235,7 @@ const decideCardProperties = (
 				headlineSizeOnMobile: 'small',
 				headlineSizeOnTablet: 'tiny',
 				imageSize: 'jumbo',
+				liveUpdatesPosition: 'outer',
 				supportingContentAlignment: 'horizontal',
 			};
 		case 'boost':
@@ -235,7 +245,8 @@ const decideCardProperties = (
 				headlineSizeOnMobile: 'tiny',
 				headlineSizeOnTablet: 'tiny',
 				imageSize: 'medium',
-				supportingContentAlignment: 'vertical',
+				liveUpdatesPosition: 'inner',
+				supportingContentAlignment: 'horizontal',
 			};
 	}
 };
@@ -262,6 +273,7 @@ export const BoostedCardLayout = ({
 		headlineSizeOnTablet,
 		imageSize,
 		supportingContentAlignment,
+		liveUpdatesPosition,
 	} = decideCardProperties(card.boostLevel);
 	return (
 		<UL padBottom={true} isFlexibleContainer={true} showTopBar={true}>
@@ -292,9 +304,11 @@ export const BoostedCardLayout = ({
 					aspectRatio="5:4"
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
+					liveUpdatesAlignment="horizontal"
 					showTopBarDesktop={false}
 					showTopBarMobile={true}
 					boostedFontSizes={true}
+					liveUpdatesPosition={liveUpdatesPosition}
 				/>
 			</LI>
 		</UL>

diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -31,6 +31,7 @@ type BoostProperties = {
 	imagePositionOnMobile: ImagePositionType;
 	imageSize: ImageSizeType;
 	supportingContentAlignment: Alignment;
+	liveUpdatesAlignment: Alignment;
 	trailTextSize: TrailTextSize;
 };
 
@@ -53,6 +54,7 @@ const determineCardProperties = (
 				imageSize: 'large',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
+				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
 			};
 
@@ -66,6 +68,7 @@ const determineCardProperties = (
 				imageSize: 'jumbo',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
+				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'regular',
 			};
 		case 'megaboost':
@@ -77,6 +80,7 @@ const determineCardProperties = (
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
+				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
 			};
 		case 'gigaboost':
@@ -88,6 +92,7 @@ const determineCardProperties = (
 				imagePositionOnMobile: 'bottom',
 				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
+				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
 			};
 	}
@@ -116,6 +121,7 @@ export const OneCardLayout = ({
 		imagePositionOnMobile,
 		imageSize,
 		supportingContentAlignment,
+		liveUpdatesAlignment,
 		trailTextSize,
 	} = determineCardProperties(
 		card.boostLevel ?? 'default',
@@ -143,6 +149,7 @@ export const OneCardLayout = ({
 					aspectRatio="5:4"
 					kickerText={card.kickerText}
 					showLivePlayable={card.showLivePlayable}
+					liveUpdatesAlignment={liveUpdatesAlignment}
 					boostedFontSizes={true}
 					isFlexSplash={true}
 					showTopBarDesktop={false}

diff --git a/dotcom-rendering/src/components/LatestLinks.importable.tsx b/dotcom-rendering/src/components/LatestLinks.importable.tsx
@@ -4,6 +4,7 @@ import {
 	textSans14,
 	textSansBold14,
 	textSansBold17,
+	until,
 } from '@guardian/source/foundations';
 import { DottedLines } from '@guardian/source-development-kitchen/react-components';
 import { revealStyles } from '../lib/revealStyles';
@@ -22,6 +23,7 @@ type Props = {
 	isDynamo?: boolean;
 	containerPalette?: DCRContainerPalette;
 	displayHeader?: boolean;
+	directionOnMobile?: Alignment;
 };
 
 const header = css`
@@ -63,6 +65,20 @@ const bold = css`
 	}
 `;
 
+const directionOnMobileStyles = (direction: Alignment) => {
+	return direction === 'horizontal'
+		? css`
+				${until.tablet} {
+					${horizontal}
+				}
+		  `
+		: css`
+				${until.tablet} {
+					${vertical}
+				}
+		  `;
+};
+
 const transparent = css`
 	color: transparent;
 `;
@@ -102,6 +118,7 @@ export const LatestLinks = ({
 	containerPalette,
 	absoluteServerTimes,
 	displayHeader = false,
+	directionOnMobile,
 }: Props) => {
 	const { data } = useApi<{
 		blocks: Array<{
@@ -149,6 +166,8 @@ export const LatestLinks = ({
 					!!isDynamo || direction === 'horizontal'
 						? horizontal
 						: vertical,
+					directionOnMobile &&
+						directionOnMobileStyles(directionOnMobile),
 					css`
 						color: ${themePalette('--card-trail-text')};
 					`,