feat(client): Add tooltip to the dataset buttons

Vizzuality · Nov 20, 2024 · 3797546 · 3797546
1 parent ce83b06
commit 3797546
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 61 deletions.
diff --git a/client/package.json b/client/package.json
@@ -36,7 +36,7 @@
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-switch": "1.1.1",
     "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.3",
+    "@radix-ui/react-tooltip": "1.1.4",
     "@t3-oss/env-nextjs": "0.11.1",
     "@tanstack/react-query": "5.59.16",
     "@turf/bbox": "7.1.0",

diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
@@ -20,6 +20,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import useMapLayers from "@/hooks/use-map-layers";
 import { cn } from "@/lib/utils";
 import CalendarDaysIcon from "@/svgs/calendar-days.svg";
@@ -225,31 +226,45 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
         </Label>
         <div className="flex items-center gap-0.5 pt-1">
           {!!selectedLayer?.attributes!.download_link && (
-            <Button variant="ghost" size="icon-sm" className="group/download" asChild>
-              <Link
-                href={selectedLayer?.attributes!.download_link ?? ""}
-                rel="noopener noreferrer"
-                download={selectedLayer?.attributes!.name}
-              >
-                <span className="sr-only">Download</span>
-                <DownloadIcon
-                  className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
-                  aria-hidden
-                />
-              </Link>
-            </Button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon-sm" className="group/download" asChild>
+                    <Link
+                      href={selectedLayer?.attributes!.download_link ?? ""}
+                      rel="noopener noreferrer"
+                      download={selectedLayer?.attributes!.name}
+                    >
+                      <span className="sr-only">Download</span>
+                      <DownloadIcon
+                        className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
+                        aria-hidden
+                      />
+                    </Link>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Download dataset</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           )}
           {!!metadata && (
             <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="ghost" size="icon-sm" className="group/info">
-                  <span className="sr-only">Information</span>
-                  <QuestionMarkIcon
-                    className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
-                    aria-hidden
-                  />
-                </Button>
-              </DialogTrigger>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <DialogTrigger asChild>
+                      <Button variant="ghost" size="icon-sm" className="group/info">
+                        <span className="sr-only">Information</span>
+                        <QuestionMarkIcon
+                          className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
+                          aria-hidden
+                        />
+                      </Button>
+                    </DialogTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>More info</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <DialogContent>
                 <DatasetMetadata name={name} metadata={metadata} />
               </DialogContent>

diff --git a/client/src/components/panels/contextual-layers/item.tsx b/client/src/components/panels/contextual-layers/item.tsx
@@ -6,8 +6,8 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import useMapLayers from "@/hooks/use-map-layers";
-import { cn } from "@/lib/utils";
 import DownloadIcon from "@/svgs/download.svg";
 import QuestionMarkIcon from "@/svgs/question-mark.svg";
 import { Dataset, Layer, MetadataItemComponent } from "@/types/generated/strapi.schemas";
@@ -35,40 +35,46 @@ const Item = ({ name, layers }: ItemProps) => {
               {layer.name}
             </Label>
             <div className="flex items-center gap-0.5 pt-1">
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                className={cn({
-                  "group/download": true,
-                  "pointer-events-none opacity-20": !layer.downloadLink,
-                })}
-                aria-disabled={!layer.downloadLink}
-                tabIndex={!layer.downloadLink ? -1 : undefined}
-                asChild
-              >
-                <Link
-                  href={layer.downloadLink ?? ""}
-                  rel="noopener noreferrer"
-                  download={layer.name}
-                >
-                  <span className="sr-only">Download</span>
-                  <DownloadIcon
-                    className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
-                    aria-hidden
-                  />
-                </Link>
-              </Button>
+              {!!layer.downloadLink && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon-sm" className="group/download" asChild>
+                        <Link
+                          href={layer.downloadLink ?? ""}
+                          rel="noopener noreferrer"
+                          download={layer.name}
+                        >
+                          <span className="sr-only">Download</span>
+                          <DownloadIcon
+                            className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
+                            aria-hidden
+                          />
+                        </Link>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Download dataset</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
               {!!layer.metadata && (
                 <Dialog>
-                  <DialogTrigger asChild>
-                    <Button variant="ghost" size="icon-sm" className="group/info">
-                      <span className="sr-only">Information</span>
-                      <QuestionMarkIcon
-                        className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
-                        aria-hidden
-                      />
-                    </Button>
-                  </DialogTrigger>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <DialogTrigger asChild>
+                          <Button variant="ghost" size="icon-sm" className="group/info">
+                            <span className="sr-only">Information</span>
+                            <QuestionMarkIcon
+                              className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
+                              aria-hidden
+                            />
+                          </Button>
+                        </DialogTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>More info</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                   <DialogContent>
                     <DatasetMetadata name={name} metadata={layer.metadata} />
                   </DialogContent>

diff --git a/client/src/components/ui/tooltip.tsx b/client/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden bg-rhino-blue-950 px-2 py-0.5 text-xs text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -3520,9 +3520,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-tooltip@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@radix-ui/react-tooltip@npm:1.1.3"
+"@radix-ui/react-tooltip@npm:1.1.4":
+  version: 1.1.4
+  resolution: "@radix-ui/react-tooltip@npm:1.1.4"
   dependencies:
     "@radix-ui/primitive": "npm:1.1.0"
     "@radix-ui/react-compose-refs": "npm:1.1.0"
@@ -3546,7 +3546,7 @@ __metadata:
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 10c0/388f2b74277dc8ac39ef6218e61f5cbebdc9ff5d03a8759bbd9d234561f43fab2771c4537c2e0faaaa19976d5b4cf7eb08112a493dc119e8abc45cbe7a416c97
+  checksum: 10c0/721cfb0bf34e74af5a58d89a73e087522517b9502fb7ae9d1dc99137d4952f2bfd1696001e17aa83dfb533c39b4333030149562ebfe62d31238a1a2995bc6bd6
   languageName: node
   linkType: hard
 
@@ -5618,7 +5618,7 @@ __metadata:
     "@radix-ui/react-slot": "npm:1.1.0"
     "@radix-ui/react-switch": "npm:1.1.1"
     "@radix-ui/react-tabs": "npm:1.1.1"
-    "@radix-ui/react-tooltip": "npm:1.1.3"
+    "@radix-ui/react-tooltip": "npm:1.1.4"
     "@svgr/webpack": "npm:8.1.0"
     "@t3-oss/env-nextjs": "npm:0.11.1"
     "@tanstack/eslint-plugin-query": "npm:5.59.7"