conditionally moves branding outside of the standard footer component for the labs redesign

Author: cemms1

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

@@ -15,6 +15,7 @@ import { isMediaCard } from '../../lib/cardHelpers';
 import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime';
 import { appendLinkNameMedia } from '../../lib/getDataLinkName';
 import { getZIndex } from '../../lib/getZIndex';
+import { getOphanComponents } from '../../lib/labs';
 import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
 import { BETA_CONTAINERS } from '../../model/enhanceCollections';
 import { palette } from '../../palette';
@@ -43,6 +44,7 @@ import { Pill } from '../Pill';
 import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
 import { SnapCssSandbox } from '../SnapCssSandbox';
+import { SponsoredContentLabel } from '../SponsoredContentLabel';
 import { StarRating } from '../StarRating/StarRating';
 import type { Alignment } from '../SupportingContent';
 import { SupportingContent } from '../SupportingContent';
@@ -725,6 +727,47 @@ export const Card = ({
 		return undefined;
 	};
 
+	/**
+	 * Decides which branding design to apply based on the labs redesign feature switch
+	 * Adds appropriate Ophan data attributes based on card context
+	 * Results in a clickable brand logo and sponsorship label
+	 */
+	const getBranding = () => {
+		if (!branding) return;
+		const getLocationPrefix = () => {
+			if (!onwardsSource) {
+				return 'front-card';
+			}
+			if (onwardsSource === 'related-content') {
+				return 'article-related-content';
+			} else {
+				return undefined;
+			}
+		};
+		const locationPrefix = getLocationPrefix();
+		const dataAttributes = locationPrefix
+			? getOphanComponents({
+					branding,
+					locationPrefix,
+			  })
+			: undefined;
+
+		return showLabsRedesign ? (
+			<SponsoredContentLabel
+				branding={branding}
+				containerPalette={containerPalette}
+				ophanComponentLink={dataAttributes?.ophanComponentLink}
+				ophanComponentName={dataAttributes?.ophanComponentName}
+			/>
+		) : (
+			<CardBranding
+				branding={branding}
+				containerPalette={containerPalette}
+				onwardsSource={onwardsSource}
+			/>
+		);
+	};
+
 	return (
 		<CardWrapper
 			format={format}
@@ -1109,36 +1152,21 @@ export const Card = ({
 								{showPill ? (
 									<>
 										<MediaOrNewsletterPill />
-										{format.theme === ArticleSpecial.Labs &&
-											branding && (
-												<CardBranding
-													branding={branding}
-													onwardsSource={
-														onwardsSource
-													}
-													containerPalette={
-														containerPalette
-													}
-												/>
-											)}
+										{!showLabsRedesign &&
+											format.theme ===
+												ArticleSpecial.Labs &&
+											branding &&
+											getBranding()}
 									</>
 								) : (
 									<CardFooter
 										format={format}
 										age={decideAge()}
 										commentCount={<CommentCount />}
 										cardBranding={
-											branding ? (
-												<CardBranding
-													branding={branding}
-													onwardsSource={
-														onwardsSource
-													}
-													containerPalette={
-														containerPalette
-													}
-												/>
-											) : undefined
+											!showLabsRedesign && branding
+												? getBranding()
+												: undefined
 										}
 										showLivePlayable={showLivePlayable}
 									/>
@@ -1187,6 +1215,7 @@ export const Card = ({
 				</ContentWrapper>
 			</CardLayout>
 
+			{/** This div contains content that sits "outside" of the standard card layout */}
 			<div
 				css={
 					/** We allow this area to take up more space so that cards without
@@ -1231,12 +1260,9 @@ export const Card = ({
 						age={decideAge()}
 						commentCount={<CommentCount />}
 						cardBranding={
-							branding ? (
-								<CardBranding
-									branding={branding}
-									onwardsSource={onwardsSource}
-								/>
-							) : undefined
+							!showLabsRedesign && branding
+								? getBranding()
+								: undefined
 						}
 						showLivePlayable={showLivePlayable}
 						shouldReserveSpace={{
@@ -1246,6 +1272,11 @@ export const Card = ({
 					/>
 				)}
 			</div>
+
+			{showLabsRedesign &&
+				format.theme === ArticleSpecial.Labs &&
+				branding &&
+				getBranding()}
 		</CardWrapper>
 	);
 };

dotcom-rendering/src/components/SponsoredContentLabel.tsx

@@ -5,6 +5,7 @@ import {
 	visuallyHidden,
 } from '@guardian/source/foundations';
 import { decideBrandingLogo } from '../lib/decideLogo';
+import { getZIndex } from '../lib/getZIndex';
 import { palette } from '../palette';
 import type { Branding } from '../types/branding';
 import type { DCRContainerPalette } from '../types/front';
@@ -36,6 +37,10 @@ const wrapperStyles = css`
 	display: flex;
 	gap: ${space[2]}px;
 	justify-content: end;
+	a {
+		/* See: https://css-tricks.com/nested-links/ */
+		z-index: ${getZIndex('card-nested-link')};
+	}
 `;
 
 const horizontalStyles = css`