diff --git a/dotcom-rendering/src/components/ArticleMeta.test.tsx b/dotcom-rendering/src/components/ArticleMeta.test.tsx index b2a15dfad31..b875c2a4287 100644 --- 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 index cbb67a1753e..9a737340353 100644 --- 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 ( { 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 ( -
-
+
+
{branding.logo.label}
-
+
{ About this content diff --git a/dotcom-rendering/src/components/BylineLink.test.tsx b/dotcom-rendering/src/components/BylineLink.test.tsx index 369e19d110b..f1025571bc5 100644 --- 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 index 40fefa55eb5..cf7766e92c9 100644 --- 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)( diff --git a/dotcom-rendering/src/components/Contributor.test.tsx b/dotcom-rendering/src/components/Contributor.test.tsx index 2fc3d812d78..17a25bdd383 100644 --- 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 index b955442a7eb..0d570ff7f2a 100644 --- 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 index 6322544a337..715f96aca4f 100644 --- 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 index e447fa61bcb..07382f18095 100644 --- 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} diff --git a/dotcom-rendering/src/components/FrontSectionTitle.tsx b/dotcom-rendering/src/components/FrontSectionTitle.tsx index 8c13214f57c..837525db092 100644 --- a/dotcom-rendering/src/components/FrontSectionTitle.tsx +++ b/dotcom-rendering/src/components/FrontSectionTitle.tsx @@ -1,13 +1,20 @@ import { css } from '@emotion/react'; -import { from, palette, textSans12, until } from '@guardian/source-foundations'; +import { + from, + palette as sourcePalette, + textSans12, + until, +} from '@guardian/source-foundations'; 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'; type Props = { title: React.ReactNode; collectionBranding: CollectionBranding | undefined; + inAdvertisingPartnerABTest: boolean; }; const titleStyle = css` @@ -16,27 +23,66 @@ const titleStyle = css` } `; +const advertisingPartnerDottedBorder = css` + border-top: 1px dotted ${sourcePalette.neutral[86]}; + border-bottom: none; + margin-top: 0.375rem; +`; + +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: fit-content; + } + ${from.wide} { + padding: 8px; + width: auto; + } +`; + +const labelAdvertisingPartnerStyles = css` + margin-top: 0; + border-top: 0; +`; + const labelStyles = css` ${textSans12}; line-height: 1rem; - color: ${palette.neutral[46]}; + color: ${sourcePalette.neutral[46]}; font-weight: bold; margin-top: 0.375rem; padding-right: 0.625rem; padding-bottom: 0.625rem; text-align: left; - border-top: 1px dotted ${palette.neutral[86]}; + border-top: 1px dotted ${sourcePalette.neutral[86]}; `; const aboutThisLinkStyles = css` ${textSans12}; line-height: 11px; - color: ${palette.neutral[46]}; + color: ${sourcePalette.neutral[46]}; font-weight: normal; text-decoration: none; `; -export const FrontSectionTitle = ({ title, collectionBranding }: Props) => { +const aboutThisLinkAdvertisingPartnerStyles = css` + color: ${sourcePalette.news[400]}; +`; + +export const FrontSectionTitle = ({ + title, + collectionBranding, + inAdvertisingPartnerABTest, +}: Props) => { switch (collectionBranding?.kind) { case 'foundation': { const { @@ -76,9 +122,10 @@ export const FrontSectionTitle = ({ title, collectionBranding }: Props) => {
{ isContainerBranding, isFrontBranding, } = collectionBranding; + const isAdvertisingPartnerOrExclusive = + logo.label.toLowerCase() === 'advertising partner' || + logo.label.toLowerCase() === 'exclusive advertising partner'; if (isFrontBranding || isContainerBranding) { return ( ); } diff --git a/dotcom-rendering/src/components/GuideAtom/GuideAtom.test.tsx b/dotcom-rendering/src/components/GuideAtom/GuideAtom.test.tsx index 72f2b53b260..fd32fc1914f 100644 --- a/dotcom-rendering/src/components/GuideAtom/GuideAtom.test.tsx +++ b/dotcom-rendering/src/components/GuideAtom/GuideAtom.test.tsx @@ -11,6 +11,7 @@ describe('GuideAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -36,6 +37,7 @@ describe('GuideAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -62,6 +64,7 @@ describe('GuideAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/Island.test.tsx b/dotcom-rendering/src/components/Island.test.tsx index 718bac69837..0aedfd59f7b 100644 --- a/dotcom-rendering/src/components/Island.test.tsx +++ b/dotcom-rendering/src/components/Island.test.tsx @@ -96,6 +96,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -126,6 +127,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -146,6 +148,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -176,6 +179,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -204,6 +208,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -298,6 +303,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -342,6 +348,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -379,6 +386,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -417,6 +425,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -440,6 +449,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -470,6 +480,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -499,6 +510,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -526,6 +538,7 @@ describe('Island: server-side rendering', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/MostViewedFooter.test.tsx b/dotcom-rendering/src/components/MostViewedFooter.test.tsx index 5ec882d7324..1565305b1d1 100644 --- a/dotcom-rendering/src/components/MostViewedFooter.test.tsx +++ b/dotcom-rendering/src/components/MostViewedFooter.test.tsx @@ -26,6 +26,7 @@ describe('MostViewedFooterData', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -68,6 +69,7 @@ describe('MostViewedFooterData', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -129,6 +131,7 @@ describe('MostViewedFooterData', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -175,6 +178,7 @@ describe('MostViewedFooterData', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -197,6 +201,7 @@ describe('MostViewedFooterData', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/MostViewedRight.test.tsx b/dotcom-rendering/src/components/MostViewedRight.test.tsx index c643057be47..d5e5ed05d8a 100644 --- a/dotcom-rendering/src/components/MostViewedRight.test.tsx +++ b/dotcom-rendering/src/components/MostViewedRight.test.tsx @@ -23,6 +23,7 @@ describe('MostViewedList', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -72,6 +73,7 @@ describe('MostViewedList', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -100,6 +102,7 @@ describe('MostViewedList', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/Nav/Nav.test.tsx b/dotcom-rendering/src/components/Nav/Nav.test.tsx index 5258d710ace..a5a10c5ac3b 100644 --- a/dotcom-rendering/src/components/Nav/Nav.test.tsx +++ b/dotcom-rendering/src/components/Nav/Nav.test.tsx @@ -10,6 +10,7 @@ describe('Nav', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/ProfileAtom.test.tsx b/dotcom-rendering/src/components/ProfileAtom.test.tsx index 41960f89d34..641f6b7b93e 100644 --- a/dotcom-rendering/src/components/ProfileAtom.test.tsx +++ b/dotcom-rendering/src/components/ProfileAtom.test.tsx @@ -9,6 +9,7 @@ describe('ProfileAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -48,6 +49,7 @@ describe('ProfileAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -88,6 +90,7 @@ describe('ProfileAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/QandaAtom.test.tsx b/dotcom-rendering/src/components/QandaAtom.test.tsx index 7b057754788..c201fd327e5 100644 --- a/dotcom-rendering/src/components/QandaAtom.test.tsx +++ b/dotcom-rendering/src/components/QandaAtom.test.tsx @@ -11,6 +11,7 @@ describe('QandaAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -36,6 +37,7 @@ describe('QandaAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -62,6 +64,7 @@ describe('QandaAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx b/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx index f219bae2310..2c5f02ed066 100644 --- a/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx +++ b/dotcom-rendering/src/components/ReaderRevenueLinks.test.tsx @@ -46,6 +46,7 @@ describe('ReaderRevenueLinks', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -71,6 +72,7 @@ describe('ReaderRevenueLinks', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/RichLinkComponent.importable.test.tsx b/dotcom-rendering/src/components/RichLinkComponent.importable.test.tsx index 65a0dfd9191..7ec8dc7cb2a 100644 --- a/dotcom-rendering/src/components/RichLinkComponent.importable.test.tsx +++ b/dotcom-rendering/src/components/RichLinkComponent.importable.test.tsx @@ -16,6 +16,7 @@ describe('RichLinkComponent', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateMainCheckoutComplete.test.tsx b/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateMainCheckoutComplete.test.tsx index 81050d6930b..1f208b96bcb 100644 --- a/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateMainCheckoutComplete.test.tsx +++ b/dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateMainCheckoutComplete.test.tsx @@ -32,6 +32,7 @@ describe('SignInGateMainCheckoutComplete', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/TimelineAtom.test.tsx b/dotcom-rendering/src/components/TimelineAtom.test.tsx index 03b37bd13f0..489e434222c 100644 --- a/dotcom-rendering/src/components/TimelineAtom.test.tsx +++ b/dotcom-rendering/src/components/TimelineAtom.test.tsx @@ -11,6 +11,7 @@ describe('TimelineAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -36,6 +37,7 @@ describe('TimelineAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -62,6 +64,7 @@ describe('TimelineAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx index 25aebf09080..1fab53f643c 100644 --- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx +++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx @@ -28,6 +28,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -64,6 +65,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -109,6 +111,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -146,6 +149,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -185,6 +189,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -222,6 +227,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -258,6 +264,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > @@ -298,6 +305,7 @@ describe('YoutubeAtom', () => { value={{ renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: '/', }} > diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 788cb6d158c..df63060ee39 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/dotcom-rendering/src/layouts/FrontLayout.tsx @@ -158,8 +158,13 @@ export const FrontLayout = ({ front, NAV }: Props) => { const contributionsServiceUrl = getContributionsServiceUrl(front); + const { abTests } = front.config; + const inUpdatedHeaderABTest = - front.config.abTests.updatedHeaderDesignVariant === 'variant'; + abTests.updatedHeaderDesignVariant === 'variant'; + + const inAdvertisingPartnerABTest = + abTests.updateLogoAdPartnerVariant === 'variant'; const { absoluteServerTimes = false } = front.config.switches; @@ -458,6 +463,9 @@ export const FrontLayout = ({ front, NAV }: Props) => { discussionApiUrl={ front.config.discussionApiUrl } + inAdvertisingPartnerABTest={ + inAdvertisingPartnerABTest + } > { collectionBranding={ collection.collectionBranding } + inAdvertisingPartnerABTest={ + inAdvertisingPartnerABTest + } > { ? getTagPageMobileAdPositions(tagPage.groupedTrails) : []; + const { abTests } = tagPage.config; + const inUpdatedHeaderABTest = - tagPage.config.abTests.updatedHeaderDesignVariant === 'variant'; + abTests.updatedHeaderDesignVariant === 'variant'; + + const inAdvertisingPartnerABTest = + abTests.updateLogoAdPartnerVariant === 'variant'; return ( <> @@ -286,6 +291,9 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => { discussionApiUrl={ tagPage.config.discussionApiUrl } + inAdvertisingPartnerABTest={ + inAdvertisingPartnerABTest + } > { } }; const brandingLabelDark: PaletteFunction = () => sourcePalette.neutral[86]; +const brandingBorderLight: PaletteFunction = () => sourcePalette.neutral[86]; +const brandingBorderDark: PaletteFunction = () => sourcePalette.neutral[20]; const brandingLinkLight: PaletteFunction = ({ design, theme }) => { switch (theme) { case ArticleSpecial.Labs: @@ -5651,6 +5653,10 @@ const paletteColours = { light: blockquoteTextLight, dark: blockquoteTextDark, }, + '--branding-border': { + light: brandingBorderLight, + dark: brandingBorderDark, + }, '--branding-label-text': { light: brandingLabelLight, dark: brandingLabelDark, diff --git a/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx b/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx index d19203b1faa..db9b3ae1a83 100644 --- a/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx +++ b/dotcom-rendering/src/server/render.allEditorialNewslettersPage.web.tsx @@ -28,6 +28,7 @@ export const renderEditorialNewslettersPage = ({ const config: Config = { renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: ASSET_ORIGIN, }; diff --git a/dotcom-rendering/src/server/render.article.amp.tsx b/dotcom-rendering/src/server/render.article.amp.tsx index 994327b3766..eedd66bcb7c 100644 --- a/dotcom-rendering/src/server/render.article.amp.tsx +++ b/dotcom-rendering/src/server/render.article.amp.tsx @@ -44,6 +44,7 @@ export const renderArticle = ({ const config: Config = { renderingTarget: 'Web', darkModeAvailable: false, + inAdvertisingPartnerABTest: false, assetOrigin: ASSET_ORIGIN, }; diff --git a/dotcom-rendering/src/server/render.article.apps.tsx b/dotcom-rendering/src/server/render.article.apps.tsx index b53e53a1e98..7389a314841 100644 --- a/dotcom-rendering/src/server/render.article.apps.tsx +++ b/dotcom-rendering/src/server/render.article.apps.tsx @@ -26,6 +26,7 @@ export const renderArticle = ( const config: Config = { renderingTarget, darkModeAvailable: !!article.config.switches.darkModeInApps, + inAdvertisingPartnerABTest: false, assetOrigin: ASSET_ORIGIN, }; diff --git a/dotcom-rendering/src/server/render.article.web.tsx b/dotcom-rendering/src/server/render.article.web.tsx index a0ca8b06715..796dce1d5c9 100644 --- a/dotcom-rendering/src/server/render.article.web.tsx +++ b/dotcom-rendering/src/server/render.article.web.tsx @@ -53,6 +53,8 @@ export const renderHtml = ({ renderingTarget, darkModeAvailable: article.config.abTests.darkModeWebVariant === 'variant', + inAdvertisingPartnerABTest: + article.config.abTests.updateLogoAdPartnerVariant === 'variant', assetOrigin: ASSET_ORIGIN, }; @@ -264,6 +266,8 @@ export const renderBlocks = ({ const config: Config = { renderingTarget: 'Web', darkModeAvailable: abTests.darkModeWebVariant === 'variant', + inAdvertisingPartnerABTest: + abTests.updateLogoAdPartnerVariant === 'variant', assetOrigin: ASSET_ORIGIN, }; diff --git a/dotcom-rendering/src/server/render.front.web.tsx b/dotcom-rendering/src/server/render.front.web.tsx index 07568fa1c10..88912070cf6 100644 --- a/dotcom-rendering/src/server/render.front.web.tsx +++ b/dotcom-rendering/src/server/render.front.web.tsx @@ -86,6 +86,8 @@ export const renderFront = ({ renderingTarget: 'Web', darkModeAvailable: front.config.abTests.darkModeWebVariant === 'variant', + inAdvertisingPartnerABTest: + front.config.abTests.updateLogoAdPartnerVariant === 'variant', assetOrigin: ASSET_ORIGIN, }; @@ -185,6 +187,8 @@ export const renderTagPage = ({ renderingTarget: 'Web', darkModeAvailable: tagPage.config.abTests.darkModeWebVariant === 'variant', + inAdvertisingPartnerABTest: + tagPage.config.abTests.updateLogoAdPartnerVariant === 'variant', assetOrigin: ASSET_ORIGIN, }; diff --git a/dotcom-rendering/src/types/configContext.ts b/dotcom-rendering/src/types/configContext.ts index 890eb6ba235..3d7e9e09e92 100644 --- a/dotcom-rendering/src/types/configContext.ts +++ b/dotcom-rendering/src/types/configContext.ts @@ -11,10 +11,12 @@ export type Config = | { renderingTarget: Extract; darkModeAvailable: boolean; + inAdvertisingPartnerABTest: boolean; assetOrigin: AssetOrigin; } | { renderingTarget: Extract; darkModeAvailable: boolean; + inAdvertisingPartnerABTest: boolean; assetOrigin: AssetOrigin; };