Merge branch 'main' into mob/inline-product-card

Author: oliverabrahams

ab-testing/frontend/src/routes/+page.svelte

@@ -4,7 +4,7 @@
 	import AudienceBreakdown from '$lib/components/AudienceBreakdown.svelte';
 </script>
 
-<h1 class="headline">A/B Tests</h1>
+<h1 class="headline">A/B Tests (Beta)</h1>
 <section>
 	<p>
 		This page provides an overview of currently running A/B tests on
@@ -31,8 +31,14 @@
 	</p>
 </section>
 <section>
-	<AudienceBreakdown tests={activeABtests} />
-	<Table tests={allABTests} />
+	{#if activeABtests.length > 0}
+		<AudienceBreakdown tests={activeABtests} />
+	{/if}
+	{#if allABTests.length > 0}
+		<Table tests={allABTests} />
+	{:else}
+		<p>There are <b>ZERO</b> A/B tests currently configured!</p>
+	{/if}
 </section>
 
 <style>

apps-rendering/src/client/article.ts

@@ -85,26 +85,28 @@ function followToggle(
 		if (isFollowing) {
 			void bridgetClient.unfollow(topic).then((unfollow) => {
 				// unfollow will be true if the update was successful
-				unfollow &&
+				if (unfollow) {
 					ReactDOM.render(
 						h(followStatusComponent, {
 							isFollowing: false,
 							contributorName: topic.displayName,
 						}),
 						followStatus,
 					);
+				}
 			});
 		} else {
 			void bridgetClient.follow(topic).then((follow) => {
 				// follow will be true if the update was successful
-				follow &&
+				if (follow) {
 					ReactDOM.render(
 						h(followStatusComponent, {
 							isFollowing: true,
 							contributorName: topic.displayName,
 						}),
 						followStatus,
 					);
+				}
 			});
 		}
 	});
@@ -167,16 +169,19 @@ function conditionallyRenderFollowTagComponent(
 				isMyGuardianEnabled,
 				tagIsFollowingState,
 			]) => {
-				isBridgetCompatible &&
+				if (
+					isBridgetCompatible &&
 					isMyGuardianEnabled &&
-					followTagStatus &&
+					followTagStatus
+				) {
 					ReactDOM.render(
 						h(FollowTagStatus, {
 							isFollowing: tagIsFollowingState,
 							contributorName: topic.displayName,
 						}),
 						followTagStatus,
 					);
+				}
 
 				followTag?.addEventListener('click', followTagClick);
 				followTag?.setAttribute('aria-hidden', 'false');

apps-rendering/src/components/editions/galleryImage/index.tsx

@@ -94,9 +94,9 @@ const getCaptionDetails = (oDoc: Option<DocumentFragment>): CaptionDetails => {
 	): CaptionDetails => {
 		const detailsSection = details[section];
 
-		node.textContent &&
-			detailsSection.kind === OptionKind.Some &&
+		if (node.textContent && detailsSection.kind === OptionKind.Some) {
 			detailsSection.value.push(node.textContent);
+		}
 
 		return details;
 	};

dotcom-rendering/fixtures/manual/trails.ts

@@ -605,6 +605,49 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 	},
 ];
 
