From c97bce9739a8178d8f1f94e398a1451374322c38 Mon Sep 17 00:00:00 2001 From: vanessa <32312712+vlbee@users.noreply.github.com> Date: Mon, 9 Feb 2026 16:48:19 +0000 Subject: [PATCH 1/3] Show L2A button on Apps preview by default --- dotcom-rendering/src/components/ArticleMeta.apps.tsx | 4 +++- .../src/components/ListenToArticle.importable.tsx | 9 +++++++-- dotcom-rendering/src/layouts/CommentLayout.tsx | 4 +++- dotcom-rendering/src/layouts/ImmersiveLayout.tsx | 4 +++- dotcom-rendering/src/layouts/InteractiveLayout.tsx | 3 ++- dotcom-rendering/src/layouts/ShowcaseLayout.tsx | 6 ++++-- dotcom-rendering/src/layouts/StandardLayout.tsx | 6 ++++-- 7 files changed, 26 insertions(+), 10 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleMeta.apps.tsx b/dotcom-rendering/src/components/ArticleMeta.apps.tsx index fe34af72e1e..b19aa2355f6 100644 --- a/dotcom-rendering/src/components/ArticleMeta.apps.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.apps.tsx @@ -37,6 +37,7 @@ type Props = { isCommentable: boolean; pageId?: string; headline?: string; + isPreview?: boolean; }; const metaGridContainer = css` @@ -230,6 +231,7 @@ export const ArticleMetaApps = ({ isCommentable, pageId, headline, + isPreview, }: Props) => { const soleContributor = getSoleContributor(tags, byline); const authorName = soleContributor?.title ?? 'Author Image'; @@ -373,7 +375,7 @@ export const ArticleMetaApps = ({ {shouldShowListenToArticleButton && ( - + )} diff --git a/dotcom-rendering/src/components/ListenToArticle.importable.tsx b/dotcom-rendering/src/components/ListenToArticle.importable.tsx index 843dc5e4e06..04345484d64 100644 --- a/dotcom-rendering/src/components/ListenToArticle.importable.tsx +++ b/dotcom-rendering/src/components/ListenToArticle.importable.tsx @@ -6,6 +6,7 @@ import { ListenToArticleButton } from './ListenToArticleButton'; type Props = { articleId: string; + isPreview?: boolean; }; export const formatAudioDuration = ( @@ -24,7 +25,7 @@ export const formatAudioDuration = ( return formattedDuration; }; -export const ListenToArticle = ({ articleId }: Props) => { +export const ListenToArticle = ({ articleId, isPreview }: Props) => { const [showButton, setShowButton] = useState(false); const [audioDurationSeconds, setAudioDurationSeconds] = useState< number | undefined @@ -56,7 +57,11 @@ export const ListenToArticle = ({ articleId }: Props) => { setShowButton(false); }); } - }, [articleId, isBridgetCompatible]); + + if (isPreview) { + setShowButton(true); + } + }, [articleId, isPreview, isBridgetCompatible]); const listenToArticleHandler = () => { void getListenToArticleClient() diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 17341643b98..36861158b2d 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/dotcom-rendering/src/layouts/CommentLayout.tsx @@ -277,7 +277,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => { const isWeb = renderingTarget === 'Web'; const isApps = renderingTarget === 'Apps'; const { - config: { isPaidContent, host }, + config: { isPaidContent, host, isPreview }, } = article; const showBodyEndSlot = @@ -460,6 +460,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => { > @@ -493,6 +494,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => { article.config.shortUrlId } pageId={article.config.pageId} + isPreview={isPreview} > diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index dd427888131..56ab1c62592 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx @@ -233,7 +233,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { const { article, format, renderingTarget, serverTime } = props; const { - config: { isPaidContent, host, hasSurveyAd }, + config: { isPaidContent, host, hasSurveyAd, isPreview }, editionId, } = article; const isWeb = renderingTarget === 'Web'; @@ -535,6 +535,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { > @@ -588,6 +589,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { article.config.shortUrlId } pageId={article.config.pageId} + isPreview={isPreview} > diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index cc7895af63d..8d01b4f5fe6 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -205,7 +205,7 @@ interface AppsProps extends CommonProps { export const InteractiveLayout = (props: WebProps | AppsProps) => { const { article, format, renderingTarget, serverTime } = props; const { - config: { isPaidContent, host, hasSurveyAd }, + config: { isPaidContent, host, hasSurveyAd, isPreview }, editionId, } = article; @@ -406,6 +406,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { pageId={ article.config.pageId } + isPreview={isPreview} > diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx index 8d0d1989dfa..beb42ade71e 100644 --- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx +++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { from, palette as sourcePalette, @@ -6,7 +7,6 @@ import { until, } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdPortals } from '../components/AdPortals.importable'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; @@ -224,7 +224,7 @@ interface AppsProps extends CommonProps { export const ShowcaseLayout = (props: WebProps | AppsProps) => { const { article, format, renderingTarget, serverTime } = props; const { - config: { isPaidContent, host, hasSurveyAd }, + config: { isPaidContent, host, hasSurveyAd, isPreview }, editionId, } = article; const isWeb = renderingTarget === 'Web'; @@ -427,6 +427,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => { > @@ -468,6 +469,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => { article.config.shortUrlId } pageId={article.config.pageId} + isPreview={isPreview} > diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index 1e629b60229..024c767b750 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -1,4 +1,5 @@ import { css } from '@emotion/react'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { from, palette as sourcePalette, @@ -6,7 +7,6 @@ import { until, } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdPortals } from '../components/AdPortals.importable'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; @@ -339,7 +339,7 @@ interface AppProps extends Props { export const StandardLayout = (props: WebProps | AppProps) => { const { article, format, renderingTarget, serverTime } = props; const { - config: { isPaidContent, host, hasSurveyAd }, + config: { isPaidContent, host, hasSurveyAd, isPreview }, editionId, } = article; @@ -587,6 +587,7 @@ export const StandardLayout = (props: WebProps | AppProps) => { article.config.shortUrlId } pageId={article.config.pageId} + isPreview={isPreview} > @@ -673,6 +674,7 @@ export const StandardLayout = (props: WebProps | AppProps) => { > From 7de39839f1f0e228f3c6a3090daf7b647962cad8 Mon Sep 17 00:00:00 2001 From: vanessa <32312712+vlbee@users.noreply.github.com> Date: Tue, 10 Feb 2026 09:52:12 +0000 Subject: [PATCH 2/3] fix imports --- dotcom-rendering/src/layouts/ShowcaseLayout.tsx | 2 +- dotcom-rendering/src/layouts/StandardLayout.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx index beb42ade71e..4d0501b6685 100644 --- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx +++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx @@ -1,5 +1,4 @@ import { css } from '@emotion/react'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { from, palette as sourcePalette, @@ -7,6 +6,7 @@ import { until, } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdPortals } from '../components/AdPortals.importable'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index 024c767b750..b85a922617e 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -1,5 +1,4 @@ import { css } from '@emotion/react'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { from, palette as sourcePalette, @@ -7,6 +6,7 @@ import { until, } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { AdPortals } from '../components/AdPortals.importable'; import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer'; From 261beb4ac8fad31ce14a4361d33ea78f810349a1 Mon Sep 17 00:00:00 2001 From: vanessa <32312712+vlbee@users.noreply.github.com> Date: Tue, 10 Feb 2026 12:06:43 +0000 Subject: [PATCH 3/3] Render l2a by default in dev mode --- .../src/components/ListenToArticle.importable.tsx | 13 ++++++++----- dotcom-rendering/src/server/render.article.apps.tsx | 1 + dotcom-rendering/src/types/configContext.ts | 2 ++ 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/components/ListenToArticle.importable.tsx b/dotcom-rendering/src/components/ListenToArticle.importable.tsx index 04345484d64..481298b95d6 100644 --- a/dotcom-rendering/src/components/ListenToArticle.importable.tsx +++ b/dotcom-rendering/src/components/ListenToArticle.importable.tsx @@ -2,6 +2,7 @@ import { log } from '@guardian/libs'; import { useEffect, useState } from 'react'; import { getListenToArticleClient } from '../lib/bridgetApi'; import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible'; +import { useConfig } from './ConfigContext'; import { ListenToArticleButton } from './ListenToArticleButton'; type Props = { @@ -25,12 +26,14 @@ export const formatAudioDuration = ( return formattedDuration; }; -export const ListenToArticle = ({ articleId, isPreview }: Props) => { +export const ListenToArticle = ({ articleId, isPreview = false }: Props) => { + const { isDev } = useConfig(); const [showButton, setShowButton] = useState(false); const [audioDurationSeconds, setAudioDurationSeconds] = useState< number | undefined >(undefined); + console.log('ListenToArticle isPreview=', isPreview); const isBridgetCompatible = useIsBridgetCompatible('8.7.0'); useEffect(() => { if (isBridgetCompatible) { @@ -56,12 +59,12 @@ export const ListenToArticle = ({ articleId, isPreview }: Props) => { setShowButton(false); }); - } - - if (isPreview) { + } else if (isPreview || isDev) { + // To facilitate design and development in non-Bridget compatible environments, + // we want to show the button if we're in preview mode or development mode setShowButton(true); } - }, [articleId, isPreview, isBridgetCompatible]); + }, [articleId, isPreview, isDev, isBridgetCompatible]); const listenToArticleHandler = () => { void getListenToArticleClient() diff --git a/dotcom-rendering/src/server/render.article.apps.tsx b/dotcom-rendering/src/server/render.article.apps.tsx index 478bf3ea8dc..0719a472ac9 100644 --- a/dotcom-rendering/src/server/render.article.apps.tsx +++ b/dotcom-rendering/src/server/render.article.apps.tsx @@ -35,6 +35,7 @@ export const renderArticle = ( darkModeAvailable: true, assetOrigin: ASSET_ORIGIN, editionId: frontendData.editionId, + isDev: process.env.NODE_ENV === 'development', }; const { html, extractedCss } = renderToStringWithEmotion( diff --git a/dotcom-rendering/src/types/configContext.ts b/dotcom-rendering/src/types/configContext.ts index bc67281038c..6b580f51495 100644 --- a/dotcom-rendering/src/types/configContext.ts +++ b/dotcom-rendering/src/types/configContext.ts @@ -14,10 +14,12 @@ export type Config = darkModeAvailable: boolean; assetOrigin: AssetOrigin; editionId: EditionId; + isDev?: boolean; }> | Readonly<{ renderingTarget: Extract; darkModeAvailable: boolean; assetOrigin: AssetOrigin; editionId: EditionId; + isDev?: boolean; }>;