Merge pull request #14303 from guardian/add-gallery-affiliate-link-disclaimer

Add gallery affiliate link disclaimer

Author: marjisound

dotcom-rendering/src/components/AffiliateDisclaimer.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import {
 	palette,
 	space,
+	textSans12,
 	textSans14,
 	textSans15,
 } from '@guardian/source/foundations';
@@ -20,6 +21,23 @@ const disclaimerLeftColStyles = css`
 	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};
 	/**
@@ -64,8 +82,9 @@ const DisclaimerText = () => (
 		The Guardian’s journalism is independent. We will earn a commission if
 		you buy something through an affiliate link. 
 		<a href="https://www.theguardian.com/info/2017/nov/01/reader-information-on-affiliate-links">
-			Learn more.
+			Learn more
 		</a>
+		.
 	</p>
 );
 
@@ -99,4 +118,17 @@ const AffiliateDisclaimerInline = ({ isAmp = false }) =>
 		</Hide>
 	);
 
-export { AffiliateDisclaimer, AffiliateDisclaimerInline };
+const GalleryAffiliateDisclaimer = () => (
+	<aside
+		css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
+		data-testid="affiliate-disclaimer"
+	>
+		<DisclaimerText />
+	</aside>
+);
+
+export {
+	AffiliateDisclaimer,
+	AffiliateDisclaimerInline,
+	GalleryAffiliateDisclaimer,
+};

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
-import { grid } from '../../src/grid';
 import type { FEArticle } from '../frontend/feArticle';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
@@ -184,28 +183,11 @@ export const metaContainer = (format: ArticleFormat) => {
 								}
 						  `;
 				case ArticleDesign.LiveBlog:
-				case ArticleDesign.DeadBlog: {
+				case ArticleDesign.DeadBlog:
+				case ArticleDesign.Gallery: {
 					return '';
 				}
-				case ArticleDesign.Gallery:
-					return css`
-						${grid.column.centre}
-						padding-bottom: ${space[3]}px;
-						${from.tablet} {
-							position: relative;
-							&::before {
-								content: '';
-								position: absolute;
-								left: -10px;
-								top: 0;
-								bottom: 0;
-								width: 1px;
-								background-color: ${themePalette(
-									'--article-border',
-								)};
-							}
-						}
-					`;
+
 				default:
 					return defaultMargins;
 			}

dotcom-rendering/src/components/Caption.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import {
+	between,
 	from,
 	space,
 	textSans12,
@@ -211,10 +212,24 @@ const captionLink = css`
 
 const galleryStyles = css`
 	${grid.column.centre}
+	margin-bottom: 0;
+	padding-bottom: 6px;
 	${from.leftCol} {
 		${grid.column.left}
 		grid-row-start: 8;
 	}
+	${between.tablet.and.leftCol} {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			left: -10px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${palette('--article-border')};
+		}
+	}
 `;
 
 const CameraIcon = ({ format }: IconProps) => {

dotcom-rendering/src/components/CaptionText.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { headlineMedium17, space } from '@guardian/source/foundations';
 import { type ReactNode } from 'react';
 import sanitise, { type IOptions } from 'sanitize-html';
+import { isSkimlink } from '../lib/affiliateLinksUtils';
 import { getAttrs, parseHtml } from '../lib/domUtils';
 import { palette } from '../palette';
 
@@ -38,6 +39,7 @@ const renderTextElement = (node: Node, key: number): ReactNode => {
 			return text === '' ? null : <em key={key}>{children}</em>;
 		case 'A': {
 			const attrs = getAttrs(node);
+			const href = attrs?.getNamedItem('href')?.value;
 
 			return (
 				<a
@@ -51,7 +53,7 @@ const renderTextElement = (node: Node, key: number): ReactNode => {
 								${palette('--article-link-border-hover')};
 						}
 					`}
