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

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

@@ -1495,19 +1495,21 @@
       })]
     });
   }
-  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,
@@ -1588,6 +1590,12 @@
           }, line2.styles);
           return jsxRuntime.jsxs("g", {
             children: [jsxRuntime.jsx("line", {
+              x1: 0,
+              y1: yScale(line2.y1),
+              x2: contentWidth,
+              y2: yScale(line2.y2),
+              className: `${itemStyles.lineWhite}`
+            }), jsxRuntime.jsx("line", {
               x1: 0,
               y1: yScale(line2.y1),
               x2: contentWidth,
@@ -1948,10 +1956,10 @@
       })]
     });
   });
-  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,
@@ -2044,13 +2052,13 @@
       })]
     });
   };
-  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,
@@ -2071,6 +2079,7 @@
     blurb: blurb2,
     footnote: footnote2,
     imgSrc,
+    imgAltText,
     styles: styles2
   }) => {
     styles2 = mergeStyles({
@@ -2080,7 +2089,8 @@
       class: styles2.container,
       children: [jsxRuntime.jsx("img", {
         src: imgSrc,
-        className: styles2.img
+        className: styles2.img,
+        alt: imgAltText
       }), jsxRuntime.jsx("h3", {
         className: styles2.title,
         children: title2
@@ -3130,18 +3140,19 @@
       })
     }), 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,
@@ -3149,6 +3160,7 @@
     title: title$1,
     popout,
     hint,
+    groupHeader,
     option,
     optionIcon,
     optionTitle,
@@ -3173,10 +3185,29 @@
       if (collapseOnSelect)
         setExpanded(false);
     }, [onSelect]);
+    const optionGroups = hooks.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 = hooks.useMemo(() => {
+      return optionGroups.map((group2) => group2.options).flat();
+    }, [optionGroups]);
     const iconForSelectedOption = hooks.useMemo(() => {
-      const selectedOption = options[selectedIndex];
+      const selectedOption = flatOptions[selectedIndex];
       return selectedOption.icon;
-    }, [options, selectedIndex]);
+    }, [flatOptions, selectedIndex]);
     return jsxRuntime.jsxs("div", {
       className: styles$2.container,
       children: [jsxRuntime.jsxs("button", {
@@ -3201,9 +3232,28 @@
         children: [hint2 && jsxRuntime.jsx("p", {
           className: styles$2.hint,
           children: hint2
-        }), options.map((option2, index2) => jsxRuntime.jsxs("button", {
+        }), optionGroups.map((group2) => jsxRuntime.jsx(OptionGroup, {
+          ...group2,
+          selectedIndex,
+          onOptionClick
+        }))]
+      })]
+    });
+  }
+  function OptionGroup({
+    title: title2,
+    options,
+    selectedIndex,
+    onOptionClick
+  }) {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [title2 && jsxRuntime.jsx("span", {
+        className: styles$2.groupHeader,
+        children: title2
+      }), options.map((option2) => {
+        return jsxRuntime.jsxs("button", {
           className: styles$2.option,
-          onClick: () => onOptionClick(option2, index2),
+          onClick: () => onOptionClick(option2, option2.index),
           children: [jsxRuntime.jsx("img", {
             src: option2.icon,
             className: styles$2.optionIcon
@@ -3216,11 +3266,11 @@
               className: styles$2.optionDescription,
               children: option2.description
             })]
-          }), index2 === selectedIndex && jsxRuntime.jsx("div", {
+          }), option2.index === selectedIndex && jsxRuntime.jsx("div", {
             className: styles$2.checkmark,
             children: jsxRuntime.jsx(Checkmark, {})
           })]
-        }, option2.title))]
+        }, option2.title);
       })]
     });
   }