Skip to content

Commit b02fcd1

Browse files
marjisoundmarjisound
committed
add affiliate link disclaimer to web galleries
1 parent 52278ca commit b02fcd1

File tree

4 files changed

+108
-28
lines changed

4 files changed

+108
-28
lines changed

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

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { css } from '@emotion/react';
22
import {
3+
from,
34
palette,
45
space,
6+
textSans12,
57
textSans14,
68
textSans15,
79
} from '@guardian/source/foundations';
810
import { Hide } from '@guardian/source/react-components';
11+
import { grid } from '../grid';
912
import { palette as themePalette } from '../palette';
1013

1114
const disclaimerLeftColStyles = css`
@@ -20,6 +23,37 @@ const disclaimerLeftColStyles = css`
2023
padding-bottom: ${space[1]}px;
2124
`;
2225

26+
const galleryDisclaimerStyles = css`
27+
${textSans12};
28+
line-height: 1.5;
29+
${grid.column.centre}
30+
padding-bottom: ${space[6]}px;
31+
color: ${themePalette('--affiliate-disclaimer-text')};
32+
${from.tablet} {
33+
position: relative;
34+
&::before {
35+
content: '';
36+
position: absolute;
37+
left: -10px;
38+
top: 0;
39+
bottom: 0;
40+
width: 1px;
41+
background-color: ${themePalette('--article-border')};
42+
}
43+
}
44+
a {
45+
color: ${themePalette('--affiliate-disclaimer-text')};
46+
transition: border-color 0.15s ease-out;
47+
border-bottom: 1px solid #707070;
48+
text-decoration: none;
49+
}
50+
a:hover {
51+
border-bottom: 1px solid
52+
${themePalette('--affiliate-disclaimer-text-hover')};
53+
text-decoration: none;
54+
}
55+
`;
56+
2357
const disclaimerInlineStyles = css`
2458
${textSans14};
2559
/**
@@ -64,8 +98,9 @@ const DisclaimerText = () => (
6498
The Guardian’s journalism is independent. We will earn a commission if
6599
you buy something through an affiliate link. 
66100
<a href="https://www.theguardian.com/info/2017/nov/01/reader-information-on-affiliate-links">
67-
Learn more.
101+
Learn more
68102
</a>
103+
.
69104
</p>
70105
);
71106

@@ -99,4 +134,17 @@ const AffiliateDisclaimerInline = ({ isAmp = false }) =>
99134
</Hide>
100135
);
101136

102-
export { AffiliateDisclaimer, AffiliateDisclaimerInline };
137+
const GalleryAffiliateDisclaimer = () => (
138+
<aside
139+
css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
140+
data-testid="affiliate-disclaimer"
141+
>
142+
<DisclaimerText />
143+
</aside>
144+
);
145+
146+
export {
147+
AffiliateDisclaimer,
148+
AffiliateDisclaimerInline,
149+
GalleryAffiliateDisclaimer,
150+
};

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ export default meta;
1616

1717
type Story = StoryObj<typeof meta>;
1818

19-
const addBranding = (gallery: Gallery): Gallery => ({
19+
const addBrandingAndAffiliateDisclaimer = (gallery: Gallery): Gallery => ({
2020
...gallery,
2121
frontendData: {
2222
...gallery.frontendData,
23+
affiliateLinksDisclaimer: 'true',
2324
webPublicationDateDeprecated: '2020-03-28T07:27:19.000Z',
2425
commercialProperties: {
2526
...gallery.frontendData.commercialProperties,
@@ -40,7 +41,7 @@ if (appsArticle.design !== ArticleDesign.Gallery) {
4041
export const Apps = {
4142
args: {
4243
renderingTarget: 'Apps',
43-
gallery: addBranding(appsArticle),
44+
gallery: addBrandingAndAffiliateDisclaimer(appsArticle),
4445
},
4546
parameters: {
4647
formats: [
@@ -69,7 +70,7 @@ export const Web = {
6970
...extractNAV(webArticle.frontendData.nav),
7071
selectedPillar: getCurrentPillar(webArticle.frontendData),
7172
},
72-
gallery: addBranding(webArticle),
73+
gallery: addBrandingAndAffiliateDisclaimer(webArticle),
7374
},
7475
parameters: {
7576
formats: [

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

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { css } from '@emotion/react';
22
import { from, palette as sourcePalette } from '@guardian/source/foundations';
3+
import { GalleryAffiliateDisclaimer } from '../components/AffiliateDisclaimer';
34
import { AppsFooter } from '../components/AppsFooter.importable';
45
import { ArticleHeadline } from '../components/ArticleHeadline';
56
import { ArticleMetaApps } from '../components/ArticleMeta.apps';
@@ -123,30 +124,36 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
123124
isMainMedia={true}
124125
/>
125126
{isWeb ? (
126-
<ArticleMeta
127-
branding={
128-
frontendData.commercialProperties[
129-
frontendData.editionId
130-
].branding
131-
}
132-
format={format}
133-
pageId={frontendData.pageId}
134-
webTitle={frontendData.webTitle}
135-
byline={frontendData.byline}
136-
tags={frontendData.tags}
137-
primaryDateline={
138-
frontendData.webPublicationDateDisplay
139-
}
140-
secondaryDateline={
141-
frontendData.webPublicationSecondaryDateDisplay
142-
}
143-
isCommentable={frontendData.isCommentable}
144-
discussionApiUrl={
145-
frontendData.config.discussionApiUrl
146-
}
147-
shortUrlId={frontendData.config.shortUrlId}
148-
/>
127+
<>
128+
<ArticleMeta
129+
branding={
130+
frontendData.commercialProperties[
131+
frontendData.editionId
132+
].branding
133+
}
134+
format={format}
135+
pageId={frontendData.pageId}
136+
webTitle={frontendData.webTitle}
137+
byline={frontendData.byline}
138+
tags={frontendData.tags}
139+
primaryDateline={
140+
frontendData.webPublicationDateDisplay
141+
}
142+
secondaryDateline={
143+
frontendData.webPublicationSecondaryDateDisplay
144+
}
145+
isCommentable={frontendData.isCommentable}
146+
discussionApiUrl={
147+
frontendData.config.discussionApiUrl
148+
}
149+
shortUrlId={frontendData.config.shortUrlId}
150+
/>
151+
{!!frontendData.affiliateLinksDisclaimer && (
152+
<GalleryAffiliateDisclaimer />
153+
)}
154+
</>
149155
) : null}
156+
150157
{isApps ? (
151158
<ArticleMetaApps
152159
branding={

‎dotcom-rendering/src/paletteDeclarations.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4659,6 +4659,22 @@ const affiliateDisclaimerBackgroundHoverLight: PaletteFunction = ({
46594659
const affiliateDisclaimerBackgroundHoverDark: PaletteFunction = () =>
46604660
sourcePalette.neutral[10];
46614661

4662+
const affiliateDisclaimerTextLight: PaletteFunction = () => {
4663+
return sourcePalette.neutral[86];
4664+
};
4665+
4666+
const affiliateDisclaimerTextDark: PaletteFunction = () => {
4667+
return sourcePalette.neutral[73];
4668+
};
4669+
4670+
const affiliateDisclaimerTextHoverLight: PaletteFunction = () => {
4671+
return sourcePalette.neutral[73];
4672+
};
4673+
4674+
const affiliateDisclaimerTextHoverDark: PaletteFunction = () => {
4675+
return sourcePalette.neutral[86];
4676+
};
4677+
46624678
const seriesTitleBackgroundLight: PaletteFunction = ({
46634679
theme,
46644680
display,
@@ -6104,6 +6120,14 @@ const paletteColours = {
61046120
light: affiliateDisclaimerBackgroundHoverLight,
61056121
dark: affiliateDisclaimerBackgroundHoverDark,
61066122
},
6123+
'--affiliate-disclaimer-text': {
6124+
light: affiliateDisclaimerTextLight,
6125+
dark: affiliateDisclaimerTextDark,
6126+
},
6127+
'--affiliate-disclaimer-text-hover': {
6128+
light: affiliateDisclaimerTextHoverLight,
6129+
dark: affiliateDisclaimerTextHoverDark,
6130+
},
61076131
'--age-warning-background': {
61086132
light: ageWarningBackgroundLight,
61096133
dark: ageWarningBackgroundDark,

0 commit comments

Comments
 (0)