Merge branch 'main' into @braze/web-sdk-v3-to-v4-to-v5

Author: andresilva-guardian

dotcom-rendering/docs/principles/browser-support.md

@@ -14,25 +14,26 @@ such as supporting TLS (IE<6, Firefox 1). These browsers will not be able to see
 These are [browsers that we publicly recommend](https://www.theguardian.com/help/recommended-browsers) our
 audience use. They will receive the modern experience.
 
-If a browser version has more than 0.2% of traffic, it is considered to be a candidate for recommendation.
+If a browser version has more than 0.01% of traffic, it is considered to be a candidate for recommendation.
+
 All browser versions above and including the minimum candidate version are considered recommended browsers.
 
-As of 6th November 2018, our browser usage for browsers versions with over 0.2% of traffic over the last 14 days
-looks like:
-
-| Browser           | Min version | Usage >= version |
-| ----------------- | ----------- | ---------------- |
-| Chrome            | 49          | 46.95%           |
-| iOS Safari        | 10.2        | 26.97%           |
-| Firefox           | 48          | 3.07%            |
-| Safari            | 10          | 3.02%            |
-| Internet Explorer | 11          | 2.79%            |
-| Samsung Internet  | 7           | 2.01%            |
-| Edge              | 17          | 1.31%            |
-| UC Browser        | 12          | 0.30%            |
-| Opera             | 56          | 0.25%            |
-
-The above table was calculated based on data from Google Analytics.
+As of 19th February 2024, our recommended browsers list is:
+
+| Browser           | Min version |
+| ----------------- | ----------- |
+| Chrome            | 70          |
+| Chrome (Android)  | 119         |
+| Edge              | 109         |
+| Firefox           | 78          |
+| Firefox (Android) | 119         |
+| Opera             | 95          |
+| Opera (mobile)    | 73          |
+| Safari            | 11.1        |
+| Safari (iOS)      | 10.3        |
+| Samsung Internet  | 17          |
+
+The above table was calculated by [@guardian/browserslist-config](https://github.com/guardian/csnx/tree/main/libs/%40guardian/browserslist-config) based on data from Google Analytics.
 
 ## Cutting the mustard
 

dotcom-rendering/package.json

@@ -61,7 +61,7 @@
 		"@sentry/integrations": "7.75.1",
 		"@storybook/addon-essentials": "8.4.2",
 		"@storybook/addon-interactions": "8.4.2",
-		"@storybook/addon-webpack5-compiler-swc": "1.0.5",
+		"@storybook/addon-webpack5-compiler-swc": "3.0.0",
 		"@storybook/components": "8.4.2",
 		"@storybook/core-events": "8.4.2",
 		"@storybook/manager-api": "8.4.2",
@@ -71,8 +71,8 @@
 		"@storybook/test": "8.4.2",
 		"@storybook/theming": "8.4.2",
 		"@svgr/webpack": "8.1.0",
-		"@swc/cli": "0.5.2",
-		"@swc/core": "1.9.2",
+		"@swc/cli": "0.6.0",
+		"@swc/core": "1.11.13",
 		"@swc/jest": "0.2.37",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/jest-dom": "6.6.2",
@@ -119,7 +119,7 @@
 		"babel-plugin-polyfill-corejs3": "0.12.0",
 		"babel-plugin-transform-runtime": "6.23.0",
 		"body-parser": "1.20.3",
-		"browserslist": "4.23.0",
+		"browserslist": "4.24.4",
 		"buffer": "6.0.3",
 		"chalk": "4.1.2",
 		"clean-css": "5.3.3",

dotcom-rendering/src/client/sIndicator.ts

@@ -21,7 +21,7 @@ const displaySIndicatorRoundel = (
 	const roundelElement =
 		document.getElementById(overallRoundelElementId) ??
 		(() => {
-			const newElem = document.createElement('div');
+			const newElem = document.createElement('a');
 			newElem.id = overallRoundelElementId;
 			document.body.appendChild(newElem);
 			return newElem;
@@ -45,6 +45,17 @@ const displaySIndicatorRoundel = (
 	roundelElement.style.width = '40px';
 	roundelElement.style.height = '40px';
 
+	roundelElement.style.cursor = 'pointer';
+	roundelElement.setAttribute(
+		'href',
+		window.location.hostname === 'localhost'
+			? 'http://localhost:4200/sIndicator'
+			: `https://syndication.${window.location.hostname.replace(
+					/^(m\.|www\.)/i,
+					'',
+			  )}/sIndicator`,
+	);
+
 	switch (status) {
 		case 'loading':
 			roundelElement.title = 'Checking syndication status...';
@@ -66,15 +77,6 @@ const displaySIndicatorRoundel = (
 				'There was an error checking syndication status. Click to check your CAPI key...';
 			roundelElement.style.backgroundColor = 'yellow';
 			roundelElement.textContent = '⚠️';
-			roundelElement.style.cursor = 'pointer';
-			roundelElement.addEventListener(
-				'click',
-				() =>
-					(window.location.href =
-						window.location.hostname === 'localhost'
-							? 'http://localhost:4200/sIndicator'
-							: `https://syndication.${window.location.hostname}/sIndicator`),
-			);
 			break;
 	}
 };

dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx

@@ -313,6 +313,9 @@ export const ReaderRevenueBanner = ({
 		(name === 'SignInPromptBanner'
 			? /* webpackChunkName: "sign-in-prompt-banner" */
 			  import(`../marketing/banners/signInPrompt/SignInPromptBanner`)
+			: name === 'DesignableBannerV2'
+			? /* webpackChunkName: "designable-banner-v2" */
+			  import(`../marketing/banners/designableBanner/DesignableBannerV2`)
 			: /* webpackChunkName: "designable-banner" */
 			  import(`../marketing/banners/designableBanner/DesignableBanner`)
 		)

dotcom-rendering/src/components/SvgMediaControlsPlay.tsx

@@ -1,8 +1,3 @@
-/**
- * TODO: This is a local copy of the updated `SvgMediaControlsPlay` icon which
- * is required by the new media card designs and can be removed once the Source
- * icon library has been updated and published.
- */
 import { css } from '@emotion/react';
 import { visuallyHidden } from '@guardian/source/foundations';
 import { type IconProps } from '@guardian/source/react-components';