-					href={attrs?.getNamedItem('href')?.value}
+					href={href}
 					target={attrs?.getNamedItem('target')?.value}
 					data-link-name={
 						attrs?.getNamedItem('data-link-name')?.value
@@ -60,6 +62,11 @@ const renderTextElement = (node: Node, key: number): ReactNode => {
 						attrs?.getNamedItem('data-component')?.value
 					}
 					key={key}
+					/**
+					 * Affiliate links must have the rel attribute set to "sponsored"
+					 * @see https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links
+					 */
+					rel={isSkimlink(href) ? 'sponsored' : undefined}
 				>
 					{children}
 				</a>

dotcom-rendering/src/components/GalleryCaption.tsx

@@ -21,6 +21,7 @@ const styles = css`
 	color: ${palette('--caption-text')};
 	${textSans12}
 	padding-bottom: ${space[6]}px;
+	padding-top: ${space[5]}px;
 
 	${between.tablet.and.desktop} {
 		padding-left: ${space[5]}px;
@@ -89,14 +90,20 @@ export const GalleryCaption = ({
 					{credit}
 				</small>
 			)}
-			<Island priority="feature" defer={{ until: 'visible' }}>
-				<ShareButton
-					format={format}
-					pageId={pageId}
-					webTitle={webTitle}
-					context="ImageCaption"
-				/>
-			</Island>
+			<div
+				css={css`
+					padding-top: ${space[2]}px;
+				`}
+			>
+				<Island priority="feature" defer={{ until: 'visible' }}>
+					<ShareButton
+						format={format}
+						pageId={pageId}
+						webTitle={webTitle}
+						context="ImageCaption"
+					/>
+				</Island>
+			</div>
 		</figcaption>
 	);
 };

dotcom-rendering/src/layouts/GalleryLayout.stories.tsx

@@ -16,10 +16,11 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const addBranding = (gallery: Gallery): Gallery => ({
+const addBrandingAndAffiliateDisclaimer = (gallery: Gallery): Gallery => ({
 	...gallery,
 	frontendData: {
 		...gallery.frontendData,
+		affiliateLinksDisclaimer: 'true',
 		webPublicationDateDeprecated: '2020-03-28T07:27:19.000Z',
 		commercialProperties: {
 			...gallery.frontendData.commercialProperties,
@@ -40,7 +41,7 @@ if (appsArticle.design !== ArticleDesign.Gallery) {
 export const Apps = {
 	args: {
 		renderingTarget: 'Apps',
-		gallery: addBranding(appsArticle),
+		gallery: addBrandingAndAffiliateDisclaimer(appsArticle),
 	},
 	parameters: {
 		formats: [
@@ -69,7 +70,7 @@ export const Web = {
 			...extractNAV(webArticle.frontendData.nav),
 			selectedPillar: getCurrentPillar(webArticle.frontendData),
 		},
-		gallery: addBranding(webArticle),
+		gallery: addBrandingAndAffiliateDisclaimer(webArticle),
 	},
 	parameters: {
 		formats: [

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -1,5 +1,10 @@
 import { css } from '@emotion/react';
-import { from, palette as sourcePalette } from '@guardian/source/foundations';
+import {
+	from,
+	palette as sourcePalette,
+	space,
+} from '@guardian/source/foundations';
+import { GalleryAffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
@@ -51,6 +56,23 @@ const headerStyles = css`
 	}
 `;
 
+const metaAndDisclaimerContainer = css`
+	${grid.column.centre}
+	padding-bottom: ${space[6]}px;
+	${from.tablet} {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			left: -10px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${palette('--article-border')};
+		}
+	}
+`;
+
 export const GalleryLayout = (props: WebProps | AppProps) => {
 	const gallery = props.gallery;
 	const frontendData = gallery.frontendData;
@@ -122,55 +144,61 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						format={format}
 						isMainMedia={true}
 					/>
-					{isWeb ? (
-						<ArticleMeta
-							branding={
-								frontendData.commercialProperties[
-									frontendData.editionId
-								].branding
-							}
-							format={format}
-							pageId={frontendData.pageId}
-							webTitle={frontendData.webTitle}
-							byline={frontendData.byline}
-							tags={frontendData.tags}
-							primaryDateline={
-								frontendData.webPublicationDateDisplay
-							}
-							secondaryDateline={
-								frontendData.webPublicationSecondaryDateDisplay
-							}
-							isCommentable={frontendData.isCommentable}
-							discussionApiUrl={
-								frontendData.config.discussionApiUrl
-							}
-							shortUrlId={frontendData.config.shortUrlId}
-						/>
-					) : null}
-					{isApps ? (
-						<ArticleMetaApps
-							branding={
-								frontendData.commercialProperties[
-									frontendData.editionId
-								].branding
-							}
-							format={format}
-							pageId={frontendData.pageId}
-							byline={frontendData.byline}
-							tags={frontendData.tags}
-							primaryDateline={
-								frontendData.webPublicationDateDisplay
-							}
-							secondaryDateline={
-								frontendData.webPublicationSecondaryDateDisplay
-							}
-							isCommentable={frontendData.isCommentable}
-							discussionApiUrl={
-								frontendData.config.discussionApiUrl
-							}
-							shortUrlId={frontendData.config.shortUrlId}
-						/>
-					) : null}
+					<div css={metaAndDisclaimerContainer}>
+						{isWeb ? (
+							<ArticleMeta
+								branding={
+									frontendData.commercialProperties[
+										frontendData.editionId
+									].branding
+								}
+								format={format}
+								pageId={frontendData.pageId}
+								webTitle={frontendData.webTitle}
+								byline={frontendData.byline}
+								tags={frontendData.tags}
+								primaryDateline={
+									frontendData.webPublicationDateDisplay
+								}
+								secondaryDateline={
+									frontendData.webPublicationSecondaryDateDisplay
+								}
+								isCommentable={frontendData.isCommentable}
+								discussionApiUrl={
+									frontendData.config.discussionApiUrl
+								}
+								shortUrlId={frontendData.config.shortUrlId}
+							/>
+						) : null}
+
+						{isApps ? (
+							<ArticleMetaApps
+								branding={
+									frontendData.commercialProperties[
+										frontendData.editionId
+									].branding
+								}
+								format={format}
+								pageId={frontendData.pageId}
+								byline={frontendData.byline}
+								tags={frontendData.tags}
+								primaryDateline={
+									frontendData.webPublicationDateDisplay
+								}
+								secondaryDateline={
+									frontendData.webPublicationSecondaryDateDisplay
+								}
+								isCommentable={frontendData.isCommentable}
+								discussionApiUrl={
+									frontendData.config.discussionApiUrl
+								}
+								shortUrlId={frontendData.config.shortUrlId}
+							/>
+						) : null}
+						{!!frontendData.affiliateLinksDisclaimer && (
+							<GalleryAffiliateDisclaimer />
+						)}
+					</div>
 				</header>
 				{gallery.images.map((element, idx) => (
 					<GalleryImage