feat: sign-in gate v2 non-dismissable

Author: Juarez Mota

dotcom-rendering/src/components/AuthProviderButtons/AuthProviderButtons.tsx

@@ -13,8 +13,8 @@ import {
 } from '@guardian/source/react-components';
 import React from 'react';
 import { buildUrlWithQueryParams } from '../../lib/routeUtils';
+import type { AuxiaGateVersion } from '../SignInGate/types';
 import type { IsNativeApp, QueryParams } from './types';
-import { AuxiaGateVersion } from '../SignInGate/types';
 
 type AuthButtonProvider = 'social' | 'email';
 

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

@@ -268,7 +268,7 @@ export const signInGateSelectorStoryNoTreatment = () => {
 signInGateSelectorStoryNoTreatment.storyName =
 	'sign_in_gate_selector_no_treatment';
 
-export const auxiaV2Modal = () => {
+export const auxiaV2DismissibleModal = () => {
 	const mockUserTreatment: AuxiaAPIResponseDataUserTreatment = {
 		treatmentId: 'test-treatment-id',
 		treatmentTrackingId: 'test-tracking-id',
@@ -314,4 +314,54 @@ export const auxiaV2Modal = () => {
 	);
 };
 
-auxiaV2Modal.storyName = 'sign_in_gate_auxia_v2_modal_dismissable';
+auxiaV2DismissibleModal.storyName = 'sign_in_gate_auxia_v2_modal_dismissible';
+
+export const auxiaV2NonDismissibleModal = () => {
+	const mockUserTreatment: AuxiaAPIResponseDataUserTreatment = {
+		treatmentId: 'test-treatment-id',
+		treatmentTrackingId: 'test-tracking-id',
+		surface: 'test-surface',
+		treatmentContent: JSON.stringify({
+			title: 'Sorry for the interruption. We believe in free, independent journalism for all. Sign in or register to keep reading.',
+			subtitle:
+				"Once you are signed in, we'll bring you back here shortly.",
+			body: '',
+			first_cta_name: 'Create account',
+			first_cta_link: 'https://profile.theguardian.com/register',
+			second_cta_name: '',
+		}),
+		rank: '1',
+		contentLanguageCode: 'en',
+		treatmentType: 'test-type',
+	};
+
+	return (
+		<Section fullWidth={true}>
+			<SignInGateAuxiaV2
+				signInUrl="https://profile.theguardian.com/signin"
+				dismissGate={() => console.log('Gate dismissed')}
+				abTest={{
+					name: 'AuxiaSignInGate',
+					variant: 'test-variant',
+					id: 'test-id',
+				}}
+				ophanComponentId="test-component-id"
+				userTreatment={mockUserTreatment}
+				logTreatmentInteractionCall={async (
+					interactionType,
+					actionName,
+				) => {
+					console.log(
+						'Treatment interaction:',
+						interactionType,
+						actionName,
+					);
+				}}
+				guUrl="https://www.theguardian.com/"
+			/>
+		</Section>
+	);
+};
+
+auxiaV2NonDismissibleModal.storyName =
+	'sign_in_gate_auxia_v2_modal_non_dismissible';

dotcom-rendering/src/components/SignInGate/gateDesigns/SignInGateAuxiaV2.tsx

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import {
 	from,
+	headlineMedium20,
 	headlineMedium28,
 	headlineMedium34,
 	headlineMedium42,
@@ -106,13 +107,21 @@ export const SignInGateAuxiaV2 = ({
 	return (
 		<div
 			css={modalOverlay}
+			className={dismissStatusLabel}
 			onClick={handleBackdropClick}
 			data-testid="sign-in-gate-modal-overlay"
 		>
 			<div css={modalContainer} data-testid="sign-in-gate-main">
 				<div css={topContainer}>
 					<div css={topBar}>
-						<SvgGuardianLogo textColor="#041F4A" width={96} />
+						<SvgGuardianLogo
+							textColor={
+								isDismissible
+									? palette.brand[300]
+									: palette.neutral[100]
+							}
+							width={96}
+						/>
 
 						{isDismissible && (
 							<button
@@ -302,6 +311,11 @@ const modalContainer = css`
 		flex-direction: row;
 		gap: 0;
 	}
+
+	.non-dismissible & {
+		gap: 0;
+		padding: 0;
+	}
 `;
 
 // --- New Layout Containers ---
@@ -314,12 +328,33 @@ const topContainer = css`
 		padding: ${space[4]}px;
 	}
 
+	${from.desktop} {
+		border-bottom: 0.5px solid ${palette.brand[400]};
+		padding: ${space[4]}px;
+	}
+
 	${from.desktop} {
 		border-bottom: 0;
 		border-right: 0.5px solid ${palette.brand[400]};
 		flex-direction: column-reverse;
 		gap: ${space[8]}px;
 	}
+
+	.non-dismissible & {
+		background: ${palette.brand[400]};
+		padding: ${space[3]}px;
+
+		${from.phablet} {
+			border: 0;
+			padding: ${space[4]}px;
+		}
+
+		${from.desktop} {
+			border: 0;
+			max-width: 470px;
+			padding: ${space[6]}px ${space[4]}px ${space[4]}px ${space[8]}px;
+		}
+	}
 `;
 
 const contentContainer = css`
@@ -336,6 +371,18 @@ const contentContainer = css`
 		gap: ${space[6]}px;
 		padding: ${space[6]}px ${space[10]}px;
 	}
+
+	.non-dismissible & {
+		padding: ${space[3]}px;
+
+		${from.phablet} {
+			padding: ${space[4]}px;
+		}
+
+		${from.desktop} {
+			padding: ${space[6]}px ${space[10]}px;
+		}
+	}
 `;
 
 const headerSection = css`
@@ -371,6 +418,9 @@ const headerImage = css`
 		align-self: center;
 		width: 280px;
 	}
+	.non-dismissible & {
+		display: none;
+	}
 `;
 
 const actionsSection = css`
@@ -402,6 +452,15 @@ const signInTopBar = css`
 			${headlineMedium34};
 		}
 	}
+
+	.non-dismissible & {
+		${from.desktop} {
+			h2 {
+				${headlineMedium34};
+				color: ${palette.brand[400]};
+			}
+		}
+	}
 `;
 
 const dismissButtonStyles = css`
@@ -442,6 +501,21 @@ const subHeadingStyles = css`
 		${headlineMedium42};
 		padding: 0;
 	}
+
+	.non-dismissible & {
+		${headlineMedium20};
+		color: ${palette.neutral[100]};
+
+		${from.phablet} {
+			${headlineMedium28};
+			padding: ${space[1]}px 0 0;
+		}
+
+		${from.desktop} {
+			${headlineMedium42};
+			padding: 0;
+		}
+	}
 `;
 
 const descriptionText = css`
@@ -455,6 +529,10 @@ const descriptionText = css`
 	${from.desktop} {
 		${textSans17};
 	}
+
+	.non-dismissible & {
+		color: ${palette.neutral[100]};
+	}
 `;
 
 const socialContainer = css`