add hover function + disclaimer css (#4687)

this pr adds the hover functionality and disclaimer css to the existing faq component. this is because our detailsToggle component has a hover functionality and i think we should have consistent behavior for users. this PR also removes the underline under the 'hover to view' string.
dbt-labs · Jan 8, 2024 · 465cf8f · 465cf8f
2 parents ca6b6ca + 6ce1a44
commit 465cf8f
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 22 deletions.
diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js
@@ -40,7 +40,7 @@ useEffect(() => {
         onMouseLeave={handleMouseLeave}
       >
         <span className={`${styles.toggle} ${isOn ? null : styles.toggleUpsideDown}`}></span>&nbsp;
-        <span>{alt_header}</span>
+        <span className={styles.headerText}>{alt_header}</span>
         {/* Visual disclaimer */}
         <small className={styles.disclaimer}>Hover to view</small>
       </span>

diff --git a/website/src/components/detailsToggle/styles.module.css b/website/src/components/detailsToggle/styles.module.css
@@ -1,9 +1,11 @@
-:local(.link) {
+:local(.link) :local(.headerText) {
     color: var(--ifm-link-color);
-    transition: background-color 0.3s; /* Smooth transition for background color */
+    text-decoration: none;
+    transition: text-decoration 0.3s; /* Smooth transition */
 }
 
-:local(.link:hover), :local(.link:focus) {
+:local(.link:hover) :local(.headerText),
+:local(.link:focus) :local(.headerText) {
     text-decoration: underline;
     cursor: pointer;
 }
@@ -12,6 +14,7 @@
     font-size: 0.8em;
     color: #666;
     margin-left: 10px; /* Adjust as needed */
+    text-decoration: none;
 }
 
 :local(.toggle) {

diff --git a/website/src/components/faqs/index.js b/website/src/components/faqs/index.js
@@ -3,10 +3,10 @@ import styles from './styles.module.css';
 import { usePluginData } from '@docusaurus/useGlobalData';
 
 function FAQ({ path, alt_header = null }) {
-
   const [isOn, setOn] = useState(false);
-  const [filePath, setFilePath] = useState(path)
-  const [fileContent, setFileContent] = useState({})
+  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,24 +37,45 @@ function FAQ({ path, alt_header = null }) {
     }
   }, [filePath])
 
-  const toggleOn = function () {
-    setOn(!isOn);
+  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);
+    }
+    setOn(!isOn);
+  };
 
   return (
-    <div className='faqs'>
+    <div className={styles.faqs} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <span className={styles.link} onClick={toggleOn}>
-        <span className={styles.toggle}
-          style={{
-            transform: isOn ? null : 'rotateX(180deg)'
-          }}>
-        </span >&nbsp;
-        <span>{alt_header || fileContent?.meta && fileContent.meta.title}</span>
-      </span >
-      <div style={{ display: (isOn ? 'block' : 'none') }} className={styles.body}>
-        {fileContent?.contents && fileContent.contents}
+        <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}
       </div>
-    </div >
+    </div>
   );
 }
 

diff --git a/website/src/components/faqs/styles.module.css b/website/src/components/faqs/styles.module.css
@@ -1,9 +1,12 @@
 
-:local(.link) {
+:local(.link) :local(.headerText) {
     color: var(--ifm-link-color);
+    text-decoration: none;
+    transition: text-decoration 0.3s; /* Smooth transition */
 }
 
-:local(.link:hover) {
+:local(.link:hover) :local(.headerText),
+:local(.link:focus) :local(.headerText) {
     text-decoration: underline;
     cursor: pointer;
 }
@@ -24,6 +27,13 @@
     filter: invert(1);
 }
 
+:local(.disclaimer) {
+    font-size: 0.8em;
+    color: #666;
+    margin-left: 10px; /* Adjust as needed */
+    text-decoration: none;
+}
+
 :local(.body) {
     margin-left: 2em;
     margin-bottom: 10px;