@ilo-org/react 0.9.1 → 0.10.0

package/lib/esm/components/Hero/Hero.js

@@ -10,7 +10,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../SocialMedia/SocialMedia.js';
 import '../SocialMedia/index.js';
 import '../ContextMenu/ContextMenu.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const HeroImage = ({ url, alt }) => {
     const { prefix } = useGlobalSettings();

package/lib/esm/components/Hero/index.js

@@ -9,6 +9,6 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../Breadcrumb/Breadcrumb.js';
 import '../ContextMenu/ContextMenu.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../SocialMedia/SocialMedia.js';
 import '../SocialMedia/index.js';

package/lib/esm/components/Input/Input.js

@@ -7,7 +7,7 @@ import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, type = "text", }) => {
     const { prefix } = useGlobalSettings();

package/lib/esm/components/Input/index.js

@@ -7,5 +7,5 @@ import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';

package/lib/esm/components/Navigation/Navigation.js

@@ -9,7 +9,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../Input/Input.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';
 
 const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {

package/lib/esm/components/Navigation/index.js

@@ -10,5 +10,5 @@ import '../SearchField/SearchField.js';
 import '../Input/Input.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';

package/lib/esm/components/NumberPicker/NumberPicker.js

@@ -7,7 +7,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
     const { prefix } = useGlobalSettings();

package/lib/esm/components/NumberPicker/index.js

@@ -8,4 +8,4 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';

package/lib/esm/components/Profile/Profile.js

@@ -5,13 +5,15 @@ import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const Profile = ({ avatar, className, description, link, name, role, }) => {
+const Profile = ({ avatar, className, description, link, name, role, theme = "light", size = "large", }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--profile`;
     const profileClasses = classNames(className, {
         [baseClass]: true,
+        [`${baseClass}__theme__${theme}`]: theme,
+        [`${baseClass}__size__${size}`]: size,
     });
-    return (jsxs("figure", Object.assign({ className: profileClasses }, { children: [jsx("img", { className: `${baseClass}--avatar`, src: avatar, alt: `Avatar for ${name}` }), jsxs("figcaption", Object.assign({ className: `${baseClass}--contents` }, { children: [jsx("span", Object.assign({ className: `${baseClass}--name id` }, { children: name })), role && jsx("span", Object.assign({ className: `${baseClass}--role id` }, { children: role })), description && (jsx("p", Object.assign({ className: `${baseClass}--description info` }, { children: description }))), link && (jsx("a", Object.assign({ className: `${baseClass}--link info`, href: link.url }, { children: jsx("span", { children: link.label }) })))] }))] })));
+    return (jsxs("figure", Object.assign({ className: profileClasses }, { children: [jsx("img", { className: `${baseClass}--avatar`, src: avatar, alt: `Avatar for ${name}` }), jsx("figcaption", { children: jsxs("div", Object.assign({ className: `${baseClass}--figcaption--content` }, { children: [jsx("div", Object.assign({ className: `${baseClass}--name` }, { children: name })), role && jsx("div", Object.assign({ className: `${baseClass}--role` }, { children: role }))] })) }), description && (jsx("p", Object.assign({ className: `${baseClass}--description` }, { children: description }))), link && (jsx("div", Object.assign({ className: `${baseClass}--link` }, { children: jsx("a", Object.assign({ href: link.url, target: "__blank", rel: "noopener noreferrer" }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: link.label })) })) })))] })));
 };
 
 export { Profile as default };

package/lib/esm/components/Radio/Radio.js

@@ -8,7 +8,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import { usePrevious } from '../../hooks/usePrevious.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import 'nanoid';
 
 const Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, required, checked, defaultChecked = false, value, }, ref) => {

package/lib/esm/components/Radio/index.js

@@ -7,7 +7,7 @@ import '../../hooks/useGlobalSettings.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../../hooks/usePrevious.js';

package/lib/esm/components/SearchField/SearchField.js

@@ -7,7 +7,7 @@ import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';
 
 const SearchField = ({ action, callback, className, input, }) => {

package/lib/esm/components/SearchField/index.js

@@ -8,5 +8,5 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../Input/Input.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';

package/lib/esm/components/TextInput/TextInput.js

@@ -7,7 +7,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const TextInput = require$$0.forwardRef(({ onChange, onBlur, error, id, name, placeholder, required, pattern, disabled = false, type = "text", }, ref) => {
     const { prefix } = useGlobalSettings();

package/lib/esm/components/TextInput/index.js

@@ -8,7 +8,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const basic = {
     disabled: false,

package/lib/esm/components/Textarea/Textarea.js

@@ -7,7 +7,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const Textarea = require$$0.forwardRef((_a, ref) => {
     var { error, className, name, id } = _a, props = __rest(_a, ["error", "className", "name", "id"]);

package/lib/esm/components/Textarea/index.js

@@ -8,7 +8,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const placeholder = "It was a cold day in April and the clocks were striking thirteen....";
 const basic = {

package/lib/esm/components/Toggle/Toggle.js

@@ -7,7 +7,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const Toggle = forwardRef(({ size = "medium", error = false, disabled = false, defaultChecked = false, required = false, id, name, onChange, onBlur, onClick, checked, className, }, ref) => {
     const { prefix } = useGlobalSettings();

package/lib/esm/components/Toggle/index.js

@@ -8,7 +8,7 @@ import 'classnames';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const Default = {
     defaultChecked: false,

package/lib/esm/components/Tooltip/Tooltip.js

@@ -2,100 +2,70 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import ReactDOM from 'react-dom';
+import { createPopper } from '@popperjs/core';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const Tooltip = ({ className, children, icon, label, theme, id, }) => {
+const Tooltip = ({ className, children, icon, label, iconTheme, theme, id, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--tooltip`;
     const [isVisible, setIsVisible] = useState(false);
-    const [position, setPosition] = useState({
-        x: 0,
-        y: 0,
-    });
-    const [arrowPlacement, setArrowPlacement] = useState("center");
-    const [arrowAlignment, setArrowAlignment] = useState("left");
     const tooltipRef = useRef(null);
+    const popperInstanceRef = useRef(null);
+    const isLongTooltip = () => {
+        var _a, _b;
+        const tooltipText = (((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.textContent) ||
+            ((_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.innerText) ||
+            "").trim();
+        return tooltipText.length > 50;
+    };
     const tooltipClasses = classNames(className, {
         [baseClass]: true,
         [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--alignment-${arrowAlignment}`]: arrowAlignment,
         [`${baseClass}--visible`]: isVisible,
+        [`${baseClass}--long`]: isLongTooltip(),
     });
-    const tooltipArrowClasses = classNames(className, {
-        [`${baseClass}--arrow`]: true,
-        [`${baseClass}--arrow--placement-${arrowPlacement}`]: arrowPlacement,
+    const tooltipArrowClasses = classNames(`${baseClass}--arrow`, `${baseClass}--arrow--placement-negative`);
+    const iconClasses = classNames(className, `${baseClass}--wrapper`, {
+        [`${baseClass}--wrapper__icon ${baseClass}--wrapper__icon__theme__${theme}`]: icon,
+        [`${baseClass}--wrapper__icon__theme__${theme}`]: iconTheme,
     });
     const handleOnMouseOver = (e) => {
-        // get hovered element reference
         const target = e.currentTarget;
-        if (target) {
-            const rect = target.getBoundingClientRect();
+        if (target && tooltipRef.current) {
+            const popperInstance = createPopper(target, tooltipRef.current, {
+                placement: "top",
+                modifiers: [
+                    {
+                        name: "offset",
+                        options: {
+                            offset: [0, 12], // Adjust offset as needed
+                        },
+                    },
+                    {
+                        name: "flip",
+                        enabled: true,
+                    },
+                    {
+                        name: "preventOverflow",
+                        enabled: true,
+                    },
+                ],
+            });
+            popperInstanceRef.current = popperInstance;
             setIsVisible(true);
-            postMouseOver(rect);
-        }
-    };
-    const postMouseOver = (hoverRect) => {
-        // position the tooltip after showing it
-        let placement = "center";
-        let alignment = "left";
-        const ttNode = ReactDOM.findDOMNode(tooltipRef.current);
-        if (ttNode != null) {
-            let x = 0, y = 0;
-            const docWidth = document.documentElement.clientWidth, docHeight = document.documentElement.clientHeight;
-            const rx = hoverRect.x + hoverRect.width, // most right x
-            lx = hoverRect.x, // most left x
-            ty = hoverRect.y, // most top y
-            by = hoverRect.y + hoverRect.height; // most bottom y
-            // tool tip rectange
-            const ttRect = ttNode.getBoundingClientRect();
-            const bRight = rx + ttRect.width <= window.scrollX + docWidth &&
-                ty + ttRect.height <= window.scrollY + docHeight;
-            const bLeft = lx - ttRect.width >= 0 &&
-                ty + ttRect.height <= window.scrollY + docHeight;
-            const bAbove = ty - ttRect.height >= 0;
-            const bBellow = by + ttRect.height <= window.scrollY + docHeight;
-            // the tooltip doesn't fit to the left
-            if (bRight) {
-                x = hoverRect.width + 16;
-                y = icon ? -8 : 0;
-                placement = "negative";
-                alignment = "right";
-            }
-            else if (bBellow) {
-                x = icon ? -8 : 0;
-                y = hoverRect.height + 16;
-                placement = "center";
-                alignment = "bottom";
-            }
-            else if (bLeft) {
-                x = -ttRect.width - 16;
-                y = icon ? -8 : 0;
-                placement = "negative";
-                alignment = "left";
-            }
-            else if (bAbove) {
-                x = icon ? -8 : 0;
-                y = -ttRect.height - 16;
-                placement = "center";
-                alignment = "top";
-            }
-            setPosition({ x: x, y: y });
-            setArrowPlacement(placement);
-            setArrowAlignment(alignment);
         }
     };
     const handleOnMouseOut = () => {
+        if (popperInstanceRef.current) {
+            popperInstanceRef.current.destroy();
+        }
         setIsVisible(false);
     };
-    const style = {
-        // left: ((position.x + window.scrollX) + 'px'),
-        // top: ((position.y + window.scrollY) + 'px')
-        left: position.x + "px",
-        top: position.y + "px",
+    const handleOnFocus = (e) => {
+        handleOnMouseOver(e);
     };
-    return (jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsx(Fragment, { children: children }), jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
+    return (jsxs("div", Object.assign({ className: iconClasses, onMouseOver: handleOnMouseOver, onFocus: handleOnFocus, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsx(Fragment, { children: children }), jsxs("span", Object.assign({ className: tooltipClasses, ref: tooltipRef, "data-id": id, id: "tooltip", role: "tooltip", "aria-hidden": !isVisible }, { children: [jsx("span", { "data-popper-arrow": true, className: tooltipArrowClasses, "data-placement": "negative", role: "presentation" }), label] }))] })));
 };
 
 export { Tooltip as default };

package/lib/esm/components/Tooltip/index.js

@@ -5,4 +5,4 @@ import 'classnames';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import 'react-dom';
+import '@popperjs/core';

package/lib/esm/components/index.js

@@ -67,6 +67,7 @@ import '../utils/triggerBrowserReflow.js';
 import './FormControl/FormControl.js';
 import 'nanoid';
 import '../hooks/usePrevious.js';
+import '@popperjs/core';
 import './Hero/HeroCard.js';
 import './SocialMedia/SocialMedia.js';
 import './Input/Input.js';

package/lib/esm/index.js

@@ -66,6 +66,7 @@ import './utils/transitionEndListener.js';
 import './utils/triggerBrowserReflow.js';
 import './components/FormControl/FormControl.js';
 import 'nanoid';
+import '@popperjs/core';
 import './hooks/usePrevious.js';
 import '@ilo-org/icons-react';
 import './components/Hero/HeroCard.js';

package/lib/types/react/src/components/Profile/Profile.props.d.ts

@@ -1,3 +1,4 @@
+import { ThemeTypes, SizeTypes } from "../../types";
 interface LinkProps {
     /**
      * Specify the label for the the Profile's link
@@ -9,6 +10,14 @@ interface LinkProps {
     url?: Required<string>;
 }
 export interface ProfileProps {
+    /**
+     * Specify the theme for your profile component.
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the size for your profile component.
+     */
+    size?: SizeTypes;
     /**
      * Specify an optional avatar to be added to your Profile component. Image *must* be a perfect square. CMS backend should provide a fallback if the avatar is not populated.
      */

package/lib/types/react/src/components/Tooltip/Tooltip.props.d.ts

@@ -1,4 +1,4 @@
-import { TooltipThemes } from "../../types";
+import { TooltipThemes, TooltipIconThemes } from "../../types";
 export interface TooltipProps {
     /**
      * Specify an optional className to be added to your Tooltip.
@@ -20,20 +20,12 @@ export interface TooltipProps {
      * Set whether the tooltip is visible or not
      */
     isVisible?: boolean;
-    /**
-     * Callback fired onMouseOver
-     */
-    onMouseOver?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
-    /**
-     * Callback fired onMouseOut
-     */
-    onMouseOut?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
     /**
      * Describe the theme of the tooltip
      */
     theme?: Required<TooltipThemes>;
     /**
-     * Set a width for the tooltip
+     * Describe the background theme of the tooltip
      */
-    width?: string;
+    iconTheme?: Required<TooltipIconThemes>;
 }

package/lib/types/react/src/types/index.d.ts

@@ -13,6 +13,7 @@ export type LabelTypes = "default" | "actionable" | "light";
 export type LinkTypes = "light" | "dark" | "footer" | "button";
 export type LinkListThemes = "light" | "dark";
 export type TooltipThemes = "light" | "dark";
+export type TooltipIconThemes = "light" | "dark";
 export type TooltipAlignment = "top" | "right" | "bottom" | "left";
 export type TooltipPlacement = "negative" | "center" | "positive";
 export type ListAlignment = "default" | "horizontal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -68,6 +68,7 @@
     ]
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "classnames": "^2.3.1",
     "dom-helpers": "^5.2.1",
     "nanoid": "^3.3.6",
@@ -76,7 +77,7 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.13.0",
+    "@ilo-org/styles": "0.13.1",
     "@ilo-org/themes": "0.7.0",
     "@ilo-org/utils": "0.0.11"
   },
@@ -84,21 +85,20 @@
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-json": "^5.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@storybook/addon-a11y": "7.5.0-alpha.1",
-    "@storybook/addon-actions": "7.5.0-alpha.1",
-    "@storybook/addon-docs": "7.5.0-alpha.1",
-    "@storybook/addon-essentials": "7.5.0-alpha.1",
-    "@storybook/addon-links": "7.5.0-alpha.1",
+    "@storybook/addon-a11y": "7.6.6",
+    "@storybook/addon-actions": "7.6.6",
+    "@storybook/addon-docs": "7.6.6",
+    "@storybook/addon-essentials": "7.6.6",
+    "@storybook/addon-links": "7.6.6",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "7.5.0-alpha.1",
-    "@storybook/builder-vite": "7.5.0-alpha.1",
-    "@storybook/client-api": "7.5.0-alpha.1",
-    "@storybook/manager-api": "7.5.0-alpha.1",
-    "@storybook/node-logger": "7.5.0-alpha.1",
+    "@storybook/blocks": "7.6.6",
+    "@storybook/client-api": "7.6.6",
+    "@storybook/manager-api": "7.6.6",
+    "@storybook/node-logger": "7.6.6",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "7.5.0-alpha.1",
-    "@storybook/react-vite": "7.5.0-alpha.1",
-    "@storybook/theming": "7.5.0-alpha.1",
+    "@storybook/react": "7.6.6",
+    "@storybook/react-vite": "7.6.6",
+    "@storybook/theming": "7.6.6",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -124,7 +124,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.34.1",
     "screenfull": "^5.2.0",
-    "storybook": "7.5.0-alpha.1",
+    "storybook": "7.6.6",
     "storybook-addon-performance": "^0.17.1",
     "storybook-addon-rtl-direction": "^0.0.19",
     "ts-dedent": "^2.2.0",

package/src/components/Profile/Profile.props.ts

@@ -1,3 +1,5 @@
+import { ThemeTypes, SizeTypes } from "../../types";
+
 interface LinkProps {
   /**
    * Specify the label for the the Profile's link
@@ -11,6 +13,16 @@ interface LinkProps {
 }
 
 export interface ProfileProps {
+  /**
+   * Specify the theme for your profile component.
+   */
+  theme?: ThemeTypes;
+
+  /**
+   * Specify the size for your profile component.
+   */
+  size?: SizeTypes;
+
   /**
    * Specify an optional avatar to be added to your Profile component. Image *must* be a perfect square. CMS backend should provide a fallback if the avatar is not populated.
    */

package/src/components/Profile/Profile.tsx

@@ -10,11 +10,15 @@ const Profile: FC<ProfileProps> = ({
   link,
   name,
   role,
+  theme = "light",
+  size = "large",
 }) => {
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--profile`;
   const profileClasses = classNames(className, {
     [baseClass]: true,
+    [`${baseClass}__theme__${theme}`]: theme,
+    [`${baseClass}__size__${size}`]: size,
   });
 
   return (
@@ -24,18 +28,22 @@ const Profile: FC<ProfileProps> = ({
         src={avatar}
         alt={`Avatar for ${name}`}
       />
-      <figcaption className={`${baseClass}--contents`}>
-        <span className={`${baseClass}--name id`}>{name}</span>
-        {role && <span className={`${baseClass}--role id`}>{role}</span>}
-        {description && (
-          <p className={`${baseClass}--description info`}>{description}</p>
-        )}
-        {link && (
-          <a className={`${baseClass}--link info`} href={link.url}>
-            <span>{link.label}</span>
-          </a>
-        )}
+      <figcaption>
+        <div className={`${baseClass}--figcaption--content`}>
+          <div className={`${baseClass}--name`}>{name}</div>
+          {role && <div className={`${baseClass}--role`}>{role}</div>}
+        </div>
       </figcaption>
+      {description && (
+        <p className={`${baseClass}--description`}>{description}</p>
+      )}
+      {link && (
+        <div className={`${baseClass}--link`}>
+          <a href={link.url} target="__blank" rel="noopener noreferrer">
+            <span className={`${baseClass}--link--label`}>{link.label}</span>
+          </a>
+        </div>
+      )}
     </figure>
   );
 };

package/src/components/Tooltip/Tooltip.args.ts

@@ -22,7 +22,7 @@ const dark: TooltipProps = {
 const darkicon: TooltipProps = {
   icon: true,
   label: "This is a tooltip for an icon",
-  theme: "dark", // "light" | "dark" ;
+  iconTheme: "dark", // "light" | "dark" ;
   isVisible: false,
 };
 

package/src/components/Tooltip/Tooltip.props.ts

@@ -1,4 +1,4 @@
-import { TooltipThemes } from "../../types";
+import { TooltipThemes, TooltipIconThemes } from "../../types";
 
 export interface TooltipProps {
   /**
@@ -26,23 +26,13 @@ export interface TooltipProps {
    */
   isVisible?: boolean;
 
-  /**
-   * Callback fired onMouseOver
-   */
-  onMouseOver?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
-
-  /**
-   * Callback fired onMouseOut
-   */
-  onMouseOut?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
-
   /**
    * Describe the theme of the tooltip
    */
   theme?: Required<TooltipThemes>;
 
   /**
-   * Set a width for the tooltip
+   * Describe the background theme of the tooltip
    */
-  width?: string;
+  iconTheme?: Required<TooltipIconThemes>;
 }