@guardian/interactive-component-library 0.1.0-alpha.16 → 0.1.0-alpha.17

package/dist/interactive-component-library.js

@@ -3158,17 +3158,19 @@ function Gradient() {
     })]
   });
 }
-const ticker = "_ticker_1tpek_9";
-const tickerItems = "_tickerItems_1tpek_19";
-const tickerItem = "_tickerItem_1tpek_19";
-const controls = "_controls_1tpek_41";
-const gradient = "_gradient_1tpek_56";
-const buttons = "_buttons_1tpek_70";
-const button = "_button_1tpek_70";
-const buttonInner = "_buttonInner_1tpek_96";
+const ticker = "_ticker_fyd8z_9";
+const tickerItems = "_tickerItems_fyd8z_19";
+const tickerScroll = "_tickerScroll_fyd8z_24";
+const tickerItem = "_tickerItem_fyd8z_19";
+const controls = "_controls_fyd8z_46";
+const gradient = "_gradient_fyd8z_61";
+const buttons = "_buttons_fyd8z_75";
+const button = "_button_fyd8z_75";
+const buttonInner = "_buttonInner_fyd8z_101";
 const styles = {
   ticker,
   tickerItems,
+  tickerScroll,
   tickerItem,
   controls,
   gradient,
@@ -3176,45 +3178,37 @@ const styles = {
   button,
   buttonInner
 };
-function totalSizeForElements(elements) {
-  return Array.from(elements).reduce((totalSize, element) => {
-    totalSize.width += element.clientWidth;
-    totalSize.height += element.clientHeight;
-    return totalSize;
-  }, {
-    width: 0,
-    height: 0
-  });
-}
 function Ticker({
   maxItems = 20,
   onStateChange,
   children
 }) {
-  const [offset, setOffset] = useState(0);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageWidth, setPageWidth] = useState(0);
+  const [numberOfPages, setNumberOfPages] = useState(0);
+  const offsetWidth = useMemo(() => {
+    return -pageIndex * (pageWidth || 0);
+  }, [pageIndex, pageWidth]);
   const windowSize = useWindowSize();
   const tickerRef = useRef();
   const tickerItemsRef = useRef();
+  const tickerScrollRef = useRef();
+  const controlsRef = useRef();
   const [hideButtons, setHideButtons] = useState(false);
-  const [nextButtonDisabled, setNextButtonDisabled] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const childArray = toChildArray(children);
   useLayoutEffect(() => {
     const tickerItemsContainer = tickerItemsRef.current;
-    if (tickerItemsContainer) {
-      const {
-        width,
-        height
-      } = totalSizeForElements(tickerItemsContainer.children);
-      const hideButtons2 = windowSize.width >= 480 ? width <= tickerItemsContainer.clientWidth : height <= tickerItemsContainer.clientHeight;
-      setHideButtons(hideButtons2);
-      if (tickerItemsContainer.children.length > 0) {
-        const itemWidth = tickerItemsContainer.children[0].clientWidth;
-        const nextButtonDisabled2 = offset * itemWidth > width - tickerItemsContainer.clientWidth;
-        setNextButtonDisabled(nextButtonDisabled2);
-      }
-    }
-  }, [offset, windowSize, childArray, setHideButtons, setNextButtonDisabled]);
+    const pageWidth2 = tickerItemsContainer.clientWidth * 0.75;
+    setPageWidth(pageWidth2);
+    const numberOfPages2 = Math.ceil(tickerScrollRef.current.scrollWidth / pageWidth2);
+    setNumberOfPages(numberOfPages2);
+  }, []);
+  useLayoutEffect(() => {
+    const tickerItemsContainer = tickerItemsRef.current;
+    const hideButtons2 = windowSize.width >= 480 ? tickerScrollRef.current.scrollWidth <= tickerItemsContainer.clientWidth : tickerScrollRef.current.scrollHeight <= tickerItemsContainer.clientHeight;
+    setHideButtons(hideButtons2);
+  }, [windowSize, setHideButtons]);
   function toggleExpandedState() {
     setExpanded((expanded2) => {
       const newState = !expanded2;
@@ -3228,32 +3222,37 @@ function Ticker({
   return jsxs("div", {
     ref: tickerRef,
     className: styles.ticker,
-    style: `--ticker-offset: ${offset}`,
+    style: `--ticker-offset: ${offsetWidth}px;`,
     "data-expanded": expanded,
     children: [jsx("div", {
       ref: tickerItemsRef,
       className: styles.tickerItems,
-      children: childArray.map((child, index2) => jsx("div", {
-        className: styles.tickerItem,
-        children: child
-      }, index2))
+      children: jsx("div", {
+        ref: tickerScrollRef,
+        className: styles.tickerScroll,
+        children: childArray.map((child, index2) => jsx("div", {
+          className: styles.tickerItem,
+          children: child
+        }, index2))
+      })
     }), jsxs("div", {
+      ref: controlsRef,
       className: styles.controls,
       style: hideButtons && {
         display: "none"
       },
       children: [jsx("div", {
         className: styles.gradient,
-        children: jsx(Gradient, {})
+        children: !expanded && jsx(Gradient, {})
       }), jsxs("div", {
         className: styles.buttons,
         children: [jsx(ArrowButton, {
-          onClick: () => setOffset((d2) => d2 + 1),
-          disabled: nextButtonDisabled
+          onClick: () => setPageIndex((d2) => d2 + 1),
+          disabled: pageIndex >= numberOfPages - 1
         }), jsx(ArrowButton, {
           direction: "left",
-          onClick: () => setOffset((d2) => d2 - 1),
-          disabled: offset <= 0
+          onClick: () => setPageIndex((d2) => d2 - 1),
+          disabled: pageIndex <= 0
         })]
       }), jsx("div", {
         className: styles.button,