Display list of sort options

modules/search/instant-search/components/search-sort-widget.jsx

@@ -4,15 +4,25 @@
  * External dependencies
  */
 import { h, Component } from 'preact';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getSortOptions } from '../lib/sort';
 
 export default class SearchSortWidget extends Component {
 	render() {
+		const sortOptions = getSortOptions();
 		return (
-			<select className="jetpack-instant-search__sort-widget">
-				<option>one</option>
-				<option>two</option>
-				<option>three</option>
-			</select>
+			<label>
+				{ __( 'Sort by' ) }
+				<select className="jetpack-instant-search__sort-widget-select">
+					{ sortOptions.map( option => (
+						<option key={ option.name }>{ option.label }</option>
+					) ) }
+				</select>
+			</label>
 		);
 	}
 }

modules/search/instant-search/components/search-sort-widget.scss

@@ -0,0 +1,3 @@
+.jetpack-instant-search__sort-widget-select {
+	margin-left: 4px;
+}

modules/search/instant-search/components/search-widget.jsx

@@ -107,7 +107,7 @@ class SearchApp extends Component {
 								</button>
 							</div>
 							<div className="jetpack-search-sort-wrapper">
-								<SearchSortWidget />
+								<SearchSortWidget widget={ widget } />
 							</div>
 							<SearchFiltersWidget
 								initialValues={ this.props.initialFilters }

modules/search/instant-search/instant-search.scss

@@ -1,5 +1,6 @@
 @import './components/search-results.scss';
 @import './components/search-filters-widget.scss';
+@import './components/search-sort-widget.scss';
 @import './components/search-result-minimal.scss';
 //@import './components/search-result-engagement.scss';
 //@import './components/search-result-product.scss';

modules/search/instant-search/lib/sort.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export function getSortOptions() {
+	return [
+		{ name: 'date', label: __( 'Date' ) },
+		{ name: 'price', label: __( 'Price' ) },
+		{ name: 'rating', label: __( 'Rating' ) },
+		{ name: 'recency', label: __( 'Recency' ) },
+		{ name: 'keyword', label: __( 'Keyword' ) },
+		{ name: 'popularity', label: __( 'Popularity' ) },
+		{ name: 'relevance', label: __( 'Relevance' ) },
+		{ name: 'score', label: __( 'Score' ) },
+	];
+}