From 47bdc9e60bd5b18163f47c5a1c07985343f2c380 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 25 Apr 2022 12:46:45 +0100
Subject: [PATCH] Add tooltip prop to icon component

---
 packages/bbui/src/Icon/Icon.svelte | 64 +++++++++++++++++++++++-------
 1 file changed, 49 insertions(+), 15 deletions(-)

diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index ac0ddb1249..eee1d7fbae 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -3,6 +3,9 @@
 </script>
 
 <script>
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
   export let direction = "n"
   export let name = "Add"
   export let hidden = false
@@ -10,32 +13,52 @@
   export let hoverable = false
   export let disabled = false
   export let color
-  export let dataCy = null
+  export let tooltip
 
   $: rotation = getRotation(direction)
 
+  let showTooltip = false
+
   const getRotation = direction => {
     return directions.indexOf(direction) * 45
   }
 </script>
 
-<svg
-  on:click
-  data-cy={dataCy}
-  class:hoverable
-  class:disabled
-  class="spectrum-Icon spectrum-Icon--size{size}"
-  focusable="false"
-  aria-hidden={hidden}
-  aria-label={name}
-  style={`transform: rotate(${rotation}deg); ${
-    color ? `color: ${color};` : ""
-  }`}
+<div
+  class="icon"
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:click={() => (showTooltip = false)}
 >
-  <use xlink:href="#spectrum-icon-18-{name}" />
-</svg>
+  <svg
+    on:click
+    class:hoverable
+    class:disabled
+    class="spectrum-Icon spectrum-Icon--size{size}"
+    focusable="false"
+    aria-hidden={hidden}
+    aria-label={name}
+    style={`transform: rotate(${rotation}deg); ${
+      color ? `color: ${color};` : ""
+    }`}
+  >
+    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
+  </svg>
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction={"bottom"} text={tooltip} />
+    </div>
+  {/if}
+</div>
 
 <style>
+  .icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+  }
+
   svg.hoverable {
     pointer-events: all;
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
@@ -49,4 +72,15 @@
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
   }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: 50%;
+    top: calc(100% + 4px);
+    width: 100vw;
+    max-width: 150px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
 </style>