Merge branch 'main' into al-1710-popstate

Author: akinsola-guardian

.github/CODEOWNERS

@@ -27,3 +27,4 @@
 /dotcom-rendering/src/lib/braze/                @guardian/value
 /dotcom-rendering/webpack/                      @guardian/dotcom-platform
 /scripts/                                       @guardian/dotcom-platform
+/ab-testing/                                    @guardian/commercial-dev

ab-testing/frontend/src/routes/+page.svelte

@@ -4,7 +4,7 @@
 	import AudienceBreakdown from '$lib/components/AudienceBreakdown.svelte';
 </script>
 
-<h1 class="headline">A/B Tests</h1>
+<h1 class="headline">A/B Tests (Beta)</h1>
 <section>
 	<p>
 		This page provides an overview of currently running A/B tests on
@@ -31,8 +31,14 @@
 	</p>
 </section>
 <section>
-	<AudienceBreakdown tests={activeABtests} />
-	<Table tests={allABTests} />
+	{#if activeABtests.length > 0}
+		<AudienceBreakdown tests={activeABtests} />
+	{/if}
+	{#if allABTests.length > 0}
+		<Table tests={allABTests} />
+	{:else}
+		<p>There are <b>ZERO</b> A/B tests currently configured!</p>
+	{/if}
 </section>
 
 <style>

apps-rendering/.storybook/fonts-css.ts

@@ -1,5 +1,3 @@
-import CleanCSS from 'clean-css';
-
 type FontFamily =
 	| 'GH Guardian Headline'
 	| 'Guardian Egyptian Web' // Legacy of GH Guardian Headline
@@ -278,5 +276,4 @@ const getStyleString: () => string = () => {
 	);
 };
 
-export const getFontsCss = (): string =>
-	new CleanCSS().minify(getStyleString()).styles;
+export const getFontsCss = (): string => getStyleString();

apps-rendering/.storybook/main.js

@@ -16,11 +16,6 @@ module.exports = {
 		// Global options for webpack
 		config.resolve.extensions?.push('.ts', '.tsx');
 
-		config.resolve.fallback ??= {};
-		// clean-css will try to import these packages
-		config.resolve.fallback['http'] = false;
-		config.resolve.fallback['https'] = false;
-
 		// Required as otherwise 'process' will not be defined when included on its own (without .env)
 		// e.g process?.env?.SOME_VAR
 		config.plugins.push(

apps-rendering/.storybook/preview.js

@@ -82,8 +82,14 @@ export const viewports = [320, 375, 480, 660, 740, 980, 1140, 1300];
 
 export const parameters = {
 	viewport: {
-		viewports: guardianViewports,
-		defaultViewport: 'wide',
+		options: guardianViewports,
 	},
 	layout: 'fullscreen',
 };
+
+export const initialGlobals = {
+	viewport: {
+		value: 'wide',
+		isRotated: false,
+	},
+};

apps-rendering/config/.eslintrc.js

@@ -118,7 +118,7 @@ module.exports = {
 		{
 			files: ['**/*.tsx'],
 			rules: {
-				'@typescript-eslint/ban-types': [
+				'@typescript-eslint/no-restricted-types': [
 					'error',
 					{
 						types: {
@@ -132,7 +132,6 @@ module.exports = {
 							'React.FC':
 								'Please use const MyThing = ({foo, bar}: Props) instead',
 						},
-						extendDefaults: true,
 					},
 				],
 			},

apps-rendering/package.json

@@ -46,21 +46,15 @@
 		"@guardian/cdk": "62.0.1",
 		"@guardian/content-api-models": "31.0.0",
 		"@guardian/content-atom-model": "6.1.0",
-		"@guardian/eslint-config-typescript": "11.0.0",
+		"@guardian/eslint-config-typescript": "12.0.0",
 		"@guardian/libs": "22.0.0",
 		"@guardian/renditions": "0.2.0",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "17.0.0",
 		"@smithy/property-provider": "2.0.16",
-		"@storybook/addon-essentials": "8.6.14",
+		"@storybook/addon-docs": "9.1.13",
 		"@storybook/addon-webpack5-compiler-babel": "3.0.6",
-		"@storybook/components": "8.6.14",
-		"@storybook/core-events": "8.6.14",
-		"@storybook/manager-api": "8.6.14",
-		"@storybook/preview-api": "8.6.14",
-		"@storybook/react": "8.6.14",
-		"@storybook/react-webpack5": "8.6.14",
-		"@storybook/theming": "8.6.14",
+		"@storybook/react-webpack5": "9.1.13",
 		"@types/clean-css": "4.2.11",
 		"@types/compression": "1.8.1",
 		"@types/express": "5.0.1",
@@ -81,7 +75,7 @@
 		"compression": "1.8.0",
 		"constructs": "10.4.2",
 		"core-js": "3.33.3",
-		"eslint": "8.56.0",
+		"eslint": "8.57.1",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-react": "7.33.2",
 		"express": "5.1.0",
@@ -95,7 +89,7 @@
 		"react-dom": "18.3.1",
 		"react-test-renderer": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "8.6.14",
+		"storybook": "9.1.13",
 		"thrift": "0.20.0",
 		"ts-jest": "29.1.2",
 		"ts-loader": "9.5.4",

apps-rendering/src/client/article.ts

@@ -85,26 +85,28 @@ function followToggle(
 		if (isFollowing) {
 			void bridgetClient.unfollow(topic).then((unfollow) => {
 				// unfollow will be true if the update was successful
-				unfollow &&
+				if (unfollow) {
 					ReactDOM.render(
 						h(followStatusComponent, {
 							isFollowing: false,
 							contributorName: topic.displayName,
 						}),
 						followStatus,
 					);
+				}
 			});
 		} else {
 			void bridgetClient.follow(topic).then((follow) => {
 				// follow will be true if the update was successful
-				follow &&
+				if (follow) {
 					ReactDOM.render(
 						h(followStatusComponent, {
 							isFollowing: true,
 							contributorName: topic.displayName,
 						}),
 						followStatus,
 					);
+				}
 			});
 		}
 	});
@@ -167,16 +169,19 @@ function conditionallyRenderFollowTagComponent(
 				isMyGuardianEnabled,
 				tagIsFollowingState,
 			]) => {
-				isBridgetCompatible &&
+				if (
+					isBridgetCompatible &&
 					isMyGuardianEnabled &&
-					followTagStatus &&
+					followTagStatus
+				) {
 					ReactDOM.render(
 						h(FollowTagStatus, {
 							isFollowing: tagIsFollowingState,
 							contributorName: topic.displayName,
 						}),
 						followTagStatus,
 					);
+				}
 
 				followTag?.addEventListener('click', followTagClick);
 				followTag?.setAttribute('aria-hidden', 'false');

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

@@ -3,7 +3,7 @@
 import { Edition } from '@guardian/apps-rendering-api-models/edition';
 import { ArticleSpecial, formatToString } from '../../articleFormat';
 import { breakpoints } from '@guardian/source/foundations';
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-webpack5';
 import {
 	analysis,
 	article,

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

@@ -4,7 +4,7 @@ import {
 	formatToString,
 } from '../../articleFormat';
 import { breakpoints } from '@guardian/source/foundations';
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-webpack5';
 import { getAllThemes } from 'fixtures/article';
 import { Pagination } from '.';