@ably/ui 14.1.0-dev.30520a8 → 14.1.0-dev.708de27

package/src/core/Notice.tsx

@@ -0,0 +1,102 @@
+import React, { ReactNode, useEffect } from "react";
+
+import NoticeScripts from "./Notice/component.js";
+import Icon from "./Icon";
+type ContentWrapperProps = {
+  buttonLink: string;
+  children: ReactNode;
+};
+
+// TODO(jamiehenson):
+// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.
+// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are
+// the ones after the line break.
+type NoticeProps = {
+  buttonLink?: string;
+  buttonLabel?: string;
+  bodyText?: string;
+  title?: string;
+  closeBtn?: boolean;
+  config?: {
+    collapse: boolean;
+    noticeId: string;
+    cookieId: string;
+  };
+  bgColor?: string;
+  textColor?: string;
+
+  bannerContainer?: Element | null;
+  cookieId?: string;
+  noticeId?: string;
+  options?: { collapse: boolean };
+};
+
+const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
+
+const ContentWrapper = ({ buttonLink, children }: ContentWrapperProps) =>
+  buttonLink ? (
+    <a href={buttonLink} className={contentWrapperClasses}>
+      {children}
+    </a>
+  ) : (
+    <div className={contentWrapperClasses}>{children}</div>
+  );
+
+const Notice = ({
+  buttonLink,
+  buttonLabel,
+  bodyText,
+  title,
+  config,
+  closeBtn,
+  bgColor = "bg-gradient-active-orange",
+  textColor = "text-white",
+}: NoticeProps) => {
+  useEffect(() => {
+    NoticeScripts({
+      bannerContainer: document.querySelector('[data-id="ui-notice"]'),
+      cookieId: config?.cookieId,
+      noticeId: config?.noticeId,
+      options: {
+        collapse: config?.collapse || false,
+      },
+    });
+  }, []);
+
+  const wrapperClasses = ["ui-announcement", bgColor, textColor].join(" ");
+
+  return (
+    <div
+      className={wrapperClasses}
+      data-id="ui-notice"
+      style={{ maxHeight: 0, overflow: "hidden" }}
+    >
+      <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
+        <ContentWrapper buttonLink={buttonLink ?? "#"}>
+          <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
+          <span className="pr-4">{bodyText}</span>
+          {buttonLabel && (
+            <span className="underline cursor-pointer whitespace-nowrap">
+              {buttonLabel}
+            </span>
+          )}
+        </ContentWrapper>
+
+        {closeBtn && (
+          <button
+            type="button"
+            className="ml-auto h-20 w-20 border-none bg-none self-baseline"
+          >
+            <Icon
+              name="icon-gui-close"
+              size="1.25rem"
+              color="text-cool-black"
+            />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Notice;

package/src/core/SignOutLink.tsx

@@ -0,0 +1,51 @@
+import React, { MouseEventHandler, ReactNode, useRef } from "react";
+import { AbsUrl } from "./Meganav";
+
+type SignOutLinkProps = {
+  token: string;
+  href: string;
+  text: string;
+  children: ({
+    href,
+    text,
+    onClick,
+  }: {
+    href: string;
+    text: string;
+    onClick: MouseEventHandler<HTMLAnchorElement>;
+  }) => ReactNode;
+  absUrl: AbsUrl;
+};
+
+const SignOutLink = ({
+  token,
+  href,
+  text,
+  children,
+  absUrl,
+}: SignOutLinkProps) => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const onClick = (e) => {
+    formRef.current?.submit();
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <form
+        ref={formRef}
+        method="post"
+        action={absUrl(href)}
+        className="hidden"
+      >
+        <input name="_method" value="delete" type="hidden" />
+        <input name="authenticity_token" value={token} type="hidden" />
+      </form>
+
+      {children({ href, text, onClick })}
+    </>
+  );
+};
+
+export default SignOutLink;

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

@@ -0,0 +1,98 @@
+import React from "react";
+import Slider from "../Slider";
+import Icon from "../Icon";
+
+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>
+
+          <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" name={"Johan Bengtsson"} />,
+  <Slide key="2" name={"Mirko Bergman"} />,
+  <Slide key="3" name={"Stefania Lombardo"} />,
+  <Slide key="4" name={"Aleksandar Kostadinov"} />,
+];
+
+export default {
+  title: "JS 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: {
+    options: {
+      interval: 10000,
+      intervalIndicator: true,
+      controlPosition: "inline",
+    },
+  },
+};
+
+export const WithoutIntervalIndicator = {
+  args: {
+    options: {
+      interval: 10000,
+      intervalIndicator: false,
+      controlPosition: "floating",
+    },
+  },
+};

package/src/core/Slider/component.css

@@ -0,0 +1,40 @@
+@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%;
+    }
+  }
+
+  .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(-100%);
+    }
+    .ui-icon-cta-right .ui-icon-cta-holder {
+      transform: translateX(-100%);
+    }
+    .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/component.js

