Merge remote-tracking branch 'origin/main' into jlk/ab-testing-deploy-lambda

Author: Jakeii

ab-testing/abTests.ts

@@ -31,6 +31,19 @@ const ABTests: ABTest[] = [
 		groups: ["control", "variant"],
 		shouldForceMetricsCollection: true,
 	},
+	{
+		name: "commercial-user-module-ID5",
+		description:
+			"Tests whether we can get the users email, hash it and pass pd value to the userId array",
+		owners: ["[email protected]"],
+		expirationDate: `2025-12-19`,
+		type: "client",
+		status: "ON",
+		audienceSize: 10 / 100,
+		audienceSpace: "A",
+		groups: ["control", "variant"],
+		shouldForceMetricsCollection: true,
+	},
 ];
 
 const activeABtests = ABTests.filter((test) => test.status === "ON");

dotcom-rendering/.storybook/main.ts

@@ -1,11 +1,21 @@
 import path from 'node:path';
+import { createRequire } from 'node:module';
 import webpack from 'webpack';
-import { transpileExclude, getLoaders } from '../webpack/webpack.config.client';
 import { saveStories } from '../scripts/gen-stories/get-stories.mjs';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import { svgr } from '../webpack/svg.cjs';
 import process from 'node:process';
 
+// ESM equivalent of __dirname
+const __dirname = import.meta.dirname;
+
+// Import CommonJS webpack config in ESM context
+const require = createRequire(import.meta.url);
+const {
+	transpileExclude,
+	getLoaders,
+} = require('../webpack/webpack.config.client.js');
+
 // Generate dynamic Card and Layout stories
 saveStories();
 

dotcom-rendering/docs/development/run-prod-bundle-locally.md

@@ -6,20 +6,16 @@ production build locally.
 To do this:
 
     $ make build
-    $ node dist/server.js
+    $ make ci
 
-_Note, you will need AWS `frontend` credentials to run the service._
+The PROD server should start on its default port 9000.
 
-You can then use the provided GET endpoints for testing:
+You can then use the provided POST endpoints for testing e.g.:
 
     /Article
-    /AMPArticle
+    /Front
 
-Similar to the dev server, both endpoints support a `url` parameter to customise
-the article used. E.g.
+Unlike the DEV server, the DCAR PROD server does _not_ implement GET endpoints.
 
-    GET /Article/https://www.theguardian.com/my-test-article.
-
-_Note, PROD Frontend doesn't use these endpoints. Instead, it `POSTs` data to
-DCR and receives a JSON response. A tool like Postman can help if you want to
-replicate this exactly._
+As in production, it expects the Frontend JSON data model to be
+`POSTed` to DCAR.

dotcom-rendering/jest.config.js

