@guardian/interactive-component-library 0.1.0-alpha.20 → 0.1.0-alpha.21

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

@@ -16,6 +16,8 @@
     active
   };
   function mergeStyles(firstStyle, secondStyle) {
+    if (!firstStyle)
+      return secondStyle;
     if (!secondStyle)
       return firstStyle;
     if (typeof firstStyle === "string") {
@@ -26,14 +28,7 @@
     }
     const allKeys = /* @__PURE__ */ new Set([...Object.keys(firstStyle), ...Object.keys(secondStyle)]);
     const merged = Array.from(allKeys).reduce((result, key) => {
-      const classNames = [];
-      if (firstStyle && key in firstStyle) {
-        classNames.push(firstStyle[key]);
-      }
-      if (secondStyle && key in secondStyle) {
-        classNames.push(secondStyle[key]);
-      }
-      result[key] = classNames.join(" ");
+      result[key] = mergeStyles(firstStyle[key], secondStyle[key]);
       return result;
     }, {});
     return merged;
@@ -42,9 +37,14 @@
     up: "up",
     down: "down"
   };
+  const SIZE = {
+    small: "small",
+    large: "large"
+  };
   function Chevron({
     active: active2 = false,
     direction = DIRECTION.down,
+    size = SIZE.small,
     styles: styles2
   }) {
     const defaultStylesCopy = {
@@ -57,6 +57,15 @@
       defaultStylesCopy.group = mergeStyles(defaultStyles$t.group, defaultStyles$t.rotated);
     }
     styles2 = mergeStyles(defaultStylesCopy, styles2);
+    return size === SIZE.small ? jsxRuntime.jsx(SmallChevron, {
+      styles: styles2
+    }) : jsxRuntime.jsx(LargeChevron, {
+      styles: styles2
+    });
+  }
+  function SmallChevron({
+    styles: styles2
+  }) {
     return jsxRuntime.jsx("svg", {
       width: "16",
       height: "24",
@@ -76,15 +85,34 @@
       })
     });
   }
+  function LargeChevron({
+    styles: styles2
+  }) {
+    return jsxRuntime.jsx("svg", {
+      width: "15",
+      height: "19",
+      className: styles2.svg,
+      viewBox: "0 0 15 19",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: jsxRuntime.jsx("g", {
+        className: styles2.group,
+        children: jsxRuntime.jsx("path", {
+          d: "M0.667809 7.5L6.81507 12.1053L8.18493 12.1053L14.3322 7.5L15 8.09868L7.84247 14.5L7.15753 14.5L-2.61693e-08 8.09868L0.667809 7.5Z",
+          className: styles2.path
+        })
+      })
+    });
+  }
   const container$5 = "_container_jzalm_1";
   const dot = "_dot_jzalm_6";
   const circle$2 = "_circle_jzalm_13";
-  const text$4 = "_text_jzalm_17";
+  const text$3 = "_text_jzalm_17";
   const defaultStyles$s = {
     container: container$5,
     dot,
     circle: circle$2,
-    text: text$4
+    text: text$3
   };
   const DOT_TYPE = {
     round: "round",
@@ -185,7 +213,7 @@
       x: config.x,
       y: config.y,
       textAnchor: config.textAnchor,
-      alignmentBaseline: config.alignmentBaseline,
+      dominantBaseline: config.dominantBaseline,
       children: config.value
     }, `label-${i}`);
     let totalWidth = 0;
@@ -196,7 +224,7 @@
         x: itemWidth - 4,
         y: height / 2,
         textAnchor: "end",
-        alignmentBaseline: "central"
+        dominantBaseline: "middle"
       };
       const value = jsxRuntime.jsxs("g", {
         transform: `translate(${totalWidth}, 0)`,
@@ -223,7 +251,7 @@
           y: height + 4,
           value: d2.label,
           textAnchor: "end",
-          alignmentBaseline: "hanging"
+          dominantBaseline: "hanging"
         };
         totalW += itemWidth;
         return labelConfig;
@@ -283,7 +311,7 @@
         return () => {
           listeners.delete(listener);
         };
-      }, []);
+      }, [selectorFn]);
       const syncedStore = compat.useSyncExternalStore(subscribe, getStore, getServerStore);
       return selectorFn(syncedStore);
     }
@@ -390,10 +418,10 @@
       })
     });
   }
-  const button$4 = "_button_oqopj_1";
+  const button$5 = "_button_oqopj_1";
   const svg$7 = "_svg_oqopj_15";
   const defaultStyles$p = {
-    button: button$4,
+    button: button$5,
     svg: svg$7
   };
   const InfoButton = ({
@@ -448,9 +476,9 @@
       })
     });
   };
