From d8977632dd88ba7e2659e7fe4f11c1cd413b2eab Mon Sep 17 00:00:00 2001
From: Max Duval <max.duval@theguardian.com>
Date: Thu, 18 Jan 2024 16:25:37 +0000
Subject: [PATCH] Fold `RelativeTime` into `DateTime` (#10178)

* refactor(RelativeTime): folded into DateTime

* fix(DateTime): allow not showing weekday

* fix: remove time from KeyEventCard

* fix: remove time from PinnedPost
---
 .../components/Card/components/CardAge.tsx    | 14 +++--
 .../src/components/CricketScoreboard.tsx      |  8 ++-
 .../src/components/DateTime.stories.tsx       | 58 +++++++++++++++++--
 dotcom-rendering/src/components/DateTime.tsx  | 44 ++++++++++++--
 .../src/components/FirstPublished.tsx         | 17 +++---
 .../src/components/KeyEventCard.tsx           | 14 +++--
 .../src/components/LastUpdated.tsx            |  4 +-
 .../src/components/LatestLinks.importable.tsx | 15 ++++-
 .../src/components/PinnedPost.tsx             | 22 +++----
 .../src/components/WitnessBlockComponent.tsx  |  4 +-
 10 files changed, 153 insertions(+), 47 deletions(-)

diff --git a/dotcom-rendering/src/components/Card/components/CardAge.tsx b/dotcom-rendering/src/components/Card/components/CardAge.tsx
index 169a16e49af..a052131fb07 100644
--- a/dotcom-rendering/src/components/Card/components/CardAge.tsx
+++ b/dotcom-rendering/src/components/Card/components/CardAge.tsx
@@ -4,8 +4,7 @@ import { textSans, until } from '@guardian/source-foundations';
 import { palette } from '../../../palette';
 import ClockIcon from '../../../static/icons/clock.svg';
 import type { DCRContainerPalette } from '../../../types/front';
-import { Island } from '../../Island';
-import { RelativeTime } from '../../RelativeTime.importable';
+import { DateTime } from '../../DateTime';
 
 type Props = {
 	format: ArticleFormat;
@@ -77,9 +76,14 @@ export const CardAge = ({
 			css={ageStyles(format, containerPalette, isDynamo, isOnwardContent)}
 		>
 			{showClock && <ClockIcon />}
-			<Island priority="enhancement" defer={{ until: 'visible' }}>
-				<RelativeTime then={new Date(webPublicationDate).getTime()} />
-			</Island>
+			<DateTime
+				date={new Date(webPublicationDate)}
+				display="relative"
+				editionId="UK"
+				showWeekday={false}
+				showDate={true}
+				showTime={false}
+			/>
 		</span>
 	);
 };
diff --git a/dotcom-rendering/src/components/CricketScoreboard.tsx b/dotcom-rendering/src/components/CricketScoreboard.tsx
index 892aff16a6a..da7d8c47b9f 100644
--- a/dotcom-rendering/src/components/CricketScoreboard.tsx
+++ b/dotcom-rendering/src/components/CricketScoreboard.tsx
@@ -142,7 +142,13 @@ export const CricketScoreboard = ({
 	return (
 		<div css={containerStyle}>
 			<h2 css={screenReaderOnlyStyle}>
-				<DateTime date={date} editionId={editionId} show="date" />
+				<DateTime
+					date={date}
+					editionId={editionId}
+					showWeekday={false}
+					showDate={true}
+					showTime={false}
+				/>
 				{match.competitionName}, {match.venueName}
 			</h2>
 			<table css={tableStyle}>
diff --git a/dotcom-rendering/src/components/DateTime.stories.tsx b/dotcom-rendering/src/components/DateTime.stories.tsx
index bbee379f38c..f63242c55c2 100644
--- a/dotcom-rendering/src/components/DateTime.stories.tsx
+++ b/dotcom-rendering/src/components/DateTime.stories.tsx
@@ -28,27 +28,73 @@ export const UK: Story = {
 };
 
 export const TimeOnly: Story = {
-	args: { date, editionId: 'UK', show: 'time' },
+	args: {
+		date,
+		editionId: 'UK',
+		showWeekday: false,
+		showDate: false,
+		showTime: true,
+	},
 };
 
 export const DateOnly: Story = {
-	args: { date, editionId: 'UK', show: 'date' },
+	args: {
+		date,
+		editionId: 'UK',
+		showWeekday: false,
+		showDate: true,
+		showTime: false,
+	},
+};
+
+export const WeekdayDateOnly: Story = {
+	args: {
+		date,
+		editionId: 'UK',
+		showWeekday: true,
+		showDate: true,
+		showTime: false,
+	},
 };
 
 export const US: Story = {
-	args: { date, editionId: 'US' },
+	args: {
+		date,
+		editionId: 'US',
+		showWeekday: true,
+		showDate: true,
+		showTime: true,
+	},
 };
 
 export const AU: Story = {
-	args: { date, editionId: 'AU' },
+	args: {
+		date,
+		editionId: 'AU',
+		showWeekday: true,
+		showDate: true,
+		showTime: true,
+	},
 };
 
 export const EUR: Story = {
-	args: { date, editionId: 'EUR' },
+	args: {
+		date,
+		editionId: 'EUR',
+		showWeekday: true,
+		showDate: true,
+		showTime: true,
+	},
 };
 
 export const INT: Story = {
-	args: { date, editionId: 'INT' },
+	args: {
+		date,
+		editionId: 'INT',
+		showWeekday: true,
+		showDate: true,
+		showTime: true,
+	},
 };
 
 export default meta;
diff --git a/dotcom-rendering/src/components/DateTime.tsx b/dotcom-rendering/src/components/DateTime.tsx
index 8746b148fc7..8f050052d79 100644
--- a/dotcom-rendering/src/components/DateTime.tsx
+++ b/dotcom-rendering/src/components/DateTime.tsx
@@ -1,15 +1,26 @@
+import { isString, timeAgo } from '@guardian/libs';
 import { type EditionId, getEditionFromId } from '../lib/edition';
+import { Island } from './Island';
+import { RelativeTime } from './RelativeTime.importable';
 
 type Props = {
 	date: Date;
 	editionId: EditionId;
-	show?: 'date & time' | 'date' | 'time';
+	showWeekday: boolean;
+	showDate: boolean;
+	showTime: boolean;
+	display?: 'absolute' | 'relative';
 };
 
+const formatWeekday = (date: Date, locale: string, timeZone: string) =>
+	date.toLocaleDateString(locale, {
+		weekday: 'short',
+		timeZone,
+	});
+
 const formatDate = (date: Date, locale: string, timeZone: string) =>
 	date
 		.toLocaleDateString(locale, {
-			weekday: 'short',
 			day: 'numeric',
 			month: 'short',
 			year: 'numeric',
@@ -28,9 +39,25 @@ const formatTime = (date: Date, locale: string, timeZone: string) =>
 		})
 		.replace(':', '.');
 
-export const DateTime = ({ date, editionId, show = 'date & time' }: Props) => {
+export const DateTime = ({
+	date,
+	editionId,
+	showWeekday,
+	showDate,
+	showTime,
+	display = 'absolute',
+}: Props) => {
 	const { locale, timeZone } = getEditionFromId(editionId);
-	return (
+
+	const epoch = date.getTime();
+	const relativeTime = display === 'relative' && timeAgo(epoch);
+	const isRecent = isString(relativeTime) && relativeTime.endsWith(' ago');
+
+	return isRecent ? (
+		<Island priority="enhancement" defer={{ until: 'visible' }}>
+			<RelativeTime then={epoch} />
+		</Island>
+	) : (
 		<time
 			dateTime={date.toISOString()}
 			data-locale={locale}
@@ -45,8 +72,13 @@ export const DateTime = ({ date, editionId, show = 'date & time' }: Props) => {
 				timeZone,
 			})}
 		>
-			{show.includes('date') && formatDate(date, locale, timeZone)}{' '}
-			{show.includes('time') && formatTime(date, locale, timeZone)}
+			{[
+				showWeekday && formatWeekday(date, locale, timeZone),
+				showDate && formatDate(date, locale, timeZone),
+				showTime && formatTime(date, locale, timeZone),
+			]
+				.filter(isString)
+				.join(' ')}
 		</time>
 	);
 };
diff --git a/dotcom-rendering/src/components/FirstPublished.tsx b/dotcom-rendering/src/components/FirstPublished.tsx
index 509dad6cc6a..c2a4cb02d64 100644
--- a/dotcom-rendering/src/components/FirstPublished.tsx
+++ b/dotcom-rendering/src/components/FirstPublished.tsx
@@ -3,8 +3,7 @@ import { joinUrl } from '@guardian/libs';
 import { palette, space, textSans } from '@guardian/source-foundations';
 import { SvgPinned } from '@guardian/source-react-components';
 import { palette as themePalette } from '../palette';
-import { Island } from './Island';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 const fallbackDate = (date: Date) =>
 	[date.getHours(), date.getMinutes()]
@@ -62,12 +61,14 @@ const FirstPublished = ({
 							margin-right: ${space[2]}px;
 						`}
 					>
-						<Island
-							priority="enhancement"
-							defer={{ until: 'visible' }}
-						>
-							<RelativeTime then={firstPublished}></RelativeTime>
-						</Island>
+						<DateTime
+							date={new Date(firstPublished)}
+							display="relative"
+							editionId="UK"
+							showWeekday={false}
+							showDate={true}
+							showTime={false}
+						/>
 					</span>
 				)}
 				<span
diff --git a/dotcom-rendering/src/components/KeyEventCard.tsx b/dotcom-rendering/src/components/KeyEventCard.tsx
index 2576be7c025..f358ba73f18 100644
--- a/dotcom-rendering/src/components/KeyEventCard.tsx
+++ b/dotcom-rendering/src/components/KeyEventCard.tsx
@@ -2,8 +2,7 @@ import { css } from '@emotion/react';
 import { from, space, textSans } from '@guardian/source-foundations';
 import { Link } from '@guardian/source-react-components';
 import { palette } from '../palette';
-import { Island } from './Island';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 interface Props {
 	id: string;
@@ -120,9 +119,14 @@ export const KeyEventCard = ({
 				data-link-name={`key event card | ${cardPosition}`}
 			>
 				<div css={timeStyles}>
-					<Island priority="enhancement" defer={{ until: 'visible' }}>
-						<RelativeTime then={blockFirstPublished} />
-					</Island>
+					<DateTime
+						date={new Date(blockFirstPublished)}
+						display="relative"
+						editionId="UK"
+						showWeekday={false}
+						showDate={true}
+						showTime={false}
+					/>
 				</div>
 				<div css={textStyles}>{title}</div>
 			</Link>
diff --git a/dotcom-rendering/src/components/LastUpdated.tsx b/dotcom-rendering/src/components/LastUpdated.tsx
index 72e2b59a7ff..063ea3188c4 100644
--- a/dotcom-rendering/src/components/LastUpdated.tsx
+++ b/dotcom-rendering/src/components/LastUpdated.tsx
@@ -23,7 +23,9 @@ const LastUpdated = ({
 			<DateTime
 				date={new Date(lastUpdated)}
 				editionId={editionId}
-				show="time"
+				showWeekday={false}
+				showDate={false}
+				showTime={true}
 			/>
 		</div>
 	);
diff --git a/dotcom-rendering/src/components/LatestLinks.importable.tsx b/dotcom-rendering/src/components/LatestLinks.importable.tsx
index 1c62dd9e732..4f4080010f0 100644
--- a/dotcom-rendering/src/components/LatestLinks.importable.tsx
+++ b/dotcom-rendering/src/components/LatestLinks.importable.tsx
@@ -12,7 +12,7 @@ import { palette as themePalette } from '../palette';
 import type { DCRContainerPalette } from '../types/front';
 import { WithLink } from './CardHeadline';
 import { ContainerOverrides } from './ContainerOverrides';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 type Props = {
 	id: string;
@@ -163,8 +163,17 @@ export const LatestLinks = ({
 											),
 										}}
 									>
-										<RelativeTime
-											then={block.publishedDateTime}
+										<DateTime
+											date={
+												new Date(
+													block.publishedDateTime,
+												)
+											}
+											display="relative"
+											editionId="UK"
+											showWeekday={false}
+											showDate={true}
+											showTime={false}
 										/>
 									</div>
 									<span className="show-underline">
diff --git a/dotcom-rendering/src/components/PinnedPost.tsx b/dotcom-rendering/src/components/PinnedPost.tsx
index 33c65d75aba..3fe877c6fa3 100644
--- a/dotcom-rendering/src/components/PinnedPost.tsx
+++ b/dotcom-rendering/src/components/PinnedPost.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import {
 	focusHalo,
 	from,
@@ -16,8 +17,7 @@ import {
 } from '@guardian/source-react-components';
 import { decidePalette } from '../lib/decidePalette';
 import type { Palette } from '../types/palette';
-import { Island } from './Island';
-import { RelativeTime } from './RelativeTime.importable';
+import { DateTime } from './DateTime';
 
 const pinnedPostContainer = (palette: Palette) => css`
 	border: 3px solid ${palette.border.pinnedPost};
@@ -164,17 +164,17 @@ export const PinnedPost = ({ pinnedPost, children, format }: Props) => {
 			/>
 			<div css={rowStyles(palette)}>
 				<SvgPinned />
-				{pinnedPost.blockFirstPublished !== undefined && (
+				{!isUndefined(pinnedPost.blockFirstPublished) && (
 					<div css={timeAgoStyles}>
 						From{' '}
-						<Island
-							priority="enhancement"
-							defer={{ until: 'visible' }}
-						>
-							<RelativeTime
-								then={pinnedPost.blockFirstPublished}
-							/>
-						</Island>
+						<DateTime
+							date={new Date(pinnedPost.blockFirstPublished)}
+							display="relative"
+							editionId="UK"
+							showWeekday={false}
+							showDate={true}
+							showTime={false}
+						/>
 					</div>
 				)}
 			</div>
diff --git a/dotcom-rendering/src/components/WitnessBlockComponent.tsx b/dotcom-rendering/src/components/WitnessBlockComponent.tsx
index 96d48ef942c..55e409d29fb 100644
--- a/dotcom-rendering/src/components/WitnessBlockComponent.tsx
+++ b/dotcom-rendering/src/components/WitnessBlockComponent.tsx
@@ -119,7 +119,9 @@ const WitnessWrapper = ({
 							<DateTime
 								date={new Date(dateCreated)}
 								editionId={editionId}
-								show="date"
+								showWeekday={false}
+								showDate={true}
+								showTime={false}
 							/>
 						</p>
 					</div>