merge in main

guardian · Dec 13, 2024 · 1bb921d · 1bb921d
2 parents 2996511 + 014a4c7
commit 1bb921d
Show file tree

Hide file tree

Showing 311 changed files with 14,807 additions and 90,721 deletions.
diff --git a/apps-rendering/package.json b/apps-rendering/package.json
@@ -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.0",
+		"html-webpack-plugin": "5.6.3",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jsdom": "16.7.0",
@@ -103,9 +103,9 @@
 		"tslib": "2.6.2",
 		"tsx": "4.6.2",
 		"typescript": "5.5.3",
-		"webpack": "5.94.0",
+		"webpack": "5.97.1",
 		"webpack-cli": "5.1.4",
-		"webpack-dev-server": "5.0.4",
+		"webpack-dev-server": "5.1.0",
 		"webpack-manifest-plugin": "5.0.0",
 		"whatwg-fetch": "3.6.19",
 		"winston": "3.11.0",

diff --git a/apps-rendering/src/bodyElement.ts b/apps-rendering/src/bodyElement.ts
@@ -498,32 +498,39 @@ const parse =
 
 				const parser = parse(context, campaigns, atoms);
 
-				const isMiniProfile =
-					listTypeData.type === ListType.MINI_PROFILES;
-				console.log(isMiniProfile);
-				if (isMiniProfile) {
-					return listTypeData.items.flatMap((item) => {
-						console.log(
-							item.title ? parseSubheading(item.title) : [],
-						);
-						return (
-							item.title ? parseSubheading(item.title) : []
-						).concat(
-							item.bio
-								? flattenTextElement(
-										context.docParser(item.bio),
-								  ).map((elem) => Result.ok(elem))
-								: [],
-							item.elements.flatMap(parser),
-							item.endNote ? parseEmphasis(item.endNote) : [],
-						);
-					});
-				} else {
-					return listTypeData.items.flatMap((item) => {
-						return (
-							item.title ? parseTitle(item.title) : []
-						).concat(item.elements.flatMap(parser));
-					});
+				switch (listTypeData.type) {
+					case ListType.MINI_PROFILES:
+						return listTypeData.items.flatMap((item) => {
+							return (
+								item.title ? parseSubheading(item.title) : []
+							).concat(
+								item.bio
+									? flattenTextElement(
+											context.docParser(item.bio),
+									  ).map((elem) => Result.ok(elem))
+									: [],
+								item.elements.flatMap(parser),
+								item.endNote ? parseEmphasis(item.endNote) : [],
+							);
+						});
+					case ListType.MULTI_BYLINE:
+						return listTypeData.items.flatMap((item) => {
+							return (
+								item.title ? parseSubheading(item.title) : []
+							).concat(
+								item.bylineHtml
+									? parseWithTags(['p'])(item.bylineHtml)
+									: [],
+								item.bio ? parseWithTags([])(item.bio) : [],
+								item.elements.flatMap(parser),
+							);
+						});
+					default:
+						return listTypeData.items.flatMap((item) => {
+							return (
+								item.title ? parseTitle(item.title) : []
+							).concat(item.elements.flatMap(parser));
+						});
 				}
 			}
 

