remove hover function (#4830)

this pr removes the hover function to the `detailsToggle` component and `FAQ` component. This pr will now only enable users to click the toggle to open/expand the question. ![Screenshot 2024-01-30 at 20 22 30](https://github.com/dbt-labs/docs.getdbt.com/assets/89008547/05245dbc-1d36-4a32-a652-2761f60a3ad3) ![Screenshot 2024-01-30 at 20 22 21](https://github.com/dbt-labs/docs.getdbt.com/assets/89008547/b2dd7baf-8b4d-45bc-823b-ea8e0409abd6)
dbt-labs · Feb 1, 2024 · d295bc2 · d295bc2
2 parents f338647 + 8384aff
commit d295bc2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 75 deletions.
diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js
@@ -1,65 +1,22 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import styles from './styles.module.css';
 
 function detailsToggle({ children, alt_header = null }) {
   const [isOn, setOn] = useState(false);
-  const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling
-  const [hoverTimeout, setHoverTimeout] = useState(null);
 
   const handleToggleClick = () => {
-    setOn(current => !current); // Toggle the current state
+    setOn(current => !current);
   };
 
-  const handleMouseEnter = () => {
-    if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling
-    const timeout = setTimeout(() => {
-      if (!isScrolling) setOn(true);
-    }, 700); // 
-    setHoverTimeout(timeout);
-  };
-
-  const handleMouseLeave = () => {
-    if (!isOn) {
-      clearTimeout(hoverTimeout);
-      setOn(false);
-    }
-  };
-
-  const handleScroll = () => {
-    setIsScrolling(true);
-    clearTimeout(hoverTimeout);
-    //setOn(false);
-
-
-    // Reset scrolling state after a  delay
-    setTimeout(() => {
-      setIsScrolling(false);
-    }, 800);
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  useEffect(() => {
-    return () => clearTimeout(hoverTimeout);
-  }, [hoverTimeout]);
 
   return (
     <div className='detailsToggle'>
       <span 
         className={styles.link} 
         onClick={handleToggleClick}
-        onMouseEnter={handleMouseEnter} 
-        onMouseLeave={handleMouseLeave}
       >
         <span className={`${styles.toggle} ${isOn ? null : styles.toggleUpsideDown}`}></span>&nbsp;
         <span className={styles.headerText}>{alt_header}</span>
-        {/* Visual disclaimer */}
-        <small className={styles.disclaimer}>Hover to view</small>
       </span>
       <div 
         style={{ display: isOn ? 'block' : 'none' }} 

diff --git a/website/src/components/faqs/index.js b/website/src/components/faqs/index.js
@@ -6,7 +6,6 @@ function FAQ({ path, alt_header = null }) {
   const [isOn, setOn] = useState(false);
   const [filePath, setFilePath] = useState(path);
   const [fileContent, setFileContent] = useState({});
-  const [hoverTimeout, setHoverTimeout] = useState(null);
 
   // Get all faq file paths from plugin
   const { faqFiles } = usePluginData('docusaurus-build-global-data-plugin');
@@ -37,40 +36,15 @@ function FAQ({ path, alt_header = null }) {
     }
   }, [filePath])
 
-  const handleMouseEnter = () => {
-    setHoverTimeout(setTimeout(() => {
-      setOn(true);
-    }, 500));
-  };
-
-  const handleMouseLeave = () => {
-  if (!isOn) {
-      clearTimeout(hoverTimeout);
-      setOn(false);
-  }
-};
-
-  useEffect(() => {
-    return () => {
-      if (hoverTimeout) {
-        clearTimeout(hoverTimeout);
-      }
-    };
-  }, [hoverTimeout]);
-
-  const toggleOn = () => {
-    if (hoverTimeout) {
-      clearTimeout(hoverTimeout);
-    }
+  const toggleOn = function () {
     setOn(!isOn);
-  };
+  }
 
   return (
-    <div className={styles.faqs} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+    <div className={styles.faqs}>
       <span className={styles.link} onClick={toggleOn}>
         <span className={styles.toggle} style={{ transform: isOn ? 'rotateX(0deg)' : 'rotateX(180deg)' }}></span>
         <span className={styles.headerText}>{alt_header || (fileContent?.meta && fileContent.meta.title)}</span>
-        <small className={styles.disclaimer}>Hover to view</small>
       </span>
       <div style={{ display: isOn ? 'block' : 'none' }} className={styles.body}>
         {fileContent?.contents}

diff --git a/website/src/components/lightbox/index.js b/website/src/components/lightbox/index.js
@@ -12,7 +12,7 @@ function Lightbox({ src, collapsed = false, alignment = "center", alt = undefine
     if (isHovered && !isScrolling) {
       timeoutId = setTimeout(() => {
         setExpandImage(true);
-      }, 300);
+      }, 200);
     }
     return () => clearTimeout(timeoutId);
   }, [isHovered, isScrolling]);