Merge branch 'main' into oa/add-component-id-to-skimlinks

Author: oliverabrahams

ab-testing/config/abTests.ts

@@ -20,6 +20,17 @@ import type { ABTest } from "./types.ts";
  */
 
 const ABTests: ABTest[] = [
+	{
+		name: "webx-dark-mode-web",
+		description: "Dark mode accessibility feature test on web",
+		owners: ["dotcom.platform@theguardian.com"],
+		status: "ON",
+		expirationDate: "2027-04-09",
+		type: "server",
+		audienceSize: 0 / 100,
+		groups: ["enable"],
+		shouldForceMetricsCollection: false,
+	},
 	{
 		name: "commercial-prebid-v10",
 		description: "Testing Prebid.js v10 integration on DCR",
@@ -49,7 +60,7 @@ const ABTests: ABTest[] = [
 		name: "webex-football-redesign",
 		description: "Testing the Redesign for the football pages",
 		owners: ["dotcom.platform@theguardian.com"],
-		expirationDate: `2026-02-28`,
+		expirationDate: `2026-04-22`,
 		type: "server",
 		status: "ON",
 		audienceSize: 0 / 100,
@@ -61,7 +72,7 @@ const ABTests: ABTest[] = [
 		name: "commercial-enable-spacefinder-on-interactives",
 		description: "Enable spacefinder on interactive articles on mobile web",
 		owners: ["commercial.dev@guardian.co.uk"],
-		expirationDate: `2026-02-28`,
+		expirationDate: `2026-03-14`,
 		type: "client",
 		status: "ON",
 		audienceSize: 0 / 100,
@@ -76,7 +87,7 @@ const ABTests: ABTest[] = [
 		owners: ["commercial.dev@guardian.co.uk"],
 		expirationDate: `2026-02-28`,
 		type: "client",
-		status: "ON",
+		status: "OFF",
 		audienceSize: 20 / 100,
 		audienceSpace: "A",
 		groups: ["control", "variant"],
@@ -107,6 +118,19 @@ const ABTests: ABTest[] = [
 		groups: ["control"],
 		shouldForceMetricsCollection: false,
 	},
+	{
+		name: "fronts-and-curation-slim-homepage",
+		description:
+			"Test placing the Most Viewed and Deeply Read components in the right-hand column on the homepage.",
+		owners: ["fronts.and.curation@guardian.co.uk"],
+		status: "ON",
+		expirationDate: `2026-04-28`,
+		type: "server",
+		audienceSize: 0 / 100,
+		audienceSpace: "A",
+		groups: ["control", "variant"],
+		shouldForceMetricsCollection: false,
+	},
 	{
 		name: "growth-holdback-group",
 		description:
@@ -120,6 +144,19 @@ const ABTests: ABTest[] = [
 		groups: ["control"],
 		shouldForceMetricsCollection: false,
 	},
+	{
+		name: "fronts-and-curation-tag-page-storylines",
+		description:
+			"Testing the AI generated storylines component on tag pages",
+		owners: ["fronts.and.curation@guardian.co.uk"],
+		expirationDate: `2026-03-31`,
+		type: "server",
+		status: "ON",
+		audienceSize: 0 / 100,
+		audienceSpace: "B",
+		groups: ["control", "variant"],
+		shouldForceMetricsCollection: false,
+	},
 ];
 
 const activeABtests = ABTests.filter((test) => test.status === "ON");

ab-testing/config/types.ts

@@ -6,7 +6,9 @@ type AllSpace = Map<string, FastlyTestParams[]>;
 
 type Team =
 	| "commercial"
+	// WebX in the canonical name for the team, when the last test using webex expires we should remove webex from this union type
 	| "webex"
+	| "webx"
 	| "thefilter"
 	| "fronts-and-curation"
 	| "growth";

ab-testing/deploy-lambda/package.json

@@ -30,7 +30,7 @@
 		"esbuild": "0.27.0",
 		"eslint": "9.39.1",
 		"prettier": "3.0.3",
-		"rollup": "4.53.2",
+		"rollup": "4.59.0",
 		"rollup-plugin-esbuild": "6.2.1",
 		"type-fest": "4.21.0",
 		"typescript": "5.9.3"

ab-testing/notification-lambda/package.json

@@ -28,7 +28,7 @@
 		"esbuild": "0.27.0",
 		"eslint": "9.39.1",
 		"prettier": "3.0.3",
-		"rollup": "4.53.2",
+		"rollup": "4.59.0",
 		"rollup-plugin-esbuild": "6.2.1",
 		"type-fest": "4.21.0",
 		"typescript": "5.9.3"

dotcom-rendering/package.json

@@ -21,7 +21,7 @@
 	"dependencies": {
 		"@aws-sdk/client-cloudwatch": "3.995.0",
 		"@babel/helper-compilation-targets": "7.28.6",
-		"@braze/web-sdk": "5.8.1",
+		"@braze/web-sdk": "6.5.0",
 		"@creditkarma/thrift-server-core": "1.0.4",
 		"@emotion/cache": "11.14.0",
 		"@emotion/react": "11.14.0",
@@ -37,7 +37,7 @@
 		"@guardian/eslint-config-typescript": "12.0.0",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
-		"@guardian/libs": "27.1.0",
+		"@guardian/libs": "28.0.0",
 		"@guardian/ophan-tracker-js": "2.8.0",
 		"@guardian/react-crossword": "11.1.0",
 		"@guardian/shimport": "1.0.2",
@@ -47,10 +47,10 @@
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.58.0",
 		"@sentry/browser": "10.39.0",
-		"@storybook/addon-a11y": "10.1.10",
-		"@storybook/addon-docs": "10.1.10",
+		"@storybook/addon-a11y": "10.2.13",
+		"@storybook/addon-docs": "10.2.13",
 		"@storybook/addon-webpack5-compiler-swc": "4.0.2",
-		"@storybook/react-webpack5": "10.1.10",
+		"@storybook/react-webpack5": "10.2.13",
 		"@svgr/webpack": "8.1.0",
 		"@swc/cli": "0.7.8",
 		"@swc/core": "1.13.5",
@@ -111,7 +111,7 @@
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-ssr-friendly": "1.3.0",
-		"eslint-plugin-storybook": "10.1.10",
+		"eslint-plugin-storybook": "10.2.13",
 		"eslint-plugin-unicorn": "48.0.1",
 		"eslint-stats": "1.0.1",
 		"express": "5.2.1",
@@ -142,7 +142,7 @@
 		"screenfull": "6.0.2",
 		"semver": "7.5.4",
 		"source-map": "0.7.4",
-		"storybook": "10.1.10",
+		"storybook": "10.2.13",
 		"stylelint": "16.5.0",
 		"stylelint-config-recommended": "14.0.0",
 		"swc-loader": "0.2.6",

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { isUndefined, removeCookie, setCookie, storage } from '@guardian/libs';
+import { isUndefined, storage } from '@guardian/libs';
 import { article17, palette } from '@guardian/source/foundations';
 import { type SetStateAction, useEffect, useState } from 'react';
 import { useConfig } from './ConfigContext';
@@ -19,10 +19,6 @@ const bold = css`
 	font-weight: bold;
 `;
 
-// This is hard coded, and must be changed if the experiment bucket changes
-// https://github.com/guardian/frontend/blob/09f49b80/common/app/experiments/Experiments.scala#L57
-const darkModeCookieName = 'X-GU-Experiment-0perc-D';
-
 const PreferenceToggle = ({
 	label,
 	checked,
@@ -90,30 +86,6 @@ export const Accessibility = () => {
 		true,
 	);
 
-	const [shouldParticipate, setParticipate] =
-		useState<boolean>(darkModeAvailable);
-
-	useEffect(() => {
-		if (shouldParticipate) {
-			setCookie({
-				name: darkModeCookieName,
-				value: 'true',
-			});
-		} else {
-			removeCookie({ name: darkModeCookieName });
-		}
-
-		const timeout = setTimeout(() => {
-			// we must reload the page for the preference to take effect,
-			// as this relies on a server-side test & cookie combination
-			if (shouldParticipate !== darkModeAvailable) {
-				window.location.reload();
-			}
-		}, 1200);
-
-		return () => clearTimeout(timeout);
-	}, [shouldParticipate, darkModeAvailable]);
-
 	const togglePreference = (
 		preferenceCallback: (value: SetStateAction<boolean>) => void,
 	): void => {
@@ -154,29 +126,36 @@ export const Accessibility = () => {
 
 				<br />
 
-				<fieldset css={formStyle}>
+				<div css={formStyle}>
 					<p>
 						We offer beta support for a dark colour scheme on the
 						web. The colour scheme preference will follow your
 						system settings.
 					</p>
-					<label>
-						<input
-							type="checkbox"
-							checked={shouldParticipate}
-							onChange={(e) => {
-								setParticipate(e.target.checked);
-							}}
-							data-link-name="prefers-colour-scheme"
-						/>
-						<span css={bold}>
-							Participate in the dark colour scheme beta{' '}
-						</span>
-						{shouldParticipate
-							? ' Untick this to opt out (browser will refresh)'
-							: ' Tick this to opt in (browser will refresh)'}
-					</label>
-				</fieldset>
+					{darkModeAvailable ? (
+						<>
+							<p css={bold}>
+								You are currently participating in the dark
+								colour scheme beta.
+							</p>
+							<a href="/ab-tests/opt-out/webx-dark-mode-web:enable">
+								Click here to opt out (this will redirect you to
+								the homepage)
+							</a>
+						</>
+					) : (
+						<>
+							<p css={bold}>
+								You are not currently participating in the dark
+								colour scheme beta.
+							</p>
+							<a href="/ab-tests/opt-in/webx-dark-mode-web:enable">
+								Click here to opt in (this will redirect you to
+								the homepage)
+							</a>
+						</>
+					)}
+				</div>
 			</form>
 		</FrontSection>
 	);

dotcom-rendering/src/components/ArticleBody.tsx

@@ -156,7 +156,7 @@ export const ArticleBody = ({
 	const isHostedContent =
 		format.design === ArticleDesign.HostedArticle ||
 		format.design === ArticleDesign.HostedVideo ||
-		format.design === ArticleDesign.HostedAudio;
+		format.design === ArticleDesign.HostedGallery;
 	const language = decideLanguage(lang);
 	const languageDirection = decideLanguageDirection(isRightToLeftLang);
 	const hasObserverPublicationTag = tags.find(

dotcom-rendering/src/components/ArticlePage.tsx

@@ -179,7 +179,7 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 					You can{' '}
 					<a
 						style={{ color: 'inherit' }}
-						href="/opt/out/dark-mode-web"
+						href="/ab-tests/opt-out/webx-dark-mode-web"
 					>
 						opt out anytime
 					</a>{' '}

dotcom-rendering/src/components/CallToActionAtom.tsx

@@ -38,6 +38,7 @@ export const CallToActionAtom = ({
 					css={css`
 						height: 200px;
 						object-fit: cover;
+						flex-grow: 1;
 
 						${from.tablet} {
 							height: 250px;

dotcom-rendering/src/components/ExpandableAtom/Footer.tsx

@@ -4,11 +4,12 @@ import { useState } from 'react';
 import { palette as themePalette } from '../../palette';
 
 /// LIKE/DISLIKE FEEDBACK FOOTER
-const footerStyling = css`
+// The isStorylines variable enables left alignment in the tag page storylines section
+const footerStyling = (isStorylines?: boolean) => css`
 	font-size: 13px;
 	line-height: 16px;
 	display: flex;
-	justify-content: flex-end;
+	${!isStorylines && 'justify-content: flex-end;'}
 `;
 
 // Currently no thumb icon in src-icons so a path is needed
@@ -29,9 +30,11 @@ const ThumbImage = () => {
 export const Footer = ({
 	likeHandler,
 	dislikeHandler,
+	isStorylines,
 }: {
 	likeHandler: () => void;
 	dislikeHandler: () => void;
+	isStorylines?: boolean;
 }): JSX.Element => {
 	// This is defined here because adding the hover styling using cx breaks the text styling
 	const buttonStyling = css`
@@ -58,7 +61,7 @@ export const Footer = ({
 	`;
 	const [showThankYou, setShowThankYou] = useState(false);
 	return (
-		<footer css={footerStyling}>
+		<footer css={footerStyling(isStorylines)}>
 			<div hidden={showThankYou}>
 				<div
 					css={css`