Merge branch 'main' into cc/aag-read-more-tracking

Author: charleycampbell

ab-testing/config/abTests.ts

@@ -101,9 +101,34 @@ const ABTests: ABTest[] = [
 		expirationDate: "2026-02-25",
 		type: "server",
 		status: "ON",
-		audienceSize: 0 / 100,
+		audienceSize: 20 / 100,
 		audienceSpace: "A",
 		groups: ["control", "prefer", "add"],
+	},
+	{
+		name: "commercial-mobile-inline1-halfpage",
+		description:
+			"To measure impact (RPM) and CLS of adding halfPage as an additional size option to mobile inline1 ad slot",
+		owners: ["[email protected]"],
+		expirationDate: `2026-02-28`,
+		type: "client",
+		status: "ON",
+		audienceSize: 20 / 100,
+		audienceSpace: "A",
+		groups: ["control", "variant"],
+		shouldForceMetricsCollection: false,
+	},
+	{
+		name: "thefilter-at-a-glance-redesign",
+		description:
+			"Testing redesigned at a glance component on The Filter articles",
+		owners: ["[email protected]"],
+		expirationDate: "2026-02-25",
+		type: "server",
+		status: "ON",
+		audienceSize: 0 / 100,
+		audienceSpace: "A",
+		groups: ["control", "stacked", "carousel"],
 		shouldForceMetricsCollection: false,
 	},
 ];

dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx

