feat: add data attributes for testing and styling in AuthProviderButtons and SignInGate components

Author: Juarez Mota

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

@@ -94,6 +94,8 @@ const SocialButton = ({
 				onClick={() => onClick?.(socialProvider as AuthButtonProvider)}
 				data-cy={`${socialProvider}-sign-in-button`}
 				data-link-name={`${socialProvider}-social-button`}
+				data-testid="sign-in-gate-main_signin"
+				data-ignore="global-link-styling"
 			>
 				{authProviderButtonLabel(label)}
 			</LinkButton>
@@ -171,6 +173,8 @@ export const AuthProviderButtons = ({
 						queryParams,
 					)}
 					onClick={() => onClick?.('email')}
+					data-testid="sign-in-gate-main_signin"
+					data-ignore="global-link-styling"
 				>
 					{authProviderButtonLabel('email')}
 				</LinkButton>

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

@@ -17,7 +17,7 @@ import { InformationBox } from '../../InformationBox/InformationBox';
 import { GuardianTerms } from '../../Terms/Terms';
 import { trackLink } from '../componentEventTracking';
 import type { SignInGatePropsAuxia, TreatmentContentDecoded } from '../types';
-import { signInGateContainer } from './shared';
+import { hideElementsCss, signInGateContainer } from './shared';
 
 const DividerWithOr = () => {
 	return (
@@ -56,12 +56,15 @@ export const SignInGateAuxiaV1 = ({
 
 	return (
 		<div css={signInGateContainer} data-testid="sign-in-gate-main">
+			<style>{hideElementsCss}</style>
 			<div css={topBar}>
 				<SvgGuardianLogo textColor="#041F4A" width={96} />
 
 				{isDismissible && (
 					<button
 						type="button"
+						data-testid="sign-in-gate-main_dismiss"
+						data-ignore="global-link-styling"
 						css={dismissButtonStyles}
 						onClick={() => {
 							dismissGate();
@@ -147,6 +150,8 @@ export const SignInGateAuxiaV1 = ({
 								'REGISTER-LINK',
 							);
 						}}
+						data-testid="sign-in-gate-main_register"
+						data-ignore="global-link-styling"
 					>
 						{firstCtaName}
 					</ExternalLink>

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

@@ -4,11 +4,17 @@ import { InformationBoxText } from '../InformationBox/InformationBox';
 export const GuardianTerms = () => (
 	<InformationBoxText>
 		By proceeding, you agree to our{' '}
-		<ExternalLink href="https://www.theguardian.com/help/terms-of-service">
+		<ExternalLink
+			href="https://www.theguardian.com/help/terms-of-service"
+			data-ignore="global-link-styling"
+		>
 			terms and conditions
 		</ExternalLink>
 		. For information about how we use your data, see our{' '}
-		<ExternalLink href="https://www.theguardian.com/help/privacy-policy">
+		<ExternalLink
+			href="https://www.theguardian.com/help/privacy-policy"
+			data-ignore="global-link-styling"
+		>
 			privacy policy
 		</ExternalLink>
 		.