Affiliate disclaimer component update

dotcom-rendering/package.json

@@ -43,7 +43,7 @@
 		"@guardian/react-crossword": "19.0.1",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "12.2.1",
-		"@guardian/source-development-kitchen": "28.1.0",
+		"@guardian/source-development-kitchen": "29.1.0",
 		"@guardian/support-dotcom-components": "11.0.0",
 		"@guardian/tsconfig": "catalog:",
 		"@playwright/test": "1.60.0",

dotcom-rendering/src/components/AffiliateDisclaimer.tsx

@@ -1,71 +1,16 @@
-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>
+import type { SerializedStyles } from '@emotion/react';
+import { Disclaimer } from '@guardian/source-development-kitchen/react-components';
+import { palette } from '../palette';
+
+const AffiliateDisclaimerText = () => (
+	<p
+		style={{
+			marginInline: 'auto',
+			marginTop: 0,
+			marginBottom: 0,
+			width: 'fit-content',
+		}}
+	>
 		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">
@@ -76,47 +21,23 @@ const DisclaimerText = () => (
 );
 
 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}
+const AffiliateDisclaimer = ({
+	cssOverrides,
+}: {
+	cssOverrides?: SerializedStyles;
+}) => (
+	<Disclaimer
+		theme={{
+			backgroundPrimary: palette('--affiliate-disclaimer-background'),
+			textPrimary: palette('--affiliate-disclaimer-text'),
+			linkPrimary: palette('--article-section-title-lifestyle'),
+		}}
+		cssOverrides={cssOverrides}
+		data-testid={affiliateDisclaimerId}
+		data-component={affiliateDisclaimerId}
 	>
-		<DisclaimerText />
-	</aside>
+		<AffiliateDisclaimerText />
+	</Disclaimer>
 );
 
-export {
-	AffiliateDisclaimer,
-	AffiliateDisclaimerInline,
-	AffiliateDisclaimerGallery,
-};
+export { AffiliateDisclaimer };

dotcom-rendering/src/layouts/CommentLayout.tsx

@@ -2,11 +2,13 @@ import { css } from '@emotion/react';
 import {
 	from,
 	palette as sourcePalette,
+	space,
 	until,
 } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { AdPortals } from '../components/AdPortals.island';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.island';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -43,6 +45,7 @@ import { getSoleContributor } from '../lib/byline';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
+import { requiresAffiliateDisclaimer } from '../lib/requiresAffiliateDisclaimer';
 import { parse } from '../lib/slot-machine-flags';
 import { worldCupTagId } from '../lib/worldCup2026';
 import type { NavType } from '../model/extract-nav';
@@ -381,6 +384,15 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 									editionId={article.editionId}
 									shouldHideAds={article.shouldHideAds}
 								/>
+								{requiresAffiliateDisclaimer(
+									article.affiliateLinksDisclaimer,
+								) && (
+									<AffiliateDisclaimer
+										cssOverrides={css`
+											margin: ${space[4]}px 0;
+										`}
+									/>
+								)}
 							</div>
 						</GridItem>
 						<GridItem area="title" element="aside">

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -5,6 +5,7 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { Footer } from '../components/Footer';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
 import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island';
@@ -21,6 +22,7 @@ import type { EditionId } from '../lib/edition';
 import { getZIndex } from '../lib/getZIndex';
 import { decideLanguage, decideLanguageDirection } from '../lib/lang';
 import { renderElement } from '../lib/renderElement';
+import { requiresAffiliateDisclaimer } from '../lib/requiresAffiliateDisclaimer';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { ArticleDeprecated } from '../types/article';
@@ -182,6 +184,9 @@ const NavHeader = ({ article, NAV, renderAds }: HeaderProps) => {
 				sectionId={article.config.section}
 				contentType={article.contentType}
 			/>
+			{requiresAffiliateDisclaimer(article.affiliateLinksDisclaimer) && (
+				<AffiliateDisclaimer />
+			)}
 		</section>
 	);
 };

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
 import { AdPlaceholder } from '../components/AdPlaceholder.apps';
 import { AdPortals } from '../components/AdPortals.island';
 import { AdSlot } from '../components/AdSlot.web';
