@ably/ui 14.0.0-dev.99c9769 → 14.0.0-dev.b96df46

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

@@ -1,45 +1,98 @@
-import React, { ReactNode } from "react";
+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

@@ -1,6 +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;
+    @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/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,108 +1,188 @@
-import React, { CSSProperties, ReactNode, useEffect, useRef } from "react";
-
+import React, { useState, useEffect, useRef, ReactNode } from "react";
 import Icon from "./Icon";
-import SliderScripts from "./Slider/component.js";
-import "./Slider/component.css";
-
-type SliderProps = {
-  slides?: ReactNode[];
-  classes?: string;
-  slideClasses?: string;
-  slideMinWidth?: string;
-  slideMaxWidth?: string;
-  mqEnableThreshold?: () => boolean;
-
-  container?: HTMLDivElement | null;
+
+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 = ({
-  slides = [],
-  classes = "",
-  slideClasses = "",
-  slideMinWidth = "16.875rem",
-  slideMaxWidth = "1fr",
-  mqEnableThreshold = () => true,
-  ...props
-}: SliderProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+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);
 
-  useEffect(() => {
-    SliderScripts({
-      container: containerRef.current,
-      mqEnableThreshold,
-    });
-  }, []);
+  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();
+  };
 
-  if (slides.length === 0) return;
+  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="w-full overflow-x-hidden"
-      data-id="slider"
-      style={
-        {
-          "--dynamic-grid-columns-count": slides.length,
-          "--dynamic-grid-column-min-width": slideMinWidth,
-          "--dynamic-grid-column-max-width": slideMaxWidth,
-        } as CSSProperties
-      }
-      ref={containerRef}
+      className="relative"
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
     >
-      <ol
-        className={`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`}
-        data-id="slider-strip"
-        {...props}
-      >
-        {slides.map((slide, i) => (
-          <li key={i} className={slideClasses} data-id="slider-slide">
-            {slide}
-          </li>
-        ))}
-      </ol>
+      <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}%)` }}
+        >
+          {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="justify-center items-center my-24 hidden"
-        data-id="slider-controls"
+        className={`flex items-center pointer-events-none ${
+          isInline
+            ? "ui-standard-container justify-center gap-24"
+            : "sm:flex sm:absolute inset-0 justify-between"
+        }`}
       >
         <button
-          type="button"
-          className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus"
-          data-id="slider-previous"
+          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}
         >
-          <Icon
-            name="icon-gui-disclosure-arrow"
-            size="1.5rem"
-            color="text-cool-black"
-            additionalCSS="transform rotate-180"
-            data-id="meganav-control-mobile-dropdown-menu"
-          />
+          <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>
 
-        <ul className="flex justify-center items-center mx-32 relative h-24">
-          {slides.map((_, i) => (
-            <li key={i}>
-              <span
-                className="ui-slider-marker text-cool-black"
-                data-id="slider-marker"
-              >
-                &#x2b24;
-              </span>{" "}
-              {/* ⬤ */}
-            </li>
-          ))}
-        </ul>
+        <SlideIndicator
+          numSlides={children.length}
+          activeIndex={activeIndex}
+          interval={options?.interval ?? 10000}
+          intervalIndicator={options?.intervalIndicator}
+          isInline={isInline}
+        />
 
         <button
-          type="button"
-          className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus"
-          data-id="slider-next"
+          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}
         >
-          <Icon
-            name="icon-gui-disclosure-arrow"
-            size="1.5rem"
-            color="text-cool-black"
-            data-id="meganav-control-mobile-dropdown-menu"
-          />
+          <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>

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";