bug: content-hub-notifications (#1675)

Addresses issues when showing remote content on EMBL sites; https://gitlab.ebi.ac.uk/emblorg/backlog/-/issues/583

- when no results, embl-content-hub-loader would error if an empty message is not set
- embl-notifications was still using the deprecated `vf-banner--phase` variant

components/embl-content-hub-loader/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.1.1
+
+* Avoid a null variable issue when contentHub returns no results.
+
 ### 1.1.0
 
 * adds overrides for more permutations of where the vf-global header lives

components/embl-content-hub-loader/embl-content-hub-loader__fetch.js

@@ -121,17 +121,18 @@ function emblContentHubFetch() {
       // We'll still inject the content from the contentHub along with any passed "no matches" text
       var noContentMessage = targetLink.getAttribute("data-embl-js-content-hub-loader-no-content");
 
-      if (noContentMessage == "true") {
-        // use a default
-        noContentMessage = "No content was found found for this query.";
+      if (noContentMessage !== "null") {
+        if (noContentMessage == "true") {
+          // use a default
+          noContentMessage = "No content was found found for this query.";
+        }
+        var noContentMessageElement = document.createElement("div");
+        noContentMessageElement.classList.add("vf-text");
+        noContentMessageElement.classList.add("embl-content-hub-html__no-content-found");
+        noContentMessageElement.innerHTML = noContentMessage;
+        exportedContent.appendChild(noContentMessageElement.firstChild);
       }
 
-      var noContentMessageElement = document.createElement("div");
-      noContentMessageElement.classList.add("vf-text");
-      noContentMessageElement.classList.add("embl-content-hub-html__no-content-found");
-      noContentMessageElement.innerHTML = noContentMessage;
-      exportedContent.appendChild(noContentMessageElement.firstChild);
-
       // if data-embl-js-content-hub-loader-no-content-hide is true or has a class, hide accordingly
       var noContentHideBehavior = targetLink.getAttribute("data-embl-js-content-hub-loader-no-content-hide");
       if (noContentHideBehavior) {

components/embl-notifications/CHANGELOG.md

@@ -1,3 +1,8 @@
+### 1.1.1
+
+* Remove use of long deprecated `vf-banner--phase` variant and replace with `vf-banner--alert vf-banner--info`.
+* Adds `vf-u-margin__top--400` to handle cases of nested output where `vf-stack` may not reach.
+
 ### 1.1.0
 
 * Capture all links without `vf-banner__link` class.

components/embl-notifications/embl-notifications.js

@@ -49,9 +49,11 @@ function emblNotificationsInject(message) {
     target.parentNode.prepend(output);
     vfBanner();
   } else if (message.field_notification_position == "inline") {
-    output.classList.add("vf-grid"); // we wrap in vf-grid for layout
+    output.classList.add("vf-grid", "vf-u-margin__top--400"); // we wrap in vf-grid for layout
+    // we use vf-u-margin__top--400 as this element is usually inserted inside a contentHub wrapper and not affected by body.vf-stack
+    // if vf-stack is set, this will have no practical affect
     output.innerHTML = `
-      <div class="vf-banner vf-banner--phase | vf-content">
+      <div class="vf-banner vf-banner--alert vf-banner--info | vf-content">
         <div class="vf-banner__content">
           <p class="vf-banner__text">${message.body}</p>
         </div>