HPC-9297: Add support for tooltips in bottom figure row paragraphs fr…

…om CM

html/modules/custom/ghi_content/ghi_content.libraries.yml

@@ -17,4 +17,10 @@ admin.related_articles:
   version: VERSION
   css:
     component:
-      css/admin/related_articles.css: {}
+      css/admin/related_articles.css: {}
+bottom_figures.tooltips:
+  version: VERSION
+  js:
+    js/bottom_figures.tooltips.js: {}
+  dependencies:
+    - hpc_common/tooltip

html/modules/custom/ghi_content/js/bottom_figures.tooltips.js

@@ -0,0 +1,16 @@
+(function ($, Drupal) {
+
+  // Attach behaviors.
+  Drupal.behaviors.BottomFiguresTooltips = {
+    attach: (context, settings) => {
+      once('bottom-figure-footnotes', '.gho-figure__value[data-footnote]', context).forEach((item) => {
+        let footnote = $(item).attr('data-footnote').trim();
+        if (!footnote) {
+          return;
+        }
+        let footnote_tag = $('<i class="tooltip info" data-toggle="tooltip" data-tippy-content="' + footnote + '"><svg class="cd-icon icon cd-icon--about"><use xlink:href="#cd-icon--about"></use></svg></i>');
+        $(item).append(footnote_tag);
+      });
+    }
+  }
+}(jQuery, Drupal));

html/modules/custom/ghi_content/src/Plugin/Block/Paragraph.php

@@ -254,6 +254,7 @@ public function getThemeComponents(RemoteParagraphInterface $paragraph) {
     $theme_components[] = 'common_design_subtheme/gho-' . Html::getClass($paragraph->getType());
     if ($paragraph->getType() == 'bottom_figure_row') {
       $theme_components[] = 'common_design_subtheme/gho-needs-and-requirements';
+      $theme_components[] = 'ghi_content/bottom_figures.tooltips';
     }
     if ($paragraph->getPromoted() || $this->isPromoted()) {
       $theme_components[] = 'common_design_subtheme/gho-promoted-paragraph';
@@ -276,6 +277,7 @@ public function getThemeComponents(RemoteParagraphInterface $paragraph) {
         $theme_components[] = 'common_design_subtheme/gho-' . $type;
         if ($type == 'bottom-figure-row') {
           $theme_components[] = 'common_design_subtheme/gho-needs-and-requirements';
+          $theme_components[] = 'ghi_content/bottom_figures.tooltips';
         }
       }
       $matches = [];

html/themes/custom/common_design_subtheme/sass/component-overrides/_component-overrides.scss

@@ -1,24 +1,7 @@
 @import "cd-page-title";
+@import "cd-social-links";
 @import "cd-tag";
 @import "cd-teaser";
-@import "cd-social-links";
+@import "gho-bottom-figure-row";
 @import "gho-footnotes";
 @import "gho-related-articles";
-
-.preview-content {
-  &.ghi-grid .paragraph--type--bottom-figure-row > * > * {
-    zoom: inherit;
-  }
-  .paragraph.gho-bottom-figure-row {
-    margin-top: 0;
-  }
-}
-
-/* Hide the border when the figures follow a NaR paragraph. */
-.paragraph--gho-needs-and-requirements-paragraph + .paragraph--gho-bottom-figure-row {
-  margin-top: 0;
-
-  .gho-bottom-figure-row::before {
-    content: none;
-  }
-}

html/themes/custom/common_design_subtheme/sass/component-overrides/_gho-bottom-figure-row.scss

@@ -0,0 +1,54 @@
+.preview-content {
+  &.ghi-grid .paragraph--type--bottom-figure-row > * > * {
+    zoom: inherit;
+  }
+  .paragraph--gho-bottom-figure-row {
+    margin-top: 0;
+
+    &::before,
+    .gho-bottom-figure-row::before {
+      display: none;
+    }
+  }
+}
+
+.paragraph--gho-bottom-figure-row[data-block-preview="paragraph"] {
+  &::before,
+  .gho-bottom-figure-row::before {
+    display: none;
+  }
+}
+
+/* Hide the border when the figures follow a NaR paragraph. */
+.paragraph--gho-needs-and-requirements-paragraph + .paragraph--gho-bottom-figure-row {
+
+  body:not(.layout-builder-ipe-editing) & {
+    margin-top: -2rem !important;
+  }
+
+  &::before,
+  .gho-bottom-figure-row::before {
+    display: none;
+  }
+}
+
+.gho-figures {
+  .gho-figure__value[data-footnote] {
+    display: flex;
+    gap: 0.3rem;
+
+    i.tooltip > svg {
+      fill: #5391cb;
+    }
+  }
+
+  &.gho-figures--small .gho-figure__value[data-footnote] i.tooltip {
+    position: relative;
+    top: 1px;
+
+    & > svg {
+      width: 0.8rem;
+      height: 0.8rem;
+    }
+  }
+}