feat: sign-in gate v2 dismissable

Author: Juarez Mota

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

@@ -14,6 +14,7 @@ import {
 import React from 'react';
 import { buildUrlWithQueryParams } from '../../lib/routeUtils';
 import type { IsNativeApp, QueryParams } from './types';
+import { AuxiaGateVersion } from '../SignInGate/types';
 
 type AuthButtonProvider = 'social' | 'email';
 
@@ -22,6 +23,7 @@ type AuthProviderButtonsProps = {
 	isNativeApp?: IsNativeApp;
 	providers: AuthButtonProvider[];
 	onClick?: (provider: AuthButtonProvider) => void;
+	signInGateVersion?: AuxiaGateVersion;
 };
 
 type AuthProviderButtonProps = {
@@ -35,13 +37,13 @@ type AuthProviderButtonProps = {
 // The gap between elements in the main section of MinimalLayout.
 export const SECTION_GAP = remSpace[3]; // 12px
 
-export const mainSectionStyles = css`
+export const mainSectionStyles = (signInGateVersion: AuxiaGateVersion) => css`
 	display: flex;
 	flex-direction: column;
 	gap: ${SECTION_GAP};
 
 	${from.phablet} {
-		flex-direction: row;
+		flex-direction: ${signInGateVersion === 'v1' ? 'row' : 'column'};
 	}
 `;
 
@@ -152,10 +154,11 @@ export const AuthProviderButtons = ({
 	isNativeApp,
 	providers,
 	onClick,
+	signInGateVersion = 'v1',
 }: AuthProviderButtonsProps) => {
 	const buttonOrder = getButtonOrder(isNativeApp);
 	return (
-		<div css={mainSectionStyles}>
+		<div css={mainSectionStyles(signInGateVersion)}>
 			{providers.includes('social') &&
 				buttonOrder.map((socialProvider) => (
 					<SocialButton

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

@@ -274,9 +274,9 @@ export const auxiaV2Modal = () => {
 		treatmentTrackingId: 'test-tracking-id',
 		surface: 'test-surface',
 		treatmentContent: JSON.stringify({
-			title: 'Sign in to continue reading',
-			subtitle: 'Register for free and continue reading',
-			body: 'Create your free Guardian account to access exclusive content and features.',
+			title: 'A small step for great Journalism. Sign in.',
+			subtitle: "It's free and only takes 30 seconds.",
+			body: '',
 			first_cta_name: 'Create account',
 			first_cta_link: 'https://profile.theguardian.com/register',
 			second_cta_name: 'Not now',
@@ -314,4 +314,4 @@ export const auxiaV2Modal = () => {
 	);
 };
 
-auxiaV2Modal.storyName = 'auxia_v2_modal';
+auxiaV2Modal.storyName = 'sign_in_gate_auxia_v2_modal_dismissable';