Update the Ensembl help link (#535)

src/ensembl/src/content/home/Home.scss

@@ -82,11 +82,15 @@
   }
 }
 
+.helpLabel {
+  color: $blue;
+  font-weight: $bold;
+}
+
 .homeTopRight {
   position: absolute;
   top: 7px;
   right: 20px;
-  color: $blue;
   display: grid;
   grid-template-columns: auto auto;
   height: 28px;

src/ensembl/src/content/home/Home.tsx

@@ -17,13 +17,13 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import { HelpPopupButton } from 'ensemblRoot/src/shared/components/help-popup';
 import ConversationIcon from 'ensemblRoot/src/shared/components/communication-framework/ConversationIcon';
 
 import { ReactComponent as Logotype } from 'static/img/brand/logotype.svg';
 import { ReactComponent as SpeciesSelectorIcon } from 'static/img/launchbar/species-selector.svg';
 import { ReactComponent as BrowserIcon } from 'static/img/launchbar/browser.svg';
 import { ReactComponent as EntityViewerIcon } from 'static/img/launchbar/entity-viewer.svg';
-import { ReactComponent as HelpIcon } from 'static/img/launchbar/help.svg';
 import speciesStripUrl from 'static/img/home/species-strip.svg';
 import ebiLogoUrl from 'static/img/home/EMBLEBI-logo.svg';
 import elixirLogoUrl from 'static/img/home/elixir-logo.svg';
@@ -34,13 +34,6 @@ import blogIconUrl from 'static/img/home/blog.svg';
 import styles from './Home.scss';
 
 const Home = () => {
-  const helpButton = (
-    <div className={styles.howToUse}>
-      <div className={styles.text}>How to use Ensembl</div>
-      <HelpIcon className={styles.helpIcon} />
-    </div>
-  );
-
   return (
     <div className={styles.home}>
       <div className={styles.main}>
@@ -94,7 +87,11 @@ const Home = () => {
           </div>
 
           <div className={styles.homeTopRight}>
-            <Link to="/help">{helpButton}</Link>
+            <HelpPopupButton
+              label="About using Ensembl"
+              slug="ensembl-website-basics"
+              labelClass={styles.helpLabel}
+            />
             <div className={styles.conversationIcon}>
               <ConversationIcon />
             </div>

src/ensembl/src/shared/components/help-popup/HelpPopupButton.tsx

@@ -15,6 +15,7 @@
  */
 
 import React, { useState } from 'react';
+import classNames from 'classnames';
 
 import { isEnvironment, Environment } from 'src/shared/helpers/environment';
 
@@ -24,11 +25,13 @@ import { HelpAndDocumentation } from 'src/shared/components/app-bar/AppBar';
 
 import { ReactComponent as HelpIcon } from 'static/img/launchbar/help.svg';
 
-import { SlugReference } from './types';
-
 import styles from './HelpPopupButton.scss';
 
-type Props = SlugReference;
+type Props = {
+  labelClass?: string;
+  label: string;
+  slug: string;
+};
 
 const HelpPopupButton = (props: Props) => {
   const [shouldShowModal, setShouldShowModal] = useState(false);
@@ -45,21 +48,27 @@ const HelpPopupButton = (props: Props) => {
     return <HelpAndDocumentation />;
   }
 
+  const labelClasses = classNames(styles.label, props.labelClass);
+
   return (
     <>
       <div className={styles.wrapper} onClick={openModal}>
-        <span className={styles.label}>Help</span>
+        <span className={labelClasses}>{props.label}</span>
         <div className={styles.button}>
           <HelpIcon className={styles.icon} />
         </div>
       </div>
       {shouldShowModal && (
         <Modal classNames={{ body: styles.helpPopup }} onClose={closeModal}>
-          <HelpPopupBody {...props} />
+          <HelpPopupBody slug={props.slug} />
         </Modal>
       )}
     </>
   );
 };
 
+HelpPopupButton.defaultProps = {
+  label: 'Help'
+};
+
 export default HelpPopupButton;