@ilo-org/react 0.9.0 → 0.10.0

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

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

package/lib/esm/components/FileUpload/FileUpload.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';
 
 function formatBytes(bytes, decimals = 2) {
     if (!+bytes)

package/lib/esm/components/FileUpload/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/FormControl/FormControl.js

@@ -6,7 +6,7 @@ import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Tooltip from '../Tooltip/Tooltip.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import 'react-dom';
+import '@popperjs/core';
 
 // Calculates unique IDs for the internal accessibility elements
 // TODO: When we upgrade to React 8, this should use useId instead

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

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

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import HeroCard from './HeroCard.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();
@@ -20,14 +20,16 @@ const HeroImage = ({ url, alt }) => {
     const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
     return (jsx("figure", Object.assign({ className: "hero--image" }, { children: jsxs("picture", { children: [sortedUrls.map((img) => (jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
 };
-const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
+const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", theme = "dark", image, breadcrumb, heroCard, caption, gap, }) => {
     const baseClass = "hero";
     const justifyClass = `${baseClass}__card-justify__${justify}`;
     const alignClass = `${baseClass}__card-align__${align}`;
     const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
     const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
-    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
-    return (jsxs("div", Object.assign({ className: heroClasses }, { children: [jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsx(HeroImage, Object.assign({}, image)) })), breadcrumb && (jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsx(Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsx("div", Object.assign({ className: "hero--card" }, { children: jsx(HeroCard, Object.assign({}, heroCard)) })), caption && (jsx("div", Object.assign({ className: "hero--caption" }, { children: jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsx(Tooltip, Object.assign({}, caption)) })) })))] })));
+    const themeClass = `${baseClass}__card-theme__${theme}`;
+    const gapClass = `${baseClass}__gap__${gap}`;
+    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass, themeClass, { [gapClass]: !!gap });
+    return (jsxs("div", Object.assign({ className: heroClasses }, { children: [jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsx(HeroImage, Object.assign({}, image)) })), breadcrumb && (jsx(Fragment, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsx(Breadcrumb, Object.assign({}, breadcrumb)) })) })) })), jsx("div", { className: "hero--card-offset" }), jsx("div", Object.assign({ className: "hero--card" }, { children: jsx(HeroCard, Object.assign({}, heroCard)) })), caption && (jsx("div", Object.assign({ className: "hero--caption" }, { children: jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsx(Tooltip, Object.assign({}, caption)) })) })))] })));
 };
 
 export { Hero as default };

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/Hero/Hero.props.d.ts

@@ -36,6 +36,10 @@ export interface HeroProps {
      * Props for the card for the hero
      */
     heroCard: HeroCardProps;
+    /**
+     * Color of the gap space between bottom of the hero image and bottom of the card
+     */
+    gap?: "white" | "transparent" | "dark" | "light";
     /**
      * The size of the poster image
      */

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.0",
+  "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.12.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/Hero/Hero.args.ts

@@ -2,6 +2,7 @@ import { HeroProps } from "./Hero.props";
 import { defaultArgs } from "../SocialMedia";
 import { HeroCardProps } from "./HeroCard.props";
 import { ImageProps } from "../Image/Image.props";
+import { BreadcrumbProps } from "../Breadcrumb/Breadcrumb.props";
 
 const lightArticleCard: HeroCardProps = {
   title: "Does Artificial Intelligence threaten decent work?",
@@ -55,8 +56,35 @@ const heroImage: ImageProps = {
   ],
 };
 
+const heroBreadCrumb: BreadcrumbProps = {
+  home: {
+    indented: false,
+    label: "Home",
+    url: "/",
+  },
+  links: [
+    {
+      label: "Link One",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Two",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Three",
+      url: "https://www.ilo.org/",
+    },
+    {
+      label: "Link Four",
+      url: "https://www.ilo.org/",
+    },
+  ],
+};
+
 const standard = {
   image: heroImage,
+  breadcrumb: heroBreadCrumb,
   heroCard: darkPortalCard,
 };
 

package/src/components/Hero/Hero.props.ts

@@ -45,6 +45,11 @@ export interface HeroProps {
    */
   heroCard: HeroCardProps;
 
+  /**
+   * Color of the gap space between bottom of the hero image and bottom of the card
+   */
+  gap?: "white" | "transparent" | "dark" | "light";
+
   /**
    * The size of the poster image
    */