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

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/core/scripts.js

@@ -1,7 +1,5 @@
 import "array-flat-polyfill";
 
-import "./styles.css";
-
 export { default as reactRenderer, renderComponent } from "./react-renderer";
 export { default as loadSprites } from "./load-sprites";
 export { default as toggleChatWidget } from "./hubspot-chat-toggle";

package/src/core/styles/buttons.css

@@ -1,122 +1,124 @@
-.ui-btn {
-  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
-  @apply hover:text-white hover:bg-active-orange;
-  @apply active:text-white active:bg-red-orange;
-  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-  @apply transition-colors;
-  @apply inline-flex items-center justify-center;
-}
-
-.ui-btn-alt {
-  transition: background-position 0.2s;
-  background: linear-gradient(
-    61.2deg,
-    var(--color-active-orange) 5%,
-    #fe5215 19%,
-    #fc4a13 27%,
-    #f73c10 33%,
-    #f1280a 39%,
-    #e90f04 44%,
-    var(--color-red-orange) 50%
-  );
-  background-size: 200% 100%;
-  background-position: 0% 0%;
-
-  @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-  @apply focus:outline-gui-focus;
-  @apply inline-flex items-center justify-center;
-}
-
-.ui-btn-alt:hover,
-.ui-btn-alt:focus {
-  background-position: 100% 0%;
-}
-
-.ui-btn-alt:disabled {
-  background: linear-gradient(var(--gradient-transparent));
-  @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
-}
-
-.ui-btn-invert {
-  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-  @apply hover:text-white hover:bg-active-orange;
-  @apply active:text-white active:bg-red-orange;
-  @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
-  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-  @apply transition-colors;
-  @apply inline-flex items-center justify-center;
-}
-
-.ui-btn-secondary {
-  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
-  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
-  @apply active:border-red-orange active:bg-white;
-  @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
-  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
-  @apply transition-colors;
-  @apply inline-flex items-center justify-center;
-}
-
-.ui-btn-secondary-invert {
-  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
-  @apply hover:text-white hover:border-active-orange;
-  @apply active:border-red-orange;
-  @apply focus:outline-gui-focus;
-  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
-  @apply transition-colors;
-  @apply inline-flex items-center justify-center;
-}
-
-.ui-btn-icon {
-  @apply w-24 h-24 mr-16;
-}
-
-.ui-btn-icon-small {
-  @apply w-20 h-20 mr-12;
-}
-
-.ui-btn-icon-xsmall {
-  @apply w-16 h-16 mr-8;
-}
-
-.ui-chip {
-  @apply text-btn3 p-chip rounded text-cool-black;
-  @apply hover:bg-mid-grey;
-  @apply active:bg-red-orange active:text-white;
-  @apply focus:bg-red-orange focus:text-white focus:outline-none;
-  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-  @apply transition-colors;
-}
-
-.ui-chip[data-selected] {
-  @apply bg-active-orange text-white;
-}
-
-.ui-chip[data-selected]:hover {
-  @apply bg-mid-grey text-cool-black;
-}
-
-.ui-chip[data-selected]:focus {
-  @apply bg-red-orange text-white;
-}
-
-.ui-chip-alt {
-  @apply text-btn3 p-chip rounded text-white;
-  @apply hover:bg-gui-hover;
-  @apply active:bg-gui-active active:text-white;
-  @apply focus:bg-gui-active focus:text-white focus:outline-none;
-  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
-  @apply transition-colors;
-}
-
-.ui-chip-alt[data-selected] {
-  @apply bg-dark-grey text-white;
-}
-.ui-chip-alt[data-selected]:hover {
-  @apply bg-gui-hover text-white;
-}
-
-.ui-chip-alt[data-selected]:focus {
-  @apply bg-gui-active text-white;
+@layer components {
+  .ui-btn {
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-active-orange;
+    @apply active:text-white active:bg-red-orange;
+    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt {
+    transition: background-position 0.2s;
+    background: linear-gradient(
+      61.2deg,
+      var(--color-active-orange) 5%,
+      #fe5215 19%,
+      #fc4a13 27%,
+      #f73c10 33%,
+      #f1280a 39%,
+      #e90f04 44%,
+      var(--color-red-orange) 50%
+    );
+    background-size: 200% 100%;
+    background-position: 0% 0%;
+
+    @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply focus:outline-gui-focus;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-alt:hover,
+  .ui-btn-alt:focus {
+    background-position: 100% 0%;
+  }
+
+  .ui-btn-alt:disabled {
+    background: linear-gradient(var(--gradient-transparent));
+    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+  }
+
+  .ui-btn-invert {
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-active-orange;
+    @apply active:text-white active:bg-red-orange;
+    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-secondary {
+    @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
+    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
+    @apply active:border-red-orange active:bg-white;
+    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-secondary-invert {
+    @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
+    @apply hover:text-white hover:border-active-orange;
+    @apply active:border-red-orange;
+    @apply focus:outline-gui-focus;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+    @apply inline-flex items-center justify-center;
+  }
+
+  .ui-btn-icon {
+    @apply w-24 h-24 mr-16;
+  }
+
+  .ui-btn-icon-small {
+    @apply w-20 h-20 mr-12;
+  }
+
+  .ui-btn-icon-xsmall {
+    @apply w-16 h-16 mr-8;
+  }
+
+  .ui-chip {
+    @apply text-btn3 p-chip rounded text-cool-black;
+    @apply hover:bg-mid-grey;
+    @apply active:bg-red-orange active:text-white;
+    @apply focus:bg-red-orange focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+  }
+
+  .ui-chip[data-selected] {
+    @apply bg-active-orange text-white;
+  }
+
+  .ui-chip[data-selected]:hover {
+    @apply bg-mid-grey text-cool-black;
+  }
+
+  .ui-chip[data-selected]:focus {
+    @apply bg-red-orange text-white;
+  }
+
+  .ui-chip-alt {
+    @apply text-btn3 p-chip rounded text-white;
+    @apply hover:bg-gui-hover;
+    @apply active:bg-gui-active active:text-white;
+    @apply focus:bg-gui-active focus:text-white focus:outline-none;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply transition-colors;
+  }
+
+  .ui-chip-alt[data-selected] {
+    @apply bg-dark-grey text-white;
+  }
+  .ui-chip-alt[data-selected]:hover {
+    @apply bg-gui-hover text-white;
+  }
+
+  .ui-chip-alt[data-selected]:focus {
+    @apply bg-gui-active text-white;
+  }
 }

package/src/core/styles/forms.css

@@ -1,62 +1,64 @@
-.ui-checkbox-p1 {
-  @apply flex items-start mb-16 font-sans font-medium;
-}
+@layer components {
+  .ui-checkbox-p1 {
+    @apply flex items-start mb-16 font-sans font-medium;
+  }
 
-.ui-checkbox-p2 {
-  @apply flex items-start mb-12 font-sans font-medium;
-}
+  .ui-checkbox-p2 {
+    @apply flex items-start mb-12 font-sans font-medium;
+  }
 
-.ui-checkbox-input {
-  @apply opacity-0 absolute h-20 w-20;
-}
+  .ui-checkbox-input {
+    @apply opacity-0 absolute h-20 w-20;
+  }
 
-.ui-checkbox-styled {
-  @apply w-20 h-20 mr-16;
-  @apply bg-white flex flex-shrink-0 justify-center items-center;
-  @apply border border-dark-grey rounded-md focus-within:border-active-orange;
-}
+  .ui-checkbox-styled {
+    @apply w-20 h-20 mr-16;
+    @apply bg-white flex flex-shrink-0 justify-center items-center;
+    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+  }
 
-.ui-checkbox-styled-tick {
-  @apply hidden text-white;
-}
+  .ui-checkbox-styled-tick {
+    @apply hidden text-white;
+  }
 
-.ui-checkbox-label-p1 {
-  @apply select-none;
-  @apply text-p1 font-medium text-cool-black;
-}
+  .ui-checkbox-label-p1 {
+    @apply select-none;
+    @apply text-p1 font-medium text-cool-black;
+  }
 
-.ui-checkbox-label-p2 {
-  @apply select-none;
-  @apply text-p2 font-medium text-cool-black;
-}
+  .ui-checkbox-label-p2 {
+    @apply select-none;
+    @apply text-p2 font-medium text-cool-black;
+  }
 
-.ui-checkbox-input:disabled + .ui-checkbox-styled {
-  @apply bg-gui-unavailable border;
-}
+  .ui-checkbox-input:disabled + .ui-checkbox-styled {
+    @apply bg-gui-unavailable border;
+  }
 
-.ui-checkbox-input:focus + .ui-checkbox-styled {
-  border-width: 0.125rem;
-  @apply border-gui-focus;
-}
+  .ui-checkbox-input:focus + .ui-checkbox-styled {
+    border-width: 0.125rem;
+    @apply border-gui-focus;
+  }
 
-.ui-checkbox-input:checked + .ui-checkbox-styled {
-  @apply bg-active-orange border-dark-grey border;
-}
+  .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-active-orange border-dark-grey border;
+  }
 
-.ui-checkbox-input:checked + .ui-checkbox-styled svg {
-  @apply block;
-}
+  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
+    @apply block;
+  }
 
-.ui-textarea {
-  @apply font-sans font-medium text-cool-black text-p1;
-  @apply p-input mb-16;
-  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
-  @apply hover:bg-white hover:shadow-input hover:border-transparent;
-  @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
-}
+  .ui-textarea {
+    @apply font-sans font-medium text-cool-black text-p1;
+    @apply p-input mb-16;
+    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+  }
 
-.ui-textarea::placeholder {
-  /* CSS vars don't work in ::placeholder in Webkit :( */
-  /* color: var(--text-dark-grey); */
-  color: #76767c;
+  .ui-textarea::placeholder {
+    /* CSS vars don't work in ::placeholder in Webkit :( */
+    /* color: var(--text-dark-grey); */
+    color: #76767c;
+  }
 }

package/src/core/styles/layout.css

@@ -1,19 +1,21 @@
-.ui-standard-container {
-  @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
-}
+@layer components {
+  .ui-standard-container {
+    @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
+  }
 
-.ui-grid-gap {
-  @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
-}
+  .ui-grid-gap {
+    @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
+  }
 
-.ui-grid-gap-x {
-  @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
-}
+  .ui-grid-gap-x {
+    @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
+  }
 
-.ui-grid-px {
-  @apply px-24 sm:px-32 md:px-40 lg:px-64;
-}
+  .ui-grid-px {
+    @apply px-24 sm:px-32 md:px-40 lg:px-64;
+  }
 
-.ui-grid-mx {
-  @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
+  .ui-grid-mx {
+    @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
+  }
 }