diff --git a/package-lock.json b/package-lock.json index 99b4b5a7..88d87911 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2585,6 +2585,126 @@ "node": ">= 10" } }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", + "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", + "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", + "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", + "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", + "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", + "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", + "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", + "integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "dev": true, diff --git a/src/components/common/icons/RoundedTriangle.svg b/src/components/common/icons/RoundedTriangle.svg new file mode 100644 index 00000000..c7a42f18 --- /dev/null +++ b/src/components/common/icons/RoundedTriangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/common/icons/ToastPopup.svg b/src/components/common/icons/ToastPopup.svg deleted file mode 100644 index 80583c57..00000000 --- a/src/components/common/icons/ToastPopup.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/common/icons/index.ts b/src/components/common/icons/index.ts index dc5b213c..f29ef9fc 100644 --- a/src/components/common/icons/index.ts +++ b/src/components/common/icons/index.ts @@ -9,10 +9,10 @@ import HeartStraightOutlined from './HeartStraightOutlined.svg' import Info from './Info.svg' import InfoCircle from './InfoCircle.svg' import Plus from './Plus.svg' +import RoundedTriangle from './RoundedTriangle.svg' import Search from './Search.svg' import ShareNetwork from './ShareNetwork.svg' import SignOut from './SignOut.svg' -import ToastPopup from './ToastPopup.svg' import UploadSimple from './UploadSimple.svg' export const icons = { @@ -27,9 +27,9 @@ export const icons = { info: Info, infoCircle: InfoCircle, plus: Plus, + roundedTriangle: RoundedTriangle, search: Search, shareNetwork: ShareNetwork, signOut: SignOut, - toastPopup: ToastPopup, uploadSimple: UploadSimple, } diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx new file mode 100644 index 00000000..065f4203 --- /dev/null +++ b/src/components/tooltip.tsx @@ -0,0 +1,79 @@ +import { HTMLAttributes, forwardRef } from 'react' + +import cn from '@/utils/cn' +import { VariantProps, cva } from 'class-variance-authority' +import AccessibleIconButton from './accessible-icon-button' +import Typography from './common/typography' +import Icon from './common/icon' + +const TooltipVariants = cva<{ + color: Record<'orange' | 'neutral', string> + size: Record<'sm' | 'md' | 'lg', string> +}>( + `absolute whitespace-nowrap flex gap-2.5 items-center z-10 text-white rounded-full left-0 top-[calc(100%+20px)] + `, + { + variants: { + color: { + neutral: `bg-neutral-500`, + orange: `bg-orange-400`, + }, + size: { + lg: 'px-7 py-5', + md: 'px-5 py-3', + sm: 'px-3 py-2', + }, + }, + defaultVariants: { + color: 'orange', + size: 'md', + }, + }, +) + +interface TooltipProps + extends HTMLAttributes, + VariantProps { + label: string + onClose: () => void + color?: 'orange' | 'neutral' + size?: 'sm' | 'md' | 'lg' +} + +const Tooltip = forwardRef( + ({ size, color, className, label, children, onClose, ...props }, ref) => { + return ( +
+ {children} +
+ + {label} + + + +
+
+ ) + }, +) + +Tooltip.displayName = 'Tooltip' + +export default Tooltip diff --git a/src/stories/tooltip.stories.ts b/src/stories/tooltip.stories.ts new file mode 100644 index 00000000..55655fe2 --- /dev/null +++ b/src/stories/tooltip.stories.ts @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import Tooltip from '@/components/tooltip' + +const meta = { + title: 'DesignSystem/Tooltip', + component: Tooltip, + tags: ['autodocs'], + argTypes: { + color: { + control: 'select', + options: ['neutral', 'orange'], + }, + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + label: 'tooltip Orange example', + onClose: () => { + alert('close') + }, + children: 'tooltip Children', + }, +} + +export const Gray: Story = { + args: { + color: 'neutral', + label: 'tooltip Grey example', + onClose: () => { + alert('close') + }, + children: 'tooltip Children', + }, +}