Display sublinks horizontally on a Flexible/Special splash card with live updates (#15078)

* Display sublinks horizontally on flex special splash if the card has live updates displaying

* Add a story for splash with live updates and two sublinks

Author: abeddow91

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

@@ -2,6 +2,7 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import {
+	getSublinks,
 	opinionTrails,
 	selfHostedVideo54Card,
 	slideshowCard,
@@ -280,6 +281,21 @@ export const GigaBoostedSplashWithLiveUpdates: Story = {
 	},
 };
 
+export const SplashWithLiveUpdatesAndTwoSublinks: Story = {
+	name: 'Standard splash with live updates and two sublinks',
+	args: {
+		frontSectionTitle: 'Standard splash',
+		groupedTrails: {
+			...emptyGroupedTrails,
+			snap: [],
+			standard: [
+				{ ...liveUpdatesCard, supportingContent: getSublinks(2) },
+			],
+		},
+		collectionId: 1,
+	},
+};
+
 export const SelfHostedVideoCard: Story = {
 	name: 'Self-hosted video cards',
 	args: {

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -54,7 +54,11 @@ const determineCardProperties = (
 	supportingContentLength: number,
 	mediaCard: boolean,
 	imageSuppressed: boolean,
+	hasLiveUpdates: boolean,
 ): BoostProperties => {
+	const shouldDisplaySublinksHorizontally =
+		supportingContentLength >= 3 || hasLiveUpdates;
+
 	switch (boostLevel) {
 		// The default boost level is equal to no boost. It is the same as the default card layout.
 		case 'default':
@@ -67,8 +71,9 @@ const determineCardProperties = (
 				mediaSize: 'xlarge',
 				mediaPositionOnDesktop: 'right',
 				mediaPositionOnMobile: mediaCard ? 'top' : 'bottom',
-				supportingContentAlignment:
-					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
+				supportingContentAlignment: shouldDisplaySublinksHorizontally
+					? 'horizontal'
+					: 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
 				subtitleSize: 'medium',
@@ -83,8 +88,9 @@ const determineCardProperties = (
 				mediaSize: 'xlarge',
 				mediaPositionOnDesktop: 'right',
 				mediaPositionOnMobile: mediaCard ? 'top' : 'bottom',
-				supportingContentAlignment:
-					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
+				supportingContentAlignment: shouldDisplaySublinksHorizontally
+					? 'horizontal'
+					: 'vertical',
 				liveUpdatesAlignment: 'vertical',
 				trailTextSize: 'regular',
 				subtitleSize: 'medium',
@@ -166,6 +172,7 @@ export const OneCardLayout = ({
 		card.supportingContent?.length ?? 0,
 		isMediaCard(card.format),
 		!card.image,
+		card.showLivePlayable,
 	);
 
 	return (