@guardian/interactive-component-library 0.4.4 → 0.5.0

package/dist/components/molecules/canvas-map/context/MapContext.js

@@ -7,7 +7,10 @@ function MapProvider({ map, children }) {
   const registerLayer = (layer, comp) => {
     if (!layers.includes(layer)) {
       const position = getCompTreePosition(comp, children);
-      if (position === null) return;
+      if (position === null) {
+        console.warn(`failed to find target component in component tree`, comp);
+        return;
+      }
       setLayers((prevLayers) => {
         const newLayers = [...prevLayers];
         newLayers.splice(position, 0, layer);
@@ -26,27 +29,42 @@ function MapProvider({ map, children }) {
   }, [map, layers]);
   return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer, unregisterLayer }, children });
 }
-function getCompTreePosition(targetComponent, children) {
+function getCompTreePosition(targetComponent, children, debug = false) {
   let index = 0;
+  let debugComponentPath = [];
   function traverse(nodes) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     for (const node of nodes) {
-      const childNodes = (_b = (_a = node == null ? void 0 : node.__c) == null ? void 0 : _a.__v) == null ? void 0 : _b.__k;
-      if (childNodes && childNodes.length > 1 && childNodes[0] !== null) {
-        const result = traverse(childNodes);
-        if (result !== null) {
-          return result;
+      if (!node) continue;
+      const childNodes = (_b = (_a = node.__c) == null ? void 0 : _a.__v) == null ? void 0 : _b.__k;
+      if (debug) {
+        let name = ((_c = node.__c) == null ? void 0 : _c.constructor.displayName) || ((_d = node.__c) == null ? void 0 : _d.constructor.name);
+        if (name === "m") {
+          name = "";
         }
-      } else {
-        if ((node == null ? void 0 : node.__c) === targetComponent) {
-          return index;
+        debugComponentPath.push(name);
+      }
+      if (childNodes && childNodes.length > 0) {
+        const result2 = traverse(childNodes);
+        if (result2 !== null) {
+          return result2;
         }
-        index++;
       }
+      if ((node == null ? void 0 : node.__c) === targetComponent) {
+        return index;
+      }
+      if (debug) {
+        debugComponentPath.pop();
+      }
+      index++;
     }
     return null;
   }
-  return traverse(Array.isArray(children) ? children : [children]);
+  const result = traverse(Array.isArray(children) ? children : [children]);
+  if (debug && result) {
+    console.log(`<${debugComponentPath.join("/> → <")}/>`);
+  }
+  return result;
 }
 export {
   MapContext,

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

@@ -5,8 +5,6 @@ import { Dispatcher } from '../events/Dispatcher';
 /** @typedef {Omit<ConstructorParameters<typeof TextLayer>[0], "source">} TextLayerOptions */
 /** @typedef {TextLayerOptions & { features: import("../Feature").Feature[] | import("../FeatureCollection").FeatureCollection }} TextLayerComponentProps */
 export class TextLayer {
-    /** @param {TextLayerComponentProps} props */
-    static Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): boolean;
     /**
      * @param {import("../Feature").Feature[]} features
      * @param {TextLayerOptions} options
@@ -46,6 +44,13 @@ export class TextLayer {
     getStyleFunction(): () => Style;
     renderFrame(frameState: any, targetElement: any): any;
 }
+export namespace TextLayer {
+    /** @param {TextLayerComponentProps} props */
+    function Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): boolean;
+    namespace Component {
+        let displayName: string;
+    }
+}
 export type TextLayerOptions = Omit<ConstructorParameters<typeof TextLayer>[0], "source">;
 export type TextLayerComponentProps = TextLayerOptions & {
     features: import('../Feature').Feature[] | import('../FeatureCollection').FeatureCollection;

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

@@ -118,6 +118,7 @@ class TextLayer {
     return this.renderer.renderFrame(frameState, targetElement);
   }
 }
+TextLayer.Component.displayName = "TextLayer";
 export {
   TextLayer
 };

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

@@ -5,8 +5,6 @@ import { VectorSource } from '../sources/VectorSource';
 /** @typedef {Omit<ConstructorParameters<typeof VectorLayer>[0], "source">} VectorLayerOptions */
 /** @typedef {VectorLayerOptions & { features: import("../Feature").Feature[] | import("../FeatureCollection").FeatureCollection }} VectorLayerComponentProps */
 export class VectorLayer {
-    /** @param {VectorLayerComponentProps} props */
-    static Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): boolean;
     /**
      * @param {import("../Feature").Feature[]} features
      * @param {VectorLayerOptions} options
@@ -51,6 +49,13 @@ export class VectorLayer {
     findFeatures(coordinate: any): any;
     renderFrame(frameState: any, targetElement: any): any;
 }
+export namespace VectorLayer {
+    /** @param {VectorLayerComponentProps} props */
+    function Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): boolean;
+    namespace Component {
+        let displayName: string;
+    }
+}
 export type VectorLayerOptions = Omit<ConstructorParameters<typeof VectorLayer>[0], "source">;
 export type VectorLayerComponentProps = VectorLayerOptions & {
     features: import('../Feature').Feature[] | import('../FeatureCollection').FeatureCollection;

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

@@ -136,6 +136,7 @@ class VectorLayer {
     return this.renderer.renderFrame(frameState, targetElement);
   }
 }