diff --git a/apps-rendering/src/item.test.ts b/apps-rendering/src/item.test.ts
@@ -571,7 +571,7 @@ describe('embed elements', () => {
 });
 
 describe('list elements', () => {
-	test('parses non-mini profiles list elements', () => {
+	test('parses key takeaways list elements', () => {
 		const embedElement = {
 			type: ElementType.EMBED,
 			assets: [],
@@ -598,8 +598,6 @@ describe('list elements', () => {
 					{
 						title: 'Some title 1',
 						elements: [embedElement, textElement, textElement],
-						bio: 'Some bio 1',
-						endNote: 'Some end note 1',
 					},
 					{
 						title: 'Some title 2',
@@ -617,17 +615,17 @@ describe('list elements', () => {
 
 		expect(
 			item.body[0].kind === ElementKind.HeadingTwo &&
-				item.body[0].doc.firstChild?.textContent == 'Some title 1',
+				item.body[0].doc.firstChild?.textContent === 'Some title 1',
 		).toBe(true);
 		expect(item.body[1].kind).toBe(ElementKind.Embed);
 		expect(
 			item.body[4].kind === ElementKind.HeadingTwo &&
-				item.body[4].doc.firstChild?.textContent == 'Some title 2',
+				item.body[4].doc.firstChild?.textContent === 'Some title 2',
 		).toBe(true);
 		expect(item.body[5].kind).toBe(ElementKind.Text);
 		expect(
 			item.body[6].kind === ElementKind.HeadingTwo &&
-				item.body[6].doc.firstChild?.textContent == 'Some title 3',
+				item.body[6].doc.firstChild?.textContent === 'Some title 3',
 		).toBe(true);
 	});
 
@@ -677,7 +675,7 @@ describe('list elements', () => {
 
 		expect(
 			item.body[0].kind === ElementKind.Text &&
-				item.body[0].doc.firstChild?.textContent == 'Some title 1',
+				item.body[0].doc.firstChild?.textContent === 'Some title 1',
 		).toBe(true);
 		expect(
 			item.body[1].kind === ElementKind.Text &&
@@ -690,12 +688,58 @@ describe('list elements', () => {
 		).toBe(true);
 		expect(
 			item.body[6].kind === ElementKind.Text &&
-				item.body[6].doc.firstChild?.textContent == 'Some title 2',
+				item.body[6].doc.firstChild?.textContent === 'Some title 2',
 		).toBe(true);
 		expect(item.body[7].kind).toBe(ElementKind.Text);
 		expect(
 			item.body[8].kind === ElementKind.Text &&
-				item.body[8].doc.firstChild?.textContent == 'Some title 3',
+				item.body[8].doc.firstChild?.textContent === 'Some title 3',
+		).toBe(true);
+	});
+
+	test('parses multi-byline list elements', () => {
+		const textElement = {
+			type: ElementType.TEXT,
+			assets: [],
+			textTypeData: {
+				html: '<p>paragraph</p>',
+			},
+		};
+
+		const listElement = {
+			type: ElementType.LIST,
+			assets: [],
+			listTypeData: {
+				items: [
+					{
+						title: 'Some title 1',
+						elements: [textElement],
+						bio: '<p>Some bio 1</p>',
+						bylineHtml: '<a href="/123">Some byline 1</a>',
+					},
+					{
+						title: 'Some title 2',
+						elements: [textElement],
+						bio: '<p>Some bio 2</p>',
+						bylineHtml: '<a href="/456">Some byline 2</a>',
+					},
+				],
+				type: ListType.MULTI_BYLINE,
+			},
+		};
+		const item = f(articleContentWith(listElement)) as Standard;
+
+		expect(
+			item.body[0].kind === ElementKind.Text &&
+				item.body[0].doc.firstChild?.textContent === 'Some title 1',
+		).toBe(true);
+		expect(
+			item.body[1].kind === ElementKind.Text &&
+				item.body[1].doc.textContent === 'Some byline 1',
+		).toBe(true);
+		expect(
+			item.body[2].kind === ElementKind.Text &&
+				item.body[2].doc.textContent === 'Some bio 1',
 		).toBe(true);
 	});
 

diff --git a/dotcom-rendering/.storybook/mocks/bridgetApi.ts b/dotcom-rendering/.storybook/mocks/bridgetApi.ts
@@ -86,6 +86,10 @@ export const getDiscussionClient: BridgetApi<'getDiscussionClient'> = () => ({
 	recommend: async () => discussionErrorResponse,
 });
 
+export const getInteractionClient: BridgetApi<
+	'getInteractionClient'
+> = () => ({});
+
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -100,6 +104,7 @@ export const ensure_all_exports_are_present = {
 	getNewslettersClient,
 	getDiscussionClient,
 	getTagClient,
+	getInteractionClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };
diff --git a/dotcom-rendering/.storybook/mocks/paletteDeclarations.ts b/dotcom-rendering/.storybook/mocks/paletteDeclarations.ts
@@ -1,5 +1,5 @@
 import { ArticleFormat } from '../../src/lib/articleFormat';
-import { paletteDeclarations } from '../../src/palette';
+import { paletteDeclarations } from '../../src/paletteDeclarations';
 
 /**
  * For some unknown reason, Storybook rejects all CSS variables if one of them ends in the text "label"

diff --git a/dotcom-rendering/.storybook/modes.ts b/dotcom-rendering/.storybook/modes.ts
@@ -21,14 +21,34 @@ export const allModes = {
 		globalColourScheme: 'horizontal',
 		viewport: breakpoints.tablet,
 	},
+	'vertical mobile': {
+		globalColourScheme: 'vertical',
+		viewport: breakpoints.mobile,
+	},
 	'vertical mobileMedium': {
 		globalColourScheme: 'vertical',
 		viewport: breakpoints.mobileMedium,
 	},
+	'vertical mobileLandscape': {
+		globalColourScheme: 'vertical',
+		viewport: breakpoints.mobileLandscape,
+	},
+	'vertical phablet': {
+		globalColourScheme: 'vertical',
+		viewport: breakpoints.phablet,
+	},
 	'vertical tablet': {
 		globalColourScheme: 'vertical',
 		viewport: breakpoints.tablet,
 	},
+	'vertical desktop': {
+		globalColourScheme: 'vertical',
+		viewport: breakpoints.desktop,
+	},
+	'vertical leftCol': {
+		globalColourScheme: 'vertical',
+		viewport: breakpoints.leftCol,
+	},
 	'light desktop': {
 		globalColourScheme: 'light',
 		viewport: breakpoints.desktop,