Merge main into add-gallery-body-component

Author: marjisound

dotcom-rendering/cdk/lib/__snapshots__/renderingStack.test.ts.snap

@@ -1061,7 +1061,7 @@ exports[`The RenderingCDKStack matches the snapshot 1`] = `
           },
           {
             "Key": "access_logs.s3.prefix",
-            "Value": "ELBLogs/frontend/article-rendering/PROD",
+            "Value": "application-load-balancer/PROD/frontend/article-rendering",
           },
           {
             "Key": "idle_timeout.timeout_seconds",

dotcom-rendering/cdk/lib/renderingStack.ts

@@ -210,7 +210,8 @@ export class RenderingCDKStack extends CDKStack {
 			},
 			accessLogging: {
 				enabled: true,
-				prefix: `ELBLogs/${guStack}/${guApp}/${stage}`,
+				// This is the prefix pattern DevX assume so that the logs can be shown on the Availability dashboard.
+				prefix: `application-load-balancer/${stage}/${guStack}/${guApp}`,
 			},
 			applicationLogging: {
 				enabled: true,

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -247,8 +247,11 @@ const zIndex = css`
 	z-index: 1;
 `;
 
-const ageWarningMargins = (format: ArticleFormat) =>
-	format.display === ArticleDisplay.Immersive
+const ageWarningMargins = (format: ArticleFormat) => {
+	if (format.design === ArticleDesign.Gallery) {
+		return '';
+	}
+	return format.display === ArticleDisplay.Immersive
 		? css`
 				margin-left: 0px;
 				margin-bottom: 0px;
@@ -275,6 +278,7 @@ const ageWarningMargins = (format: ArticleFormat) =>
 					margin-top: 0;
 				}
 		  `;
+};
 
 const backgroundStyles = css`
 	background-color: ${themePalette('--age-warning-wrapper-background')};

dotcom-rendering/src/components/Card/components/ImageWrapper.tsx

