Skip to content

Commit 72bb1ce

Browse files
author
George Haberis
committed
split Affiliate Disclaimer components into their own modules
1 parent 1c373fe commit 72bb1ce

File tree

5 files changed

+164
-84
lines changed

5 files changed

+164
-84
lines changed

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

Lines changed: 3 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
import { css } from '@emotion/react';
2-
import {
3-
palette,
4-
space,
5-
textSans12,
6-
textSans14,
7-
textSans15,
8-
} from '@guardian/source/foundations';
2+
import { space, textSans15 } from '@guardian/source/foundations';
93
import { Hide } from '@guardian/source/react-components';
104
import { useEffect } from 'react';
115
import { submitComponentEvent } from '../client/ophan/ophan';
12-
import { palette as themePalette } from '../palette';
136

147
const disclaimerLeftColStyles = css`
158
${textSans15};
@@ -23,49 +16,6 @@ const disclaimerLeftColStyles = css`
2316
padding-bottom: ${space[1]}px;
2417
`;
2518

26-
const galleryDisclaimerStyles = css`
27-
${textSans12};
28-
line-height: 1.5;
29-
color: ${themePalette('--affiliate-disclaimer-text')};
30-
a {
31-
color: ${themePalette('--affiliate-disclaimer-text')};
32-
transition: border-color 0.15s ease-out;
33-
border-bottom: 1px solid ${palette.neutral[46]};
34-
text-decoration: none;
35-
}
36-
a:hover {
37-
border-bottom: 1px solid
38-
${themePalette('--affiliate-disclaimer-text-hover')};
39-
text-decoration: none;
40-
}
41-
`;
42-
43-
const disclaimerInlineStyles = css`
44-
${textSans14};
45-
/**
46-
* Typography preset styles should not be overridden.
47-
* This has been done because the styles do not directly map to the new presets.
48-
* Please speak to your team's designer and update this to use a more appropriate preset.
49-
*/
50-
line-height: 1.15;
51-
float: left;
52-
clear: left;
53-
width: 8.75rem;
54-
background-color: ${themePalette('--affiliate-disclaimer-background')};
55-
:hover {
56-
background-color: ${themePalette(
57-
'--affiliate-disclaimer-background-hover',
58-
)};
59-
}
60-
margin-top: ${space[1]}px;
61-
margin-right: ${space[5]}px;
62-
margin-bottom: ${space[1]}px;
63-
padding-top: ${space[0]}px;
64-
padding-right: 5px;
65-
padding-left: 5px;
66-
padding-bottom: ${space[3]}px;
67-
`;
68-
6919
const DisclaimerText = () => (
7020
<p>
7121
The Guardian’s journalism is independent. We will earn a commission if
@@ -79,6 +29,7 @@ const DisclaimerText = () => (
7929

8030
const useAffiliateDisclaimerEvent = () => {
8131
useEffect(() => {
32+
console.log('*** useAffiliateDisclaimerEvent AffiliateDisclaimer ***');
8233
void submitComponentEvent(
8334
{
8435
action: 'DETECT',
@@ -105,34 +56,4 @@ const AffiliateDisclaimer = () => {
10556
);
10657
};
10758

108-
const AffiliateDisclaimerInline = () => {
109-
useAffiliateDisclaimerEvent();
110-
return (
111-
<Hide from="leftCol">
112-
<aside
113-
css={[disclaimerInlineStyles]}
114-
data-testid="affiliate-disclaimer-inline"
115-
>
116-
<DisclaimerText />
117-
</aside>
118-
</Hide>
119-
);
120-
};
121-
122-
const GalleryAffiliateDisclaimer = () => {
123-
useAffiliateDisclaimerEvent();
124-
return (
125-
<aside
126-
css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
127-
data-testid="affiliate-disclaimer"
128-
>
129-
<DisclaimerText />
130-
</aside>
131-
);
132-
};
133-
134-
export {
135-
AffiliateDisclaimer,
136-
AffiliateDisclaimerInline,
137-
GalleryAffiliateDisclaimer,
138-
};
59+
export { AffiliateDisclaimer };

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { css } from '@emotion/react';
2+
import { space, textSans14 } from '@guardian/source/foundations';
3+
import { Hide } from '@guardian/source/react-components';
4+
import { useEffect } from 'react';
5+
import { submitComponentEvent } from '../client/ophan/ophan';
6+
import { palette as themePalette } from '../palette';
7+
8+
const disclaimerInlineStyles = css`
9+
${textSans14};
10+
/**
11+
* Typography preset styles should not be overridden.
12+
* This has been done because the styles do not directly map to the new presets.
13+
* Please speak to your team's designer and update this to use a more appropriate preset.
14+
*/
15+
line-height: 1.15;
16+
float: left;
17+
clear: left;
18+
width: 8.75rem;
19+
background-color: ${themePalette('--affiliate-disclaimer-background')};
20+
:hover {
21+
background-color: ${themePalette(
22+
'--affiliate-disclaimer-background-hover',
23+
)};
24+
}
25+
margin-top: ${space[1]}px;
26+
margin-right: ${space[5]}px;
27+
margin-bottom: ${space[1]}px;
28+
padding-top: ${space[0]}px;
29+
padding-right: 5px;
30+
padding-left: 5px;
31+
padding-bottom: ${space[3]}px;
32+
`;
33+
34+
const DisclaimerText = () => (
35+
<p>
36+
The Guardian’s journalism is independent. We will earn a commission if
37+
you buy something through an affiliate link.&nbsp;
38+
<a href="https://www.theguardian.com/info/2017/nov/01/reader-information-on-affiliate-links">
39+
Learn more
40+
</a>
41+
.
42+
</p>
43+
);
44+
45+
const useAffiliateDisclaimerEvent = () => {
46+
useEffect(() => {
47+
console.log(
48+
'*** useAffiliateDisclaimerEvent AffiliateDisclaimerInline ***',
49+
);
50+
51+
void submitComponentEvent(
52+
{
53+
action: 'DETECT',
54+
component: {
55+
componentType: 'AFFILIATE_DISCLAIMER',
56+
},
57+
},
58+
'Web',
59+
);
60+
}, []);
61+
};
62+
63+
const AffiliateDisclaimerInline = () => {
64+
useAffiliateDisclaimerEvent();
65+
return (
66+
<Hide from="leftCol">
67+
<aside
68+
css={[disclaimerInlineStyles]}
69+
data-testid="affiliate-disclaimer-inline"
70+
>
71+
<DisclaimerText />
72+
</aside>
73+
</Hide>
74+
);
75+
};
76+
77+
export { AffiliateDisclaimerInline };

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { css } from '@emotion/react';
2+
import {
3+
palette,
4+
space,
5+
textSans12,
6+
textSans15,
7+
} from '@guardian/source/foundations';
8+
import { useEffect } from 'react';
9+
import { submitComponentEvent } from '../client/ophan/ophan';
10+
import { palette as themePalette } from '../palette';
11+
12+
const disclaimerLeftColStyles = css`
13+
${textSans15};
14+
/**
15+
* Typography preset styles should not be overridden.
16+
* This has been done because the styles do not directly map to the new presets.
17+
* Please speak to your team's designer and update this to use a more appropriate preset.
18+
*/
19+
line-height: 1.15;
20+
padding-top: ${space[1]}px;
21+
padding-bottom: ${space[1]}px;
22+
`;
23+
24+
const galleryDisclaimerStyles = css`
25+
${textSans12};
26+
line-height: 1.5;
27+
color: ${themePalette('--affiliate-disclaimer-text')};
28+
a {
29+
color: ${themePalette('--affiliate-disclaimer-text')};
30+
transition: border-color 0.15s ease-out;
31+
border-bottom: 1px solid ${palette.neutral[46]};
32+
text-decoration: none;
33+
}
34+
a:hover {
35+
border-bottom: 1px solid
36+
${themePalette('--affiliate-disclaimer-text-hover')};
37+
text-decoration: none;
38+
}
39+
`;
40+
41+
const DisclaimerText = () => (
42+
<p>
43+
The Guardian’s journalism is independent. We will earn a commission if
44+
you buy something through an affiliate link.&nbsp;
45+
<a href="https://www.theguardian.com/info/2017/nov/01/reader-information-on-affiliate-links">
46+
Learn more
47+
</a>
48+
.
49+
</p>
50+
);
51+
52+
const useAffiliateDisclaimerEvent = () => {
53+
useEffect(() => {
54+
console.log(
55+
'*** useAffiliateDisclaimerEvent GalleryAffiliateDisclaimer ***',
56+
);
57+
58+
void submitComponentEvent(
59+
{
60+
action: 'DETECT',
61+
component: {
62+
componentType: 'AFFILIATE_DISCLAIMER',
63+
},
64+
},
65+
'Web',
66+
);
67+
}, []);
68+
};
69+
70+
const GalleryAffiliateDisclaimer = () => {
71+
useAffiliateDisclaimerEvent();
72+
return (
73+
<aside
74+
css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
75+
data-testid="affiliate-disclaimer"
76+
>
77+
<DisclaimerText />
78+
</aside>
79+
);
80+
};
81+
82+
export { GalleryAffiliateDisclaimer };

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
99
import { AdPlaceholder } from '../components/AdPlaceholder.apps';
1010
import { AdPortals } from '../components/AdPortals.importable';
1111
import { AdSlot } from '../components/AdSlot.web';
12-
import { GalleryAffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
12+
import { GalleryAffiliateDisclaimer } from '../components/GalleryAffiliateDisclaimer.importable';
1313
import { AppsFooter } from '../components/AppsFooter.importable';
1414
import { ArticleHeadline } from '../components/ArticleHeadline';
1515
import { ArticleMetaApps } from '../components/ArticleMeta.apps';

‎dotcom-rendering/src/lib/renderElement.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AdPlaceholder } from '../components/AdPlaceholder.apps';
2-
import { AffiliateDisclaimerInline } from '../components/AffiliateDisclaimer.importable';
2+
import { AffiliateDisclaimerInline } from '../components/AffiliateDisclaimerInline.importable';
33
import { AudioAtomWrapper } from '../components/AudioAtomWrapper.importable';
44
import { BlockquoteBlockComponent } from '../components/BlockquoteBlockComponent';
55
import { CalloutBlockComponent } from '../components/CalloutBlockComponent.importable';

0 commit comments

Comments
 (0)