use entire branding object rather than href and imageSrc alone in the SponsoredContentLabel component (#14596)

Author: cemms1

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

@@ -5,7 +5,7 @@ import {
 	visuallyHidden,
 } from '@guardian/source/foundations';
 import { useConfig } from '../../../components/ConfigContext';
-import { decideCardLogo } from '../../../lib/decideLogo';
+import { decideBrandingLogo } from '../../../lib/decideLogo';
 import { getZIndex } from '../../../lib/getZIndex';
 import { getOphanComponents } from '../../../lib/labs';
 import { palette as themePalette } from '../../../palette';
@@ -48,7 +48,7 @@ export const CardBranding = ({
 	onwardsSource,
 	containerPalette,
 }: Props) => {
-	const logo = decideCardLogo(branding, containerPalette);
+	const logo = decideBrandingLogo(branding, containerPalette);
 
 	const { darkModeAvailable } = useConfig();
 

dotcom-rendering/src/components/FrontSection.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/react';
 import { isString } from '@guardian/libs';
 import { between, from, space, until } from '@guardian/source/foundations';
 import { pageSkinContainer } from '../layouts/lib/pageSkin';
-import { badgeFromBranding } from '../lib/branding';
 import { type EditionId, isNetworkFront } from '../lib/edition';
 import { hideAge } from '../lib/hideAge';
+import { getOphanComponents } from '../lib/labs';
 import { palette as schemePalette } from '../palette';
 import type { CollectionBranding } from '../types/branding';
 import type {
@@ -634,7 +634,13 @@ export const FrontSection = ({
 		!!isNextCollectionPrimary || isAboveDesktopAd;
 
 	const showSectionColours = isNetworkFront(pageId ?? '');
-	const badge = badgeFromBranding(collectionBranding);
+
+	const labsDataAttributes = collectionBranding?.branding
+		? getOphanComponents({
+				branding: collectionBranding.branding,
+				locationPrefix: 'front-container',
+		  })
+		: undefined;
 
 	/**
 	 * id is being used to set the containerId in @see {ShowMore.importable.tsx}
@@ -807,12 +813,17 @@ export const FrontSection = ({
 					) : null}
 					{isLabs &&
 						collectionBranding?.kind === 'paid-content' &&
-						badge && (
+						!collectionBranding.hasMultipleBranding && (
 							<div css={sponsoredContentLabelWrapper}>
 								<SponsoredContentLabel
-									imageSrc={badge.imageSrc}
-									href={badge.href}
-									ophanComponentName={ophanComponentName}
+									branding={collectionBranding.branding}
+									containerPalette={containerPalette}
+									ophanComponentLink={
+										labsDataAttributes?.ophanComponentLink
+									}
+									ophanComponentName={
+										labsDataAttributes?.ophanComponentName
+									}
 								/>
 							</div>
 						)}

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

@@ -11,10 +11,28 @@ const meta: Meta<typeof SponsoredContentLabel> = {
 		},
 	},
 	args: {
-		href: '#',
-		imageSrc:
-			'https://static.theguardian.com/commercial/sponsor/22/Aug/2025/52dc0276-c2d9-405c-a686-2577c12914d4-ecover_pos_280.png',
-		ophanComponentName: 'example',
+		branding: {
+			logo: {
+				src: 'https://static.theguardian.com/commercial/sponsor/22/Aug/2025/52dc0276-c2d9-405c-a686-2577c12914d4-ecover_pos_280.png',
+				link: '#',
+				label: 'Paid for by',
+				dimensions: {
+					width: 120,
+					height: 60,
+				},
+			},
+			logoForDarkBackground: {
+				src: 'https://static.theguardian.com/commercial/sponsor/22/Aug/2025/52dc0276-c2d9-405c-a686-2577c12914d4-ecover_pos_280.png',
+				link: '#',
+				label: 'Paid for by',
+				dimensions: {
+					width: 120,
+					height: 60,
+				},
+			},
+			sponsorName: 'Guardian Org',
+			aboutThisLink: '#about',
+		},
 	},
 };
 

dotcom-rendering/src/components/SponsoredContentLabel.tsx

@@ -1,16 +1,33 @@
 import { css } from '@emotion/react';
-import { space, textSansBold12 } from '@guardian/source/foundations';
+import {
+	space,
+	textSansBold12,
+	visuallyHidden,
+} from '@guardian/source/foundations';
+import { decideBrandingLogo } from '../lib/decideLogo';
 import { palette } from '../palette';
-import type { DCRBadgeType } from '../types/badge';
-import { Badge } from './Badge';
+import type { Branding } from '../types/branding';
+import type { DCRContainerPalette } from '../types/front';
+import { useConfig } from './ConfigContext';
 
-type SponsoredContentLabelProps = DCRBadgeType & {
+type SponsoredContentLabelProps = {
+	branding: Branding;
 	alignment?: 'start' | 'end';
-	ophanComponentName?: string;
 	orientation?: 'horizontal' | 'vertical';
+	containerPalette?: DCRContainerPalette;
+	ophanComponentLink?: string;
+	ophanComponentName?: string;
 };
 
-const paidForByStyles = css`
+const logoImageStyle = css`
+	max-height: 60px;
+	max-width: 120px;
+	vertical-align: middle;
+	height: auto;
+	width: auto;
+`;
+
+const labelStyles = css`
 	${textSansBold12};
 	color: ${palette('--labs-header-label-text')};
 `;
@@ -35,13 +52,24 @@ const verticalStyles = {
 	`,
 };
 
+/**
+ * Component used to display "paid for" label alonside the sponsor logo
+ * for a particular set of branding
+ *
+ * This is used for front container level branding for labs content and
+ * should replace `CardBranding` eventually
+ */
 export const SponsoredContentLabel = ({
+	branding,
 	alignment = 'start',
-	imageSrc,
-	href,
-	ophanComponentName,
 	orientation = 'horizontal',
+	containerPalette,
+	ophanComponentLink,
+	ophanComponentName,
 }: SponsoredContentLabelProps) => {
+	const { darkModeAvailable } = useConfig();
+	const logo = decideBrandingLogo(branding, containerPalette);
+
 	return (
 		<div
 			css={[
@@ -51,14 +79,49 @@ export const SponsoredContentLabel = ({
 					: horizontalStyles,
 			]}
 		>
-			<div css={paidForByStyles}>Paid for by</div>
-			<Badge
-				href={href}
-				imageSrc={imageSrc}
-				isInLabsSection={true}
-				ophanComponentLink={`labs-logo | ${ophanComponentName}`}
-				ophanComponentName={`labs-logo-${ophanComponentName}`}
-			/>
+			<div css={labelStyles}>{logo.label}</div>
+			<span
+				css={css`
+					${visuallyHidden};
+				`}
+			>
+				{branding.sponsorName
+					? `This content was paid for by ${branding.sponsorName} and produced by the Guardian Labs team.`
+					: 'This content has been paid for by an advertiser and produced by the Guardian Labs team.'}
+			</span>
+			<a
+				href={logo.link}
+				data-sponsor={branding.sponsorName.toLowerCase()}
+				rel="nofollow"
+				aria-label={`Visit the ${branding.sponsorName} website`}
+				data-testid="branding-logo"
+				data-component={ophanComponentName}
+				data-link-name={ophanComponentLink}
+			>
+				<picture>
+					{darkModeAvailable && branding.logoForDarkBackground && (
+						<source
+							width={
+								branding.logoForDarkBackground.dimensions.width
+							}
+							height={
+								branding.logoForDarkBackground.dimensions.height
+							}
+							srcSet={encodeURI(
+								branding.logoForDarkBackground.src,
+							)}
+							media={'(prefers-color-scheme: dark)'}
+						/>
+					)}
+					<img
+						css={logoImageStyle}
+						src={logo.src}
+						alt={branding.sponsorName}
+						width={logo.dimensions.width}
+						height={logo.dimensions.height}
+					/>
+				</picture>
+			</a>
 		</div>
 	);
 };

dotcom-rendering/src/lib/decideLogo.ts

@@ -2,7 +2,7 @@ import type { Branding } from '../types/branding';
 import type { DCRContainerPalette } from '../types/front';
 import { cardHasDarkBackground } from './cardHelpers';
 
-export const decideCardLogo = (
+export const decideBrandingLogo = (
 	branding: Branding,
 	containerPalette?: DCRContainerPalette,
 ): Branding['logo'] => {

dotcom-rendering/src/lib/labs.ts

@@ -9,7 +9,11 @@ export const getOphanComponents = ({
 	/**
 	 * Allows clicks to be attributed to different areas of content
 	 */
-	locationPrefix: 'article-meta' | 'article-related-content';
+	locationPrefix:
+		| 'article-meta'
+		| 'article-related-content'
+		| 'front-card'
+		| 'front-container';
 }): { ophanComponentName: string; ophanComponentLink: string } => {
 	const formattedSponsorName = branding.sponsorName
 		.toLowerCase()