feat(design-system): Add tooltip component #25 (#116)

* feat(design-system): Add tooltip component #25

* format

* Apply suggestions from code review

Co-authored-by: Vitor Capretz <[email protected]>

* Fix import

* Add tooltip to code block icons

* formatting

Co-authored-by: Vitor Capretz <[email protected]>

apps/preview/src/pages/_app.tsx

@@ -1,6 +1,11 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
+import { Tooltip } from 'design-system';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <Tooltip.Provider>
+      <Component {...pageProps} />
+    </Tooltip.Provider>
+  );
 }

packages/design-system/package.json

@@ -17,6 +17,7 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "dependencies": {
+    "@radix-ui/react-tooltip": "^1.0.0",
     "classnames": "2.3.2",
     "prism-react-renderer": "1.3.5",
     "utils": "*"

packages/design-system/src/code/code.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { IconButton } from '../icon-button';
 import { copyTextToClipboard } from 'utils';
 import { IconClipboard, IconCheck, IconDownload } from '../icons';
+import { Tooltip } from '../tooltip';
 
 interface CodeProps {
   children: any;
@@ -79,25 +80,29 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
             boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
           }}
         >
-          <IconButton
-            className="absolute top-3 right-3 hidden md:block"
-            onClick={async () => {
-              setIsCopied(true);
-              await copyTextToClipboard(value);
-              setTimeout(() => setIsCopied(false), 3000);
-            }}
-          >
-            {isCopied ? <IconCheck /> : <IconClipboard />}
-          </IconButton>
+          <Tooltip>
+            <Tooltip.Trigger className="absolute top-3 right-3 hidden md:block">
+              <IconButton
+                onClick={async () => {
+                  setIsCopied(true);
+                  await copyTextToClipboard(value);
+                  setTimeout(() => setIsCopied(false), 3000);
+                }}
+              >
+                {isCopied ? <IconCheck /> : <IconClipboard />}
+              </IconButton>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+          </Tooltip>
 
-          <a
-            title="Download HTML"
-            href={url}
-            download={file.name}
-            className="text-gray-11 absolute top-3 right-8 hidden md:block"
-          >
-            <IconDownload />
-          </a>
+          <Tooltip>
+            <Tooltip.Trigger className="text-gray-11 absolute top-3 right-8 hidden md:block">
+              <a title="Download HTML" href={url} download={file.name}>
+                <IconDownload />
+              </a>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Download HTML</Tooltip.Content>
+          </Tooltip>
 
           <div
             className="absolute right-0 top-0 h-px w-[300px]"

packages/design-system/src/index.ts

@@ -1,3 +1,4 @@
 export * from './code';
 export * from './icon-button';
 export * from './icons';
+export * from './tooltip';

packages/design-system/src/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip';

packages/design-system/src/tooltip/tooltip-arrow.tsx

@@ -0,0 +1 @@
+export { TooltipArrow } from '@radix-ui/react-tooltip';

packages/design-system/src/tooltip/tooltip-content.tsx

@@ -0,0 +1,26 @@
+import { Arrow, Content, Portal } from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+type ContentElement = React.ElementRef<typeof Content>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof Content>;
+
+export interface TooltipProps extends ContentProps {}
+
+export const TooltipContent = React.forwardRef<
+  ContentElement,
+  Readonly<TooltipProps>
+>(({ className, sideOffset = 6, children, ...props }, forwardedRef) => (
+  <Portal>
+    <Content
+      {...props}
+      ref={forwardedRef}
+      className="bg-gray-2 border border-gray-7 z-20 px-2 py-1 rounded-md text-sm radix-side-top:animate-slide-down-fade radix-side-right:animate-slide-left-fade radix-side-bottom:animate-slide-up-fade radix-side-left:animate-slide-right-fade"
+      sideOffset={sideOffset}
+    >
+      {children}
+      <Arrow fill="#1c1c1f" />
+    </Content>
+  </Portal>
+));
+
+TooltipContent.displayName = 'TooltipContent';

packages/design-system/src/tooltip/tooltip-provider.tsx

@@ -0,0 +1 @@
+export { TooltipProvider } from '@radix-ui/react-tooltip';

packages/design-system/src/tooltip/tooltip-trigger.tsx

@@ -0,0 +1 @@
+export { TooltipTrigger } from '@radix-ui/react-tooltip';

packages/design-system/src/tooltip/tooltip.tsx

@@ -0,0 +1,22 @@
+import { Root } from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { TooltipArrow } from './tooltip-arrow';
+import { TooltipContent } from './tooltip-content';
+import { TooltipProvider } from './tooltip-provider';
+import { TooltipTrigger } from './tooltip-trigger';
+
+type RootProps = React.ComponentPropsWithoutRef<typeof Root>;
+
+export interface TooltipProps extends RootProps {}
+
+export const TooltipRoot: React.FC<Readonly<TooltipProps>> = ({
+  children,
+  ...props
+}) => <Root {...props}>{children}</Root>;
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Arrow: TooltipArrow,
+  Provider: TooltipProvider,
+  Content: TooltipContent,
+  Trigger: TooltipTrigger,
+});

yarn.lock

@@ -922,6 +922,25 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
+"@radix-ui/react-tooltip@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.0.tgz#f7fcecf2bac5c31cd14666b5acd056015fc21646"
+  integrity sha512-RB06pov+O4Npy10ei1C6fsyB9QoOjz7Ubo8Sl3qdKtLgkL9iI96925DYtH0bxx6MH6YB2FuzLU6B75qn3AQQQw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-popper" "1.0.0"
+    "@radix-ui/react-portal" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-visually-hidden" "1.0.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
@@ -968,6 +987,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
+"@radix-ui/[email protected]":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401"
+  integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"