Add hover details component

website/docs/docs/cloud/cloud-cli-installation.md

@@ -258,16 +258,17 @@ To use these extensions, such as dbt-power-user, with the dbt Cloud CLI, you can
 
 ## FAQs
 
-<details>
+<detailsToggle alt_header="What's the difference between the dbt Cloud CLI and dbt Core?">
 
-<summary>What's the difference between the dbt Cloud CLI and dbt Core?</summary>
-The dbt Cloud CLI and <a href="https://github.com/dbt-labs/dbt-core">dbt Core</a>, an open-source project, are both command line tools that enable you to run dbt commands. The key distinction is the dbt Cloud CLI is tailored for dbt Cloud's infrastructure and integrates with all its <a href="https://docs.getdbt.com/docs/cloud/about-cloud/dbt-cloud-features">features</a>.
+The dbt Cloud CLI and <a href="https://github.com/dbt-labs/dbt-core">dbt Core</a>, an open-source project, are both command line tools that enable you to run dbt commands. 
 
-</details>
+The key distinction is the dbt Cloud CLI is tailored for dbt Cloud's infrastructure and integrates with all its <a href="https://docs.getdbt.com/docs/cloud/about-cloud/dbt-cloud-features">features</a>.
 
-<details>
-<summary>How do I run both the dbt Cloud CLI and dbt Core?</summary>
-For compatibility, both the dbt Cloud CLI and dbt Core are invoked by running <code>dbt</code>. This can create path conflicts if your operating system selects one over the other based on your $PATH environment variable (settings).<br />
+</detailsToggle>
+
+<detailsToggle alt_header="How do I run both the dbt Cloud CLI and dbt Core?">
+
+For compatibility, both the dbt Cloud CLI and dbt Core are invoked by running `dbt`. This can create path conflicts if your operating system selects one over the other based on your $PATH environment variable (settings).
 
 If you have dbt Core installed locally, either:
 
@@ -276,10 +277,11 @@ If you have dbt Core installed locally, either:
 3. (Advanced users) Install natively, but modify the $PATH environment variable to correctly point to the dbt Cloud CLI binary to use both dbt Cloud CLI and dbt Core together.
 
 You can always uninstall the dbt Cloud CLI to return to using dbt Core.
-</details>
 
-<details>
-<summary>How to create an alias?</summary>
+</detailsToggle>
+
+<detailsToggle alt_header="How to create an alias?">
+
 To create an alias for the dbt Cloud CLI: <br />
 
 1. Open your shell's profile configuration file. Depending on your shell and system, this could be <code>~/.bashrc</code>, <code>~/.bash_profile</code>, <code>~/.zshrc</code>, or another file.<br />
@@ -297,9 +299,12 @@ As an example, in bash you would run: <code>source ~/.bashrc</code><br />
 
 
 This alias will allow you to use the <code>dbt-cloud</code> command to invoke the dbt Cloud CLI while having dbt Core installed natively.
-</details>
 
-<details>
-<summary>Why am I receiving a <code>Session occupied</code> error?</summary>
+</detailsToggle>
+
+<detailsToggle alt_header="Why am I receiving a `Session occupied` error?">
+
+
 If you've ran a dbt command and receive a <code>Session occupied</code> error, you can reattach to your existing session with <code>dbt reattach</code> and then press <code>Control-C</code> and choose to cancel the invocation.
-</details>
+
+</detailsToggle>

website/snippets/_sl-faqs.md

@@ -1,33 +1,57 @@
-- **Is the dbt Semantic Layer open source?**
-  - The dbt Semantic Layer is proprietary; however, some components of the dbt Semantic Layer are open source, such as dbt-core and MetricFlow.
+<detailsToggle alt_header="Is the dbt Semantic Layer open source?">
 
