Merge branch 'main' into jm/feat-tiny-banner-close-button

Author: juabara

dotcom-rendering/package.json

@@ -32,7 +32,7 @@
 		"@guardian/bridget": "8.7.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "62.0.1",
-		"@guardian/commercial-core": "28.0.0",
+		"@guardian/commercial-core": "29.0.0",
 		"@guardian/core-web-vitals": "7.0.0",
 		"@guardian/eslint-config-typescript": "11.0.0",
 		"@guardian/identity-auth": "6.0.1",

dotcom-rendering/playwright/tests/commercial.e2e.spec.ts

@@ -13,14 +13,13 @@ test.describe('Commercial E2E tests', () => {
 		await cmpAcceptAll(page);
 
 		const fixedSlots = [
-			'carrot', // Not used often, likely to be unfilled
 			'right',
 			'merchandising-high',
 			'mostpop',
 			'merchandising',
 		];
 
-		const totalSlotsExpected = 16; // All slots, even if unfilled ie. `display: none`
+		const totalSlotsExpected = 15; // All slots, even if unfilled ie. `display: none`
 		const inlineSlots = totalSlotsExpected - fixedSlots.length;
 
 		// We are excluding survey slot as they can be switched off

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -31,7 +31,6 @@ type SlotNamesWithPageSkin = SlotName | 'pageskin';
 
 type ServerRenderedSlot = Exclude<
 	SlotNamesWithPageSkin,
-	| 'carrot'
 	| 'comments-expanded'
 	| 'crossword-banner'
 	| 'exclusion'

dotcom-rendering/src/components/MainMediaGallery.tsx

@@ -12,7 +12,7 @@ import { LightboxLink } from './LightboxLink';
 import { Picture } from './Picture';
 
 type Props = {
-	mainMedia: ImageBlockElement;
+	mainMedia?: ImageBlockElement;
 	format: ArticleFormat;
 	renderingTarget: RenderingTarget;
 };
@@ -32,6 +32,10 @@ export const MainMediaGallery = ({
 	format,
 	renderingTarget,
 }: Props) => {
+	// This is to support some galleries created in 2007 where mainMedia is missing
+	if (isUndefined(mainMedia)) {
+		return <div css={styles}></div>;
+	}
 	const asset = getImage(mainMedia.media.allImages);
 
 	if (asset === undefined) {

dotcom-rendering/src/layouts/GalleryLayout.stories.tsx

@@ -105,3 +105,26 @@ export const Web = {
 		],
 	},
 } satisfies Story;
+
+export const WebWithoutMainMedia = {
+	args: {
+		renderingTarget: 'Web',
+		NAV: {
+			...extractNAV(webArticle.frontendData.nav),
+			selectedPillar: getCurrentPillar(webArticle.frontendData),
+		},
+		gallery: {
+			...addBrandingAndAffiliateDisclaimer(webArticle),
+			mainMedia: undefined,
+		},
+	},
+	parameters: {
+		formats: [
+			{
+				design: webArticle.design,
+				display: webArticle.display,
+				theme: webArticle.theme,
+			},
+		],
+	},
+} satisfies Story;

dotcom-rendering/src/lib/adStyles.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { adSizes, constants } from '@guardian/commercial-core';
-import { from, space, textSans12, until } from '@guardian/source/foundations';
+import { from, textSans12, until } from '@guardian/source/foundations';
 import { palette } from '../palette';
 
 const labelHeight = constants.AD_LABEL_HEIGHT;
@@ -217,23 +217,6 @@ const spacefinderAdSlotStyles = css`
 		}
 	}
 
-	.ad-slot--carrot {
-		float: left;
-		clear: both;
-		width: 140px;
-		margin-right: 20px;
-		margin-bottom: ${space[1]}px;
-		${from.leftCol} {
-			position: relative;
-			margin-left: -160px;
-			width: 140px;
-		}
-		${from.wide} {
-			margin-left: -240px;
-			width: 220px;
-		}
-	}
-
 	/* Scroll for more label on interscrollers */
 	.ad-slot__scroll {
 		position: fixed;

dotcom-rendering/src/server/render.front.web.tsx

@@ -135,6 +135,7 @@ export const renderFront = ({
 		abTests: front.config.abTests,
 		serverSideABTests: front.config.serverSideABTests,
 		brazeApiKey: front.config.brazeApiKey,
+		contentType: front.config.contentType,
 		googleRecaptchaSiteKey: front.config.googleRecaptchaSiteKey,
 		// Until we understand exactly what config we need to make available client-side,
 		// add everything we haven't explicitly typed as unknown config

dotcom-rendering/src/types/article.ts

@@ -18,6 +18,7 @@ import {
 	type TableOfContentsItem,
 } from '../model/enhanceTableOfContents';
 import { enhancePinnedPost } from '../model/pinnedPost';
+import { logger } from '../server/lib/logging';
 import { parse as parseStoryPackage, type StoryPackage } from '../storyPackage';
 import type {
 	AdPlaceholderBlockElement,
@@ -48,7 +49,7 @@ export type ArticleFields = {
 export type Gallery = ArticleFields & {
 	design: ArticleDesign.Gallery;
 	bodyElements: (ImageBlockElement | AdPlaceholderBlockElement)[];
-	mainMedia: ImageBlockElement;
+	mainMedia?: ImageBlockElement;
 };
 
 export type OtherArticles = ArticleFields & {
@@ -60,12 +61,12 @@ export type Article = Gallery | OtherArticles;
 export const getGalleryMainMedia = (
 	mainMediaElements: FEElement[],
 	trailImage?: ImageBlockElement,
-): ImageBlockElement => {
+): ImageBlockElement | undefined => {
 	const mainMedia = mainMediaElements[0];
 
 	if (isUndefined(mainMedia)) {
 		if (isUndefined(trailImage)) {
-			throw new Error('No main media or trail picture found');
+			logger.warn('No main media or trail picture found');
 		}
 		return trailImage;
 	}