THEMES-1577: Card list block - show time (#1871)

* THEMES-1577: updated card list to display date and time. Fixed unit tests. * THEMES-1577: corrected typo in news.json
WPMedia · Jan 8, 2024 · 3d37557 · 3d37557
1 parent 0548684
commit 3d37557
Show file tree

Hide file tree

Showing 3 changed files with 212 additions and 268 deletions.
diff --git a/blocks/card-list-block/features/card-list/default.jsx b/blocks/card-list-block/features/card-list/default.jsx
@@ -17,7 +17,7 @@ import {
 	isServerSide,
 	LazyLoad,
 	Link,
-	localizeDate,
+	localizeDateTime,
 	Overline,
 	Separator,
 	Stack,
@@ -48,7 +48,7 @@ const CardListItems = (props) => {
 		dateLocalization: { language, timeZone, dateFormat } = {
 			language: "en",
 			timeZone: "GMT",
-			dateFormat: "%B %d, %Y",
+			dateFormat: "%B %d, %Y at %l:%M%p %Z",
 		},
 	} = props;
 	const phrases = usePhrases();
@@ -135,7 +135,7 @@ const CardListItems = (props) => {
 
 	const sourceContent = contentElements[0];
 
-	const displayDate = localizeDate(sourceContent.display_date, dateFormat, language, timeZone);
+	const displayDate = localizeDateTime(sourceContent.display_date, dateFormat, language, timeZone);
 
 	/* Author Formatting */
 	const bylineNodes = formatAuthors(sourceContent?.credits?.by, phrases.t("global.and-text"));
@@ -210,7 +210,7 @@ const CardListItems = (props) => {
 									{hasAuthor ? (
 										<>
 											<span>{phrases.t("global.by-text")}</span> <span>{bylineNodes}</span>
-											<Separator />
+											<Separator data-testid="card-list-separator" />
 										</>
 									) : null}
 									<Date dateTime={sourceContent.display_date} dateString={displayDate} />