Merge branch 'main' into jlk/new-ab-testing-definitions

Author: GHaberis

.github/workflows/stale.yml

@@ -11,7 +11,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         id: stale
         # Read about options here: https://github.com/actions/stale#all-options
         with:

dotcom-rendering/package.json

@@ -129,7 +129,6 @@
 		"eslint-plugin-ssr-friendly": "1.3.0",
 		"eslint-plugin-unicorn": "48.0.1",
 		"eslint-stats": "1.0.1",
-		"execa": "5.1.1",
 		"express": "5.1.0",
 		"find": "0.3.0",
 		"he": "1.2.0",

dotcom-rendering/scripts/env/check-files.js

@@ -1,17 +1,23 @@
-const execa = require('execa');
+const { execFileSync } = require('node:child_process');
 const { warn } = require('../../../scripts/log');
 
-execa('find', ['src', '-type', 'f', '-name', '*index*.ts*'])
-	.then(({ stdout }) => {
-		if (stdout !== '') {
-			warn(
-				'The following files contain “index” in them and should be renamed:\n\n' +
-					stdout +
-					'\n',
-			);
-			process.exit(1);
-		}
-	})
-	.catch(() => {
+try {
+	const stdout = execFileSync(
+		'find',
+		['src', '-type', 'f', '-name', '*index*.ts*'],
+		{
+			encoding: 'utf8',
+		},
+	);
+	if (stdout !== '') {
+		warn(
+			'The following files contain "index" in them and should be renamed:\n\n' +
+				stdout +
+				'\n',
+		);
 		process.exit(1);
-	});
+	}
+} catch (error) {
+	console.log('Error finding index files', error);
+	process.exit(1);
+}

dotcom-rendering/scripts/jest/setup.ts

