HelpHoverable template implementation, updates

Signed-off-by: Fenn-CS <[email protected]>
mozilla · Jan 11, 2021 · af76136 · af76136
1 parent e6e840b
commit af76136
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 20 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -60,6 +60,7 @@ export default {
       __VERSION__: execSync("git rev-list HEAD --max-count=1")
         .toString()
         .trim(),
+      // workaround the way sveltejs-tippy imports tippy: https://github.com/mdauner/sveltejs-tippy/issues/117
       "process.env.NODE_ENV": JSON.stringify(
         production ? "production" : "development"
       ),

diff --git a/src/components/HelpHoverable.svelte b/src/components/HelpHoverable.svelte
@@ -1,12 +1,14 @@
 <script>
   import tippy from "sveltejs-tippy";
+  import InfoIcon from "./icons/InfoIcon.svelte";
 
+  export let content;
+  export let link;
   export let props = {
-    content: "<span class='tooltip'>Tooltip Info</span>",
+    content,
     allowHTML: true,
     placement: "top",
   };
-  export let link;
 </script>
 
 <style>
@@ -18,6 +20,6 @@
 
 <div class="main">
   <a href={link} use:tippy={props}>
-    <slot />
+    <InfoIcon />
   </a>
 </div>
diff --git a/src/data/help.js b/src/data/help.js
@@ -12,7 +12,6 @@ export default {
   send_in_pings: {
     text:
       "Defines which pings the metric should be sent on. If not specified, the metric is sent on the 'default ping', which is the events ping for events and the metrics ping for everything else. Most metrics don't need to specify this unless they are sent on custom pings.",
-    // link:
-    //   "https://mozilla.github.io/glean/book/user/metric-parameters.html",
+    link: "https://mozilla.github.io/glean/book/user/metric-parameters.html",
   },
 };
diff --git a/src/pages/MetricDetail.svelte b/src/pages/MetricDetail.svelte
@@ -3,9 +3,8 @@
   import { getMetricBigQueryURL } from "../state/urls";
   import Markdown from "../components/Markdown.svelte";
   import NotFound from "../components/NotFound.svelte";
-  import InfoIcon from "../components/icons/InfoIcon.svelte";
   import HelpHoverable from "../components/HelpHoverable.svelte";
-  import help from "../data/help";
+  import helpText from "../data/help";
 
   export let params;
   let metricName = params.metric.replaceAll("-", ".");
@@ -80,11 +79,7 @@
     <tr>
       <td>
         Relevant Bugs
-        <HelpHoverable
-          props={{ content: help.bugs.text, allowHTML: true }}
-          link={help.bugs.link}>
-          <InfoIcon />
-        </HelpHoverable>
+        <HelpHoverable content={helpText.bugs.text} link={helpText.bugs.link} />
       </td>
       <td>
         {#each metric.bugs as bug}
@@ -101,10 +96,8 @@
       <td>
         Send In Pings
         <HelpHoverable
-          props={{ content: help.send_in_pings.text, allowHTML: true }}
-          link={help.send_in_pings.link}>
-          <InfoIcon />
-        </HelpHoverable>
+          content={helpText.send_in_pings.text}
+          link={helpText.send_in_pings.link} />
       </td>
       <td>
         {#each metric.send_in_pings as name}
@@ -121,10 +114,8 @@
             Lifetime
           </a>
           <HelpHoverable
-            props={{ content: help.lifetime.text }}
-            link={help.lifetime.link}>
-            <InfoIcon />
-          </HelpHoverable>
+            content={helpText.lifetime.text}
+            link={helpText.lifetime.link} />
         </td>
         <td>{metric.lifetime}</td>
       </tr>