Add a list of popular species to the new species selector screen (#1001)

src/content/app/new-species-selector/components/popular-species-list/PopularSpeciesList.scss

@@ -0,0 +1,16 @@
+@import 'src/styles/common';
+
+.sectionHeading {
+  font-size: 13px;
+  font-weight: $light;
+  margin: 0 0 20px 0;
+  display: block;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 27px;
+  row-gap: 20px;
+  max-width: 1150px;
+}

src/content/app/new-species-selector/components/popular-species-list/PopularSpeciesList.tsx

@@ -0,0 +1,54 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { useAppDispatch } from 'src/store';
+
+import { setModalView } from 'src/content/app/new-species-selector/state/species-selector-ui-slice/speciesSelectorUISlice';
+import { useGetPopularSpeciesQuery } from 'src/content/app/new-species-selector/state/species-selector-api-slice/speciesSelectorApiSlice';
+
+import PopularSpeciesButton from 'src/content/app/new-species-selector/components/popular-species-button/PopularSpeciesButton';
+
+import styles from './PopularSpeciesList.scss';
+
+const PopularSpeciesList = () => {
+  const dispatch = useAppDispatch();
+  const { currentData } = useGetPopularSpeciesQuery({
+    selected_genome_ids: []
+  });
+
+  const openSelectionModalView = () => {
+    dispatch(setModalView('species-search'));
+  };
+
+  return (
+    <>
+      <h1 className={styles.sectionHeading}>Popular</h1>
+      <div className={styles.container}>
+        {currentData?.popular_species.map((species) => (
+          <PopularSpeciesButton
+            key={species.id}
+            species={species}
+            onClick={openSelectionModalView}
+          />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default PopularSpeciesList;