Merge branch 'main' into rm/add-multi-byline

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.8",
-		"@babel/preset-env": "7.25.8",
+		"@babel/core": "7.26.0",
+		"@babel/preset-env": "7.26.0",
 		"@creditkarma/thrift-server-core": "1.0.4",
 		"@emotion/cache": "11.11.0",
 		"@emotion/jest": "11.11.0",
@@ -53,20 +53,20 @@
 		"@guardian/source": "8.0.0",
 		"@guardian/source-development-kitchen": "8.0.0",
 		"@smithy/property-provider": "2.0.16",
-		"@storybook/addon-essentials": "8.2.9",
+		"@storybook/addon-essentials": "8.3.6",
 		"@storybook/addon-webpack5-compiler-babel": "3.0.3",
-		"@storybook/components": "8.2.9",
-		"@storybook/core-events": "8.2.9",
-		"@storybook/manager-api": "8.2.9",
-		"@storybook/preview-api": "8.2.9",
-		"@storybook/react": "8.2.9",
-		"@storybook/react-webpack5": "8.2.9",
-		"@storybook/theming": "8.2.9",
+		"@storybook/components": "8.3.6",
+		"@storybook/core-events": "8.3.6",
+		"@storybook/manager-api": "8.3.6",
+		"@storybook/preview-api": "8.3.6",
+		"@storybook/react": "8.3.6",
+		"@storybook/react-webpack5": "8.3.6",
+		"@storybook/theming": "8.3.6",
 		"@types/clean-css": "4.2.11",
 		"@types/compression": "1.7.5",
 		"@types/express": "4.17.21",
 		"@types/html-webpack-plugin": "3.2.9",
-		"@types/jest": "29.5.12",
+		"@types/jest": "29.5.14",
 		"@types/jsdom": "16.2.15",
 		"@types/node": "18.18.14",
 		"@types/react": "18.3.1",
@@ -86,7 +86,7 @@
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-react": "7.33.2",
 		"express": "4.21.0",
-		"html-webpack-plugin": "5.6.2",
+		"html-webpack-plugin": "5.6.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jsdom": "16.7.0",
@@ -96,16 +96,16 @@
 		"react-dom": "18.3.1",
 		"react-test-renderer": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "8.2.9",
+		"storybook": "8.3.6",
 		"thrift": "0.20.0",
 		"ts-jest": "29.1.2",
 		"ts-loader": "9.5.1",
 		"tslib": "2.6.2",
 		"tsx": "4.6.2",
 		"typescript": "5.5.3",
-		"webpack": "5.95.0",
+		"webpack": "5.94.0",
 		"webpack-cli": "5.1.4",
-		"webpack-dev-server": "5.1.0",
+		"webpack-dev-server": "5.0.4",
 		"webpack-manifest-plugin": "5.0.0",
 		"whatwg-fetch": "3.6.19",
 		"winston": "3.11.0",

apps-rendering/src/adSlot.tsx

@@ -1,14 +1,12 @@
 import type { SerializedStyles } from '@emotion/react';
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import type { ArticleFormat } from 'articleFormat';
 import {
 	from,
-	headlineMedium17,
 	remSpace,
 	textSans14,
 	until,
 } from '@guardian/source/foundations';
-import { Button, buttonThemeBrandAlt } from '@guardian/source/react-components';
 import { background, text } from 'palette';
 import type { ReactElement } from 'react';
 import { darkModeCss, wideContentWidth } from 'styles';
@@ -39,24 +37,6 @@ const adLabelsStyles = (format: ArticleFormat): SerializedStyles => css`
 	}
 `;
 
