Merge pull request #14337 from guardian/doml/podcast-waves-sublinks

Render waveform in podcast cards in the correct area when there are sublinks

Author: domlander

dotcom-rendering/fixtures/manual/trails.ts

@@ -469,6 +469,7 @@ export const audioTrails: [DCRFrontCard, DCRFrontCard] = [
 			altText:
 				"TOPSHOT-FBL-EUR-C1-MILAN-FEYENOORD<br>TOPSHOT - Polish referee Szymon Marciniak gives a red card to AC Milan's French defender #19 Theo Hernandez (R) during the UEFA Champions League knockout round play-off second leg football match between AC Milan and Feyenoord at San Siro stadium in Milan, on February 18, 2025. (Photo by Piero CRUCIATTI / AFP) (Photo by PIERO CRUCIATTI/AFP via Getty Images)",
 		},
+		supportingContent: getSublinks(2),
 	},
 ];
 
@@ -541,6 +542,7 @@ export const galleryTrails: [DCRFrontCard, DCRFrontCard] = [
 			src: 'https://media.guim.co.uk/69ac2383ea611126b54373865dac3e7e77981d7e/0_39_5500_3302/master/5500.jpg',
 			altText: 'A group of people in the street, some looking worried',
 		},
+		supportingContent: getSublinks(2),
 	},
 ];
 

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

@@ -9,7 +9,10 @@ import {
 	Pillar,
 } from '../../lib/articleFormat';
 import type { Branding } from '../../types/branding';
-import type { DCRContainerPalette } from '../../types/front';
+import type {
+	DCRContainerPalette,
+	DCRSupportingContent,
+} from '../../types/front';
 import type { MainMedia } from '../../types/mainMedia';
 import { ContainerOverrides } from '../ContainerOverrides';
 import { FrontSection } from '../FrontSection';
@@ -80,6 +83,19 @@ const mainGallery: MainMedia = {
 	count: '5',
 };
 
+const twoSublinks: DCRSupportingContent[] = [
+	{
+		...aBasicLink,
+		headline: 'Headline 1',
+		kickerText: 'Kicker',
+	},
+	{
+		...aBasicLink,
+		headline: 'Headline 2',
+		kickerText: 'Kicker',
+	},
+];
+
 const CardWrapper = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<div
@@ -345,23 +361,48 @@ export const WithMediaTypeAndSublinks = () => {
 						design: ArticleDesign.Video,
 						theme: Pillar.Sport,
 					}}
-					containerType="flexible/general"
 					mainMedia={{ ...mainVideo, duration: 30 }}
 					headlineText="Video"
-					imagePositionOnDesktop="top"
-					imagePositionOnMobile="left"
-					supportingContent={[
-						{
-							...aBasicLink,
-							headline: 'Headline 1',
-							kickerText: 'Kicker',
-						},
-						{
-							...aBasicLink,
-							headline: 'Headline 2',
-							kickerText: 'Kicker',
-						},
-					]}
+					supportingContent={twoSublinks}
+				/>
+			</CardWrapper>
+			<CardWrapper>
+				<Card
+					{...basicCardProps}
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Video,
+						theme: Pillar.Sport,
+					}}
+					mainMedia={{ ...mainVideo, duration: 0 }}
+					headlineText="Video without duration"
+					supportingContent={twoSublinks}
+				/>
+			</CardWrapper>
+			<CardWrapper>
+				<Card
+					{...basicCardProps}
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Audio,
+						theme: Pillar.Sport,
+					}}
+					mainMedia={mainAudio}
+					headlineText="Audio"
+					supportingContent={twoSublinks}
+				/>
+			</CardWrapper>
+			<CardWrapper>
+				<Card
+					{...basicCardProps}
+					format={{
+						display: ArticleDisplay.Standard,
+						design: ArticleDesign.Gallery,
+						theme: Pillar.Sport,
+					}}
+					mainMedia={mainGallery}
+					headlineText="Gallery"
+					supportingContent={twoSublinks}
 				/>
 			</CardWrapper>
 		</CardGroup>
@@ -1764,18 +1805,7 @@ export const WithBetaContainerAndSublinks = () => {
 					{...basicCardProps}
 					containerType="flexible/general"
 					imagePositionOnMobile="bottom"
-					supportingContent={[
-						{
-							...aBasicLink,
-							headline: 'Headline 1',
-							kickerText: 'Kicker',
-						},
-						{
-							...aBasicLink,
-							headline: 'Headline 2',
-							kickerText: 'Kicker',
-						},
-					]}
+					supportingContent={twoSublinks}
 				/>
 			</CardWrapper>
 		</CardGroup>
@@ -1791,18 +1821,7 @@ export const WithBetaContainerAndSublinksNoImage = () => {
 					image={undefined}
 					containerType="flexible/general"
 					imagePositionOnMobile="bottom"
-					supportingContent={[
-						{
-							...aBasicLink,
-							headline: 'Headline 1',
-							kickerText: 'Kicker',
-						},
-						{
-							...aBasicLink,
-							headline: 'Headline 2',
-							kickerText: 'Kicker',
-						},
-					]}
+					supportingContent={twoSublinks}
 				/>
 			</CardWrapper>
 		</CardGroup>

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

@@ -23,6 +23,7 @@ type Props = {
 
 const containerStyles = css`
 	display: flex;
+	position: relative;
 	flex-basis: 100%;
 `;
 

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

@@ -2,10 +2,13 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import {
+	audioTrails,
+	galleryTrails,
 	getSublinks,
 	loopVideoCard,
 	opinionTrails,
 	trails,
+	videoTrails,
 } from '../../fixtures/manual/trails';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { customMockFetch } from '../lib/mockRESTCalls';
@@ -457,33 +460,13 @@ export const StandardCards: Story = {
 		frontSectionTitle: 'Standard cards',
 		groupedTrails: {
 			...emptyGroupedTrails,
-			standard: trails.slice(0, 4),
-		},
-	},
-};
-
-export const StandardBoostedMediaCardWithSublinks: Story = {
-	name: 'Standard boosted media card with sublinks',
-	args: {
-		frontSectionTitle: 'Standard boosted media card with sublinks',
-		groupedTrails: {
-			...emptyGroupedTrails,
-			standard: [trails[1]].map((card) => ({
-				...card,
-				boostLevel: 'boost',
-				supportingContent: getSublinks(2),
-			})),
-		},
-	},
-};
-
-export const OpinionStandardCards: Story = {
-	name: 'Opinion standard cards',
-	args: {
-		frontSectionTitle: 'Opinion standard cards',
-		groupedTrails: {
-			...emptyGroupedTrails,
-			standard: opinionTrails.slice(0, 2),
+			standard: [
+				...trails.slice(0, 4),
+				...opinionTrails.slice(0, 2),
+				...audioTrails.slice(0, 2),
+				...galleryTrails.slice(0, 2),
+				...videoTrails.slice(0, 2),
+			],
 		},
 	},
 };
@@ -576,3 +559,18 @@ export const LoopVideoCards: Story = {
 		},
 	},
 };
+
+export const StandardBoostedMediaCardWithSublinks: Story = {
+	name: 'Standard boosted media card with sublinks',
+	args: {
+		frontSectionTitle: 'Standard boosted media card with sublinks',
+		groupedTrails: {
+			...emptyGroupedTrails,
+			standard: [trails[1]].map((card) => ({
+				...card,
+				boostLevel: 'boost',
+				supportingContent: getSublinks(2),
+			})),
+		},
+	},
+};