Fix Affiliate Disclaimer tracking

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

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+import { space, textSans15 } from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
+import {
+	DisclaimerText,
+	useAffiliateDisclaimerEvent,
+} from '../lib/affiliateDisclaimerHelpers';
+
+const disclaimerLeftColStyles = css`
+	${textSans15};
+	/**
+	 * Typography preset styles should not be overridden.
+	 * This has been done because the styles do not directly map to the new presets.
+	 * Please speak to your team's designer and update this to use a more appropriate preset.
+	 */
+	line-height: 1.15;
+	padding-top: ${space[1]}px;
+	padding-bottom: ${space[1]}px;
+`;
+
+const AffiliateDisclaimer = () => {
+	useAffiliateDisclaimerEvent();
+	return (
+		<Hide until="leftCol">
+			<aside
+				css={[disclaimerLeftColStyles]}
+				data-testid="affiliate-disclaimer"
+			>
+				<DisclaimerText />
+			</aside>
+		</Hide>
+	);
+};
+
+export { AffiliateDisclaimer };

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

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import { space, textSans14 } from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
+import {
+	DisclaimerText,
+	useAffiliateDisclaimerEvent,
+} from '../lib/affiliateDisclaimerHelpers';
+import { palette as themePalette } from '../palette';
+
+const disclaimerInlineStyles = css`
+	${textSans14};
+	/**
+	 * Typography preset styles should not be overridden.
+	 * This has been done because the styles do not directly map to the new presets.
+	 * Please speak to your team's designer and update this to use a more appropriate preset.
+	 */
+	line-height: 1.15;
+	float: left;
+	clear: left;
+	width: 8.75rem;
+	background-color: ${themePalette('--affiliate-disclaimer-background')};
+	:hover {
+		background-color: ${themePalette(
+			'--affiliate-disclaimer-background-hover',
+		)};
+	}
+	margin-top: ${space[1]}px;
+	margin-right: ${space[5]}px;
+	margin-bottom: ${space[1]}px;
+	padding-top: ${space[0]}px;
+	padding-right: 5px;
+	padding-left: 5px;
+	padding-bottom: ${space[3]}px;
+`;
+
+const AffiliateDisclaimerInline = () => {
+	useAffiliateDisclaimerEvent();
+	return (
+		<Hide from="leftCol">
+			<aside
+				css={[disclaimerInlineStyles]}
+				data-testid="affiliate-disclaimer-inline"
+			>
+				<DisclaimerText />
+			</aside>
+		</Hide>
+	);
+};
+
+export { AffiliateDisclaimerInline };

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

@@ -0,0 +1,55 @@
+import { css } from '@emotion/react';
+import {
+	palette,
+	space,
+	textSans12,
+	textSans15,
+} from '@guardian/source/foundations';
+import {
+	DisclaimerText,
+	useAffiliateDisclaimerEvent,
+} from '../lib/affiliateDisclaimerHelpers';
+import { palette as themePalette } from '../palette';
+
+const disclaimerLeftColStyles = css`
+	${textSans15};
+	/**
+	 * Typography preset styles should not be overridden.
+	 * This has been done because the styles do not directly map to the new presets.
+	 * Please speak to your team's designer and update this to use a more appropriate preset.
+	 */
+	line-height: 1.15;
+	padding-top: ${space[1]}px;
+	padding-bottom: ${space[1]}px;
+`;
+
+const galleryDisclaimerStyles = css`
+	${textSans12};
+	line-height: 1.5;
+	color: ${themePalette('--affiliate-disclaimer-text')};
+	a {
+		color: ${themePalette('--affiliate-disclaimer-text')};
+		transition: border-color 0.15s ease-out;
+		border-bottom: 1px solid ${palette.neutral[46]};
+		text-decoration: none;
+	}
+	a:hover {
+		border-bottom: 1px solid
+			${themePalette('--affiliate-disclaimer-text-hover')};
+		text-decoration: none;
+	}
+`;
+
+const GalleryAffiliateDisclaimer = () => {
+	useAffiliateDisclaimerEvent();
+	return (
+		<aside
+			css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
+			data-testid="affiliate-disclaimer"
+		>
+			<DisclaimerText />
+		</aside>
+	);
+};
+
+export { GalleryAffiliateDisclaimer };

dotcom-rendering/src/layouts/AudioLayout.tsx

@@ -7,7 +7,7 @@ import {
 } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
-import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
 import { ArticleHeadline } from '../components/ArticleHeadline';
@@ -272,7 +272,12 @@ export const AudioLayout = (props: WebProps) => {
 									}
 								/>
 								{!!article.affiliateLinksDisclaimer && (
-									<AffiliateDisclaimer />
+									<Island
+										priority="enhancement"
+										defer={{ until: 'idle' }}
+									>
+										<AffiliateDisclaimer />
+									</Island>
 								)}
 							</div>
 						</GridItem>

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -9,7 +9,6 @@ import { Hide } from '@guardian/source/react-components';
 import { AdPlaceholder } from '../components/AdPlaceholder.apps';
 import { AdPortals } from '../components/AdPortals.importable';
 import { AdSlot } from '../components/AdSlot.web';
-import { GalleryAffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
@@ -20,6 +19,7 @@ import { DiscussionLayout } from '../components/DiscussionLayout';
 import { FetchMoreGalleriesData } from '../components/FetchMoreGalleriesData.importable';
 import { Footer } from '../components/Footer';
 import { DesktopAdSlot, MobileAdSlot } from '../components/GalleryAdSlots';
+import { GalleryAffiliateDisclaimer } from '../components/GalleryAffiliateDisclaimer.importable';
 import { GalleryImage } from '../components/GalleryImage';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { Island } from '../components/Island';
@@ -496,7 +496,9 @@ const Meta = ({
 			/>
 		) : null}
 		{!!frontendData.affiliateLinksDisclaimer && (
-			<GalleryAffiliateDisclaimer />
+			<Island priority="enhancement" defer={{ until: 'idle' }}>
+				<GalleryAffiliateDisclaimer />
+			</Island>
 		)}
 	</div>
 );

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

@@ -9,7 +9,7 @@ import {
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { AdPortals } from '../components/AdPortals.importable';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
-import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -613,7 +613,12 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 												}
 											/>
 											{!!article.affiliateLinksDisclaimer && (
-												<AffiliateDisclaimer />
+												<Island
+													priority="enhancement"
+													defer={{ until: 'idle' }}
+												>
+													<AffiliateDisclaimer />
+												</Island>
 											)}
 										</Hide>
 									</>
@@ -643,7 +648,12 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 											}
 										/>
 										{!!article.affiliateLinksDisclaimer && (
-											<AffiliateDisclaimer />
+											<Island
+												priority="enhancement"
+												defer={{ until: 'idle' }}
+											>
+												<AffiliateDisclaimer />
+											</Island>
 										)}
 									</>
 								)}

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { AdPortals } from '../components/AdPortals.importable';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
-import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -490,7 +490,12 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 												}
 											/>
 											{!!article.affiliateLinksDisclaimer && (
-												<AffiliateDisclaimer />
+												<Island
+													priority="enhancement"
+													defer={{ until: 'idle' }}
+												>
+													<AffiliateDisclaimer />
+												</Island>
 											)}
 										</Hide>
 									</>
@@ -520,7 +525,12 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 											}
 										/>
 										{!!article.affiliateLinksDisclaimer && (
-											<AffiliateDisclaimer />
+											<Island
+												priority="enhancement"
+												defer={{ until: 'idle' }}
+											>
+												<AffiliateDisclaimer />
+											</Island>
 										)}
 									</>
 								)}