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

package/dist/interactive-component-library.umd.cjs

@@ -7,7 +7,7 @@
   const rotated = "_rotated_nq9z3_6";
   const path$4 = "_path_nq9z3_10";
   const active = "_active_nq9z3_14";
-  const defaultStyles$q = {
+  const defaultStyles$r = {
     group,
     rotated,
     path: path$4,
@@ -46,13 +46,13 @@
     styles: styles2
   }) {
     const defaultStylesCopy = {
-      ...defaultStyles$q
+      ...defaultStyles$r
     };
     if (active2) {
-      defaultStylesCopy.path = mergeStyles(defaultStyles$q.path, defaultStyles$q.active);
+      defaultStylesCopy.path = mergeStyles(defaultStyles$r.path, defaultStyles$r.active);
     }
     if (direction === DIRECTION.up) {
-      defaultStylesCopy.group = mergeStyles(defaultStyles$q.group, defaultStyles$q.rotated);
+      defaultStylesCopy.group = mergeStyles(defaultStyles$r.group, defaultStyles$r.rotated);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return jsxRuntime.jsx("svg", {
@@ -75,12 +75,12 @@
   }
   const container$4 = "_container_jzalm_1";
   const dot = "_dot_jzalm_6";
-  const circle$1 = "_circle_jzalm_13";
+  const circle$2 = "_circle_jzalm_13";
   const text$4 = "_text_jzalm_17";
-  const defaultStyles$p = {
+  const defaultStyles$q = {
     container: container$4,
     dot,
-    circle: circle$1,
+    circle: circle$2,
     text: text$4
   };
   const DOT_TYPE = {
@@ -94,10 +94,10 @@
     abbreviation
   }) => {
     const defaultStylesCopy = {
-      ...defaultStyles$p
+      ...defaultStyles$q
     };
     if (dotType === DOT_TYPE.round) {
-      defaultStylesCopy.dot = mergeStyles(defaultStyles$p.dot, defaultStyles$p.circle);
+      defaultStylesCopy.dot = mergeStyles(defaultStyles$q.dot, defaultStyles$q.circle);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
     return jsxRuntime.jsxs("div", {
@@ -132,7 +132,7 @@
   const bar$2 = "_bar_wmb0k_1";
   const label$1 = "_label_wmb0k_5";
   const backgroundRect = "_backgroundRect_wmb0k_11";
-  const defaultStyles$o = {
+  const defaultStyles$p = {
     bar: bar$2,
     label: label$1,
     backgroundRect
@@ -166,7 +166,7 @@
       setHideLabels(false);
     }, [stack, width, height]);
     styles2 = mergeStyles({
-      ...defaultStyles$o
+      ...defaultStyles$p
     }, styles2);
     let totalWidth = 0;
     const content2 = stack.map((d2, index2) => {
@@ -276,11 +276,11 @@
     return [useStore, setStore, getStore];
   }
   const [useGradients, setGradients, getGradients] = createStore({});
-  const svg$7 = "_svg_1cajk_6";
+  const svg$8 = "_svg_1cajk_6";
   const previous = "_previous_1cajk_12";
   const next = "_next_1cajk_16";
-  const defaultStyles$n = {
-    svg: svg$7,
+  const defaultStyles$o = {
+    svg: svg$8,
     previous,
     next
   };
@@ -290,7 +290,7 @@
       next: next2,
       styles: styles2
     } = props;
-    styles2 = mergeStyles(defaultStyles$n, styles2);
+    styles2 = mergeStyles(defaultStyles$o, styles2);
     const gradientId = `gv-gradient-def-${previous2}-${next2}`;
     const gradients = useGradients();
     hooks.useEffect(() => {
@@ -358,17 +358,17 @@
     });
   }
   const button$4 = "_button_kpmyt_1";
-  const svg$6 = "_svg_kpmyt_14";
-  const defaultStyles$m = {
+  const svg$7 = "_svg_kpmyt_14";
+  const defaultStyles$n = {
     button: button$4,
-    svg: svg$6
+    svg: svg$7
   };
   const InfoButton = ({
     onClick,
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$m
+      ...defaultStyles$n
     }, styles2);
     return jsxRuntime.jsx("button", {
       class: styles2.button,
@@ -383,28 +383,32 @@
       })
     });
   };
-  const circleicon = "_circleicon_1ge2m_1";
-  const rect = "_rect_1ge2m_7";
-  const defaultStyles$l = {
-    circleicon,
-    rect
+  const svg$6 = "_svg_1v49v_1";
+  const circle$1 = "_circle_1v49v_5";
+  const pulse = "_pulse_1v49v_9";
+  const defaultStyles$m = {
+    svg: svg$6,
+    circle: circle$1,
+    pulse
   };
   const CircleIcon = ({
-    abbreviation,
+    color,
+    pulse: pulse2 = false,
     styles: styles2
   }) => {
-    styles2 = mergeStyles({
-      ...defaultStyles$l
-    }, styles2);
+    styles2 = mergeStyles(defaultStyles$m, styles2);
     return jsxRuntime.jsx("svg", {
-      style: styles2.circleicon,
+      style: styles2.svg,
       fill: "none",
       height: "11",
       viewBox: "0 0 11 11",
       width: "11",
       xmlns: "http://www.w3.org/2000/svg",
       children: jsxRuntime.jsx("rect", {
-        class: `${styles2.rect}  fill-color--${abbreviation}`,
+        class: [styles2.circle, pulse2 && styles2.pulse].join(" "),
+        style: {
+          fill: color
+        },
         height: "11",
         rx: "5.5",
         width: "11"
@@ -412,7 +416,7 @@
     });
   };
   const text$3 = "_text_1okyv_1";
-  const defaultStyles$k = {
+  const defaultStyles$l = {
     text: text$3
   };
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -762,7 +766,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$k
+      ...defaultStyles$l
     }, styles2);
     let timeSince = dayjs(timeStamp).fromNow();
     return jsxRuntime.jsx("span", {
@@ -772,7 +776,7 @@
   };
   const pageContainer = "_pageContainer_1s0yq_9";
   const sideBorders = "_sideBorders_1s0yq_42";
-  const defaultStyles$j = {
+  const defaultStyles$k = {
     pageContainer,
     sideBorders
   };
@@ -784,14 +788,14 @@
     const {
       pageContainer: pageContainer2,
       sideBorders: sideBordersStyle
-    } = mergeStyles(defaultStyles$j, styles2);
+    } = mergeStyles(defaultStyles$k, styles2);
     return jsxRuntime.jsx("div", {
       className: [pageContainer2, sideBorders2 && sideBordersStyle].join(" "),
       children
     });
   }
   const bar$1 = "_bar_17pyf_9";
-  const defaultStyles$i = {
+  const defaultStyles$j = {
     bar: bar$1
   };
   function ChangeBar({
@@ -809,7 +813,7 @@
     let thisStyles = ` height: ${height}; width: ${barwidth}px; ${positive ? `left: ${posleft}` : `left: ${negleft}`}`;
     let thisColor = ` bg-color--${party}`;
     styles2 = mergeStyles({
-      ...defaultStyles$i
+      ...defaultStyles$j
     }, styles2);
     return jsxRuntime.jsx("div", {
       className: styles2.wrapper,
@@ -824,7 +828,7 @@
   const dividingLineColor = "_dividingLineColor_886i1_16";
   const square = "_square_886i1_20";
   const corner = "_corner_886i1_24";
-  const defaultStyles$h = {
+  const defaultStyles$i = {
     svg: svg$5,
     dividingLineColor,
     square,
@@ -837,7 +841,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$h
+      ...defaultStyles$i
     }, styles2);
     let cornerSize = squareSize * 0.625;
     let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -875,7 +879,7 @@
   const stackedGridRotateItems90 = "_stackedGridRotateItems90_1e05o_19";
   const stackedGridRotateItems180 = "_stackedGridRotateItems180_1e05o_25";
   const stackedGridRotateItems270 = "_stackedGridRotateItems270_1e05o_31";
-  const defaultStyles$g = {
+  const defaultStyles$h = {
     stackedGridContainer,
     stackedGridRotateItems0,
     stackedGridRotateItems90,
@@ -914,7 +918,7 @@
       width: containerWidth,
       transform: containerFlip
     };
-    styles2 = mergeStyles(defaultStyles$g, styles2);
+    styles2 = mergeStyles(defaultStyles$h, styles2);
     return jsxRuntime.jsx("div", {
       style: flexStyles,
       className: `${styles2.stackedGridContainer} ${styles2[itemRotateClass]}`,
@@ -923,7 +927,7 @@
   };
   const svg$4 = "_svg_l2fsl_9";
   const squareFill = "_squareFill_l2fsl_16";
-  const defaultStyles$f = {
+  const defaultStyles$g = {
     svg: svg$4,
     squareFill
   };
@@ -933,7 +937,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$f
+      ...defaultStyles$g
     }, styles2);
     return jsxRuntime.jsx("svg", {
       width: size,
@@ -951,7 +955,7 @@
   };
   const button$3 = "_button_1fees_1";
   const icon = "_icon_1fees_6";
-  const defaultStyles$e = {
+  const defaultStyles$f = {
     button: button$3,
     icon
   };
@@ -961,7 +965,7 @@
     styles: styles2,
     onClick
   }) {
-    styles2 = mergeStyles(defaultStyles$e, styles2);
+    styles2 = mergeStyles(defaultStyles$f, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       disabled,
@@ -987,7 +991,7 @@
   }
   const button$2 = "_button_19t7j_1";
   const buttonInner$1 = "_buttonInner_19t7j_6";
-  const defaultStyles$d = {
+  const defaultStyles$e = {
     button: button$2,
     buttonInner: buttonInner$1
   };
@@ -997,7 +1001,7 @@
     styles: styles2,
     children
   }) {
-    styles2 = mergeStyles(defaultStyles$d, styles2);
+    styles2 = mergeStyles(defaultStyles$e, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
       "data-type": type,
@@ -1012,7 +1016,7 @@
   const buttonBorder = "_buttonBorder_6w12u_10";
   const svg$3 = "_svg_6w12u_18";
   const path$3 = "_path_6w12u_24";
-  const defaultStyles$c = {
+  const defaultStyles$d = {
     button: button$1,
     buttonBorder,
     svg: svg$3,
@@ -1023,7 +1027,7 @@
     onClick,
     styles: styles2
   }) {
-    styles2 = mergeStyles(defaultStyles$c, styles2);
+    styles2 = mergeStyles(defaultStyles$d, styles2);
     return jsxRuntime.jsx("button", {
       className: [styles2.button, border && styles2.buttonBorder].join(" "),
       onClick,
@@ -1166,7 +1170,7 @@
   const headerCellButton = "_headerCellButton_1b75c_39";
   const bodyRow = "_bodyRow_1b75c_48";
   const bodyCell = "_bodyCell_1b75c_53";
-  const defaultStyles$b = {
+  const defaultStyles$c = {
     table,
     hideHeader,
     hideHeaderNoBorder,
@@ -1207,7 +1211,7 @@
         };
       });
     };
-    styles2 = mergeStyles(defaultStyles$b, styles2);
+    styles2 = mergeStyles(defaultStyles$c, styles2);
     return jsxRuntime.jsxs("table", {
       className: styles2.table,
       children: [jsxRuntime.jsx("thead", {
@@ -1340,7 +1344,7 @@
   const y2Label = "_y2Label_gj7pr_28";
   const axis$1 = "_axis_gj7pr_32";
   const axisLabel = "_axisLabel_gj7pr_37";
-  const defaultStyles$a = {
+  const defaultStyles$b = {
     slopeChartContainer,
     svg: svg$2,
     line,
@@ -1392,7 +1396,7 @@
       return positionLabels(labels);
     }, [lines, y2Label2, yScale]);
     styles2 = mergeStyles({
-      ...defaultStyles$a
+      ...defaultStyles$b
     }, styles2);
     const chart = jsxRuntime.jsx("svg", {
       class: styles2.svg,
@@ -1481,9 +1485,9 @@
       clientY,
       currentTarget
     }) => {
-      const rect2 = currentTarget.getBoundingClientRect();
-      const x = clientX - rect2.left;
-      const y = clientY - rect2.top;
+      const rect = currentTarget.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
       requestAnimationFrame(() => {
         setPosition({
           x,
@@ -1615,7 +1619,7 @@
     });
   }
   const tooltip = "_tooltip_11t5d_1";
-  const defaultStyles$9 = {
+  const defaultStyles$a = {
     tooltip
   };
   const TooltipType = {
@@ -1643,7 +1647,7 @@
       hoverActive
     } = useTooltipTarget(targetElement, trackPosition);
     const tooltipRef = hooks.useRef(null);
-    styles2 = mergeStyles(defaultStyles$9, styles2);
+    styles2 = mergeStyles(defaultStyles$a, styles2);
     hooks.useEffect(() => {
       let element = null;
       if (typeof refOrSelector === "string") {
@@ -1738,7 +1742,7 @@
   }
   const text$2 = "_text_1b8t2_1";
   const container$3 = "_container_1b8t2_10";
-  const defaultStyles$8 = {
+  const defaultStyles$9 = {
     text: text$2,
     container: container$3
   };
@@ -1749,7 +1753,7 @@
     styles: styles2
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$8
+      ...defaultStyles$9
     }, styles2);
     let hasChanged = next2 !== previous2;
     return jsxRuntime.jsx("div", {
@@ -1763,9 +1767,8 @@
             next: styles2.next
           }
         }) : jsxRuntime.jsx(CircleIcon, {
-          abbreviation: next2,
           styles: {
-            rect: styles2.next
+            circle: styles2.next || `fill-color--${next2}`
           }
         }), jsxRuntime.jsx("strong", {
           className: styles2.text,
@@ -1784,7 +1787,7 @@
   const displayRow = "_displayRow_w8o28_65";
   const displayColumn = "_displayColumn_w8o28_71";
   const topRow = "_topRow_w8o28_75";
-  const defaultStyles$7 = {
+  const defaultStyles$8 = {
     toplineResult,
     primaryname,
     secondaryname,
@@ -1809,7 +1812,7 @@
     showInfoButton = false
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$7
+      ...defaultStyles$8
     }, styles2);
     const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
     return !secondaryName ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -1876,7 +1879,7 @@
   const borderTop = "_borderTop_12aiu_52";
   const header = "_header_12aiu_56";
   const content = "_content_12aiu_76";
-  const defaultStyles$6 = {
+  const defaultStyles$7 = {
     section,
     borderTop,
     header,
@@ -1889,7 +1892,7 @@
     backgroundColor = "transparent"
   }, ref) => {
     styles2 = mergeStyles({
-      ...defaultStyles$6
+      ...defaultStyles$7
     }, styles2);
     return jsxRuntime.jsxs("section", {
       ref,
@@ -1909,7 +1912,7 @@
   const text$1 = "_text_lo5h3_1";
   const axis = "_axis_lo5h3_6";
   const bar = "_bar_lo5h3_10";
-  const defaultStyles$5 = {
+  const defaultStyles$6 = {
     text: text$1,
     axis,
     bar
@@ -1924,7 +1927,7 @@
     columnPadding,
     styles: styles2
   }) => {
-    styles2 = mergeStyles(defaultStyles$5, styles2);
+    styles2 = mergeStyles(defaultStyles$6, styles2);
     const yScale = d3Scale.scaleLinear([maxValue, minValue], [0, chartHeight]);
     const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
     return jsxRuntime.jsxs("svg", {
@@ -1967,7 +1970,7 @@
   const leftCell = "_leftCell_vd5ly_55";
   const rightCell = "_rightCell_vd5ly_55";
   const mugshot = "_mugshot_vd5ly_71";
-  const defaultStyles$4 = {
+  const defaultStyles$5 = {
     text,
     container: container$2,
     title: title$1,
@@ -1986,7 +1989,7 @@
     abbreviation
   }) => {
     styles2 = mergeStyles({
-      ...defaultStyles$4
+      ...defaultStyles$5
     }, styles2);
     return jsxRuntime.jsx("div", {
       class: styles2.container,
@@ -2295,7 +2298,7 @@
     });
   }
   const path$1 = "_path_1cwd5_9";
-  const defaultStyles$3 = {
+  const defaultStyles$4 = {
     path: path$1
   };
   function CompositionBorders({
@@ -2304,7 +2307,7 @@
     const {
       projection
     } = hooks.useContext(MapContext);
-    styles2 = mergeStyles(defaultStyles$3, styles2);
+    styles2 = mergeStyles(defaultStyles$4, styles2);
     return jsxRuntime.jsx("path", {
       className: styles2.path,
       d: projection.getCompositionBorders()
@@ -2603,7 +2606,7 @@
   });
   const container = "_container_azu4a_1";
   const paragraph = "_paragraph_azu4a_12";
-  const defaultStyles$2 = {
+  const defaultStyles$3 = {
     container,
     paragraph
   };
@@ -2616,7 +2619,7 @@
     styles: styles2
   }) {
     styles2 = mergeStyles({
-      ...defaultStyles$2
+      ...defaultStyles$3
     }, styles2);
     return jsxRuntime.jsxs("div", {
       class: styles2.container,
@@ -2659,7 +2662,7 @@
   const suggestion = "_suggestion_g5w44_36";
   const selected = "_selected_g5w44_59";
   const highlighted = "_highlighted_g5w44_63";
-  const defaultStyles$1 = {
+  const defaultStyles$2 = {
     searchContainer,
     input,
     searchIcon,
@@ -2680,7 +2683,7 @@
     styles: styles2
   }) {
     var _a, _b, _c;
-    styles2 = mergeStyles(defaultStyles$1, styles2);
+    styles2 = mergeStyles(defaultStyles$2, styles2);
     const inputRef = hooks.useRef(null);
     const [selectedIndex, setSelectedIndex] = hooks.useState(-1);
     const [suggestions2, setSuggestions] = hooks.useState();
@@ -2789,6 +2792,32 @@
       })
     });
   }
+  const refreshIndicator = "_refreshIndicator_u6lji_1";
+  const liveText = "_liveText_u6lji_8";
+  const refreshText = "_refreshText_u6lji_9";
+  const defaultStyles$1 = {
+    refreshIndicator,
+    liveText,
+    refreshText
+  };
+  function RefreshIndicator({
+    text: text2,
+    styles: styles2
+  }) {
+    styles2 = mergeStyles(defaultStyles$1, styles2);
+    return jsxRuntime.jsxs("div", {
+      className: styles2.refreshIndicator,
+      children: [jsxRuntime.jsx(CircleIcon, {
+        pulse: true
+      }), jsxRuntime.jsx("span", {
+        className: styles2.liveText,
+        children: "LIVE"
+      }), jsxRuntime.jsx("span", {
+        className: styles2.refreshText,
+        children: text2
+      })]
+    });
+  }
   const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
   const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
   const coalition = "_coalition_1ahqy_9";
@@ -3091,6 +3120,7 @@
   exports2.PageSection = PageSection;
   exports2.PartyProfile = PartyProfile;
   exports2.Projection = Projection;
+  exports2.RefreshIndicator = RefreshIndicator;
   exports2.RelativeTimeSentence = RelativeTimeSentence;
   exports2.ResultSummary = ResultSummary;
   exports2.SearchInput = SearchInput;