Merge branch 'main' into ih/ab-testing-ui-branch

Author: i-hardy

dotcom-rendering/src/components/CardHeadline.tsx

@@ -227,7 +227,7 @@ export const CardHeadline = ({
 					css={css`
 						color: ${headlineColour};
 					`}
-					className="show-underline"
+					className="show-underline headline-text"
 				>
 					{headlineText}
 					{isExternalLink && (

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -100,6 +100,16 @@ const content = css`
 	${from.tablet} {
 		padding-bottom: 10px;
 	}
+
+	/**
+	 * We're deliberately using a font-size that is not in Source so that
+	 * the headline doesn't exceed three lines across all mobile breakpoints
+	 */
+	${between.mobileMedium.and.mobileLandscape} {
+		.headline-text {
+			font-size: 1rem;
+		}
+	}
 `;
 
 const starWrapper = css`
@@ -144,7 +154,7 @@ export const HighlightsCard = ({
 							desktop: 'xxsmall',
 							tablet: 'xxsmall',
 							mobileMedium: 'xxsmall',
-							mobile: 'tiny',
+							mobile: 'xxxsmall',
 						}}
 						showPulsingDot={
 							format.design === ArticleDesign.LiveBlog

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

@@ -11,6 +11,7 @@ const meta: Meta<typeof ScrollableHighlights> = {
 		chromatic: {
 			viewports: [
 				breakpoints.mobile,
+				breakpoints.mobileMedium,
 				breakpoints.mobileLandscape,
 				breakpoints.tablet,
 				breakpoints.wide,

dotcom-rendering/src/components/SignInGate/displayRules.ts

@@ -58,6 +58,18 @@ export const hasRequiredConsents = (): Promise<boolean> =>
 		.then(({ canTarget }: ConsentState) => canTarget)
 		.catch(() => false);
 
+export const pageMetaDataMakesItEligibleForGateDisplay = (
+	contentType: string,
+	sectionId: string | undefined,
+	tags: TagType[],
+): boolean => {
+	return (
+		isValidContentType(contentType) &&
+		isValidSection(sectionId) &&
+		isValidTag(tags)
+	);
+};
+
 export const canShowSignInGate = ({
 	isSignedIn,
 	currentTest,
@@ -66,23 +78,30 @@ export const canShowSignInGate = ({
 	tags,
 	isPaidContent,
 	isPreview,
-}: CanShowGateProps): Promise<boolean> =>
-	Promise.resolve(
+}: CanShowGateProps): Promise<boolean> => {
+	// This check is functionally identical to the same check in SDC
+	// This logically ensures that SDC will get a subset of the pages for which
+	// pageMetaDataMakesItEligibleForGateDisplay return true
+	if (
+		!pageMetaDataMakesItEligibleForGateDisplay(contentType, sectionId, tags)
+	) {
+		return Promise.resolve(false);
+	}
+
+	return Promise.resolve(
 		!isSignedIn &&
 			!hasUserDismissedGateMoreThanCount(
 				currentTest.variant,
 				currentTest.name,
 				5,
 			) &&
 			isNPageOrHigherPageView(3) &&
-			isValidContentType(contentType) &&
-			isValidSection(sectionId) &&
-			isValidTag(tags) &&
 			// hide the sign in gate on isPaidContent
 			!isPaidContent &&
 			// hide the sign in gate on internal tools preview &&
 			!isPreview,
 	);
+};
 
 export const canShowSignInGateMandatory: ({
 	isSignedIn,