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

package/dist/interactive-component-library.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useRef, useState, useLayoutEffect, useCallback, useEffect, useMemo, useContext, useImperativeHandle } from "preact/hooks";
+import { useRef, useCallback, useEffect, useMemo, useState, useLayoutEffect, useContext, useImperativeHandle } from "preact/hooks";
 import { render, createElement, cloneElement, createContext, toChildArray } from "preact";
 import { useSyncExternalStore, createPortal, forwardRef } from "preact/compat";
 import { scaleLinear as scaleLinear$1 } from "d3-scale";
@@ -112,25 +112,6 @@ const LegendItem = ({
     })]
   });
 };
-function isDarkColor(color) {
-  let r, g, b;
-  if (color.match(/^rgb/)) {
-    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
-    r = color[1];
-    g = color[2];
-    b = color[3];
-  } else {
-    color = +`0x${color.slice(1).replace(color.length < 5 && /./g, "$&$&")}`;
-    r = color >> 16;
-    g = color >> 8 & 255;
-    b = color & 255;
-  }
-  const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
-  if (hsp > 140) {
-    return false;
-  }
-  return true;
-}
 const bar$2 = "_bar_wmb0k_1";
 const label$1 = "_label_wmb0k_5";
 const backgroundRect = "_backgroundRect_wmb0k_11";
@@ -143,30 +124,13 @@ function StackedBar({
   stack,
   width,
   height,
+  hideLabels = true,
   showBackgroundRect = false,
   createSVG = true,
   styles: styles2
 }) {
   const rectElements = useRef([]);
   const textElements = useRef([]);
-  const [hideLabels, setHideLabels] = useState(true);
-  useLayoutEffect(() => {
-    for (let index2 = 0; index2 < stack.length; index2++) {
-      const rectElement = rectElements.current[index2];
-      const textElement = textElements.current[index2];
-      const paddingX = 8;
-      const hideText = textElement.getBBox().width + paddingX > rectElement.getBBox().width;
-      const rectStyle = window.getComputedStyle(rectElement);
-      const rectColor = rectStyle.getPropertyValue("fill");
-      const textColor = isDarkColor(rectColor) ? "#FFF" : "#121212";
-      textElement.style.fill = textColor;
-      if (hideText) {
-        setHideLabels(true);
-        return;
-      }
-    }
-    setHideLabels(false);
-  }, [stack, width, height]);
   styles2 = mergeStyles({
     ...defaultStyles$q
   }, styles2);
@@ -184,7 +148,7 @@ function StackedBar({
           fill: d2.fill
         },
         "shape-rendering": "crispEdges"
-      }), jsx("text", {
+      }), !hideLabels && jsx("text", {
         ref: (element) => textElements.current[index2] = element,
         x: itemWidth - 4,
         y: height / 2,
@@ -193,7 +157,7 @@ function StackedBar({
         "text-rendering": "optimizeLegibility",
         className: styles2.label,
         style: {
-          visibility: hideLabels ? "hidden" : "visible"
+          display: hideLabels ? "hidden" : "visible"
         },
         children: d2.label
       })]
@@ -1772,7 +1736,7 @@ const ControlChange = ({
         }
       }) : jsx(CircleIcon, {
         styles: {
-          circle: styles2.next || `fill-color--${next2}`
+          circle: `fill-color--${next2}`
         }
       }), jsx("strong", {
         className: styles2.text,
@@ -3158,17 +3122,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_2eemh_9";
+const tickerItems = "_tickerItems_2eemh_19";
+const tickerScroll = "_tickerScroll_2eemh_24";
+const tickerItem = "_tickerItem_2eemh_19";
+const controls = "_controls_2eemh_46";
+const gradient = "_gradient_2eemh_61";
+const buttons = "_buttons_2eemh_75";
+const button = "_button_2eemh_75";
+const buttonInner = "_buttonInner_2eemh_101";
 const styles = {
   ticker,
   tickerItems,
+  tickerScroll,
   tickerItem,
   controls,
   gradient,
@@ -3176,45 +3142,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,16 +3186,21 @@ 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"
@@ -3248,12 +3211,12 @@ function Ticker({
       }), 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,
@@ -3263,7 +3226,7 @@ function Ticker({
             buttonInner: styles.buttonInner
           },
           onClick: toggleExpandedState,
-          children: expanded ? "Show less" : `Show ${maxItems} most recent`
+          children: expanded ? "Show fewer" : `Show ${maxItems} most recent`
         })
       })]
     })]