@guardian/interactive-component-library 0.1.0-alpha.25 → 0.1.0-alpha.27

package/dist/interactive-component-library.js

@@ -1497,19 +1497,21 @@ function HeaderCell({
     })]
   });
 }
-const slopeChartContainer = "_slopeChartContainer_gj7pr_1";
-const svg$2 = "_svg_gj7pr_5";
-const line$1 = "_line_gj7pr_9";
-const circle = "_circle_gj7pr_14";
-const label = "_label_gj7pr_18";
-const y1Label = "_y1Label_gj7pr_24";
-const y2Label = "_y2Label_gj7pr_28";
-const axis$1 = "_axis_gj7pr_32";
-const axisLabel = "_axisLabel_gj7pr_37";
+const slopeChartContainer = "_slopeChartContainer_nmjjj_1";
+const svg$2 = "_svg_nmjjj_5";
+const line$1 = "_line_nmjjj_9";
+const lineWhite = "_lineWhite_nmjjj_14";
+const circle = "_circle_nmjjj_19";
+const label = "_label_nmjjj_23";
+const y1Label = "_y1Label_nmjjj_29";
+const y2Label = "_y2Label_nmjjj_33";
+const axis$1 = "_axis_nmjjj_37";
+const axisLabel = "_axisLabel_nmjjj_42";
 const defaultStyles$d = {
   slopeChartContainer,
   svg: svg$2,
   line: line$1,
+  lineWhite,
   circle,
   label,
   y1Label,
@@ -1590,6 +1592,12 @@ const SlopeChart = ({
         }, line2.styles);
         return jsxs("g", {
           children: [jsx("line", {
+            x1: 0,
+            y1: yScale(line2.y1),
+            x2: contentWidth,
+            y2: yScale(line2.y2),
+            className: `${itemStyles.lineWhite}`
+          }), jsx("line", {
             x1: 0,
             y1: yScale(line2.y1),
             x2: contentWidth,
@@ -1950,10 +1958,10 @@ const ToplineResult = forwardRef(({
     })]
   });
 });
-const section = "_section_12aiu_9";
-const borderTop = "_borderTop_12aiu_52";
-const header = "_header_12aiu_56";
-const content = "_content_12aiu_76";
+const section = "_section_4s2t4_9";
+const borderTop = "_borderTop_4s2t4_52";
+const header = "_header_4s2t4_56";
+const content = "_content_4s2t4_77";
 const defaultStyles$8 = {
   section,
   borderTop,
@@ -2046,13 +2054,13 @@ const ColumnChart = ({
     })]
   });
 };
-const container$3 = "_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 container$3 = "_container_hbk39_1";
+const img = "_img_hbk39_5";
+const title$2 = "_title_hbk39_13";
+const subtitle = "_subtitle_hbk39_29";
+const small = "_small_hbk39_39";
+const blurb = "_blurb_hbk39_49";
+const footnote = "_footnote_hbk39_57";
 const defaultStyles$6 = {
   container: container$3,
   img,
@@ -2073,6 +2081,7 @@ const PartyProfile = ({
   blurb: blurb2,
   footnote: footnote2,
   imgSrc,
+  imgAltText,
   styles: styles2
 }) => {
   styles2 = mergeStyles({
@@ -2082,7 +2091,8 @@ const PartyProfile = ({
     class: styles2.container,
     children: [jsx("img", {
       src: imgSrc,
-      className: styles2.img
+      className: styles2.img,
+      alt: imgAltText
     }), jsx("h3", {
       className: styles2.title,
       children: title2
@@ -3132,18 +3142,19 @@ function Modal({
     })
   }), document.body);
 }
-const container = "_container_iozsb_1";
-const button$1 = "_button_iozsb_6";
-const icon = "_icon_iozsb_22";
-const title$1 = "_title_iozsb_27";
-const popout = "_popout_iozsb_34";
-const hint = "_hint_iozsb_51";
-const option = "_option_iozsb_58";
-const optionIcon = "_optionIcon_iozsb_79";
-const optionTitle = "_optionTitle_iozsb_84";
-const optionDescription = "_optionDescription_iozsb_92";
-const checkmark = "_checkmark_iozsb_99";
-const checkmarkPath = "_checkmarkPath_iozsb_105";
+const container = "_container_1enis_1";
+const button$1 = "_button_1enis_6";
+const icon = "_icon_1enis_22";
+const title$1 = "_title_1enis_27";
+const popout = "_popout_1enis_34";
+const hint = "_hint_1enis_51";
+const groupHeader = "_groupHeader_1enis_58";
+const option = "_option_1enis_65";
+const optionIcon = "_optionIcon_1enis_86";
+const optionTitle = "_optionTitle_1enis_91";
+const optionDescription = "_optionDescription_1enis_99";
+const checkmark = "_checkmark_1enis_106";
+const checkmarkPath = "_checkmarkPath_1enis_112";
 const styles$2 = {
   container,
   button: button$1,
@@ -3151,6 +3162,7 @@ const styles$2 = {
   title: title$1,
   popout,
   hint,
+  groupHeader,
   option,
   optionIcon,
   optionTitle,
@@ -3175,10 +3187,29 @@ function Dropdown({
     if (collapseOnSelect)
       setExpanded(false);
   }, [onSelect]);
+  const optionGroups = useMemo(() => {
+    const containsOptionGroups = "options" in options[0];
+    if (!containsOptionGroups) {
+      return [{
+        options
+      }];
+    }
+    let optionIndex = 0;
+    for (const group2 of options) {
+      for (const option2 of group2.options) {
+        option2.index = optionIndex;
+        optionIndex++;
+      }
+    }
+    return options;
+  }, options);
+  const flatOptions = useMemo(() => {
+    return optionGroups.map((group2) => group2.options).flat();
+  }, [optionGroups]);
   const iconForSelectedOption = useMemo(() => {
-    const selectedOption = options[selectedIndex];
+    const selectedOption = flatOptions[selectedIndex];
     return selectedOption.icon;
-  }, [options, selectedIndex]);
+  }, [flatOptions, selectedIndex]);
   return jsxs("div", {
     className: styles$2.container,
     children: [jsxs("button", {
@@ -3203,9 +3234,28 @@ function Dropdown({
       children: [hint2 && jsx("p", {
         className: styles$2.hint,
         children: hint2
-      }), options.map((option2, index2) => jsxs("button", {
+      }), optionGroups.map((group2) => jsx(OptionGroup, {
+        ...group2,
+        selectedIndex,
+        onOptionClick
+      }))]
+    })]
+  });
+}
+function OptionGroup({
+  title: title2,
+  options,
+  selectedIndex,
+  onOptionClick
+}) {
+  return jsxs(Fragment, {
+    children: [title2 && jsx("span", {
+      className: styles$2.groupHeader,
+      children: title2
+    }), options.map((option2) => {
+      return jsxs("button", {
         className: styles$2.option,
-        onClick: () => onOptionClick(option2, index2),
+        onClick: () => onOptionClick(option2, option2.index),
         children: [jsx("img", {
           src: option2.icon,
           className: styles$2.optionIcon
@@ -3218,11 +3268,11 @@ function Dropdown({
             className: styles$2.optionDescription,
             children: option2.description
           })]
-        }), index2 === selectedIndex && jsx("div", {
+        }), option2.index === selectedIndex && jsx("div", {
           className: styles$2.checkmark,
           children: jsx(Checkmark, {})
         })]
-      }, option2.title))]
+      }, option2.title);
     })]
   });
 }