@@ -7,6 +7,7 @@ const esModules = [
 	'data-uri-to-buffer',
 	'fetch-blob',
 	'formdata-polyfill',
+	'storybook',
 ].join('|');
 
 module.exports = {

dotcom-rendering/package.json

@@ -47,10 +47,10 @@
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.56.1",
 		"@sentry/browser": "10.24.0",
-		"@storybook/addon-a11y": "9.1.13",
-		"@storybook/addon-docs": "9.1.13",
-		"@storybook/addon-webpack5-compiler-swc": "4.0.1",
-		"@storybook/react-webpack5": "9.1.13",
+		"@storybook/addon-a11y": "10.0.7",
+		"@storybook/addon-docs": "10.0.7",
+		"@storybook/addon-webpack5-compiler-swc": "4.0.2",
+		"@storybook/react-webpack5": "10.0.7",
 		"@svgr/webpack": "8.1.0",
 		"@swc/cli": "0.7.8",
 		"@swc/core": "1.13.5",
@@ -115,7 +115,7 @@
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-ssr-friendly": "1.3.0",
-		"eslint-plugin-storybook": "9.1.13",
+		"eslint-plugin-storybook": "10.0.7",
 		"eslint-plugin-unicorn": "48.0.1",
 		"eslint-stats": "1.0.1",
 		"express": "5.1.0",
@@ -147,7 +147,7 @@
 		"screenfull": "6.0.2",
 		"semver": "7.5.4",
 		"source-map": "0.7.4",
-		"storybook": "9.1.13",
+		"storybook": "10.0.7",
 		"stylelint": "16.5.0",
 		"stylelint-config-recommended": "14.0.0",
 		"swc-loader": "0.2.6",

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

@@ -21,16 +21,19 @@ type Props = {
 	headlineText: string;
 	dataLinkName?: string;
 	isExternalLink: boolean;
+	trackCardClick?: () => void;
 };
 
 const InternalLink = ({
 	linkTo,
 	headlineText,
 	dataLinkName,
+	trackCardClick,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
+	trackCardClick?: () => void;
 }) => {
 	return (
 		// eslint-disable-next-line jsx-a11y/anchor-has-content -- we have an aria-label attribute describing the content
@@ -39,6 +42,7 @@ const InternalLink = ({
 			css={fauxLinkStyles}
 			data-link-name={dataLinkName}
 			aria-label={headlineText}
+			onClick={trackCardClick}
 		/>
 	);
 };
@@ -47,10 +51,12 @@ const ExternalLink = ({
 	linkTo,
 	headlineText,
 	dataLinkName,
+	trackCardClick,
 }: {
 	linkTo: string;
 	headlineText: string;
 	dataLinkName?: string;
+	trackCardClick?: () => void;
 }) => {
 	return (
 		// eslint-disable-next-line jsx-a11y/anchor-has-content -- we have an aria-label attribute describing the content
@@ -61,6 +67,7 @@ const ExternalLink = ({
 			aria-label={headlineText + ' (opens in new tab)'}
 			target="_blank"
 			rel="noreferrer"
+			onClick={trackCardClick}
 		/>
 	);
 };
@@ -70,6 +77,7 @@ export const CardLink = ({
 	headlineText,
 	dataLinkName = 'article', //this makes sense if the link is to an article, but should this say something like "external" if it's an external link? are there any other uses/alternatives?
 	isExternalLink,
+	trackCardClick,
 }: Props) => {
 	return (
 		<>
@@ -78,13 +86,15 @@ export const CardLink = ({
 					linkTo={linkTo}
 					headlineText={headlineText}
 					dataLinkName={dataLinkName}
+					trackCardClick={trackCardClick}
 				/>
 			)}
 			{!isExternalLink && (
 				<InternalLink
 					linkTo={linkTo}
 					headlineText={headlineText}
 					dataLinkName={dataLinkName}
+					trackCardClick={trackCardClick}
 				/>
 			)}
 		</>

dotcom-rendering/src/components/DecideContainer.tsx

@@ -233,7 +233,7 @@ export const DecideContainer = ({
 			return <NavList trails={trails} showImage={true} />;
 		case 'scrollable/highlights':
 			return (
-				<Island priority="feature" defer={{ until: 'visible' }}>
+				<Island priority="critical">
 					<ScrollableHighlights trails={trails} frontId={frontId} />
 				</Island>
 			);

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -32,6 +32,7 @@ export type HighlightsCardProps = {
 	byline?: string;
 	isExternalLink: boolean;
 	starRating?: Rating;
+	trackCardClick: () => void;
 };
 
 const container = css`
@@ -133,6 +134,7 @@ export const HighlightsCard = ({
 	byline,
 	isExternalLink,
 	starRating,
+	trackCardClick,
 }: HighlightsCardProps) => {
 	const isMediaCard = isMedia(format);
 
@@ -144,6 +146,7 @@ export const HighlightsCard = ({
 					headlineText={headlineText}
 					dataLinkName={dataLinkName}
 					isExternalLink={isExternalLink}
+					trackCardClick={trackCardClick}
 				/>
 
 				<div css={content}>