@@ -159,12 +159,14 @@ export const ImageWrapper = ({
 		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
 	const isHorizontalOnMobile =
 		imagePositionOnMobile === 'left' || imagePositionOnMobile === 'right';
+
 	return (
 		<div
 			css={[
 				(imageType === 'slideshow' ||
 					imageType === 'picture' ||
-					imageType === 'video') &&
+					imageType === 'video' ||
+					imageType === 'loop-video') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({
 						imageSize,
@@ -182,7 +184,6 @@ export const ImageWrapper = ({
 						}
 					`,
 				isHorizontalOnMobile && fixImageWidth(imageFixedSizes),
-
 				isHorizontalOnDesktop &&
 					css`
 						${from.tablet} {

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

@@ -19,6 +19,7 @@ type Props = {
 	discussionApiUrl: string;
 	absoluteServerTimes: boolean;
 	renderingTarget: RenderingTarget;
+	isAdFreeUser: boolean;
 };
 
 type OnwardsResponse = {
@@ -32,6 +33,20 @@ const minHeight = css`
 	min-height: 300px;
 `;
 
+const isTrailPaidContent = (trailType: FETrailType) =>
+	trailType.branding?.brandingType?.name === 'paid-content';
+
+const buildTrails = (
+	trails: FETrailType[],
+	trailLimit: number,
+	isAdFreeUser: boolean,
+): TrailType[] => {
+	return trails
+		.filter((trailType) => !(isTrailPaidContent(trailType) && isAdFreeUser))
+		.slice(0, trailLimit)
+		.map(decideTrail);
+};
+
 export const FetchOnwardsData = ({
 	url,
 	limit,
@@ -40,16 +55,10 @@ export const FetchOnwardsData = ({
 	discussionApiUrl,
 	absoluteServerTimes,
 	renderingTarget,
+	isAdFreeUser,
 }: Props) => {
 	const { data, error } = useApi<OnwardsResponse>(url);
 
-	const buildTrails = (
-		trails: FETrailType[],
-		trailLimit: number,
-	): TrailType[] => {
-		return trails.slice(0, trailLimit).map(decideTrail);
-	};
-
 	if (error) {
 		// Send the error to Sentry and then prevent the element from rendering
 		window.guardian.modules.sentry.reportError(error, 'onwards-lower');
@@ -76,7 +85,7 @@ export const FetchOnwardsData = ({
 		<div css={minHeight}>
 			<Carousel
 				heading={data.heading || data.displayname} // Sometimes the api returns heading as 'displayName'
-				trails={buildTrails(data.trails, limit)}
+				trails={buildTrails(data.trails, limit, isAdFreeUser)}
 				description={data.description}
 				onwardsSource={onwardsSource}
 				format={format}

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -105,8 +105,8 @@ const ImmersiveCardLayout = ({
 	const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
 
 	return (
-		<UL padBottom={true}>
-			<LI key={card.url} padSides={true}>
+		<UL padBottom={true} key={card.url}>
+			<LI padSides={true}>
 				<FeatureCard
 					collectionId={collectionId}
 					linkTo={card.url}
@@ -447,6 +447,7 @@ const FullWidthCardLayout = ({
 			showTopBar={!isFirstRow}
 			padBottom={!isLastRow}
 			hasLargeSpacing={!isLastRow}
+			key={card.url}
 		>
 			<LI
 				padSides={true}
@@ -501,6 +502,7 @@ const HalfWidthCardLayout = ({
 	isFirstRow,
 	isFirstStandardRow,
 	aspectRatio,
+	row,
 	isLastRow,
 	containerLevel,
 	isInHideTrailsAbTest,
@@ -513,6 +515,7 @@ const HalfWidthCardLayout = ({
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
+	row: number;
 	isLastRow: boolean;
 	containerLevel: DCRContainerLevel;
 	isInHideTrailsAbTest?: boolean;
@@ -527,6 +530,7 @@ const HalfWidthCardLayout = ({
 			showTopBar={!isFirstRow}
 			/** We use one full top bar for the first row and use a split one for subsequent rows */
 			splitTopBar={!isFirstStandardRow}
+			key={row}
 		>
 			{cards.map((card, cardIndex) => {
 				return (
@@ -642,6 +646,7 @@ export const FlexibleGeneral = ({
 								isFirstRow={!splash.length && i === 0}
 								isFirstStandardRow={i === 0}
 								aspectRatio={aspectRatio}
+								row={i + 1}
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
 								isInHideTrailsAbTest={isInHideTrailsAbTest}

dotcom-rendering/src/components/FlexibleSpecial.stories.tsx

@@ -101,7 +101,7 @@ const meta = {
 		absoluteServerTimes: true,
 		imageLoading: 'eager',
 		aspectRatio: '5:4',
-		frontSectionTitle: 'Flexible general',
+		frontSectionTitle: 'Flexible special',
 	},
 	render: ({ frontSectionTitle, ...args }) => (
 		<FrontSection

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -9,10 +9,7 @@ import type {
 	DCRFrontCard,
 	DCRGroupedTrails,
 } from '../types/front';
-import type {
-	ImagePositionType,
-	ImageSizeType,
-} from './Card/components/ImageWrapper';
+import type { ImagePositionType } from './Card/components/ImageWrapper';
 import { LI } from './Card/components/LI';
 import type { TrailTextSize } from './Card/components/TrailText';
 import { UL } from './Card/components/UL';
@@ -36,7 +33,6 @@ type BoostProperties = {
 	headlineSizes: ResponsiveFontSize;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
-	imageSize: ImageSizeType;
 	supportingContentAlignment: Alignment;
 	liveUpdatesAlignment: Alignment;
 	trailTextSize: TrailTextSize;
@@ -51,23 +47,18 @@ const determineCardProperties = (
 	supportingContentLength: number,
 	mediaCard: boolean,
 	imageSuppressed: boolean,
-	hasLivePlayable: boolean,
 ): BoostProperties => {
 	switch (boostLevel) {
 		// The default boost level is equal to no boost. It is the same as the default card layout.
 		case 'default':
 			return {
 				headlineSizes: {
-					desktop:
-						imageSuppressed || hasLivePlayable
-							? 'xxlarge'
-							: 'xlarge',
+					desktop: imageSuppressed ? 'xxlarge' : 'xlarge',
 					tablet: 'large',
 					mobile: 'medium',
 				},
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
-				imageSize: 'large',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
@@ -76,16 +67,12 @@ const determineCardProperties = (
 		case 'boost':
 			return {
 				headlineSizes: {
-					desktop:
-						imageSuppressed || hasLivePlayable
-							? 'xxxlarge'
-							: 'xxlarge',
+					desktop: imageSuppressed ? 'xxxlarge' : 'xxlarge',
 					tablet: 'xlarge',
 					mobile: 'large',
 				},
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
-				imageSize: 'jumbo',
 				supportingContentAlignment:
 					supportingContentLength >= 3 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
@@ -94,16 +81,12 @@ const determineCardProperties = (
 		case 'megaboost':
 			return {
 				headlineSizes: {
-					desktop:
-						imageSuppressed || hasLivePlayable
-							? 'xxxlarge'
-							: 'xxlarge',
+					desktop: imageSuppressed ? 'xxxlarge' : 'xxlarge',
 					tablet: 'xlarge',
 					mobile: 'xlarge',
 				},
 				imagePositionOnDesktop: mediaCard ? 'top' : 'bottom',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
-				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
@@ -117,7 +100,6 @@ const determineCardProperties = (
 				},
 				imagePositionOnDesktop: mediaCard ? 'top' : 'bottom',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
-				imageSize: 'jumbo',
 				supportingContentAlignment: 'horizontal',
 				liveUpdatesAlignment: 'horizontal',
 				trailTextSize: 'large',
@@ -155,7 +137,6 @@ export const OneCardLayout = ({
 		headlineSizes,
 		imagePositionOnDesktop,
 		imagePositionOnMobile,
-		imageSize,
 		supportingContentAlignment,
 		liveUpdatesAlignment,
 		trailTextSize,
@@ -164,7 +145,6 @@ export const OneCardLayout = ({
 		card.supportingContent?.length ?? 0,
 		isMediaCard(card.format),
 		!card.image,
-		card.showLivePlayable,
 	);
 
 	return (
@@ -179,7 +159,7 @@ export const OneCardLayout = ({
 					headlineSizes={headlineSizes}
 					imagePositionOnDesktop={imagePositionOnDesktop}
 					imagePositionOnMobile={imagePositionOnMobile}
-					imageSize={imageSize}
+					imageSize={'jumbo'}
 					trailText={card.trailText}
 					supportingContent={card.supportingContent}
 					supportingContentAlignment={supportingContentAlignment}

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

@@ -325,7 +325,7 @@ export const InteractiveBlockComponent = ({
 	const wrapperRef = useRef<HTMLDivElement>(null);
 	const placeholderLinkRef = useRef<HTMLAnchorElement>(null);
 	const [loaded, setLoaded] = useState(false);
-	const { darkModeAvailable } = useConfig();
+	const { darkModeAvailable, renderingTarget } = useConfig();
 
 	// Define some one-time flags
 	const isDatawrapperGraphic =
@@ -352,13 +352,6 @@ export const InteractiveBlockComponent = ({
 	useOnce(() => {
 		// We've brought the behavior from boot.js into this file to avoid loading 2 extra scripts
 
-		// Define additional one-time flags - these depend on window/document objects
-		const isRunningInWebEnvironment =
-			!document.querySelector('.ios') &&
-			!document.querySelector('.android')
-				? true
-				: false;
-
 		const prefersDarkScheme = window.matchMedia(
 			'(prefers-color-scheme: dark)',
 		).matches;
@@ -382,7 +375,7 @@ export const InteractiveBlockComponent = ({
 			}
 
 			// Fix darkmode for web environment
-			if (isRunningInWebEnvironment && !requiresDarkMode) {
+			if (renderingTarget === 'Web' && !requiresDarkMode) {
 				if (isDatawrapperGraphic || isUploaderEmbedPath) {
 					// Add the 'dark=false' search param
 					if (graphicUrl.search.length) {

dotcom-rendering/src/components/Lazy.tsx

@@ -30,7 +30,7 @@ export const Lazy = ({ children, margin, disableFlexStyles }: Props) => {
 	// being loaded as part of a Chromatic story or not so that
 	// we can prevent lazy loading our storybook snapshots that we
 	// use for visual regression
-	const renderChildren = hasBeenSeen || Lazy.disabled;
+	const renderChildren = !!hasBeenSeen || Lazy.disabled;
 	return (
 		<div ref={setRef} css={!disableFlexStyles && flexGrowStyles}>
 			{renderChildren && <>{children}</>}