@guardian/interactive-component-library 0.2.0-rc4 → 0.2.0

package/dist/style.css

@@ -2372,79 +2372,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   line-height: var(--sans-line-height);
   color: var(--primary-text-color);
 }
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._path_1cwd5_9 {
-  stroke: var(--secondary-line-color);
-  fill: none;
-}._container_9pdyv_1 {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-._svg_9pdyv_7 {
-  fill: none;
-  stroke: #121212;
-  stroke-width: 1;
-}
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._mapContainer_1ogf3_9 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-._helpTextContainer_1ogf3_15 {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-  background-color: rgba(18, 18, 18, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity 0.2s linear;
-}
-
-._helpText_1ogf3_15 {
-  margin-top: var(--space-5);
-  font-family: var(--text-sans);
-  font-weight: 700;
-  font-size: var(--sans-large);
-  line-height: var(--sans-line-height);
-  color: #fff !important;
-  margin-bottom: var(--space-3);
-}
-
-._desktopHelpText_1ogf3_40 {
-  display: none;
-}
-
-@media (any-hover: hover) {
-  ._desktopHelpText_1ogf3_40 {
-    display: block;
-  }
-  ._mobileHelpText_1ogf3_48 {
-    display: none;
-  }
-}._svg_1dms8_1 {
+._svg_1dms8_1 {
   width: 100%;
   height: 100%;
   fill: var(--primary-text-color);
@@ -2889,6 +2817,28 @@ body.android {
 ._checkmarkPath_6u92g_120 {
   fill: var(--primary-text-color);
 }
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._path_1cwd5_9 {
+  stroke: var(--secondary-line-color);
+  fill: none;
+}._container_9pdyv_1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+._svg_9pdyv_7 {
+  fill: none;
+  stroke: #121212;
+  stroke-width: 1;
+}
 ._zoomControl_13wd1_1 {
   display: inline-flex;
   flex-direction: column;
@@ -2929,6 +2879,140 @@ body.android {
   --top-inset: 58px;
 }
 
+._mapContainer_1ogf3_9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._helpTextContainer_1ogf3_15 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  background-color: rgba(18, 18, 18, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s linear;
+}
+
+._helpText_1ogf3_15 {
+  margin-top: var(--space-5);
+  font-family: var(--text-sans);
+  font-weight: 700;
+  font-size: var(--sans-large);
+  line-height: var(--sans-line-height);
+  color: #fff !important;
+  margin-bottom: var(--space-3);
+}
+
+._desktopHelpText_1ogf3_40 {
+  display: none;
+}
+
+@media (any-hover: hover) {
+  ._desktopHelpText_1ogf3_40 {
+    display: block;
+  }
+  ._mobileHelpText_1ogf3_48 {
+    display: none;
+  }
+}._optionPicker_1b561_1 {
+  background-color: rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--border-divider-color);
+  border-radius: 8px;
+
+  padding: var(--space-1) var(--space-2) var(--space-2);
+
+  display: inline-flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
+
+._title_1b561_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 {
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  gap: var(--space-2);
+}
+
+._options_1b561_20.vertical {
+  flex-direction: column;
+}
+
+._option_1b561_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;
+  padding: var(--space-1) var(--space-2);
+
+  background-color: var(--primary-bg-color);
+}
+
+._option_1b561_1._selected_1b561_46 {
+  border: 1px solid var(--primary-text-color);
+}
+
+._option_1b561_1:hover:enabled {
+  background-color: var(--news-grey-05);
+  cursor: pointer;
+}
+
+._optionIconContainer_1b561_55 {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--space-1);
+}
+
+._optionIcon_1b561_55 {
+  width: 100%;
+}
+
+._optionTitle_1b561_67 {
+  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 {
+  font-weight: 700;
+}
+
+._checkmark_1b561_78 {
+  width: 11px;
+}
+
+._checkmarkPath_1b561_82 {
+  fill: var(--primary-text-color);
+}
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
 ._coalitionsWrapper_4egbd_9 {
   max-width: 100%;
   position: relative;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.2.0-rc4",
+  "version": "0.2.0",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -11,10 +11,13 @@
   "files": [
     "dist"
   ],
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/interactive-component-library.umd.cjs",
+  "module": "./dist/interactive-component-library.js",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "import": "./dist/interactive-component-library.js",
+      "require": "./dist/interactive-component-library.umd.cjs"
+    },
     "./dist/style.css": "./dist/style.css"
   },
   "engines": {
@@ -24,34 +27,23 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
-    "build:lib": "vite build --mode lib",
-    "build:lib:watch": "vite build --mode lib --watch",
+    "build:lib": "vite build",
+    "build:lib:watch": "vite build --watch",
     "lint": "eslint .",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "test": "vitest",
     "test:cov": "vitest run --coverage",
-    "prepack": "json -f package.json -I -e \"delete this.devDependencies\"",
+    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
     "generate:styles": "node scripts/generateStyles.js",
     "prepare": "husky"
   },
-  "dependencies": {
-    "@guardian/source": "^6.1.0",
-    "d3-composite-projections": "^1.4.0",
-    "d3-timer": "^3.0.1",
-    "d3-transition": "^3.0.1",
-    "dayjs": "^1.11.12",
-    "flatbush": "^4.4.0",
-    "preact-transitioning": "^1.4.1",
-    "rbush": "^4.0.0",
-    "rbush-knn": "^4.0.0",
-    "remark-gfm": "^4.0.0"
-  },
   "peerDependencies": {
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
+    "d3-polygon": "^3.0.1",
     "preact": "10.21.0"
   },
   "lint-staged": {

package/dist/components/index.d.ts

@@ -1,3 +0,0 @@
-export * from './particles';
-export * from './molecules';
-export * from './organisms';

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

@@ -1,17 +0,0 @@
-import { Map as _Map } from './lib/Map';
-/** @typedef {{
- *    config: Object,
- *    inModalState?: boolean,
- *    onLoad?: (map: _Map) => void,
- *    children: import('preact').ComponentChildren,
- * }} MapProps
- */
-export const Map: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MapProps> & {
-    ref?: import('preact').Ref<any>;
-}>;
-export type MapProps = {
-    config: any;
-    inModalState?: boolean;
-    onLoad?: (map: _Map) => void;
-    children: import('preact').ComponentChildren;
-};

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

@@ -1,89 +0,0 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
-import { useRef, useState, useEffect } from "preact/hooks";
-import { forwardRef } from "preact/compat";
-import { Map as Map$1 } from "./lib/Map.js";
-import styles from "./style.module.scss.js";
-import { MapProvider } from "./context/MapContext.js";
-const mobileHelpText = "Use two fingers to zoom";
-const Map = forwardRef(
-  ({ config, inModalState = false, onLoad, children }, ref) => {
-    const targetRef = useRef();
-    const [map, setMap] = useState(
-      /** @type {_Map | null} */
-      null
-    );
-    const [zoomHelpText, setZoomHelpText] = useState("");
-    const [showHelpText, setShowHelpText] = useState(false);
-    useEffect(() => {
-      var _a;
-      const map2 = new Map$1({
-        ...config,
-        target: targetRef.current
-      });
-      map2.collaborativeGesturesEnabled = true;
-      setMap(map2);
-      let zoomHelpText2 = "";
-      if (((_a = navigator.userAgentData) == null ? void 0 : _a.mobile) || navigator.userAgent.indexOf("Mobile") !== -1) {
-        zoomHelpText2 = mobileHelpText;
-      } else {
-        zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
-      }
-      setZoomHelpText(zoomHelpText2);
-      return () => {
-        map2.destroy();
-        setMap(null);
-      };
-    }, [config]);
-    useEffect(() => {
-      if (!map) return;
-      let timeoutID;
-      map.onFilterEvent((showHelpText2) => {
-        if (timeoutID) clearTimeout(timeoutID);
-        setShowHelpText(showHelpText2);
-        if (showHelpText2) {
-          timeoutID = setTimeout(() => {
-            setShowHelpText(false);
-          }, 1e3);
-        }
-      });
-      return () => {
-        if (timeoutID) clearTimeout(timeoutID);
-      };
-    }, [map]);
-    useEffect(() => {
-      if (map && onLoad) {
-        onLoad(map);
-      }
-      if (map && ref) {
-        ref.current = map;
-      }
-      return () => {
-        if (ref) {
-          ref.current = null;
-        }
-      };
-    }, [map, ref, onLoad]);
-    useEffect(() => {
-      if (!map) return;
-      map.collaborativeGesturesEnabled = !inModalState;
-    }, [map, inModalState]);
-    return /* @__PURE__ */ jsxs("figure", { ref: targetRef, className: styles.mapContainer, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles.helpTextContainer,
-          style: { opacity: showHelpText ? 1 : 0 },
-          "aria-hidden": true,
-          children: [
-            /* @__PURE__ */ jsx("p", { className: [styles.helpText, styles.desktopHelpText].join(" "), children: zoomHelpText }),
-            /* @__PURE__ */ jsx("p", { className: [styles.helpText, styles.mobileHelpText].join(" "), children: mobileHelpText })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(MapProvider, { map, children })
-    ] });
-  }
-);
-export {
-  Map
-};

package/dist/components/molecules/canvas-map/context/MapContext.d.ts

@@ -1,19 +0,0 @@
-/**
- * @param {Object} params
- * @param {import('../lib/Map').Map} params.map
- * @param {import('preact').ComponentChildren} params.children
- */
-export function MapProvider({ map, children }: {
-    map: import('../lib/Map').Map;
-    children: import('preact').ComponentChildren;
-}): import("preact").JSX.Element;
-export type MapContext = {
-    registerLayer: ((layer: import('../lib/layers').Layer) => void) | null;
-};
-/**
- * @typedef {{ registerLayer: ((layer: import("../lib/layers").Layer) => void) | null }} MapContext
- */
-/**
- * @type {import('preact').Context<MapContext | null>}
- */
-export const MapContext: import('preact').Context<MapContext | null>;

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

@@ -1,20 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-import { createContext } from "preact";
-import { useEffect } from "preact/hooks";
-const MapContext = createContext(null);
-function MapProvider({ map, children }) {
-  const registeredLayers = [];
-  const registerLayer = (layer) => {
-    registeredLayers.push(layer);
-  };
-  useEffect(() => {
-    if (map && !map.hasLayers(registeredLayers)) {
-      map.setLayers(registeredLayers);
-    }
-  }, [map, children]);
-  return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer }, children });
-}
-export {
-  MapContext,
-  MapProvider
-};

package/dist/components/molecules/canvas-map/controls/ZoomControl.d.ts

@@ -1,6 +0,0 @@
-export function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }: {
-    resetEnabled: any;
-    onZoomIn: any;
-    onZoomOut: any;
-    onReset: any;
-}): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/ZoomControl.js

