Initial replacement of selected-species

src/ensembl/src/content/app/browser/browser-app-bar/BrowserAppBar.tsx

@@ -28,7 +28,7 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta
 import AppBar, {
   HelpAndDocumentation
 } from 'src/shared/components/app-bar/AppBar';
-import { FocusableSelectedSpecies } from 'src/shared/components/selected-species';
+import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 
 import { RootState } from 'src/store';
@@ -43,7 +43,7 @@ type BrowserAppBarProps = {
 const BrowserAppBar = (props: BrowserAppBarProps) => {
   const speciesTabs = useMemo(() => {
     return props.species.map((species, index) => (
-      <FocusableSelectedSpecies
+      <SelectedSpecies
         key={index}
         species={species}
         isActive={species.genome_id === props.activeGenomeId}

src/ensembl/src/content/app/custom-download/containers/app-bar/CustomDownloadAppBar.tsx

@@ -26,7 +26,7 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta
 import AppBar, {
   HelpAndDocumentation
 } from 'src/shared/components/app-bar/AppBar';
-import { FocusableSelectedSpecies } from 'src/shared/components/selected-species';
+import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 
 import { RootState } from 'src/store';
@@ -41,7 +41,7 @@ type CustomDownloadAppBarProps = {
 
 const CustomDownloadAppBar = (props: CustomDownloadAppBarProps) => {
   const speciesTabs = props.species.map((species, index) => (
-    <FocusableSelectedSpecies
+    <SelectedSpecies
       key={index}
       species={species}
       isActive={species.genome_id === props.activeGenomeId}

src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-app-bar/EntityViewerAppBar.tsx

@@ -30,7 +30,7 @@ import { changeActiveGenomeId } from 'src/content/app/entity-viewer/state/genera
 import AppBar, {
   HelpAndDocumentation
 } from 'src/shared/components/app-bar/AppBar';
-import { FocusableSelectedSpecies } from 'src/shared/components/selected-species';
+import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 
 import { RootState } from 'src/store';
@@ -45,7 +45,7 @@ type EntityViewerAppBarProps = {
 const EntityViewerAppBar = (props: EntityViewerAppBarProps) => {
   const speciesTabs = useMemo(() => {
     return props.species.map((species, index) => (
-      <FocusableSelectedSpecies
+      <SelectedSpecies
         key={index}
         species={species}
         isActive={species.genome_id === props.activeGenomeId}

src/ensembl/src/content/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar.tsx

@@ -26,7 +26,7 @@ import {
 import * as urlFor from 'src/shared/helpers/urlHelper';
 
 import AppBar from 'src/shared/components/app-bar/AppBar';
-import SelectedSpecies from 'src/content/app/species-selector/components/selected-species/SelectedSpecies';
+import SelectedSpecies from 'src/shared/components/selected-species/SelectedSpecies';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
 
@@ -37,7 +37,6 @@ import styles from './SpeciesSelectorAppBar.scss';
 
 type Props = {
   selectedSpecies: CommittedItem[];
-  toggleSpeciesUse: (genomeId: string) => void;
   onSpeciesDelete: (genomeId: string) => void;
 };
 
@@ -65,6 +64,10 @@ export const SpeciesSelectorAppBar = (props: Props) => {
   );
 };
 
+const showSpeciesHomepage = () => {
+  return;
+};
+
 const SelectedSpeciesList = (props: Props) => {
   const shouldLinkToGenomeBrowser =
     props.selectedSpecies.filter(({ isEnabled }) => isEnabled).length > 0;
@@ -73,8 +76,9 @@ const SelectedSpeciesList = (props: Props) => {
     <SelectedSpecies
       key={species.genome_id}
       species={species}
-      onToggleUse={props.toggleSpeciesUse}
-      onRemove={props.onSpeciesDelete}
+      onClick={showSpeciesHomepage}
+      // onToggleUse={props.toggleSpeciesUse}
+      // onRemove={props.onSpeciesDelete}
     />
   ));
 
@@ -90,6 +94,7 @@ const mapStateToProps = (state: RootState) => ({
 });
 
 const mapDispatchToProps = {
+  showSpeciesHomepage: showSpeciesHomepage,
   toggleSpeciesUse: toggleSpeciesUseAndSave,
   onSpeciesDelete: deleteSpeciesAndSave
 };

src/ensembl/src/content/app/species/components/species-title-area/SpeciesTitleArea.tsx

@@ -18,7 +18,7 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import classNames from 'classnames';
 
-import { getDisplayName } from 'src/shared/components/new-selected-species/selectedSpeciesHelpers';
+import { getDisplayName } from 'src/shared/components/selected-species/selectedSpeciesHelpers';
 
 import { isSidebarOpen as getSidebarStatus } from 'src/content/app/species/state/sidebar/speciesSidebarSelectors';
 import { getCommittedSpeciesById } from 'src/content/app/species-selector/state/speciesSelectorSelectors';

src/ensembl/src/content/home/components/homepage-species-bar/HomepageSpeciesBar.tsx

@@ -23,12 +23,13 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta
 
 import AppBar from 'src/shared/components/app-bar/AppBar';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
-import { SimpleSelectedSpecies } from 'src/shared/components/selected-species';
+import { SelectedSpecies } from 'src/shared/components/selected-species';
 
 import { RootState } from 'src/store';
 import { CommittedItem } from 'src/content/app/species-selector/types/species-search';
 
 import styles from './HomepageSpeciesBar.scss';
+import { handleSelectedSpecies } from 'src/content/app/species-selector/state/speciesSelectorActions';
 
 type Props = {
   species: CommittedItem[];
@@ -52,7 +53,11 @@ const HomepageSpeciesBar = (props: Props) => {
     );
   } else {
     const speciesItems = props.species.map((species, index) => (
-      <SimpleSelectedSpecies key={index} species={species} />
+      <SelectedSpecies
+        key={index}
+        species={species}
+        onClick={handleSelectedSpecies}
+      />
     ));
     barContent = <SpeciesTabsWrapper speciesTabs={speciesItems} />;
   }

src/ensembl/src/shared/components/new-selected-species/index.ts → src/ensembl/src/shared/components/old-selected-species/index.ts

@@ -14,4 +14,5 @@
  * limitations under the License.
  */
 
-export { default as SelectedSpecies } from './SelectedSpecies';
+export { default as SimpleSelectedSpecies } from './SimpleSelectedSpecies';
+export { default as FocusableSelectedSpecies } from './FocusableSelectedSpecies';

src/ensembl/src/shared/components/selected-species/index.ts

@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 
-export { default as SimpleSelectedSpecies } from './SimpleSelectedSpecies';
-export { default as FocusableSelectedSpecies } from './FocusableSelectedSpecies';
+export { default as SelectedSpecies } from './SelectedSpecies';

src/ensembl/src/shared/components/species-tabs-wrapper/MultiLineSpeciesWrapper.tsx

@@ -20,11 +20,11 @@ import { nonBreakingSpace } from 'src/shared/constants/strings';
 
 import styles from './MultiLineSpeciesWrapper.scss';
 
-import { Props as SimpleSelectedSpeciesProps } from 'src/shared/components/selected-species/SimpleSelectedSpecies';
+import { Props as SelectedSpeciesProps } from 'src/shared/components/selected-species/SelectedSpecies';
 import { Props as SpeciesSelectorSelectedSpeciesProps } from 'src/content/app/species-selector/components/selected-species/SelectedSpecies';
 
 type MultiLineSelectedSpeciesProps =
-  | SimpleSelectedSpeciesProps
+  | SelectedSpeciesProps
   | SpeciesSelectorSelectedSpeciesProps;
 
 export type Props = {

src/ensembl/src/shared/components/species-tabs-wrapper/SingleLineSpeciesWrapper.tsx

@@ -22,11 +22,11 @@ import { getSpeciesItemWidths } from './speciesTabsWrapperHelpers';
 
 import styles from './SingleLineSpeciesWrapper.scss';
 
-import { Props as FocusableSelectedSpeciesProps } from 'src/shared/components/selected-species/FocusableSelectedSpecies';
+import { Props as SelectedSpeciesProps } from 'src/shared/components/selected-species/SelectedSpecies';
 
 export type Props = {
   isWrappable: false;
-  speciesTabs: ReactElement<FocusableSelectedSpeciesProps>[];
+  speciesTabs: ReactElement<SelectedSpeciesProps>[];
   link?: React.ReactNode | null;
 };
 
@@ -36,7 +36,7 @@ const animationCalculator = ({
   containerRef,
   containerWidth
 }: {
-  items: FocusableSelectedSpeciesProps[];
+  items: SelectedSpeciesProps[];
   hoveredItemIndex: number | null;
   containerRef: React.RefObject<HTMLElement>;
   containerWidth: number;

src/ensembl/src/shared/components/species-tabs-wrapper/speciesTabsWrapperHelpers.ts

@@ -16,7 +16,7 @@
 
 import { getFullSpeciesItemWidth } from 'src/shared/components/selected-species/selectedSpeciesHelpers';
 
-import { Props as FocusableSelectedSpeciesProps } from 'src/shared/components/selected-species/FocusableSelectedSpecies';
+import { Props as SelectedSpeciesProps } from 'src/shared/components/selected-species/SelectedSpecies';
 
 const SPACE_BETWEEN_SPECIES = 7;
 
@@ -24,7 +24,7 @@ export const getSpeciesItemWidths = ({
   items,
   containerWidth
 }: {
-  items: Array<FocusableSelectedSpeciesProps & { isHovered: boolean }>;
+  items: Array<SelectedSpeciesProps & { isHovered: boolean }>;
   containerWidth: number;
 }) => {
   const naturalItemWidths = items.map((item) =>

src/ensembl/stories/shared-components/selected-species/SelectedSpecies.stories.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import SelectedSpecies from 'src/shared/components/new-selected-species/SelectedSpecies';
+import SelectedSpecies from 'src/shared/components/selected-species/SelectedSpecies';
 
 import speciesData from '../species-tabs-wrapper/speciesData';