feat: new sign in gate auxia v1

Author: Juarez Mota

dotcom-rendering/fixtures/manual/sign-in-gate.ts

@@ -6,10 +6,11 @@ export const mockAuxiaResponseDismissible = {
 			treatmentTrackingId: 'tracking-001',
 			surface: 'signin-gate',
 			treatmentContent: JSON.stringify({
-				title: 'Register for free and continue reading',
-				subtitle: "It's still free to read – this is not a paywall",
-				body: "We're committed to keeping our quality reporting open. By registering and providing us with insight into your preferences, you're helping us to engage with you more deeply.",
-				first_cta_name: 'Register for free',
+				title: 'Like uninterrupted reading?\nSo do we. Sign in.',
+				subtitle:
+					"Sign in to keep reading. It's free, and we'll bring you right back here in under a minute.",
+				body: '',
+				first_cta_name: 'Create a free account',
 				first_cta_link: 'https://profile.theguardian.com/register',
 				second_cta_name: "I'll do it later",
 			}),
@@ -25,10 +26,11 @@ export const mockAuxiaResponseNonDismissible = {
 			treatmentTrackingId: 'tracking-002',
 			surface: 'signin-gate',
 			treatmentContent: JSON.stringify({
-				title: 'Complete registration to continue reading',
-				subtitle: 'Registration is required to access this content',
-				body: 'To continue reading this article and access our quality journalism, please complete your registration.',
-				first_cta_name: 'Complete registration',
+				title: 'Like uninterrupted reading?\nSo do we. Sign in.',
+				subtitle:
+					"Sign in to keep reading. It's free, and we'll bring you right back here in under a minute.",
+				body: '',
+				first_cta_name: 'Create a free account',
 				first_cta_link: 'https://profile.theguardian.com/register',
 				second_cta_name: '', // Empty makes it non-dismissible
 			}),
@@ -44,10 +46,10 @@ export const mockAuxiaResponseLegacy = {
 			treatmentTrackingId: 'legacy-tracking',
 			surface: 'signin-gate',
 			treatmentContent: JSON.stringify({
-				title: 'Register to continue reading',
+				title: 'Like uninterrupted reading?\nSo do we. Sign in.',
 				subtitle: '',
 				body: '',
-				first_cta_name: 'Register',
+				first_cta_name: 'Create a free account',
 				first_cta_link: 'https://profile.theguardian.com/register',
 				second_cta_name: 'Not now',
 			}),

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from, remSpace } from '@guardian/source/foundations';
+import { from, palette, remSpace } from '@guardian/source/foundations';
 import {
 	LinkButton,
 	SvgAppleBrand,
@@ -16,13 +16,15 @@ type AuthProviderButtonsProps = {
 	queryParams: QueryParams;
 	isNativeApp?: IsNativeApp;
 	providers: AuthButtonProvider[];
+	onClick?: (provider: AuthButtonProvider) => void;
 };
 
 type AuthProviderButtonProps = {
 	label: string;
 	icon: React.ReactElement;
 	socialProvider: string;
 	queryParams: QueryParams;
+	onClick?: (provider: AuthButtonProvider) => void;
 };
 
 // The gap between elements in the main section of MinimalLayout.
@@ -54,17 +56,18 @@ const sharedButtonStyles = (width: ButtonWidth = 'full') => css`
 
 export const secondaryButtonStyles = (width: ButtonWidth = 'full') => css`
 	${sharedButtonStyles(width)}
-	background-color: var(--color-button-secondary-background);
-	border-color: var(--color-button-secondary-border);
-	color: var(--color-button-secondary-text);
+	background-color: ${palette.neutral[100]};
+	border-color: ${palette.brand[400]};
+	color: ${palette.brand[400]};
 	&:hover {
-		background-color: var(--color-button-secondary-background-hover);
+		background-color: ${palette.neutral[93]};
 	}
 `;
 
 const appleIconOverrides = css`
 	svg path {
-		fill: var(--color-button-secondary-text) !important;
+		/* stylelint-disable-next-line declaration-no-important */
+		fill: ${palette.brand[400]} !important;
 	}
 `;
 
@@ -73,6 +76,7 @@ const SocialButton = ({
 	icon,
 	socialProvider,
 	queryParams,
+	onClick,
 }: AuthProviderButtonProps) => {
 	return (
 		<>
@@ -87,6 +91,7 @@ const SocialButton = ({
 					},
 					queryParams,
 				)}
+				onClick={() => onClick?.(socialProvider as AuthButtonProvider)}
 				data-cy={`${socialProvider}-sign-in-button`}
 				data-link-name={`${socialProvider}-social-button`}
 			>
@@ -139,6 +144,7 @@ export const AuthProviderButtons = ({
 	queryParams,
 	isNativeApp,
 	providers,
+	onClick,
 }: AuthProviderButtonsProps) => {
 	const buttonOrder = getButtonOrder(isNativeApp);
 	return (
@@ -151,6 +157,7 @@ export const AuthProviderButtons = ({
 						icon={socialButtonIcon(socialProvider)}
 						socialProvider={socialProvider}
 						queryParams={queryParams}
+						onClick={onClick}
 					/>
 				))}
 			{providers.includes('email') && (
@@ -163,6 +170,7 @@ export const AuthProviderButtons = ({
 						{},
 						queryParams,
 					)}
+					onClick={() => onClick?.('email')}
 				>
 					{authProviderButtonLabel('email')}
 				</LinkButton>