Merge branch 'main' into dina/add-share-button-colour-for-hosted

Author: deedeeh

ab-testing/config/abTests.ts

@@ -81,18 +81,6 @@ const ABTests: ABTest[] = [
 		groups: ["true"],
 		shouldForceMetricsCollection: false,
 	},
-	{
-		name: "webex-preferred-source",
-		description:
-			"Testing the Preferred Source on Google button in the meta section of articles",
-		owners: ["dotcom.platform@theguardian.com"],
-		expirationDate: "2026-02-25",
-		type: "server",
-		status: "ON",
-		audienceSize: 20 / 100,
-		audienceSpace: "A",
-		groups: ["control", "prefer", "add"],
-	},
 	{
 		name: "commercial-mobile-inline1-halfpage",
 		description:

dotcom-rendering/cdk/bin/cdk.ts

@@ -21,7 +21,7 @@ new RenderingCDKStack(cdkApp, 'ArticleRendering-CODE', {
 	stage: 'CODE',
 	domainName: 'article-rendering.code.dev-guardianapis.com',
 	scaling: { minimumInstances: 1, maximumInstances: 3 },
-	instanceType: InstanceType.of(InstanceClass.T4G, InstanceSize.SMALL),
+	instanceType: InstanceType.of(InstanceClass.T4G, InstanceSize.MEDIUM),
 });
 new RenderingCDKStack(cdkApp, 'ArticleRendering-PROD', {
 	guApp: 'article-rendering',

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

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { CSSProperties } from 'react';
-import { preferredSourceExperiment } from '../experiments/preferredSource';
 import type { FEArticle } from '../frontend/feArticle';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
@@ -13,8 +12,8 @@ import {
 } from '../lib/articleFormat';
 import { getAudioData } from '../lib/audio-data';
 import { getSoleContributor } from '../lib/byline';
-import { useBetaAB } from '../lib/useAB';
 import { palette as themePalette } from '../palette';
+import { hasPreferredSourceButton } from '../preferredSource';
 import type { Branding as BrandingType } from '../types/branding';
 import type { FEElement } from '../types/content';
 import type { Podcast, TagType } from '../types/tag';
@@ -343,12 +342,10 @@ export const ArticleMeta = ({
 	mainMediaElements,
 	crossword,
 }: Props) => {
-	const abTests = useBetaAB();
 	const { renderingTarget } = useConfig();
-	const preferredSource = preferredSourceExperiment(
+	const showPreferredSource = hasPreferredSourceButton(
 		renderingTarget,
 		format,
-		abTests,
 	);
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
@@ -446,7 +443,7 @@ export const ArticleMeta = ({
 				<div
 					data-print-layout="hide"
 					css={metaFlex}
-					style={preferredSourceMetaFlex(preferredSource.hasButton)}
+					style={preferredSourceMetaFlex(showPreferredSource)}
 				>
 					{renderingTarget === 'Web' && (
 						<div
@@ -464,7 +461,7 @@ export const ArticleMeta = ({
 									),
 							]}
 							style={preferredSourceMetaExtras(
-								preferredSource.hasButton,
+								showPreferredSource,
 							)}
 						>
 							<Island
@@ -518,9 +515,7 @@ export const ArticleMeta = ({
 						</div>
 					</div>
 				</div>
-				{preferredSource.hasButton ? (
-					<PreferredSourceButton kind={preferredSource.kind} />
-				) : null}
+				{showPreferredSource ? <PreferredSourceButton /> : null}
 			</div>
 		</div>
 	);

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
 import { between, from, space, until } from '@guardian/source/foundations';
-import { Hide, Link, SvgCamera } from '@guardian/source/react-components';
+import { Hide, Link } from '@guardian/source/react-components';
 import {
 	ArticleDesign,
 	type ArticleFormat,
@@ -337,14 +337,6 @@ const decideSublinkPosition = (
 	return alignment === 'vertical' ? 'inner' : 'outer';
 };
 
-const liveBulletStyles = css`
-	width: 9px;
-	height: 9px;
-	border-radius: 50%;
-	background-color: ${palette('--pill-bullet')};
-	margin-right: ${space[1]}px;
-`;
-
 export const Card = ({
 	linkTo,
 	format,
@@ -489,85 +481,6 @@ export const Card = ({
 			</Link>
 		);
 
-	const MediaOrNewsletterPill = () => (
-		<div
-			css={css`
-				margin-top: auto;
-				display: flex;
-				${isStorylines &&
-				`
-					flex-direction: column;
-					gap: ${space[1]}px;
-					align-items: flex-start;
-				`}
-			`}
-		>
-			{/* Usually, we either display the pill or the footer,
-				but if the card appears in the storylines section on tag pages
-				then we do want to display the date on these cards as well as the media pill.
-			*/}
-			{isStorylines && (
-				<CardFooter
-					format={format}
-					age={decideAge()}
-					commentCount={<CommentCount />}
-					cardBranding={
-						isOnwardContent ? <LabsBranding /> : undefined
-					}
-					showLivePlayable={showLivePlayable}
-				/>
-			)}
-
-			{mainMedia?.type === 'YoutubeVideo' && isVideoArticle && (
-				<>
-					{mainMedia.isLive ? (
-						<Pill
-							content="Live"
-							icon={<div css={liveBulletStyles} />}
-						/>
-					) : (
-						<Pill
-							content={secondsToDuration(mainMedia.duration)}
-							icon={<SvgMediaControlsPlay width={18} />}
-							prefix="Video"
-						/>
-					)}
-				</>
-			)}
-			{mainMedia?.type === 'Audio' && (
-				<Pill
-					content={mainMedia.duration}
-					icon={<SvgMediaControlsPlay width={18} />}
-					prefix="Podcast"
-				/>
-			)}
-			{mainMedia?.type === 'Gallery' && (
-				<Pill
-					content={mainMedia.count}
-					icon={<SvgCamera />}
-					prefix="Gallery"
-				/>
-			)}
-			{mainMedia?.type === 'SelfHostedVideo' &&
-				(format.design === ArticleDesign.Video ? (
-					<Pill
-						content=""
-						icon={<SvgMediaControlsPlay width={18} />}
-						prefix="Video"
-					/>
-				) : format.design === ArticleDesign.Audio ? (
-					<Pill
-						content=""
-						icon={<SvgMediaControlsPlay width={18} />}
-						prefix="Podcast"
-					/>
-				) : format.design === ArticleDesign.Gallery ? (
-					<Pill content="" icon={<SvgCamera />} prefix="Gallery" />
-				) : null)}
-			{isNewsletter && <Pill content="Newsletter" />}
-		</div>
-	);
-
 	if (snapData?.embedHtml) {
 		return (
 			<SnapCssSandbox snapData={snapData}>
@@ -589,13 +502,11 @@ export const Card = ({
 		isOnwardContent && onwardsSource === 'more-galleries';
 
 	/**
--	 * Media cards have contrasting background colours. We add additional
-* padding to these cards to keep the text readable.
--     */
+	 * Media cards have contrasting background colours. We add additional
+	 * padding to these cards to keep the text readable.
+	 */
 	const isMediaCardOrNewsletter = isMediaCard(format) || isNewsletter;
 
-	const showPill = isMediaCardOrNewsletter && !isGallerySecondaryOnward;
-
 	const media = getMedia({
 		imageUrl: image?.src,
 		imageAltText: image?.altText,
@@ -1300,32 +1211,23 @@ export const Card = ({
 								/>
 							)}
 
-							{!isOpinionCardWithAvatar && (
-								<>
-									{showPill ? (
-										<>
-											{!!branding &&
-												format.theme ===
-													ArticleSpecial.Labs &&
-												isOnwardContent && (
-													<LabsBranding />
-												)}
-											<MediaOrNewsletterPill />
-										</>
-									) : (
-										<CardFooter
-											format={format}
-											age={decideAge()}
-											commentCount={<CommentCount />}
-											cardBranding={
-												isOnwardContent ? (
-													<LabsBranding />
-												) : undefined
-											}
-											showLivePlayable={showLivePlayable}
-										/>
-									)}
-								</>
+							{!isOpinionCardWithAvatar && !showLivePlayable && (
+								<CardFooter
+									format={format}
+									age={decideAge()}
+									commentCount={<CommentCount />}
+									cardBranding={
+										isOnwardContent ? (
+											<LabsBranding />
+										) : undefined
+									}
+									mainMedia={
+										!isGallerySecondaryOnward
+											? mainMedia
+											: undefined
+									}
+									isNewsletter={isNewsletter}
+								/>
 							)}
 							{showLivePlayable &&
 								liveUpdatesPosition === 'inner' && (
@@ -1410,12 +1312,11 @@ export const Card = ({
 
 				{decideOuterSublinks()}
 
-				{isOpinionCardWithAvatar && (
+				{isOpinionCardWithAvatar && !showLivePlayable && (
 					<CardFooter
 						format={format}
 						age={decideAge()}
 						commentCount={<CommentCount />}
-						showLivePlayable={showLivePlayable}
 						shouldReserveSpace={{
 							mobile: avatarPosition.mobile === 'bottom',
 							desktop: avatarPosition.desktop === 'bottom',

dotcom-rendering/src/components/Card/components/CardFooter.stories.tsx

@@ -23,7 +23,6 @@ export const WithAge = {
 			design: ArticleDesign.Comment,
 			theme: Pillar.Opinion,
 		},
-		showLivePlayable: false,
 		age: <p>19h ago</p>,
 	},
 } satisfies Story;
@@ -56,7 +55,15 @@ export const WithVideo = {
 		...WithAge.args,
 		mainMedia: {
 			type: 'YoutubeVideo',
+			id: 'abcdef',
+			videoId: 'abcd',
+			title: 'some title',
 			duration: 972,
+			width: 480,
+			height: 288,
+			origin: 'The Guardian',
+			expired: false,
+			image: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
 		},
 	},
 } satisfies Story;