-    dbt Cloud Developer or dbt Core users can define metrics in their project, including a local dbt Core project, using the dbt Cloud IDE, dbt Cloud CLI, or dbt Core CLI. However, to experience the universal dbt Semantic Layer and access those metrics using the API or downstream tools, users must be on a dbt Cloud [Team or Enterprise](https://www.getdbt.com/pricing/) plan.
+The dbt Semantic Layer is proprietary; however, some components of the dbt Semantic Layer are open source, such as dbt-core and MetricFlow.
 
-    Refer to [Billing](https://docs.getdbt.com/docs/cloud/billing) for more information.
+dbt Cloud Developer or dbt Core users can define metrics in their project, including a local dbt Core project, using the dbt Cloud IDE, dbt Cloud CLI, or dbt Core CLI. However, to experience the universal dbt Semantic Layer and access those metrics using the API or downstream tools, users must be on a dbt Cloud [Team or Enterprise](https://www.getdbt.com/pricing/) plan.
 
-- **How can open-source users use the dbt Semantic Layer?**
-  - The dbt Semantic Layer requires the use of the dbt Cloud-provided service for coordinating query requests. Open source users who don’t use dbt Cloud can currently work around the lack of a service layer. They can do this by running `mf query --explain` in the command line. This command generates SQL code, which they can then use in their current systems for running and managing queries.
+Refer to <a href="https://docs.getdbt.com/docs/cloud/billing">Billing</a> for more information.
+
+</detailsToggle>
+
+<detailsToggle alt_header="How can open-source users use the dbt Semantic Layer?">
+
+The dbt Semantic Layer requires the use of the dbt Cloud-provided service for coordinating query requests. Open source users who don’t use dbt Cloud can currently work around the lack of a service layer. They can do this by running `mf query --explain` in the command line. This command generates SQL code, which they can then use in their current systems for running and managing queries.
 
-    As we refine MetricFlow’s API layers, some users may find it easier to set up their own custom service layers for managing query requests. This is not currently recommended, as the API boundaries around MetricFlow are not sufficiently well-defined for broad-based community use
+As we refine MetricFlow’s API layers, some users may find it easier to set up their own custom service layers for managing query requests. This is not currently recommended, as the API boundaries around MetricFlow are not sufficiently well-defined for broad-based community use
+
+</detailsToggle>
 
-- **Why is my query limited to 100 rows in the dbt Cloud CLI?**
-- The default `limit` for query issues from the dbt Cloud CLI is 100 rows. We set this default to prevent returning unnecessarily large data sets as the dbt Cloud CLI is typically used to query the dbt Semantic Layer during the development process, not for production reporting or to access large data sets. For most workflows, you only need to return a subset of the data.
+<detailsToggle alt_header="Why is my query limited to 100 rows in the dbt Cloud CLI?">
+
+The default `limit` for query issues from the dbt Cloud CLI is 100 rows. We set this default to prevent returning unnecessarily large data sets as the dbt Cloud CLI is typically used to query the dbt Semantic Layer during the development process, not for production reporting or to access large data sets. For most workflows, you only need to return a subset of the data.
 
-  However, you can change this limit if needed by setting the `--limit` option in your query. For example, to return 1000 rows, you can run `dbt sl list metrics --limit 1000`.
+However, you can change this limit if needed by setting the `--limit` option in your query. For example, to return 1000 rows, you can run `dbt sl list metrics --limit 1000`.
+
+</detailsToggle>
 
-- **Can I reference MetricFlow queries inside dbt models?**
-  - dbt relies on Jinja macros to compile SQL, while MetricFlow is Python-based and does direct SQL rendering targeting at a specific dialect. MetricFlow does not support pass-through rendering of Jinja macros, so we can’t easily reference MetricFlow queries inside of dbt models.
+<detailsToggle alt_header="Can I reference MetricFlow queries inside dbt models?">
+
+dbt relies on Jinja macros to compile SQL, while MetricFlow is Python-based and does direct SQL rendering targeting at a specific dialect. MetricFlow does not support pass-through rendering of Jinja macros, so we can’t easily reference MetricFlow queries inside of dbt models.
 
-    Beyond the technical challenges that could be overcome, we see Metrics as the leaf node of your DAG, and a place for users to consume metrics. If you need to do additional transformation on top of a metric, this is usually a sign that there is more modeling that needs to be done. 
+Beyond the technical challenges that could be overcome, we see Metrics as the leaf node of your DAG, and a place for users to consume metrics. If you need to do additional transformation on top of a metric, this is usually a sign that there is more modeling that needs to be done. 
+
+</detailsToggle>
+
+<detailsToggle alt_header="Can I create tables in my data platform using MetricFlow?">
+
+You can use the upcoming feature, Exports, which will allow you to create a [pre-defined](/docs/build/saved-queries) MetricFlow query as a table in your data platform. This feature will be available to dbt Cloud customers only. This is because MetricFlow is primarily for query rendering while dispatching the relevant query and performing any DDL is the domain of the service layer on top of MetricFlow.
+
+</detailsToggle>
+
+<detailsToggle alt_header="How do I migrate from the legacy Semantic Layer to the new one?">
+
+If you're using the legacy Semantic Layer, we highly recommend you [upgrade your dbt version](/docs/dbt-versions/upgrade-core-in-cloud) to dbt v1.6 or higher to use the new dbt Semantic Layer. Refer to the dedicated [migration guide](/guides/sl-migration) for more info.
+
+</detailsToggle>
+
+<detailsToggle alt_header="How are you storing my data?*">
+
+User data passes through the Semantic Layer on its way back from the warehouse. dbt Labs ensures security by authenticating through the customer's data warehouse. Currently, we don't cache data for the long term, but it might temporarily stay in the system for up to 10 minutes, usually less. In the future, we'll introduce a caching feature that allows us to cache data on our infrastructure for up to 24 hours.
 
-- **Can I create tables in my data platform using MetricFlow?**
-  - You can use the upcoming feature, Exports, which will allow you to create a [pre-defined](/docs/build/saved-queries) MetricFlow query as a table in your data platform. This feature will be available to dbt Cloud customers only. This is because MetricFlow is primarily for query rendering while dispatching the relevant query and performing any DDL is the domain of the service layer on top of MetricFlow.
+</detailsToggle>
 
-- **How do I migrate from the legacy Semantic Layer to the new one?**
-  - If you're using the legacy Semantic Layer, we highly recommend you [upgrade your dbt version](/docs/dbt-versions/upgrade-core-in-cloud) to dbt v1.6 or higher to use the new dbt Semantic Layer. Refer to the dedicated [migration guide](/guides/sl-migration) for more info.
+<detailsToggle alt_header="Is there a dbt Semantic Layer discussion hub?">
 
-- **How are you storing my data?**
-  - User data passes through the Semantic Layer on its way back from the warehouse. dbt Labs ensures security by authenticating through the customer's data warehouse. Currently, we don't cache data for the long term, but it might temporarily stay in the system for up to 10 minutes, usually less. In the future, we'll introduce a caching feature that allows us to cache data on our infrastructure for up to 24 hours.
+Yes absolutely! Join the [dbt Slack community](https://getdbt.slack.com) and [#dbt-cloud-semantic-layer slack channel](https://getdbt.slack.com/archives/C046L0VTVR6) for all things related to the dbt Semantic Layer.
 
-- **Is there a dbt Semantic Layer discussion hub?**
-  - Yes absolutely! Join the [dbt Slack community](https://getdbt.slack.com) and [#dbt-cloud-semantic-layer slack channel](https://getdbt.slack.com/archives/C046L0VTVR6) for all things related to the dbt Semantic Layer.
+</detailsToggle>

website/src/components/detailsToggle/index.js

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import styles from './styles.module.css';
+
+function detailsToggle({ children, alt_header = null }) {
+  const [isOn, setOn] = useState(false);
+  const [hoverActive, setHoverActive] = useState(true);
+  const [hoverTimeout, setHoverTimeout] = useState(null);
+
+  const handleToggleClick = () => {
+    setOn(false);
+    setHoverActive(isOn); // Toggle hover activation based on current state
+  };
+
+  const handleMouseEnter = () => {
+    if (!hoverActive) return; // Ignore hover if disabled
+    const timeout = setTimeout(() => {
+      setOn(true);
+    }, 500); // 500ms delay
+    setHoverTimeout(timeout);
+  };
+
+  const handleMouseLeave = () => {
+    if (hoverActive && !isOn) {
+      clearTimeout(hoverTimeout);
+      setOn(false);
+      // isOn (false); can't be used here but setOn triggers a re-render
+    }
+  };
+
+  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>{alt_header}</span>
+        {/* Visual disclaimer */}
+        <small className={styles.disclaimer}>Hover to view</small>
+      </span>
+      <div 
+        style={{ display: isOn ? 'block' : 'none' }} 
+        className={styles.body}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default detailsToggle;

website/src/components/detailsToggle/styles.module.css

@@ -0,0 +1,51 @@
+:local(.link) {
+    color: var(--ifm-link-color);
+    transition: background-color 0.3s; /* Smooth transition for background color */
+}
+
+:local(.link:hover), :local(.link:focus) {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+:local(.disclaimer) {
+    font-size: 0.8em;
+    color: #666;
+    margin-left: 10px; /* Adjust as needed */
+}
+
+:local(.toggle) {
+    background-image: var(--ifm-menu-link-sublist-icon);
+    background-size: 1.25rem 1.25rem;
+    background-position: center;
+    content: ' ';
+    display: inline-block;
+    height: 1.25rem;
+    width: 1.25rem;
+    vertical-align: middle;
+    transition: transform 0.3s; /* Smooth transition for toggle icon */
+}
+
+:local(.toggleUpsideDown) {
+    transform: rotateX(180deg)
+}
+
+/* hack for unswizzled FAQ arrows */
+:local(html[data-theme='dark'] .toggle) {
+    filter: invert(1);
+}
+
+:local(.body) {
+    margin-left: 2em;
+    margin-bottom: 10px;
+    padding: 20px;
+    background-color: #e3f8f8;
+}
+
+:local(html[data-theme='dark'] .body) {
+  background: #333b47;
+}
+
+:local(.body > p:last-child) {
+    margin-bottom: 0px;
+}

website/src/theme/MDXComponents/index.js

@@ -43,6 +43,7 @@ import CommunitySpotlightList from '@site/src/components/communitySpotlightList'
 import dbtEditor from '@site/src/components/dbt-editor';
 import Icon from '@site/src/components/icon';
 import Lifecycle from '@site/src/components/lifeCycle';
+import detailsToggle from '@site/src/components/detailsToggle';
 
 const MDXComponents = {
   head: MDXHead,
@@ -92,5 +93,6 @@ const MDXComponents = {
   dbtEditor: dbtEditor,
   Icon: Icon,
   Lifecycle: Lifecycle,
+  detailsToggle: detailsToggle,
 };
 export default MDXComponents;