@openeuropa/bcl-theme-default 1.10.4 → 1.10.6

package/src/scss/_mega-menu.scss

@@ -0,0 +1,432 @@
+/* stylelint-disable no-descending-specificity, declaration-no-important */
+
+/* -------------------------------------
+   Design tokens & helpers
+-------------------------------------- */
+$mm-panel-height: 288px !default;
+$mm-z-content: 2 !default;
+$mm-gutter-x: map-get($spacers, 3) !default;
+$mm-gutter-y: map-get($spacers, "2-5") !default;
+
+/* Helpers */
+@mixin link-reset {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@mixin mm-item-padding($py: $mm-gutter-y, $px: $mm-gutter-x) {
+  padding: $py $px;
+}
+
+/* -------------------------------------
+   Component
+-------------------------------------- */
+
+.bcl-mega-menu {
+  --bcl-mega-menu-zindex: 40;
+}
+
+// The mega menu position should not be relative to its nav item.
+.nav-item:has(> .bcl-mega-menu) {
+  @include media-breakpoint-up(lg) {
+    position: static;
+  }
+}
+
+// Low-specificity defaults for interactive elements inside the component.
+// This does not apply to the trigger, which should get styles from the navbar.
+.bcl-mega-menu__container {
+  :where(a) {
+    @include link-reset;
+  }
+  :where(a, button) {
+    &:focus-visible {
+      outline: 2px solid $primary;
+      // Prevent outline from being cut off in scroll container.
+      outline-offset: -2px;
+    }
+  }
+}
+
+// Disable page-level scroll while open, in lg+ viewport.
+@include media-breakpoint-up(lg) {
+  body:has(.bcl-mega-menu > [aria-expanded="true"]) {
+    overflow-y: hidden;
+  }
+}
+
+// Show a half-transparent page overlay in lg+ viewport.
+@include media-breakpoint-up(lg) {
+  .bcl-mega-menu:has(> [aria-expanded="true"]) {
+    &::after {
+      position: absolute;
+      inset-inline: 0;
+      background: #fff;
+      opacity: 0.5;
+      content: "";
+      z-index: calc(var(--bcl-mega-menu-zindex) - 10);
+      // The overlay can be as tall as we want, because the body scroll is disabled.
+      block-size: 300vw;
+    }
+  }
+}
+
+// Use '[class]' to bump specificity.
+// The element also has .dropdown-menu, causing competing styles.
+.bcl-mega-menu__container[class] {
+  // Only show when expanded.
+  // Use ARIA state instead of .show sibling hacks.
+  // @todo Explain why.
+  display: none;
+  .bcl-mega-menu > [aria-expanded="true"] + & {
+    display: block;
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
+  }
+  // Override the z-index from bootstrap .dropdown-menu.
+  z-index: var(--bcl-mega-menu-zindex);
+  // Transition animation for open/close.
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+    .bcl-mega-menu > [aria-expanded="true"] + & {
+      opacity: 1;
+      transform: none;
+    }
+    .bcl-mega-menu > [aria-expanded="false"] + & {
+      opacity: 0;
+      transform: translateY(-4px);
+      pointer-events: none;
+    }
+  }
+
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  margin-block-start: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+
+  @include media-breakpoint-up(lg) {
+    inset-block-start: 100%;
+    padding-block: map-get($spacers, "2-5");
+    border-bottom: var(--bs-border-width) var(--bs-border-style)
+      var(--bs-border-color);
+  }
+}
+
+// Show a shadowy bar to separate content from links columns.
+.bcl-mega-menu__container .shadow-container {
+  // In medium viewport, the content appears above the links.
+  // The shadowy bar is horizontal.
+  @include media-breakpoint-up(lg) {
+    position: relative;
+    .shadow-bg {
+      position: absolute;
+      inset-inline-start: 50%;
+      inset-block-end: 0;
+      inline-size: 100vw;
+      block-size: 8px;
+      transform: translateX(-50%);
+      box-shadow: 0 4px 5px 0 rgba(224, 229, 245, 0.5);
+    }
+  }
+  // In larger viewport, the content appears left of the links.
+  // The shadowy bar is vertical.
+  @include media-breakpoint-up(xl) {
+    block-size: 100%;
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    .shadow-bg {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+      block-size: 100%;
+      inline-size: 10px;
+      transform: none;
+      box-shadow: 4px 3px 4px 0 rgba(224, 229, 245, 0.5);
+    }
+  }
+}
+
+// The back button.
+.bcl-mega-menu__back-button-block {
+  position: relative;
+  padding: 20px map-get($spacers, 1) 0;
+  > .btn-link {
+    @include link-reset;
+  }
+}
+
+// Left column with the description and "Discover more" link.
+.bcl-mega-menu__info {
+  > .content-block {
+    padding: $mm-gutter-x;
+    background: $primary-bg-subtle;
+    @include media-breakpoint-up(lg) {
+      margin-inline-end: 0;
+      background: $white;
+      padding-inline-end: map-get($spacers, 4);
+      // Allow vertical scrollbar if content is too tall.
+      max-block-size: $mm-panel-height;
+      overflow-y: auto;
+    }
+
+    > .content-link {
+      @include link-reset;
+    }
+  }
+}
+
+// Item lists on any level.
+ul.bcl-mega-menu__items {
+  list-style: none;
+  margin: 0;
+  padding-inline-start: 0;
+  // Add a scrollbar in desktop viewport.
+  @include media-breakpoint-up(lg) {
+    block-size: $mm-panel-height;
+    overflow-y: auto;
+  }
+  // Add space above in mobile viewport.
+  @include media-breakpoint-down(lg) {
+    margin: 1rem 0 0;
+  }
+  // Style the items.
+  > li {
+    // In mobile, items are separated by a border.
+    @include media-breakpoint-down(lg) {
+      &:not(:first-child) > * {
+        border-top: 1px solid $primary-bg-subtle;
+      }
+    }
+    > span,
+    > a,
+    > button {
+      @include mm-item-padding();
+      // Use flex for icon spacing.
+      display: flex;
+      gap: 1rem;
+      justify-content: space-between;
+      > svg {
+        flex-shrink: 0;
+        align-self: center;
+      }
+    }
+    > a {
+      color: $link-color;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    > a,
+    > button {
+      &:hover {
+        background: $primary-bg-subtle;
+      }
+    }
+    > span,
+    > button {
+      color: $dark;
+    }
+    // Buttons are used for parent items.
+    > button {
+      // Buttons don't occupy full width by default.
+      width: 100%;
+      // Unset common button styles.
+      border: none;
+      border-radius: 0;
+      text-align: inherit;
+      background: none;
+      white-space: normal;
+
+      // Show an icon.
+      &::after {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
+        flex-shrink: 0;
+        align-self: center;
+        content: "";
+        height: 1em;
+        width: 1em;
+      }
+
+      &[aria-expanded="true"] {
+        background: $primary-bg-subtle;
+        @include media-breakpoint-up(lg) {
+          // Simulate a border-left without having to adjust the padding.
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            width: 4px;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            background-color: $primary;
+          }
+        }
+      }
+    }
+
+    // The see-all link is at the bottom of the list.
+    &:has(> a.see-all-button) {
+      position: sticky;
+      inset-block-start: 100%;
+    }
+    > a.see-all-button {
+      border-top: none;
+      &:after {
+        background: $neutral-border-color;
+        content: "";
+        block-size: 1px;
+        inset-inline-start: 0;
+        position: absolute;
+        inset-block-start: 0;
+        // Replicate horizontal padding of parent element.
+        inset-inline: $mm-gutter-x;
+      }
+      > svg {
+        inline-size: 0.8rem;
+      }
+      > span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+// First submenu.
+.bcl-mega-menu__menu {
+  // On desktop, sub-submenus are positioned relative to this one.
+  @include media-breakpoint-up(lg) {
+    position: relative;
+    // Avoid a space between the parent menu and the submenu.
+    @include padding-right(0);
+  }
+}
+
+// Nested submenu.
+// This element has the 'hidden' attribute, unless it is expanded.
+.bcl-mega-menu__submenu {
+  // Position relative to the parent.
+  position: absolute;
+  // In mobile it covers the parent.
+  @include media-breakpoint-down(lg) {
+    inset: 0 0 auto;
+    min-height: 100%;
+  }
+  // In desktop, it appears next to the parent.
+  @include media-breakpoint-up(lg) {
+    block-size: 100%;
+    inset: 0 0 0 100%;
+    inline-size: 100%;
+  }
+
+  // In mobile, there is a white background that covers the viewport width.
+  @include media-breakpoint-down(lg) {
+    &:before {
+      position: absolute;
+      content: "";
+      left: 50%;
+      margin-left: -50vw;
+      width: 100vw;
+      top: 0;
+      height: 100%;
+      background: white;
+      z-index: -1;
+    }
+  }
+
+  background: white;
+  // In desktop, it gets a light background.
+  @include media-breakpoint-up(lg) {
+    background: $primary-bg-subtle;
+  }
+
+  // Layout for children
+  display: flex;
+  flex-direction: column;
+
+  > .__header {
+    // The title only shows in mobile.
+    > .__label {
+      @include media-breakpoint-up(lg) {
+        display: none;
+      }
+      @include mm-item-padding(map-get($spacers, 3));
+      margin: 0;
+      color: $dark;
+      background: $primary-bg-subtle;
+      display: block;
+      font-size: 20px;
+    }
+  }
+}
+
+// Second level items column.
+.bcl-mega-menu__second-submenu {
+  > .tab-content > .tab-pane {
+    // In desktop, the entire second-level list has a light blue background.
+    @include media-breakpoint-up(lg) {
+      background: $primary-bg-subtle;
+    }
+    // Hide other parts of the mega menu in mobile, when a sub-submenu is open.
+    @include media-breakpoint-down(lg) {
+      .bcl-mega-menu__container:has(&.active) {
+        .bcl-mega-menu__info,
+        .bcl-mega-menu__first-submenu {
+          display: none;
+        }
+      }
+    }
+    // The panel title only shows in mobile.
+    > .panel-title {
+      @include media-breakpoint-up(lg) {
+        display: none;
+      }
+      @include mm-item-padding(map-get($spacers, 3));
+      margin: 0;
+      color: $dark;
+      background: $primary-bg-subtle;
+      display: block;
+      font-size: 20px;
+    }
+    // Items get a bit more space to the sides in xl viewport.
+    @include media-breakpoint-up(xl) {
+      > ul > li > * {
+        margin: 0 map-get($spacers, "2-5");
+      }
+    }
+  }
+}
+
+// Set light-blue full-width background on some elements.
+@include media-breakpoint-down(lg) {
+  .bcl-mega-menu__submenu > .__header,
+  .bcl-mega-menu .content-block,
+  .bcl-mega-menu__back-button-block {
+    position: relative;
+    &::before {
+      position: absolute;
+      inset-inline-start: 50%;
+      content: "";
+      background: $primary-bg-subtle;
+      inline-size: 100vw;
+      block-size: 100%;
+      inset-block-start: 0;
+      z-index: -1;
+      transform: translateX(-50%);
+    }
+  }
+}

package/src/scss/base/_colors.scss

@@ -16,6 +16,9 @@ $gray-700: #495057;
 
 $text-muted: #495057;
 
+$neutral-bg-subtle: #f3f5fb;
+$neutral-border-color: #b9c5e9;
+
 // Color variants scales
 
 // Tables

package/src/scss/oe-bcl-default.scss

@@ -78,6 +78,7 @@
 @import "@openeuropa/bcl-theme-default/src/scss/badge";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect-2";
+@import "@openeuropa/bcl-theme-default/src/scss/mega-menu";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
 @import "@openeuropa/bcl-theme-default/src/scss/timeline";

package/templates/bcl-button/button.html.twig

@@ -1,6 +1,6 @@
 {% apply spaceless %}
 
-{# 
+{#
   Parameters:
   - label (string) (default: '')
   - variant (string) (default: 'primary')
@@ -38,6 +38,7 @@
 {% set _spinner = spinner|default({}) %}
 {% set _show_spinner = show_spinner ?? false %}
 {% set _clean_class = clean_class ?? false %}
+{% set _remove_icon_spacers = remove_icon_spacers ?? false %}
 
 {% set _classes = [] %}
 {% if _clean_class == false %}
@@ -68,7 +69,7 @@
         size: "fluid",
       })
     %}
-  {% if _label is not empty %}
+  {% if _label is not empty and not _remove_icon_spacers %}
     {% if _icon.attributes is empty %}
       {% set _icon = _icon|merge({
           attributes: create_attribute()

package/templates/bcl-header/header.html.twig

@@ -25,6 +25,7 @@
 {% set _project_logo = project_logo|default({}) %}
 {% set _site_name = site_name|default('') %}
 {% set _project_link = project_link|default('') %}
+{% set _navbar_id = navbar_id|default('header-navbar-' ~ random(100)) %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
@@ -51,10 +52,38 @@
 <header
   {{ attributes }}
 >
-  <!-- navbar_settings -->
-  {% if _head is not empty %}
-    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _head only %}
-  {% endif %}
+  <nav
+    {{ _head.attributes.addClass(['navbar', 'navbar-expand-lg', 'navbar-light']) }}>
+    <div class='container'>
+    {% if _head.brand is not empty %}
+      <a class='navbar-brand' href='{{ _head.brand.link }}'>
+      {% for logo in _head.brand.logos %}
+        <img
+          src='{{ logo.src }}'
+          {% if logo.alt is not empty %}
+          alt='{{ logo.alt }}'
+          {% endif %}
+          {% if logo.class is not empty %}
+          class='{{ logo.class }}'
+          {% endif %}
+        />
+      {% endfor %}
+      </a>
+    {% endif %}
+      <button
+        class="navbar-toggler bcl-navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target='#{{ _navbar_id }}'
+        aria-controls='{{ _navbar_id }}'
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+    </div>
+  </nav>
+
 
   <!-- project name -->
   {% if _project_logo is not empty or _site_name is not empty %}
@@ -62,7 +91,6 @@
     <div class="container">
     {% if _project_link is not empty %}
       <a
-        class="d-inline-block"
         href="{{ _project_link }}"
       >
     {% endif %}
@@ -93,7 +121,10 @@
 
   <!-- navbar -->
   {% if _navbar is not empty %}
-    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar only %}
+    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({
+      disable_collapse: true,
+      attributes: create_attribute().addClass('bcl-header__navbar collapse navbar-collapse').setAttribute('id', _navbar_id).setAttribute('aria-label', 'Main Navigation'),
+    }) only %}
   {% endif %}
 
   <!-- breadcrumbs -->

package/templates/bcl-mega-menu/mega-menu-items.html.twig

@@ -0,0 +1,35 @@
+{% apply spaceless %}
+
+{% set _label = label ?? null %}
+{% set _items = items ?? [] %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 1 %}
+{% set _see_all = see_all ?? null %}
+
+<ul class="bcl-mega-menu__items __level-{{ _level }}">
+  {% for _item in _items %}
+    {% set _li_attributes = _item.li_attributes ?? create_attribute() %}
+    {% if _item.items is defined and _item.items is not empty %}
+      {# This is a parent item. #}
+      <li{{ _li_attributes.addClass('__parent') }}>
+        {% include '@oe-bcl/bcl-mega-menu/mega-menu-submenu.html.twig' with _item|merge({
+          icon_path: _icon_path,
+          level: _level + 1,
+        }) only %}
+      </li>
+    {% else %}
+      {# This is a leaf item. #}
+      <li{{ _li_attributes.addClass('__leaf') }}>
+        {% if _item.path is empty %}
+          {# This is a nolink item. #}
+          <span{{ _item.attributes ?? '' }}>{{ _item.label }}</span>
+        {% else %}
+          {# This is a link. #}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
+
+{% endapply %}

package/templates/bcl-mega-menu/mega-menu-submenu.html.twig

@@ -0,0 +1,65 @@
+{% apply spaceless %}
+
+{% set _items = items ?? [] %}
+{% set _trigger = trigger ?? null %}
+{% set _icon_path = icon_path ?? '' %}
+{% set _level = level ?? 2 %}
+{% set _see_all = see_all ?? null %}
+
+{% set _trigger_id = _trigger.id|default('mm-trigger-' ~ random(10000)) %}
+{% set _panel_id = 'mm-panel-' ~ _trigger_id %}
+
+{% set _trigger_attributes = _trigger.attributes ?? create_attribute() %}
+{% set _trigger = _trigger|merge({
+  attributes: _trigger_attributes
+    .setAttribute('id', _trigger_id)
+    .setAttribute('aria-controls', _panel_id)
+    .setAttribute('aria-expanded', 'false')
+    .setAttribute('aria-haspopup', 'menu'),
+  remove_icon_spacers: true,
+  clean_class: true,
+}) %}
+{% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
+
+{# Add an optional "See all" link as last item. #}
+{% if _see_all is not empty %}
+  {# Wrap the label for an ellipsis. #}
+  {% set _see_all_label %}
+    <span>{{- _see_all.label -}}</span>
+  {% endset %}
+  {% set _see_all_attr = (_see_all.attributes is defined ? _see_all.attributes : create_attribute()) %}
+  {% set _see_all = _see_all|merge({
+    label: _see_all_label,
+    icon: {
+      name: 'arrow-right',
+      path: _icon_path,
+    },
+    li_attributes: create_attribute()
+      .addClass('__see_all'),
+    attributes: _see_all_attr
+      .addClass(['see-all-button'])
+      .setAttribute('aria-label', 'See all items in ‘' ~ _trigger.label ~ '’')
+  }) %}
+  {% set _items = _items|merge([_see_all]) %}
+{% endif %}
+{% set submenu_attributes = create_attribute()
+  .setAttribute('id', _panel_id)
+  .setAttribute('hidden', '')
+  .setAttribute('role', 'group')
+  .setAttribute('aria-labelledby', _trigger_id)
+  .addClass('bcl-mega-menu__submenu', '__level-' ~ _level)
+%}
+<div{{ submenu_attributes }}>
+  {% if _trigger %}
+  <div class="__header">
+      <p class="__label">{{ _trigger.label }}</p>
+  </div>
+  {% endif %}
+  {% include '@oe-bcl/bcl-mega-menu/mega-menu-items.html.twig' with {
+    items: _items,
+    icon_path: _icon_path,
+    level: _level,
+  } only %}
+</div>
+
+{% endapply %}