-const supportBannerStyles = (format: ArticleFormat): SerializedStyles => css`
-	padding: ${remSpace[3]};
-	background-color: ${background.supportBanner(format)};
-
-	p {
-		${headlineMedium17};
-		margin-top: 0;
-	}
-
-	button {
-		margin-top: ${remSpace[3]};
-	}
-
-	${darkModeCss`
-		background-color: ${background.supportBannerDark(format)};
-	`}
-`;
-
 const styles = (format: ArticleFormat): SerializedStyles => css`
 	clear: both;
 	margin: ${remSpace[4]} 0;
@@ -117,12 +97,6 @@ const AdSlot = ({ className, paragraph, format }: Props): ReactElement => (
 			<p>Advertisement</p>
 		</div>
 		<div css={adSlotStyles} className="ad-slot"></div>
-		<div css={supportBannerStyles(format)} className="support-banner">
-			<p>Support the Guardian and enjoy the app ad-free.</p>
-			<ThemeProvider theme={buttonThemeBrandAlt}>
-				<Button>Support the Guardian</Button>
-			</ThemeProvider>
-		</div>
 	</aside>
 );
 

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

@@ -57,8 +57,9 @@ export const colourSchemeDecorator =
 	<Args = StrictArgs,>(formats: ArticleFormat[]): Decorator<Args> =>
 	(Story, context) => (
 		<>
-			{formats.map((format) => (
+			{formats.map((format, index) => (
 				<div
+					key={index}
 					data-color-scheme={colourScheme}
 					css={css(paletteDeclarations(format, colourScheme))}
 					style={{

dotcom-rendering/README.md

@@ -110,7 +110,7 @@ If you get lint errors, you can attempt to automatically fix them with:
 $ make fix
 ```
 
-See [the makefile](https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/makefile) for the full list.
+See [the makefile](./makefile) for the full list.
 
 [Read about testing tools and testing strategy](docs/testing.md).
 

dotcom-rendering/package.json

