@ably/ui 14.0.0-dev.58ef698 → 14.0.0-dev.64a4085

package/src/core/{MeganavControlMobileDropdown/component.tsx → MeganavControlMobileDropdown.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import { MeganavTheme } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import { MeganavTheme } from "./Meganav";
 
 const MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (
   <button

package/src/core/{MeganavControlMobilePanelClose/component.tsx → MeganavControlMobilePanelClose.tsx}

@@ -1,7 +1,6 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-
+import Icon from "./Icon";
 type MeganavControlMobilePanelCloseProps = {
   ariaControls: string;
   displayHr?: boolean;

package/src/core/{MeganavControlMobilePanelOpen/component.tsx → MeganavControlMobilePanelOpen.tsx}

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 
-import Icon from "../Icon/component.tsx";
-
+import Icon from "./Icon";
 type MeganavControlMobilePanelOpenProps = {
   ariaControls: string;
   children: ReactNode;

package/src/core/{MeganavItemsDesktop/component.tsx → MeganavItemsDesktop.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 
-import MeganavData from "../Meganav/component.json";
-import MeganavControl from "../MeganavControl/component.tsx";
-import { AbsUrl, MeganavPanels, MeganavTheme } from "../Meganav/component.tsx";
+import MeganavData from "./Meganav/component.json";
+import MeganavControl from "./MeganavControl";
+import { AbsUrl, MeganavPanels, MeganavTheme } from "./Meganav";
 
 type MeganavDesktopItems = {
   panels: MeganavPanels;

package/src/core/{MeganavItemsMobile/component.tsx → MeganavItemsMobile.tsx}

@@ -1,19 +1,19 @@
 import React from "react";
 
-import SignOutLink from "../SignOutLink/component.tsx";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
-import Icon from "../Icon/component.tsx";
-import MeganavData from "../Meganav/component.json";
-import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.tsx";
-import MeganavControlMobilePanelClose from "../MeganavControlMobilePanelClose/component.tsx";
-import MeganavControlMobilePanelOpen from "../MeganavControlMobilePanelOpen/component.tsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
+import SignOutLink from "./SignOutLink";
+import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
+import Icon from "./Icon";
+import MeganavData from "./Meganav/component.json";
+import MeganavControlMobileDropdown from "./MeganavControlMobileDropdown";
+import MeganavControlMobilePanelClose from "./MeganavControlMobilePanelClose";
+import MeganavControlMobilePanelOpen from "./MeganavControlMobilePanelOpen";
+import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
 import {
   AbsUrl,
   MeganavPanels,
   MeganavSessionState,
   MeganavTheme,
-} from "../Meganav/component.tsx";
+} from "./Meganav";
 
 type MeganavItemsMobileProps = {
   panels: MeganavPanels;

package/src/core/{MeganavItemsSignedIn/component.tsx → MeganavItemsSignedIn.tsx}

@@ -1,13 +1,9 @@
 import React from "react";
 
-import MeganavControl from "../MeganavControl/component.tsx";
-import SignOutLink from "../SignOutLink/component.tsx";
-import MeganavSearch from "../MeganavSearch/component.tsx";
-import {
-  AbsUrl,
-  MeganavSessionState,
-  MeganavTheme,
-} from "../Meganav/component.tsx";
+import MeganavControl from "./MeganavControl";
+import SignOutLink from "./SignOutLink";
+import MeganavSearch from "./MeganavSearch";
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "./Meganav";
 
 type MeganavItemsSignedIn = {
   sessionState: MeganavSessionState;

package/src/core/{MeganavSearch/component.tsx → MeganavSearch.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import MeganavSearchPanel from "../MeganavSearchPanel/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import MeganavSearchPanel from "./MeganavSearchPanel";
+import { AbsUrl } from "./Meganav";
 
 const MeganavSearch = ({ absUrl }: { absUrl: AbsUrl }) => (
   <>

package/src/core/{MeganavSearchPanel/component.tsx → MeganavSearchPanel.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
 
-import Icon from "../Icon/component.tsx";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.tsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import Icon from "./Icon";
+import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
+import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
+import { AbsUrl } from "./Meganav";
 
 const MeganavSearchPanel = ({ absUrl }: { absUrl: AbsUrl }) => (
   <section className="ui-meganav-content grid-cols-12">

package/src/core/{MeganavSearchSuggestions/component.tsx → MeganavSearchSuggestions.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import FeaturedLink from "../FeaturedLink/component.tsx";
-import { AbsUrl } from "../Meganav/component.tsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
 type MeganavSearchSuggestionsProps = {
   absUrl: AbsUrl;

package/src/core/Notice/component.js

@@ -3,7 +3,7 @@ import Cookie from "js-cookie";
 import throttle from "lodash.throttle";
 
 import { queryId } from "../dom-query";
-import { FLASH_DATA_ID } from "../Flash/component.tsx";
+import { FLASH_DATA_ID } from "../Flash";
 
 const COOKIE_EXPIRY = 90;
 const COLLAPSE_TRIGGER_DISTANCE = 5;

package/src/core/{Notice/component.tsx → Notice.tsx}

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

package/src/core/{SignOutLink/component.tsx → SignOutLink.tsx}

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, ReactNode, useRef } from "react";
-import { AbsUrl } from "../Meganav/component.tsx";
+import { AbsUrl } from "./Meganav";
 
 type SignOutLinkProps = {
   token: string;

package/src/core/Slider/Slider.stories.tsx

@@ -1,45 +1,98 @@
-import React, { ReactNode } from "react";
-import Slider from "./component.tsx";
+import React from "react";
+import Slider from "../Slider";
+import Icon from "../Icon";
 
-export default {
-  title: "Components/Slider",
-  component: Slider,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-};
+const Slide = ({ name }: { name: string }) => (
+  <div className="relative ">
+    <div className="relative w-full sm:w-[560px] md:w-[784px] lg:w-[960px] bg-white overflow-hidden  flex gap-40 rounded-3xl shadow-container-subtle">
+      <div className="w-full md:w-2/3 flex flex-col gap-24 pr-40 md:pr-0 pt-40 pl-40 pb-40 sm:pb-[120px] md:pb-40">
+        <h2 className="ui-text-h2 font-medium text-neutral-1000">
+          “Ably seamlessly absorbs sudden bursts in load during unexpected
+          client events. The integration was easy and we were live in under a
+          month.”
+        </h2>
+        <div className="flex flex-col sm:flex-row gap-32">
+          <div className="flex gap-8">
+            <div className="static self-center sm:absolute sm:-bottom-48 sm:-right-[56px] rounded-full bg-gradient-to-l from-neutral-200 to-50% to-neutral-500 w-[48px] h-[48px] sm:w-[201px] sm:h-[201px] md:w-[257px] md:h-[257px] lg:w-[280px] lg:h-[280px] overflow-hidden flex items-center justify-center sm:border-[16px] border-neutral-200">
+              <img src="https://picsum.photos/id/64/200" alt="test-image" />
+            </div>
+            <div className="sm:py-16">
+              <p className="ui-text-p1 text-neutral-1300">{name}</p>
+              <p className="ui-text-p3 text-neutral-800">
+                Co-Founder & Technical Leader
+              </p>
+            </div>
+          </div>
 
-const Slide = ({ children }: { children: ReactNode }) => (
-  <div className="h-full p-24 bg-white rounded">
-    <p className="ui-text-p2 text-center">{children}</p>
+          <div className="w-[80px] h-1 sm:w-1 sm:h-full bg-neutral-500"></div>
+          <div className="flex items-center gap-4">
+            <img src="https://picsum.photos/id/145/40" alt="test-image" />
+            <p className="ui-text-h4 font-bold">Mentimeter</p>
+          </div>
+        </div>
+        <a href="/case-study" className="ui-btn self-start">
+          Read case study
+          <Icon
+            name="icon-gui-arrow-right"
+            size="1.25rem"
+            additionalCSS="ml-4"
+          />
+        </a>
+      </div>
+    </div>
+
+    <div className="absolute h-256 -z-10 -bottom-48 -left-36 w-1/5 rounded-full blur-xl opacity-50 transform -rotate-45 bg-gradient-to-bl from-bg-glow-green to-bg-glow-teal"></div>
+    <div className="absolute h-256 -z-10 -top-48 -right-48 w-3/5 rounded-full blur-xl opacity-50 transform rotate-12 bg-gradient-to-br from-bg-glow-green to-bg-glow-teal"></div>
   </div>
 );
 
 const slides = [
-  <Slide key="1">
-    Powers live chat, updates, analytics, and composition for millions of users.
-  </Slide>,
-  <Slide key="2">
-    Powers virtual venues for millions of event attendees around the world.
-  </Slide>,
-  <Slide key="3">
-    Provides 5 million daily users with live financial commentary and stock
-    tickers.
-  </Slide>,
-  <Slide key="4">Monitors live car performance data across the USA.</Slide>,
+  <Slide key="1" name={"Johan Bengtsson"} />,
+  <Slide key="2" name={"Mirko Bergman"} />,
+  <Slide key="3" name={"Stefania Lombardo"} />,
+  <Slide key="4" name={"Aleksandar Kostadinov"} />,
 ];
 
-export const SliderOnAllBreakpoints = {
+export default {
+  title: "Components/Slider",
+  component: Slider,
+  args: {
+    children: slides,
+    options: {
+      interval: 10000,
+      intervalIndicator: true,
+      controlPosition: "floating",
+    },
+  },
+};
+
+export const FloatingControlPosition = {
+  args: {
+    children: slides,
+    options: {
+      interval: 10000,
+      intervalIndicator: true,
+      controlPosition: "floating",
+    },
+  },
+};
+
+export const InlineControlPosition = {
   args: {
-    slides,
+    options: {
+      interval: 10000,
+      intervalIndicator: true,
+      controlPosition: "inline",
+    },
   },
 };
 
-export const SliderOnSmallBreakpointOnly = {
+export const WithoutIntervalIndicator = {
   args: {
-    slides,
-    classes: `sm:grid-cols-${slides.length / 2} md:grid-cols-${slides.length}`,
-    mqEnableThreshold: () => !window.matchMedia("(min-width: 48rem)").matches,
+    options: {
+      interval: 10000,
+      intervalIndicator: false,
+      controlPosition: "floating",
+    },
   },
 };

package/src/core/Slider/component.css

@@ -4,3 +4,35 @@
 
   @apply leading-none px-4 relative;
 }
+
+@keyframes fillAnimation {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+.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%);
+  }
+  .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;
+}

package/src/core/Slider.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect, useRef, ReactNode } from "react";
+import Icon from "./Icon";
+import "./Slider/component.css";
+
+interface SliderProps {
+  children: ReactNode[];
+  options?: {
+    interval?: number;
+    controlPosition?: "inline" | "floating";
+    intervalIndicator?: boolean;
+  };
+}
+
+interface SliderIndicatorProps {
+  numSlides: number;
+  activeIndex: number;
+  interval: number;
+  intervalIndicator?: boolean;
+  isInline?: boolean;
+}
+
+const SlideIndicator = ({
+  numSlides,
+  activeIndex,
+  interval,
+  intervalIndicator,
+  isInline,
+}: SliderIndicatorProps) => {
+  return (
+    <ul
+      className={`flex gap-4 left-1/2 ${
+        isInline ? "bottom-0" : "absolute -bottom-40 transform -translate-x-1/2"
+      }`}
+    >
+      {Array.from({ length: numSlides }, (_, i) =>
+        intervalIndicator ? (
+          <li
+            key={i}
+            className="relative w-40 h-4 mx-1 rounded-full bg-neutral-500"
+          >
+            {i === activeIndex && (
+              <span
+                className="absolute inset-0 rounded-full bg-active-orange"
+                style={{
+                  animation: `fillAnimation ${interval}ms linear`,
+                }}
+              ></span>
+            )}
+          </li>
+        ) : (
+          <li key={i}>
+            <span
+              className={`ui-slider-marker ${
+                i === activeIndex ? "text-active-orange" : "text-cool-black"
+              }`}
+              data-id="slider-marker"
+            >
+              &#x2b24;
+            </span>
+          </li>
+        )
+      )}
+    </ul>
+  );
+};
+
+const Slider = ({ children, options }: SliderProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [touchStartX, setTouchStartX] = useState(0);
+  const [touchEndX, setTouchEndX] = useState(0);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const isInline = options?.controlPosition === "inline";
+
+  const next = () => {
+    setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
+    resetInterval();
+  };
+
+  const prev = () => {
+    setActiveIndex((prevIndex) =>
+      prevIndex > 0 ? prevIndex - 1 : children.length - 1
+    );
+    resetInterval();
+  };
+
+  const resetInterval = () => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    timerRef.current = setInterval(next, options?.interval ?? 10000);
+  };
+
+  const handleTouchStart = (e) => {
+    setTouchStartX(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e) => {
+    setTouchEndX(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (touchStartX - touchEndX > 50) {
+      next();
+    }
+    if (touchStartX - touchEndX < -50) {
+      prev();
+    }
+  };
+
+  useEffect(() => {
+    resetInterval();
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [children.length, options?.interval]);
+
+  return (
+    <div
+      className="relative"
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      <div className="overflow-hidden w-full py-40">
+        <div
+          className="flex items-center transition-transform ease-in-out duration-500"
+          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
+        >
+          {children.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,
+              }}
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className={`flex items-center pointer-events-none ${
+          isInline
+            ? "ui-standard-container justify-center gap-24"
+            : "sm:flex sm:absolute inset-0 justify-between"
+        }`}
+      >
+        <button
+          className={`${
+            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
+          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}
+          onClick={prev}
+        >
+          <div className="ui-icon-cta-holder flex gap-4">
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-left" size="1.5rem" />
+            </div>
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-left" size="1.5rem" />
+            </div>
+          </div>
+        </button>
+
+        <SlideIndicator
+          numSlides={children.length}
+          activeIndex={activeIndex}
+          interval={options?.interval ?? 10000}
+          intervalIndicator={options?.intervalIndicator}
+          isInline={isInline}
+        />
+
+        <button
+          className={`${
+            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
+          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}
+          onClick={next}
+        >
+          <div className="ui-icon-cta-holder flex gap-4">
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-right" size="1.5rem" />
+            </div>
+            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
+              <Icon name="icon-gui-arrow-right" size="1.5rem" />
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Slider;

package/src/core/Table/Table.tsx

@@ -1,28 +1,57 @@
-import React, { PropsWithChildren, ReactElement, cloneElement } from "react";
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  TableHTMLAttributes,
+  cloneElement,
+} from "react";
 
 type TableProps = {
   id?: string;
 };
 
-export const Table = ({ id, children }: PropsWithChildren<TableProps>) => (
-  <table id={id} className="ui-standard-container mb-4 sm:table-fixed">
+export const Table = ({
+  id,
+  children,
+  ...rest
+}: PropsWithChildren<TableProps & TableHTMLAttributes<HTMLTableElement>>) => (
+  <table
+    id={id}
+    {...rest}
+    className={`ui-standard-container mb-4 sm:table-fixed ${
+      rest?.className ?? ""
+    }`}
+  >
     {children}
   </table>
 );
 
-export const TableBody = ({ children }: PropsWithChildren) => (
-  <tbody>{children}</tbody>
+export const TableBody = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
+  <tbody {...rest}>{children}</tbody>
 );
 
-export const TableHeader = ({ children }: PropsWithChildren) => (
-  <thead className="sticky bg-white z-10 top-0" key="sticky-block">
+export const TableHeader = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
+  <thead
+    {...rest}
+    className={`sticky bg-white z-10 top-0 ${rest?.className ?? ""}`}
+  >
     {cloneElement(children as ReactElement, { isHeader: true })}
   </thead>
 );
 
-export const TableRowHeader = ({ children }: PropsWithChildren) => (
+export const TableRowHeader = ({
+  children,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (
   <tr
-    className="-ml-24 mt-8 sm:ml-0 sm:mt-0 ui-text-overline1 !text-cool-black  bg-light-grey sm:sticky z-10"
+    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${
+      rest?.className ?? ""
+    }`}
     style={{ top: "4rem" }}
   >
     {cloneElement(children as ReactElement, { isRowHeader: true })}