@@ -308,6 +308,7 @@ const Theme = ({
  * mode, once for each format, and three times in dark mode, once for each
  * format.
  *
+ * @deprecated
  * The returned "splitTheme" decorator was historically used directly in story
  * files. This approach is now deprecated in favour of the "global colour
  * scheme" decorator and toolbar item, which use the "splitTheme" decorator in

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -519,7 +519,7 @@ export const ArticleMeta = ({
 					</div>
 				</div>
 				{preferredSource.hasButton ? (
-					<PreferredSourceButton text={preferredSource.copy} />
+					<PreferredSourceButton kind={preferredSource.kind} />
 				) : null}
 			</div>
 		</div>

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

@@ -39,6 +39,7 @@ const container = css`
 	flex-direction: column;
 	height: 100%;
 	column-gap: ${space[2]}px;
+	justify-content: space-between;
 	/** Relative positioning is required to absolutely position the card link overlay */
 	position: relative;
 	padding: ${space[2]}px ${space[2]}px 0 ${space[2]}px;

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

@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const VariantA = {
 	args: {
-		text: 'Prefer the Guardian on Google',
+		kind: 'prefer',
 	},
 	parameters: {
 		chromatic: {
@@ -27,7 +27,7 @@ export const VariantA = {
 
 export const VariantB = {
 	args: {
-		text: 'Add the Guardian on Google',
+		kind: 'add',
 	},
 	parameters: {
 		chromatic: {

dotcom-rendering/src/components/PreferredSourceButton.tsx

@@ -6,18 +6,21 @@ import {
 	textSans14Object,
 } from '@guardian/source/foundations';
 import { LinkButton, SvgGoogleBrand } from '@guardian/source/react-components';
+import type { ButtonKind } from '../experiments/preferredSource';
 import { palette } from '../palette';
 
 type Props = {
-	text: string;
+	kind: ButtonKind;
 };
 
-export const PreferredSourceButton = ({ text }: Props) => (
+export const PreferredSourceButton = ({ kind }: Props) => (
 	<LinkButton
 		priority="tertiary"
 		icon={<SvgGoogleBrand />}
 		size="small"
 		href="https://www.google.com/preferences/source?q=theguardian.com"
+		data-component={`preferred-source-button-${kind}`}
+		data-link-name={`preferred-source-button-${kind}`}
 		cssOverrides={css({
 			...textSans14Object,
 			padding: '8px 12px 10px',
@@ -49,6 +52,15 @@ export const PreferredSourceButton = ({ text }: Props) => (
 			backgroundTertiaryHover: palette('--preferred-source-button-hover'),
 		}}
 	>
-		{text}
+		{copy(kind)}
 	</LinkButton>
 );
+
+const copy = (kind: Props['kind']): string => {
+	switch (kind) {
+		case 'prefer':
+			return 'Prefer the Guardian on Google';
+		case 'add':
+			return 'Add the Guardian on Google';
+	}
+};

dotcom-rendering/src/components/ProductSummary.Importable.tsx

@@ -0,0 +1,34 @@
+import type { ArticleFormat } from '../lib/articleFormat';
+import type { ABTestVariant } from '../model/enhance-product-summary';
+import type { ProductBlockElement } from '../types/content';
+import { Island } from './Island';
+import { ScrollableProduct } from './ScrollableProduct.importable';
+import { StackedProducts } from './StackedProducts.importable';
+
+export const ProductSummary = ({
+	products,
+	format,
+	variant,
+}: {
+	products: ProductBlockElement[];
+	format: ArticleFormat;
+	variant: ABTestVariant;
+}) => {
+	if (variant === 'carousel') {
+		return (
+			<Island priority="feature" defer={{ until: 'idle' }}>
+				<ScrollableProduct products={products} format={format} />
+			</Island>
+		);
+	}
+
+	return (
+		<Island priority="feature" defer={{ until: 'idle' }}>
+			<StackedProducts
+				products={products}
+				heading={'At a glance'}
+				format={format}
+			/>
+		</Island>
+	);
+};

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -45,7 +45,7 @@ import { DesignableBannerHeader } from './components/DesignableBannerHeader';
 import { DesignableBannerVisual } from './components/DesignableBannerVisual';
 import type {
 	BannerTemplateSettings,
-	ChoiceCardSettings,
+	ChoiceCardDesignSettings,
 	CtaSettings,
 } from './settings';
 import { buttonStyles, buttonThemes } from './styles/buttonStyles';
@@ -82,7 +82,7 @@ const buildHeaderImageSettings = (
 
 const buildChoiceCardSettings = (
 	design: ConfigurableDesign,
-): ChoiceCardSettings | undefined => {
+): ChoiceCardDesignSettings | undefined => {
 	if (design.visual?.kind === 'ChoiceCards') {
 		const {
 			buttonColour,
@@ -478,7 +478,9 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 									choices={choiceCards}
 									id={'banner'}
 									submitComponentEvent={submitComponentEvent}
-									choiceCardSettings={choiceCardSettings}
+									choiceCardDesignSettings={
+										choiceCardSettings
+									}
 								/>
 							)}
 							<div

dotcom-rendering/src/components/marketing/banners/designableBanner/settings.ts

@@ -36,7 +36,7 @@ export interface HeaderSettings {
 	headerImage?: Image;
 }
 
-export interface ChoiceCardSettings {
+export interface ChoiceCardDesignSettings {
 	buttonColour?: string;
 	buttonTextColour?: string;
 	buttonBorderColour?: string;
@@ -58,7 +58,7 @@ export interface BannerTemplateSettings {
 	articleCountTextColour?: string;
 	imageSettings?: Image;
 	alternativeVisual?: ReactNode;
-	choiceCardSettings?: ChoiceCardSettings;
+	choiceCardSettings?: ChoiceCardDesignSettings;
 	bannerId?: BannerId;
 	tickerStylingSettings?: TickerSettings['tickerStylingSettings'];
 	headerSettings?: HeaderSettings;

dotcom-rendering/src/components/marketing/lib/storybook.ts

@@ -97,6 +97,48 @@ export const choiceCardsSettings: ChoiceCardsSettings = {
 	],
 };
 
+export const choiceCardsSettingsWithDiscountPill: ChoiceCardsSettings = {
+	...choiceCardsSettings,
+	choiceCards: choiceCardsSettings.choiceCards.map((card, index) => {
+		if (index === 1) {
+			return {
+				...card,
+				label: 'Support <s>£12</s> £6/monthly',
+				pill: {
+					copy: '50% off',
+					backgroundColour: {
+						kind: 'hex',
+						r: 'BB',
+						g: '80',
+						b: '3B',
+					},
+				},
+			};
+		}
+		return card;
+	}),
+	mobileChoiceCards: choiceCardsSettings.mobileChoiceCards?.map(
+		(card, index) => {
+			if (index === 1) {
+				return {
+					...card,
+					label: 'Support <s>£12</s> £6/monthly',
+					pill: {
+						copy: '50% off',
+						backgroundColour: {
+							kind: 'hex',
+							r: 'BB',
+							g: '80',
+							b: '3B',
+						},
+					},
+				};
+			}
+			return card;
+		},
+	),
+};
+
 export const choiceCardsWithMixedDestinations: ChoiceCardsSettings = {
 	choiceCards: [
 		{