@@ -1,40 +0,0 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
-import { IconMinus } from "./icons/minus.js";
-import { IconPlus } from "./icons/plus.js";
-import { IconReset } from "./icons/reset.js";
-import styles from "./style.module.css.js";
-function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }) {
-  const _onZoomIn = (event) => {
-    event.stopPropagation();
-    onZoomIn(event);
-  };
-  const _onZoomOut = (event) => {
-    event.stopPropagation();
-    onZoomOut(event);
-  };
-  const _onReset = (event) => {
-    event.stopPropagation();
-    onReset(event);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: styles.zoomControl, children: [
-    /* @__PURE__ */ jsx("button", { className: styles.button, onClick: _onZoomIn, children: /* @__PURE__ */ jsx(IconPlus, {}) }),
-    /* @__PURE__ */ jsx("button", { className: styles.button, onClick: _onZoomOut, children: /* @__PURE__ */ jsx(IconMinus, {}) }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: styles.button,
-        onClick: _onReset,
-        disabled: !resetEnabled,
-        children: /* @__PURE__ */ jsx(
-          IconReset,
-          {
-            fill: resetEnabled ? "var(--primary-text-color)" : "var(--news-grey-03)"
-          }
-        )
-      }
-    )
-  ] });
-}
-export {
-  ZoomControl
-};

