@openeuropa/bcl-theme-default 1.10.4 → 1.10.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.10.4",
+  "version": "1.10.6",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,9 +22,9 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.10.4",
-    "@openeuropa/bcl-builder": "^1.10.4",
-    "@openeuropa/bcl-twig-templates": "^1.10.4",
+    "@openeuropa/bcl-bootstrap": "^1.10.6",
+    "@openeuropa/bcl-builder": "^1.10.6",
+    "@openeuropa/bcl-twig-templates": "^1.10.6",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
@@ -51,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "52247384e1ce1f63ac2fba5ac0965af9924130fa"
+  "gitHead": "f2c1911b328b12531079c209ecada73a505713c2"
 }

package/src/js/index.esm.js

@@ -11,6 +11,8 @@ import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
+import MainNavigation from "@openeuropa/bcl-theme-default/src/js/main-navigation/main-navigation";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -29,6 +31,8 @@ export {
   Collapse,
   Dropdown,
   Modal,
+  MainNavigation,
+  MegaMenu,
   Offcanvas,
   Popover,
   ScrollSpyV2,

package/src/js/index.umd.js

@@ -11,6 +11,8 @@ import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
+import MainNavigation from "@openeuropa/bcl-theme-default/src/js/main-navigation/main-navigation";
+import MegaMenu from "@openeuropa/bcl-theme-default/src/js/mega-menu/mega-menu";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -29,6 +31,8 @@ export default {
   Collapse,
   Dropdown,
   Modal,
+  MainNavigation,
+  MegaMenu,
   Offcanvas,
   Popover,
   ScrollSpyV2,

package/src/js/main-navigation/main-navigation.js

@@ -0,0 +1,42 @@
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+
+class MainNavigation {
+  constructor(toggler) {
+    this.toggler = toggler;
+    this.top = 0;
+
+    this.target = this.getTargetFromToggler(toggler);
+    if (!this.target) return;
+
+    this.addListeners();
+  }
+
+  getTargetFromToggler(toggler) {
+    const selector = toggler.getAttribute("data-bs-target");
+    if (!selector) return null;
+    try {
+      return document.querySelector(selector);
+    } catch {
+      return null;
+    }
+  }
+
+  addListeners() {
+    EventHandler.on(this.target, "show.bs.collapse", () => {
+      window.scrollTo(0, this.top);
+    });
+  }
+
+  static init(selector = ".bcl-toggler", options) {
+    const togglers = SelectorEngine.find(selector);
+    togglers.forEach((toggler) => new MainNavigation(toggler, options));
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  // Run for all .bcl-toggler buttons
+  MainNavigation.init(".bcl-navbar-toggler");
+});
+
+export default MainNavigation;

package/src/js/mega-menu/mega-menu.js

@@ -0,0 +1,177 @@
+import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
+import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
+import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
+
+class MegaMenu {
+
+  constructor(root) {
+    this.root = root;
+
+    this.backButton = SelectorEngine.findOne(".back-button", this.root);
+    this.trigger = SelectorEngine.findOne(':scope > .dropdown-toggle[data-bs-toggle="dropdown"]', this.root);
+    this.ul = SelectorEngine.findOne('.bcl-mega-menu__items.__level-1', this.root);
+
+    this.addSubmenuTriggerListeners();
+    this.addBackButtonListener();
+    this.addTriggerListeners();
+    this.addEscapeKeyHandler();
+  }
+
+  getPanelForTrigger(trigger) {
+    const id = trigger.getAttribute('aria-controls');
+    return id ? document.getElementById(id) : null;
+  }
+
+  getFocusableChildren(container) {
+    if (!container) return [];
+    return Array.from(container.querySelectorAll(
+      'a[href], button:not([disabled]):not(.back-button), [tabindex]:not([tabindex="-1"])'
+    )).filter(el => !el.hasAttribute('disabled') && el.tabIndex !== -1);
+  }
+
+  focusFirstItemInPanel(trigger) {
+    const panel = this.getPanelForTrigger(trigger);
+    if (!panel) return;
+    const list = SelectorEngine.findOne('ul.bcl-mega-menu__items', panel);
+    if (!list) return;
+    const first = this.getFocusableChildren(list)[0];
+    if (first) first.focus();
+  }
+
+  addEscapeKeyHandler() {
+    // Bootstrap attaches its dropdown keydown listener on `document` in the capture phase.
+    // By listening on `window` in the capture phase, our handler runs *before* Bootstrap’s.
+    // This lets us intercept Esc inside mega menu submenus and stop Bootstrap from closing
+    // the entire dropdown.
+    window.addEventListener('keydown', (e) => {
+      if (e.key !== 'Escape') return;
+
+      // Only act if Esc originated inside THIS mega menu's open submenu
+      const panel = e.target.closest('.bcl-mega-menu__submenu');
+      if (!panel || panel.hidden || !this.root.contains(panel)) {
+        // Not our submenu: let Bootstrap handle it normally
+        return;
+      }
+
+      // Stop the event BEFORE it reaches Bootstrap's document-capture handler
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+
+      // Close only this submenu and focus its trigger
+      const triggerId = panel.getAttribute('aria-labelledby');
+      const trigger = triggerId ? document.getElementById(triggerId) : null;
+      if (trigger) {
+        this.closeSubmenu(trigger);
+        trigger.focus();
+      }
+    }, true);
+  }
+
+  addTriggerListeners() {
+    if (!this.trigger) return;
+
+    // When the mega menu is opened, focus the first item in the menu.
+    EventHandler.on(this.trigger, 'shown.bs.dropdown', () => {
+      const panelId = this.trigger.getAttribute('aria-controls');
+      const panel = panelId ? document.getElementById(panelId) : null;
+      const firstFocusable = panel ? this.getFocusableChildren(panel)[0] : null;
+      if (firstFocusable) firstFocusable.focus();
+    });
+
+    // When the mega menu is closed, close all submenus.
+    EventHandler.on(this.trigger, 'hide.bs.dropdown', () => {
+      this.closeAllSubmenus();
+    });
+  }
+
+  addSubmenuTriggerListeners() {
+    // Clicking/activating a parent item button toggles the submenu.
+    SelectorEngine
+      .find(':scope li > button[aria-expanded]', this.root)
+      .forEach((trigger) => {
+        EventHandler.on(trigger, "click", () => {
+          const expanded = trigger.getAttribute('aria-expanded') === 'true';
+          if (expanded) {
+            // Close this submenu.
+            this.closeSubmenu(trigger);
+          } else {
+            this.openSubmenu(trigger);
+            // The back button is only visible in mobile / narrow viewport.
+            if (this.backButton && this.backButton.offsetParent !== null) {
+              this.backButton.focus();
+            } else {
+              this.focusFirstItemInPanel(trigger);
+            }
+          }
+        });
+      });
+  }
+
+  addBackButtonListener() {
+    // Clicking a back button closes the submenu or the menu itself.
+    if (!this.backButton) {
+      return;
+    }
+    EventHandler.on(this.backButton, "click", () => {
+      const submenusThatWereOpen = this.closeAllSubmenus();
+      if (submenusThatWereOpen.length > 0) {
+        // Focus the submenu trigger, to allow quick reopen by keystroke.
+        submenusThatWereOpen[0].focus();
+        return;
+      }
+      // Close the mega menu itself.
+      if (this.trigger) {
+        // Close using the Bootstrap dropdown API.
+        Dropdown.getOrCreateInstance(this.trigger).hide();
+        // Focus the main trigger, to allow quick reopen by keystroke.
+        this.trigger.focus();
+      }
+    });
+  }
+
+  openSubmenu(trigger) {
+    // Close all submenus, then open the current submenu.
+    this.closeAllSubmenus();
+    trigger.setAttribute('aria-expanded', 'true');
+    const panel = this.getPanelForTrigger(trigger);
+    if (panel) panel.hidden = false;
+  }
+
+  /**
+   * Closes all submenus.
+   *
+   * This is simple while there is only one submenu level.
+   *
+   * @returns {HTMLElement[]}
+   *   Triggers for submenus that were closed.
+   *   Usually this is either exactly one, or none.
+   */
+  closeAllSubmenus() {
+    if (!this.ul) {
+      return;
+    }
+    const triggers = SelectorEngine
+      .find(':scope > li > button[aria-expanded="true"]', this.ul);
+    // Use arrow fn to keep `this` bound.
+    triggers.forEach((t) => this.closeSubmenu(t));
+    return triggers;
+  }
+
+  closeSubmenu(trigger) {
+    trigger.setAttribute('aria-expanded', 'false');
+    const panel = this.getPanelForTrigger(trigger);
+    if (panel) panel.hidden = true;
+  }
+
+  static init(selector = ".bcl-mega-menu") {
+    const megaMenus = SelectorEngine.find(selector);
+    megaMenus.forEach((menuEl) => new MegaMenu(menuEl));
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  MegaMenu.init();
+});
+
+export default MegaMenu;

package/src/scss/_header.scss

@@ -4,12 +4,7 @@ $header-background-start: #039 !default;
 $header-background-end: #1b4ac3 !default;
 $header-link-active-background: #003776 !default;
 
-.bcl-header .container {
-  position: relative;
-}
-
-.bcl-header__project,
-.bcl-header__navbar {
+.bcl-header__project {
   background: linear-gradient(
     90deg,
     $header-background-start 0%,
@@ -17,71 +12,15 @@ $header-link-active-background: #003776 !default;
   );
 }
 
-.bcl-header__top-navbar {
-  .navbar-collapse {
-    justify-content: end;
-  }
-
-  .navbar-toggler {
-    border: none;
-    color: $light;
-  }
-
-  .navbar-toggler-icon {
-    background: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cmVjdCB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgZmlsbD0ibm9uZSIvPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjY0IiByPSIxNiIvPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjEyOCIgcj0iMTYiLz48Y2lyY2xlIGN4PSIxMjgiIGN5PSIxOTIiIHI9IjE2Ii8+PC9zdmc+");
-  }
-}
-
 .bcl-header .nav-link {
   color: $eu-blue;
   display: flex;
   align-items: center;
-  padding: map-get($spacers, 2);
-}
-
-.bcl-header__navbar {
-  .navbar-collapse {
-    padding-bottom: map-get($spacers, 3);
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $gray-100;
-
-      &:focus,
-      &:hover,
-      &.active {
-        color: #fff;
-      }
-      &:focus-visible {
-        outline: 2px solid $white;
-        border-radius: 4px;
-        outline-offset: 0;
-      }
-    }
-  }
-
-  .navbar-toggler {
-    position: absolute;
-    top: -43px;
-    left: map-get($spacers, "2-5");
-    border-color: $white;
-  }
-
-  .navbar-toggler-icon {
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
-  }
-
-  input:active,
-  input:focus {
-    box-shadow: 0 0 0 0.25rem hsl(210deg 2% 83% / 50%);
-  }
 }
 
 .bcl-header--ec,
 .ec__header {
-  .bcl-header__project,
-  .bcl-header__navbar {
+  .bcl-header__project {
     background: $header-background;
   }
   /* stylelint-disable-next-line no-descending-specificity */
@@ -95,8 +34,7 @@ $header-link-active-background: #003776 !default;
 }
 
 .bcl-header--neutral {
-  .bcl-header__project,
-  .bcl-header__navbar {
+  .bcl-header__project {
     background: $gray-700;
   }
 }
@@ -136,15 +74,22 @@ $header-link-active-background: #003776 !default;
   max-width: 80%;
 }
 
-@media only screen and (max-width: 400px) {
-  .bcl-header--neutral .bcl-header__project-logo {
-    display: none;
+.bcl-header__navbar.navbar {
+  padding: 0;
+  .dropdown-toggle,
+  .nav-link {
+    padding: map-get($spacers, "2-5") map-get($spacers, 3);
+    border: none;
+    background: transparent;
+  }
+  &.collapsing {
+    transition: none;
   }
 }
 
-@include media-breakpoint-down(sm) {
-  .bcl-header .navbar:first-child .nav-link {
-    padding: 0.5rem 0.4rem;
+@media only screen and (max-width: 400px) {
+  .bcl-header--neutral .bcl-header__project-logo {
+    display: none;
   }
 }
 
@@ -158,34 +103,44 @@ $header-link-active-background: #003776 !default;
 }
 
 @include media-breakpoint-down(lg) {
-  .bcl-header__site-name {
-    margin-left: 5rem;
+  body:has(.bcl-header__navbar #main-navbar.collapsing),
+  body:has(.bcl-header__navbar #main-navbar.show),
+  body:has(.bcl-header__navbar.collapsing),
+  body:has(.bcl-header__navbar.show) {
+    overflow: hidden;
+  }
+
+  header:has(.bcl-header__navbar #main-navbar.collapsing),
+  header:has(.bcl-header__navbar #main-navbar.show),
+  header:has(.bcl-header__navbar.collapsing),
+  header:has(.bcl-header__navbar.show) {
+    height: 100vh;
+    display: flex;
+    flex-flow: column;
+    overflow: auto;
+
+    > div:has(.breadcrumb) {
+      display: none;
+    }
   }
 
-  .bcl-header__top-navbar .navbar-collapse {
-    z-index: 1050;
-    position: absolute;
-    right: map-get($spacers, "2-5");
-    top: 100%;
-    background: white;
-    border: 1px solid $gray-300;
-    border-radius: 4px;
-
-    .nav {
-      align-items: flex-start;
-      flex-direction: column;
-      min-width: 16rem;
-      padding: map-get($spacers, 3);
+  .bcl-header__project {
+    padding: map-get($spacers, 3) 0;
+  }
 
-      li {
-        width: 100%;
-      }
+  .bcl-header {
+    .bcl-header__project {
+      z-index: 1040; // Make sure project bar is above the mega menu
+      position: relative;
+      box-shadow: var(--bs-box-shadow);
+      flex-shrink: 0;
     }
   }
 
-  .bcl-header__project {
-    min-height: map-get($spacers, 5);
-    padding-top: map-get($spacers, 3);
+  .bcl-header:not(:has(.bcl-header__project)) {
+    > .navbar:first-child {
+      box-shadow: var(--bs-box-shadow);
+    }
   }
 
   .bcl-header nav + nav {
@@ -195,21 +150,76 @@ $header-link-active-background: #003776 !default;
       position: static;
     }
   }
+  .bcl-header__top-navbar {
+    z-index: 1040;
+  }
 
-  .bcl-header__navbar {
-    .navbar-collapse {
-      max-width: 100%;
-      .nav-item {
-        &.dropdown {
-          max-width: 100%;
-          a {
-            white-space: normal;
-          }
-          .dropdown-menu {
-            max-width: 100%;
-          }
+  .bcl-header__navbar.navbar {
+    background: $white;
+    padding-top: 0;
+    z-index: 1030;
+    width: 100%;
+    align-items: flex-start;
+    .navbar-nav {
+      width: 100%;
+      margin-top: 1rem;
+      &:has(.bcl-mega-menu__container.show) {
+        .nav-item {
+          display: none;
+        }
+        .nav-item:has(.bcl-mega-menu__container.show) {
+          display: block;
         }
       }
+      .dropdown-toggle,
+      .nav-link {
+        color: $dark;
+        width: 100%;
+        // Use flex for icon spacing.
+        display: flex;
+        gap: 1rem;
+        justify-content: space-between;
+        position: relative;
+        padding: 1rem;
+        border-bottom: 1px solid $primary-bg-subtle;
+        text-align: left;
+        // Unset border-radius for buttons.
+        border-radius: 0;
+        // Allow text wrapping in buttons.
+        white-space: normal;
+        &.active {
+          color: $dark;
+        }
+        &:focus-visible {
+          outline: 2px solid $primary;
+          // Don't let the outline overlap other elements.
+          outline-offset: -2px;
+          // Remove the shadow from bootstrap style.
+          box-shadow: none;
+        }
+        // Whenever ::after is used for an icon, it must not shrink.
+        // This also applies to .dropdown-toggle, which gets the icon from Bootstrap.
+        &::after {
+          flex-shrink: 0;
+        }
+      }
+      // The mega menu trigger gets a different type of icon.
+      .bcl-mega-menu > .dropdown-toggle {
+        &:after {
+          background: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.57488%2013.25L8.46238%2014.125L15.1374%207.45L8.43738%200.75L7.56238%201.625L12.7276%206.81247H0.5V8.06247H12.7512L7.57488%2013.25Z%22%20fill%3D%22%23212529%22%2F%3E%3C%2Fsvg%3E");
+          align-self: center;
+          content: "";
+          // Unset border from bootstrap style.
+          border: none;
+          width: 20px;
+          height: 20px;
+          background-size: cover;
+          background-position: center;
+        }
+      }
+      .dropdown-item {
+        white-space: normal;
+      }
     }
   }
 }
@@ -221,6 +231,31 @@ $header-link-active-background: #003776 !default;
     background: $white;
   }
 
+  .bcl-header__navbar {
+    background: linear-gradient(
+      90deg,
+      $header-background-start 0%,
+      $header-background-end 100%
+    );
+    .dropdown-toggle,
+    .nav-link {
+      color: $white;
+    }
+  }
+
+  .bcl-header--ec,
+  .ec__header {
+    .bcl-header__navbar {
+      background: $header-background;
+    }
+  }
+
+  .bcl-header--neutral {
+    .bcl-header__navbar {
+      background: $gray-700;
+    }
+  }
+
   .bcl-header__site-name {
     margin-left: map-get($spacers, 4);
     font-weight: 500;
@@ -240,24 +275,90 @@ $header-link-active-background: #003776 !default;
     width: auto;
   }
 
-  .bcl-header__navbar .navbar-collapse {
-    padding-bottom: 0;
-  }
-
-  .bcl-header__navbar .dropdown-menu {
-    z-index: 1050; // Make sure dropdown overlaps the search offcanvas
+  .bcl-header__navbar .bcl-mega-menu {
+    --bcl-mega-menu-zindex: 1050; // Make sure dropdown overlaps the search offcanvas
   }
 
   .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
     padding-bottom: map-get($spacers, 3);
   }
 
+  .bcl-header__navbar.collapse {
+    display: block;
+  }
+
   .bcl-header--ec,
   .ec__header {
     .navbar-brand img {
       width: 285px;
     }
   }
+
+  .bcl-header__navbar.navbar {
+    .dropdown-toggle,
+    .nav-link {
+      border-radius: 0;
+      &:hover {
+        background: $primary-bg-subtle;
+        color: $dark;
+        &:focus-visible {
+          outline-color: $primary;
+        }
+      }
+      &.active,
+      &.show {
+        background: $white;
+        color: $dark;
+        &:focus-visible {
+          outline-color: $primary;
+        }
+      }
+      &:focus-visible {
+        box-shadow: none;
+        border: none;
+        outline: 2px solid $white;
+        outline-offset: -8px;
+      }
+    }
+    .dropdown-toggle {
+      &:after {
+        background-color: $white;
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0.625 0.725L1.19375 0.1375L4.99375 3.9625L8.80625 0.125L9.375 0.7125L4.99375 5.125L0.625 0.725Z' fill='black'/%3E%3C/svg%3E");
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-size: contain;
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0.625 0.725L1.19375 0.1375L4.99375 3.9625L8.80625 0.125L9.375 0.7125L4.99375 5.125L0.625 0.725Z' fill='black'/%3E%3C/svg%3E");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border: none;
+        margin-top: 4px;
+      }
+      &:hover {
+        &:after {
+          background-color: $dark;
+        }
+      }
+      &.active {
+        &:after {
+          background-color: $primary;
+        }
+      }
+      &.show {
+        &:after {
+          background-color: $primary;
+          transform: rotate(180deg);
+        }
+      }
+      &.no-chevron {
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 .bcl-language-list-modal {