Update Logo styling for advertising partner

dotcom-rendering/src/components/ArticleMeta.test.tsx

@@ -19,6 +19,7 @@ describe('ArticleMeta', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -65,6 +66,7 @@ describe('ArticleMeta', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>

dotcom-rendering/src/components/Badge.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from } from '@guardian/source-foundations';
+import { between, from } from '@guardian/source-foundations';
 
 const frontsSectionBadgeSizingStyles = css`
 	height: auto;
@@ -23,6 +23,12 @@ const labsSectionBadgeSizingStyles = css`
 	}
 `;
 
+const imageAdvertisingPartnerStyles = css`
+	${between.leftCol.and.wide} {
+		max-width: 130px;
+	}
+`;
+
 const imageStyles = css`
 	display: block;
 	width: auto;
@@ -40,6 +46,8 @@ type Props = {
 	ophanComponentLink?: string;
 	ophanComponentName?: string;
 	isInLabsSection?: boolean;
+	isAdvertisingPartner?: boolean;
+	inAdvertisingPartnerABTest?: boolean;
 };
 
 export const Badge = ({
@@ -48,6 +56,8 @@ export const Badge = ({
 	ophanComponentLink,
 	ophanComponentName,
 	isInLabsSection = false,
+	isAdvertisingPartner = false,
+	inAdvertisingPartnerABTest = false,
 }: Props) => {
 	return (
 		<a
@@ -62,6 +72,9 @@ export const Badge = ({
 					isInLabsSection
 						? labsSectionBadgeSizingStyles
 						: frontsSectionBadgeSizingStyles,
+					isAdvertisingPartner &&
+						inAdvertisingPartnerABTest &&
+						imageAdvertisingPartnerStyles,
 				]}
 				src={imageSrc}
 				alt={isInLabsSection ? 'Labs sponsor logo' : ''}

dotcom-rendering/src/components/Branding.importable.tsx

@@ -1,6 +1,11 @@
 import { css } from '@emotion/react';
 import { ArticleDesign } from '@guardian/libs';
-import { breakpoints, from, textSans12 } from '@guardian/source-foundations';
+import {
+	between,
+	breakpoints,
+	from,
+	textSans12,
+} from '@guardian/source-foundations';
 import { trackSponsorLogoLinkClick } from '../client/ga/ga';
 import { getOphanComponents } from '../lib/labs';
 import { palette } from '../palette';
@@ -11,6 +16,37 @@ const brandingStyle = css`
 	padding-bottom: 10px;
 `;
 
+const brandingAdvertisingPartnerStyle = css`
+	margin: 4px 0 20px;
+	padding: 4px;
+	border: 1px solid ${palette('--branding-border')};
+	width: fit-content;
+
+	${from.desktop} {
+		padding: 8px;
+		width: 220px;
+	}
+	${from.leftCol} {
+		padding: 4px;
+		width: 140px;
+	}
+	${from.wide} {
+		padding: 8px;
+		width: 220px;
+	}
+`;
+
+const brandingInteractiveStyle = css`
+	${from.desktop} {
+		padding: 8px;
+		width: 220px;
+	}
+`;
+
+const labelAdvertisingPartnerStyle = css`
+	padding-bottom: 1px;
+`;
+
 const labelStyle = css`
 	${textSans12}
 	color: ${palette('--branding-label-text')};
@@ -28,8 +64,16 @@ const liveBlogLabelStyle = css`
 	}
 `;
 
+const brandingLogoAdvertisingPartnerStyle = css`
+	& img {
+		display: block;
+		${between.leftCol.and.wide} {
+			max-width: 130px;
+		}
+	}
+`;
+
 const brandingLogoStyle = css`
-	padding: 10px 0;
 	display: block;
 
 	& img {
@@ -41,6 +85,7 @@ const aboutLinkStyle = css`
 	${textSans12}
 	display: block;
 	text-decoration: none;
+	padding-top: 1px;
 
 	color: ${palette('--branding-link-text')};
 	a {
@@ -152,19 +197,54 @@ type Props = {
 export const Branding = ({ branding, format }: Props) => {
 	const sponsorId = branding.sponsorName.toLowerCase();
 	const isLiveBlog = format.design === ArticleDesign.LiveBlog;
+	const isInteractive = format.design === ArticleDesign.Interactive;
+
 	const { ophanComponentName, ophanComponentLink } = getOphanComponents({
 		branding,
 		locationPrefix: 'article-meta',
 	});
 
-	const { darkModeAvailable } = useConfig();
+	const { darkModeAvailable, inAdvertisingPartnerABTest } = useConfig();
+
+	const isAdvertisingPartnerOrExclusive =
+		branding.logo.label.toLowerCase() === 'advertising partner' ||
+		branding.logo.label.toLowerCase() === 'exclusive advertising partner';
+
+	const isAdvertisingPartnerAndInteractive =
+		isAdvertisingPartnerOrExclusive && isInteractive;
 
 	return (
-		<div css={brandingStyle}>
-			<div css={[labelStyle, isLiveBlog && liveBlogLabelStyle]}>
+		<div
+			css={[
+				brandingStyle,
+				isAdvertisingPartnerOrExclusive &&
+					inAdvertisingPartnerABTest &&
+					brandingAdvertisingPartnerStyle,
+				isAdvertisingPartnerAndInteractive &&
+					inAdvertisingPartnerABTest &&
+					brandingInteractiveStyle,
+			]}
+		>
+			<div
+				css={[
+					labelStyle,
+					isAdvertisingPartnerOrExclusive &&
+						inAdvertisingPartnerABTest &&
+						labelAdvertisingPartnerStyle,
+					isLiveBlog && liveBlogLabelStyle,
+				]}
+			>
 				{branding.logo.label}
 			</div>
-			<div css={brandingLogoStyle}>
+			<div
+				css={[
+					brandingLogoStyle,
+					isAdvertisingPartnerOrExclusive &&
+						!isInteractive &&
+						inAdvertisingPartnerABTest &&
+						brandingLogoAdvertisingPartnerStyle,
+				]}
+			>
 				<a
 					href={branding.logo.link}
 					data-sponsor={branding.sponsorName.toLowerCase()}

dotcom-rendering/src/components/BylineLink.test.tsx

@@ -108,6 +108,7 @@ describe('BylineLink', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -150,6 +151,7 @@ describe('BylineLink', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -194,6 +196,7 @@ describe('BylineLink', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -234,6 +237,7 @@ describe('BylineLink', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -265,6 +269,7 @@ describe('BylineLink', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>

dotcom-rendering/src/components/ConfigContext.test.tsx

@@ -24,16 +24,19 @@ describe('ConfigContext', () => {
 			{
 				renderingTarget: 'Web',
 				darkModeAvailable: false,
+				inAdvertisingPartnerABTest: false,
 				assetOrigin: '/',
 			},
 			{
 				renderingTarget: 'Apps',
 				darkModeAvailable: true,
+				inAdvertisingPartnerABTest: false,
 				assetOrigin: '/',
 			},
 			{
 				renderingTarget: 'Apps',
 				darkModeAvailable: false,
+				inAdvertisingPartnerABTest: false,
 				assetOrigin: '/',
 			},
 		] as const satisfies ReadonlyArray<Config>)(

dotcom-rendering/src/components/Contributor.test.tsx

@@ -19,6 +19,7 @@ describe('Contributor', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -53,6 +54,7 @@ describe('Contributor', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>

dotcom-rendering/src/components/Discussion/Discussion.test.tsx

@@ -18,6 +18,7 @@ describe('App', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>

dotcom-rendering/src/components/Dropdown.test.tsx

@@ -45,6 +45,7 @@ describe('Dropdown', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -66,6 +67,7 @@ describe('Dropdown', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -90,6 +92,7 @@ describe('Dropdown', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -113,6 +116,7 @@ describe('Dropdown', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -138,6 +142,7 @@ describe('Dropdown', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>
@@ -164,6 +169,7 @@ describe('Dropdown', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>

dotcom-rendering/src/components/FrontSection.tsx

@@ -87,6 +87,7 @@ type Props = {
 	discussionApiUrl: string;
 	collectionBranding?: CollectionBranding;
 	isTagPage?: boolean;
+	inAdvertisingPartnerABTest?: boolean;
 };
 
 const width = (columns: number, columnWidth: number, columnGap: number) =>
@@ -462,6 +463,7 @@ export const FrontSection = ({
 	discussionApiUrl,
 	collectionBranding,
 	isTagPage = false,
+	inAdvertisingPartnerABTest = false,
 }: Props) => {
 	const overrides =
 		containerPalette && decideContainerOverrides(containerPalette);
@@ -539,6 +541,7 @@ export const FrontSection = ({
 						/>
 					}
 					collectionBranding={collectionBranding}
+					inAdvertisingPartnerABTest={inAdvertisingPartnerABTest}
 				/>
 
 				{leftContent}