@guardian/interactive-component-library 0.5.0 → 0.5.2

package/dist/components/molecules/canvas-map/Map.d.ts

@@ -5,4 +5,5 @@ export type MapComponentProps = {
     onLoad?: (map: Map) => void;
     children: import('preact').ComponentChildren;
     mapRef?: import('preact').Ref<Map>;
+    allowZoomPan?: boolean;
 };

package/dist/components/molecules/canvas-map/Map.js

@@ -9,7 +9,8 @@ const Component = ({
   inModalState = false,
   onLoad,
   children,
-  mapRef
+  mapRef,
+  allowZoomPan = true
 }) => {
   const targetRef = useRef();
   const [map, setMap] = useState(
@@ -21,11 +22,12 @@ const Component = ({
   useEffect(() => {
     var _a;
     if (!targetRef.current) return;
+    config.allowZoomPan = allowZoomPan;
     const map2 = new Map({
       ...config,
       target: targetRef.current
     });
-    map2.collaborativeGesturesEnabled(true);
+    if (allowZoomPan) map2.collaborativeGesturesEnabled(true);
     setMap(map2);
     if (mapRef) {
       mapRef.current = map2;
@@ -50,9 +52,9 @@ const Component = ({
         mapRef.current = null;
       }
     };
-  }, [config, onLoad, mapRef]);
+  }, [config, onLoad, mapRef, allowZoomPan]);
   useEffect(() => {
-    if (!map) return;
+    if (!map || !allowZoomPan) return;
     let timeoutID;
     map.onFilterEvent((showHelpText2) => {
       if (timeoutID) clearTimeout(timeoutID);
@@ -66,13 +68,13 @@ const Component = ({
     return () => {
       if (timeoutID) clearTimeout(timeoutID);
     };
-  }, [map]);
+  }, [map, allowZoomPan]);
   useEffect(() => {
-    if (!map) return;
+    if (!map || !allowZoomPan) return;
     map.collaborativeGesturesEnabled(!inModalState);
-  }, [map, inModalState]);
+  }, [map, inModalState, allowZoomPan]);
   return /* @__PURE__ */ jsxs("figure", { ref: targetRef, className: styles.mapContainer, children: [
-    /* @__PURE__ */ jsxs(
+    allowZoomPan && /* @__PURE__ */ jsxs(
       "div",
       {
         className: styles.helpTextContainer,

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

@@ -11,16 +11,20 @@ export class Map {
      * @param {Object} config - The configuration for the map.
      * @param {Object} config.view - The view configuration for the map.
      * @param {boolean} config.debug - Whether to enable debug mode or not.
+     * @param {boolean} config.allowZoomPan - Whether to enable zoom and pan functionality or not.
      * @param {HTMLElement} config.target - The target element to render the map into.
      */
     constructor(config: {
         view: any;
         debug: boolean;
+        allowZoomPan: boolean;
         target: HTMLElement;
     });
+    allowZoomPan: boolean;
     options: {
         view: any;
         debug: boolean;
+        allowZoomPan: boolean;
         target: HTMLElement;
     };
     view: View;

package/dist/components/molecules/canvas-map/lib/Map.js

@@ -15,12 +15,14 @@ class Map {
    * @param {Object} config - The configuration for the map.
    * @param {Object} config.view - The view configuration for the map.
    * @param {boolean} config.debug - Whether to enable debug mode or not.
+   * @param {boolean} config.allowZoomPan - Whether to enable zoom and pan functionality or not.
    * @param {HTMLElement} config.target - The target element to render the map into.
    */
   constructor(config) {
     if (config.debug) {
       console.log("Map config", config);
     }
+    this.allowZoomPan = config.allowZoomPan;
     this.options = config;
     this.view = new View(config.view, config.debug);
     this.target = config.target;
@@ -236,6 +238,9 @@ class Map {
       }
       return (!event.ctrlKey || event.type === "wheel") && !event.button;
     }).on("zoom", (event) => {
+      if (!this.allowZoomPan) {
+        return;
+      }
       this.view.transform = event.transform;
       this._requestRender();
       this.dispatcher.dispatch(MapEvent.ZOOM, {

package/dist/components/organisms/ticker/index.d.ts

@@ -1,6 +1,7 @@
-export function Ticker({ maxItems, onStateChange, verticalAtMobile, children, }: {
+export function Ticker({ maxItems, onStateChange, verticalAtMobile, styles, children, }: {
     maxItems?: number;
     onStateChange: any;
     verticalAtMobile?: boolean;
+    styles: any;
     children: any;
 }): import("preact").JSX.Element;

package/dist/components/organisms/ticker/index.js

@@ -5,13 +5,16 @@ import { useContainerSize } from "../../../shared/hooks/useContainerSize.js";
 import { TickerControlsDesktop } from "./lib/TickerControlsDesktop.js";
 import { TickerControlsMobileVertical } from "./lib/TickerControlsMobileVertical.js";
 import { getOffsetDistance } from "./lib/helpers/tickerHelper.js";
-import styles from "./style.module.scss.js";
+import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
+import defaultStyles from "./style.module.scss.js";
 function Ticker({
   maxItems = 20,
   onStateChange,
   verticalAtMobile = false,
+  styles,
   children
 }) {
+  styles = mergeStyles({ ...defaultStyles }, styles);
   const [pageIndex, setPageIndex] = useState(0);
   const [scrollElWidth, setScrollElWidth] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);

package/dist/components/organisms/ticker/lib/TickerControlsDesktop.js

@@ -4,7 +4,7 @@ import "preact/hooks";
 import "../../../particles/info-button/index.js";
 import "../../../particles/relative-time-sentence/index.js";
 import { ArrowButton } from "../../../particles/arrow-button/index.js";
-import styles from "../style.module.scss.js";
+import defaultStyles from "../style.module.scss.js";
 const TickerControlsDesktop = ({
   hideButtons,
   controlsRef,
@@ -22,11 +22,11 @@ const TickerControlsDesktop = ({
     "div",
     {
       ref: controlsRef,
-      className: styles.controls,
+      className: defaultStyles.controls,
       style: hideButtons && { display: "none" },
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
-        /* @__PURE__ */ jsxs("div", { className: styles.buttons, children: [
+        /* @__PURE__ */ jsx("div", { className: defaultStyles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: defaultStyles.buttons, children: [
           /* @__PURE__ */ jsx(
             ArrowButton,
             {

package/dist/components/organisms/ticker/lib/TickerControlsMobileVertical.js

@@ -4,7 +4,7 @@ import "preact/hooks";
 import "../../../particles/info-button/index.js";
 import "../../../particles/relative-time-sentence/index.js";
 import { Button } from "../../../particles/button/index.js";
-import styles from "../style.module.scss.js";
+import defaultStyles from "../style.module.scss.js";
 const TickerControlsMobileVertical = ({
   hideButtons,
   controlsRef,
@@ -15,15 +15,15 @@ const TickerControlsMobileVertical = ({
     "div",
     {
       ref: controlsRef,
-      className: styles.controls,
+      className: defaultStyles.controls,
       style: hideButtons && { display: "none" },
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
-        /* @__PURE__ */ jsx("div", { className: styles.button, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: defaultStyles.gradient, children: /* @__PURE__ */ jsx(Gradient, {}) }),
+        /* @__PURE__ */ jsx("div", { className: defaultStyles.button, children: /* @__PURE__ */ jsx(
           Button,
           {
             type: "regular",
-            styles: { buttonInner: styles.buttonInner },
+            styles: { buttonInner: defaultStyles.buttonInner },
             onClick: toggleExpandedState,
             children: buttonText
           }

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

@@ -10,7 +10,7 @@ const gradientHorizontal = "_gradientHorizontal_1at7j_103";
 const buttons = "_buttons_1at7j_118";
 const button = "_button_1at7j_118";
 const buttonInner = "_buttonInner_1at7j_144";
-const styles = {
+const defaultStyles = {
   tickerVertical,
   ticker,
   tickerItems,
@@ -29,7 +29,7 @@ export {
   buttonInner,
   buttons,
   controls,
-  styles as default,
+  defaultStyles as default,
   gradient,
   gradientHorizontal,
   ticker,

package/package.json

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