Merge branch 'arc-themes-release-version-2.3.0' into playwright

WPMedia · Mar 21, 2024 · d72eb8b · d72eb8b
2 parents f352901 + 81a5bd1
commit d72eb8b
Show file tree

Hide file tree

Showing 45 changed files with 815 additions and 709 deletions.
diff --git a/blocks/alert-bar-content-source-block/package-lock.json b/blocks/alert-bar-content-source-block/package-lock.json
diff --git a/blocks/article-body-block/package-lock.json b/blocks/article-body-block/package-lock.json
diff --git a/blocks/author-content-source-block/package-lock.json b/blocks/author-content-source-block/package-lock.json
diff --git a/blocks/card-list-block/features/card-list/default.jsx b/blocks/card-list-block/features/card-list/default.jsx
@@ -10,6 +10,7 @@ import {
 	Date,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	Heading,
 	HeadingSection,
@@ -84,21 +85,29 @@ const CardListItems = (props) => {
 		  promo_items {
 			 basic {
 				_id
-				type
-				url
 				auth {
 					${RESIZER_TOKEN_VERSION}
 				}
+				focal_point {
+					x
+					y
+				}
+				type
+				url
 			 }
 			 lead_art {
 				promo_items {
 				  basic {
 					_id
-					type
-					url
 					auth {
 						${RESIZER_TOKEN_VERSION}
 					}
+					focal_point {
+						x
+						y
+					}
+					type
+					url
 				  }
 				}
 				type
@@ -170,7 +179,7 @@ const CardListItems = (props) => {
 				ansImage,
 				aspectRatio: "4:3",
 				resizedOptions: {
-					smart: true,
+					...getFocalFromANS(ansImage),
 				},
 				responsiveImages: [377, 754, 1508],
 				width: 377,
@@ -230,7 +239,7 @@ const CardListItems = (props) => {
 										ansImage: itemAnsImage,
 										aspectRatio: "3:2",
 										resizedOptions: {
-											smart: true,
+											...getFocalFromANS(itemAnsImage),
 										},
 										responsiveImages: [105, 210, 420],
 										width: 105,

diff --git a/blocks/collections-content-source-block/package-lock.json b/blocks/collections-content-source-block/package-lock.json
diff --git a/blocks/commerce-product-content-source-block/package-lock.json b/blocks/commerce-product-content-source-block/package-lock.json
diff --git a/blocks/content-api-source-block/package-lock.json b/blocks/content-api-source-block/package-lock.json
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
@@ -11,6 +11,7 @@ import {
 	Conditional,
 	Date as DateComponent,
 	formatAuthors,
+	getFocalFromANS,
 	getImageFromANS,
 	getVideoFromANS,
 	Heading,
@@ -211,21 +212,29 @@ const ExtraLargePromo = ({ customFields }) => {
 						promo_items {
 							basic {
 								_id
-								type
-								url
 								auth {
 									${RESIZER_TOKEN_VERSION}
 								}
+								focal_point {
+									x
+									y
+								}
+								type
+								url
 							}
 						}
 					}
 					basic {
 						_id
-						type
-						url
 						auth {
 							${RESIZER_TOKEN_VERSION}
 						}
+						focal_point {
+							x
+							y
+						}
+						type
+						url
 					}
 				}
 				website_url
@@ -296,21 +305,22 @@ const ExtraLargePromo = ({ customFields }) => {
 		showByline && content?.credits?.by?.length > 0
 			? formatAuthors(content.credits.by, phrases.t("global.and-text"))
 			: null;
+	const ansImage = getImageFromANS(content);
 	const imageParams =
 		showImage &&
-		(imageOverrideURL || (content && getImageFromANS(content))
+		(imageOverrideURL || ansImage
 			? {
 					ansImage: imageOverrideURL
 						? {
-								_id: resizedImage ? imageOverrideId : "",
-								url: imageOverrideURL,
-								auth: resizedAuth || {},
-						  }
-						: getImageFromANS(content),
+							_id: resizedImage ? imageOverrideId : "",
+							url: imageOverrideURL,
+							auth: resizedAuth || {},
+						}
+						: ansImage,
 					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [400, 600, 800, 1200],
 					width: 800,

diff --git a/blocks/header-nav-chain-block/chains/header-nav-chain-block/_children/nav-widget.jsx b/blocks/header-nav-chain-block/chains/header-nav-chain-block/_children/nav-widget.jsx
@@ -31,7 +31,7 @@ const NavWidget = ({
 		) : null) ||
 		(type === "menu" ? (
 			<Button
-				aria-label={phrases.t("header-nav-chain-block.sections-button")}
+				accessibilityLabel={phrases.t("header-nav-chain-block.sections-button")}
 				onClick={menuButtonClickAction}
 				iconRight={<Icon name="HamburgerMenu" />}
 				variant="secondary-reverse"

diff --git a/blocks/header-nav-chain-block/chains/header-nav-chain-block/_children/nav-widget.test.jsx b/blocks/header-nav-chain-block/chains/header-nav-chain-block/_children/nav-widget.test.jsx
@@ -10,6 +10,7 @@ jest.mock("fusion:properties", () =>
 		locale: "somelocale",
 	}))
 );
+
 jest.mock("fusion:context", () => ({
 	useFusionContext: jest.fn(() => ({
 		arcSite: "dagen",

diff --git a/blocks/header-nav-chain-block/chains/header-nav-chain-block/default.jsx b/blocks/header-nav-chain-block/chains/header-nav-chain-block/default.jsx
@@ -19,6 +19,7 @@ export function PresentationalNav(props) {
 	const {
 		ariaLabelLink,
 		children,
+		closeNavigation,
 		customFields,
 		displayLinks,
 		horizontalLinksHierarchy,
@@ -100,8 +101,10 @@ export function PresentationalNav(props) {
 					className={`${BLOCK_CLASS_NAME}__flyout-overlay ${
 						isSectionDrawerOpen ? "open" : "closed"
 					}`}
+					data-testid="nav-chain-flyout-overlay"
 					direction="vertical"
 					justification="start"
+					onClick={closeNavigation}
 				>
 					<FocusTrap
 						active={isSectionDrawerOpen}
@@ -140,6 +143,7 @@ export function PresentationalNav(props) {
 								}`}
 								direction="vertical"
 								justification="start"
+								onClick={(e) => e.stopPropagation()}
 								// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
 								tabIndex={!sections.length ? "-1" : null}
 							>
@@ -273,6 +277,7 @@ const Nav = (props) => {
 	return (
 		<PresentationalNav
 			ariaLabelLink={ariaLabelLink}
+			closeNavigation={closeNavigation}
 			customFields={customFields}
 			displayLinks={displayLinks}
 			horizontalLinksHierarchy={horizontalLinksHierarchy}