Merge branch 'main' into oa/jm/AR-update-typography

guardian · May 23, 2024 · ae19881 · ae19881
2 parents 55266ad + 847840c
commit ae19881
Show file tree

Hide file tree

Showing 36 changed files with 384 additions and 55 deletions.
diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json
@@ -54,7 +54,7 @@
 		"@guardian/source-foundations": "14.2.2",
 		"@guardian/source-react-components": "22.1.0",
 		"@guardian/source-react-components-development-kitchen": "19.0.0",
-		"@guardian/support-dotcom-components": "2.2.1",
+		"@guardian/support-dotcom-components": "2.3.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.40.1",
 		"@sentry/browser": "7.75.1",

diff --git a/dotcom-rendering/src/components/AffiliateDisclaimer.tsx b/dotcom-rendering/src/components/AffiliateDisclaimer.tsx
@@ -61,10 +61,8 @@ const ampStyles = css`
 
 const DisclaimerText = () => (
 	<p>
-		The Guardian’s product and service reviews are independent and are in no
-		way influenced by any advertiser or commercial initiative. We will earn
-		a commission from the retailer if you buy something through an affiliate
-		link.&nbsp;
+		The Guardian’s journalism is independent. We will earn a commission if
+		you buy something through an affiliate link.&nbsp;
 		<a href="https://www.theguardian.com/info/2017/nov/01/reader-information-on-affiliate-links">
 			Learn more.
 		</a>

diff --git a/dotcom-rendering/src/components/ArticleMeta.test.tsx b/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: '/',
 				}}
 			>

diff --git a/dotcom-rendering/src/components/Badge.tsx b/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' : ''}

diff --git a/dotcom-rendering/src/components/Branding.importable.tsx b/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,6 +64,16 @@ const liveBlogLabelStyle = css`
 	}
 `;
 
+const brandingLogoAdvertisingPartnerStyle = css`
+	padding: 0;
+	& img {
+		display: block;
+		${between.leftCol.and.wide} {
+			max-width: 130px;
+		}
+	}
+`;
+
 const brandingLogoStyle = css`
 	padding: 10px 0;
 	display: block;
@@ -37,6 +83,10 @@ const brandingLogoStyle = css`
 	}
 `;
 
+const aboutLinkAdvertisingPartnerStyle = css`
+	padding-top: 1px;
+`;
+
 const aboutLinkStyle = css`
 	${textSans12}
 	display: block;
@@ -152,19 +202,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()}
@@ -181,7 +266,13 @@ export const Branding = ({ branding, format }: Props) => {
 
 			<a
 				href={branding.aboutThisLink}
-				css={[aboutLinkStyle, isLiveBlog && liveBlogAboutLinkStyle]}
+				css={[
+					aboutLinkStyle,
+					isAdvertisingPartnerOrExclusive &&
+						inAdvertisingPartnerABTest &&
+						aboutLinkAdvertisingPartnerStyle,
+					isLiveBlog && liveBlogAboutLinkStyle,
+				]}
 			>
 				About this content
 			</a>

diff --git a/dotcom-rendering/src/components/BylineLink.test.tsx b/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: '/',
 				}}
 			>

diff --git a/dotcom-rendering/src/components/ConfigContext.test.tsx b/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>)(

diff --git a/dotcom-rendering/src/components/Contributor.test.tsx b/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: '/',
 				}}
 			>

diff --git a/dotcom-rendering/src/components/Discussion/Discussion.test.tsx b/dotcom-rendering/src/components/Discussion/Discussion.test.tsx
@@ -18,6 +18,7 @@ describe('App', () => {
 				value={{
 					renderingTarget: 'Web',
 					darkModeAvailable: false,
+					inAdvertisingPartnerABTest: false,
 					assetOrigin: '/',
 				}}
 			>

diff --git a/dotcom-rendering/src/components/Dropdown.test.tsx b/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: '/',
 				}}
 			>

diff --git a/dotcom-rendering/src/components/FrontSection.tsx b/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}