+export const newsletterTrails: [DCRFrontCard, DCRFrontCard] = [
+	{
+		format: { design: 0, display: 0, theme: 0 },
+		dataLinkName: 'news | group-0 | card-@4',
+		url: '/global/2022/sep/20/sign-up-for-the-guide-newsletter-our-free-pop-culture-email',
+		headline: 'Sign up for a weekly dose of pop culture',
+		trailText:
+			'The best new music, film, TV, podcasts and more direct to your inbox, plus hidden gems and reader recommendations',
+		webPublicationDate: '2022-09-20T10:57:04.000Z',
+		kickerText: 'The Guide',
+		isNewsletter: true,
+		image: {
+			src: 'https://media.guim.co.uk/ce2e59cfa2ab7db34cba24adbf20910976e55604/0_55_501_401/master/501.jpg',
+			altText: 'The Guide Newsletter Design',
+		},
+		showQuotedHeadline: false,
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		isExternalLink: false,
+		showLivePlayable: false,
+		isImmersive: false,
+	},
+	{
+		format: { design: 0, display: 0, theme: 0 },
+		dataLinkName: 'news | group-0 | card-@2',
+		url: '/info/2024/oct/10/sign-up-for-the-filter-newsletter-our-free-weekly-buying-advice',
+		headline: 'Sign up our free weekly buying advice newsletter',
+		trailText:
+			'Get smart, sustainable shopping advice from the Filter team straight to your inbox, every Sunday<br><br>The Guardian’s journalism is independent. We will earn a commission if you buy something through an affiliate link.',
+		webPublicationDate: '2024-10-10T10:30:16.000Z',
+		kickerText: 'The Filter',
+		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
+		isNewsletter: true,
+		image: {
+			src: 'https://media.guim.co.uk/e5269c957a8e19da44d76b53f349b8d5a3b6a98f/0_0_5000_3000/master/5000.jpg',
+			altText: 'The Filter',
+		},
+		showQuotedHeadline: false,
+		isExternalLink: false,
+		showLivePlayable: false,
+		isImmersive: false,
+	},
+];
+
 export const loopVideoCard: DCRFrontCard = {
 	...defaultCardProps,
 	dataLinkName: 'news | group-0 | card-@2',

dotcom-rendering/src/components/ArticleBody.tsx

@@ -54,6 +54,7 @@ type Props = {
 	lang?: string;
 	isRightToLeftLang?: boolean;
 	shouldHideAds: boolean;
+	serverTime?: number;
 };
 
 const globalOlStyles = () => css`
@@ -137,6 +138,7 @@ export const ArticleBody = ({
 	isRightToLeftLang = false,
 	editionId,
 	shouldHideAds,
+	serverTime,
 }: Props) => {
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
@@ -205,6 +207,7 @@ export const ArticleBody = ({
 					keywordIds={keywordIds}
 					editionId={editionId}
 					shouldHideAds={shouldHideAds}
+					serverTime={serverTime}
 				/>
 			</div>
 		);

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

@@ -47,7 +47,6 @@ const basicCardProps: CardProps = {
 	imageLoading: 'eager',
 	discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/',
 	showVideo: true,
-	absoluteServerTimes: true,
 	headlinePosition: 'inner',
 };
 

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

@@ -79,7 +79,7 @@ export type Position = 'inner' | 'outer' | 'none';
 export type Props = {
 	linkTo: string;
 	format: ArticleFormat;
-	absoluteServerTimes: boolean;
+	serverTime?: number;
 	headlineText: string;
 	headlineSizes?: ResponsiveFontSize;
 	showQuotedHeadline?: boolean;
@@ -388,7 +388,7 @@ export const Card = ({
 	liveUpdatesPosition = 'inner',
 	onwardsSource,
 	showVideo = true,
-	absoluteServerTimes,
+	serverTime,
 	isTagPage = false,
 	aspectRatio,
 	index = 0,
@@ -450,7 +450,7 @@ export const Card = ({
 					isWithinTwelveHours: withinTwelveHours,
 				}}
 				showClock={showClock}
-				absoluteServerTimes={absoluteServerTimes}
+				serverTime={serverTime}
 				isTagPage={isTagPage}
 			/>
 		);
@@ -1261,9 +1261,7 @@ export const Card = ({
 												: supportingContentAlignment
 										}
 										containerPalette={containerPalette}
-										absoluteServerTimes={
-											absoluteServerTimes
-										}
+										serverTime={serverTime}
 										displayHeader={isFlexibleContainer}
 										directionOnMobile={
 											isFlexibleContainer
@@ -1318,7 +1316,7 @@ export const Card = ({
 									: supportingContentAlignment
 							}
 							containerPalette={containerPalette}
-							absoluteServerTimes={absoluteServerTimes}
+							serverTime={serverTime}
 							displayHeader={isFlexibleContainer}
 							directionOnMobile={'horizontal'}
 						></LatestLinks>

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

@@ -22,7 +22,7 @@ const ageStyles = (colour: string) => {
 };
 
 type Props = {
-	absoluteServerTimes: boolean;
+	serverTime?: number;
 	webPublication: {
 		date: string;
 		isWithinTwelveHours: boolean;
@@ -33,7 +33,7 @@ type Props = {
 };
 
 export const CardAge = ({
-	absoluteServerTimes,
+	serverTime,
 	webPublication,
 	isTagPage,
 	showClock,
@@ -58,7 +58,7 @@ export const CardAge = ({
 				<DateTime
 					date={new Date(webPublication.date)}
 					display={'relative'}
-					absoluteServerTimes={absoluteServerTimes}
+					serverTime={serverTime}
 					showWeekday={false}
 					showDate={true}
 					showTime={false}

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

@@ -43,7 +43,7 @@ type Props = {
 	onwardsSource: OnwardsSource;
 	leftColSize: LeftColSize;
 	discussionApiUrl: string;
-	absoluteServerTimes: boolean;
+	serverTime?: number;
 	renderingTarget: RenderingTarget;
 };
 
@@ -449,7 +449,7 @@ type CarouselCardProps = {
 	linkTo: string;
 	headlineText: string;
 	webPublicationDate: string;
-	absoluteServerTimes: boolean;
+	serverTime?: number;
 	imageLoading: Loading;
 	kickerText?: string;
 	image?: DCRFrontImage;
@@ -483,7 +483,7 @@ const CarouselCard = ({
 	imageLoading,
 	discussionApiUrl,
 	isOnwardContent,
-	absoluteServerTimes,
+	serverTime,
 	starRating,
 	index,
 }: CarouselCardProps) => {
@@ -527,7 +527,7 @@ const CarouselCard = ({
 				isOnwardContent={isOnwardContent}
 				mediaPositionOnDesktop={cardImagePosition}
 				mediaPositionOnMobile={cardImagePosition}
-				absoluteServerTimes={absoluteServerTimes}
+				serverTime={serverTime}
 				starRating={starRating}
 				index={index}
 				showTopBarDesktop={!isOnwardContent}
@@ -751,7 +751,7 @@ export const Carousel = ({
 	leftColSize,
 	discussionApiUrl,
 	isOnwardContent = true,
-	absoluteServerTimes,
+	serverTime,
 	renderingTarget,
 	...props
 }: ArticleProps | FrontProps) => {
@@ -973,7 +973,7 @@ export const Carousel = ({
 									linkTo={linkTo}
 									headlineText={headlineText}
 									webPublicationDate={webPublicationDate}
-									absoluteServerTimes={absoluteServerTimes}
+									serverTime={serverTime}
 									image={image}
 									kickerText={kickerText}
 									dataLinkName={`carousel-small-card-position-${i}`}

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

@@ -269,7 +269,6 @@ export const Headlines: StoryObj = ({ format }: StoryProps) => {
 				format={format}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -295,7 +294,6 @@ export const SingleItemCarousel = () => {
 				format={defaultFormat}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -350,7 +348,6 @@ export const SingleOpinionCarousel = () => {
 				}}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -381,7 +378,6 @@ export const Immersive = () => {
 					}}
 					leftColSize="compact"
 					discussionApiUrl={discussionApiUrl}
-					absoluteServerTimes={true}
 					renderingTarget="Web"
 				/>
 			</Section>
@@ -427,7 +423,6 @@ export const SpecialReportAlt = () => {
 				format={specialReportAltFormat}
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>
@@ -643,7 +638,6 @@ export const AllCards = () => {
 				leftColSize="compact"
 				discussionApiUrl={discussionApiUrl}
 				format={defaultFormat}
-				absoluteServerTimes={true}
 				renderingTarget="Web"
 			/>
 		</Section>