@guardian/interactive-component-library 0.8.5 → 0.8.7

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

@@ -122,9 +122,14 @@ class View {
    * @returns {Extent} - The extent relative to the current viewport
    */
   projectExtent(extent) {
-    const [minX, minY] = this.projection([extent.minX, extent.minY]);
-    const [maxX, maxY] = this.projection([extent.maxX, extent.maxY]);
-    return new Extent(minX, minY, maxX, maxY).scale(1 / this.pixelRatio);
+    const [x1, y1] = this.projection([extent.minX, extent.minY]);
+    const [x2, y2] = this.projection([extent.maxX, extent.maxY]);
+    return new Extent(
+      Math.min(x1, x2),
+      Math.min(y1, y2),
+      Math.max(x1, x2),
+      Math.max(y1, y2)
+    ).scale(1 / this.pixelRatio);
   }
   invert(point) {
     const { projection, pixelRatio, transform } = this.getState();

package/dist/components/molecules/control-change/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
 import "preact/hooks";
 import { GradientIcon } from "../../particles/gradient-icon/index.js";
@@ -8,19 +8,21 @@ import "../../particles/relative-time-sentence/index.js";
 import defaultStyles from "./style.module.css.js";
 const ControlChange = ({ previous, next, text, styles }) => {
   styles = mergeStyles({ ...defaultStyles }, styles);
-  let hasChanged = previous && next !== previous;
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    hasChanged ? /* @__PURE__ */ jsx(
+  let changeIcon;
+  if (previous && next && next !== previous) {
+    changeIcon = /* @__PURE__ */ jsx(
       GradientIcon,
       {
         previous,
         next,
-        styles: {
-          previous: styles.previous,
-          next: styles.next
-        }
+        styles: { previous: styles.previous, next: styles.next }
       }
-    ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
+    );
+  } else if (next) {
+    changeIcon = /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    changeIcon && /* @__PURE__ */ jsx(Fragment, { children: changeIcon }),
     /* @__PURE__ */ jsx("strong", { className: styles.text, children: text })
   ] });
 };

package/dist/components/molecules/control-change/style.module.css.js

@@ -1,5 +1,5 @@
-const text = "_text_1b8t2_1";
-const container = "_container_1b8t2_10";
+const text = "_text_lsh6d_1";
+const container = "_container_lsh6d_13";
 const defaultStyles = {
   text,
   container

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 import "preact/hooks";
 import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
 import "preact/compat";
@@ -35,25 +35,29 @@ function ResultSummary({
 }) {
   styles = mergeStyles({ ...defaultStyles }, styles);
   if (isSlim) {
-    let hasChanged = previous && next !== previous;
+    let changeIcon;
+    if (previous && next && next !== previous) {
+      changeIcon = /* @__PURE__ */ jsx(
+        GradientIcon,
+        {
+          previous,
+          next,
+          styles: { previous: styles.previous, next: styles.next }
+        }
+      );
+    } else if (next && !previous) {
+      changeIcon = /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } });
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
         className: `${styles.container} ${styles.containerSlim}`,
         onClick,
         children: /* @__PURE__ */ jsxs("p", { className: `${styles.titleSlim} ${lineClamp && styles.lineClamp}`, children: [
-          hasChanged ? /* @__PURE__ */ jsx(
-            GradientIcon,
-            {
-              previous,
-              next,
-              styles: {
-                previous: styles.previous,
-                next: styles.next
-              }
-            }
-          ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
-          " ",
+          changeIcon && /* @__PURE__ */ jsxs(Fragment, { children: [
+            changeIcon,
+            " "
+          ] }),
           title,
           " ",
           /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })

package/dist/style.css

@@ -1294,7 +1294,7 @@ body {
   --news-grey-06: #f3f3f3;
   --con: #0077b6;
   --lab: #c70000;
-  --libdem: #e05e00;
+  --libdem: #ff7f0f;
   --green: #39a566;
   --ukip: #bb3b80;
   --snp: #f5dc00;
@@ -1314,7 +1314,7 @@ body {
   --undeclared: #e7e7e7;
   --con-2: #d4edff;
   --lab-2: #ffdbd4;
-  --libdem-2: #ffebdd;
+  --libdem-2: #ffe2cd;
   --green-2: #d3f2de;
   --ukip-2: #ffe6f4;
   --snp-2: #fff7c7;
@@ -2030,16 +2030,19 @@ body.android {
 ._tooltip_11t5d_1 {
   pointer-events: none;
 }
-._text_1b8t2_1 {
+._text_lsh6d_1 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-small);
   line-height: var(--sans-line-height);
   font-weight: 700;
+}
+
+svg + ._text_lsh6d_1 {
   margin-left: var(--space-1);
 }
 
-._container_1b8t2_10 {
+._container_lsh6d_13 {
   font-weight: 700;
 }
 ._wrapper_kh25l_1 {

package/package.json

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