@ably/ui 14.0.0-dev.3f64b93 → 14.0.0-dev.450e302

package/src/core/Expander.tsx

@@ -1,31 +1,40 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 
 type ExpanderProps = {
-  height?: number;
+  heightThreshold?: number;
   className?: string;
   fadeClassName?: string;
 };
 
 const Expander = ({
-  height = 200,
+  heightThreshold = 200,
   className,
   fadeClassName,
   children,
 }: PropsWithChildren<ExpanderProps>) => {
   const innerRef = useRef<HTMLDivElement>(null);
-  const [contentHeight, setContentHeight] = useState(height);
+  const [showControls, setShowControls] = useState(false);
+  const [height, setHeight] = useState<number | "auto">(heightThreshold);
   const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
-    setContentHeight(innerRef.current?.clientHeight ?? height);
-  }, [height, expanded]);
+    const contentHeight = innerRef.current?.clientHeight ?? heightThreshold;
 
-  const showControls = contentHeight > height;
+    if (contentHeight < heightThreshold) {
+      setHeight("auto");
+    } else if (expanded) {
+      setHeight(contentHeight);
+    } else {
+      setHeight(heightThreshold);
+    }
+
+    setShowControls(contentHeight >= heightThreshold);
+  }, [heightThreshold, expanded]);
 
   return (
     <>
       <div
-        style={{ height: expanded ? contentHeight : height }}
+        style={{ height }}
         className={`overflow-hidden transition-all relative ${className ?? ""}`}
       >
         {showControls && !expanded && (
@@ -42,7 +51,7 @@ const Expander = ({
           onClick={() => setExpanded(!expanded)}
           onKeyDown={(e) => e.key === "Enter" && setExpanded(!expanded)}
           tabIndex={0}
-          className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"
+          className="mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light"
         >
           {expanded ? "View less -" : "View all +"}
         </div>

package/src/core/Flash/component.css

@@ -1,23 +1,25 @@
-.ui-flash {
-  @apply w-full fixed;
-  top: 5.5rem;
-  z-index: calc(var(--stacking-context-page-meganav) - 10);
-  transition: margin-top 200ms;
-}
+@layer components {
+  .ui-flash {
+    @apply w-full fixed;
+    top: 5.5rem;
+    z-index: calc(var(--stacking-context-page-meganav) - 10);
+    transition: margin-top 200ms;
+  }
 
-.ui-flash-message {
-  @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-  transition: opacity 200ms, transform 200ms, height 200ms 200ms,
-    margin-top 200ms 200ms;
-  transform: translateY(-200%) rotateX(-90deg);
-}
+  .ui-flash-message {
+    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
+    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+      margin-top 200ms 200ms;
+    transform: translateY(-200%) rotateX(-90deg);
+  }
 
-/* dynamic content inside flash, can't add classes */
-.ui-flash-text a {
-  @apply underline;
-}
+  /* dynamic content inside flash, can't add classes */
+  .ui-flash-text a {
+    @apply underline;
+  }
 
-.ui-flash-message-enter {
-  @apply opacity-100;
-  transform: translateY(0) rotateX(0);
+  .ui-flash-message-enter {
+    @apply opacity-100;
+    transform: translateY(0) rotateX(0);
+  }
 }

package/src/core/Flash.tsx

@@ -5,7 +5,6 @@ import { nanoid } from "nanoid/non-secure";
 import { getRemoteDataStore } from "./remote-data-store.js";
 import ConnectStateWrapper from "./ConnectStateWrapper";
 import Icon from "./Icon";
-import "./Flash/component.css";
 
 type FlashProps = {
   id: string;

package/src/core/Footer/component.css

@@ -1,31 +1,33 @@
-.ui-footer-col-title {
-  @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
-}
+@layer components {
+  .ui-footer-col-title {
+    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+  }
 
-.ui-footer-menu-row-link {
-  @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
-}
+  .ui-footer-menu-row-link {
+    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
+  }
 
-.ui-footer-link {
-  @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
-}
+  .ui-footer-link {
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
+  }
 
-.ui-footer-compliance-text {
-  font-size: 12px;
-}
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
 
-.ui-footer-tick-icon {
-  min-width: 1.5rem;
-}
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
 
-@media (max-width: 1040px) {
-  .ui-footer-bottom-links {
-    @apply pb-40;
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
   }
-}
 
-@media screen {
-  .ui-footer-glassdoor {
-    display: none;
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
   }
 }

package/src/core/Footer.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import Icon from "./Icon";
 import _absUrl from "./url-base.js";
-import "./Footer/component.css";
 
 type FooterProps = {
   paths: {

package/src/core/Meganav/component.css

@@ -1,112 +1,114 @@
-.ui-meganav-wrapper {
-  /* Define values for new stacking context defined by position: fixed */
-  --stacking-context-meganav-dropdown: 10;
-  --stacking-context-meganav-mobile-panel: 20;
-
-  z-index: var(--stacking-context-page-meganav);
-
-  @apply fixed top-0 w-full;
-  @apply antialiased font-sans transition-colors;
-}
-
-.ui-meganav {
-  height: var(--ui-meganav-height);
-
-  @apply flex justify-between items-center max-w-screen-xl mx-auto;
-}
-
-.ui-meganav-panel,
-.ui-meganav-mobile-dropdown,
-.ui-meganav-panel-account {
-  z-index: var(--stacking-context-meganav-dropdown);
-
-  @apply absolute left-0 right-0;
-  @apply border-mid-grey border-t shadow-container;
-}
-
-.ui-meganav-panel {
-  @apply bg-white;
-}
-
-.ui-meganav-panel-mobile {
-  z-index: var(--stacking-context-meganav-mobile-panel);
-
-  /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
-  -webkit-overflow-scrolling: auto;
-
-  @apply bg-white pt-16 border-0;
-  @apply border-mid-grey border-t shadow-container;
-  @apply fixed top-64 left-0 right-0 overflow-y-auto;
-}
-
-.ui-meganav-panel-account {
-  left: auto;
-  min-width: 20rem;
-  @apply bg-white rounded-t-none;
-}
-
-.ui-meganav-panel-split-bg {
-  background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
-}
-
-.ui-meganav-link {
-  @apply text-menu2 font-bold font-sans;
-  @apply mr-12 lg:mr-24 px-0 py-20;
-  @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
-  @apply transition-colors;
-}
-
-.ui-meganav-item {
-  flex: 1 0 auto;
-}
-
-.ui-meganav-mobile-link {
-  @apply p-menu-row relative -left-8 w-extend-8;
-  @apply text-menu2 font-mono font-medium block text-cool-black text-left;
-  @apply flex items-center;
-  @apply focus:text-gui-focus focus:outline-none;
-}
-
-.ui-meganav-account-link {
-  @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
-}
-
-.ui-meganav-content {
-  @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
-  @apply grid grid-cols-1;
-  @apply px-24 md:px-32 lg:px-32 xl:px-64;
-}
-
-/* This is implemented not as padding so we can change the color of just this space, while keeping the grid
+@layer components {
+  .ui-meganav-wrapper {
+    /* Define values for new stacking context defined by position: fixed */
+    --stacking-context-meganav-dropdown: 10;
+    --stacking-context-meganav-mobile-panel: 20;
+
+    z-index: var(--stacking-context-page-meganav);
+
+    @apply fixed top-0 w-full;
+    @apply antialiased font-sans transition-colors;
+  }
+
+  .ui-meganav {
+    height: var(--ui-meganav-height);
+
+    @apply flex justify-between items-center max-w-screen-xl mx-auto;
+  }
+
+  .ui-meganav-panel,
+  .ui-meganav-mobile-dropdown,
+  .ui-meganav-panel-account {
+    z-index: var(--stacking-context-meganav-dropdown);
+
+    @apply absolute left-0 right-0;
+    @apply border-mid-grey border-t shadow-container;
+  }
+
+  .ui-meganav-panel {
+    @apply bg-white;
+  }
+
+  .ui-meganav-panel-mobile {
+    z-index: var(--stacking-context-meganav-mobile-panel);
+
+    /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
+    -webkit-overflow-scrolling: auto;
+
+    @apply bg-white pt-16 border-0;
+    @apply border-mid-grey border-t shadow-container;
+    @apply fixed top-64 left-0 right-0 overflow-y-auto;
+  }
+
+  .ui-meganav-panel-account {
+    left: auto;
+    min-width: 20rem;
+    @apply bg-white rounded-t-none;
+  }
+
+  .ui-meganav-panel-split-bg {
+    background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
+  }
+
+  .ui-meganav-link {
+    @apply text-menu2 font-bold font-sans;
+    @apply mr-12 lg:mr-24 px-0 py-20;
+    @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
+    @apply transition-colors;
+  }
+
+  .ui-meganav-item {
+    flex: 1 0 auto;
+  }
+
+  .ui-meganav-mobile-link {
+    @apply p-menu-row relative -left-8 w-extend-8;
+    @apply text-menu2 font-mono font-medium block text-cool-black text-left;
+    @apply flex items-center;
+    @apply focus:text-gui-focus focus:outline-none;
+  }
+
+  .ui-meganav-account-link {
+    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
+  }
+
+  .ui-meganav-content {
+    @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
+    @apply grid grid-cols-1;
+    @apply px-24 md:px-32 lg:px-32 xl:px-64;
+  }
+
+  /* This is implemented not as padding so we can change the color of just this space, while keeping the grid
      as close to the designs as possible */
-.ui-meganav-content-spacer {
-  @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
-}
+  .ui-meganav-content-spacer {
+    @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
+  }
 
-.ui-meganav-media {
-  @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
-}
+  .ui-meganav-media {
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+  }
 
-.ui-meganav-media-with-image {
-  grid-template-columns: max-content 1fr;
-  grid-template-rows: min-content 1fr;
+  .ui-meganav-media-with-image {
+    grid-template-columns: max-content 1fr;
+    grid-template-rows: min-content 1fr;
 
-  @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
-  @apply grid gap-x-16;
-}
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply grid gap-x-16;
+  }
 
-.ui-meganav-media-heading {
-  @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
-}
+  .ui-meganav-media-heading {
+    @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
+  }
 
-.ui-meganav-media-copy {
-  @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
-}
+  .ui-meganav-media-copy {
+    @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
+  }
 
-.ui-meganav-overline {
-  @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
-}
+  .ui-meganav-overline {
+    @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
+  }
 
-.ui-meganav-hr {
-  @apply my-0 text-mid-grey;
+  .ui-meganav-hr {
+    @apply my-0 text-mid-grey;
+  }
 }

package/src/core/Meganav/component.js

@@ -1,7 +1,5 @@
 import throttle from "lodash.throttle";
 
-import "./component.css";
-
 // Glossary:
 // item - is the element which contains both the control and the panel - these are adjacent
 // control - interactive element that controls showing and hiding of dropdown or panel

package/src/core/Meganav.tsx

@@ -4,7 +4,6 @@ import { connectState } from "./remote-data-store.js";
 import { selectSessionData } from "./remote-session-data.js";
 
 import Logo from "./Logo";
-import "./Meganav/component.css";
 import MeganavData from "./Meganav/component.json";
 import MeganavScripts from "./Meganav/component.js";
 import MeganavItemsDesktop from "./MeganavItemsDesktop";

package/src/core/Notice/component.css

@@ -1,5 +1,7 @@
-.ui-announcement {
-  @apply font-sans;
-  max-height: 37.5rem;
-  transition: max-height 300ms;
+@layer components {
+  .ui-announcement {
+    @apply font-sans;
+    max-height: 37.5rem;
+    transition: max-height 300ms;
+  }
 }

package/src/core/Notice/component.js

@@ -1,4 +1,3 @@
-import "./component.css";
 import Cookie from "js-cookie";
 import throttle from "lodash.throttle";
 

package/src/core/Notice.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useEffect } from "react";
 
 import NoticeScripts from "./Notice/component.js";
-import "./Notice/component.css";
 import Icon from "./Icon";
 type ContentWrapperProps = {
   buttonLink: string;

package/src/core/Slider/component.css

@@ -1,38 +1,40 @@
-.ui-slider-marker {
-  font-size: 0.5rem;
-  top: -1px;
+@layer components {
+  .ui-slider-marker {
+    font-size: 0.5rem;
+    top: -1px;
 
-  @apply leading-none px-4 relative;
-}
-
-@keyframes fillAnimation {
-  0% {
-    width: 0%;
-  }
-  100% {
-    width: 100%;
+    @apply leading-none px-4 relative;
   }
-}
-
-.ui-icon-cta {
-  @apply cursor-pointer overflow-hidden;
-  @apply rounded border-2 border-mid-grey hover:border-active-orange;
-  transition: all 0.4s;
-}
 
-@screen sm {
-  .ui-icon-cta-left:hover .ui-icon-cta-holder {
-    transform: translateX(-120%);
+  @keyframes fillAnimation {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
   }
-  .ui-icon-cta-right .ui-icon-cta-holder {
-    transform: translateX(-120%);
+
+  .ui-icon-cta {
+    @apply cursor-pointer overflow-hidden;
+    @apply rounded border-2 border-mid-grey hover:border-active-orange;
+    transition: all 0.4s;
   }
-  .ui-icon-cta-right:hover .ui-icon-cta-holder {
-    transform: translateX(0%);
+
+  @screen sm {
+    .ui-icon-cta-left:hover .ui-icon-cta-holder {
+      transform: translateX(-120%);
+    }
+    .ui-icon-cta-right .ui-icon-cta-holder {
+      transform: translateX(-120%);
+    }
+    .ui-icon-cta-right:hover .ui-icon-cta-holder {
+      transform: translateX(0%);
+    }
   }
-}
 
-.ui-icon-cta-holder {
-  @apply w-full h-full;
-  transition: all 0.4s;
+  .ui-icon-cta-holder {
+    @apply w-full h-full;
+    transition: all 0.4s;
+  }
 }

package/src/core/Slider/component.js

@@ -1,5 +1,3 @@
-import "./component.css";
-
 import throttle from "lodash.throttle";
 
 import { queryId, queryIdAll } from "../dom-query";

package/src/core/Slider.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef, ReactNode } from "react";
 import Icon from "./Icon";
-import "./Slider/component.css";
 
 interface SliderProps {
   children: ReactNode[];
@@ -19,6 +18,8 @@ interface SliderIndicatorProps {
   isInline?: boolean;
 }
 
+const SLIDE_TRANSITION_LENGTH = 300;
+
 const SlideIndicator = ({
   numSlides,
   activeIndex,
@@ -29,7 +30,7 @@ const SlideIndicator = ({
   return (
     <ul
       className={`flex gap-4 left-1/2 ${
-        isInline ? "bottom-0" : "absolute -bottom-40 transform -translate-x-1/2"
+        isInline ? "bottom-0" : "absolute bottom-0 transform -translate-x-1/2"
       }`}
     >
       {Array.from({ length: numSlides }, (_, i) =>
@@ -64,24 +65,43 @@ const SlideIndicator = ({
   );
 };
 
+const setupSlides = (children: ReactNode[], activeIndex: number) => [
+  children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],
+  children[activeIndex],
+  children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],
+];
+
 const Slider = ({ children, options }: SliderProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const [touchStartX, setTouchStartX] = useState(0);
   const [touchEndX, setTouchEndX] = useState(0);
+  const [slides, setSlides] = useState<ReactNode[]>(
+    setupSlides(children, activeIndex)
+  );
+  const [translationCoefficient, setTranslationCoefficient] = useState(0);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const [slideLock, setSlideLock] = useState(false);
 
   const isInline = options?.controlPosition === "inline";
 
   const next = () => {
-    setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
-    resetInterval();
+    if (!slideLock) {
+      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
+      setTranslationCoefficient(1);
+      resetInterval();
+      setSlideLock(true);
+    }
   };
 
   const prev = () => {
-    setActiveIndex((prevIndex) =>
-      prevIndex > 0 ? prevIndex - 1 : children.length - 1
-    );
-    resetInterval();
+    if (!slideLock) {
+      setActiveIndex((prevIndex) =>
+        prevIndex > 0 ? prevIndex - 1 : children.length - 1
+      );
+      setTranslationCoefficient(-1);
+      resetInterval();
+      setSlideLock(true);
+    }
   };
 
   const resetInterval = () => {
@@ -113,6 +133,14 @@ const Slider = ({ children, options }: SliderProps) => {
     };
   }, [children.length, options?.interval]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setSlides(setupSlides(children, activeIndex));
+      setTranslationCoefficient(0);
+      setSlideLock(false);
+    }, SLIDE_TRANSITION_LENGTH);
+  }, [activeIndex]);
+
   return (
     <div
       className="relative"
@@ -120,18 +148,21 @@ const Slider = ({ children, options }: SliderProps) => {
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
-      <div className="overflow-hidden w-full py-40">
+      <div className="overflow-y-visible overflow-x-clip w-full py-40">
         <div
-          className="flex items-center transition-transform ease-in-out duration-500"
-          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
+          className={`flex items-center ${
+            translationCoefficient !== 0
+              ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`
+              : ""
+          } `}
+          style={{
+            transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,
+          }}
         >
-          {children.map((child, index) => (
+          {slides.map((child, index) => (
             <div
               key={index}
-              className="w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500"
-              style={{
-                opacity: activeIndex === index ? 1 : 0.1,
-              }}
+              className="w-full flex-shrink-0 flex justify-center sm:px-60"
             >
               {child}
             </div>
@@ -142,7 +173,7 @@ const Slider = ({ children, options }: SliderProps) => {
       <div
         className={`flex items-center pointer-events-none ${
           isInline
-            ? "ui-standard-container justify-center gap-24"
+            ? "ui-standard-container justify-center gap-24 -mt-16"
             : "sm:flex sm:absolute inset-0 justify-between"
         }`}
       >

package/src/core/Table/Table.tsx

@@ -49,10 +49,9 @@ export const TableRowHeader = ({
   ...rest
 }: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (
   <tr
-    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${
+    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${
       rest?.className ?? ""
     }`}
-    style={{ top: "4rem" }}
   >
     {cloneElement(children as ReactElement, { isRowHeader: true })}
   </tr>