fix(DateTime): allow not showing weekday

guardian · Jan 18, 2024 · 4b3f210 · 4b3f210
1 parent 8e9393a
commit 4b3f210
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -6,14 +6,21 @@ 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',
@@ -35,7 +42,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 +72,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -119,7 +119,9 @@ const WitnessWrapper = ({
 							<DateTime
 								date={new Date(dateCreated)}
 								editionId={editionId}
-								show="date"
+								showWeekday={false}
+								showDate={true}
+								showTime={false}
 							/>
 						</p>
 					</div>