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

package/dist/interactive-component-library.js

@@ -9,7 +9,7 @@ const group = "_group_nq9z3_1";
 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,
@@ -48,13 +48,13 @@ function Chevron({
   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 jsx("svg", {
@@ -77,12 +77,12 @@ function Chevron({
 }
 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 = {
@@ -96,10 +96,10 @@ const LegendItem = ({
   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 jsxs("div", {
@@ -134,7 +134,7 @@ function isDarkColor(color) {
 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
@@ -168,7 +168,7 @@ function StackedBar({
     setHideLabels(false);
   }, [stack, width, height]);
   styles2 = mergeStyles({
-    ...defaultStyles$o
+    ...defaultStyles$p
   }, styles2);
   let totalWidth = 0;
   const content2 = stack.map((d2, index2) => {
@@ -278,11 +278,11 @@ function createStore(initialStore) {
   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
 };
@@ -292,7 +292,7 @@ const GradientIcon = (props) => {
     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();
   useEffect(() => {
@@ -360,17 +360,17 @@ function GradientDefs({
   });
 }
 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 jsx("button", {
     class: styles2.button,
@@ -385,28 +385,32 @@ const InfoButton = ({
     })
   });
 };
-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 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: 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"
@@ -414,7 +418,7 @@ const CircleIcon = ({
   });
 };
 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 : {};
@@ -764,7 +768,7 @@ const RelativeTimeSentence = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$k
+    ...defaultStyles$l
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
@@ -774,7 +778,7 @@ const RelativeTimeSentence = ({
 };
 const pageContainer = "_pageContainer_1s0yq_9";
 const sideBorders = "_sideBorders_1s0yq_42";
-const defaultStyles$j = {
+const defaultStyles$k = {
   pageContainer,
   sideBorders
 };
@@ -786,14 +790,14 @@ function Container({
   const {
     pageContainer: pageContainer2,
     sideBorders: sideBordersStyle
-  } = mergeStyles(defaultStyles$j, styles2);
+  } = mergeStyles(defaultStyles$k, styles2);
   return 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({
@@ -811,7 +815,7 @@ function ChangeBar({
   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 jsx("div", {
     className: styles2.wrapper,
@@ -826,7 +830,7 @@ const svg$5 = "_svg_886i1_9";
 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,
@@ -839,7 +843,7 @@ const SquareCutCornerIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$h
+    ...defaultStyles$i
   }, styles2);
   let cornerSize = squareSize * 0.625;
   let cornerMargin = squareSize < 100 ? squareSize / 6 : 10;
@@ -877,7 +881,7 @@ const stackedGridRotateItems0 = "_stackedGridRotateItems0_1e05o_13";
 const stackedGridRotateItems90 = "_stackedGridRotateItems90_1e05o_19";
 const stackedGridRotateItems180 = "_stackedGridRotateItems180_1e05o_25";
 const stackedGridRotateItems270 = "_stackedGridRotateItems270_1e05o_31";
-const defaultStyles$g = {
+const defaultStyles$h = {
   stackedGridContainer,
   stackedGridRotateItems0,
   stackedGridRotateItems90,
@@ -916,7 +920,7 @@ const StackedGrid = ({
     width: containerWidth,
     transform: containerFlip
   };
-  styles2 = mergeStyles(defaultStyles$g, styles2);
+  styles2 = mergeStyles(defaultStyles$h, styles2);
   return jsx("div", {
     style: flexStyles,
     className: `${styles2.stackedGridContainer} ${styles2[itemRotateClass]}`,
@@ -925,7 +929,7 @@ const StackedGrid = ({
 };
 const svg$4 = "_svg_l2fsl_9";
 const squareFill = "_squareFill_l2fsl_16";
-const defaultStyles$f = {
+const defaultStyles$g = {
   svg: svg$4,
   squareFill
 };
@@ -935,7 +939,7 @@ const SquareIcon = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$f
+    ...defaultStyles$g
   }, styles2);
   return jsx("svg", {
     width: size,
@@ -953,7 +957,7 @@ const SquareIcon = ({
 };
 const button$3 = "_button_1fees_1";
 const icon = "_icon_1fees_6";
-const defaultStyles$e = {
+const defaultStyles$f = {
   button: button$3,
   icon
 };
@@ -963,7 +967,7 @@ function ArrowButton({
   styles: styles2,
   onClick
 }) {
-  styles2 = mergeStyles(defaultStyles$e, styles2);
+  styles2 = mergeStyles(defaultStyles$f, styles2);
   return jsx("button", {
     className: styles2.button,
     disabled,
@@ -989,7 +993,7 @@ function ArrowButton({
 }
 const button$2 = "_button_19t7j_1";
 const buttonInner$1 = "_buttonInner_19t7j_6";
-const defaultStyles$d = {
+const defaultStyles$e = {
   button: button$2,
   buttonInner: buttonInner$1
 };
@@ -999,7 +1003,7 @@ function Button({
   styles: styles2,
   children
 }) {
-  styles2 = mergeStyles(defaultStyles$d, styles2);
+  styles2 = mergeStyles(defaultStyles$e, styles2);
   return jsx("button", {
     className: styles2.button,
     "data-type": type,
@@ -1014,7 +1018,7 @@ const button$1 = "_button_6w12u_1";
 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,
@@ -1025,7 +1029,7 @@ function CloseButton({
   onClick,
   styles: styles2
 }) {
-  styles2 = mergeStyles(defaultStyles$c, styles2);
+  styles2 = mergeStyles(defaultStyles$d, styles2);
   return jsx("button", {
     className: [styles2.button, border && styles2.buttonBorder].join(" "),
     onClick,
@@ -1168,7 +1172,7 @@ const headerCell = "_headerCell_1b75c_31";
 const headerCellButton = "_headerCellButton_1b75c_39";
 const bodyRow = "_bodyRow_1b75c_48";
 const bodyCell = "_bodyCell_1b75c_53";
-const defaultStyles$b = {
+const defaultStyles$c = {
   table,
   hideHeader,
   hideHeaderNoBorder,
@@ -1209,7 +1213,7 @@ function Table({
       };
     });
   };
-  styles2 = mergeStyles(defaultStyles$b, styles2);
+  styles2 = mergeStyles(defaultStyles$c, styles2);
   return jsxs("table", {
     className: styles2.table,
     children: [jsx("thead", {
@@ -1342,7 +1346,7 @@ const y1Label = "_y1Label_gj7pr_24";
 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,
@@ -1394,7 +1398,7 @@ const SlopeChart = ({
     return positionLabels(labels);
   }, [lines, y2Label2, yScale]);
   styles2 = mergeStyles({
-    ...defaultStyles$a
+    ...defaultStyles$b
   }, styles2);
   const chart = jsx("svg", {
     class: styles2.svg,
@@ -1483,9 +1487,9 @@ const useTooltipTarget = (targetElement, trackPosition) => {
     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,
@@ -1617,7 +1621,7 @@ function Modal({
   });
 }
 const tooltip = "_tooltip_11t5d_1";
-const defaultStyles$9 = {
+const defaultStyles$a = {
   tooltip
 };
 const TooltipType = {
@@ -1645,7 +1649,7 @@ function Tooltip({
     hoverActive
   } = useTooltipTarget(targetElement, trackPosition);
   const tooltipRef = useRef(null);
-  styles2 = mergeStyles(defaultStyles$9, styles2);
+  styles2 = mergeStyles(defaultStyles$a, styles2);
   useEffect(() => {
     let element = null;
     if (typeof refOrSelector === "string") {
@@ -1740,7 +1744,7 @@ function tooltipPositionForRect({
 }
 const text$2 = "_text_1b8t2_1";
 const container$3 = "_container_1b8t2_10";
-const defaultStyles$8 = {
+const defaultStyles$9 = {
   text: text$2,
   container: container$3
 };
@@ -1751,7 +1755,7 @@ const ControlChange = ({
   styles: styles2
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$8
+    ...defaultStyles$9
   }, styles2);
   let hasChanged = next2 !== previous2;
   return jsx("div", {
@@ -1765,9 +1769,8 @@ const ControlChange = ({
           next: styles2.next
         }
       }) : jsx(CircleIcon, {
-        abbreviation: next2,
         styles: {
-          rect: styles2.next
+          circle: styles2.next || `fill-color--${next2}`
         }
       }), jsx("strong", {
         className: styles2.text,
@@ -1786,7 +1789,7 @@ const secondaryNumber = "_secondaryNumber_w8o28_58";
 const displayRow = "_displayRow_w8o28_65";
 const displayColumn = "_displayColumn_w8o28_71";
 const topRow = "_topRow_w8o28_75";
-const defaultStyles$7 = {
+const defaultStyles$8 = {
   toplineResult,
   primaryname,
   secondaryname,
@@ -1811,7 +1814,7 @@ const ToplineResult = ({
   showInfoButton = false
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$7
+    ...defaultStyles$8
   }, styles2);
   const displayStyle = displayRow2 ? styles2.displayRow : styles2.displayColumn;
   return !secondaryName ? jsxs(Fragment, {
@@ -1878,7 +1881,7 @@ const section = "_section_12aiu_9";
 const borderTop = "_borderTop_12aiu_52";
 const header = "_header_12aiu_56";
 const content = "_content_12aiu_76";
-const defaultStyles$6 = {
+const defaultStyles$7 = {
   section,
   borderTop,
   header,
@@ -1891,7 +1894,7 @@ const PageSection = forwardRef(({
   backgroundColor = "transparent"
 }, ref) => {
   styles2 = mergeStyles({
-    ...defaultStyles$6
+    ...defaultStyles$7
   }, styles2);
   return jsxs("section", {
     ref,
@@ -1911,7 +1914,7 @@ const PageSection = forwardRef(({
 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
@@ -1926,12 +1929,13 @@ const ColumnChart = ({
   columnPadding,
   styles: styles2
 }) => {
-  styles2 = mergeStyles(defaultStyles$5, styles2);
+  styles2 = mergeStyles(defaultStyles$6, styles2);
   const yScale = scaleLinear$1([maxValue, minValue], [0, chartHeight]);
   const totalColumnWidth = Number(columnWidth) + Number(columnPadding.left) + Number(columnPadding.right);
+  let marginBottom = minValue < 0 ? 0 : 40;
   return jsxs("svg", {
     width: chartWidth,
-    height: chartHeight,
+    height: chartHeight + marginBottom,
     children: [columns.map((column, index2) => {
       const getHeight = (input2) => {
         return yScale(0) - yScale(input2);
@@ -1969,7 +1973,7 @@ const blurb = "_blurb_vd5ly_44";
 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,
@@ -1988,7 +1992,7 @@ const PartyProfile = ({
   abbreviation
 }) => {
   styles2 = mergeStyles({
-    ...defaultStyles$4
+    ...defaultStyles$5
   }, styles2);
   return jsx("div", {
     class: styles2.container,
@@ -2297,7 +2301,7 @@ function SVGMapProvider({
   });
 }
 const path$1 = "_path_1cwd5_9";
-const defaultStyles$3 = {
+const defaultStyles$4 = {
   path: path$1
 };
 function CompositionBorders({
@@ -2306,7 +2310,7 @@ function CompositionBorders({
   const {
     projection
   } = useContext(MapContext);
-  styles2 = mergeStyles(defaultStyles$3, styles2);
+  styles2 = mergeStyles(defaultStyles$4, styles2);
   return jsx("path", {
     className: styles2.path,
     d: projection.getCompositionBorders()
@@ -2605,7 +2609,7 @@ const Map$1 = forwardRef(({
 });
 const container = "_container_azu4a_1";
 const paragraph = "_paragraph_azu4a_12";
-const defaultStyles$2 = {
+const defaultStyles$3 = {
   container,
   paragraph
 };
@@ -2618,7 +2622,7 @@ function ResultSummary({
   styles: styles2
 }) {
   styles2 = mergeStyles({
-    ...defaultStyles$2
+    ...defaultStyles$3
   }, styles2);
   return jsxs("div", {
     class: styles2.container,
@@ -2661,7 +2665,7 @@ const suggestions = "_suggestions_g5w44_36";
 const suggestion = "_suggestion_g5w44_36";
 const selected = "_selected_g5w44_59";
 const highlighted = "_highlighted_g5w44_63";
-const defaultStyles$1 = {
+const defaultStyles$2 = {
   searchContainer,
   input,
   searchIcon,
@@ -2682,7 +2686,7 @@ function SearchInput({
   styles: styles2
 }) {
   var _a, _b, _c;
-  styles2 = mergeStyles(defaultStyles$1, styles2);
+  styles2 = mergeStyles(defaultStyles$2, styles2);
   const inputRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [suggestions2, setSuggestions] = useState();
@@ -2791,6 +2795,32 @@ function SuggestionList({
     })
   });
 }
+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 jsxs("div", {
+    className: styles2.refreshIndicator,
+    children: [jsx(CircleIcon, {
+      pulse: true
+    }), jsx("span", {
+      className: styles2.liveText,
+      children: "LIVE"
+    }), jsx("span", {
+      className: styles2.refreshText,
+      children: text2
+    })]
+  });
+}
 const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
 const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
 const coalition = "_coalition_1ahqy_9";
@@ -3094,6 +3124,7 @@ export {
   PageSection,
   PartyProfile,
   Projection,
+  RefreshIndicator,
   RelativeTimeSentence,
   ResultSummary,
   SearchInput,