Skip to content

Commit eb91e8e

Browse files
cemms1cemms1
authored
Ensure apps articles respect shouldHideAds property (#14168)
* allows `renderAds` to be used with apps renderingTarget * ensures `<AdPortals>` and `<AdPlaceholder>` elements are only rendered if `renderAds` is truthy * includes shouldHideAds in article body ad rendering decisions
1 parent f282a60 commit eb91e8e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+278
-152
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ type Props = {
5353
tableOfContents?: TableOfContentsItem[];
5454
lang?: string;
5555
isRightToLeftLang?: boolean;
56+
shouldHideAds: boolean;
5657
};
5758

5859
const globalOlStyles = () => css`
@@ -135,6 +136,7 @@ export const ArticleBody = ({
135136
lang,
136137
isRightToLeftLang = false,
137138
editionId,
139+
shouldHideAds,
138140
}: Props) => {
139141
const isInteractiveContent =
140142
format.design === ArticleDesign.Interactive ||
@@ -202,6 +204,7 @@ export const ArticleBody = ({
202204
filterKeyEvents={filterKeyEvents}
203205
keywordIds={keywordIds}
204206
editionId={editionId}
207+
shouldHideAds={shouldHideAds}
205208
/>
206209
</div>
207210
);
@@ -249,6 +252,7 @@ export const ArticleBody = ({
249252
abTests={abTests}
250253
editionId={editionId}
251254
contributionsServiceUrl={contributionsServiceUrl}
255+
shouldHideAds={shouldHideAds}
252256
/>
253257
</div>
254258
{hasObserverPublicationTag && <ObserverFooter />}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ interface KeyTakeawayProps {
4141
keyTakeaway: KeyTakeawayModel;
4242
titleIndex: number;
4343
RenderArticleElement: ArticleElementRenderer;
44+
shouldHideAds: boolean;
4445
}
4546

4647
export const KeyTakeaway = ({
@@ -58,6 +59,7 @@ export const KeyTakeaway = ({
5859
hideCaption,
5960
starRating,
6061
RenderArticleElement,
62+
shouldHideAds,
6163
}: KeyTakeawayProps) => {
6264
return (
6365
<>
@@ -92,6 +94,7 @@ export const KeyTakeaway = ({
9294
starRating={starRating}
9395
forceDropCap="off"
9496
isListElement={true}
97+
shouldHideAds={shouldHideAds}
9598
/>
9699
))}
97100
</li>

‎dotcom-rendering/src/components/KeyTakeaways.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export const ThemeVariations = {
6565
pageId: 'testID',
6666
switches: {},
6767
RenderArticleElement,
68+
shouldHideAds: false,
6869
},
6970
decorators: [centreColumnDecorator],
7071
parameters: {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface KeyTakeawaysProps {
2525
* Whether this is the last element in the article. If true, no separator will be rendered.
2626
*/
2727
isLastElement: boolean;
28+
shouldHideAds: boolean;
2829
}
2930

3031
const separatorStyles = css`
@@ -49,6 +50,7 @@ export const KeyTakeaways = ({
4950
starRating,
5051
RenderArticleElement,
5152
isLastElement,
53+
shouldHideAds,
5254
}: KeyTakeawaysProps) => {
5355
return (
5456
<ol data-ignore="global-ol-styling">
@@ -69,6 +71,7 @@ export const KeyTakeaways = ({
6971
starRating={starRating}
7072
key={index}
7173
RenderArticleElement={RenderArticleElement}
74+
shouldHideAds={shouldHideAds}
7275
/>
7376
))}
7477
{!isLastElement && <hr css={separatorStyles} />}

‎dotcom-rendering/src/components/LiveBlock.stories.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export const VideoAsSecond = () => {
8181
switches={{}}
8282
isPinnedPost={false}
8383
editionId={'UK'}
84+
shouldHideAds={false}
8485
/>
8586
</Wrapper>
8687
);
@@ -128,6 +129,7 @@ export const Title = () => {
128129
switches={{}}
129130
isPinnedPost={false}
130131
editionId={'UK'}
132+
shouldHideAds={false}
131133
/>
132134
</Wrapper>
133135
);
@@ -196,6 +198,7 @@ export const Video = () => {
196198
switches={{}}
197199
isPinnedPost={false}
198200
editionId={'UK'}
201+
shouldHideAds={false}
199202
/>
200203
</Wrapper>
201204
);
@@ -239,6 +242,7 @@ export const RichLink = () => {
239242
switches={{}}
240243
isPinnedPost={false}
241244
editionId={'UK'}
245+
shouldHideAds={false}
242246
/>
243247
</Wrapper>
244248
);
@@ -273,6 +277,7 @@ export const FirstImage = () => {
273277
switches={{}}
274278
isPinnedPost={false}
275279
editionId={'UK'}
280+
shouldHideAds={false}
276281
/>
277282
</Wrapper>
278283
);
@@ -333,6 +338,7 @@ export const ImageRoles = () => {
333338
isAdFreeUser={false}
334339
isSensitive={false}
335340
editionId={'UK'}
341+
shouldHideAds={false}
336342
/>
337343
</Wrapper>
338344
);
@@ -382,6 +388,7 @@ export const Thumbnail = () => {
382388
isAdFreeUser={false}
383389
isSensitive={false}
384390
editionId={'UK'}
391+
shouldHideAds={false}
385392
/>
386393
</Wrapper>
387394
);
@@ -417,6 +424,7 @@ export const ImageAndTitle = () => {
417424
switches={{}}
418425
isPinnedPost={false}
419426
editionId={'UK'}
427+
shouldHideAds={false}
420428
/>
421429
</Wrapper>
422430
);
@@ -448,6 +456,7 @@ export const Updated = () => {
448456
switches={{}}
449457
isPinnedPost={false}
450458
editionId={'UK'}
459+
shouldHideAds={false}
451460
/>
452461
</Wrapper>
453462
);
@@ -483,6 +492,7 @@ export const Contributor = () => {
483492
isAdFreeUser={false}
484493
isSensitive={false}
485494
editionId={'UK'}
495+
shouldHideAds={false}
486496
/>
487497
</Wrapper>
488498
);
@@ -516,6 +526,7 @@ export const NoAvatar = () => {
516526
isAdFreeUser={false}
517527
isSensitive={false}
518528
editionId={'UK'}
529+
shouldHideAds={false}
519530
/>
520531
</Wrapper>
521532
);
@@ -552,6 +563,7 @@ export const TitleAndContributor = () => {
552563
isAdFreeUser={false}
553564
isSensitive={false}
554565
editionId={'UK'}
566+
shouldHideAds={false}
555567
/>
556568
</Wrapper>
557569
);

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ type Props = {
2525
isPinnedPost: boolean;
2626
pinnedPostId?: string;
2727
editionId: EditionId;
28+
shouldHideAds: boolean;
2829
};
2930

3031
export const LiveBlock = ({
@@ -42,6 +43,7 @@ export const LiveBlock = ({
4243
isPinnedPost,
4344
pinnedPostId,
4445
editionId,
46+
shouldHideAds,
4547
}: Props) => {
4648
if (block.elements.length === 0) return null;
4749

@@ -86,6 +88,7 @@ export const LiveBlock = ({
8688
switches={switches}
8789
isPinnedPost={isPinnedPost}
8890
editionId={editionId}
91+
shouldHideAds={shouldHideAds}
8992
/>
9093
))}
9194
<footer

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ type Props = {
2323
isAdFreeUser: boolean;
2424
isSensitive: boolean;
2525
isLiveUpdate?: boolean;
26+
shouldHideAds: boolean;
2627
};
2728
/**
2829
* On liveblogs we insert two sets of ad slots into the page: one set for small
@@ -46,6 +47,7 @@ export const LiveBlogBlocksAndAdverts = ({
4647
isSensitive,
4748
isLiveUpdate,
4849
editionId,
50+
shouldHideAds,
4951
}: Props) => {
5052
const { renderingTarget } = useConfig();
5153
const isWeb = renderingTarget === 'Web';
@@ -63,16 +65,17 @@ export const LiveBlogBlocksAndAdverts = ({
6365
isLiveUpdate={isLiveUpdate}
6466
abTests={abTests}
6567
switches={switches}
66-
isAdFreeUser={!isAdFreeUser}
68+
isAdFreeUser={isAdFreeUser}
6769
isSensitive={isSensitive}
6870
isPinnedPost={false}
6971
pinnedPostId={pinnedPost?.id}
7072
editionId={editionId}
73+
shouldHideAds={shouldHideAds}
7174
/>
7275
);
7376
};
7477

75-
if (isAdFreeUser) {
78+
if (isAdFreeUser || shouldHideAds) {
7679
return (
7780
<>
7881
{blocks.map((block) => (

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ type Props = {
3737
onFirstPage: boolean;
3838
keyEvents: Block[];
3939
filterKeyEvents: boolean;
40+
shouldHideAds: boolean;
4041
};
4142

4243
export const LiveBlogRenderer = ({
@@ -62,6 +63,7 @@ export const LiveBlogRenderer = ({
6263
keyEvents,
6364
filterKeyEvents = false,
6465
editionId,
66+
shouldHideAds,
6567
}: Props) => {
6668
const { renderingTarget } = useConfig();
6769
const isWeb = renderingTarget === 'Web';
@@ -92,6 +94,7 @@ export const LiveBlogRenderer = ({
9294
isSensitive={isSensitive}
9395
isPinnedPost={true}
9496
editionId={editionId}
97+
shouldHideAds={shouldHideAds}
9598
/>
9699
</PinnedPost>
97100
</>
@@ -133,6 +136,7 @@ export const LiveBlogRenderer = ({
133136
isSensitive={isSensitive}
134137
pinnedPost={pinnedPost}
135138
editionId={editionId}
139+
shouldHideAds={shouldHideAds}
136140
/>
137141
{isWeb && blocks.length > 4 && (
138142
<Island

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ type Props = {
8787
abTests: ServerSideTests;
8888
switches: Switches;
8989
editionId: EditionId;
90+
shouldHideAds: boolean;
9091
};
9192

9293
export const MainMedia = ({
@@ -103,6 +104,7 @@ export const MainMedia = ({
103104
abTests,
104105
switches,
105106
editionId,
107+
shouldHideAds,
106108
}: Props) => {
107109
return (
108110
<div css={[mainMedia, chooseWrapper(format)]}>
@@ -125,6 +127,7 @@ export const MainMedia = ({
125127
hideCaption={hideCaption}
126128
starRating={starRating}
127129
editionId={editionId}
130+
shouldHideAds={shouldHideAds}
128131
/>
129132
))}
130133
</div>

‎dotcom-rendering/src/components/MiniProfiles.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export const ThemeVariations = {
7676
switches: {},
7777
RenderArticleElement,
7878
sectioned: false,
79+
shouldHideAds: false,
7980
},
8081
decorators: [centreColumnDecorator],
8182
parameters: {

0 commit comments

Comments
 (0)