Instant Search: move date into new component and use <time> element (#…

…14133)

modules/search/instant-search/components/search-result-date.jsx

@@ -0,0 +1,26 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+
+const SearchResultDate = ( { date, locale = 'en-US' } ) => {
+	if ( ! date ) {
+		return null;
+	}
+
+	const resultDate = new Date( date.split( ' ' )[ 0 ] );
+	return (
+		<time
+			className="jetpack-instant-search__search-result-date"
+			datetime={ resultDate.toISOString() }
+		>
+			{ resultDate.toLocaleDateString( locale, {
+				dateStyle: 'short',
+			} ) }
+		</time>
+	);
+};
+
+export default SearchResultDate;

modules/search/instant-search/components/search-result-minimal.jsx

@@ -11,6 +11,7 @@ import { h, Component } from 'preact';
 import Gridicon from './gridicon';
 import PostTypeIcon from './post-type-icon';
 import SearchResultComments from './search-result-comments';
+import SearchResultDate from './search-result-date';
 
 class SearchResultMinimal extends Component {
 	getIconSize() {
@@ -86,19 +87,16 @@ class SearchResultMinimal extends Component {
 	}
 
 	render() {
-		const { locale = 'en-US' } = this.props;
+		const { locale } = this.props;
 		const { result_type, fields, highlight } = this.props.result;
 		if ( result_type !== 'post' ) {
 			return null;
 		}
 		const noMatchingContent = ! highlight.content || highlight.content[ 0 ] === '';
+
 		return (
 			<li className="jetpack-instant-search__search-result-minimal">
-				<span className="jetpack-instant-search__search-result-minimal-date">
-					{ new Date( fields.date.split( ' ' )[ 0 ] ).toLocaleDateString( locale, {
-						dateStyle: 'short',
-					} ) }
-				</span>
+				<SearchResultDate date={ fields.date } locale={ locale } />
 				<h3 className="jetpack-instant-search__search-result-title">
 					<PostTypeIcon postType={ fields.post_type } shortcodeTypes={ fields.shortcode_types } />
 					<a

modules/search/instant-search/components/search-result-minimal.scss

@@ -2,6 +2,13 @@
 	padding: 0.125em 0;
 	margin: 1em 0;
 	position: relative;
+
+	.jetpack-instant-search__search-result-date {
+		margin: 0.5em 0;
+		float: right;
+		display: block;
+		font-size: 0.85em;
+	}
 }
 
 .jetpack-instant-search__search-result-minimal h3 {
@@ -21,13 +28,6 @@
 	overflow: hidden;
 }
 
-.jetpack-instant-search__search-result-minimal-date {
-	margin: 0.5em 0;
-	float: right;
-	display: block;
-	font-size: 0.85em;
-}
-
 .jetpack-instant-search__search-result-minimal-tag,
 .jetpack-instant-search__search-result-minimal-cat {
 	margin-right: 0.5em;