fix: z-index and storybook

Author: Juarez Mota

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

@@ -264,56 +264,51 @@ signInGateSelectorStoryNoTreatment.storyName =
 
 export const auxiaV2DismissibleModal = () => {
 	return (
-		<div id="sign-in-gate">
-			<Section fullWidth={true}>
-				<SignInGateSelector
-					isPaidContent={false}
-					isPreview={false}
-					pageId="dismissable-v2"
-					host="https://www.theguardian.com"
-					idUrl="https://profile.theguardian.com"
-					contributionsServiceUrl="https://contributions.guardianapis.com"
-					signInGateVersion="v2"
-					auxiaGateDisplayData={{
-						browserId: 'test-browser-id',
-						auxiaData: {
-							responseId: 'test-response-id',
-							userTreatment:
-								mockAuxiaResponseDismissible.data.userTreatment,
-						},
-					}}
-				/>
-			</Section>
-		</div>
+		<Section fullWidth={true}>
+			<SignInGateSelector
+				isPaidContent={false}
+				isPreview={false}
+				pageId="dismissable-v2"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				signInGateVersion="v2"
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment:
+							mockAuxiaResponseDismissible.data.userTreatment,
+					},
+				}}
+			/>
+		</Section>
 	);
 };
 
 auxiaV2DismissibleModal.storyName = 'sign_in_gate_auxia_v2_modal_dismissible';
 
 export const auxiaV2NonDismissibleModal = () => {
 	return (
-		<div id="sign-in-gate">
-			<Section fullWidth={true}>
-				<SignInGateSelector
-					isPaidContent={false}
-					isPreview={false}
-					pageId="non-dismissable-v2"
-					host="https://www.theguardian.com"
-					idUrl="https://profile.theguardian.com"
-					contributionsServiceUrl="https://contributions.guardianapis.com"
-					signInGateVersion="v2"
-					auxiaGateDisplayData={{
-						browserId: 'test-browser-id',
-						auxiaData: {
-							responseId: 'test-response-id',
-							userTreatment:
-								mockAuxiaResponseNonDismissible.data
-									.userTreatment,
-						},
-					}}
-				/>
-			</Section>
-		</div>
+		<Section fullWidth={true}>
+			<SignInGateSelector
+				isPaidContent={false}
+				isPreview={false}
+				pageId="non-dismissable-v2"
+				host="https://www.theguardian.com"
+				idUrl="https://profile.theguardian.com"
+				contributionsServiceUrl="https://contributions.guardianapis.com"
+				signInGateVersion="v2"
+				auxiaGateDisplayData={{
+					browserId: 'test-browser-id',
+					auxiaData: {
+						responseId: 'test-response-id',
+						userTreatment:
+							mockAuxiaResponseNonDismissible.data.userTreatment,
+					},
+				}}
+			/>
+		</Section>
 	);
 };
 

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

@@ -14,6 +14,7 @@ import {
 } from '@guardian/source/foundations';
 import { SvgCross, SvgGuardianLogo } from '@guardian/source/react-components';
 import { useEffect } from 'react';
+import { getZIndex } from '../../../lib/getZIndex';
 import { AuthProviderButtons } from '../../AuthProviderButtons/AuthProviderButtons';
 import { useConfig } from '../../ConfigContext';
 import { ExternalLink } from '../../ExternalLink/ExternalLink';
@@ -297,7 +298,7 @@ const modalOverlay = css`
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	z-index: 2000;
+	z-index: ${getZIndex('sign-in-gate')};
 	padding: ${space[4]}px;
 `;
 

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

@@ -477,6 +477,10 @@ const ShowSignInGateAuxia = ({
 		logTreatmentInteractionCall,
 	};
 
+	const shouldShowV2Gate: boolean =
+		typeof process !== 'undefined'
+			? !!process.env.STORYBOOK
+			: hasBeenSeen ?? false;
 	return (
 		<>
 			<div
@@ -486,7 +490,7 @@ const ShowSignInGateAuxia = ({
 				style={{ height: 1, marginTop: -1 }}
 			/>
 			{gateVersion === 'v2' ? (
-				hasBeenSeen && <SignInGateAuxiaV2 {...commonProps} />
+				shouldShowV2Gate && <SignInGateAuxiaV2 {...commonProps} />
 			) : (
 				<SignInGateAuxiaV1 {...commonProps} />
 			)}

dotcom-rendering/src/lib/getZIndex.ts

@@ -23,6 +23,7 @@
  */
 const indices = [
 	// Modals will go here at the top
+	'sign-in-gate',
 	'lightbox',
 	'youTubeFullscreen',