fix(site-header): Removing containers when removing notification - FRONT-4637

src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap

@@ -981,6 +981,7 @@ exports[`Site Header EC renders correctly 1`] = `
             class="ecl-notification ecl-notification--info"
             data-ecl-auto-init="Notification"
             data-ecl-notification=""
+            data-ecl-site-header-notification=""
             role="alert"
           >
             <svg
@@ -2104,6 +2105,7 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
             class="ecl-notification ecl-notification--info"
             data-ecl-auto-init="Notification"
             data-ecl-notification=""
+            data-ecl-site-header-notification=""
             role="alert"
           >
             <svg
@@ -3207,6 +3209,7 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
             class="ecl-notification ecl-notification--info"
             data-ecl-auto-init="Notification"
             data-ecl-notification=""
+            data-ecl-site-header-notification=""
             role="alert"
           >
             <svg
@@ -4308,6 +4311,7 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
             class="ecl-notification ecl-notification--info"
             data-ecl-auto-init="Notification"
             data-ecl-notification=""
+            data-ecl-site-header-notification=""
             role="alert"
           >
             <svg
@@ -5409,6 +5413,7 @@ exports[`Site Header EU renders correctly 1`] = `
             class="ecl-notification ecl-notification--info"
             data-ecl-auto-init="Notification"
             data-ecl-notification=""
+            data-ecl-site-header-notification=""
             role="alert"
           >
             <svg

src/implementations/twig/components/site-header/site-header.html.twig

@@ -370,7 +370,11 @@
   {% if _notification is defined and _notification is not empty %}
     <div class="ecl-site-header__notification">
       <div class="ecl-container">
-        {% include '@ecl/notification/notification.html.twig' with _notification only %}
+        {% include '@ecl/notification/notification.html.twig' with _notification|merge({
+          extra_attributes: _notification.extra_attributes|default([])|merge([{
+            name: 'data-ecl-site-header-notification',
+          }]),
+        }) only %}
       </div>
     </div>
   {% endif %}

src/implementations/vanilla/components/notification/notification.js

@@ -1,4 +1,5 @@
 import { queryOne } from '@ecl/dom-utils';
+import EventManager from '@ecl/event-manager';
 
 /**
  * @param {HTMLElement} element DOM element for component instantiation and scope
@@ -22,6 +23,15 @@ export class Notification {
     return notification;
   }
 
+  /**
+   * An array of supported events for this component.
+   *
+   * @type {Array<string>}
+   * @event Notification#onClose
+   * @memberof Notification
+   */
+  supportedEvents = ['onClose'];
+
   constructor(
     element,
     {
@@ -37,6 +47,7 @@ export class Notification {
     }
 
     this.element = element;
+    this.eventManager = new EventManager();
 
     // Options
     this.closeSelector = closeSelector;
@@ -70,6 +81,37 @@ export class Notification {
     ECL.components.set(this.element, this);
   }
 
+  /**
+   * Register a callback function for a specific event.
+   *
+   * @param {string} eventName - The name of the event to listen for.
+   * @param {Function} callback - The callback function to be invoked when the event occurs.
+   * @returns {void}
+   * @memberof Notification
+   * @instance
+   *
+   * @example
+   * // Registering a callback for the 'close' event
+   * notification.on('onClose', (event) => {
+   *   console.log('Close event occurred!', event);
+   * });
+   */
+  on(eventName, callback) {
+    this.eventManager.on(eventName, callback);
+  }
+
+  /**
+   * Trigger a component event.
+   *
+   * @param {string} eventName - The name of the event to trigger.
+   * @param {any} eventData - Data associated with the event.
+   *
+   * @memberof Notification
+   */
+  trigger(eventName, eventData) {
+    this.eventManager.trigger(eventName, eventData);
+  }
+
   /**
    * Destroy component.
    */
@@ -85,13 +127,19 @@ export class Notification {
 
   /**
    * Remove the notification component.
+   *
+   * @param {Event} e
+   *
+   * @fires Notification#onClose
    */
-  handleClickOnClose() {
+  handleClickOnClose(e) {
     // IE way to remove a node...
     if (this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
     }
 
+    this.trigger('onClose', e);
+
     return this;
   }
 }

src/implementations/vanilla/components/site-header/site-header.js

@@ -48,6 +48,7 @@ export class SiteHeader {
       searchFormSelector = '[data-ecl-search-form]',
       loginToggleSelector = '[data-ecl-login-toggle]',
       loginBoxSelector = '[data-ecl-login-box]',
+      notificationSelector = '[data-ecl-site-header-notification]',
       attachClickListener = true,
       attachKeyListener = true,
       attachResizeListener = true,
@@ -74,6 +75,7 @@ export class SiteHeader {
     this.searchToggleSelector = searchToggleSelector;
     this.searchFormSelector = searchFormSelector;
     this.loginToggleSelector = loginToggleSelector;
+    this.notificationSelector = notificationSelector;
     this.loginBoxSelector = loginBoxSelector;
     this.attachClickListener = attachClickListener;
     this.attachKeyListener = attachKeyListener;
@@ -95,6 +97,7 @@ export class SiteHeader {
     this.loginBox = null;
     this.resizeTimer = null;
     this.direction = null;
+    this.notificationContainer = null;
 
     // Bind `this` for use in callbacks
     this.openOverlay = this.openOverlay.bind(this);
@@ -109,6 +112,7 @@ export class SiteHeader {
     this.handleClickGlobal = this.handleClickGlobal.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.setLanguageListHeight = this.setLanguageListHeight.bind(this);
+    this.handleNotificationClose = this.handleNotificationClose.bind(this);
   }
 
   /**
@@ -141,6 +145,7 @@ export class SiteHeader {
     this.languageListNonEu = queryOne(this.languageListNonEuSelector);
     this.languageListContent = queryOne(this.languageListContentSelector);
     this.close = queryOne(this.closeOverlaySelector);
+    this.notification = queryOne(this.notificationSelector);
 
     // direction
     this.direction = getComputedStyle(this.element).direction;
@@ -186,6 +191,20 @@ export class SiteHeader {
     // Set ecl initialized attribute
     this.element.setAttribute('data-ecl-auto-initialized', 'true');
     ECL.components.set(this.element, this);
+
+    if (this.notification) {
+      this.notificationContainer = this.notification.closest(
+        '.ecl-site-header__notification',
+      );
+
+      setTimeout(() => {
+        const eclNotification = ECL.components.get(this.notification);
+
+        if (eclNotification) {
+          eclNotification.on('onClose', this.handleNotificationClose);
+        }
+      }, 0);
+    }
   }
 
   /**
@@ -400,6 +419,15 @@ export class SiteHeader {
     }
   }
 
+  /**
+   * Removes the containers of the notification element
+   */
+  handleNotificationClose() {
+    if (this.notificationContainer) {
+      this.notificationContainer.remove();
+    }
+  }
+
   /**
    * Set a max height for the language list content
    */