Update SponsoredContentLabel component to replace Badge with it

Author: deedeeh

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

@@ -441,6 +441,8 @@ export const Card = ({
 	const isVideoMainMedia =
 		mainMedia?.type === 'Video' && format.design !== ArticleDesign.Video;
 
+	const isLabs = format.theme === ArticleSpecial.Labs;
+
 	const decideAge = () => {
 		if (!webPublicationDate) return undefined;
 		const withinTwelveHours = isWithinTwelveHours(webPublicationDate);
@@ -784,6 +786,7 @@ export const Card = ({
 						alignment="end"
 						ophanComponentLink={dataAttributes?.ophanComponentLink}
 						ophanComponentName={dataAttributes?.ophanComponentName}
+						isLabs={isLabs}
 					/>
 				</div>
 				{/** Tablet sized screens have vertical orientation */}
@@ -804,6 +807,7 @@ export const Card = ({
 						alignment="end"
 						ophanComponentLink={dataAttributes?.ophanComponentLink}
 						ophanComponentName={dataAttributes?.ophanComponentName}
+						isLabs={isLabs}
 					/>
 				</div>
 			</>

dotcom-rendering/src/components/FeatureCard.tsx

@@ -741,6 +741,7 @@ export const FeatureCard = ({
 							ophanComponentName={
 								labsDataAttributes?.ophanComponentName
 							}
+							isLabs={isLabs}
 						/>
 					)}
 				</div>

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

@@ -385,7 +385,7 @@ export const WithPaidContentForWholeFront = {
 };
 
 export const GuardianLabs = {
-	name: 'Guardian Labs',
+	name: 'guardian Labs',
 	args: {
 		title: 'Section',
 		collectionBranding: {

dotcom-rendering/src/components/FrontSection.tsx

@@ -838,6 +838,7 @@ export const FrontSection = ({
 									ophanComponentName={
 										labsDataAttributes?.ophanComponentName
 									}
+									isLabs={isLabs}
 								/>
 							</div>
 						)}

dotcom-rendering/src/components/FrontSectionTitle.tsx

@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
 import { assertUnreachable } from '../lib/assert-unreachable';
 import { palette } from '../palette';
 import type { CollectionBranding } from '../types/branding';
-import { Badge } from './Badge';
+import { SponsoredContentLabel } from './SponsoredContentLabel';
 
 type Props = {
 	title: React.ReactNode;
@@ -90,12 +90,16 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 					<>
 						<Hide until="leftCol">
 							<p css={[labelStyles]}>{logo.label}</p>
-							<Badge imageSrc={logo.src} href={logo.link} />
+							<SponsoredContentLabel
+								branding={collectionBranding.branding}
+							/>
 						</Hide>
 						<div css={titleStyle}>
 							<Hide from="leftCol">
 								<p css={[labelStyles]}>{logo.label}</p>
-								<Badge imageSrc={logo.src} href={logo.link} />
+								<SponsoredContentLabel
+									branding={collectionBranding.branding}
+								/>
 							</Hide>
 							{title}
 							<a href={aboutThisLink} css={[aboutThisLinkStyles]}>
@@ -109,11 +113,7 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 			return <div css={titleStyle}>{title}</div>;
 		}
 		case 'paid-content': {
-			const {
-				isFrontBranding,
-				isContainerBranding,
-				branding: { logo },
-			} = collectionBranding;
+			const { isFrontBranding, isContainerBranding } = collectionBranding;
 
 			if (isFrontBranding || isContainerBranding) {
 				return (
@@ -134,7 +134,9 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 							`}
 						>
 							Paid for by
-							<Badge imageSrc={logo.src} href={logo.link} />
+							<SponsoredContentLabel
+								branding={collectionBranding.branding}
+							/>
 						</div>
 					</div>
 				);
@@ -143,11 +145,15 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 			return (
 				<>
 					<Hide until="leftCol">
-						<Badge imageSrc={logo.src} href={logo.link} />
+						<SponsoredContentLabel
+							branding={collectionBranding.branding}
+						/>
 					</Hide>
 					<div css={titleStyle}>
 						<Hide from="leftCol">
-							<Badge imageSrc={logo.src} href={logo.link} />
+							<SponsoredContentLabel
+								branding={collectionBranding.branding}
+							/>
 						</Hide>
 						{title}
 					</div>
@@ -185,9 +191,8 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
 							>
 								{logo.label}
 							</p>
-							<Badge
-								imageSrc={logo.src}
-								href={logo.link}
+							<SponsoredContentLabel
+								branding={collectionBranding.branding}
 								isAdvertisingPartner={
 									isAdvertisingPartnerOrExclusive
 								}

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

@@ -33,6 +33,7 @@ const meta: Meta<typeof SponsoredContentLabel> = {
 			sponsorName: 'Guardian Org',
 			aboutThisLink: '#about',
 		},
+		isLabs: true,
 	},
 };
 

dotcom-rendering/src/components/SponsoredContentLabel.tsx

@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 import {
+	between,
+	from,
 	space,
 	textSansBold12,
 	visuallyHidden,
@@ -18,6 +20,8 @@ type SponsoredContentLabelProps = {
 	containerPalette?: DCRContainerPalette;
 	ophanComponentLink?: string;
 	ophanComponentName?: string;
+	isLabs?: boolean;
+	isAdvertisingPartner?: boolean;
 };
 
 const logoImageStyle = css`
@@ -65,6 +69,36 @@ const linkStyles = css`
 	justify-content: center;
 `;
 
+const badgeLink = css`
+	text-decoration: none;
+`;
+
+const imageStyles = css`
+	display: block;
+	width: auto;
+	max-width: 100%;
+	object-fit: contain;
+`;
+
+const frontsSectionBadgeSizingStyles = css`
+	height: auto;
+	width: 120px;
+
+	${from.tablet} {
+		width: 140px;
+	}
+
+	${from.leftCol} {
+		width: 200px;
+	}
+`;
+
+const imageAdvertisingPartnerStyles = css`
+	${between.leftCol.and.wide} {
+		max-width: 130px;
+	}
+`;
+
 /**
  * Component used to display "paid for" label alonside the sponsor logo
  * for a particular set of branding
@@ -79,64 +113,90 @@ export const SponsoredContentLabel = ({
 	containerPalette,
 	ophanComponentLink,
 	ophanComponentName,
+	isLabs = false,
+	isAdvertisingPartner = false,
 }: SponsoredContentLabelProps) => {
 	const { darkModeAvailable } = useConfig();
 	const logo = decideBrandingLogo(branding, containerPalette);
 
-	return (
-		<div
-			css={[
-				wrapperStyles,
-				orientation === 'vertical'
-					? verticalStyles[alignment]
-					: horizontalStyles,
-			]}
-		>
-			<div css={labelStyles}>{logo.label}</div>
-			<span
-				css={css`
-					${visuallyHidden};
-				`}
+	if (isLabs) {
+		return (
+			<div
+				css={[
+					wrapperStyles,
+					orientation === 'vertical'
+						? verticalStyles[alignment]
+						: horizontalStyles,
+				]}
 			>
-				{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
-				css={linkStyles}
-				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}
-				className="branding-logo"
-			>
-				<picture>
-					{darkModeAvailable && branding.logoForDarkBackground && (
-						<source
-							width={
-								branding.logoForDarkBackground.dimensions.width
-							}
-							height={
-								branding.logoForDarkBackground.dimensions.height
-							}
-							srcSet={encodeURI(
-								branding.logoForDarkBackground.src,
+				<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
+					css={linkStyles}
+					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}
+					className="branding-logo"
+				>
+					<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)'}
+								/>
 							)}
-							media={'(prefers-color-scheme: dark)'}
+						<img
+							css={logoImageStyle}
+							src={logo.src}
+							alt={branding.sponsorName}
+							width={logo.dimensions.width}
+							height={logo.dimensions.height}
 						/>
-					)}
-					<img
-						css={logoImageStyle}
-						src={logo.src}
-						alt={branding.sponsorName}
-						width={logo.dimensions.width}
-						height={logo.dimensions.height}
-					/>
-				</picture>
-			</a>
-		</div>
+					</picture>
+				</a>
+			</div>
+		);
+	}
+	return (
+		<a
+			href={logo.link}
+			data-link-name={ophanComponentLink}
+			data-component={ophanComponentName}
+			css={badgeLink}
+		>
+			<img
+				css={[
+					imageStyles,
+					frontsSectionBadgeSizingStyles,
+					isAdvertisingPartner && imageAdvertisingPartnerStyles,
+				]}
+				src={logo.src}
+				alt={''}
+			/>
+		</a>
 	);
 };