Merge branch 'jm/feat-2-step-dismissible-banner-v2' of github.com:guardian/dotcom-rendering into jm/feat-2-step-dismissible-banner-v2

Author: Juarez Mota

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

@@ -94,6 +94,7 @@ export const CommentCount = ({ discussionApiUrl, shortUrlId }: Props) => {
 			css={containerStyles}
 			data-testid="comment-counts"
 			value={`${long} comments on this article`}
+			data-gu-name="comment-count"
 		>
 			<a
 				href="#comments"

dotcom-rendering/src/components/Contributor.tsx

@@ -93,6 +93,7 @@ export const Contributor = ({ byline, tags, format, source }: Props) => (
 		aria-label="Contributor info"
 		data-component="meta-byline"
 		data-link-name="byline"
+		data-gu-name="byline"
 	>
 		{format.design !== ArticleDesign.Interview && (
 			<div

dotcom-rendering/src/components/Dateline.tsx

@@ -53,7 +53,11 @@ export const Dateline = ({
 	};
 	if (secondaryDateline && !secondaryDateline.includes(primaryDateline)) {
 		return (
-			<details css={datelineStyles} style={mobileColour}>
+			<details
+				css={datelineStyles}
+				style={mobileColour}
+				data-gu-name="dateline"
+			>
 				<summary css={primaryStyles}>
 					<span css={hoverUnderline}>{primaryDateline}</span>
 				</summary>
@@ -62,7 +66,7 @@ export const Dateline = ({
 		);
 	}
 	return (
-		<div css={datelineStyles} style={mobileColour}>
+		<div css={datelineStyles} style={mobileColour} data-gu-name="dateline">
 			{primaryDateline}
 		</div>
 	);

dotcom-rendering/src/components/DecideContainer.tsx

@@ -47,6 +47,7 @@ type Props = {
 	frontId?: string;
 	collectionId: number;
 	containerLevel?: DCRContainerLevel;
+	isInOpinionNoAvatarVariant?: boolean;
 };
 
 export const DecideContainer = ({
@@ -62,6 +63,7 @@ export const DecideContainer = ({
 	frontId,
 	collectionId,
 	containerLevel,
+	isInOpinionNoAvatarVariant,
 }: Props) => {
 	switch (containerType) {
 		case 'dynamic/fast':
@@ -257,6 +259,7 @@ export const DecideContainer = ({
 					aspectRatio={aspectRatio}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
+					isInOpinionNoAvatarVariant={isInOpinionNoAvatarVariant}
 				/>
 			);
 		case 'scrollable/small':
@@ -286,6 +289,7 @@ export const DecideContainer = ({
 						absoluteServerTimes={absoluteServerTimes}
 						aspectRatio={aspectRatio}
 						sectionId={sectionId}
+						isInOpinionNoAvatarVariant={isInOpinionNoAvatarVariant}
 					/>
 				</Island>
 			);

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -32,6 +32,7 @@ type Props = {
 	aspectRatio: AspectRatio;
 	containerLevel?: DCRContainerLevel;
 	collectionId: number;
+	isInOpinionNoAvatarVariant?: boolean;
 };
 
 type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -581,6 +582,7 @@ export const FlexibleGeneral = ({
 	aspectRatio,
 	containerLevel = 'Primary',
 	collectionId,
+	isInOpinionNoAvatarVariant,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
 		...snap,
@@ -592,6 +594,9 @@ export const FlexibleGeneral = ({
 		.map((standard, i) => ({
 			...standard,
 			uniqueId: `collection-${collectionId}-standard-${i}`,
+			avatarUrl: isInOpinionNoAvatarVariant
+				? undefined
+				: standard.avatarUrl,
 		}));
 
 	const groupedCards = decideCardPositions(cards);

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

@@ -172,6 +172,7 @@ export const FollowWrapper = ({ id, displayName }: Props) => {
 					}
 				}
 			`}
+			data-gu-name="follow"
 		>
 			{showFollowTagButton && (
 				<FollowTagButton

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/LiveblogNotifications.importable.tsx

@@ -96,6 +96,7 @@ export const LiveblogNotifications = ({ id, displayName }: Props) => {
 					}
 				}
 			`}
+			data-gu-name="liveblog-notifications"
 		>
 			<FollowNotificationsButton
 				isFollowing={isFollowingNotifications ?? false}

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>