+VectorLayer.Component.displayName = "VectorLayer";
 export {
   VectorLayer
 };

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

@@ -18,7 +18,7 @@ class FeatureRenderer {
     }
     const feature = this.feature;
     const { projection, transform, pixelRatio } = frameState.viewState;
-    const { stroke, fill } = this.style;
+    const { stroke, fill, pointRadius } = this.style;
     const geometries = feature.getProjectedGeometries(projection);
     if (frameState.debug) {
       try {
@@ -31,6 +31,11 @@ class FeatureRenderer {
         );
       }
     }
+    if (pointRadius) {
+      this.drawingFunction.pointRadius(
+        projection.scale() * pointRadius / transform.k
+      );
+    }
     this.drawPath(geometries, context);
     if (fill) {
       fill.drawInContext(context, transform.k);

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

@@ -36,14 +36,13 @@ class MapRenderer {
       }
       viewState.projection = projection;
     };
-    const baseLayers = visibleLayers.filter((layer) => !layer.declutter);
-    for (const layer of baseLayers) {
-      renderLayer(layer);
-    }
     const declutterTree = new RBush();
-    const layersToDeclutter = [...visibleLayers].filter((layer) => !!layer.declutter).reverse();
-    for (const layer of layersToDeclutter) {
-      renderLayer(layer, declutterTree);
+    for (const layer of visibleLayers) {
+      if (layer.declutter) {
+        renderLayer(layer, declutterTree);
+      } else {
+        renderLayer(layer);
+      }
     }
     replaceChildren(this._element, mapElements);
   }

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

@@ -43,10 +43,12 @@ class TextLayerRenderer {
         x: relativeX * viewPortSize[0],
         y: relativeY * viewPortSize[1]
       });