@@ -20,16 +20,16 @@
 	},
 	"dependencies": {
 		"@aws-sdk/client-cloudwatch": "3.621.0",
-		"@babel/core": "7.25.8",
-		"@babel/helper-compilation-targets": "7.25.7",
-		"@babel/helper-create-regexp-features-plugin": "7.25.7",
+		"@babel/core": "7.26.0",
+		"@babel/helper-compilation-targets": "7.25.9",
+		"@babel/helper-create-regexp-features-plugin": "7.25.9",
 		"@babel/plugin-syntax-dynamic-import": "7.8.3",
-		"@babel/plugin-transform-react-jsx": "7.25.7",
-		"@babel/plugin-transform-runtime": "7.25.7",
-		"@babel/preset-env": "7.25.8",
-		"@babel/preset-react": "7.25.7",
-		"@babel/preset-typescript": "7.25.7",
-		"@babel/runtime": "7.25.7",
+		"@babel/plugin-transform-react-jsx": "7.25.9",
+		"@babel/plugin-transform-runtime": "7.25.9",
+		"@babel/preset-env": "7.26.0",
+		"@babel/preset-react": "7.25.9",
+		"@babel/preset-typescript": "7.26.0",
+		"@babel/runtime": "7.26.0",
 		"@braze/web-sdk-core": "3.5.1",
 		"@creditkarma/thrift-server-core": "1.0.4",
 		"@emotion/babel-plugin": "11.12.0",
@@ -38,10 +38,10 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "21.0.0",
-		"@guardian/bridget": "7.0.0",
+		"@guardian/bridget": "8.0.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "50.13.0",
-		"@guardian/commercial": "23.0.0",
+		"@guardian/commercial": "23.2.0",
 		"@guardian/core-web-vitals": "7.0.0",
 		"@guardian/eslint-config": "7.0.1",
 		"@guardian/eslint-config-typescript": "9.0.1",
@@ -57,23 +57,23 @@
 		"@playwright/test": "1.45.3",
 		"@sentry/browser": "7.75.1",
 		"@sentry/integrations": "7.75.1",
-		"@storybook/addon-essentials": "8.2.9",
-		"@storybook/addon-interactions": "8.2.9",
+		"@storybook/addon-essentials": "8.3.6",
+		"@storybook/addon-interactions": "8.3.6",
 		"@storybook/addon-webpack5-compiler-swc": "1.0.5",
-		"@storybook/components": "8.2.9",
-		"@storybook/core-events": "8.2.9",
-		"@storybook/manager-api": "8.2.9",
-		"@storybook/preview-api": "8.2.9",
-		"@storybook/react": "8.2.9",
-		"@storybook/react-webpack5": "8.2.9",
-		"@storybook/test": "8.2.9",
-		"@storybook/theming": "8.2.9",
+		"@storybook/components": "8.3.6",
+		"@storybook/core-events": "8.3.6",
+		"@storybook/manager-api": "8.3.6",
+		"@storybook/preview-api": "8.3.6",
+		"@storybook/react": "8.3.6",
+		"@storybook/react-webpack5": "8.3.6",
+		"@storybook/test": "8.3.6",
+		"@storybook/theming": "8.3.6",
 		"@svgr/webpack": "8.1.0",
-		"@swc/cli": "0.4.0",
-		"@swc/core": "1.7.26",
-		"@swc/jest": "0.2.36",
+		"@swc/cli": "0.5.0",
+		"@swc/core": "1.7.40",
+		"@swc/jest": "0.2.37",
 		"@testing-library/dom": "10.4.0",
-		"@testing-library/jest-dom": "6.5.0",
+		"@testing-library/jest-dom": "6.6.2",
 		"@testing-library/react": "16.0.1",
 		"@testing-library/user-event": "14.5.2",
 		"@types/amphtml-validator": "1.0.1",
@@ -85,7 +85,7 @@
 		"@types/express": "4.17.21",
 		"@types/he": "1.2.0",
 		"@types/html-minifier-terser": "7.0.2",
-		"@types/jest": "29.5.12",
+		"@types/jest": "29.5.14",
 		"@types/jsdom": "21.1.1",
 		"@types/k6": "0.52.0",
 		"@types/lodash.debounce": "4.0.7",
@@ -172,7 +172,7 @@
 		"screenfull": "6.0.2",
 		"semver": "7.5.4",
 		"source-map": "0.7.4",
-		"storybook": "8.2.9",
+		"storybook": "8.3.6",
 		"stylelint": "16.5.0",
 		"stylelint-config-recommended": "14.0.0",
 		"swc-loader": "0.2.6",
@@ -190,12 +190,12 @@
 		"unified": "11.0.5",
 		"valibot": "0.28.1",
 		"web-vitals": "4.2.3",
-		"webpack": "5.95.0",
+		"webpack": "5.94.0",
 		"webpack-assets-manifest": "5.2.1",
 		"webpack-bundle-analyzer": "4.10.2",
 		"webpack-cli": "5.1.4",
 		"webpack-dev-middleware": "7.4.2",
-		"webpack-dev-server": "5.1.0",
+		"webpack-dev-server": "5.0.4",
 		"webpack-hot-middleware": "2.26.1",
 		"webpack-hot-server-middleware": "0.6.1",
 		"webpack-manifest-plugin": "5.0.0",

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

@@ -1,17 +1,12 @@
 import { AdSlot as BridgetAdSlot } from '@guardian/bridget/AdSlot';
-import { PurchaseScreenReason } from '@guardian/bridget/PurchaseScreenReason';
 import type { IRect as BridgetRect } from '@guardian/bridget/Rect';
 import { isUndefined } from '@guardian/libs';
 import { breakpoints } from '@guardian/source/foundations';
 import type { Breakpoint } from '@guardian/source/foundations';
 import libDebounce from 'lodash.debounce';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import {
-	getAcquisitionsClient,
-	getCommercialClient,
-	getUserClient,
-} from '../lib/bridgetApi';
+import { getCommercialClient, getUserClient } from '../lib/bridgetApi';
 import { useMatchMedia } from '../lib/useMatchMedia';
 import {
 	adPlaceholderClass,
@@ -222,17 +217,10 @@ export const AdPortals = ({
 		return () => resizeObserver?.disconnect();
 	}, [adPlaceholders, rightAdPlaceholder, tryRightAligned]);
 
-	const handleClickSupportButton = () => {
-		void getAcquisitionsClient()
-			.launchPurchaseScreen(PurchaseScreenReason.hideAds)
-			.catch(() => console.error('Error launching purchase screen'));
-	};
-
 	const renderAdSlot = (id: string, index: number) => (
 		<AdSlot
 			key={id}
 			isFirstAdSlot={index === 0}
-			onClickSupportButton={handleClickSupportButton}
 			ref={(node) => {
 				if (node !== null) {
 					adSlots.current = [...adSlots.current, node];

dotcom-rendering/src/components/AdSlot.apps.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
 import { rightColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { allModes } from '../../.storybook/modes';
 import { AdSlot } from './AdSlot.apps';
@@ -19,9 +18,6 @@ const meta = {
 			defaultViewport: 'mobileMedium',
 		},
 	},
-	args: {
-		onClickSupportButton: fn(),
-	},
 } satisfies Meta<typeof AdSlot>;
 
 export default meta;