@guardian/interactive-component-library 0.1.0-alpha.32 → 0.1.0-alpha.34

package/dist/interactive-component-library.js

@@ -485,7 +485,10 @@ const Waffle = ({
   numberOfRows,
   type = WaffleType.circle,
   idAccessor,
-  onMouseOver,
+  onMouseOver = () => {
+  },
+  onClick = () => {
+  },
   styles: styles2
 }) => {
   const containerRef = useRef();
@@ -510,6 +513,7 @@ const Waffle = ({
             attributes = {
               id: unit2[idAccessor] || `w-${j}`,
               onMouseOver: (e) => onMouseOver(unit2, e),
+              onClick: (e) => onClick(unit2, e),
               class: `${styles2.unit} ${unit2.class}`,
               height: unitHeight,
               width: unitWidth,
@@ -520,6 +524,7 @@ const Waffle = ({
             attributes = {
               id: unit2[idAccessor] || `w-${j}`,
               onMouseOver: (e) => onMouseOver(unit2, e),
+              onClick: (e) => onClick(unit2, e),
               class: `${styles2.unit} ${unit2.class}`,
               r: unitWidth / 2,
               transform: `translate(${unitWidth * Math.floor(j / numberOfRows) + unitWidth / 2}, ${unitHeight * (j % numberOfRows) + unitHeight / 2})`
@@ -1943,11 +1948,11 @@ const ToplineResult = forwardRef(({
     })]
   });
 });
-const borderTop = "_borderTop_1b1s0_9";
-const section = "_section_1b1s0_13";
-const fullWidth = "_fullWidth_1b1s0_56";
-const header = "_header_1b1s0_95";
-const content = "_content_1b1s0_132";
+const borderTop = "_borderTop_1yz7f_9";
+const section = "_section_1yz7f_14";
+const fullWidth = "_fullWidth_1yz7f_57";
+const header = "_header_1yz7f_96";
+const content = "_content_1yz7f_133";
 const defaultStyles$9 = {
   borderTop,
   section,
@@ -2414,14 +2419,16 @@ var d = (E) => {
     return cloneElement(t, { className: i });
   });
 };
-const transitionContainer = "_transitionContainer_wws3j_1";
-const modalBox = "_modalBox_wws3j_13";
-const enter = "_enter_wws3j_21";
-const exitDone = "_exitDone_wws3j_22";
-const enterActive = "_enterActive_wws3j_31";
-const exit = "_exit_wws3j_22";
+const transitionContainer = "_transitionContainer_15ioc_1";
+const blur = "_blur_15ioc_12";
+const modalBox = "_modalBox_15ioc_17";
+const enter = "_enter_15ioc_26";
+const exitDone = "_exitDone_15ioc_27";
+const enterActive = "_enterActive_15ioc_38";
+const exit = "_exit_15ioc_27";
 const styles$6 = {
   transitionContainer,
+  blur,
   modalBox,
   enter,
   exitDone,
@@ -2430,6 +2437,7 @@ const styles$6 = {
 };
 function Modal({
   visible = false,
+  blurBackground = true,
   children,
   onClickOutside
 }) {
@@ -2459,11 +2467,8 @@ function Modal({
     duration: 300,
     classNames: styles$6,
     children: jsx("div", {
-      class: styles$6.transitionContainer,
+      className: [styles$6.transitionContainer, blurBackground && styles$6.blur, visible && styles$6.visible].join(" "),
       onClick,
-      style: {
-        pointerEvents: visible ? "auto" : "none"
-      },
       children: jsx("div", {
         ref: modalBoxRef,
         class: styles$6.modalBox,
@@ -4443,7 +4448,7 @@ class MapRenderer {
   constructor(map) {
     this.map = map;
     this._element = document.createElement("div");
-    this._element.className = "gv-map";
+    this._element.className = "gv-layer-container";
     const style2 = this._element.style;
     style2.position = "absolute";
     style2.width = "100%";
@@ -5949,6 +5954,7 @@ let Map$2 = class Map2 {
     this.layers = [];
     this.dispatcher = new Dispatcher(this);
     this._viewport = document.createElement("div");
+    this._viewport.className = "gv-map";
     this._viewport.style.position = "relative";
     this._viewport.style.overflow = "hidden";
     this._viewport.style.top = 0;
@@ -5962,13 +5968,19 @@ let Map$2 = class Map2 {
     this.view.transform = zoomIdentity;
     this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
     this._zoomBehaviour = zoom().scaleExtent(this.view.scaleExtent).filter((event) => {
+      const filterEvent = (filter) => {
+        this._filterEventCallback(filter);
+        return !filter;
+      };
       if (event.type === "wheel" && !event[this._zoomBypassKey]) {
-        this._filterEventCallback(this._zoomBypassKey);
-        return false;
+        return filterEvent(true);
       }
-      if ("targetTouches" in event && event.targetTouches.length < 2) {
-        console.log("stop event", event);
-        return false;
+      if ("targetTouches" in event) {
+        if (event.targetTouches.length < 2) {
+          return false;
+        }
+        event.preventDefault();
+        return filterEvent(false);
       }
       return (!event.ctrlKey || event.type === "wheel") && !event.button;
     }).on("zoom", (event) => {
@@ -5979,6 +5991,15 @@ let Map$2 = class Map2 {
       });
     });
     select(this._viewport).call(this._zoomBehaviour);
+    this._viewport.addEventListener("touchmove", (event) => {
+      if (event.targetTouches.length < 2) {
+        this._filterEventCallback(true);
+      }
+    });
+  }
+  destroy() {
+    this._resizeObserver.disconnect();
+    this._viewport.remove();
   }
   /** PUBLIC GETTERS */
   get size() {
@@ -5994,9 +6015,6 @@ let Map$2 = class Map2 {
   onFilterEvent(callback) {
     this._filterEventCallback = callback;
   }
-  onZoomEvent(callback) {
-    this._onZoomEventCallback = callback;
-  }
   fitObject(geoJSON) {
     this.view.fitObject(geoJSON);
     this._requestRender();
@@ -6017,7 +6035,7 @@ let Map$2 = class Map2 {
     if (layers === this.layers) {
       return;
     }
-    [...this.layers].forEach((layer) => {
+    new Array(...this.layers).forEach((layer) => {
       if (!layers.includes(layer)) {
         this.removeLayer(layer);
       }
@@ -6043,11 +6061,32 @@ let Map$2 = class Map2 {
   }) {
     return select(this._viewport).transition().duration(options.duration).call(this._zoomBehaviour.scaleTo, zoomLevel).end();
   }
-  zoomToFeature(feature, focalPoint) {
+  zoomToFeature(feature, focalPoint, padding = {
+    top: 40,
+    right: 40,
+    bottom: 40,
+    left: 40
+  }) {
     const extent = feature.getExtent();
-    const [[x, y], [width, height]] = this.view.boundsForExtent(extent);
-    const viewPortSize = this.view.viewPortSize;
-    const newTransform = zoomIdentity.translate(viewPortSize[0] / 2, viewPortSize[1] / 2).scale(Math.min(this.view.maxZoom, 0.9 * Math.min(viewPortSize[0] / width, viewPortSize[1] / height))).translate(-x - width / 2, -y - height / 2);
+    const [[featureX, featureY], [featureWidth, featureHeight]] = this.view.boundsForExtent(extent);
+    const [viewPortWidth, viewPortHeight] = this.view.viewPortSize;
+    const paddedViewPortWidth = viewPortWidth - padding.left - padding.right;
+    const paddedViewPortHeight = viewPortHeight - padding.top - padding.bottom;
+    const featureScale = Math.min(paddedViewPortWidth / featureWidth, paddedViewPortHeight / featureHeight);
+    const zoomScale = Math.min(this.view.maxZoom, featureScale);
+    const scaledPadding = {
+      top: padding.top / zoomScale,
+      right: padding.right / zoomScale,
+      bottom: padding.bottom / zoomScale,
+      left: padding.left / zoomScale
+    };
+    const paddedFeatureBounds = {
+      x: featureX - scaledPadding.left,
+      y: featureY - scaledPadding.top,
+      width: featureWidth + scaledPadding.left + scaledPadding.right,
+      height: featureHeight + scaledPadding.top + scaledPadding.bottom
+    };
+    const newTransform = zoomIdentity.translate(viewPortWidth / 2, viewPortHeight / 2).scale(zoomScale).translate(-(paddedFeatureBounds.x + paddedFeatureBounds.width / 2), -(paddedFeatureBounds.y + paddedFeatureBounds.height / 2));
     select(this._viewport).transition().duration(500).call(this._zoomBehaviour.transform, newTransform, focalPoint);
   }
   async resetZoom(options) {
@@ -6273,16 +6312,19 @@ class View {
     };
   }
 }
-const mapContainer = "_mapContainer_y5eeh_9";
-const helpTextContainer = "_helpTextContainer_y5eeh_15";
-const helpText = "_helpText_y5eeh_15";
-const highlight = "_highlight_y5eeh_40";
+const mapContainer = "_mapContainer_qlxau_9";
+const helpTextContainer = "_helpTextContainer_qlxau_15";
+const helpText = "_helpText_qlxau_15";
+const desktopHelpText = "_desktopHelpText_qlxau_40";
+const mobileHelpText$1 = "_mobileHelpText_qlxau_48";
 const styles$3 = {
   mapContainer,
   helpTextContainer,
   helpText,
-  highlight
+  desktopHelpText,
+  mobileHelpText: mobileHelpText$1
 };
+const mobileHelpText = "Use two fingers to zoom";
 const Map$1 = forwardRef(({
   config,
   onLoad,
@@ -6291,10 +6333,10 @@ const Map$1 = forwardRef(({
   const {
     layers
   } = children;
+  const targetRef = useRef();
   const [map, setMap] = useState();
-  const [hideDefaultHelpText, setHideDefaultHelpText] = useState(false);
   const [zoomHelpText, setZoomHelpText] = useState("");
-  const [highlightHelpText, setHighlightHelpText] = useState(false);
+  const [showHelpText, setShowHelpText] = useState(false);
   useEffect(() => {
     const map2 = new Map$2({
       view: new View(config.view),
@@ -6308,6 +6350,7 @@ const Map$1 = forwardRef(({
     const zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
     setZoomHelpText(zoomHelpText2);
     return () => {
+      map2.destroy();
       if (ref)
         ref.current = null;
       setMap(null);
@@ -6317,16 +6360,15 @@ const Map$1 = forwardRef(({
     if (!map)
       return;
     let timeoutID;
-    map.onFilterEvent(() => {
+    map.onFilterEvent((showHelpText2) => {
       if (timeoutID)
         clearTimeout(timeoutID);
-      setHighlightHelpText(true);
-      timeoutID = setTimeout(() => {
-        setHighlightHelpText();
-      }, 1e3);
-    });
-    map.onZoomEvent((zoomLevel) => {
-      setHideDefaultHelpText(zoomLevel > 1);
+      setShowHelpText(showHelpText2);
+      if (showHelpText2) {
+        timeoutID = setTimeout(() => {
+          setShowHelpText(false);
+        }, 1e3);
+      }
     });
     return () => {
       if (timeoutID)
@@ -6338,22 +6380,22 @@ const Map$1 = forwardRef(({
       map.setLayers(layers);
     }
   }, [map, layers]);
-  const targetRef = useRef();
-  const hideHelpText = hideDefaultHelpText && !highlightHelpText;
-  const helpText2 = highlightHelpText ? zoomHelpText : config.defaultHelpText;
   return jsx("div", {
     ref: targetRef,
     className: styles$3.mapContainer,
-    children: jsx("div", {
+    children: jsxs("div", {
       className: styles$3.helpTextContainer,
       style: {
-        opacity: hideHelpText ? 0 : 1
+        opacity: showHelpText ? 1 : 0
       },
       "aria-hidden": true,
-      children: jsx("p", {
-        className: [styles$3.helpText, highlightHelpText && styles$3.highlight].join(" "),
-        children: helpText2
-      })
+      children: [jsx("p", {
+        className: [styles$3.helpText, styles$3.desktopHelpText].join(" "),
+        children: zoomHelpText
+      }), jsx("p", {
+        className: [styles$3.helpText, styles$3.mobileHelpText].join(" "),
+        children: mobileHelpText
+      })]
     })
   });
 });
@@ -6463,7 +6505,8 @@ class FeatureRenderer {
   render(frameState, feature, context) {
     const {
       projection,
-      transform
+      transform,
+      pixelRatio
     } = frameState.viewState;
     this.drawingFunction.context(context);
     context.beginPath();
@@ -6476,7 +6519,7 @@ class FeatureRenderer {
       fill
     } = this.style;
     if (stroke) {
-      context.lineWidth = stroke.width / transform.k;
+      context.lineWidth = stroke.width * pixelRatio / transform.k;
       context.strokeStyle = stroke.color;
       context.stroke();
     }
@@ -6867,6 +6910,8 @@ class VectorLayerRenderer {
     this.featureRenderer = new FeatureRenderer();
   }
   renderFrame(frameState, targetElement) {
+    if (this.layer.opacity === 0)
+      return targetElement;
     const {
       projection,
       sizeInPixels,
@@ -6884,14 +6929,14 @@ class VectorLayerRenderer {
     const source = this.layer.source;
     const features = source.getFeaturesInExtent(visibleExtent);
     for (const feature of features) {
-      context.save();
       const styleFunction2 = feature.getStyleFunction() || this.layer.getStyleFunction();
       const featureStyle = styleFunction2(feature);
-      if (!featureStyle)
-        continue;
-      this.featureRenderer.setStyle(featureStyle);
-      this.featureRenderer.render(frameState, feature, context);
-      context.restore();
+      if ((featureStyle == null ? void 0 : featureStyle.stroke) || (featureStyle == null ? void 0 : featureStyle.fill)) {
+        context.save();
+        this.featureRenderer.setStyle(featureStyle);
+        this.featureRenderer.render(frameState, feature, context);
+        context.restore();
+      }
     }
     if (Object.prototype.hasOwnProperty.call(projection, "getCompositionBorders")) {
       context.beginPath();
@@ -7419,7 +7464,7 @@ function useWindowSize() {
       height: window.innerHeight
     };
   });
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (typeof window === "undefined")
       return;
     function handleResize() {
@@ -7525,7 +7570,8 @@ function CoalitionsTracker({
         stack: list.stack,
         width: list.width,
         height: barChartHeight,
-        createSVG: true
+        createSVG: true,
+        styles: styles2
       })]
     }, index);
   };