-  const text$3 = "_text_1okyv_1";
+  const text$2 = "_text_1okyv_1";
   const defaultStyles$n = {
-    text: text$3
+    text: text$2
   };
   var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   function getDefaultExportFromCjs(x) {
@@ -988,11 +1016,11 @@
       })
     });
   };
-  const button$3 = "_button_1fees_1";
-  const icon = "_icon_1fees_6";
+  const button$4 = "_button_1fees_1";
+  const icon$2 = "_icon_1fees_6";
   const defaultStyles$h = {
-    button: button$3,
-    icon
+    button: button$4,
+    icon: icon$2
   };
   function ArrowButton({
     direction = "right",
@@ -1024,10 +1052,10 @@
       })
     });
   }
-  const button$2 = "_button_3521c_1";
+  const button$3 = "_button_3521c_1";
   const buttonInner$1 = "_buttonInner_3521c_6";
   const defaultStyles$g = {
-    button: button$2,
+    button: button$3,
     buttonInner: buttonInner$1
   };
   function Button({
@@ -1047,12 +1075,12 @@
       })
     });
   }
-  const button$1 = "_button_125im_1";
+  const button$2 = "_button_125im_1";
   const buttonBorder = "_buttonBorder_125im_11";
   const svg$3 = "_svg_125im_19";
   const path$3 = "_path_125im_25";
   const defaultStyles$f = {
-    button: button$1,
+    button: button$2,
     buttonBorder,
     svg: svg$3,
     path: path$3
@@ -1627,7 +1655,7 @@
   const exitDone$1 = "_exitDone_1gzlr_22";
   const enterActive$1 = "_enterActive_1gzlr_31";
   const exit$1 = "_exit_1gzlr_22";
-  const styles$5 = {
+  const styles$6 = {
     transitionContainer: transitionContainer$1,
     modalBox: modalBox$1,
     enter: enter$1,
@@ -1642,12 +1670,12 @@
     return jsxRuntime.jsx(d, {
       in: visible,
       duration: 300,
-      classNames: styles$5,
+      classNames: styles$6,
       alwaysMounted: true,
       children: jsxRuntime.jsx("div", {
-        class: styles$5.transitionContainer,
+        class: styles$6.transitionContainer,
         children: jsxRuntime.jsx("div", {
-          class: styles$5.modalBox,
+          class: styles$6.modalBox,
           children
         })
       })
@@ -1776,10 +1804,10 @@
     }
     return newPosition;
   }
-  const text$2 = "_text_1b8t2_1";
+  const text$1 = "_text_1b8t2_1";
   const container$3 = "_container_1b8t2_10";
   const defaultStyles$a = {
-    text: text$2,
+    text: text$1,
     container: container$3
   };
   const ControlChange = ({
@@ -1950,11 +1978,11 @@
       })]
     });
   });
-  const text$1 = "_text_lo5h3_1";
+  const text = "_text_lo5h3_1";
   const axis = "_axis_lo5h3_6";
   const bar = "_bar_lo5h3_10";
   const defaultStyles$7 = {
-    text: text$1,
+    text,
     axis,
     bar
   };
@@ -2004,58 +2032,56 @@
       })]
     });
   };
-  const text = "_text_vd5ly_1";
-  const container$2 = "_container_vd5ly_9";
-  const title$1 = "_title_vd5ly_16";
-  const subtitle = "_subtitle_vd5ly_33";
-  const blurb = "_blurb_vd5ly_44";
-  const leftCell = "_leftCell_vd5ly_55";
-  const rightCell = "_rightCell_vd5ly_55";
-  const mugshot = "_mugshot_vd5ly_71";
+  const container$2 = "_container_1snyq_1";
+  const img = "_img_1snyq_7";
+  const title$2 = "_title_1snyq_15";
+  const subtitle = "_subtitle_1snyq_31";
+  const small = "_small_1snyq_41";
+  const blurb = "_blurb_1snyq_51";
+  const footnote = "_footnote_1snyq_59";
   const defaultStyles$6 = {
-    text,
     container: container$2,
-    title: title$1,
+    img,
+    title: title$2,
     subtitle,
+    small,
     blurb,
-    leftCell,
-    rightCell,
-    mugshot
+    footnote
+  };
+  const SubtitleStyle = {
+    small: "small",
+    large: "large"
   };
   const PartyProfile = ({
-    styles: styles2,
     title: title2,
     subtitle: subtitle2,
+    subtitleStyle = SubtitleStyle.large,
     blurb: blurb2,
+    footnote: footnote2,
     imgSrc,
-    abbreviation
+    styles: styles2
   }) => {
     styles2 = mergeStyles({
       ...defaultStyles$6
     }, styles2);
-    return jsxRuntime.jsx("div", {
+    return jsxRuntime.jsxs("div", {
       class: styles2.container,
-      children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsxs("div", {
-          className: styles2.leftCell,
-          children: [jsxRuntime.jsx("h3", {
-            className: `${styles2.title}`,
-            children: title2
-          }), jsxRuntime.jsx("div", {
-            className: styles2.subtitle,
-            children: subtitle2
-          }), jsxRuntime.jsx("div", {
-            className: styles2.blurb,
-            children: blurb2
-          })]
-        }), jsxRuntime.jsx("div", {
-          className: styles2.rightCell,
-          children: jsxRuntime.jsx("img", {
-            src: imgSrc,
-            className: `${styles2.mugshot} bg-color--${abbreviation}`
-          })
-        })]
-      })
+      children: [jsxRuntime.jsx("img", {
+        src: imgSrc,
+        className: styles2.img
+      }), jsxRuntime.jsx("h3", {
+        className: styles2.title,
+        children: title2
+      }), jsxRuntime.jsx("div", {
+        className: [styles2.subtitle, styles2[subtitleStyle]].join(" "),
+        children: subtitle2
+      }), jsxRuntime.jsx("div", {
+        className: styles2.blurb,
+        children: blurb2
+      }), jsxRuntime.jsx("div", {
+        className: styles2.footnote,
+        children: footnote2
+      })]
     });
   };
   var epsilon$1 = 1e-6;