-      if (declutterTree.collides(bbox)) {
-        continue;
+      if (declutterTree) {
+        if (declutterTree.collides(bbox)) {
+          continue;
+        }
+        declutterTree.insert(bbox);
       }
-      declutterTree.insert(bbox);
       if (this.layer.drawCollisionBoxes) {
         const collisionBoxDebugElement = this.getCollisionBoxElement(bbox);
         textElements.push(collisionBoxDebugElement);

package/dist/components/molecules/canvas-map/lib/styles/Style.d.ts

@@ -10,12 +10,14 @@
  * @property {Object} properties.stroke - The stroke color of the style
  * @property {Fill} properties.fill - The fill color of the style
  * @property {Object} properties.text - The text color of the style
+ * @property {number} properties.pointRadius - Radius of drawn "Point"-type geometries, if present
  */
 export class Style {
     constructor(properties: any);
     stroke: any;
     fill: any;
     text: any;
+    pointRadius: any;
     clone(): Style;
 }
 /**

package/dist/components/molecules/canvas-map/lib/styles/Style.js

@@ -3,12 +3,14 @@ class Style {
     this.stroke = properties == null ? void 0 : properties.stroke;
     this.fill = properties == null ? void 0 : properties.fill;
     this.text = properties == null ? void 0 : properties.text;
+    this.pointRadius = properties == null ? void 0 : properties.pointRadius;
   }
   clone() {
     return new Style({
       stroke: this.stroke,
       fill: this.fill,
-      text: this.text
+      text: this.text,
+      pointRadius: this.pointRadius
     });
   }
 }

package/dist/components/molecules/option-picker/style.module.css.js

@@ -1,13 +1,13 @@
-const optionPicker = "_optionPicker_1b561_1";
-const title = "_title_1b561_13";
-const options = "_options_1b561_20";
-const option = "_option_1b561_1";
-const selected = "_selected_1b561_46";
-const optionIconContainer = "_optionIconContainer_1b561_55";
-const optionIcon = "_optionIcon_1b561_55";
-const optionTitle = "_optionTitle_1b561_67";
-const checkmark = "_checkmark_1b561_78";
-const checkmarkPath = "_checkmarkPath_1b561_82";
+const optionPicker = "_optionPicker_1c1rh_1";
+const title = "_title_1c1rh_13";
+const options = "_options_1c1rh_20";
+const option = "_option_1c1rh_1";
+const selected = "_selected_1c1rh_47";
+const optionIconContainer = "_optionIconContainer_1c1rh_56";
+const optionIcon = "_optionIcon_1c1rh_56";
+const optionTitle = "_optionTitle_1c1rh_68";
+const checkmark = "_checkmark_1c1rh_79";
+const checkmarkPath = "_checkmarkPath_1c1rh_83";
 const defaultStyles = {
   optionPicker,
   title,

package/dist/components/molecules/result-summary/index.js

@@ -15,10 +15,10 @@ import "../svg-map/index.js";
 import "../canvas-map/lib/Map.js";
 import "d3-polygon";
 import "../canvas-map/lib/projection/index.js";
-import "d3-geo";
+import "../canvas-map/lib/layers/TextLayer.js";
+import "../canvas-map/lib/layers/VectorLayer.js";
 import "rbush";
 import "rbush-knn";
-import "../canvas-map/context/MapContext.js";
 import "../canvas-map/Map.js";
 function ResultSummary({
   previous,

package/dist/components/organisms/ticker/style.module.scss.js

@@ -1,15 +1,15 @@
-const tickerVertical = "_tickerVertical_ozku7_9";
-const ticker = "_ticker_ozku7_9";
-const tickerItems = "_tickerItems_ozku7_27";
-const tickerScrollVertical = "_tickerScrollVertical_ozku7_32";
-const tickerScroll = "_tickerScroll_ozku7_32";
-const tickerItem = "_tickerItem_ozku7_27";
-const controls = "_controls_ozku7_75";
-const gradient = "_gradient_ozku7_90";
-const gradientHorizontal = "_gradientHorizontal_ozku7_102";
-const buttons = "_buttons_ozku7_116";
-const button = "_button_ozku7_116";
-const buttonInner = "_buttonInner_ozku7_142";
+const tickerVertical = "_tickerVertical_1at7j_9";
+const ticker = "_ticker_1at7j_9";
+const tickerItems = "_tickerItems_1at7j_28";
+const tickerScrollVertical = "_tickerScrollVertical_1at7j_33";
+const tickerScroll = "_tickerScroll_1at7j_33";
+const tickerItem = "_tickerItem_1at7j_28";
+const controls = "_controls_1at7j_76";
+const gradient = "_gradient_1at7j_91";
+const gradientHorizontal = "_gradientHorizontal_1at7j_103";
+const buttons = "_buttons_1at7j_118";
+const button = "_button_1at7j_118";
+const buttonInner = "_buttonInner_1at7j_144";
 const styles = {
   tickerVertical,
   ticker,

package/dist/components/particles/relative-time-sentence/index.js

@@ -2,7 +2,7 @@ import { jsx } from "preact/jsx-runtime";
 import defaultStyles from "./style.module.css.js";
 import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
+import relativeTime from "dayjs/plugin/relativeTime.js";
 dayjs.extend(relativeTime);
 const RelativeTimeSentence = ({ timeStamp, styles }) => {
   styles = mergeStyles({ ...defaultStyles }, styles);

package/dist/style.css

@@ -3009,7 +3009,7 @@ body.android {
   cursor: auto;
   background-color: var(--tertiary-bg-color);
 }
-._optionPicker_1b561_1 {
+._optionPicker_1c1rh_1 {
   background-color: rgba(255, 255, 255, 0.6);
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
@@ -3021,31 +3021,32 @@ body.android {
   row-gap: 4px;
 }
 
-._title_1b561_13 {
+._title_1c1rh_13 {
   color: var(--secondary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xxsmall);
   line-height: var(--sans-line-height);
 }
 
-._options_1b561_20 {
+._options_1c1rh_20 {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
   gap: var(--space-2);
 }
 
-._options_1b561_20.vertical {
+._options_1c1rh_20.vertical {
   flex-direction: column;
 }
 
-._option_1b561_1 {
+._option_1c1rh_1 {
+  flex: 1;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-2);
   min-height: 70px;
-  max-width: 124px;
 
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
@@ -3054,16 +3055,16 @@ body.android {
   background-color: var(--primary-bg-color);
 }
 
-._option_1b561_1._selected_1b561_46 {
+._option_1c1rh_1._selected_1c1rh_47 {
   border: 1px solid var(--primary-text-color);
 }
 
-._option_1b561_1:hover:enabled {
+._option_1c1rh_1:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._optionIconContainer_1b561_55 {
+._optionIconContainer_1c1rh_56 {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -3071,26 +3072,26 @@ body.android {
   gap: var(--space-1);
 }
 
-._optionIcon_1b561_55 {
+._optionIcon_1c1rh_56 {
   width: 100%;
 }
 
-._optionTitle_1b561_67 {
+._optionTitle_1c1rh_68 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xxsmall);
   line-height: var(--sans-line-height);
 }
 
-._option_1b561_1._selected_1b561_46 ._optionTitle_1b561_67 {
+._option_1c1rh_1._selected_1c1rh_47 ._optionTitle_1c1rh_68 {
   font-weight: 700;
 }
 
-._checkmark_1b561_78 {
+._checkmark_1c1rh_79 {
   width: 11px;
 }
 
-._checkmarkPath_1b561_82 {
+._checkmarkPath_1c1rh_83 {
   fill: var(--primary-text-color);
 }
 body {
@@ -3199,30 +3200,31 @@ body.android {
   --top-inset: 58px;
 }
 
-._tickerVertical_ozku7_9 {
+._tickerVertical_1at7j_9 {
   position: relative;
   padding-bottom: 44px;
   --ticker-item-width: 100%;
 }
 @media (min-width: 30em) {
-  ._tickerVertical_ozku7_9 {
+  ._tickerVertical_1at7j_9 {
     --ticker-item-width: auto;
     padding: 0;
   }
 }
 
-._ticker_ozku7_9 {
+._ticker_1at7j_9 {
   position: relative;
   --ticker-item-width: 200px;
   padding: 0;
+  cursor: default;
 }
 
-._tickerItems_ozku7_27 {
+._tickerItems_1at7j_28 {
   width: 100%;
   overflow: clip;
 }
 
-._tickerScrollVertical_ozku7_32 {
+._tickerScrollVertical_1at7j_33 {
   display: flex;
   flex-direction: column;
   row-gap: var(--space-2);
@@ -3231,7 +3233,7 @@ body.android {
   overflow: visible;
 }
 @media (min-width: 30em) {
-  ._tickerScrollVertical_ozku7_32 {
+  ._tickerScrollVertical_1at7j_33 {
     flex-direction: row;
     column-gap: var(--space-2);
     transform: translateX(var(--ticker-offset));
@@ -3239,7 +3241,7 @@ body.android {
   }
 }
 
-._tickerScroll_ozku7_32 {
+._tickerScroll_1at7j_33 {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -3251,28 +3253,28 @@ body.android {
   width: auto;
   padding-right: 50px;
 }
-._tickerScroll_ozku7_32:-webkit-scrollbar {
+._tickerScroll_1at7j_33:-webkit-scrollbar {
   display: none; /* for Chrome, Safari, and Opera */
 }
 @media (min-width: 30em) {
-  ._tickerScroll_ozku7_32 {
+  ._tickerScroll_1at7j_33 {
     width: fit-content;
   }
 }
 
-._tickerItem_ozku7_27 {
+._tickerItem_1at7j_28 {
   width: var(--ticker-item-width);
   flex-shrink: 0;
 }
 
-._controls_ozku7_75 {
+._controls_1at7j_76 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 130px;
 }
 @media (min-width: 30em) {
-  ._controls_ozku7_75 {
+  ._controls_1at7j_76 {
     top: 0;
     right: 0;
     width: 86px;
@@ -3280,19 +3282,20 @@ body.android {
   }
 }
 
-._gradient_ozku7_90 {
+._gradient_1at7j_91 {
   width: 100%;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._gradient_ozku7_90 {
+  ._gradient_1at7j_91 {
     width: auto;
     height: 100%;
     right: 0;
   }
 }
 
-._gradientHorizontal_ozku7_102 {
+._gradientHorizontal_1at7j_103 {
+  pointer-events: none;
   width: 60px;
   height: 100%;
   right: 0;
@@ -3301,16 +3304,16 @@ body.android {
   background: linear-gradient(to right, transparent 0%, var(--tertiary-bg-color) 80%, var(--tertiary-bg-color));
 }
 @media (min-width: 30em) {
-  ._gradientHorizontal_ozku7_102 {
+  ._gradientHorizontal_1at7j_103 {
     width: auto;
   }
 }
 
-._buttons_ozku7_116 {
+._buttons_1at7j_118 {
   display: none;
 }
 @media (min-width: 30em) {
-  ._buttons_ozku7_116 {
+  ._buttons_1at7j_118 {
     position: absolute;
     top: 0;
     right: var(--space-5);
@@ -3321,36 +3324,36 @@ body.android {
   }
 }
 
-._button_ozku7_116 {
+._button_1at7j_118 {
   min-height: 40px;
   background-color: var(--tertiary-bg-color);
   padding-bottom: 20px;
 }
 @media (min-width: 30em) {
-  ._button_ozku7_116 {
+  ._button_1at7j_118 {
     display: none;
   }
 }
 
-._buttonInner_ozku7_142 {
+._buttonInner_1at7j_144 {
   background-color: var(--tertiary-bg-color);
 }
 
-._tickerVertical_ozku7_9[data-expanded=true] {
+._tickerVertical_1at7j_9[data-expanded=true] {
   padding-bottom: 0;
 }
 
-._tickerVertical_ozku7_9[data-expanded=true] ._tickerScrollVertical_ozku7_32 {
+._tickerVertical_1at7j_9[data-expanded=true] ._tickerScrollVertical_1at7j_33 {
   max-height: fit-content;
   margin-bottom: -40px;
 }
 
-._tickerVertical_ozku7_9[data-expanded=true] ._controls_ozku7_75 {
+._tickerVertical_1at7j_9[data-expanded=true] ._controls_1at7j_76 {
   position: sticky;
   margin-top: -40px;
 }
 
-._tickerVertical_ozku7_9[data-expanded=true] ._button_ozku7_116 {
+._tickerVertical_1at7j_9[data-expanded=true] ._button_1at7j_118 {
   position: absolute;
   width: 100%;
   left: 0;

package/package.json

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