@guardian/interactive-component-library 0.7.0 → 0.7.2

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.d.ts

@@ -26,6 +26,9 @@ export class TextLayer {
      * called with the hovered feature, and the mouse event.
      *
      * The callback can optionally return a cleanup function that will be called when the mouse leaves this feature.
+     *
+     * Note that this callback is attached to the "pointerover" and "pointerout" events, so touch
+     * events will not trigger it.
      * @param {boolean} [params.restyleOnHover] If true, the layer will re-render when the mouse hovers over a feature.
      *
      * The provided style function will be called with the `isHovering` parameter set to `true` for the hovered feature.

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.js

@@ -89,6 +89,9 @@ class TextLayer {
    * called with the hovered feature, and the mouse event.
    *
    * The callback can optionally return a cleanup function that will be called when the mouse leaves this feature.
+   *
+   * Note that this callback is attached to the "pointerover" and "pointerout" events, so touch
+   * events will not trigger it.
    * @param {boolean} [params.restyleOnHover] If true, the layer will re-render when the mouse hovers over a feature.
    *
    * The provided style function will be called with the `isHovering` parameter set to `true` for the hovered feature.

package/dist/components/molecules/canvas-map/lib/renderers/TextLayerRenderer.js

@@ -276,7 +276,7 @@ class TextLayerRenderer {
       });
     }
     if (this.layer.onHover) {
-      this._element.addEventListener("mouseover", (event) => {
+      this._element.addEventListener("pointerover", (event) => {
         if (!event.target) return;
         const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
           var _a;
@@ -285,14 +285,14 @@ class TextLayerRenderer {
         if (!hoveredFeature) return;
         const onHoverLeave = this.layer.onHover(hoveredFeature, event);
         if (onHoverLeave) {
-          this._element.addEventListener("mouseout", onHoverLeave, {
+          this._element.addEventListener("pointerout", onHoverLeave, {
             once: true
           });
         }
       });
     }
     if (this.layer.restyleOnHover) {
-      this._element.addEventListener("mouseover", (event) => {
+      this._element.addEventListener("pointerover", (event) => {
         if (!event.target) return;
         const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
           var _a;
@@ -302,7 +302,7 @@ class TextLayerRenderer {
         this._hoveredFeature = hoveredFeature;
         this.layer.dispatcher.dispatch(MapEvent.CHANGE);
         this._element.addEventListener(
-          "mouseout",
+          "pointerout",
           () => {
             this._hoveredFeature = void 0;
             this.layer.dispatcher.dispatch(MapEvent.CHANGE);

package/dist/style.css

@@ -1359,14 +1359,14 @@ body {
   --new-group-01: #333333;
   --dem: #093ca3;
   --gop: #c70000;
-  --oth: #707070;
+  --oth: #4d4d4d;
   --ind-dem: #7378d8;
   --lib: #c6b716;
   --grn: #0da498;
   --ken: #ef6f07;
   --dem-2: #dad7f5;
   --gop-2: #ffdbd4;
-  --oth-2: #e7e7e7;
+  --oth-2: #cccccc;
   --ind-dem-2: #dad7f5;
   --lib-2: #f4eac2;
   --grn-2: #cfedea;
@@ -1471,14 +1471,14 @@ body {
     --new-group-01: #cccccc;
     --dem: #3261db;
     --gop: #c70000;
-    --oth: #707070;
+    --oth: #cccccc;
     --ind-dem: #7389d8;
     --lib: #c6b716;
     --grn: #23b4a9;
     --ken: #ef6f07;
     --dem-2: #20366d;
     --gop-2: #5a0b0b;
-    --oth-2: #333333;
+    --oth-2: #4d4d4d;
     --ind-dem-2: #394261;
     --lib-2: #524d13;
     --grn-2: #19524e;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.7.0",
+  "version": "0.7.2",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",