Merge branch 'arc-themes-release-version-2.5.0' into ASUB-8521-Social…

…MediaButtons
WPMedia · Jul 26, 2024 · 3bf091c · 3bf091c
2 parents 9496cdd + 14dee61
commit 3bf091c
Show file tree

Hide file tree

Showing 21 changed files with 255 additions and 288 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,7 +9,7 @@ module.exports = {
 		Atomics: "readonly",
 		SharedArrayBuffer: "readonly",
 		Fusion: "readonly",
-		history: "readonly"
+		history: "readonly",
 	},
 	ignorePatterns: [
 		"**/features/ad-taboola/default.jsx",

diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
 	"useTabs": true,
-	"printWidth": 100
+	"printWidth": 100,
+	experimentalTernaries: false,
 }
diff --git a/blocks/card-list-block/features/card-list/default.jsx b/blocks/card-list-block/features/card-list/default.jsx
@@ -144,7 +144,12 @@ const CardListItems = (props) => {
 
 	const sourceContent = contentElements[offsetOverride];
 
-	const displayDate = localizeDateTime(sourceContent.display_date, dateTimeFormat, language, timeZone);
+	const displayDate = localizeDateTime(
+		sourceContent.display_date,
+		dateTimeFormat,
+		language,
+		timeZone,
+	);
 
 	/* Author Formatting */
 	const bylineNodes = formatAuthors(sourceContent?.credits?.by, phrases.t("global.and-text"));
@@ -178,9 +183,7 @@ const CardListItems = (props) => {
 		? {
 				ansImage,
 				aspectRatio: "4:3",
-				resizedOptions: {
-					...getFocalFromANS(ansImage),
-				},
+				resizedOptions: getFocalFromANS(ansImage),
 				responsiveImages: [377, 754, 1508],
 				width: 377,
 			}
@@ -238,9 +241,7 @@ const CardListItems = (props) => {
 								? {
 										ansImage: itemAnsImage,
 										aspectRatio: "3:2",
-										resizedOptions: {
-											...getFocalFromANS(itemAnsImage),
-										},
+										resizedOptions: getFocalFromANS(itemAnsImage),
 										responsiveImages: [105, 210, 420],
 										width: 105,
 									}

diff --git a/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx b/blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx
@@ -55,9 +55,9 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 		resizedImage || !imageURL
 			? {}
 			: {
-				source: "signing-service",
-				query: { id: manualImageId || imageURL },
-			}
+					source: "signing-service",
+					query: { id: manualImageId || imageURL },
+				},
 	);
 	if (imageAuth && !resizedAuth) {
 		resizedAuth = JSON.parse(imageAuth);
@@ -74,25 +74,23 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 		_id: resizedImage ? imageId : manualImageId,
 		url: imageURL,
 		auth: resizedAuth,
-		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined
-	}
+		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined,
+	};
 	const alt = headline || description || null;
 	const imageParams =
 		imageURL && resizedAuth
 			? {
-				ansImage,
-				alt,
-				aspectRatio: imageRatio,
-				resizedOptions: {
-					...getFocalFromANS(ansImage)
-				},
-				responsiveImages: [200, 400, 600, 800, 1200],
-				width: 600,
-			}
+					alt,
+					ansImage,
+					aspectRatio: imageRatio,
+					resizedOptions: getFocalFromANS(ansImage),
+					responsiveImages: [200, 400, 600, 800, 1200],
+					width: 600,
+				}
 			: {
-				src: fallbackImage,
-				alt,
-			};
+					alt,
+					src: fallbackImage,
+				};
 
 	const availableDescription = showDescription ? description : null;
 	const availableHeadline = showHeadline ? headline : null;
@@ -126,7 +124,7 @@ const ExtraLargeManualPromo = ({ customFields }) => {
 									imageURL: "url",
 									imageId: "_id",
 									imageAuth: "auth",
-									imageFocalPoint: "focal_point"
+									imageFocalPoint: "focal_point",
 								})}
 								suppressContentEditableWarning
 							>

diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -169,7 +169,7 @@ const ExtraLargePromo = ({ customFields }) => {
 				? {
 						feature: "extra-large-promo",
 						...itemContentConfig.contentConfigValues,
-				  }
+					}
 				: null,
 			filter: `{
 				_id
@@ -312,24 +312,22 @@ const ExtraLargePromo = ({ customFields }) => {
 		showImage &&
 		(imageOverrideURL || ansImage
 			? {
+					alt: content?.headlines?.basic || "",
 					ansImage: imageOverrideURL
 						? {
-							_id: resizedImage ? imageOverrideId : manualImageId,
-							url: imageOverrideURL,
-							auth: resizedAuth || {},
-						}
+								_id: resizedImage ? imageOverrideId : manualImageId,
+								url: imageOverrideURL,
+								auth: resizedAuth || {},
+							}
 						: ansImage,
-					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
-					resizedOptions: {
-						...getFocalFromANS(ansImage),
-					},
+					resizedOptions: getFocalFromANS(ansImage),
 					responsiveImages: [400, 600, 800, 1200],
 					width: 800,
-			  }
+				}
 			: {
 					src: fallbackImage,
-			  });
+				});
 	const videoOrGalleryContentType =
 		getType("video", content) ||
 		getType("gallery", content) ||

diff --git a/blocks/hero-block/features/hero/default.jsx b/blocks/hero-block/features/hero/default.jsx
@@ -45,20 +45,16 @@ function Hero({ customFields }) {
 	const { arcSite } = useFusionContext();
 	const { searchableField } = useEditableContent();
 	const { fallbackImage, resizerURL } = getProperties(arcSite);
-	const imageId = imageDesktopURL
-		? getManualImageID(imageDesktopURL)
-		: desktopImgId;
+	const imageId = imageDesktopURL ? getManualImageID(imageDesktopURL) : desktopImgId;
 
-	const imageMobileId = imageMobileURL
-		? getManualImageID(imageMobileURL)
-		: imgMobileId;
+	const imageMobileId = imageMobileURL ? getManualImageID(imageMobileURL) : imgMobileId;
 	let desktopAuth = useContent(
 		!imageDesktopAuth && imageId
 			? {
 					source: "signing-service",
 					query: { id: imageId },
-			  }
-			: {}
+				}
+			: {},
 	);
 
 	if (!desktopAuth || (desktopAuth && !Object.keys(desktopAuth).length)) {
@@ -74,8 +70,8 @@ function Hero({ customFields }) {
 			? {
 					source: "signing-service",
 					query: { id: imageMobileId },
-			  }
-			: {}
+				}
+			: {},
 	);
 	if (mobileAuth?.hash) {
 		mobileAuth[RESIZER_TOKEN_VERSION] = mobileAuth.hash;
@@ -93,41 +89,42 @@ function Hero({ customFields }) {
 	const desktopImageParams =
 		imageId && imageDesktopURL
 			? {
-					src: imageANSToImageSrc({
-						_id: imageId,
-						url: imageDesktopURL,
-					}),
+					alt,
+					height: 800,
 					resizedOptions: {
 						auth: desktopAuth || {},
 						smart: true,
 					},
-					width: 1200,
-					height: 800,
 					resizerURL,
-			  }
+					src: imageANSToImageSrc({
+						_id: imageId,
+						url: imageDesktopURL,
+					}),
+					width: 1200,
+				}
 			: {
 					src: fallbackImage,
-			  };
+				};
 	const mobileImageParams =
 		imageMobileId && imageMobileURL
 			? {
+					alt,
 					ansImage: {
 						_id: imageMobileId,
 						url: imageMobileURL,
 						auth: mobileAuth || {},
 					},
-					alt,
+					height: 400,
 					resizedOptions: {
 						smart: true,
 					},
-					width: 320,
-					height: 400,
 					resizerURL,
-			  }
+					width: 320,
+				}
 			: {
-					src: fallbackImage,
 					alt: imageMobileAlt,
-			  };
+					src: fallbackImage,
+				};
 	const HeadingWrapper = headline ? HeadingSection : Fragment;
 	return (
 		<div className={classes}>

diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -65,9 +65,9 @@ const LargeManualPromo = ({ customFields }) => {
 		resizedImage || !imageURL
 			? {}
 			: {
-				source: "signing-service",
-				query: { id: manualImageId || imageURL },
-			}
+					source: "signing-service",
+					query: { id: manualImageId || imageURL },
+				},
 	);
 	if (imageAuth && !resizedAuth) {
 		resizedAuth = JSON.parse(imageAuth);
@@ -83,26 +83,24 @@ const LargeManualPromo = ({ customFields }) => {
 		_id: resizedImage ? imageId : manualImageId,
 		url: imageURL,
 		auth: resizedAuth,
-		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined
-	}
+		focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined,
+	};
 
 	const alt = headline || description || null;
 	const imageParams =
 		imageURL && resizedAuth
 			? {
-				ansImage,
-				alt,
-				aspectRatio: imageRatio,
-				resizedOptions: {
-					...getFocalFromANS(ansImage)
-				},
-				responsiveImages: [200, 400, 600, 800, 1200],
-				width: 600,
-			}
+					alt,
+					ansImage,
+					aspectRatio: imageRatio,
+					resizedOptions: getFocalFromANS(ansImage),
+					responsiveImages: [200, 400, 600, 800, 1200],
+					width: 600,
+				}
 			: {
-				src: fallbackImage,
-				alt,
-			};
+					alt,
+					src: fallbackImage,
+				};
 
 	return (
 		<LazyLoad enabled={shouldLazyLoad}>
@@ -132,7 +130,11 @@ const LargeManualPromo = ({ customFields }) => {
 						</MediaItem>
 					) : null}
 					<Stack className={`${BLOCK_CLASS_NAME}__text`}>
-						<PromoOverline showOverline={showOverline} overline={overline} overlineURL={overlineURL} />
+						<PromoOverline
+							showOverline={showOverline}
+							overline={overline}
+							overlineURL={overlineURL}
+						/>
 						{showDescription || showHeadline ? (
 							<Stack>
 								{showHeadline && headline ? (

diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -179,7 +179,7 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 						"arc-site": arcSite,
 						feature: "large-promo",
 						...customFields?.itemContentConfig?.contentConfigValues,
-				  }
+					}
 				: null,
 			filter: `{
 				_id
@@ -272,7 +272,7 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 	let resizedAuth = useContent(
 		resizedImage || !imageOverrideURL
 			? {}
-			: { source: "signing-service", query: { id: manualImageId || imageOverrideURL } }
+			: { source: "signing-service", query: { id: manualImageId || imageOverrideURL } },
 	);
 	if (imageOverrideAuth && !resizedAuth) {
 		resizedAuth = JSON.parse(imageOverrideAuth);
@@ -292,12 +292,10 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 		fallbackImage,
 	} = getProperties(arcSite);
 
-	const displayDate = content?.display_date && Date.parse(content?.display_date) ? localizeDateTime(
-		new Date(content?.display_date),
-		dateTimeFormat,
-		language,
-		timeZone
-	) : "";
+	const displayDate =
+		content?.display_date && Date.parse(content?.display_date)
+			? localizeDateTime(new Date(content?.display_date), dateTimeFormat, language, timeZone)
+			: "";
 	const phrases = usePhrases();
 
 	const editableDescription = content?.description
@@ -349,28 +347,26 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 	const contentUrl = content?.websites?.[arcSite]?.website_url;
 	const embedMarkup = playVideoInPlace && getVideoFromANS(content);
 	const ansImage = getImageFromANS(content);
-	const promoImageParams = 
+	const promoImageParams =
 		showImage &&
 		(imageOverrideURL || ansImage
 			? {
+					alt: content?.headlines?.basic || "",
 					ansImage: imageOverrideURL
 						? {
 								_id: resizedImage ? imageOverrideId : manualImageId,
-								url: imageOverrideURL,
 								auth: resizedAuth || {},
-						  }
+								url: imageOverrideURL,
+							}
 						: ansImage,
-					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
-					resizedOptions: {
-						...getFocalFromANS(ansImage),
-					},
+					resizedOptions: getFocalFromANS(ansImage),
 					responsiveImages: [400, 600, 800, 1200],
 					width: 377,
-			  }
+				}
 			: {
 					src: fallbackImage,
-			  });
+				});
 	return (
 		<LargePromoPresentation
 			aspectRatio={imageRatio}