Merge pull request #507 from ably/pricing-accordion-card-changes

[WEB-4041] 14.6.8 - pricing card title tooltips, support for multiple tooltip orientations
ably · Oct 10, 2024 · 5c05eb2 · 5c05eb2
2 parents 028abfd + bf53fd9
commit 5c05eb2
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 67 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;"