@ably/ui 14.0.0-dev.f6c8d86 → 14.0.0

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 "../core/Icon.tsx";
-import "./Slider/component.css";
+import Icon from "./Icon";
 
 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) =>
@@ -39,12 +40,12 @@ const SlideIndicator = ({
             className="relative w-40 h-4 mx-1 rounded-full bg-neutral-500"
           >
             {i === activeIndex && (
-              <li
+              <span
                 className="absolute inset-0 rounded-full bg-active-orange"
                 style={{
                   animation: `fillAnimation ${interval}ms linear`,
                 }}
-              ></li>
+              ></span>
             )}
           </li>
         ) : (
@@ -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>

package/src/core/Table/TableCell.tsx

@@ -1,45 +1,15 @@
 import React, { PropsWithChildren } from "react";
-import Icon from "../Icon";
 
 type TableCellProps = {
   isRowHeader?: boolean;
 } & React.TdHTMLAttributes<HTMLTableCellElement>;
 
-const Supported = () => (
-  <Icon
-    name="icon-gui-check-circled-fill"
-    size="1.5rem"
-    color="text-gui-success"
-    additionalCSS="flex-grow-0 flex-shrink-0"
-    data-testid="supported-icon"
-  />
-);
-
-const Unsupported = () => (
-  <Icon
-    name="icon-gui-cross-circled-fill"
-    size="1.5rem"
-    color="text-gui-error"
-    additionalCSS="flex-grow-0 flex-shrink-0"
-    data-testid="unsupported-icon"
-  />
-);
-
-const Partial = () => (
-  <Icon
-    name="icon-gui-partial"
-    size="1.5rem"
-    additionalCSS="flex-grow-0 flex-shrink-0"
-    data-testid="partial-icon"
-  />
-);
-
 const LabelCell = ({
   children,
   ...rest
 }: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => {
   const classes = `
-    ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${
+    ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${
       rest?.className ?? ""
     }
   `;
@@ -98,12 +68,4 @@ const CtaCell = ({
   </td>
 );
 
-export {
-  TableCell,
-  LabelCell,
-  HeaderCell,
-  CtaCell,
-  Supported,
-  Unsupported,
-  Partial,
-};
+export { TableCell, LabelCell, HeaderCell, CtaCell };

package/src/core/Table/data.tsx

@@ -1,8 +1,28 @@
 import React, { Fragment } from "react";
 
 import Tooltip from "../Tooltip";
-import { Supported, Unsupported } from "./TableCell";
 import Table from "../Table";
+import Icon from "../Icon";
+
+const Supported = () => (
+  <Icon
+    name="icon-gui-check-circled-fill"
+    size="1.5rem"
+    color="text-gui-success"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="supported-icon"
+  />
+);
+
+const Unsupported = () => (
+  <Icon
+    name="icon-gui-cross-circled-fill"
+    size="1.5rem"
+    color="text-gui-error"
+    additionalCSS="flex-grow-0 flex-shrink-0"
+    data-testid="unsupported-icon"
+  />
+);
 
 const testRow = (index) => ({
   label: `Label ${index + 1}`,

package/src/core/Table.tsx

@@ -1,14 +1,6 @@
 import { Table, TableRowHeader, TableHeader, TableBody } from "./Table/Table";
 import { TableRow } from "./Table/TableRow";
-import {
-  TableCell,
-  LabelCell,
-  HeaderCell,
-  CtaCell,
-  Supported,
-  Unsupported,
-  Partial,
-} from "./Table/TableCell";
+import { TableCell, LabelCell, HeaderCell, CtaCell } from "./Table/TableCell";
 
 export default {
   Root: Table,
@@ -20,7 +12,4 @@ export default {
   RowHeader: TableRowHeader,
   Body: TableBody,
   Header: TableHeader,
-  Supported,
-  Unsupported,
-  Partial,
 };

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