-import { AffiliateDisclaimerGallery } from '../components/AffiliateDisclaimer';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.island';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
@@ -513,7 +513,11 @@ const Meta = ({
 			/>
 		) : null}
 		{!!frontendData.affiliateLinksDisclaimer && (
-			<AffiliateDisclaimerGallery />
+			<AffiliateDisclaimer
+				cssOverrides={css`
+					margin-top: ${space[4]}px;
+				`}
+			/>
 		)}
 	</div>
 );

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

@@ -54,6 +54,7 @@ import { decideMainMediaCaption } from '../lib/decide-caption';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
 import { getZIndex } from '../lib/getZIndex';
 import { LABS_HEADER_HEIGHT } from '../lib/labs-constants';
+import { requiresAffiliateDisclaimer } from '../lib/requiresAffiliateDisclaimer';
 import { parse } from '../lib/slot-machine-flags';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
@@ -529,6 +530,18 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 									byline={article.byline}
 								/>
 							)}
+							{requiresAffiliateDisclaimer(
+								article.affiliateLinksDisclaimer,
+							) && (
+								<Hide when="below" breakpoint="leftCol">
+									<AffiliateDisclaimer
+										cssOverrides={css`
+											margin: ${space[4]}px 0
+												${space[1]}px 0;
+										`}
+									/>
+								</Hide>
+							)}
 							{/* Only show Listen to Article button on App landscape views */}
 							{isApps && (
 								<Hide when="below" breakpoint="leftCol">
@@ -623,9 +636,6 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 													article.config.shortUrlId
 												}
 											/>
-											{!!article.affiliateLinksDisclaimer && (
-												<AffiliateDisclaimer />
-											)}
 										</Hide>
 									</>
 								) : (
@@ -653,11 +663,20 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 												article.config.shortUrlId
 											}
 										/>
-										{!!article.affiliateLinksDisclaimer && (
-											<AffiliateDisclaimer />
-										)}
 									</>
 								)}
+								{requiresAffiliateDisclaimer(
+									article.affiliateLinksDisclaimer,
+								) && (
+									<Hide when="above" breakpoint="leftCol">
+										<AffiliateDisclaimer
+											cssOverrides={css`
+												margin: ${space[4]}px 0
+													${space[1]}px 0;
+											`}
+										/>
+									</Hide>
+								)}
 							</div>
 						</GridItem>
 						<GridItem area="body">

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -2,12 +2,14 @@ import { css, Global } from '@emotion/react';
 import {
 	from,
 	palette as sourcePalette,
+	space,
 	until,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type React from 'react';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.island';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -43,6 +45,7 @@ import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
+import { requiresAffiliateDisclaimer } from '../lib/requiresAffiliateDisclaimer';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
 import type { ArticleDeprecated } from '../types/article';
@@ -485,6 +488,17 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 									)}
 								</div>
 							</GridItem>
+							{requiresAffiliateDisclaimer(
+								article.affiliateLinksDisclaimer,
+							) && (
+								<GridItem area="meta" element="aside">
+									<AffiliateDisclaimer
+										cssOverrides={css`
+											margin-top: ${space[4]}px;
+										`}
+									/>
+								</GridItem>
+							)}
 							<GridItem area="body" element="article">
 								<ArticleContainer format={format}>
 									<ArticleBody

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -10,6 +10,7 @@ import { StraightLines } from '@guardian/source-development-kitchen/react-compon
 import { RightAdsPlaceholder } from '../components/AdPlaceholder.apps';
 import { AdPortals } from '../components/AdPortals.island';
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
+import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.island';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
@@ -51,6 +52,7 @@ import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
 import { getZIndex } from '../lib/getZIndex';
+import { requiresAffiliateDisclaimer } from '../lib/requiresAffiliateDisclaimer';
 import { worldCupTagId } from '../lib/worldCup2026';
 import type { NavType } from '../model/extract-nav';
 import { palette as themePalette } from '../palette';
@@ -605,6 +607,15 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 											}
 											contentLayout="LiveblogLayout"
 										/>
+										{requiresAffiliateDisclaimer(
+											article.affiliateLinksDisclaimer,
+										) && (
+											<AffiliateDisclaimer
+												cssOverrides={css`
+													margin: ${space[4]}px 0;
+												`}
+											/>
+										)}
 									</div>
 								</GridItem>
 								<GridItem area="info" element="aside">