feat: Adding modals with info to ASCOR All countries page

app/javascript/components/tpi/InfoModal.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import CustomModal from './Modal';
+import { OverlayProvider } from '@react-aria/overlays';
+import React, {useEffect, useState} from 'react';
+
+const InfoModal = ({ title, text, element }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const eventListeners = [];
+    document.querySelectorAll(element).forEach((input) => {
+      const listener = input.addEventListener('click', handleOnRequestOpen);
+      eventListeners.push([input, listener]);
+    });
+
+    return () => {
+      eventListeners.forEach(([input, listener]) => {
+        input.removeEventListener('click', listener);
+      });
+    };
+  });
+
+  const handleOnRequestOpen = () => {
+    setVisible(true);
+  };
+
+  const handleOnRequestClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <OverlayProvider>
+      <CustomModal
+        open={visible}
+        onClose={handleOnRequestClose}
+        title={title}
+      >
+        <div>
+          <button
+            type="button"
+            className="close-btn"
+            onClick={handleOnRequestClose}
+            aria-label="Proceed with Management Quality (MQ) methodology preview"
+          >
+            <div className="icon__close" />
+          </button>
+          <div className="modal-title">{title}</div>
+          <div className="content" dangerouslySetInnerHTML={{__html: text}} />
+        </div>
+      </CustomModal>
+    </OverlayProvider>
+  );
+};
+
+InfoModal.propTypes = {
+  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  element: PropTypes.string.isRequired
+};
+
+export default InfoModal;

app/views/tpi/ascor/_bubble_chart.html.erb

@@ -1 +1,7 @@
-<%= react_component('charts/ascor-bubble/Chart', { results: @ascor_assessment_results }) %>
+<%= react_component('charts/ascor-bubble/Chart', { results: @ascor_assessment_results }) %>
+<%= react_component('InfoModal', {
+  title: "ASCOR country assessment results",
+  text: "<p>Countries are assessed across the ASCOR framework’s three pillars and thirteen topic areas.</p>" \
+        "<p>The area-level result is Yes if all indicators within the area are assessed as Yes, Partial if some of the indicators within the area are assessed as Yes, and No if all of the indicators within the area are assessed as No.</p>",
+  element: "#bubble-chart-info"
+}) %>

app/views/tpi/ascor/_emissions_chart.html.erb

@@ -7,4 +7,11 @@
   countries: ASCOR::Country.all.map { |c| { id: c.id, iso: c.iso, name: c.name } },
   default_countries: ASCOR::Country.where(iso: ASCOR::Country::DEFAULT_COUNTRIES).map(&:id),
   emissions_data_url: index_emissions_assessment_tpi_ascor_index_path
+}) %>
+<%= react_component('InfoModal', {
+  title: "Country emission pathways",
+  text: "<p>Country emission pathways are assessed in several ways to account for a variety of factors and uncertainties. The emission metrics considered include the following options: production and consumption-based emissions; exclusion of LULUCF emissions and LULUCF emissions alone; and emissions on an absolute and intensity basis (per capita and per PPP-adjusted GDP).</p>" \
+        "<p>Targeted future pathways are included only for absolute production-based emissions excluding LULUCF as this is the basis on which 2030 targets are assessed.</p>" \
+        "<p>Pathways end in 2030 because long-term net zero targets are often stated on a different emission boundary from the one considered in the 2030 target assessments (e.g. including only CO₂ emissions rather than all Kyoto greenhouse gases).</p>",
+  element: "#emissions-chart-info"
 }) %>

app/views/tpi/ascor/index.html.erb

@@ -35,6 +35,7 @@
     <div class="bubble-chart-header">
       <h2 class="is-size-4">
         ASCOR country assessment results
+        <span class="base-tooltip__default-trigger" id="bubble-chart-info">?</span>
       </h2>
 
       <div class="bubble-chart-header__assessment-dropdown">
@@ -66,6 +67,7 @@
     <div class="emissions-chart-header">
       <h2 class="is-size-4">
         Country emission pathways
+        <span class="base-tooltip__default-trigger" id="emissions-chart-info">?</span>
       </h2>
 
       <div class="emissions-chart-header__assessment-dropdown">