package/dist/components/molecules/canvas-map/controls/icons/index.d.ts

@@ -1,3 +0,0 @@
-export * from './minus';
-export * from './plus';
-export * from './reset';

package/dist/components/molecules/canvas-map/controls/icons/minus.d.ts

@@ -1 +0,0 @@
-export function IconMinus(): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/icons/minus.js

@@ -1,25 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-function IconMinus() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "22",
-      height: "4",
-      viewBox: "0 0 22 4",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M0 0.75V3.24999H21.9999V0.75H0Z",
-          fill: "var(--news-grey-01)"
-        }
-      )
-    }
-  );
-}
-export {
-  IconMinus
-};

package/dist/components/molecules/canvas-map/controls/icons/plus.d.ts

@@ -1 +0,0 @@
-export function IconPlus(): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/icons/plus.js

@@ -1,25 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-function IconPlus() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "22",
-      height: "22",
-      viewBox: "0 0 22 22",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M9.79997 12.2L10.225 21.9999H11.75L12.2 12.2L21.9999 11.75V10.225L12.2 9.79997L11.75 0H10.225L9.79997 9.79997L0 10.225V11.75L9.79997 12.2Z",
-          fill: "var(--news-grey-01)"
-        }
-      )
-    }
-  );
-}
-export {
-  IconPlus
-};

