Merge remote-tracking branch 'origin/main' into jlk/ab-testing/call-fastly-sequentially

Author: Jakeii

ab-testing/config/abTests.ts

@@ -58,6 +58,18 @@ const ABTests: ABTest[] = [
 		groups: ["control", "variant"],
 		shouldForceMetricsCollection: true,
 	},
+	{
+		name: "fronts-and-curation-onward-journeys",
+		description: "Testing the new Onward Journey component on all articles",
+		owners: ["[email protected]"],
+		expirationDate: `2026-02-25`,
+		type: "client",
+		status: "ON",
+		audienceSize: 50 / 100,
+		audienceSpace: "A",
+		groups: ["control", "variant"],
+		shouldForceMetricsCollection: false,
+	},
 ];
 
 const activeABtests = ABTests.filter((test) => test.status === "ON");

ab-testing/config/types.ts

@@ -4,7 +4,7 @@ type AudienceSpace = Map<string, FastlyTestParams>;
 
 type AllSpace = Map<string, FastlyTestParams[]>;
 
-type Team = "commercial" | "webex" | "thefilter";
+type Team = "commercial" | "webex" | "thefilter" | "fronts-and-curation";
 
 type TestName = `${Team}-${string}`;
 
@@ -23,7 +23,8 @@ type ABTest = {
 	expirationDate: `${Year}-${Month}-${Day}`;
 	/** Test type: should this run on the server or client */
 	type: "server" | "client";
-	/** Whether the AB test is currently running or not
+	/**
+	 * Whether the AB test is currently running or not
 	 * Would be nice to know who changed the status last and when
 	 */
 	status: "ON" | "OFF";
@@ -37,7 +38,8 @@ type ABTest = {
 	audienceSpace?: "A" | "B" | "C";
 	/** Test group definition */
 	groups: string[];
-	/** Bypasses sampling to force metrics collection for this test
+	/**
+	 * Bypasses sampling to force metrics collection for this test
 	 * See DCR Metrics component for end usage
 	 */
 	shouldForceMetricsCollection?: boolean;

dotcom-rendering/src/components/OnwardsUpper.importable.tsx

@@ -7,7 +7,7 @@ import {
 	Pillar,
 } from '../lib/articleFormat';
 import type { EditionId } from '../lib/edition';
-import { useAB } from '../lib/useAB';
+import { useBetaAB } from '../lib/useAB';
 import { useIsHorizontalScrollingSupported } from '../lib/useIsHorizontalScrollingSupported';
 import { palette } from '../palette';
 import type { OnwardsSource } from '../types/onwards';
@@ -227,10 +227,13 @@ export const OnwardsUpper = ({
 	webURL,
 	isInStarRatingVariant,
 }: Props) => {
-	const abTestAPI = useAB()?.api;
+	const abTests = useBetaAB();
 	const isInOnwardsAbTestVariant =
 		renderingTarget === 'Web' &&
-		abTestAPI?.isUserInVariant('OnwardJourneys', 'variant');
+		abTests?.isUserInTestGroup(
+			'fronts-and-curation-onward-journeys',
+			'variant',
+		);
 
 	const isHorizontalScrollingSupported = useIsHorizontalScrollingSupported();
 	if (!isHorizontalScrollingSupported) return null;

dotcom-rendering/src/components/RichLink.tsx

@@ -80,7 +80,10 @@ const headerStyles = css`
 	color: ${themePalette('--rich-link-header')};
 `;
 
-const titleStyles = (parentIsBlog: boolean) => css`
+const titleStyles = (
+	parentIsBlog: boolean,
+	isStarRatingRedesign: boolean,
+) => css`
 	${parentIsBlog ? headlineMedium17 : headlineMedium14};
 	padding-top: 1px;
 
@@ -92,7 +95,7 @@ const titleStyles = (parentIsBlog: boolean) => css`
 		 * Please speak to your team's designer and update this to use a more appropriate preset.
 		 */
 		font-weight: 400;
-		padding-bottom: 5px;
+		${!isStarRatingRedesign && `padding-bottom: 5px`};
 	}
 `;
 
@@ -223,6 +226,8 @@ export const RichLink = ({
 
 	const isLabs = linkFormat.theme === ArticleSpecial.Labs;
 
+	const isStarRatingRedesign =
+		!isUndefined(starRating) && isInStarRatingVariant;
 	return (
 		<div
 			data-print-layout="hide"
@@ -251,7 +256,10 @@ export const RichLink = ({
 						<div css={headerStyles}>
 							<div
 								css={[
-									titleStyles(parentIsBlog),
+									titleStyles(
+										parentIsBlog,
+										!!isStarRatingRedesign,
+									),
 									isLabs && labsTitleStyles,
 								]}
 							>

dotcom-rendering/src/components/marketing/shared/ResponsiveImage.tsx

@@ -21,8 +21,8 @@ type ResponsiveImageProps = {
 	cssOverrides?: SerializedStyles;
 };
 
-function createSource(image: ImageAttrs): ReactElement {
-	return <source media={image.media} srcSet={image.url} key={image.url} />;
+function createSource(image: ImageAttrs, index: number): ReactElement {
+	return <source media={image.media} srcSet={image.url} key={index} />;
 }
 
 export const ResponsiveImage: ReactComponent<ResponsiveImageProps> = ({

dotcom-rendering/src/experiments/ab-tests.ts

@@ -1,14 +1,8 @@
 import type { ABTest } from '@guardian/ab-core';
 import { abTestTest } from './tests/ab-test-test';
 import { noAuxiaSignInGate } from './tests/no-auxia-sign-in-gate';
-import { onwardJourneys } from './tests/onward-journeys';
 import { userBenefitsApi } from './tests/user-benefits-api';
 
 // keep in sync with ab-tests in frontend
 // https://github.com/guardian/frontend/tree/main/static/src/javascripts/projects/common/modules/experiments/ab-tests.ts
-export const tests: ABTest[] = [
-	abTestTest,
-	userBenefitsApi,
-	noAuxiaSignInGate,
-	onwardJourneys,
-];
+export const tests: ABTest[] = [abTestTest, userBenefitsApi, noAuxiaSignInGate];