@@ -2470,7 +2496,7 @@
   }
   const container$1 = "_container_cyrny_1";
   const svg$1 = "_svg_cyrny_6";
-  const styles$4 = {
+  const styles$5 = {
     container: container$1,
     svg: svg$1
   };
@@ -2718,7 +2744,7 @@
     const renderSVG = containerSize && !config.drawToCanvas;
     return jsxRuntime.jsx("div", {
       ref: containerRef,
-      className: styles$4.container,
+      className: styles$5.container,
       style: containerStyle,
       children: renderSVG && jsxRuntime.jsx(SVGMapProvider, {
         id,
@@ -2770,7 +2796,7 @@
   }
   const svg = "_svg_1dms8_1";
   const path = "_path_1dms8_8";
-  const styles$3 = {
+  const styles$4 = {
     svg,
     path
   };
@@ -2778,9 +2804,9 @@
     return jsxRuntime.jsx("svg", {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: styles$3.svg,
+      className: styles$4.svg,
       children: jsxRuntime.jsx("path", {
-        className: styles$3.path,
+        className: styles$4.path,
         "fill-rule": "evenodd",
         "clip-rule": "evenodd",
         d: "M7.273 0c4.022 0 7.25 3.295 7.25 7.273a7.226 7.226 0 01-7.25 7.25C3.25 14.523 0 11.295 0 7.273 0 3.295 3.25 0 7.273 0zm0 1.84A5.403 5.403 0 001.84 7.274c0 3 2.409 5.454 5.432 5.454 3 0 5.454-2.454 5.454-5.454 0-3.023-2.454-5.432-5.454-5.432zM20 18.16l-5.432-5.432h-.932l-.909.91v.931L18.16 20 20 18.159z"
@@ -2925,11 +2951,13 @@
       })
     });
   }
-  const refreshIndicator = "_refreshIndicator_u6lji_1";
-  const liveText = "_liveText_u6lji_8";
-  const refreshText = "_refreshText_u6lji_9";
+  const refreshIndicator = "_refreshIndicator_3z0ji_9";
+  const icon$1 = "_icon_3z0ji_17";
+  const liveText = "_liveText_3z0ji_26";
+  const refreshText = "_refreshText_3z0ji_27";
   const defaultStyles$2 = {
     refreshIndicator,
+    icon: icon$1,
     liveText,
     refreshText
   };
@@ -2940,8 +2968,11 @@
     styles2 = mergeStyles(defaultStyles$2, styles2);
     return jsxRuntime.jsxs("div", {
       className: styles2.refreshIndicator,
-      children: [jsxRuntime.jsx(CircleIcon, {
-        pulse: true
+      children: [jsxRuntime.jsx("span", {
+        className: styles2.icon,
+        children: jsxRuntime.jsx(CircleIcon, {
+          pulse: true
+        })
       }), jsxRuntime.jsx("span", {
         className: styles2.liveText,
         children: "LIVE"
@@ -2985,7 +3016,7 @@
   const exitDone = "_exitDone_wws3j_22";
   const enterActive = "_enterActive_wws3j_31";
   const exit = "_exit_wws3j_22";
-  const styles$2 = {
+  const styles$3 = {
     transitionContainer,
     modalBox,
     enter,
@@ -3008,21 +3039,123 @@
     return compat.createPortal(jsxRuntime.jsx(d, {
       in: visible,
       duration: 300,
-      classNames: styles$2,
+      classNames: styles$3,
       children: jsxRuntime.jsx("div", {
-        class: styles$2.transitionContainer,
+        class: styles$3.transitionContainer,
         onClick,
         style: {
           pointerEvents: visible ? "auto" : "none"
         },
         children: jsxRuntime.jsx("div", {
           ref: modalBoxRef,
-          class: styles$2.modalBox,
+          class: styles$3.modalBox,
           children
         })
       })
     }), document.body);
   }
+  const button$1 = "_button_xeyqm_1";
+  const icon = "_icon_xeyqm_17";
+  const title$1 = "_title_xeyqm_22";
+  const popout = "_popout_xeyqm_29";
+  const hint = "_hint_xeyqm_44";
+  const option = "_option_xeyqm_51";
+  const optionIcon = "_optionIcon_xeyqm_71";
+  const optionTitle = "_optionTitle_xeyqm_76";
+  const optionDescription = "_optionDescription_xeyqm_84";
+  const checkmark = "_checkmark_xeyqm_91";
+  const checkmarkPath = "_checkmarkPath_xeyqm_97";
+  const styles$2 = {
+    button: button$1,
+    icon,
+    title: title$1,
+    popout,
+    hint,
+    option,
+    optionIcon,
+    optionTitle,
+    optionDescription,
+    checkmark,
+    checkmarkPath
+  };
+  function Dropdown({
+    title: title2,
+    hint: hint2,
+    options,
+    onSelect
+  }) {
+    const [expanded, setExpanded] = hooks.useState(true);
+    const [selectedIndex, setSelectedIndex] = hooks.useState(0);
+    const onOptionClick = hooks.useCallback((option2, index2) => {
+      setSelectedIndex(index2);
+      if (onSelect)
+        onSelect(option2, index2);
+    }, [onSelect]);
+    const iconForSelectedOption = hooks.useMemo(() => {
+      const selectedOption = options[selectedIndex];
+      return selectedOption.icon;
+    }, [options, selectedIndex]);
+    return jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsxs("button", {
+        className: styles$2.button,
+        onClick: () => setExpanded((current) => !current),
+        children: [jsxRuntime.jsx("img", {
+          src: iconForSelectedOption,
+          className: styles$2.icon
+        }), jsxRuntime.jsx("span", {
+          className: styles$2.title,
+          children: title2
+        }), jsxRuntime.jsx(Chevron, {
+          active: true,
+          size: "large",
+          direction: expanded ? "up" : "down"
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: styles$2.popout,
+        style: {
+          visibility: expanded ? "visible" : "hidden"
+        },
+        children: [hint2 && jsxRuntime.jsx("p", {
+          className: styles$2.hint,
+          children: hint2
+        }), options.map((option2, index2) => jsxRuntime.jsxs("button", {
+          className: styles$2.option,
+          onClick: () => onOptionClick(option2, index2),
+          children: [jsxRuntime.jsx("img", {
+            src: option2.icon,
+            className: styles$2.optionIcon
+          }), jsxRuntime.jsxs("div", {
+            className: styles$2.optionText,
+            children: [jsxRuntime.jsx("h4", {
+              className: styles$2.optionTitle,
+              children: option2.title
+            }), jsxRuntime.jsx("p", {
+              className: styles$2.optionDescription,
+              children: option2.description
+            })]
+          }), index2 === selectedIndex && jsxRuntime.jsx("div", {
+            className: styles$2.checkmark,
+            children: jsxRuntime.jsx(Checkmark, {})
+          })]
+        }, option2.title))]
+      })]
+    });
+  }
+  function Checkmark() {
+    return jsxRuntime.jsx("svg", {
+      width: "11",
+      height: "9",
+      viewBox: "0 0 11 9",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: jsxRuntime.jsx("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M0.631814 4.43687L0.0839844 4.9847L2.82313 8.8195H3.08335L10.9173 0.711624L10.3695 0.17749L3.08335 6.77884L0.631814 4.43687Z",
+        className: styles$2.checkmarkPath
+      })
+    });
+  }
   const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
   const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
   const coalition = "_coalition_1ahqy_9";
@@ -3316,6 +3449,7 @@
   exports2.ColumnChart = ColumnChart;
   exports2.Container = Container;
   exports2.ControlChange = ControlChange;
+  exports2.Dropdown = Dropdown;
   exports2.GradientIcon = GradientIcon;
   exports2.GridType = GridType;
   exports2.InfoButton = InfoButton;