@@ -0,0 +1,105 @@
+import throttle from "lodash.throttle";
+
+import { queryId, queryIdAll } from "../dom-query";
+
+const mdBreakpoint = () => window.matchMedia("(min-width: 48rem)").matches;
+const DRAG_BUFFER = 20;
+
+const init = (slidesContainer) => {
+  const transformContainer = queryId("slider-strip", slidesContainer);
+  const slides = Array.from(queryIdAll("slider-slide", slidesContainer));
+  const slideLeftChevron = queryId("slider-previous", slidesContainer);
+  const slideRightChevron = queryId("slider-next", slidesContainer);
+  const slideMarkers = Array.from(queryIdAll("slider-marker", slidesContainer));
+  const sliderControls = queryId("slider-controls", slidesContainer);
+
+  sliderControls.classList.replace("hidden", "flex");
+  const slidesLength = slides.length;
+
+  const slidesWidth = slidesContainer.getBoundingClientRect().width;
+  const { width: slideWidth, left: slideLeftDistance } =
+    slides[0].getBoundingClientRect();
+  const { left: slideLeftDistanceSecond } = slides[1].getBoundingClientRect();
+  const slideGap = slideLeftDistanceSecond - slideLeftDistance - slideWidth;
+  const adjustment = (slidesWidth - slideWidth) / 2;
+
+  let currentIndex = 0;
+  let touchStartX = 0;
+
+  const calculateTransform = (index) =>
+    index * -slideWidth + adjustment + index * -slideGap;
+
+  const updateSlide = (index) =>
+    (transformContainer.style.transform = `translateX(${calculateTransform(
+      index,
+    )}px)`);
+
+  const updateMarkers = (index) => {
+    slideMarkers.forEach((marker) =>
+      marker.classList.remove("text-active-orange"),
+    );
+    slideMarkers[index].classList.remove("text-cool-black");
+    slideMarkers[index].classList.add("text-active-orange");
+  };
+
+  const slideLeft = () => {
+    currentIndex = currentIndex - 1 <= 0 ? 0 : currentIndex - 1;
+    updateSlide(currentIndex);
+    updateMarkers(currentIndex);
+  };
+
+  const slideRight = () => {
+    currentIndex =
+      currentIndex + 1 >= slidesLength ? currentIndex : currentIndex + 1;
+    updateSlide(currentIndex);
+    updateMarkers(currentIndex);
+  };
+
+  updateSlide(0);
+  updateMarkers(0);
+
+  slideLeftChevron.addEventListener("click", slideLeft);
+
+  transformContainer.addEventListener("touchstart", (e) => {
+    touchStartX = e.touches[0]?.clientX;
+  });
+
+  transformContainer.addEventListener("touchend", (e) => {
+    const distance = e.changedTouches[0]?.clientX - touchStartX;
+
+    // Prevent sliding on clicks
+    if (Math.abs(distance) < DRAG_BUFFER) return;
+
+    const direction = distance > 0 ? slideLeft : slideRight;
+    direction();
+  });
+
+  slideRightChevron.addEventListener("click", slideRight);
+
+  return () => {
+    transformContainer.style.transform = null;
+    sliderControls.classList.replace("flex", "hidden");
+  };
+};
+
+const Slider = ({ container, mqEnableThreshold }) => {
+  if (!container) return;
+
+  const breakpointCheck = mqEnableThreshold || (() => !mdBreakpoint());
+
+  let unmount = () => {};
+  if (breakpointCheck()) unmount = init(container);
+
+  window.addEventListener(
+    "resize",
+    throttle(() => {
+      if (breakpointCheck()) {
+        unmount = init(container);
+      } else {
+        unmount();
+      }
+    }, 100),
+  );
+};
+
+export default Slider;

package/src/core/Slider.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useEffect, useRef, ReactNode } from "react";
+import Icon from "./Icon";
+
+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 SLIDE_TRANSITION_LENGTH = 300;
+
+const SlideIndicator = ({
+  numSlides,
+  activeIndex,
+  interval,
+  intervalIndicator,
+  isInline,
+}: SliderIndicatorProps) => {
+  return (
+    <ul
+      className={`flex gap-4 left-1/2 ${
+        isInline ? "bottom-0" : "absolute bottom-0 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 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 = () => {
+    if (!slideLock) {
+      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
+      setTranslationCoefficient(1);
+      resetInterval();
+      setSlideLock(true);
+    }
+  };
+
+  const prev = () => {
+    if (!slideLock) {
+      setActiveIndex((prevIndex) =>
+        prevIndex > 0 ? prevIndex - 1 : children.length - 1,
+      );
+      setTranslationCoefficient(-1);
+      resetInterval();
+      setSlideLock(true);
+    }
+  };
+
+  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]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setSlides(setupSlides(children, activeIndex));
+      setTranslationCoefficient(0);
+      setSlideLock(false);
+    }, SLIDE_TRANSITION_LENGTH);
+  }, [activeIndex]);
+
+  return (
+    <div
+      className="relative"
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      <div className="overflow-y-visible overflow-x-clip w-full py-40">
+        <div
+          className={`flex items-center ${
+            translationCoefficient !== 0
+              ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`
+              : ""
+          } `}
+          style={{
+            transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,
+          }}
+        >
+          {slides.map((child, index) => (
+            <div
+              key={index}
+              className="w-full flex-shrink-0 flex justify-center sm:px-60"
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className={`flex items-center pointer-events-none ${
+          isInline
+            ? "ui-standard-container justify-center gap-24 -mt-16"
+            : "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 w-48">
+            <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 w-48">
+            <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.stories.tsx

@@ -0,0 +1,12 @@
+import { PricingPageTable } from "./data";
+
+export default {
+  title: "JS Components/Table",
+  component: PricingPageTable,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const PricingPage = {};

package/src/core/Table/Table.tsx

@@ -0,0 +1,58 @@
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  TableHTMLAttributes,
+  cloneElement,
+} from "react";
+
+type TableProps = {
+  id?: string;
+};
+
+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,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
+  <tbody {...rest}>{children}</tbody>
+);
+
+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,
+  ...rest
+}: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (
+  <tr
+    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${
+      rest?.className ?? ""
+    }`}
+  >
+    {cloneElement(children as ReactElement, { isRowHeader: true })}
+  </tr>
+);