Tweak when sublinks have a grey background

Author: domlander

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

@@ -337,6 +337,40 @@ export const WithMediaType = () => {
 	);
 };
 
+export const WithMediaTypeAndSublinks = () => {
+	return (
+		<CardGroup>
+			<CardWrapper>
+				<Card
+					{...basicCardProps}
+					format={{
+						display: ArticleDisplay.Standard,
+						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',
+						},
+					]}
+				/>
+			</CardWrapper>
+		</CardGroup>
+	);
+};
+
 export const WithMediaTypeSpecialReportAlt = () => {
 	return (
 		<CardGroup>
@@ -1728,11 +1762,9 @@ export const WithAVerticalGapWhenScrollableSmallContainer = () => {
 export const WithBetaContainerAndSublinks = () => {
 	return (
 		<CardGroup>
-			{/* With an image */}
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
-					image={undefined}
 					containerType="flexible/general"
 					imagePositionOnMobile="bottom"
 					supportingContent={[
@@ -1749,10 +1781,17 @@ export const WithBetaContainerAndSublinks = () => {
 					]}
 				/>
 			</CardWrapper>
-			{/* Without an image */}
+		</CardGroup>
+	);
+};
+
+export const WithBetaContainerAndSublinksNoImage = () => {
+	return (
+		<CardGroup>
 			<CardWrapper>
 				<Card
 					{...basicCardProps}
+					image={undefined}
 					containerType="flexible/general"
 					imagePositionOnMobile="bottom"
 					supportingContent={[

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

@@ -688,13 +688,12 @@ export const Card = ({
 	 * - Returns `null` if `supportingContent` is unavailable or `sublinkPosition` is `none`.
 	 * - Renders `SupportingContent` for all breakpoints if `sublinkPosition` is `outer`.
 	 * - If `sublinkPosition` is `inner`, hides `SupportingContent` from tablet but displays it on smaller breakpoints.
-	 *
 	 */
-	const decideOuterSublinks = () => {
+	const decideSublinks = () => {
 		if (!hasSublinks) return null;
 		if (sublinkPosition === 'none') return null;
 
-		const OuterSublinks = () => (
+		const Sublinks = () => (
 			<SupportingContent
 				supportingContent={supportingContent}
 				containerPalette={containerPalette}
@@ -704,18 +703,22 @@ export const Card = ({
 					!!isFlexSplash ||
 					(isBetaContainer &&
 						!!image &&
-						imagePositionOnMobile === 'bottom')
+						(imagePositionOnMobile === 'bottom' ||
+							isMediaCard(format)))
+				}
+				fillBackgroundOnDesktop={
+					isMediaCard(format) && imagePositionOnDesktop === 'top'
 				}
 			/>
 		);
 
 		if (sublinkPosition === 'outer') {
-			return <OuterSublinks />;
+			return <Sublinks />;
 		}
 
 		return (
 			<Hide from={isFlexSplash ? 'desktop' : 'tablet'}>
-				<OuterSublinks />
+				<Sublinks />
 			</Hide>
 		);
 	};
@@ -1241,7 +1244,8 @@ export const Card = ({
 
 			<div
 				css={
-					/** We allow this area to take up more space so that cards without sublinks next to cards with sublinks have the same meta alignment */
+					/** We allow this area to take up more space so that cards without
+					 * sublinks next to cards with sublinks have the same meta alignment */
 					isBetaContainer &&
 					(imagePositionOnDesktop === 'left' ||
 						imagePositionOnDesktop === 'right') &&
@@ -1253,10 +1257,7 @@ export const Card = ({
 					`
 				}
 				style={{
-					padding:
-						isMediaCardOrNewsletter || isOnwardContent
-							? `0 ${space[2]}px`
-							: 0,
+					padding: isOnwardContent ? `0 ${space[2]}px` : 0,
 				}}
 			>
 				{showLivePlayable && liveUpdatesPosition === 'outer' && (
@@ -1276,7 +1277,8 @@ export const Card = ({
 						></LatestLinks>
 					</Island>
 				)}
-				{decideOuterSublinks()}
+
+				{decideSublinks()}
 
 				{isOpinionCardWithAvatar && (
 					<CardFooter

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

@@ -61,7 +61,6 @@ const standardCards = standards.map((card, index) => {
 				boostLevel: 'megaboost',
 				supportingContent: getSublinks(2),
 			});
-
 		default:
 			return enhanceCardFields({});
 	}