From a5199b34154dd4d108eccb41003438772ccb50f6 Mon Sep 17 00:00:00 2001
From: Max Duval <max.duval@theguardian.com>
Date: Thu, 18 Jan 2024 09:22:56 +0000
Subject: [PATCH] fix(DateTime): allow not showing weekday

---
 .../components/Card/components/CardAge.tsx    |  4 ++-
 .../src/components/CricketScoreboard.tsx      |  8 +++++-
 .../src/components/DateTime.stories.tsx       | 26 +++++++++++++++++--
 dotcom-rendering/src/components/DateTime.tsx  | 23 +++++++++++++---
 .../src/components/FirstPublished.tsx         |  4 ++-
 .../src/components/KeyEventCard.tsx           |  3 +++
 .../src/components/LastUpdated.tsx            |  4 ++-
 .../src/components/LatestLinks.importable.tsx |  3 +++
 .../src/components/PinnedPost.tsx             |  3 +++
 .../src/components/WitnessBlockComponent.tsx  |  4 ++-
 10 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/dotcom-rendering/src/components/Card/components/CardAge.tsx b/dotcom-rendering/src/components/Card/components/CardAge.tsx
index 223975a6187..a052131fb07 100644
--- a/dotcom-rendering/src/components/Card/components/CardAge.tsx
+++ b/dotcom-rendering/src/components/Card/components/CardAge.tsx
@@ -80,7 +80,9 @@ export const CardAge = ({
 				date={new Date(webPublicationDate)}
 				display="relative"
 				editionId="UK"
-				show="date"
+				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..72995d90c63 100644
--- a/dotcom-rendering/src/components/DateTime.stories.tsx
+++ b/dotcom-rendering/src/components/DateTime.stories.tsx
@@ -28,11 +28,33 @@ 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 = {
diff --git a/dotcom-rendering/src/components/DateTime.tsx b/dotcom-rendering/src/components/DateTime.tsx
index b1eff3af60a..1cd5543bd7c 100644
--- a/dotcom-rendering/src/components/DateTime.tsx
+++ b/dotcom-rendering/src/components/DateTime.tsx
@@ -6,10 +6,18 @@ 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, {
@@ -35,7 +43,9 @@ const formatTime = (date: Date, locale: string, timeZone: string) =>
 export const DateTime = ({
 	date,
 	editionId,
-	show = 'date & time',
+	showWeekday,
+	showDate,
+	showTime,
 	display = 'absolute',
 }: Props) => {
 	const { locale, timeZone } = getEditionFromId(editionId);
@@ -63,8 +73,13 @@ export const DateTime = ({
 				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 92e9bee44d5..c2a4cb02d64 100644
--- a/dotcom-rendering/src/components/FirstPublished.tsx
+++ b/dotcom-rendering/src/components/FirstPublished.tsx
@@ -65,7 +65,9 @@ const FirstPublished = ({
 							date={new Date(firstPublished)}
 							display="relative"
 							editionId="UK"
-							show="date"
+							showWeekday={false}
+							showDate={true}
+							showTime={false}
 						/>
 					</span>
 				)}
diff --git a/dotcom-rendering/src/components/KeyEventCard.tsx b/dotcom-rendering/src/components/KeyEventCard.tsx
index 816cb27f9d4..bc3118c8897 100644
--- a/dotcom-rendering/src/components/KeyEventCard.tsx
+++ b/dotcom-rendering/src/components/KeyEventCard.tsx
@@ -123,6 +123,9 @@ export const KeyEventCard = ({
 						date={new Date(blockFirstPublished)}
 						display="relative"
 						editionId="UK"
+						showWeekday={false}
+						showDate={true}
+						showTime={true}
 					/>
 				</div>
 				<div css={textStyles}>{title}</div>
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 0a5a6e5cb46..4f4080010f0 100644
--- a/dotcom-rendering/src/components/LatestLinks.importable.tsx
+++ b/dotcom-rendering/src/components/LatestLinks.importable.tsx
@@ -171,6 +171,9 @@ export const LatestLinks = ({
 											}
 											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 fea572b9332..2ca58ecad1c 100644
--- a/dotcom-rendering/src/components/PinnedPost.tsx
+++ b/dotcom-rendering/src/components/PinnedPost.tsx
@@ -171,6 +171,9 @@ export const PinnedPost = ({ pinnedPost, children, format }: Props) => {
 							date={new Date(pinnedPost.blockFirstPublished)}
 							display="relative"
 							editionId="UK"
+							showWeekday={false}
+							showDate={true}
+							showTime={true}
 						/>
 					</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>