Merge branch 'main' into ab/admiralScript-to-run-after-cmp-booted

Author: AnastasiiaBalenko

ab-testing/config/abTests.ts

@@ -20,6 +20,17 @@ import type { ABTest } from "./types.ts";
  */
 
 const ABTests: ABTest[] = [
+	{
+		name: "webx-dark-mode-web",
+		description: "Dark mode accessibility feature test on web",
+		owners: ["[email protected]"],
+		status: "ON",
+		expirationDate: "2027-04-09",
+		type: "server",
+		audienceSize: 0 / 100,
+		groups: ["enable"],
+		shouldForceMetricsCollection: false,
+	},
 	{
 		name: "commercial-prebid-v10",
 		description: "Testing Prebid.js v10 integration on DCR",
@@ -112,7 +123,7 @@ const ABTests: ABTest[] = [
 		description:
 			"Test placing the Most Viewed and Deeply Read components in the right-hand column on the homepage.",
 		owners: ["[email protected]"],
-		status: "OFF",
+		status: "ON",
 		expirationDate: `2026-04-28`,
 		type: "server",
 		audienceSize: 0 / 100,

ab-testing/config/types.ts

@@ -6,7 +6,9 @@ type AllSpace = Map<string, FastlyTestParams[]>;
 
 type Team =
 	| "commercial"
+	// WebX in the canonical name for the team, when the last test using webex expires we should remove webex from this union type
 	| "webex"
+	| "webx"
 	| "thefilter"
 	| "fronts-and-curation"
 	| "growth";

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { isUndefined, removeCookie, setCookie, storage } from '@guardian/libs';
+import { isUndefined, storage } from '@guardian/libs';
 import { article17, palette } from '@guardian/source/foundations';
 import { type SetStateAction, useEffect, useState } from 'react';
 import { useConfig } from './ConfigContext';
@@ -19,10 +19,6 @@ const bold = css`
 	font-weight: bold;
 `;
 
-// This is hard coded, and must be changed if the experiment bucket changes
-// https://github.com/guardian/frontend/blob/09f49b80/common/app/experiments/Experiments.scala#L57
-const darkModeCookieName = 'X-GU-Experiment-0perc-D';
-
 const PreferenceToggle = ({
 	label,
 	checked,
@@ -90,30 +86,6 @@ export const Accessibility = () => {
 		true,
 	);
 
-	const [shouldParticipate, setParticipate] =
-		useState<boolean>(darkModeAvailable);
-
-	useEffect(() => {
-		if (shouldParticipate) {
-			setCookie({
-				name: darkModeCookieName,
-				value: 'true',
-			});
-		} else {
-			removeCookie({ name: darkModeCookieName });
-		}
-
-		const timeout = setTimeout(() => {
-			// we must reload the page for the preference to take effect,
-			// as this relies on a server-side test & cookie combination
-			if (shouldParticipate !== darkModeAvailable) {
-				window.location.reload();
-			}
-		}, 1200);
-
-		return () => clearTimeout(timeout);
-	}, [shouldParticipate, darkModeAvailable]);
-
 	const togglePreference = (
 		preferenceCallback: (value: SetStateAction<boolean>) => void,
 	): void => {
@@ -154,29 +126,36 @@ export const Accessibility = () => {
 
 				<br />
 
-				<fieldset css={formStyle}>
+				<div css={formStyle}>
 					<p>
 						We offer beta support for a dark colour scheme on the
 						web. The colour scheme preference will follow your
 						system settings.
 					</p>
-					<label>
-						<input
-							type="checkbox"
-							checked={shouldParticipate}
-							onChange={(e) => {
-								setParticipate(e.target.checked);
-							}}
-							data-link-name="prefers-colour-scheme"
-						/>
-						<span css={bold}>
-							Participate in the dark colour scheme beta{' '}
-						</span>
-						{shouldParticipate
-							? ' Untick this to opt out (browser will refresh)'
-							: ' Tick this to opt in (browser will refresh)'}
-					</label>
-				</fieldset>
+					{darkModeAvailable ? (
+						<>
+							<p css={bold}>
+								You are currently participating in the dark
+								colour scheme beta.
+							</p>
+							<a href="/ab-tests/opt-out/webx-dark-mode-web:enable">
+								Click here to opt out (this will redirect you to
+								the homepage)
+							</a>
+						</>
+					) : (
+						<>
+							<p css={bold}>
+								You are not currently participating in the dark
+								colour scheme beta.
+							</p>
+							<a href="/ab-tests/opt-in/webx-dark-mode-web:enable">
+								Click here to opt in (this will redirect you to
+								the homepage)
+							</a>
+						</>
+					)}
+				</div>
 			</form>
 		</FrontSection>
 	);

dotcom-rendering/src/components/ArticlePage.tsx

@@ -179,7 +179,7 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 					You can{' '}
 					<a
 						style={{ color: 'inherit' }}
-						href="/opt/out/dark-mode-web"
+						href="/ab-tests/opt-out/webx-dark-mode-web"
 					>
 						opt out anytime
 					</a>{' '}

dotcom-rendering/src/components/FrontPage.tsx

@@ -112,7 +112,7 @@ export const FrontPage = ({ front, NAV }: Props) => {
 					You can{' '}
 					<a
 						style={{ color: 'inherit' }}
-						href="/opt/out/dark-mode-web"
+						href="/ab-tests/opt-out/webx-dark-mode-web"
 					>
 						opt out anytime
 					</a>{' '}

dotcom-rendering/src/components/FrontSection.tsx

@@ -14,14 +14,17 @@ import type {
 } from '../types/front';
 import type { TagPagePagination } from '../types/tagPage';
 import { isAustralianTerritory, type Territory } from '../types/territory';
+import type { TrailType } from '../types/trails';
 import { AustralianTerritorySwitcher } from './AustralianTerritorySwitcher.importable';
 import { BrandingLabel } from './BrandingLabel';
 import { ContainerOverrides } from './ContainerOverrides';
 import { ContainerTitle } from './ContainerTitle';
 import { FrontPagination } from './FrontPagination';
 import { FrontSectionTitle } from './FrontSectionTitle';
+import { Hide } from './Hide';
 import { Island } from './Island';
 import { LabsSectionHeader } from './LabsSectionHeader';
+import { MostPopularFrontRight } from './MostPopularFrontRight';
 import { ShowHideButton } from './ShowHideButton';
 import { ShowMore } from './ShowMore.importable';
 import { Treats } from './Treats';
@@ -90,6 +93,11 @@ type Props = {
 	 *   the page skin background showing through the containers
 	 */
 	hasPageSkin?: boolean;
+	/**
+	 * The Slim Homepage AB test requires some sections to have reduced width so that
+	 * the Most Popular Front Right component can be placed on the right-hand side.
+	 */
+	slimifySectionForAbTest?: boolean;
 	discussionApiUrl: string;
 	collectionBranding?: CollectionBranding;
 	isTagPage?: boolean;
@@ -98,6 +106,8 @@ type Props = {
 	isAboveMobileAd?: boolean;
 	/** Indicates whether this is a Guardian Labs container */
 	isLabs?: boolean;
+	mostViewed?: TrailType[];
+	deeplyRead?: TrailType[];
 };
 
 const width = (columns: number, columnWidth: number, columnGap: number) =>
@@ -356,12 +366,17 @@ const sectionControls = css`
 
 const sectionContent = css`
 	margin: 0;
+	grid-column: content;
 
 	.hidden > & {
 		display: none;
 	}
+`;
 
-	grid-column: content;
+const slimSectionContent = css`
+	${from.wide} {
+		grid-column: 5 / 14;
+	}
 `;
 
 const sectionContentRow = (toggleable: boolean) => css`
@@ -385,7 +400,23 @@ const sectionContentBorderFromLeftCol = css`
 			bottom: 0;
 			border-left: 1px solid ${schemePalette('--section-border')};
 			transform: translateX(-50%);
-			/** Keeps the vertical divider ontop of carousel item dividers */
+			/** Keeps the vertical divider on top of carousel item dividers */
+			z-index: 1;
+		}
+	}
+`;
+
+const slimHomepageRightBorderStyles = css`
+	${from.wide} {
+		::after {
+			content: '';
+			position: absolute;
+			top: ${space[2]}px;
+			bottom: 0;
+			right: 0;
+			border-right: 1px solid ${schemePalette('--section-border')};
+			transform: translateX(-50%);
+			/** Keeps the vertical divider on top of carousel item dividers */
 			z-index: 1;
 		}
 	}
@@ -619,13 +650,16 @@ export const FrontSection = ({
 	isOnPaidContentFront,
 	targetedTerritory,
 	hasPageSkin = false,
+	slimifySectionForAbTest = false,
 	discussionApiUrl,
 	collectionBranding,
 	isTagPage = false,
 	hasNavigationButtons = false,
 	isAboveDesktopAd = false,
 	isAboveMobileAd = false,
 	isLabs = false,
+	mostViewed = [],
+	deeplyRead = [],
 }: Props) => {
 	const isToggleable = toggleable && !!sectionId;
 	const showVerticalRule = !hasPageSkin;
@@ -690,6 +724,15 @@ export const FrontSection = ({
 										title,
 										showSectionColours,
 								  ),
+							// To reduce the width of the border line between Features
+							// and More features in the Slim Homepage AB test.
+							slimifySectionForAbTest &&
+								sectionId === 'more-features' &&
+								css`
+									${from.wide} {
+										grid-column: 2 / 14;
+									}
+								`,
 						]}
 					/>
 				)}
@@ -784,18 +827,58 @@ export const FrontSection = ({
 				<div
 					css={[
 						sectionContent,
+						slimifySectionForAbTest && slimSectionContent,
 						sectionContentHorizontalMargins,
 						sectionContentRow(toggleable),
 						topPadding,
 						showVerticalRule &&
 							isBetaContainer &&
 							sectionContentBorderFromLeftCol,
+						slimifySectionForAbTest &&
+							slimHomepageRightBorderStyles,
 					]}
 					id={`container-${sectionId}`}
 				>
 					{children}
 				</div>
 
+				{slimifySectionForAbTest && sectionId === 'news' && (
+					<div
+						css={css`
+							${from.wide} {
+								grid-row: content-toggleable;
+								grid-column: 14 / 18;
+							}
+						`}
+					>
+						<Hide when="below" breakpoint="wide">
+							<MostPopularFrontRight
+								heading="Most viewed"
+								trails={mostViewed}
+							/>
+						</Hide>
+					</div>
+				)}
+
+				{slimifySectionForAbTest && sectionId === 'features' && (
+					<div
+						css={css`
+							${from.wide} {
+								grid-row: content-toggleable;
+								grid-column: 14 / 18;
+								position: relative;
+							}
+						`}
+					>
+						<Hide when="below" breakpoint="wide">
+							<MostPopularFrontRight
+								heading="Deeply read"
+								trails={deeplyRead}
+							/>
+						</Hide>
+					</div>
+				)}
+
 				<div
 					css={[
 						sectionContentHorizontalMargins,

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

@@ -9,10 +9,11 @@ import {
 	bypassCoreWebVitalsSampling,
 	initCoreWebVitals,
 } from '@guardian/core-web-vitals';
-import { getCookie, isString, isUndefined } from '@guardian/libs';
+import { isUndefined } from '@guardian/libs';
 import { useCallback, useEffect, useState } from 'react';
 import { useAB, useBetaAB } from '../lib/useAB';
 import { useAdBlockInUse } from '../lib/useAdBlockInUse';
+import { useBrowserId } from '../lib/useBrowserId';
 import { useDetectAdBlock } from '../lib/useDetectAdBlock';
 import { usePageViewId } from '../lib/usePageViewId';
 import type { ServerSideTests } from '../types/config';
@@ -41,20 +42,6 @@ const shouldCollectMetricsForBetaTests = (userTestParticipations: string[]) => {
 	);
 };
 
-const useBrowserId = () => {
-	const [browserId, setBrowserId] = useState<string>();
-
-	useEffect(() => {
-		const cookie = getCookie({ name: 'bwid', shouldMemoize: true });
-
-		const id = isString(cookie) ? cookie : 'no-browser-id-available';
-
-		setBrowserId(id);
-	}, []);
-
-	return browserId;
-};
-
 const useDev = () => {
 	const [isDev, setIsDev] = useState<boolean>();
 

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

@@ -7,7 +7,11 @@ const meta = {
 	component: MostPopularFrontRight,
 	title: 'Components/MostPopularFrontRight',
 	decorators: [rightColumnDecorator],
-	render: (args) => <MostPopularFrontRight {...args} />,
+	render: (args) => (
+		<div css={{ position: 'relative' }}>
+			<MostPopularFrontRight {...args} />
+		</div>
+	),
 } satisfies Meta<typeof MostPopularFrontRight>;
 
 export default meta;