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

package/core/Accordion.js

@@ -1 +1 @@
-import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:"ui-grid-mx max-w-screen-sm sm:mx-auto",id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;
+import React,{useState}from"react";import Icon from"./Icon";const AccordionRow=({name,children,index,setActiveIndex,active,topBorder,bottomBorder,last,arrowIcon})=>{let iconActive,iconInactive;const handleSetIndex=()=>{setActiveIndex(index)};if(arrowIcon){iconActive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"-rotate-90"});iconInactive=React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-dark-grey",size:"1.5rem",additionalCSS:"rotate-90"})}else{iconActive=React.createElement(Icon,{name:"icon-gui-minus",color:"text-dark-grey",size:"1.5rem"});iconInactive=React.createElement(Icon,{name:"icon-gui-plus",color:"text-dark-grey",size:"1.5rem"})}return React.createElement("div",{className:`border-mid-grey ${last&&!bottomBorder?"":"border-b"} ${topBorder?"border-t":""}`},React.createElement("button",{type:"button",onClick:handleSetIndex,className:`flex w-full px-0 focus:outline-none py-20`},React.createElement("span",{className:"ui-text-p1 !font-bold text-left mr-8"},name),React.createElement("span",{className:"ml-auto"},active?iconActive:iconInactive)),React.createElement("section",{className:"ui-text-p2 transition-all overflow-hidden",style:{maxHeight:active?"500px":"0",paddingBottom:active?"1.5rem":"0"}},children))};const Accordion=({data,id="id-accordion",topBorder,bottomBorder,arrowIcon,autoClose})=>{const[activeIndexes,setActiveIndexes]=useState([]);const handleSetIndex=index=>{const currentIndexIsActive=activeIndexes.includes(index);if(autoClose){setActiveIndexes(currentIndexIsActive?[]:[index])}else{setActiveIndexes(currentIndexIsActive?activeIndexes.filter(i=>i!==index):[...activeIndexes,index])}};return React.createElement("div",{className:"ui-grid-mx max-w-screen-sm sm:mx-auto",id:id},data.map((item,currentIndex)=>{return React.createElement(AccordionRow,{key:item.name,name:item.name,arrowIcon:arrowIcon,index:currentIndex,last:data.length===currentIndex+1,topBorder:topBorder&&currentIndex===0,bottomBorder:bottomBorder&&data.length===currentIndex+1,active:activeIndexes.includes(currentIndex),setActiveIndex:handleSetIndex},item.content)}))};export default Accordion;

package/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/core/Slider.js

@@ -1 +1 @@
-import React,{useEffect,useRef}from"react";import Icon from"./Icon";import SliderScripts from"./Slider/component.js";import"./Slider/component.css";const Slider=({slides=[],classes="",slideClasses="",slideMinWidth="16.875rem",slideMaxWidth="1fr",mqEnableThreshold=()=>true,...props})=>{const containerRef=useRef(null);useEffect(()=>{SliderScripts({container:containerRef.current,mqEnableThreshold})},[]);if(slides.length===0)return;return React.createElement("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},ref:containerRef},React.createElement("ol",{className:`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`,"data-id":"slider-strip",...props},slides.map((slide,i)=>React.createElement("li",{key:i,className:slideClasses,"data-id":"slider-slide"},slide))),React.createElement("div",{className:"justify-center items-center my-24 hidden","data-id":"slider-controls"},React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-previous"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black",additionalCSS:"transform rotate-180","data-id":"meganav-control-mobile-dropdown-menu"})),React.createElement("ul",{className:"flex justify-center items-center mx-32 relative h-24"},slides.map((_,i)=>React.createElement("li",{key:i},React.createElement("span",{className:"ui-slider-marker text-cool-black","data-id":"slider-marker"},"⬤")," "))),React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-next"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black","data-id":"meganav-control-mobile-dropdown-menu"}))))};export default Slider;
+import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";import"./Slider/component.css";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("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?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("li",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const timerRef=useRef(null);const isInline=(options===null||options===void 0?void 0: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);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};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===null||options===void 0?void 0:options.interval]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-hidden w-full py-40"},React.createElement("div",{className:"flex items-center transition-transform ease-in-out duration-500",style:{transform:`translateX(-${activeIndex*100}%)`}},children.map((child,index)=>React.createElement("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:.1}},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("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},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("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},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.0-dev.99c9769",
+  "version": "14.0.0-dev.bc1b6fe",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/src/core/Accordion.tsx

@@ -7,14 +7,14 @@ type AccordionData = {
 };
 
 type AccordionRowProps = {
-  bottomBorder: boolean;
-  topBorder: boolean;
+  bottomBorder?: boolean;
+  topBorder?: boolean;
   active: boolean;
   last: boolean;
   name: string;
   index;
   children: ReactNode;
-  arrowIcon: boolean;
+  arrowIcon?: boolean;
   setActiveIndex: (index: number) => void;
 };
 
@@ -80,7 +80,7 @@ const AccordionRow = ({
         onClick={handleSetIndex}
         className={`flex w-full px-0 focus:outline-none py-20`}
       >
-        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
+        <span className="ui-text-p1 !font-bold text-left mr-8">{name}</span>
         <span className="ml-auto">{active ? iconActive : iconInactive}</span>
       </button>
 
@@ -105,7 +105,7 @@ const Accordion = ({
   arrowIcon,
   autoClose,
 }: AccordionProps) => {
-  const [activeIndexes, setActiveIndexes] = useState([]);
+  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
 
   const handleSetIndex = (index: number) => {
     const currentIndexIsActive = activeIndexes.includes(index);

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

@@ -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

@@ -1,108 +1,189 @@
-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;
+interface SliderProps {
+  children: ReactNode[];
+  options?: {
+    interval?: number;
+    controlPosition?: "inline" | "floating";
+    intervalIndicator?: boolean;
+  };
+}
+
+interface SliderIndicatorProps {
+  numSlides: number;
+  activeIndex: number;
+  interval: number;
+  intervalIndicator?: boolean;
+  isInline?: boolean;
+}
 
-  container?: HTMLDivElement | null;
+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 && (
+              <li
+                className="absolute inset-0 rounded-full bg-active-orange"
+                style={{
+                  animation: `fillAnimation ${interval}ms linear`,
+                }}
+              ></li>
+            )}
+          </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();
+  };
+
+  const resetInterval = () => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    timerRef.current = setInterval(next, options?.interval ?? 10000);
+  };
 
-  if (slides.length === 0) return;
+  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-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="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>