From f3e10b3f21e0913e603f1a6f79c24028d48afb24 Mon Sep 17 00:00:00 2001 From: Juarez Mota Date: Tue, 24 Mar 2026 13:16:36 +0000 Subject: [PATCH] feat: Add isSensitive prop to epic and banner components across all layouts. - Standard, Showcase, Interactive, Immersive, Comment, Audio and LiveBlog. - Update tests to include the new required prop. --- dotcom-rendering/package.json | 2 +- .../src/components/Island.test.tsx | 2 ++ .../components/LiveBlogEpic.importable.tsx | 6 ++++ .../src/components/LiveBlogRenderer.tsx | 1 + .../src/components/SlotBodyEnd.importable.tsx | 4 +++ .../SlotBodyEnd/ReaderRevenueEpic.tsx | 2 ++ .../ReaderRevenueBanner.tsx | 2 ++ dotcom-rendering/src/layouts/AudioLayout.tsx | 3 ++ .../src/layouts/CommentLayout.tsx | 3 ++ .../src/layouts/ImmersiveLayout.tsx | 3 ++ .../src/layouts/InteractiveLayout.tsx | 1 + .../src/layouts/ShowcaseLayout.tsx | 3 ++ .../src/layouts/StandardLayout.tsx | 3 ++ pnpm-lock.yaml | 33 +++++++++++-------- 14 files changed, 54 insertions(+), 14 deletions(-) diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json index 7db709602ef..c48ad05cdc2 100644 --- a/dotcom-rendering/package.json +++ b/dotcom-rendering/package.json @@ -43,7 +43,7 @@ "@guardian/shimport": "1.0.2", "@guardian/source": "11.3.0", "@guardian/source-development-kitchen": "18.1.1", - "@guardian/support-dotcom-components": "8.4.2", + "@guardian/support-dotcom-components": "8.5.0", "@guardian/tsconfig": "0.2.0", "@playwright/test": "1.58.0", "@sentry/browser": "10.39.0", diff --git a/dotcom-rendering/src/components/Island.test.tsx b/dotcom-rendering/src/components/Island.test.tsx index e670fbd1752..8bbfd33c94e 100644 --- a/dotcom-rendering/src/components/Island.test.tsx +++ b/dotcom-rendering/src/components/Island.test.tsx @@ -287,6 +287,7 @@ describe('Island: server-side rendering', () => { pageId={''} keywordIds={''} renderingTarget={'Web'} + isSensitive={false} />, ), ).not.toThrow(); @@ -430,6 +431,7 @@ describe('Island: server-side rendering', () => { renderAds={true} isLabs={false} articleEndSlot={true} + isSensitive={false} /> , ), diff --git a/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx b/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx index 62106de0d72..252a06cee30 100644 --- a/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx +++ b/dotcom-rendering/src/components/LiveBlogEpic.importable.tsx @@ -33,6 +33,7 @@ type Props = { pageId: string; keywordIds: string; renderingTarget: RenderingTarget; + isSensitive: boolean; }; const useEpic = ({ name }: { name: string }) => { @@ -90,6 +91,7 @@ const usePayload = ({ isPaidContent, tags, pageId, + isSensitive, }: { shouldHideReaderRevenue: boolean; sectionId: string; @@ -97,6 +99,7 @@ const usePayload = ({ tags: TagType[]; pageId: string; keywordIds: string; + isSensitive: boolean; }): EpicPayload | undefined => { const articleCounts = useArticleCounts(pageId, tags, 'LiveBlog'); const hasOptedOutOfArticleCount = useHasOptedOutOfArticleCount(); @@ -134,6 +137,7 @@ const usePayload = ({ isSignedIn, pageId, inHoldbackGroup, + isSensitive, }, }; }; @@ -243,6 +247,7 @@ export const LiveBlogEpic = ({ pageId, keywordIds, renderingTarget, + isSensitive, }: Props) => { log('dotcom', 'LiveBlogEpic started'); @@ -262,6 +267,7 @@ export const LiveBlogEpic = ({ tags, pageId, keywordIds, + isSensitive, }); if (!ophanPageViewId || !payload || !pageUrl) return null; diff --git a/dotcom-rendering/src/components/LiveBlogRenderer.tsx b/dotcom-rendering/src/components/LiveBlogRenderer.tsx index 2923c0c3596..42c30fdaf4a 100644 --- a/dotcom-rendering/src/components/LiveBlogRenderer.tsx +++ b/dotcom-rendering/src/components/LiveBlogRenderer.tsx @@ -159,6 +159,7 @@ export const LiveBlogRenderer = ({ pageId={pageId} keywordIds={keywordIds} renderingTarget={renderingTarget} + isSensitive={isSensitive} /> )} diff --git a/dotcom-rendering/src/components/SlotBodyEnd.importable.tsx b/dotcom-rendering/src/components/SlotBodyEnd.importable.tsx index 27ac5323ce4..8c24089adf9 100644 --- a/dotcom-rendering/src/components/SlotBodyEnd.importable.tsx +++ b/dotcom-rendering/src/components/SlotBodyEnd.importable.tsx @@ -52,6 +52,7 @@ type Props = { renderAds: boolean; isLabs: boolean; articleEndSlot: boolean; + isSensitive: boolean; }; const slotStyles = css` @@ -118,6 +119,7 @@ export const SlotBodyEnd = ({ renderAds, isLabs, articleEndSlot, + isSensitive, }: Props) => { const { renderingTarget } = useConfig(); const { brazeMessages, braze } = useBraze(idApiUrl, renderingTarget); @@ -175,6 +177,7 @@ export const SlotBodyEnd = ({ 'growth-holdback-group', 'control', ) ?? false, + isSensitive, }); const brazeArticleContext: BrazeArticleContext = { section: sectionId, @@ -230,6 +233,7 @@ export const SlotBodyEnd = ({ pageId, braze, abTests, + isSensitive, ]); useEffect(() => { diff --git a/dotcom-rendering/src/components/SlotBodyEnd/ReaderRevenueEpic.tsx b/dotcom-rendering/src/components/SlotBodyEnd/ReaderRevenueEpic.tsx index 5c8bc8bb027..6003ea6a54d 100644 --- a/dotcom-rendering/src/components/SlotBodyEnd/ReaderRevenueEpic.tsx +++ b/dotcom-rendering/src/components/SlotBodyEnd/ReaderRevenueEpic.tsx @@ -53,6 +53,7 @@ export type CanShowData = { ophanPageViewId: string; pageId?: string; inHoldbackGroup?: boolean; + isSensitive: boolean; }; const buildPayload = async ( @@ -75,6 +76,7 @@ const buildPayload = async ( isSignedIn: data.isSignedIn, pageId: data.pageId, inHoldbackGroup: data.inHoldbackGroup, + isSensitive: data.isSensitive, }, }); diff --git a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx index 2f9e6ba09d1..ab394c096f2 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx @@ -129,6 +129,7 @@ const buildPayload = async ({ hideSupportMessagingForUser, pageId, inHoldbackGroup, + isSensitive, }: BuildPayloadProps): Promise => { const articleCounts = await asyncArticleCounts; const weeklyArticleHistory = articleCounts?.weeklyArticleHistory; @@ -161,6 +162,7 @@ const buildPayload = async ({ ), pageId, inHoldbackGroup, + isSensitive, }, }; }; diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx index d4327da1612..e3876e35138 100644 --- a/dotcom-rendering/src/layouts/AudioLayout.tsx +++ b/dotcom-rendering/src/layouts/AudioLayout.tsx @@ -377,6 +377,9 @@ export const AudioLayout = (props: WebProps) => { !!article.config.switches .articleEndSlot } + isSensitive={ + article.config.isSensitive + } /> )} diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 17341643b98..b623feac591 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/dotcom-rendering/src/layouts/CommentLayout.tsx @@ -629,6 +629,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => { !!article.config.switches .articleEndSlot } + isSensitive={ + article.config.isSensitive + } /> )} diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index dd427888131..6e26375c327 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx @@ -719,6 +719,9 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { !!article.config.switches .articleEndSlot } + isSensitive={ + article.config.isSensitive + } /> )} diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index 2b71ac014be..90e5d9742ae 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -565,6 +565,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { articleEndSlot={ !!article.config.switches.articleEndSlot } + isSensitive={article.config.isSensitive} /> diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx index bc50b338eec..5d53db36014 100644 --- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx +++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx @@ -604,6 +604,9 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => { !!article.config.switches .articleEndSlot } + isSensitive={ + article.config.isSensitive + } /> )} diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index b51aa3df0d0..017be989e5e 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -829,6 +829,9 @@ export const StandardLayout = (props: WebProps | AppProps) => { !!article.config.switches .articleEndSlot } + isSensitive={ + article.config.isSensitive + } /> )} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b85be6e081a..e802b392a36 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -341,8 +341,8 @@ importers: specifier: 18.1.1 version: 18.1.1(@emotion/react@11.14.0(@types/react@18.3.1)(react@18.3.1))(@guardian/libs@30.1.1(@guardian/ophan-tracker-js@2.8.0)(tslib@2.6.2)(typescript@5.5.3))(@guardian/source@11.3.0(@emotion/react@11.14.0(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react@18.3.1)(tslib@2.6.2)(typescript@5.5.3))(@types/react@18.3.1)(react@18.3.1)(tslib@2.6.2)(typescript@5.5.3) '@guardian/support-dotcom-components': - specifier: 8.4.2 - version: 8.4.2(@guardian/libs@30.1.1(@guardian/ophan-tracker-js@2.8.0)(tslib@2.6.2)(typescript@5.5.3))(@guardian/ophan-tracker-js@2.8.0)(zod@4.1.12) + specifier: 8.5.0 + version: 8.5.0(@guardian/libs@30.1.1(@guardian/ophan-tracker-js@2.8.0)(tslib@2.6.2)(typescript@5.5.3))(@guardian/ophan-tracker-js@2.8.0)(zod@4.1.12) '@guardian/tsconfig': specifier: 0.2.0 version: 0.2.0 @@ -2561,8 +2561,8 @@ packages: typescript: optional: true - '@guardian/support-dotcom-components@8.4.2': - resolution: {integrity: sha512-vaVnksG7epJK2TO1KvbFm4nE94iHg74qtSYS5hdFVLkk0B0ar5mvfvB9hk5jJaZ5utzNPG1KP3tEqH2SlL9LMA==} + '@guardian/support-dotcom-components@8.5.0': + resolution: {integrity: sha512-T2uo7LlQXBaveHzitz0Tcibc5K7JYKSLv04BrYFtxsEpi5rTOQol+/ACpDISBe/RANp5x2rsNmlCnL0jgo6zig==} peerDependencies: '@guardian/libs': ^22.0.0 '@guardian/ophan-tracker-js': 2.8.0 @@ -7006,6 +7006,10 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lru-cache@11.2.7: + resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==} + engines: {node: 20 || >=22} + lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} @@ -11635,12 +11639,12 @@ snapshots: '@guardian/eslint-config-typescript@12.0.0(eslint@8.57.1)(tslib@2.6.2)(typescript@5.5.3)': dependencies: - '@guardian/eslint-config': 9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)(tslib@2.6.2) + '@guardian/eslint-config': 9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)(tslib@2.6.2) '@stylistic/eslint-plugin': 2.6.2(eslint@8.57.1)(typescript@5.5.3) '@typescript-eslint/eslint-plugin': 8.1.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1)(typescript@5.5.3) '@typescript-eslint/parser': 8.1.0(eslint@8.57.1)(typescript@5.5.3) eslint: 8.57.1 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) tslib: 2.6.2 typescript: 5.5.3 @@ -11670,7 +11674,7 @@ snapshots: - supports-color - typescript - '@guardian/eslint-config@9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)(tslib@2.6.2)': + '@guardian/eslint-config@9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)(tslib@2.6.2)': dependencies: eslint: 8.57.1 eslint-config-prettier: 9.1.0(eslint@8.57.1) @@ -11753,7 +11757,7 @@ snapshots: react: 18.3.1 typescript: 5.5.3 - '@guardian/support-dotcom-components@8.4.2(@guardian/libs@30.1.1(@guardian/ophan-tracker-js@2.8.0)(tslib@2.6.2)(typescript@5.5.3))(@guardian/ophan-tracker-js@2.8.0)(zod@4.1.12)': + '@guardian/support-dotcom-components@8.5.0(@guardian/libs@30.1.1(@guardian/ophan-tracker-js@2.8.0)(tslib@2.6.2)(typescript@5.5.3))(@guardian/ophan-tracker-js@2.8.0)(zod@4.1.12)': dependencies: '@aws-sdk/client-cloudwatch': 3.995.0 '@aws-sdk/client-dynamodb': 3.996.0 @@ -11772,6 +11776,7 @@ snapshots: lodash.debounce: 4.0.8 lodash.throttle: 4.1.1 log4js: 6.9.1 + lru-cache: 11.2.7 seedrandom: 3.0.5 zod: 4.1.12 transitivePeerDependencies: @@ -15321,12 +15326,12 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1): dependencies: debug: 4.4.3(supports-color@8.1.1) enhanced-resolve: 5.19.0 eslint: 8.57.1 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) fast-glob: 3.3.3 get-tsconfig: 4.13.0 @@ -15355,14 +15360,14 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.1.0(eslint@8.57.1)(typescript@5.5.3) eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1) transitivePeerDependencies: - supports-color @@ -15417,7 +15422,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -17458,6 +17463,8 @@ snapshots: lru-cache@10.4.3: {} + lru-cache@11.2.7: {} + lru-cache@5.1.1: dependencies: yallist: 3.1.1