@guardian/interactive-component-library 0.7.11 → 0.7.13

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

@@ -1,4 +1,4 @@
-import { Extent } from './util';
+import { GeoBounds, Extent } from './util';
 import { ZoomTransform } from 'd3-zoom';
 /**
  * @typedef ViewConfig
@@ -64,7 +64,7 @@ export class View {
         fitWidth(width: any, object: any): any;
         fitHeight(height: any, object: any): any;
     };
-    bounds: Extent;
+    bounds: GeoBounds;
     extent: Extent;
     minZoom: number;
     maxZoom: number;
@@ -75,10 +75,15 @@ export class View {
         bottom: number;
         left: number;
     };
-    _viewPortSize: number[];
+    /** @type { [number, number] } */
+    _viewPortSize: [number, number];
     pixelRatio: number;
-    set viewPortSize(size: number[]);
-    get viewPortSize(): number[];
+    readonly set viewPortSize(size: [number, number]);
+    /**
+     * @returns {[number, number]} - The size of the viewport in pixels
+     * @readonly
+     */
+    readonly get viewPortSize(): [number, number];
     set transform(transform: ZoomTransform);
     get transform(): ZoomTransform;
     get mapSize(): any;
@@ -135,9 +140,9 @@ export class View {
      * @function getBounds
      * @param {ZoomTransform} transform
      * @param {*} projection
-     * @returns {import("./util").GeoBoundsLike}
+     * @returns {import("./util").GeoBounds}
      */
-    getVisibleBounds(transform: ZoomTransform, projection: any): import('./util').GeoBoundsLike;
+    getVisibleBounds(transform: ZoomTransform, projection: any): import('./util').GeoBounds;
     getState(): {
         transform: ZoomTransform;
         projection: {
@@ -164,9 +169,9 @@ export class View {
             bottom: number;
             left: number;
         };
-        viewPortSize: number[];
+        viewPortSize: [number, number];
         sizeInPixels: any;
-        visibleExtent: import('./util').GeoBoundsLike;
+        visibleExtent: Extent;
     };
 }
 export type ViewConfig = {

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

@@ -4,7 +4,7 @@ import { zoomLevelToZoomScale, zoomLevelForResolution } from "./util/zoomLevel.j
 import { GeoBounds } from "./util/bounds.js";
 import { Extent } from "./util/extent.js";
 import { bboxFeature } from "./util/bboxFeature.js";
-import { resolutionForExtent } from "./util/resolution.js";
+import { resolutionForBounds } from "./util/resolution.js";
 import { Projection } from "./projection/index.js";
 import { generateDebugUrl } from "./util/debug.js";
 class View {
@@ -23,7 +23,8 @@ class View {
     this.debug = debug;
     projection.revision = 0;
     this.projection = projection;
-    this.bounds = this.extent = Extent.convert(extent) || GeoBounds.convert(bounds).toExtent();
+    this.bounds = bounds && GeoBounds.convert(bounds);
+    this.extent = Extent.convert(extent) || GeoBounds.convert(bounds).toExtent();
     this.minZoom = minZoom;
     this.maxZoom = maxZoom;
     this._transform = zoomIdentity;
@@ -40,6 +41,10 @@ class View {
       }
     }
   }
+  /**
+   * @returns {[number, number]} - The size of the viewport in pixels
+   * @readonly
+   */
   get viewPortSize() {
     return this._viewPortSize;
   }
@@ -66,8 +71,8 @@ class View {
     return scalePadding(scaledPadding, this.pixelRatio);
   }
   get baseResolution() {
-    const baseExtent = this.getVisibleBounds(zoomIdentity, this.projection);
-    const baseResolution = resolutionForExtent(baseExtent, this.viewPortSize);
+    const bounds = this.bounds ?? this.getVisibleBounds(zoomIdentity, this.projection);
+    const baseResolution = resolutionForBounds(bounds, this.viewPortSize);
     return baseResolution;
   }
   /**
@@ -139,7 +144,7 @@ class View {
   }
   // map resolution (meters per pixel)
   getResolution() {
-    return resolutionForExtent(
+    return resolutionForBounds(
       this.getVisibleBounds(this.transform, this.projection),
       this.viewPortSize
     );
@@ -173,20 +178,13 @@ class View {
    * @function getBounds
    * @param {ZoomTransform} transform
    * @param {*} projection
-   * @returns {import("./util").GeoBoundsLike}
+   * @returns {import("./util").GeoBounds}
    */
   getVisibleBounds(transform, projection) {
     const [width, height] = this.mapSize;
     const southWest = projection.invert(transform.invert([0, height]));
     const northEast = projection.invert(transform.invert([width, 0]));
-    const southWestLatitude = southWest[1];
-    const northEastLatitude = northEast[1];
-    const flippedY = southWestLatitude < northEastLatitude;
-    if (flippedY) {
-      return [southWest[0], southWest[1], northEast[0], northEast[1]];
-    } else {
-      return [southWest[0], northEast[1], northEast[0], southWest[1]];
-    }
+    return GeoBounds.convert({ sw: southWest, ne: northEast });
   }
   getState() {
     const transform = this.transform;
@@ -199,7 +197,7 @@ class View {
       padding: this.padding,
       viewPortSize: this.viewPortSize,
       sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
-      visibleExtent: this.getVisibleBounds(transform, projection)
+      visibleExtent: this.getVisibleBounds(transform, projection).toExtent()
     };
   }
 }

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

@@ -21,10 +21,10 @@ export class VectorSource {
      */
     getFeaturesAtCoordinate(coordinate: [number, number]): import('../Feature').Feature[];
     /**
-     * @param {[number, number, number, number]} extent TODO: should this be an `Extent`?
+     * @param {import("../util/extent").Extent} extent
      * @returns {import("../Feature").Feature[]}
      */
-    getFeaturesInExtent(extent: [number, number, number, number]): import('../Feature').Feature[];
+    getFeaturesInExtent(extent: import('../util/extent').Extent): import('../Feature').Feature[];
     /**
      * @param {import("../Feature").Feature[]} features
      */

package/dist/components/molecules/canvas-map/lib/sources/VectorSource.js

@@ -39,11 +39,11 @@ class VectorSource {
     return items.map((d) => d.feature);
   }
   /**
-   * @param {[number, number, number, number]} extent TODO: should this be an `Extent`?
+   * @param {import("../util/extent").Extent} extent
    * @returns {import("../Feature").Feature[]}
    */
   getFeaturesInExtent(extent) {
-    const [minX, minY, maxX, maxY] = extent;
+    const { minX, minY, maxX, maxY } = extent;
     const features = this._featuresRtree.search({ minX, minY, maxX, maxY }).map((d) => d.feature);
     return features;
   }

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

@@ -41,6 +41,12 @@ class HashPattern {
    */
   _createPattern(ctx, scale) {
     const size = this.tileSize * scale;
+    if (size <= 0) {
+      console.error(
+        `HashPattern: size (${size}) is too small to draw a pattern. Pattern width and height must be > 0`
+      );
+      return;
+    }
     this.offscreenCanvas.width = size;
     this.offscreenCanvas.height = size;
     const offCtx = this.offscreenCanvas.getContext("2d");

package/dist/components/molecules/canvas-map/lib/util/bounds.js

@@ -23,12 +23,24 @@ class GeoBounds {
     ];
   }
   toExtent() {
-    return new Extent(
-      this.southWest.lng,
-      this.southWest.lat,
-      this.northEast.lng,
-      this.northEast.lat
-    );
+    const southWestLatitude = this.southWest.lat;
+    const northEastLatitude = this.northEast.lat;
+    const flippedY = southWestLatitude < northEastLatitude;
+    if (flippedY) {
+      return new Extent(
+        this.southWest.lng,
+        this.southWest.lat,
+        this.northEast.lng,
+        this.northEast.lat
+      );
+    } else {
+      return new Extent(
+        this.southWest.lng,
+        this.northEast.lat,
+        this.northEast.lng,
+        this.southWest.lat
+      );
+    }
   }
   /**
    * Converts an array to a `GeoBounds` object.

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

@@ -1,9 +1,9 @@
 /**
  * Get map resolution
  *
- * @param {Extent} extent Geographical extent: [ lonMin, latMin, lonMax, latMax ]
- * @param {size} viewportSize Viewport size: [ width, height ]
+ * @param {import("./bounds").GeoBounds} bounds
+ * @param {[Number, Number]} viewportSize
  * @return {number} Map resolution (horizontal)
  * @api
  */
-export function resolutionForExtent(extent: Extent, viewportSize: size): number;
+export function resolutionForBounds(bounds: import('./bounds').GeoBounds, viewportSize: [number, number]): number;

package/dist/components/molecules/canvas-map/lib/util/resolution.js

@@ -1,11 +1,16 @@
 import { haversineDistance } from "./distance.js";
-function resolutionForExtent(extent, viewportSize) {
-  const [lonMin, latMin, lonMax, latMax] = extent;
-  const latMid = (latMin + latMax) / 2;
-  const distance = haversineDistance(latMid, lonMin, latMid, lonMax);
+function resolutionForBounds(bounds, viewportSize) {
+  const { southWest, northEast } = bounds;
+  const latMid = (southWest.lat + northEast.lat) / 2;
+  const distance = haversineDistance(
+    latMid,
+    southWest.lng,
+    latMid,
+    northEast.lng
+  );
   const resolution = distance / viewportSize[0];
   return resolution;
 }
 export {
-  resolutionForExtent
+  resolutionForBounds
 };

package/dist/components/molecules/column-chart/index.js

@@ -18,6 +18,14 @@ const ColumnChart = ({
   let marginBottom = minValue < 0 ? 0 : 40;
   return /* @__PURE__ */ jsxs("svg", { width: chartWidth, height: chartHeight + marginBottom, children: [
     columns.map((column, index) => {
+      let columnLabel;
+      if (typeof column.label === "string") {
+        columnLabel = column.label;
+      } else if (typeof column.label === "function") {
+        columnLabel = column.label();
+      } else {
+        throw new Error("Invalid column label type");
+      }
       const getHeight = (input) => {
         return yScale(0) - yScale(input);
       };
@@ -40,7 +48,7 @@ const ColumnChart = ({
             className: styles.text,
             x: index * totalColumnWidth + 2,
             y: column.value < 0 ? yScale(0) - 6 : yScale(0) + 20,
-            children: column.label
+            children: columnLabel
           }
         )
       ] }, index);

package/dist/components/molecules/party-profile/style.module.css.js

@@ -1,10 +1,10 @@
-const container = "_container_hbk39_1";
-const img = "_img_hbk39_5";
-const title = "_title_hbk39_13";
-const subtitle = "_subtitle_hbk39_29";
-const small = "_small_hbk39_39";
-const blurb = "_blurb_hbk39_49";
-const footnote = "_footnote_hbk39_57";
+const container = "_container_1y4nt_1";
+const img = "_img_1y4nt_5";
+const title = "_title_1y4nt_15";
+const subtitle = "_subtitle_1y4nt_31";
+const small = "_small_1y4nt_41";
+const blurb = "_blurb_1y4nt_51";
+const footnote = "_footnote_1y4nt_59";
 const defaultStyles = {
   container,
   img,

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

@@ -33,16 +33,10 @@ const ToplineResult = forwardRef(
         onMouseOut,
         ref,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.topRow, children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `${styles.primaryname} before-color--${abbreviation}`,
-                children: name
-              }
-            ),
+          /* @__PURE__ */ jsx("div", { className: `${styles.topRow} before-color--${abbreviation}`, children: /* @__PURE__ */ jsxs("span", { className: styles.primaryname, children: [
+            name,
             showInfoButton && /* @__PURE__ */ jsx("span", { className: styles.infoButton, children: /* @__PURE__ */ jsx(InfoButton, { onClick: onInfoPress, ref: infoButtonRef }) })
-          ] }),
+          ] }) }),
           secondaryName && /* @__PURE__ */ jsx("div", { className: styles.subhead, children: /* @__PURE__ */ jsx("span", { className: styles.secondaryname, children: secondaryName }) }),
           /* @__PURE__ */ jsxs("div", { className: `${styles.displayNumbers} ${displayStyle}`, children: [
             /* @__PURE__ */ jsxs("div", { className: styles.mainNumber, children: [

package/dist/components/molecules/topline-result/style.module.scss.js

@@ -1,17 +1,19 @@
-const toplineResult = "_toplineResult_1su0d_9";
-const primaryname = "_primaryname_1su0d_15";
-const secondaryname = "_secondaryname_1su0d_31";
-const name = "_name_1su0d_39";
-const displayNumbers = "_displayNumbers_1su0d_54";
-const mainNumber = "_mainNumber_1su0d_69";
-const mainNumberSuffix = "_mainNumberSuffix_1su0d_75";
-const secondaryNumber = "_secondaryNumber_1su0d_79";
-const displayRow = "_displayRow_1su0d_84";
-const displayColumn = "_displayColumn_1su0d_91";
-const topRow = "_topRow_1su0d_95";
+const toplineResult = "_toplineResult_o4gtd_9";
+const primaryname = "_primaryname_o4gtd_15";
+const infoButton = "_infoButton_o4gtd_27";
+const secondaryname = "_secondaryname_o4gtd_31";
+const name = "_name_o4gtd_39";
+const displayNumbers = "_displayNumbers_o4gtd_54";
+const mainNumber = "_mainNumber_o4gtd_69";
+const mainNumberSuffix = "_mainNumberSuffix_o4gtd_75";
+const secondaryNumber = "_secondaryNumber_o4gtd_79";
+const displayRow = "_displayRow_o4gtd_84";
+const displayColumn = "_displayColumn_o4gtd_91";
+const topRow = "_topRow_o4gtd_95";
 const defaultStyles = {
   toplineResult,
   primaryname,
+  infoButton,
   secondaryname,
   name,
   displayNumbers,
@@ -27,6 +29,7 @@ export {
   displayColumn,
   displayNumbers,
   displayRow,
+  infoButton,
   mainNumber,
   mainNumberSuffix,
   name,

package/dist/index.js

@@ -51,7 +51,7 @@ import { GeoCoordinate } from "./components/molecules/canvas-map/lib/util/coordi
 import { GeoBounds } from "./components/molecules/canvas-map/lib/util/bounds.js";
 import { Extent, combineExtents, containsCoordinate, containsXY, extentForCoordinates } from "./components/molecules/canvas-map/lib/util/extent.js";
 import { bboxFeature } from "./components/molecules/canvas-map/lib/util/bboxFeature.js";
-import { resolutionForExtent } from "./components/molecules/canvas-map/lib/util/resolution.js";
+import { resolutionForBounds } from "./components/molecules/canvas-map/lib/util/resolution.js";
 import { zoomLevelForResolution, zoomLevelToZoomScale } from "./components/molecules/canvas-map/lib/util/zoomLevel.js";
 import { interpolateFeatures } from "./components/molecules/canvas-map/lib/interpolators/interpolateFeatures.js";
 import { interpolateFill, interpolateStroke, interpolateStyles } from "./components/molecules/canvas-map/lib/interpolators/interpolateStyles.js";
@@ -141,7 +141,7 @@ export {
   interpolateFill,
   interpolateStroke,
   interpolateStyles,
-  resolutionForExtent,
+  resolutionForBounds,
   saveSVG,
   useContainerSize,
   useTouchOrHover,

package/dist/style.css

@@ -2074,29 +2074,29 @@ body.android {
   --top-inset: 58px;
 }
 
-._toplineResult_1su0d_9 {
+._toplineResult_o4gtd_9 {
   width: fit-content;
   display: flex;
   flex-direction: column;
 }
 
-._primaryname_1su0d_15 {
+._primaryname_o4gtd_15 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
   line-height: var(--headline-line-height);
   font-weight: 500;
   font-style: italic;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
 }
-._primaryname_1su0d_15:before {
-  content: "";
-  height: 4px;
-  width: 2.2em;
-  border-radius: 50px;
-  display: block;
+
+._infoButton_o4gtd_27 {
+  padding-top: var(--space-1);
 }
 
-._secondaryname_1su0d_31 {
+._secondaryname_o4gtd_31 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
@@ -2104,14 +2104,14 @@ body.android {
   line-height: var(--headline-line-height);
 }
 
-._name_1su0d_39 {
+._name_o4gtd_39 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
   line-height: var(--headline-line-height);
   font-weight: 500;
 }
-._name_1su0d_39:before {
+._name_o4gtd_39:before {
   content: "";
   height: 4px;
   width: 2.2em;
@@ -2119,7 +2119,7 @@ body.android {
   display: block;
 }
 
-._displayNumbers_1su0d_54 {
+._displayNumbers_o4gtd_54 {
   display: flex;
   align-items: baseline;
   margin-top: auto;
@@ -2130,51 +2130,54 @@ body.android {
   font-feature-settings: "lnum";
   line-height: var(--titlepiece-line-height);
 }
-._displayNumbers_1su0d_54 > div {
+._displayNumbers_o4gtd_54 > div {
   flex-shrink: 0;
 }
 
-._mainNumber_1su0d_69 {
+._mainNumber_o4gtd_69 {
   color: var(--primary-text-color);
   font-size: var(--titlepiece-xsmall);
   white-space: nowrap;
 }
 
-._mainNumberSuffix_1su0d_75 {
+._mainNumberSuffix_o4gtd_75 {
   font-size: var(--titlepiece-xxxsmall);
 }
 
-._secondaryNumber_1su0d_79 {
+._secondaryNumber_o4gtd_79 {
   color: var(--secondary-text-color-alt);
   font-size: var(--titlepiece-xxsmall);
 }
 
-._displayRow_1su0d_84 {
+._displayRow_o4gtd_84 {
   flex-direction: row;
 }
-._displayRow_1su0d_84 ._mainNumber_1su0d_69 {
+._displayRow_o4gtd_84 ._mainNumber_o4gtd_69 {
   margin-right: var(--space-0);
 }
 
-._displayColumn_1su0d_91 {
+._displayColumn_o4gtd_91 {
   flex-direction: column;
 }
 
-._topRow_1su0d_95 {
+._topRow_o4gtd_95 {
   width: fit-content;
   padding-bottom: 1px;
-  display: flex;
-  flex-direction: row;
   column-gap: var(--space-1);
   align-items: flex-end;
 }
 @media (min-width: 61.25em) {
-  ._topRow_1su0d_95 {
+  ._topRow_o4gtd_95 {
     border-bottom: none;
   }
 }
-._topRow_1su0d_95 > * {
+._topRow_o4gtd_95:before {
+  content: "";
+  height: 4px;
+  width: 2.2em;
+  border-radius: 50px;
   display: block;
+  margin-bottom: 2px;
 }body {
   --top-inset: 0;
 }
@@ -2390,19 +2393,21 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
 
 ._bar_1ci1k_10 {
 }
-._container_hbk39_1 {
+._container_1y4nt_1 {
   font-weight: 700;
 }
 
-._img_hbk39_5 {
-  height: 140px;
-  width: 140px;
+._img_1y4nt_5 {
+  height: 130px;
+  width: 130px;
   border-radius: 50%;
   float: right;
+  margin-top: var(--space-1);
   margin-left: var(--space-2);
+  margin-right: var(--space-1);
 }
 
-._title_hbk39_13 {
+._title_1y4nt_15 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
@@ -2418,7 +2423,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   }
 }
 
-._subtitle_hbk39_29 {
+._subtitle_1y4nt_31 {
   font-family: var(--text-headline);
   font-size: var(--headline-xsmall);
   color: var(--primary-text-color);
@@ -2428,7 +2433,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   margin-bottom: 6px;
 }
 
-._small_hbk39_39 {
+._small_1y4nt_41 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);
@@ -2438,7 +2443,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   margin-top: var(--space-1);
 }
 
-._blurb_hbk39_49 {
+._blurb_1y4nt_51 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);
@@ -2446,7 +2451,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   font-weight: 300;
 }
 
-._footnote_hbk39_57 {
+._footnote_1y4nt_59 {
   font-family: var(--text-serif);
   font-size: var(--body-small);
   line-height: var(--body-line-height);

package/package.json

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