From bf53fd9363c9cd1f5b5ff48251f644b2876e3408 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 10 Oct 2024 15:56:11 +0100
Subject: [PATCH] 14.6.8 - pricing card title tooltips, support for multiple
 tooltip orientations

---
 package.json                                  |  2 +-
 src/core/Pricing/PricingCards.tsx             | 23 +++++--
 src/core/Pricing/data.tsx                     | 19 ++++++
 src/core/Pricing/types.ts                     |  1 +
 .../__snapshots__/Table.stories.tsx.snap      | 60 ++++++++---------
 src/core/Tooltip.tsx                          | 66 ++++++++++++++-----
 .../__snapshots__/Tooltip.stories.tsx.snap    | 24 +++----
 7 files changed, 128 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 76b7bc97..34643177 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.7",
+  "version": "14.6.8",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
index 0a9b6fe2..2c3768f1 100644
--- a/src/core/Pricing/PricingCards.tsx
+++ b/src/core/Pricing/PricingCards.tsx
@@ -1,11 +1,12 @@
 import React, { Fragment, useEffect, useRef, useState } from "react";
+import throttle from "lodash.throttle";
 import type { PricingDataFeature } from "./types";
 import { determineThemeColor } from "../styles/colors/utils";
 import { ColorClass, Theme } from "../styles/colors/types";
 import Icon from "../Icon";
 import FeaturedLink from "../FeaturedLink";
 import { IconName } from "../Icon/types";