package/dist/components/molecules/canvas-map/controls/icons/reset.d.ts

@@ -1,3 +0,0 @@
-export function IconReset({ fill }: {
-    fill?: string;
-}): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/icons/reset.js

@@ -1,25 +0,0 @@
-import { jsx } from "preact/jsx-runtime";
-function IconReset({ fill = "#121212" }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "40",
-      height: "40",
-      viewBox: "0 0 40 40",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M32.107 33.107L26.5535 27.5535C24.7984 29.0775 22.5069 30 20 30L19.9916 30L19.9811 30C17.4476 30 15.1269 29.0482 13.3721 27.4882C11.3038 25.6561 10 22.9803 10 20H11.8C11.8 24.5287 15.4713 28.2 20 28.2C20.0567 28.2 20.1134 28.1994 20.1698 28.1983C24.5716 28.0965 28.1587 24.4465 28.1587 19.9772C28.1587 15.467 24.4685 11.7995 19.9811 11.7995C17.407 11.7995 15.1975 12.9385 13.6713 14.7608L16.9742 15.3075V16.4465L11.1428 16.4465L10.71 16.0137V10H11.8262L12.3956 13.4396C14.218 11.3212 16.9059 10 19.9811 10C25.5164 10 30.0039 14.4647 30.0039 19.9772C30.0039 21.8429 29.4982 23.5854 28.6171 25.0771C28.4764 25.3155 28.326 25.5474 28.1666 25.7725L33.8221 31.428C33.2844 32.0212 32.7116 32.5819 32.107 33.107Z",
-          fill
-        }
-      )
-    }
-  );
-}
-export {
-  IconReset
-};

package/dist/components/molecules/canvas-map/controls/index.d.ts

@@ -1 +0,0 @@
-export * from './ZoomControl';

package/dist/components/molecules/canvas-map/controls/style.module.css.js

@@ -1,11 +0,0 @@
-const zoomControl = "_zoomControl_13wd1_1";
-const button = "_button_13wd1_7";
-const styles = {
-  zoomControl,
-  button
-};
-export {
-  button,
-  styles as default,
-  zoomControl
-};

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

@@ -1,12 +0,0 @@
-export * from './Map';
-export * from './controls';
-export * from './lib/Feature';
-export * from './lib/FeatureCollection';
-export * from './lib/events';
-export * from './lib/projection';
-export * from './lib/layers';
-export * from './lib/styles';
-export * from './lib/interpolators';
-export * from './lib/sources/VectorSource';
-export * from './lib/formats/GeoJSON';
-export * from './lib/util/bboxFeature';

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

@@ -1,38 +0,0 @@
-/**
- * Class representing a map Feature.
- * @class
- * @property {string} id - The unique identifier of the feature
- * @property {Array} geometries - The geometries of the feature
- * @property {Object} properties - The properties of the feature
- * @property {Style} style - The style of the feature
- */
-export class Feature {
-    /**
-     * Represents a feature on the map
-     * @constructor
-     * @param {Object} props - The properties for the feature.
-     * @property {string} id - The unique identifier of the feature
-     * @property {Array} geometries - The geometries of the feature
-     * @property {Object} properties - The properties of the feature
-     * @property {import("./styles").Style | import("./styles").StyleFunction} style - The style of the feature
-     */
-    constructor({ id, geometries, properties, style }: any);
-    id: any;
-    geometries: any;
-    properties: any;
-    style: any;
-    uid: string;
-    getExtent(): any;
-    _extent: any;
-    setgeometries(geometries: any): void;
-    getProjectedGeometries(projection: any): any;
-    getStyleFunction(): any;
-    containsCoordinate(coordinate: any): boolean;
-    clone(): Feature;
-    /**
-     * Returns the geometries as a GeoJSON object
-     * @returns {Object} The GeoJSON representation of the geometries
-     */
-    getGeoJSON(): any;
-    _getGeometryGeoJSON(): any;
-}