@guardian/interactive-component-library 0.1.0-alpha.17 → 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,15 +3122,15 @@ function Gradient() {
     })]
   });
 }
-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 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,
@@ -3243,7 +3207,7 @@ function Ticker({
       },
       children: [jsx("div", {
         className: styles.gradient,
-        children: !expanded && jsx(Gradient, {})
+        children: jsx(Gradient, {})
       }), jsxs("div", {
         className: styles.buttons,
         children: [jsx(ArrowButton, {
@@ -3262,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`
         })
       })]
     })]