@@ -48,13 +48,6 @@ const windowGuardian = {
 	functions: {
 		import: (url: string) => import(url),
 	},
-	automat: {
-		react: undefined,
-		preact: undefined,
-		emotion: undefined,
-		emotionCore: undefined,
-		emotionTheming: undefined,
-	},
 	readerRevenue: {
 		changeGeolocation: () => {},
 		showMeTheEpic: () => {},

dotcom-rendering/scripts/test-data/gen-fixtures.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-console -- script */
 /* eslint-disable @typescript-eslint/unbound-method -- path.resolve */
 
+const { execFileSync } = require('node:child_process');
 const fs = require('node:fs/promises');
 const { resolve } = require('node:path');
-const execa = require('execa');
 const { config } = require('../../fixtures/config');
 const { configOverrides } = require('../../fixtures/config-overrides');
 const { switchOverrides } = require('../../fixtures/switch-overrides');
@@ -304,7 +304,7 @@ requests.push(
 			// Write the new fixture data
 			const contents = `${HEADER}
 			import type { FEStoryPackage } from '../../src/frontend/feArticle';
-			
+
 			export const storyPackage: FEStoryPackage = ${JSON.stringify(json, null, 4)}`;
 			return fs.writeFile(
 				`${root}/fixtures/generated/story-package.ts`,
@@ -427,19 +427,19 @@ Promise.allSettled(requests)
 		}
 
 		console.log('Generation complete, formatting successful fixtures...');
-		execa('prettier', [
-			'./fixtures/**/*',
-			'--write',
-			'--log-level',
-			'error',
-		])
-			.then(() => {
-				console.log('✅ Formatting complete.');
-			})
-			.catch((err) => {
-				console.error('\n❌ Failed to format fixtures:\n', err);
-				process.exitCode = 1;
-			});
+
+		try {
+			execFileSync('prettier', [
+				'./fixtures/**/*',
+				'--write',
+				'--log-level',
+				'error',
+			]);
+			console.log('✅ Formatting complete.');
+		} catch (err) {
+			console.error('\n❌ Failed to format fixtures:\n', err);
+			process.exitCode = 1;
+		}
 	})
 	.catch((err) => {
 		console.error('❌ Unexpected error occurred:\n', err);

dotcom-rendering/src/client/userFeatures/user-features.ts

@@ -53,8 +53,10 @@ const persistResponse = (userBenefitsResponse: UserBenefits) => {
 	if (userBenefitsResponse.allowRejectAll) {
 		createOrRenewCookie(ALLOW_REJECT_ALL_COOKIE);
 	}
+	// Ad free cookie has an expiry of 2 days from now
+	// See https://github.com/guardian/gateway/blob/52f810a88fa9ce23c6a794916251748718742c3d/src/server/lib/user-features.ts#L111-L115
 	if (userBenefitsResponse.adFree) {
-		createOrRenewCookie(AD_FREE_USER_COOKIE);
+		createOrRenewCookie(AD_FREE_USER_COOKIE, 2);
 	}
 };
 

dotcom-rendering/src/components/ArticlePage.tsx

@@ -14,6 +14,7 @@ import { useConfig } from './ConfigContext';
 import { DarkModeMessage } from './DarkModeMessage';
 import { EnhanceAffiliateLinks } from './EnhanceAffiliateLinks.importable';
 import { FocusStyles } from './FocusStyles.importable';
+import { GoogleOneTap, isGoogleOneTapEnabled } from './GoogleOneTap.importable';
 import { Island } from './Island';
 import { Lightbox } from './Lightbox';
 import { Metrics } from './Metrics.importable';
@@ -139,6 +140,17 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 							}
 						/>
 					</Island>
+					{isGoogleOneTapEnabled(
+						frontendData.config.abTests,
+						frontendData.config.switches,
+					) && (
+						<Island
+							priority="enhancement"
+							defer={{ until: 'idle' }}
+						>
+							<GoogleOneTap />
+						</Island>
+					)}
 				</>
 			)}
 			{renderingTarget === 'Web' ? (

dotcom-rendering/src/components/Card/Card.tsx

@@ -153,6 +153,7 @@ export type Props = {
 	showKickerImage?: boolean;
 	/** Determines if the headline should be positioned within the content or outside the content */
 	headlinePosition?: 'inner' | 'outer';
+	isInHideTrailsAbTest?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -390,6 +391,7 @@ export const Card = ({
 	trailTextSize,
 	showKickerImage = false,
 	headlinePosition = 'inner',
+	isInHideTrailsAbTest = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -1090,14 +1092,16 @@ export const Card = ({
 							</HeadlineWrapper>
 						)}
 
-						{!!trailText && media?.type !== 'podcast' && (
-							<TrailText
-								trailText={trailText}
-								trailTextSize={trailTextSize}
-								padTop={headlinePosition === 'inner'}
-								hideUntil={hideTrailTextUntil()}
-							/>
-						)}
+						{!!trailText &&
+							media?.type !== 'podcast' &&
+							!isInHideTrailsAbTest && (
+								<TrailText
+									trailText={trailText}
+									trailTextSize={trailTextSize}
+									padTop={headlinePosition === 'inner'}
+									hideUntil={hideTrailTextUntil()}
+								/>
+							)}
 
 						{!isOpinionCardWithAvatar && (
 							<>

dotcom-rendering/src/components/Card/components/CardBranding.tsx

@@ -21,6 +21,7 @@ type Props = {
 
 const logoImageStyle = css`
 	max-height: 60px;
+	max-width: 120px;
 	margin-left: ${space[3]}px;
 	vertical-align: middle;
 	height: auto;

dotcom-rendering/src/components/DecideContainer.tsx

@@ -47,7 +47,7 @@ type Props = {
 	frontId?: string;
 	collectionId: number;
 	containerLevel?: DCRContainerLevel;
-	isInOpinionNoAvatarVariant?: boolean;
+	isInHideTrailsAbTest?: boolean;
 };
 
 export const DecideContainer = ({
@@ -63,7 +63,7 @@ export const DecideContainer = ({
 	frontId,
 	collectionId,
 	containerLevel,
-	isInOpinionNoAvatarVariant,
+	isInHideTrailsAbTest,
 }: Props) => {
 	switch (containerType) {
 		case 'dynamic/fast':
@@ -246,6 +246,7 @@ export const DecideContainer = ({
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
 					collectionId={collectionId}
+					isInHideTrailsAbTest={!!isInHideTrailsAbTest}
 				/>
 			);
 		case 'flexible/general':
@@ -259,7 +260,7 @@ export const DecideContainer = ({
 					aspectRatio={aspectRatio}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
-					isInOpinionNoAvatarVariant={isInOpinionNoAvatarVariant}
+					isInHideTrailsAbTest={!!isInHideTrailsAbTest}
 				/>
 			);
 		case 'scrollable/small':
@@ -274,6 +275,7 @@ export const DecideContainer = ({
 						absoluteServerTimes={absoluteServerTimes}
 						aspectRatio={aspectRatio}
 						sectionId={sectionId}
+						isInHideTrailsAbTest={!!isInHideTrailsAbTest}
 					/>
 				</Island>
 			);
@@ -289,7 +291,7 @@ export const DecideContainer = ({
 						absoluteServerTimes={absoluteServerTimes}
 						aspectRatio={aspectRatio}
 						sectionId={sectionId}
-						isInOpinionNoAvatarVariant={isInOpinionNoAvatarVariant}
+						isInHideTrailsAbTest={!!isInHideTrailsAbTest}
 					/>
 				</Island>
 			);
@@ -302,6 +304,7 @@ export const DecideContainer = ({
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
+					isInHideTrailsAbTest={!!isInHideTrailsAbTest}
 				/>
 			);
 		case 'scrollable/feature':
@@ -314,6 +317,7 @@ export const DecideContainer = ({
 						absoluteServerTimes={absoluteServerTimes}
 						aspectRatio={aspectRatio}
 						collectionId={collectionId}
+						isInHideTrailsAbTest={!!isInHideTrailsAbTest}
 					/>
 				</Island>
 			);
@@ -326,6 +330,7 @@ export const DecideContainer = ({
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
 					collectionId={collectionId}
+					isInHideTrailsAbTest={!!isInHideTrailsAbTest}
 				/>
 			);
 		default: