Merge branch 'main' into ih/configure-ab-metrics

Author: i-hardy

dotcom-rendering/package.json

@@ -38,7 +38,7 @@
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/identity-auth": "6.0.1",
 		"@guardian/identity-auth-frontend": "8.1.0",
-		"@guardian/libs": "25.2.0",
+		"@guardian/libs": "25.3.0",
 		"@guardian/ophan-tracker-js": "2.3.2",
 		"@guardian/react-crossword": "6.3.0",
 		"@guardian/shimport": "1.0.2",

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

@@ -62,11 +62,18 @@ export const InteractiveAtomMessenger = ({ id }: Props) => {
 		if (!iframe) return;
 		if (!container) return;
 
+		let timeout: ReturnType<typeof requestAnimationFrame> | null = null;
+
 		const scrollListener = () => {
-			const rect = container.getBoundingClientRect();
-			if (rect.top > 0) return setScroll(0);
-			if (rect.top < -rect.height) return setScroll(1);
-			setScroll(-rect.top);
+			if (timeout != null) {
+				cancelAnimationFrame(timeout);
+			}
+			timeout = requestAnimationFrame(() => {
+				const rect = container.getBoundingClientRect();
+				if (rect.top > 0) return setScroll(0);
+				if (rect.top < -rect.height) return setScroll(1);
+				setScroll(-rect.top);
+			});
 		};
 
 		const messageListener = (event: MessageEvent<unknown>) => {
@@ -89,10 +96,11 @@ export const InteractiveAtomMessenger = ({ id }: Props) => {
 			}
 		};
 
-		window.addEventListener('scroll', scrollListener);
+		window.addEventListener('scroll', scrollListener, { passive: true });
 		window.addEventListener('message', messageListener);
 
 		return () => {
+			if (timeout != null) cancelAnimationFrame(timeout);
 			window.removeEventListener('scroll', scrollListener);
 			window.removeEventListener('message', messageListener);
 		};

dotcom-rendering/src/components/ManyNewslettersForm.tsx

@@ -37,7 +37,10 @@ export interface FormProps {
 const CARD_CONTAINER_WIDTH = 240;
 const CARD_CONTAINER_PADDING = 10;
 
-const formFrameStyle = css`
+const formFrameStyle = (visibleRecaptcha: boolean) => css`
+	background-color: ${visibleRecaptcha
+		? palette.neutral[100]
+		: 'transparent'};
 	border: ${palette.brand[400]} 2px dashed;
 	border-radius: 12px;
 	padding: ${space[2]}px;
@@ -53,17 +56,17 @@ const formFrameStyle = css`
 	}
 `;
 
-const formFieldsStyle = css`
+const formFieldsStyle = (visibleRecaptcha: boolean) => css`
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
 	padding-bottom: ${space[1]}px;
 
 	${from.desktop} {
 		flex-basis: ${2 * CARD_CONTAINER_WIDTH - CARD_CONTAINER_PADDING * 2}px;
-		flex-direction: row;
+		flex-direction: ${visibleRecaptcha ? 'column' : 'row'};
 		flex-shrink: 0;
-		align-items: last baseline;
+		align-items: ${visibleRecaptcha ? 'stretch' : 'last baseline'};
 	}
 `;
 
@@ -85,13 +88,14 @@ const formAsideStyle = (hideOnMobile: boolean) => css`
 	}
 `;
 
-const signUpButtonStyle = css`
+const signUpButtonStyle = (visibleRecaptcha: boolean) => css`
 	justify-content: center;
 	background-color: ${palette.neutral[0]};
 	border-color: ${palette.neutral[0]};
 
 	${from.desktop} {
-		flex-basis: 110px;
+		margin-right: ${visibleRecaptcha ? space[2] : 0}px;
+		flex-basis: ${visibleRecaptcha ? 'unset' : '110px'};
 	}
 
 	&:hover {
@@ -139,7 +143,7 @@ export const ManyNewslettersForm = ({
 		<form
 			aria-label="sign-up confirmation form"
 			aria-live="polite"
-			css={formFrameStyle}
+			css={formFrameStyle(visibleRecaptcha)}
 			onSubmit={(submitEvent) => {
 				submitEvent.preventDefault();
 			}}
@@ -159,7 +163,7 @@ export const ManyNewslettersForm = ({
 				</InlineSkipToWrapper>
 			</aside>
 
-			<div css={formFieldsStyle}>
+			<div css={formFieldsStyle(visibleRecaptcha)}>
 				{status !== 'Success' ? (
 					<>
 						<ManyNewslettersFormFields
@@ -181,7 +185,7 @@ export const ManyNewslettersForm = ({
 							onClick={() => {
 								void handleSubmitButton();
 							}}
-							cssOverrides={signUpButtonStyle}
+							cssOverrides={signUpButtonStyle(visibleRecaptcha)}
 						>
 							Sign up
 						</Button>

dotcom-rendering/src/components/ManyNewslettersFormFields.tsx

@@ -19,9 +19,9 @@ const inputWrapperStyle = css`
 	}
 `;
 
-const inputAndOptInWrapperStyle = css`
+const inputAndOptInWrapperStyle = (visibleRecaptcha: boolean) => css`
 	${from.desktop} {
-		flex-basis: 296px;
+		flex-basis: ${visibleRecaptcha ? 'unset' : '296px'};
 		margin-right: ${space[2]}px;
 	}
 `;
@@ -33,6 +33,18 @@ const optInCheckboxTextSmall = css`
 	}
 `;
 
+const recaptchaContainerStyle = (showRecaptchaContainer: boolean) => css`
+	margin-bottom: ${showRecaptchaContainer ? space[3] : 0}px;
+	padding: ${showRecaptchaContainer ? space[2] : 0}px;
+	background-color: ${showRecaptchaContainer
+		? palette.neutral[93]
+		: 'transparent'};
+
+	.grecaptcha-badge {
+		visibility: hidden;
+	}
+`;
+
 export interface ManyNewslettersFormFieldsProps
 	extends Omit<FormProps, 'handleSubmitButton' | 'newsletterCount'> {}
 
@@ -44,7 +56,7 @@ export const ManyNewslettersFormFields: FC<ManyNewslettersFormFieldsProps> = ({
 	setMarketingOptIn,
 	useReCaptcha,
 	captchaSiteKey,
-	visibleRecaptcha,
+	visibleRecaptcha = false,
 	reCaptchaRef,
 	handleCaptchaError,
 }) => {
@@ -61,7 +73,7 @@ export const ManyNewslettersFormFields: FC<ManyNewslettersFormFieldsProps> = ({
 			: undefined;
 
 	return (
-		<div css={inputAndOptInWrapperStyle}>
+		<div css={inputAndOptInWrapperStyle(visibleRecaptcha)}>
 			<span css={inputWrapperStyle}>
 				<TextInput
 					label="Enter your email"
@@ -96,11 +108,9 @@ export const ManyNewslettersFormFields: FC<ManyNewslettersFormFieldsProps> = ({
 			)}
 			{useReCaptcha && !!captchaSiteKey && (
 				<div
-					css={css`
-						.grecaptcha-badge {
-							visibility: hidden;
-						}
-					`}
+					css={recaptchaContainerStyle(
+						visibleRecaptcha && firstInteractionOccurred,
+					)}
 				>
 					{(!visibleRecaptcha || firstInteractionOccurred) && (
 						<ReactGoogleRecaptcha
@@ -110,6 +120,13 @@ export const ManyNewslettersFormFields: FC<ManyNewslettersFormFieldsProps> = ({
 							size={visibleRecaptcha ? 'normal' : 'invisible'}
 						/>
 					)}
+					{visibleRecaptcha && firstInteractionOccurred && (
+						<span css={[textSans14]}>
+							By ticking this box, you agree to let Google perform
+							a security check to confirm you are a human. Please
+							refer to their terms and privacy policies.
+						</span>
+					)}
 				</div>
 			)}
 		</div>

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -479,6 +479,7 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 									}
 									choices={choiceCards}
 									id={'banner'}
+									submitComponentEvent={submitComponentEvent}
 								/>
 							)}
 							<div css={styles.ctaContainer(isCollapsed)}>

dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx

@@ -55,6 +55,7 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
 					setSelectedChoiceCard={setSelectedChoiceCard}
 					choices={choiceCards}
 					id={'epic'}
+					submitComponentEvent={submitComponentEvent}
 				/>
 			)}
 			<ContributionsEpicButtons