diff --git a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx index f8c1edf54ee..97fca0ac9eb 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx +++ b/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: { diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index d1bbbde38b2..2f7ad4d37e3 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/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 (