@ably/ui 14.0.0-dev.968e4a2 → 14.0.0-dev.b9c1484

package/src/core/Tooltip.tsx

@@ -1,7 +1,24 @@
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
-import Icon from "../Icon/component.tsx";
+import React, {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import Icon from "./Icon";
 
-const Tooltip = ({ children }: PropsWithChildren) => {
+type TooltipProps = {
+  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  tooltipProps?: HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
+
+const Tooltip = ({
+  children,
+  triggerProps,
+  tooltipProps,
+  ...rest
+}: PropsWithChildren<TooltipProps>) => {
   const [open, setOpen] = useState(false);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const offset = 8;
@@ -27,21 +44,28 @@ const Tooltip = ({ children }: PropsWithChildren) => {
   }, [open]);
 
   return (
-    <div className="relative inline-block align-top h-16">
+    <div
+      {...rest}
+      className={`relative inline-block align-top h-16 ${
+        rest?.className ?? ""
+      }`}
+    >
       <button
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
-        className="ml-8 p-0 relative top-1 focus:outline-none"
         type="button"
         ref={reference}
         aria-describedby="tooltip"
+        {...triggerProps}
+        className={`ml-8 p-0 relative top-1 focus:outline-none ${
+          triggerProps?.className ?? ""
+        }`}
       >
         <Icon name="icon-gui-info" size="1rem" />
       </button>
 
       {open ? (
         <div
-          className="bg-light-grey p-12 rounded pointer-events-none absolute z-20"
           role="tooltip"
           ref={floating}
           style={{
@@ -49,6 +73,10 @@ const Tooltip = ({ children }: PropsWithChildren) => {
             left: -position.x,
             boxShadow: "4px 4px 15px rgba(0, 0, 0, 0.2)",
           }}
+          {...tooltipProps}
+          className={`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${
+            tooltipProps?.className ?? ""
+          }`}
         >
           <div className="w-256">{children}</div>
         </div>

package/src/core/icons/icon-gui-partial.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12ZM1.2779e-06 12C9.30272e-07 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 -1.95703e-07 12 -4.37114e-07C5.37259 -6.78525e-07 1.62554e-06 5.37258 1.2779e-06 12Z" fill="#03020D"/>
+<path d="M11.5833 23.576C5.37903 23.3566 0.416667 18.2578 0.416667 12C0.416668 5.74218 5.37903 0.643381 11.5833 0.424021L11.5833 23.576Z" fill="#03020D" stroke="#03020D" stroke-width="0.833333"/>
+</svg>

package/src/pages/Buttons.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import Icon from "../core/Icon/component.tsx";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Buttons" />
 

package/src/pages/Chips.mdx

@@ -1,5 +1,5 @@
 import { Meta, Unstyled } from "@storybook/blocks";
-import Icon from "../core/Icon/component.tsx";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Chips" />
 

package/src/pages/Forms.mdx

@@ -1,7 +1,7 @@
 import { Meta, Unstyled } from "@storybook/blocks";
 import { formsHtml } from "./utils";
-import Code from "../core/Code/component.tsx";
-import Icon from "../core/Icon/component.tsx";
+import Code from "../core/Code";
+import Icon from "../core/Icon";
 
 <Meta title="Brand/Forms" />
 

package/core/CookieMessage/component.js

@@ -1 +0,0 @@
-import"./component.css";

package/core/Flash/component.js

@@ -1 +0,0 @@
-import"./component.css";

package/core/Footer/component.js

@@ -1 +0,0 @@
-import"./component.css";

package/src/core/CookieMessage/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/Flash/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/Footer/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/MeganavContentUseCases/component.js

@@ -1 +0,0 @@
-// TODO: Webpack expects a .js file for any component