@guardian/interactive-component-library 0.1.0-alpha.10 → 0.1.0-alpha.12

package/README.md

@@ -3,21 +3,8 @@
 A set of reusable components for use in interactive pages, written in Preact using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles.
 
 ## Install the component library in a new client project
-
-From [Github Packages](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry):
-
-1. [Create a personal access token (classic)](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic) with `read:packages` scope.
-2. Create a file called `.npmrc` in the root of your new project and add the following:
-
-```
-@guardian:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=YOUR_PERSONAL_ACCESS_TOKEN
-```
-
-3. Install using npm:
-
 ```
-npm i @guardian/interactive-component-library
+npm install @guardian/interactive-component-library
 ```
 
 ## Contributing to this repository
@@ -76,9 +63,9 @@ npm uninstall --no-save @guardian/interactive-component-library && npm install
 
 To publish a new version of the component library, follow these steps:
 
-1. Update the version number in `package.json`
-2. [Create a new release](https://github.com/guardian/interactive-component-library/releases/new) on GitHub (don't forget to write some release notes)
-3. Publishing the release [triggers a workflow](https://github.com/guardian/interactive-component-library/actions) to package the library and publish it to Github Packages. If the publish actions fails, you can also trigger it manually
+1. [Create a new release](https://github.com/guardian/interactive-component-library/releases/new) on GitHub (don't forget to write some release notes)
+2. Publishing the release [triggers a workflow](https://github.com/guardian/interactive-component-library/actions) to package the library and publish it to the NPM registry. If the publish actions fails, you can also trigger it manually
+3. The publish action also creates a pull request to bump the version number. Merge the pull request to finish the release
 
 ## Scripts
 

package/dist/interactive-component-library.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useRef, useState, useLayoutEffect, useId, useMemo, useEffect, useContext, useImperativeHandle } from "preact/hooks";
-import { createPortal, forwardRef } from "preact/compat";
-import { createElement, cloneElement, createContext, toChildArray } from "preact";
+import { useRef, useState, useLayoutEffect, useCallback, useEffect, useMemo, useContext, useImperativeHandle } from "preact/hooks";
+import { render, createElement, cloneElement, createContext, toChildArray } from "preact";
+import { useSyncExternalStore, createPortal, forwardRef } from "preact/compat";
 import { scaleLinear as scaleLinear$1 } from "d3-scale";
 import { geoStream, geoAlbers, geoPath, geoMercator, geoContains } from "d3-geo";
 const main = "";
@@ -224,50 +224,141 @@ function StackedBar({
     children: content2
   });
 }
-const svg$7 = "_svg_un4gp_1";
-const previous = "_previous_un4gp_7";
-const next = "_next_un4gp_11";
+function shouldUpdate(oldState, newState) {
+  if (oldState === newState)
+    return false;
+  if (isObj(oldState) && isObj(newState)) {
+    for (let key in newState) {
+      if (oldState[key] !== newState[key])
+        return true;
+    }
+    return false;
+  }
+  return true;
+}
+function isObj(obj) {
+  return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
+}
+function createStore(initialStore) {
+  let store = initialStore;
+  const listeners = /* @__PURE__ */ new Set();
+  function useStore(selectorFn = (store2) => store2) {
+    const subscribe = useCallback((updater) => {
+      const listener = {
+        updater,
+        selectorFn
+      };
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }, []);
+    const syncedStore = useSyncExternalStore(subscribe, getStore, getServerStore);
+    return selectorFn(syncedStore);
+  }
+  function setStore(action) {
+    const oldStore = store;
+    store = action instanceof Function ? action(store) : action;
+    listeners.forEach(({
+      selectorFn,
+      updater
+    }) => {
+      const oldState = selectorFn(oldStore);
+      const newState = selectorFn(store);
+      if (shouldUpdate(oldState, newState))
+        updater(() => newState);
+    });
+  }
+  function getStore() {
+    return store;
+  }
+  function getServerStore() {
+    return initialStore;
+  }
+  return [useStore, setStore, getStore];
+}
+const [useGradients, setGradients, getGradients] = createStore({});
+const svg$7 = "_svg_1cajk_6";
+const previous = "_previous_1cajk_12";
+const next = "_next_1cajk_16";
 const defaultStyles$n = {
   svg: svg$7,
   previous,
   next
 };
-const GradientIcon = ({
-  previous: previous2,
-  next: next2,
-  styles: styles2
-}) => {
-  styles2 = mergeStyles({
-    ...defaultStyles$n
-  }, styles2);
-  const gradientId = useId();
-  return jsxs("svg", {
+const GradientIcon = (props) => {
+  let {
+    previous: previous2,
+    next: next2,
+    styles: styles2
+  } = props;
+  styles2 = mergeStyles(defaultStyles$n, styles2);
+  const gradientId = `gv-gradient-def-${previous2}-${next2}`;
+  const gradients = useGradients();
+  useEffect(() => {
+    setGradients((current) => {
+      current[gradientId] = {
+        id: gradientId,
+        ...props
+      };
+      return current;
+    });
+  }, [gradientId, props]);
+  useEffect(() => {
+    let container2 = document.getElementById("gv-gradient-defs");
+    if (!container2) {
+      container2 = document.createElement("div");
+      container2.id = "gv-gradient-defs";
+      document.body.prepend(container2);
+    }
+    render(jsx(GradientDefs, {
+      gradients: Object.values(gradients)
+    }), container2);
+  }, [gradients]);
+  return jsx("svg", {
     class: styles2.svg,
     width: "24",
     height: "11",
     viewBox: "0 0 24 11",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [jsx("path", {
+    children: jsx("path", {
       d: "M0 5.434C0 2.43288 2.43288 0 5.434 0H5.69626C6.85818 0 7.9797 0.426401 8.84813 1.19834C10.6456 2.79612 13.3544 2.79612 15.1519 1.19834C16.0203 0.426401 17.1418 0 18.3037 0L18.566 0C21.5671 0 24 2.43288 24 5.434V5.566C24 8.56712 21.5671 11 18.566 11H18.3037C17.1418 11 16.0203 10.5736 15.1519 9.80166C13.3544 8.20388 10.6456 8.20388 8.84813 9.80166C7.9797 10.5736 6.85818 11 5.69626 11H5.434C2.43288 11 0 8.56712 0 5.566V5.434Z",
       fill: `url(#${gradientId})`
-    }), jsx("defs", {
-      children: jsxs("linearGradient", {
-        id: gradientId,
-        x1: "5.5",
-        y1: "5.5",
-        x2: "12",
-        y2: "5.5",
-        gradientUnits: "userSpaceOnUse",
-        children: [jsx("stop", {
-          class: `${styles2.previous} stop-color--${previous2}`
-        }), jsx("stop", {
-          class: `${styles2.next} stop-color--${next2}`,
-          offset: "1"
-        })]
-      })
-    })]
+    })
   });
 };
+function GradientDefs({
+  gradients
+}) {
+  return jsx("svg", {
+    width: "24",
+    height: "11",
+    viewBox: "0 0 24 11",
+    children: jsx("defs", {
+      children: gradients.map(({
+        id,
+        previous: previous2,
+        next: next2,
+        styles: styles2
+      }) => {
+        return jsxs("linearGradient", {
+          id,
+          x1: "5.5",
+          y1: "5.5",
+          x2: "12",
+          y2: "5.5",
+          gradientUnits: "userSpaceOnUse",
+          children: [jsx("stop", {
+            class: `${styles2 == null ? void 0 : styles2.previous} stop-color--${previous2}`
+          }), jsx("stop", {
+            class: `${styles2 == null ? void 0 : styles2.next} stop-color--${next2}`,
+            offset: "1"
+          })]
+        }, id);
+      })
+    })
+  });
+}
 const button$4 = "_button_kpmyt_1";
 const svg$6 = "_svg_kpmyt_14";
 const defaultStyles$m = {
@@ -1608,18 +1699,17 @@ function Tooltip({
   }) : tooltip2, displayElement);
 }
 function tooltipPositionForPoint({
-  targetRect,
   positionInTarget,
   tooltip: tooltip2,
   displayElement
 }) {
+  const displayElementRect = displayElement.getBoundingClientRect();
   const newPosition = {
-    x: positionInTarget.x + targetRect.x,
-    y: positionInTarget.y + targetRect.y
+    x: positionInTarget.x + displayElementRect.x,
+    y: positionInTarget.y + displayElementRect.y
   };
   const tooltipWidth = tooltip2.offsetWidth;
   const tooltipHeight = tooltip2.offsetHeight;
-  const displayElementRect = displayElement.getBoundingClientRect();
   if (newPosition.x + tooltipWidth > displayElementRect.right) {
     newPosition.x -= tooltipWidth;
   }
@@ -1686,16 +1776,20 @@ const ControlChange = ({
     })
   });
 };
-const toplineResult = "_toplineResult_lvw57_9";
-const name = "_name_lvw57_12";
-const displayNumbers = "_displayNumbers_lvw57_25";
-const mainNumber = "_mainNumber_lvw57_34";
-const secondaryNumber = "_secondaryNumber_lvw57_38";
-const displayRow = "_displayRow_lvw57_45";
-const displayColumn = "_displayColumn_lvw57_51";
-const topRow = "_topRow_lvw57_55";
+const toplineResult = "_toplineResult_w8o28_9";
+const primaryname = "_primaryname_w8o28_12";
+const secondaryname = "_secondaryname_w8o28_26";
+const name = "_name_w8o28_32";
+const displayNumbers = "_displayNumbers_w8o28_45";
+const mainNumber = "_mainNumber_w8o28_54";
+const secondaryNumber = "_secondaryNumber_w8o28_58";
+const displayRow = "_displayRow_w8o28_65";
+const displayColumn = "_displayColumn_w8o28_71";
+const topRow = "_topRow_w8o28_75";
 const defaultStyles$7 = {
   toplineResult,
+  primaryname,
+  secondaryname,
   name,
   displayNumbers,
   mainNumber,
@@ -1706,6 +1800,7 @@ const defaultStyles$7 = {
 };
 const ToplineResult = ({
   name: name2,
+  secondaryName,
   mainNumber: mainNumber2,
   secondaryNumber: secondaryNumber2,
   styles: styles2,
@@ -1719,36 +1814,70 @@ const ToplineResult = ({
     ...defaultStyles$7
   }, styles2);
   const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
-  return jsxs("div", {
-    class: styles2.toplineResult,
-    onMouseOver,
-    children: [jsxs("div", {
-      class: styles2.topRow,
-      children: [jsx("span", {
-        class: `${styles2.name} before-color--${abbreviation}`,
-        children: name2
-      }), " ", showInfoButton && jsx("span", {
-        class: styles2.infoButton,
-        children: jsx(InfoButton, {
-          onClick: onInfoPress
-        })
-      })]
-    }), jsxs("div", {
-      class: `${styles2.displayNumbers} ${displayStyle}`,
-      children: [jsx("div", {
-        class: styles2.mainNumber,
-        children: mainNumber2
-      }), jsx("div", {
-        class: styles2.secondaryNumber,
-        children: secondaryNumber2
+  return !secondaryName ? jsxs(Fragment, {
+    children: ["    ", jsxs("div", {
+      class: styles2.toplineResult,
+      onMouseOver,
+      children: [jsxs("div", {
+        class: styles2.topRow,
+        children: [jsx("span", {
+          class: `${styles2.name} before-color--${abbreviation}`,
+          children: name2
+        }), " ", showInfoButton && jsx("span", {
+          class: styles2.infoButton,
+          children: jsx(InfoButton, {
+            onClick: onInfoPress
+          })
+        })]
+      }), jsxs("div", {
+        class: `${styles2.displayNumbers} ${displayStyle}`,
+        children: [jsx("div", {
+          class: styles2.mainNumber,
+          children: mainNumber2
+        }), jsx("div", {
+          class: styles2.secondaryNumber,
+          children: secondaryNumber2
+        })]
       })]
     })]
+  }) : jsx(Fragment, {
+    children: jsxs("div", {
+      class: styles2.toplineResult,
+      onMouseOver,
+      children: [jsxs("div", {
+        class: styles2.topRow,
+        children: [jsx("span", {
+          class: `${styles2.primaryname} before-color--${abbreviation}`,
+          children: name2
+        }), " ", showInfoButton && jsx("span", {
+          class: styles2.infoButton,
+          children: jsx(InfoButton, {
+            onClick: onInfoPress
+          })
+        })]
+      }), jsxs("div", {
+        class: styles2.subhead,
+        children: [jsx("span", {
+          class: styles2.secondaryname,
+          children: secondaryName
+        }), " "]
+      }), jsxs("div", {
+        class: `${styles2.displayNumbers} ${displayStyle}`,
+        children: [jsx("div", {
+          class: styles2.mainNumber,
+          children: mainNumber2
+        }), jsx("div", {
+          class: styles2.secondaryNumber,
+          children: secondaryNumber2
+        })]
+      })]
+    })
   });
 };
-const section = "_section_te61d_9";
-const borderTop = "_borderTop_te61d_13";
-const header = "_header_te61d_45";
-const content = "_content_te61d_65";
+const section = "_section_12aiu_9";
+const borderTop = "_borderTop_12aiu_52";
+const header = "_header_12aiu_56";
+const content = "_content_12aiu_76";
 const defaultStyles$6 = {
   section,
   borderTop,
@@ -1758,7 +1887,8 @@ const defaultStyles$6 = {
 const PageSection = forwardRef(({
   children,
   styles: styles2,
-  borderTop: borderTop2 = false
+  borderTop: borderTop2 = false,
+  backgroundColor = "transparent"
 }, ref) => {
   styles2 = mergeStyles({
     ...defaultStyles$6
@@ -1766,6 +1896,9 @@ const PageSection = forwardRef(({
   return jsxs("section", {
     ref,
     className: [styles2.section, borderTop2 && styles2.borderTop].join(" "),
+    style: {
+      "--background-color": backgroundColor
+    },
     children: [jsx("div", {
       className: styles2.header,
       children: children.header
@@ -1795,15 +1928,14 @@ const ColumnChart = ({
 }) => {
   styles2 = mergeStyles(defaultStyles$5, styles2);
   const yScale = scaleLinear$1([maxValue, minValue], [0, chartHeight]);
+  const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
   return jsxs("svg", {
     width: chartWidth,
     height: chartHeight,
-    style: "",
     children: [columns.map((column, index2) => {
       const getHeight = (input2) => {
         return yScale(0) - yScale(input2);
       };
-      let totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
       return jsxs("g", {
         children: [jsx("rect", {
           x: index2 * totalColumnWidth,
@@ -1813,7 +1945,7 @@ const ColumnChart = ({
           fill: column.color,
           className: `${styles2.bar} fill-color--${column.id}`,
           id: column.id
-        }, index2), jsx("text", {
+        }), jsx("text", {
           className: styles2.text,
           x: index2 * totalColumnWidth + 2,
           y: column.value < 0 ? yScale(0) - 6 : yScale(0) + 20,