Merge pull request #14510 from guardian/dina/rollout-topAboveNav250Reservation

deedeeh · web-flow · commit 75dfef3255ac · 2025-09-17T12:44:38.000+01:00
Rollout the `top-above-nav` 250px reservation
diff --git a/dotcom-rendering/fixtures/generated/cricket-match.ts b/dotcom-rendering/fixtures/generated/cricket-match.ts
@@ -1871,7 +1871,6 @@ export const cricketMatchData: FECricketMatchPage = {
 			idCookieRefresh: true,
 			discussionPageSize: true,
 			smartAppBanner: false,
-			topAboveNav250Reservation: true,
 			historyTags: true,
 			brazeContentCards: true,
 			remoteBanner: true,
diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx
@@ -47,7 +47,6 @@ type DefaultProps = {
 	display?: ArticleDisplay;
 	isPaidContent?: boolean;
 	hasPageskin?: boolean;
-	isIn250ReservationVariant?: boolean;
 };
 
 // for dark ad labels
@@ -115,14 +114,6 @@ const topAboveNavContainerStyles = css`
 	margin: 0 auto;
 	text-align: left;
 	display: block;
-`;
-
-const topAboveNavContainerVariantStyles = css`
-	padding-bottom: ${space[5]}px;
-	position: relative;
-	margin: 0 auto;
-	text-align: left;
-	display: block;
 	width: 100%;
 	min-height: ${containerMinHeight}px;
 
@@ -475,7 +466,6 @@ export const AdSlot = ({
 	isPaidContent = false,
 	index,
 	hasPageskin = false,
-	isIn250ReservationVariant,
 }: Props) => {
 	switch (position) {
 		case 'right':
@@ -641,13 +631,7 @@ export const AdSlot = ({
 		}
 		case 'top-above-nav': {
 			return (
-				<AdSlotWrapper
-					css={
-						isIn250ReservationVariant
-							? topAboveNavContainerVariantStyles
-							: topAboveNavContainerStyles
-					}
-				>
+				<AdSlotWrapper css={topAboveNavContainerStyles}>
 					<div
 						id="dfp-ad--top-above-nav"
 						className={[
diff --git a/dotcom-rendering/src/components/HeaderAdSlot.tsx b/dotcom-rendering/src/components/HeaderAdSlot.tsx
@@ -1,23 +1,13 @@
 import { css, Global } from '@emotion/react';
-import { adSizes, constants } from '@guardian/commercial-core';
-import { space } from '@guardian/source/foundations';
 import { palette } from '../palette';
-import type { ServerSideTests } from '../types/config';
 import { AdSlot } from './AdSlot.web';
 import { Hide } from './Hide';
 
 const headerWrapper = css`
 	position: static;
 `;
 
-const { TOP_ABOVE_NAV_HEIGHT, AD_LABEL_HEIGHT } = constants;
-
-const padding = space[4] + 2; // 18px - currently being reviewed
-const borderBottomHeight = 1;
-const headerMinHeight =
-	TOP_ABOVE_NAV_HEIGHT + padding + AD_LABEL_HEIGHT + borderBottomHeight;
-
-const headerAdWrapperStylesVariant = css`
+const headerAdWrapperStyles = css`
 	z-index: 1080;
 	width: 100%;
 	background-color: ${palette('--ad-background')};
@@ -31,32 +21,7 @@ const headerAdWrapperStylesVariant = css`
 	top: 0;
 `;
 
-const headerAdWrapperStylesControl = css`
-	z-index: 1080;
-	width: 100%;
-	background-color: ${palette('--ad-background')};
-	min-height: ${headerMinHeight}px;
-	border-bottom: 1px solid ${palette('--ad-border')};
-
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-
-	position: sticky;
-	top: 0;
-`;
-
-/**
- * Ensure the top-above-nav/ad-block-ask containing div is always of a certain minimum height
- */
-const headerMinSizeStyles = css`
-	min-height: ${adSizes.leaderboard.height}px;
-	min-width: ${adSizes.leaderboard.width}px;
-`;
-
-export const HeaderAdSlot = ({ abTests }: { abTests: ServerSideTests }) => {
-	const isIn250ReservationVariant =
-		abTests.topAboveNav250ReservationVariant === 'variant';
+export const HeaderAdSlot = () => {
 	return (
 		<div css={headerWrapper}>
 			<Global
@@ -74,23 +39,10 @@ export const HeaderAdSlot = ({ abTests }: { abTests: ServerSideTests }) => {
 			/>
 			<Hide when="below" breakpoint="tablet">
 				<div
-					css={[
-						isIn250ReservationVariant
-							? headerAdWrapperStylesVariant
-							: headerAdWrapperStylesControl,
-					]}
+					css={headerAdWrapperStyles}
 					className="top-banner-ad-container"
 				>
-					<div
-						css={!isIn250ReservationVariant && headerMinSizeStyles}
-					>
-						<AdSlot
-							position="top-above-nav"
-							isIn250ReservationVariant={
-								isIn250ReservationVariant
-							}
-						/>
-					</div>
+					<AdSlot position="top-above-nav" />
 				</div>
 			</Hide>
 		</div>
diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx
@@ -168,7 +168,7 @@ export const AudioLayout = (props: WebProps) => {
 							padSides={false}
 							shouldCenter={false}
 						>
-							<HeaderAdSlot abTests={article.config.abTests} />
+							<HeaderAdSlot />
 						</Section>
 					</Stuck>
 				)}
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -318,9 +318,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 								padSides={false}
 								shouldCenter={false}
 							>
-								<HeaderAdSlot
-									abTests={article.config.abTests}
-								/>
+								<HeaderAdSlot />
 							</Section>
 						</Stuck>
 					)}
diff --git a/dotcom-rendering/src/layouts/CrosswordLayout.tsx b/dotcom-rendering/src/layouts/CrosswordLayout.tsx
@@ -138,9 +138,7 @@ export const CrosswordLayout = (props: Props) => {
 								padSides={false}
 								shouldCenter={false}
 							>
-								<HeaderAdSlot
-									abTests={article.config.abTests}
-								/>
+								<HeaderAdSlot />
 							</Section>
 						</div>
 					</Stuck>
diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -198,7 +198,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 								'--article-section-background',
 							)}
 						>
-							<HeaderAdSlot abTests={abTests} />
+							<HeaderAdSlot />
 						</Section>
 					</Stuck>
 				)}
diff --git a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
@@ -162,7 +162,7 @@ const NavHeader = ({ article, NAV, renderAds }: HeaderProps) => {
 							shouldCenter={false}
 							element="aside"
 						>
-							<HeaderAdSlot abTests={article.config.abTests} />
+							<HeaderAdSlot />
 						</Section>
 					</div>
 				</Stuck>
diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx
@@ -144,7 +144,6 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 
 	const {
 		config: {
-			abTests,
 			idUrl,
 			mmaUrl,
 			discussionApiUrl,
@@ -195,7 +194,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								padSides={false}
 								shouldCenter={false}
 							>
-								<HeaderAdSlot abTests={abTests} />
+								<HeaderAdSlot />
 							</Section>
 						</Stuck>
 					)}
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -272,9 +272,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 										padSides={false}
 										shouldCenter={false}
 									>
-										<HeaderAdSlot
-											abTests={article.config.abTests}
-										/>
+										<HeaderAdSlot />
 									</Section>
 								</div>
 							</Stuck>
diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx
@@ -309,9 +309,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 								shouldCenter={false}
 								element="aside"
 							>
-								<HeaderAdSlot
-									abTests={article.config.abTests}
-								/>
+								<HeaderAdSlot />
 							</Section>
 						</Stuck>
 					)}
diff --git a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx
@@ -227,7 +227,7 @@ export const NewsletterSignupLayout = ({
 							padSides={false}
 							shouldCenter={false}
 						>
-							<HeaderAdSlot abTests={article.config.abTests} />
+							<HeaderAdSlot />
 						</Section>
 					</Stuck>
 				)}
diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx
@@ -292,9 +292,7 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 								padSides={false}
 								shouldCenter={false}
 							>
-								<HeaderAdSlot
-									abTests={article.config.abTests}
-								/>
+								<HeaderAdSlot />
 							</Section>
 						</Stuck>
 					)}
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -264,9 +264,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 										padSides={false}
 										shouldCenter={false}
 									>
-										<HeaderAdSlot
-											abTests={article.config.abTests}
-										/>
+										<HeaderAdSlot />
 									</Section>
 								</Stuck>
 							)}
@@ -302,9 +300,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 											showSideBorders={false}
 											padSides={false}
 										>
-											<HeaderAdSlot
-												abTests={article.config.abTests}
-											/>
+											<HeaderAdSlot />
 										</Section>
 									</Stuck>
 								)}
diff --git a/dotcom-rendering/src/layouts/SportDataPageLayout.tsx b/dotcom-rendering/src/layouts/SportDataPageLayout.tsx
@@ -93,7 +93,7 @@ export const SportDataPageLayout = ({ sportData }: Props) => {
 							padSides={false}
 							shouldCenter={false}
 						>
-							<HeaderAdSlot abTests={sportData.config.abTests} />
+							<HeaderAdSlot />
 						</Section>
 					</Stuck>
 				)}
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -406,9 +406,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								padSides={false}
 								shouldCenter={false}
 							>
-								<HeaderAdSlot
-									abTests={article.config.abTests}
-								/>
+								<HeaderAdSlot />
 							</Section>
 						</Stuck>
 					)}
diff --git a/dotcom-rendering/src/layouts/TagPageLayout.tsx b/dotcom-rendering/src/layouts/TagPageLayout.tsx
@@ -77,7 +77,7 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 							padSides={false}
 							shouldCenter={false}
 						>
-							<HeaderAdSlot abTests={tagPage.config.abTests} />
+							<HeaderAdSlot />
 						</Section>
 					</Stuck>
 				)}

Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,7 @@ export const AudioLayout = (props: WebProps) => {`
`168`	`168`	`padSides={false}`
`169`	`169`	`shouldCenter={false}`
`170`	`170`	`>`
`171`		`- <HeaderAdSlot abTests={article.config.abTests} />`
	`171`	`+ <HeaderAdSlot />`
`172`	`172`	`</Section>`
`173`	`173`	`</Stuck>`
`174`	`174`	`)}`
Original file line number	Diff line number	Diff line change
`@@ -198,7 +198,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {`
`198`	`198`	`'--article-section-background',`
`199`	`199`	`)}`
`200`	`200`	`>`
`201`		`- <HeaderAdSlot abTests={abTests} />`
	`201`	`+ <HeaderAdSlot />`
`202`	`202`	`</Section>`
`203`	`203`	`</Stuck>`
`204`	`204`	`)}`
Original file line number	Diff line number	Diff line change
`@@ -162,7 +162,7 @@ const NavHeader = ({ article, NAV, renderAds }: HeaderProps) => {`
`162`	`162`	`shouldCenter={false}`
`163`	`163`	`element="aside"`
`164`	`164`	`>`
`165`		`- <HeaderAdSlot abTests={article.config.abTests} />`
	`165`	`+ <HeaderAdSlot />`
`166`	`166`	`</Section>`
`167`	`167`	`</div>`
`168`	`168`	`</Stuck>`