Merge branch 'main' of github.com:guardian/dotcom-rendering into e2e/…

…add-audio-player

# Conflicts:
#	dotcom-rendering/src/lib/mockRESTCalls.ts

apps-rendering/package.json

@@ -34,8 +34,8 @@
 	"dependencies": {
 		"@aws-sdk/client-ssm": "3.621.0",
 		"@aws-sdk/credential-providers": "3.621.0",
-		"@babel/core": "7.25.2",
-		"@babel/preset-env": "7.25.4",
+		"@babel/core": "7.25.8",
+		"@babel/preset-env": "7.25.8",
 		"@creditkarma/thrift-server-core": "1.0.4",
 		"@emotion/cache": "11.11.0",
 		"@emotion/jest": "11.11.0",
@@ -86,7 +86,6 @@
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-react": "7.33.2",
 		"express": "4.21.0",
-		"fetch-mock": "9.11.0",
 		"html-webpack-plugin": "5.6.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",

apps-rendering/src/components/Callout/Callout.stories.tsx

@@ -4,7 +4,6 @@ import {
 	type ArticleFormat,
 	Pillar,
 } from '../../articleFormat';
-import fetchMock from 'fetch-mock';
 import { campaignDescription, mockCampaign } from 'fixtures/campaign';
 import type { ReactElement } from 'react';
 import Callout from '.';
@@ -20,16 +19,30 @@ futureDate.setDate(futureDate.getDate() + 2);
 const pastDate = new Date();
 pastDate.setDate(pastDate.getDate() - 1);
 
+const mockFetch =
+	(mockedStatus: number) => (input: RequestInfo, init?: RequestInit) => {
+		const url = new Request(input).url;
+
+		if (
+			url ===
+				'https://callouts.code.dev-guardianapis.com/formstack-campaign/submit' &&
+			init?.method === 'POST'
+		) {
+			console.log(`url called: ${url}`);
+			return Promise.resolve(
+				new Response(null, { status: mockedStatus }),
+			);
+		} else {
+			return Promise.resolve(
+				new Response(JSON.stringify({ error: 'Not Found' }), {
+					status: 404,
+				}),
+			);
+		}
+	};
+
 const callout = (): ReactElement => {
-	fetchMock
-		.restore()
-		.post(
-			'https://callouts.code.dev-guardianapis.com/formstack-campaign/submit',
-			{
-				status: 201,
-				body: null,
-			},
-		);
+	global.fetch = mockFetch(201) as unknown as typeof fetch;
 	return (
 		<Callout
 			name={mockCampaign.name}
@@ -61,15 +74,7 @@ const closedCallout = (): ReactElement => (
 	/>
 );
 const nonCollapsableCallout = (): ReactElement => {
-	fetchMock
-		.restore()
-		.post(
-			'https://callouts.code.dev-guardianapis.com/formstack-campaign/submit',
-			{
-				status: 201,
-				body: null,
-			},
-		);
+	global.fetch = mockFetch(201) as unknown as typeof fetch;
 	return (
 		<Callout
 			isNonCollapsible={true}
@@ -86,15 +91,7 @@ const nonCollapsableCallout = (): ReactElement => {
 	);
 };
 const minimalCallout = (): ReactElement => {
-	fetchMock
-		.restore()
-		.post(
-			'https://callouts.code.dev-guardianapis.com/formstack-campaign/submit',
-			{
-				status: 201,
-				body: null,
-			},
-		);
+	global.fetch = mockFetch(201) as unknown as typeof fetch;
 	return (
 		<>
 			A callouts prompt, title and description are optional
@@ -114,15 +111,7 @@ const minimalCallout = (): ReactElement => {
 };
 
 const calloutWithFormFailure = (): ReactElement => {
-	fetchMock
-		.restore()
-		.post(
-			'https://callouts.code.dev-guardianapis.com/formstack-campaign/submit',
-			{
-				status: 400,
-				body: null,
-			},
-		);
+	global.fetch = mockFetch(400) as unknown as typeof fetch;
 	return (
 		<Callout
 			isNonCollapsible={true}

dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx

@@ -6,7 +6,7 @@ import {
 	ArticleFormat,
 	ArticleSpecial,
 	Pillar,
-} from '../../src/lib/format';
+} from '../../src/lib/articleFormat';
 import {
 	palette as sourcePalette,
 	space,

dotcom-rendering/.storybook/decorators/themeDecorator.tsx

@@ -12,7 +12,7 @@ import {
 	type StoryContext,
 	type StrictArgs,
 } from '@storybook/react';
-import { ArticleFormat } from '../../src/lib/format';
+import { ArticleFormat } from '../../src/lib/articleFormat';
 import type { CSSProperties } from 'react';
 
 const darkStoryCss = css`

dotcom-rendering/.storybook/mocks/paletteDeclarations.ts

@@ -1,4 +1,4 @@
-import { ArticleFormat } from '../../src/lib/format';
+import { ArticleFormat } from '../../src/lib/articleFormat';
 import { paletteDeclarations } from '../../src/palette';
 
 /**

dotcom-rendering/.storybook/preview.ts

@@ -9,7 +9,7 @@ import { resets } from '@guardian/source/foundations';
 
 import { Lazy } from '../src/components/Lazy';
 import { Picture } from '../src/components/Picture';
-import { mockRESTCalls } from '../src/lib/mockRESTCalls';
+import { mockFetch } from '../src/lib/mockRESTCalls';
 import { setABTests } from '../src/lib/useAB';
 import { ConfigContextDecorator } from './decorators/configContextDecorator';
 import { Preview } from '@storybook/react';
@@ -22,11 +22,11 @@ import {
 Lazy.disabled = isChromatic();
 Picture.disableLazyLoading = isChromatic();
 
+global.fetch = mockFetch;
+
 // Fix the date to prevent false negatives
 MockDate.set('Sat Jan 1 2022 12:00:00 GMT+0000 (Greenwich Mean Time)');
 
-mockRESTCalls();
-
 setABTests({
 	api: new AB({
 		mvtMaxValue: 1_000_000,

dotcom-rendering/.storybook/toolbar/globalColourScheme.ts

@@ -6,7 +6,7 @@ import {
 	ArticleDesign,
 	Pillar,
 	type ArticleFormat,
-} from '../../src/lib/format';
+} from '../../src/lib/articleFormat';
 
 const defaultFormat: ArticleFormat = {
 	display: ArticleDisplay.Standard,

dotcom-rendering/README.md

@@ -10,15 +10,7 @@ This guide will help you get the `dotcom-rendering` application running on your
 
 The only thing you need to make sure you have installed before you get going is [Node.js](https://nodejs.org).
 
-We recommend using a tool to help manage multiple versions of Node.js on on machine.
-[fnm](https://github.com/Schniz/fnm) is popular in the department at the moment, although
-[nvm](https://github.com/creationix/nvm) and [asdf](https://github.com/asdf-vm/asdf) are
-also used.
-
-If you are not sure which tool you have in use, the command `which node` can give you a clue.
-
-> If you use nvm, you might find
-> [this gist](https://gist.github.com/sndrs/5940e9e8a3f506b287233ed65365befb) helpful.
+We recommend using [fnm](https://github.com/Schniz/fnm) to help manage multiple versions of Node.js on on machine.
 
 Once Node is installed, make sure you're using the correct package manager by [enabling corepack](https://github.com/nodejs/corepack?tab=readme-ov-file#utility-commands):
 
@@ -39,7 +31,6 @@ $ make dev
 ```
 
 `make dev` will start the development server on port 3030: [http://localhost:3030](http://localhost:3030).
-`make build && make start` will start the production server on port 9000: [http://localhost:9000](http://localhost:9000).
 
 Visit the [root path of the dev server](http://localhost:3030) for some example URLs to visit.
 
@@ -49,21 +40,9 @@ You can view the JSON representation of an article, as per the model sent to the
 
 http://localhost:3030/ArticleJson?url=https://www.theguardian.com/sport/2019/jul/28/tour-de-france-key-moments-egan-bernal-yellow-jersey
 
-### Environment Variables
-
-| Name                          | Description                                                                                                                                    |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `HOSTNAME`                    | Defaults to `localhost`. If running behind a reverse proxy (Github Codespaces / Ngrok) this needs to be set to the hostname used to access DCR |
-| `NODE_ENV`                    | `production` or `development`. Toggles features such as hot reloading, compression, localhost access, etc                                      |
-| `GU_STAGE`                    | `PROD` or `DEV`. Typically used to decide if DCR should call Production downstream API's or CODE downstream API's                              |
-| `GU_PUBLIC`                   | Any value, undefined will disable. Toggles serving assets on the `/assets/` endpoint                                                           |
-| `DISABLE_LOGGING_AND_METRICS` | Boolean. Toggle for enabling Log4js                                                                                                            |
-
-Most of these variables are set by our make scripts and you don't need to worry about setting them.
-
 ### Detailed Setup
 
-If you're new to JavaScript projects, if you're trying to integrate with other applications or if you prefer to take things slow, we also have a more [detailed setup guide](docs/contributing/detailed-setup-guide.md).
+If you're new to TypeScript projects, if you're trying to integrate with other applications or if you prefer to take things slow, we also have a more [detailed setup guide](docs/contributing/detailed-setup-guide.md).
 
 ### Technologies
 
@@ -84,9 +63,6 @@ If you're new to JavaScript projects, if you're trying to integrate with other a
 
 [Source](https://theguardian.design) is the Guardian's design system. For detailed and up-to-date information on how to use it, see the [Source guide](https://github.com/guardian/csnx/blob/main/docs/source/README.md).
 
-For a high-level overview of some of the key ideas behind the design of the Dotcom website, see [design.theguardian.com](https://design.theguardian.com/).
-This resource was made in 2018 and is not maintained so it <strong>should not be taken as authoritative</strong> on details, but most of it still applies and it gives a very quick and visual overview. It also provides an explanation of some journalism- or Guardian-specific terms that you might see in the codebase, like 'kicker' and 'standfirst'.
-
 ### Concepts
 
 There are some concepts to learn, that will make working with Dotcom Rendering clearer:
@@ -95,18 +71,13 @@ There are some concepts to learn, that will make working with Dotcom Rendering c
 -   [DecideLayout](docs/patterns/decide-layout.md)
 -   [Prop Drilling](https://kentcdodds.com/blog/prop-drilling/) (and [why we don't use React Context](docs/architecture/016-react-context-api.md))
 -   Dynamic imports
--   [EnhanceCAPI](docs/patterns/enhance-capi.md)
+-   [Enhancers](docs/patterns/enhancers.md)
 -   Data generated in Frontend
 
 ### Visual Debugging
 
 DCR provides a visual debugging tool through a bookmarklet which you can find out more about in the [debug tool docs](./src/client/debug/README.md).
 
-### Feedback
-
-After completing this setup guide, we would greatly appreciate it if you could complete our [dotcom-rendering setup
-questionnaire](https://docs.google.com/forms/d/e/1FAIpQLSdwFc05qejwW_Gtl3pyW4N22KqmY5zXoDKAUAjrkOwb2uXNcQ/viewform?vc=0&c=0&w=1). It should only take 3 minutes and will help us improve this documentation and the setup process in the future. Thank you! 🙏
-
 ## Dotcom Rendering now renders most articles and fronts in Production
 
 You can force DCR on or off explicitly with
@@ -151,7 +122,11 @@ To monitor vulnerabilities from GitHub, you can use [Dependabot alerts in the se
 
 #### Manual audit
 
-To check for vulnerabilities in development, you can run `pnpm audit`.
+To check for vulnerabilities in development, you can run:
+
+```sh
+$ make audit
+```
 
 ## IDE setup
 
@@ -163,15 +138,6 @@ VSCode should prompt you to install our recommended extensions when you open the
 
 You can also find these extensions by searching for `@recommended` in the extensions pane.
 
-### Commit hooks
-
-Staged changes are automatically prettified on commit. You can disable this by adding `--no-verify` to your commit command.
-
-To run the prettier check manually, run either of the following commands from the workspace root:
-
--   `pnpm prettier:check` &rarr; Checks for prettier issues
--   `pnpm prettier:write` &rarr; Checks and fixes prettier issues
-
 ### Auto fix on save
 
 We recommend you update your workspace settings to automatically fix formatting and linting errors on save, this avoids code style validation failures. These instructions assume you have installed the `esbenp.prettier-vscode` VSCode plugin:
@@ -188,13 +154,3 @@ We recommend you update your workspace settings to automatically fix formatting
     	"source.fixAll.eslint": true
     }
     ```
-
-If you prefer not to use an editor like VSCode then you can use the following commands to manage formatting and (try to fix) linting errors:
-
--   `make fix` &rarr; Checks and fixes prettier and linting issues
-
-## Thanks
-
-<a href="https://www.chromaticqa.com/"><img src="https://cdn-images-1.medium.com/letterbox/147/36/50/50/1*oHHjTjInDOBxIuYHDY2gFA.png?source=logoAvatar-d7276495b101---37816ec27d7a" width="120"/></a>
-
-Thanks to [Chromatic](https://www.chromaticqa.com/) for providing the visual testing platform that helps us catch unexpected changes on time

dotcom-rendering/docs/contributing/code-style.md

@@ -10,7 +10,7 @@ guide](https://github.com/excelmicro/typescript) is a good place to look.
 
 ### Always used named exports
 
-> Why? For components, a default export will show as `<Unknown>` in the React dev tools unless explicity declared to a constant first. Also, default exports can lead to confusing situations. (Using the name of the export as a local variable in the file, exporting named and a default)
+> Why? For components, a default export will show as `<Unknown>` in the React dev tools unless explicitly declared to a constant first. Also, default exports can lead to confusing situations. (Using the name of the export as a local variable in the file, exporting named and a default)
 
 ```js
 // bad
@@ -174,35 +174,6 @@ render(
 );
 ```
 
-### Prefer [`cx`](https://emotion.sh/docs/@emotion/css#cx) for style composition
-
-> Why? `cx` composes given CSS in the most performant way in [_most_ cases](https://github.com/guardian/dotcom-rendering/pull/126#discussion_r209999843). It is more likely to reduce duplication of output CSS. It is also more readable, avoiding tricky syntax such as nested ternaries. However, there are cases in which it is more performant to use [`classNames`](https://github.com/JedWatson/classnames), notably if there are a large number of elements of a particular Component that use different combinations of classes.
-
-```js
-// bad
-const link = css`
-	color: blue;
-	font-weight: 700;
-`;
-const activeLink = css`
-	${link};
-	color: red;
-`;
-const MyLink = ({ isActive }) => (
-	<a className={isActive ? activeLink : link}>Click me</a>
-);
-
-// good
-const link = css`
-	color: blue;
-	font-weight: 700;
-`;
-const activeLink = css`
-	color: red;
-`;
-const MyLink = ({ isActive }) => (
-	<a className={cx({ [activeLink]: isActive }, link)}>Click Me</a>
-);
-```
-
 ### Do not use React.FC or equivalent
+
+Defining a component with `React.FC` causes it to implicitly take children (of type `ReactNode`). It means that all components accept children, even if they're not supposed to. See https://github.com/facebook/create-react-app/pull/8177

dotcom-rendering/docs/contributing/detailed-setup-guide.md

@@ -14,21 +14,13 @@ The only thing you need to make sure you have installed before you get going is
 
 #### Node.js
 
-We recommend using a tool to help manage multiple versions of Node.js on on machine.
-[fnm](https://github.com/Schniz/fnm) is popular in the department at the moment, although
-[nvm](https://github.com/creationix/nvm) and [asdf](https://github.com/asdf-vm/asdf) are
-sometimes used instead.
-If you use nvm, you might find
-[this gist](https://gist.github.com/sndrs/5940e9e8a3f506b287233ed65365befb) helpful.
-
-If you prefer to [install Node.js manually](https://nodejs.org),
-check the [.nvmrc](https://github.com/guardian/dotcom-rendering/blob/main/.nvmrc) for the current required version.
+We recommend using [fnm](https://github.com/Schniz/fnm) to help manage multiple versions of Node.js on on machine.
 
 ### Start
 
 Start the development server:
 
-```bash
+```sh
 make dev
 ```
 
@@ -60,7 +52,7 @@ http://localhost:3030/AMPArticle/http://localhost:9000/world/2013/jun/09/edward-
 
 The dotcom-rendering github account is set up to merge PRs into main instead of rebase. Merge commits are useful to quickly revert things when there is a major incident - whereas with rebase you might have to revert a whole load of commits.
 
-However, if you are working on a feature branch and plan to make a PR, it's still recommended to rebase on `main` to avoid extranous merge commits in branches.
+However, if you are working on a feature branch and plan to make a PR, it's still recommended to rebase on `main` to avoid extraneous merge commits in branches.
 
 ### Debugging tools
 
@@ -88,4 +80,16 @@ The production port default is 9000 for deployment, but to run locally alongside
 rendering.endpoint = "http://localhost:${port}/Article"
 ```
 
-with the overide port number and run frontend locally.
+with the override port number to [`frontend.conf`](https://github.com/guardian/frontend/blob/main/docs/03-dev-howtos/14-override-default-configuration.md) and run frontend locally.
+
+## Environment Variables
+
+| Name                          | Description                                                                                                                                    |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `HOSTNAME`                    | Defaults to `localhost`. If running behind a reverse proxy (Github Codespaces / Ngrok) this needs to be set to the hostname used to access DCR |
+| `NODE_ENV`                    | `production` or `development`. Toggles features such as hot reloading, compression, localhost access, etc                                      |
+| `GU_STAGE`                    | `PROD` or `DEV`. Typically used to decide if DCR should call Production downstream API's or CODE downstream API's                              |
+| `GU_PUBLIC`                   | Any value, undefined will disable. Toggles serving assets on the `/assets/` endpoint                                                           |
+| `DISABLE_LOGGING_AND_METRICS` | Boolean. Toggle for enabling Log4js                                                                                                            |
+
+Most of these variables are set by our make scripts and you don't need to worry about setting them.