Convert the Affiliate Disclaimer component to server-side only

dotcom-rendering/src/components/AffiliateDisclaimer.tsx

@@ -0,0 +1,122 @@
+import { css } from '@emotion/react';
+import {
+	palette,
+	space,
+	textSans12,
+	textSans14,
+	textSans15,
+} from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
+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 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 DisclaimerText = () => (
+	<p>
+		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>
+		.
+	</p>
+);
+
+const affiliateDisclaimerId = 'affiliate-disclaimer';
+
+const AffiliateDisclaimer = () => (
+	<Hide until="leftCol">
+		<aside
+			css={[disclaimerLeftColStyles]}
+			data-testid={affiliateDisclaimerId}
+			data-component={affiliateDisclaimerId}
+		>
+			<DisclaimerText />
+		</aside>
+	</Hide>
+);
+
+const affiliateDisclaimerInlineId = 'affiliate-disclaimer-inline';
+
+const AffiliateDisclaimerInline = () => (
+	<Hide from="leftCol">
+		<aside
+			css={[disclaimerInlineStyles]}
+			data-testid={affiliateDisclaimerInlineId}
+			data-component={affiliateDisclaimerInlineId}
+		>
+			<DisclaimerText />
+		</aside>
+	</Hide>
+);
+
+const affiliateDisclaimerGalleryId = 'affiliate-disclaimer-gallery';
+
+const AffiliateDisclaimerGallery = () => (
+	<aside
+		css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
+		data-testid={affiliateDisclaimerGalleryId}
+		data-component={affiliateDisclaimerGalleryId}
+	>
+		<DisclaimerText />
+	</aside>
+);
+
+export {
+	AffiliateDisclaimer,
+	AffiliateDisclaimerInline,
+	AffiliateDisclaimerGallery,
+};

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 { AffiliateDisclaimerLeftCol } from '../components/AffiliateDisclaimerLeftCol.importable';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
 import { ArticleHeadline } from '../components/ArticleHeadline';
@@ -272,12 +272,7 @@ export const AudioLayout = (props: WebProps) => {
 									}
 								/>
 								{!!article.affiliateLinksDisclaimer && (
-									<Island
-										priority="enhancement"
-										defer={{ until: 'idle' }}
-									>
-										<AffiliateDisclaimerLeftCol />
-									</Island>
+									<AffiliateDisclaimer />
 								)}
 							</div>
 						</GridItem>

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -9,6 +9,7 @@ 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 { AffiliateDisclaimerGallery } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
@@ -19,7 +20,6 @@ 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,9 +496,7 @@ const Meta = ({
 			/>
 		) : null}
 		{!!frontendData.affiliateLinksDisclaimer && (
-			<Island priority="enhancement" defer={{ until: 'idle' }}>
-				<GalleryAffiliateDisclaimer />
-			</Island>
+			<AffiliateDisclaimerGallery />
 		)}
 	</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 { AffiliateDisclaimerLeftCol } from '../components/AffiliateDisclaimerLeftCol.importable';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -633,12 +633,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 												}
 											/>
 											{!!article.affiliateLinksDisclaimer && (
-												<Island
-													priority="enhancement"
-													defer={{ until: 'idle' }}
-												>
-													<AffiliateDisclaimerLeftCol />
-												</Island>
+												<AffiliateDisclaimer />
 											)}
 										</Hide>
 									</>
@@ -668,12 +663,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 											}
 										/>
 										{!!article.affiliateLinksDisclaimer && (
-											<Island
-												priority="enhancement"
-												defer={{ until: 'idle' }}
-											>
-												<AffiliateDisclaimerLeftCol />
-											</Island>
+											<AffiliateDisclaimer />
 										)}
 									</>
 								)}

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -10,7 +10,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 { AffiliateDisclaimerLeftCol } from '../components/AffiliateDisclaimerLeftCol.importable';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -511,12 +511,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 												}
 											/>
 											{!!article.affiliateLinksDisclaimer && (
-												<Island
-													priority="enhancement"
-													defer={{ until: 'idle' }}
-												>
-													<AffiliateDisclaimerLeftCol />
-												</Island>
+												<AffiliateDisclaimer />
 											)}
 										</Hide>
 									</>
@@ -546,12 +541,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 											}
 										/>
 										{!!article.affiliateLinksDisclaimer && (
-											<Island
-												priority="enhancement"
-												defer={{ until: 'idle' }}
-											>
-												<AffiliateDisclaimerLeftCol />
-											</Island>
+											<AffiliateDisclaimer />
 										)}
 									</>
 								)}