@hyphen/hyphen-components 4.6.0 → 4.7.0

package/dist/index.d.ts

@@ -49,4 +49,5 @@ export * from './components/TimePicker/TimePicker';
 export * from './components/TimePickerNative/TimePickerNative';
 export * from './components/Toast';
 export * from './components/Toggle/Toggle';
+export * from './components/Tooltip/Tooltip';
 export * from './hooks';

package/dist/lib/tokens.d.ts

@@ -6,8 +6,8 @@ export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
 export declare const BREAKPOINTS: Breakpoint[];
 export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900")[];
 export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
-export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "black" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
-export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "modal" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
+export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "black" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
+export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "modal" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
 export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
 export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl")[];
 export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -61,11 +61,13 @@
     }
   ],
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.21.0",
+    "@emotion/react": "^11.14.0",
+    "@hyphen/hyphen-design-tokens": "^4.22.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.7",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
     "date-fns": "^2.16.1",
@@ -78,8 +80,7 @@
     "react-remove-scroll": "^2.5.10",
     "react-router-dom": "^6.26.1",
     "react-select": "^5.9.0",
-    "react-select-event": "^5.5.1",
-    "@emotion/react": "^11.14.0"
+    "react-select-event": "^5.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",

package/src/components/Tooltip/Tooltip.mdx

@@ -0,0 +1,23 @@
+
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Tooltip } from './Tooltip';
+import * as Stories from './Tooltip.stories';
+
+<Meta of={Stories} />
+
+# Tooltip
+
+A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+
+This component is extended from [Radix](https://www.radix-ui.com/primitives/docs/components/tooltip).
+
+[API Reference](https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference)
+
+
+## Basic Usage
+
+<Canvas of={Stories.BasicUsage} />
+
+## With Portal
+
+<Canvas of={Stories.WithPortal} />

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipPortal,
+} from './Tooltip';
+import type { Meta } from '@storybook/react';
+import { Button } from '../Button/Button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+};
+
+export default meta;
+
+export const BasicUsage = () => (
+  <TooltipProvider delayDuration={100}>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button>Hover</Button>
+      </TooltipTrigger>
+      <TooltipContent>This is the tooltip content</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export const WithPortal = () => (
+  <TooltipProvider delayDuration={100}>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button>Tooltip in Portal</Button>
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>This is the tooltip content</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>
+);

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import classNames from 'classnames';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipPortal = TooltipPrimitive.Portal;
+
+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={classNames(
+      'background-color-tooltip font-color-tooltip font-size-xs overflow-hidden br-sm p-h-sm p-v-xs shadow-sm ',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipPortal,
+};

package/src/index.ts

@@ -49,4 +49,5 @@ export * from './components/TimePicker/TimePicker';
 export * from './components/TimePickerNative/TimePickerNative';
 export * from './components/Toast';
 export * from './components/Toggle/Toggle';
+export * from './components/Tooltip/Tooltip';
 export * from './hooks';