@ilo-org/react 0.9.1 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "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.2",
     "@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/Button/Button.args.ts

@@ -4,10 +4,19 @@ const primary: ButtonProps = {
   type: "primary",
   label: "Primary",
   size: "medium",
+  name: "primary",
 };
-const secondary: ButtonProps = { type: "secondary", label: "Secondary" };
-const tertiary: ButtonProps = { type: "tertiary", label: "Tertiary" };
-const alert: ButtonProps = { type: "alert", label: "Alert" };
+const secondary: ButtonProps = {
+  type: "secondary",
+  label: "Secondary",
+  name: "secondary",
+};
+const tertiary: ButtonProps = {
+  type: "tertiary",
+  label: "Tertiary",
+  name: "tertiary",
+};
+const alert: ButtonProps = { type: "alert", label: "Alert", name: "alert" };
 const icon: ButtonProps = { type: "primary", label: "Icon", icon: "close" };
 const disabled: ButtonProps = {
   type: "primary",

package/src/components/Button/Button.props.ts

@@ -22,6 +22,11 @@ export interface ButtonProps {
    */
   className?: string;
 
+  /**
+   * Specify the name for the Button.
+   */
+  name?: string;
+
   /**
    * Specify whether or not the button is disabled.
    */

package/src/components/Button/Button.tsx

@@ -20,6 +20,7 @@ const Button: FC<ButtonProps> = ({
   type = "primary",
   url,
   style,
+  name,
 }) => {
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--button`;
@@ -63,6 +64,7 @@ const Button: FC<ButtonProps> = ({
           type={kind}
           aria-haspopup={opensmodal ? `dialog` : false}
           style={style}
+          name={name}
         >
           {label && <span className="button__label">{label}</span>}
           {icon && <Icon name={icon} hidden={true} />}

package/src/components/Card/Card.tsx

@@ -67,7 +67,7 @@ const Card: FC<CardProps> = ({
         )}
         <div className={`${baseClass}--content`}>
           {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
-          {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
+          {title && <h3 className={`${baseClass}--title`}>{title}</h3>}
           {(variant == "multilink" || (variant == "data" && image)) && (
             <div className={`${baseClass}--image--wrapper`}>
               <picture>

package/src/components/Dropdown/Dropdown.tsx

@@ -65,7 +65,9 @@ const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>((props, ref) => {
               label={option.label}
               value={option.value}
               key={`${baseClass}--option--${i}`}
-            />
+            >
+              {option.label}
+            </option>
           ))}
       </select>
     </div>

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>;
 }

package/src/components/Tooltip/Tooltip.tsx

@@ -1,138 +1,115 @@
-import { FC, useState, useRef } from "react";
+import React, { FC, useState, useRef } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { TooltipProps } from "./Tooltip.props";
-import ReactDOM from "react-dom";
+import { createPopper, Instance as PopperInstance } from "@popperjs/core";
 
 const Tooltip: FC<TooltipProps> = ({
   className,
   children,
   icon,
   label,
+  iconTheme,
   theme,
   id,
 }) => {
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--tooltip`;
   const [isVisible, setIsVisible] = useState<boolean>(false);
-  const [position, setPosition] = useState<{ x: number; y: number }>({
-    x: 0,
-    y: 0,
-  });
-  const [arrowPlacement, setArrowPlacement] = useState<string>("center");
-  const [arrowAlignment, setArrowAlignment] = useState<string>("left");
-
-  const tooltipRef = useRef(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const popperInstanceRef = useRef<PopperInstance | null>(null);
+
+  const isLongTooltip = () => {
+    const tooltipText = (
+      tooltipRef.current?.textContent ||
+      tooltipRef.current?.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: React.MouseEventHandler<HTMLDivElement> &
-    React.FocusEventHandler<HTMLDivElement> = (e) => {
-    // get hovered element reference
+  const handleOnMouseOver: React.MouseEventHandler<HTMLDivElement> = (e) => {
     const target = e.currentTarget;
+    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;
 
-    if (target) {
-      const rect = target.getBoundingClientRect();
       setIsVisible(true);
-      postMouseOver(rect);
-    }
-  };
-
-  const postMouseOver = (hoverRect: any) => {
-    // position the tooltip after showing it
-    let placement = "center";
-    let alignment = "left";
-
-    const ttNode = ReactDOM.findDOMNode(tooltipRef.current) as Element;
-    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: React.FocusEventHandler<HTMLDivElement> = (e) => {
+    handleOnMouseOver(e as unknown as React.MouseEvent<HTMLDivElement>);
   };
 
   return (
     <div
-      className={`${baseClass}--wrapper ${icon && "has-icon"}`}
+      className={iconClasses}
       onMouseOver={handleOnMouseOver}
-      onFocus={handleOnMouseOver}
+      onFocus={handleOnFocus}
       onMouseOut={handleOnMouseOut}
       onBlur={handleOnMouseOut}
       id={id}
     >
       {!icon && <>{children}</>}
-      <span className={tooltipClasses} style={style} ref={tooltipRef}>
-        <span className={tooltipArrowClasses} role="presentation"></span>
+      <span
+        className={tooltipClasses}
+        ref={tooltipRef}
+        data-id={id}
+        id="tooltip"
+        role="tooltip"
+        aria-hidden={!isVisible}
+      >
+        <span
+          data-popper-arrow
+          className={tooltipArrowClasses}
+          data-placement="negative"
+          role="presentation"
+        />
         {label}
       </span>
     </div>

package/src/types/index.ts

@@ -32,6 +32,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";