-import throttle from "lodash.throttle";
+import Tooltip from "../Tooltip";
 
 export type PricingCardsProps = {
   data: PricingDataFeature[];
@@ -105,11 +106,21 @@ const PricingCards = ({
                   className={`relative z-10 flex flex-col gap-24 ${delimiter ? "@[520px]:flex-1 @[920px]:flex-none" : ""}`}
                 >
                   <div>
-                    <p
-                      className={`mb-12 ${title.className ?? ""} ${t(title.color ?? "text-neutral-000")}`}
-                    >
-                      {title.content}
-                    </p>
+                    <div className="flex items-center mb-12">
+                      <p
+                        className={`${title.className ?? ""} ${t(title.color ?? "text-neutral-000")}`}
+                      >
+                        {title.content}
+                      </p>
+                      {title.tooltip ? (
+                        <Tooltip
+                          theme={theme}
+                          interactive={typeof title.tooltip !== "string"}
+                        >
+                          {title.tooltip}
+                        </Tooltip>
+                      ) : null}
+                    </div>
                     <p
                       className={`ui-text-p1 ${description.className ?? ""} ${t(description.color ?? "text-neutral-000")} min-h-20`}
                       style={{ height: descriptionHeight }}
diff --git a/src/core/Pricing/data.tsx b/src/core/Pricing/data.tsx
index d2baa05c..b319fa00 100644
--- a/src/core/Pricing/data.tsx
+++ b/src/core/Pricing/data.tsx
@@ -227,6 +227,16 @@ export const consumptionData: PricingDataFeature[] = [
       content: "Channels",
       className: "ui-text-h3",
       color: "text-neutral-000",
+      tooltip: (
+        <p>
+          Ably aggregates all its data into named units of distribution,
+          referred to as “channels”. These are used to transmit from one device
+          to another.{" "}
+          <a href="/docs/channels" className="ui-link">
+            Find out more.
+          </a>
+        </p>
+      ),
     },
     description: {
       content:
@@ -255,6 +265,15 @@ export const consumptionData: PricingDataFeature[] = [
       content: "Connections",
       className: "ui-text-h3",
       color: "text-neutral-000",
+      tooltip: (
+        <p>
+          Clients establish and maintain a connection to the Ably service using
+          the most efficient transport available, typically WebSockets.{" "}
+          <a href="/docs/connect" className="ui-link">
+            Find out more.
+          </a>
+        </p>
+      ),
     },
     description: {
       content:
diff --git a/src/core/Pricing/types.ts b/src/core/Pricing/types.ts
index f0f56907..028970fb 100644
--- a/src/core/Pricing/types.ts
+++ b/src/core/Pricing/types.ts
@@ -5,6 +5,7 @@ type PricingDataHeader = {
   content: string;
   className?: string;
   color?: ColorClass;
+  tooltip?: string | ReactNode;
 };
 
 type PricingDataFeatureCta = {
diff --git a/src/core/Table/__snapshots__/Table.stories.tsx.snap b/src/core/Table/__snapshots__/Table.stories.tsx.snap
index 0cdb2b5a..37894cec 100644
--- a/src/core/Table/__snapshots__/Table.stories.tsx.snap
+++ b/src/core/Table/__snapshots__/Table.stories.tsx.snap
@@ -63,10 +63,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 1
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -143,10 +143,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 2
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -223,10 +223,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 3
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -303,10 +303,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 4
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -383,10 +383,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 5
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -474,10 +474,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 1
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -554,10 +554,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 2
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -634,10 +634,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 3
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -714,10 +714,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 4
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -794,10 +794,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 5
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -885,10 +885,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 1
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -965,10 +965,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 2
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -1045,10 +1045,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 3
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -1125,10 +1125,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 4
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
@@ -1205,10 +1205,10 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
           >
             Label 5
           </a>
-          <div class="relative inline-block align-top h-16 ">
+          <div class="inline-flex ml-8 ">
             <button type="button"
                     aria-describedby="tooltip"
-                    class="ml-8 p-0 relative top-1 focus:outline-none "
+                    class="p-0 relative focus:outline-none h-[1rem] "
             >
               <svg class="text-neutral-500 "
                    style="width: 1rem; height: 1rem;"
diff --git a/src/core/Tooltip.tsx b/src/core/Tooltip.tsx
index 38d8abd8..652e9161 100644
--- a/src/core/Tooltip.tsx
+++ b/src/core/Tooltip.tsx
@@ -33,7 +33,7 @@ const Tooltip = ({
 }: PropsWithChildren<TooltipProps>) => {
   const [open, setOpen] = useState(false);
   const [fadeOut, setFadeOut] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [position, setPosition] = useState({ x: 0, y: 0, orientation: "top" });
   const offset = 8;
   const reference = useRef<HTMLButtonElement>(null);
   const floating = useRef<HTMLDivElement>(null);
@@ -47,6 +47,7 @@ const Tooltip = ({
       const referenceRect = reference.current?.getBoundingClientRect();
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
+      let orientation = "top";
 
       if (floatingRect && referenceRect) {
         let x =
@@ -60,16 +61,19 @@ const Tooltip = ({
         // Adjust if tooltip goes off the right edge
         if (x + floatingRect.width > viewportWidth + window.scrollX) {
           x = viewportWidth + window.scrollX - floatingRect.width - offset;
+          orientation = "left";
         }
 
         // Adjust if tooltip goes off the left edge
         if (x < window.scrollX) {
           x = window.scrollX + offset;
+          orientation = "right";
         }
 
         // Adjust if tooltip goes off the top edge
         if (y < window.scrollY) {
           y = referenceRect.bottom + offset + window.scrollY;
+          orientation = "bottom";
         }
 
         // Adjust if tooltip goes off the bottom edge
@@ -77,10 +81,10 @@ const Tooltip = ({
           y = referenceRect.top - floatingRect.height - offset + window.scrollY;
         }
 
-        setPosition({ x, y });
+        setPosition({ x, y, orientation });
       }
     } else {
-      setPosition({ x: 0, y: 0 });
+      setPosition({ x: 0, y: 0, orientation: "top" });
     }
 
     return () => {
@@ -98,30 +102,54 @@ const Tooltip = ({
     }, 250);
   };
 
-  const cursorHeadsNorth = (
+  const cursorTowardsTooltip = (
     event: MouseEvent,
     ref: RefObject<HTMLButtonElement>,
   ) => {
-    if (ref.current) {
-      const { clientX, clientY } = event;
-      const { x, y, width } = ref.current.getBoundingClientRect();
-      return clientX >= x && clientX <= x + width && clientY < y;
+    if (!ref.current) {
+      return false;
     }
 
-    return false;
+    const { clientX, clientY } = event;
+    const { x, y, width, height } = ref.current.getBoundingClientRect();
+    const { orientation } = position;
+
+    switch (orientation) {
+      case "top":
+        return clientX >= x && clientX <= x + width && clientY < y;
+      case "left":
+        return clientY >= y && clientY <= y + height && clientX < x;
+      case "right":
+        return clientY >= y && clientY <= y + height && clientX > x + width;
+      case "bottom":
+        return clientX >= x && clientX <= x + width && clientY > y + height;
+      default:
+        return false;
+    }
+  };
+
+  const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {
+    if (!reference.current) return;
+
+    const { clientX, clientY } = event;
+    const { x, y, width, height } = reference.current.getBoundingClientRect();
+    const withinBounds =
+      clientX >= x &&
+      clientX <= x + width &&
+      clientY >= y &&
+      clientY <= y + height;
+
+    if (!withinBounds) {
+      initiateFadeOut();
+    }
   };
 
   return (
-    <div
-      {...rest}
-      className={`relative inline-block align-top h-16 ${
-        rest?.className ?? ""
-      }`}
-    >
+    <div {...rest} className={`inline-flex ml-8 ${rest?.className ?? ""}`}>
       <button
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={(event) => {
-          if (!interactive || !cursorHeadsNorth(event, reference)) {
+          if (!interactive || !cursorTowardsTooltip(event, reference)) {
             initiateFadeOut();
           }
         }}
@@ -129,7 +157,7 @@ const Tooltip = ({
         ref={reference}
         aria-describedby="tooltip"
         {...triggerProps}
-        className={`ml-8 p-0 relative top-1 focus:outline-none ${
+        className={`p-0 relative focus:outline-none h-[1rem] ${
           triggerProps?.className ?? ""
         }`}
       >
@@ -147,7 +175,9 @@ const Tooltip = ({
             <div
               role="tooltip"
               ref={floating}
-              onMouseLeave={initiateFadeOut}
+              onMouseLeave={(event) =>
+                setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)
+              }
               style={{
                 top: position.y,
                 left: position.x,
diff --git a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
index 89970454..b50df246 100644
--- a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
+++ b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
@@ -9,10 +9,10 @@ exports[`JS Components/Tooltip Central smoke-test 1`] = `
     light
   </div>
   <div class="w-256 h-256 bg-neutral-1300 flex items-center justify-center m-24 border mx-auto rounded-lg">
-    <div class="relative inline-block align-top h-16 ">
+    <div class="inline-flex ml-8 ">
       <button type="button"
               aria-describedby="tooltip"
-              class="ml-8 p-0 relative top-1 focus:outline-none "
+              class="p-0 relative focus:outline-none h-[1rem] "
       >
         <svg class="text-neutral-500 "
              style="width: 1rem; height: 1rem;"
@@ -24,10 +24,10 @@ exports[`JS Components/Tooltip Central smoke-test 1`] = `
     </div>
   </div>
   <div class="w-256 h-256 flex items-center justify-center m-24 border mx-auto rounded-lg">
-    <div class="relative inline-block align-top h-16 ">
+    <div class="inline-flex ml-8 ">
       <button type="button"
               aria-describedby="tooltip"
-              class="ml-8 p-0 relative top-1 focus:outline-none "
+              class="p-0 relative focus:outline-none h-[1rem] "
       >
         <svg class="text-neutral-800 "
              style="width: 1rem; height: 1rem;"
@@ -50,10 +50,10 @@ exports[`JS Components/Tooltip Interactive smoke-test 1`] = `
     light
   </div>
   <div class="w-256 h-256 bg-neutral-1300 flex items-center justify-center m-24 border mx-auto rounded-lg">
-    <div class="relative inline-block align-top h-16 ">
+    <div class="inline-flex ml-8 ">
       <button type="button"
               aria-describedby="tooltip"
-              class="ml-8 p-0 relative top-1 focus:outline-none "
+              class="p-0 relative focus:outline-none h-[1rem] "
       >
         <svg class="text-neutral-500 "
              style="width: 1rem; height: 1rem;"
@@ -65,10 +65,10 @@ exports[`JS Components/Tooltip Interactive smoke-test 1`] = `
     </div>
   </div>
   <div class="w-256 h-256 flex items-center justify-center m-24 border mx-auto rounded-lg">
-    <div class="relative inline-block align-top h-16 ">
+    <div class="inline-flex ml-8 ">
       <button type="button"
               aria-describedby="tooltip"
-              class="ml-8 p-0 relative top-1 focus:outline-none "
+              class="p-0 relative focus:outline-none h-[1rem] "
       >
         <svg class="text-neutral-800 "
              style="width: 1rem; height: 1rem;"
@@ -91,10 +91,10 @@ exports[`JS Components/Tooltip LeftBound smoke-test 1`] = `
     light
   </div>
   <div class="w-256 h-256 bg-neutral-1300 flex items-center m-24 border mx-auto rounded-lg">
-    <div class="relative inline-block align-top h-16 ">
+    <div class="inline-flex ml-8 ">
       <button type="button"
               aria-describedby="tooltip"
-              class="ml-8 p-0 relative top-1 focus:outline-none "
+              class="p-0 relative focus:outline-none h-[1rem] "
       >
         <svg class="text-neutral-500 "
              style="width: 1rem; height: 1rem;"
@@ -106,10 +106,10 @@ exports[`JS Components/Tooltip LeftBound smoke-test 1`] = `
     </div>
   </div>
   <div class="w-256 h-256 flex items-center m-24 border mx-auto rounded-lg">
-    <div class="relative inline-block align-top h-16 ">
+    <div class="inline-flex ml-8 ">
       <button type="button"
               aria-describedby="tooltip"
-              class="ml-8 p-0 relative top-1 focus:outline-none "
+              class="p-0 relative focus:outline-none h-[1rem] "
       >
         <svg class="text-neutral-800 "
              style="width: 1rem; height: 1rem;"