@openeuropa/bcl-theme-default 1.10.7 → 1.10.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,14 +22,14 @@
     "@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.7",
-    "@openeuropa/bcl-builder": "^1.10.7",
-    "@openeuropa/bcl-twig-templates": "^1.10.7",
+    "@openeuropa/bcl-bootstrap": "^1.10.8",
+    "@openeuropa/bcl-builder": "^1.10.8",
+    "@openeuropa/bcl-twig-templates": "^1.10.8",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
-    "cross-env": "7.0.3",
+    "cross-env": "10.1.0",
     "flag-icons": "6.9.2",
-    "glob": "11.0.1",
+    "glob": "11.0.3",
     "npm-run-all": "4.1.5",
     "slim-select": "1.27.1",
     "slim-select-2": "github:tibi2303/slim-select#master"
@@ -51,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "5f7e5c2fd90eceb81c0ffcf52dcf8e3921c3acae"
+  "gitHead": "9c2e64443ae179948cbf748c41d438af7a0f2421"
 }

package/src/icons/icons.js

@@ -56,6 +56,7 @@ module.exports = [
   "exclamation-lg.svg",
   "question-lg.svg",
   "info-lg.svg",
+  "x.svg",
   "x-lg.svg",
   "plus-lg.svg",
   "dash-lg.svg",
@@ -115,6 +116,7 @@ module.exports = [
   "trash.svg",
   "trash-fill.svg",
   "link.svg",
+  "list.svg",
 
   // Social.svg
   "skype.svg",

package/src/js/accordion-toggle/accordion-toggle.js

@@ -3,8 +3,6 @@ import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
 import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";
 
 class AccordionToggle {
-  static isInitialized = false;
-
   constructor(buttonElement) {
     this.buttonElement = buttonElement;
     this.targetAccordionId = buttonElement.getAttribute("data-target");
@@ -36,16 +34,33 @@ class AccordionToggle {
     });
   }
 
-  static init() {
-    if (AccordionToggle.isInitialized) {
-      return;
-    }
+  static init(root = document.documentElement) {
+    const context = root instanceof Document ? root.documentElement : root;
+
+    const toggleButtons =
+      context instanceof Element
+        ? SelectorEngine.find('[data-action][data-target]', context)
+        : context && typeof context.querySelectorAll === "function"
+          ? Array.from(context.querySelectorAll('[data-action][data-target]'))
+          : SelectorEngine.find('[data-action][data-target]');
 
-    const toggleButtons = SelectorEngine.find('[data-action][data-target]');
-    toggleButtons.forEach(buttonElement => new AccordionToggle(buttonElement));
+    toggleButtons.forEach((buttonElement) => {
+      if (buttonElement.dataset.accordionToggleInitialized === "true") {
+        return;
+      }
 
-    AccordionToggle.isInitialized = true;
+      new AccordionToggle(buttonElement);
+      buttonElement.dataset.accordionToggleInitialized = "true";
+    });
   }
 }
 
+const initializeAccordionToggle = () => AccordionToggle.init();
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initializeAccordionToggle);
+} else {
+  initializeAccordionToggle();
+}
+
 export default AccordionToggle;

package/src/scss/_header.scss

@@ -4,25 +4,37 @@ $header-background-start: #039 !default;
 $header-background-end: #1b4ac3 !default;
 $header-link-active-background: #003776 !default;
 
-.bcl-header__project {
-  background: linear-gradient(
-    90deg,
-    $header-background-start 0%,
-    $header-background-end 100%
-  );
-}
-
 .bcl-header .nav-link {
   color: $eu-blue;
   display: flex;
   align-items: center;
 }
 
+.bcl-navbar-toggler {
+  background: transparent;
+  border: none;
+  border-radius: var(--bs-border-radius-sm);
+  padding: map-get($spacers, "1-5") map-get($spacers, "2-5");
+  color: $link-color;
+  line-height: 1;
+  @extend .rounded-2;
+  .active-icon {
+    display: none;
+  }
+  &[aria-expanded="true"] {
+    background-color: $primary;
+    color: $white;
+    .active-icon {
+      display: block;
+    }
+    .default-icon {
+      display: none;
+    }
+  }
+}
+
 .bcl-header--ec,
 .ec__header {
-  .bcl-header__project {
-    background: $header-background;
-  }
   /* stylelint-disable-next-line no-descending-specificity */
   .nav-link {
     color: $ec-blue;
@@ -33,21 +45,7 @@ $header-link-active-background: #003776 !default;
   align-items: flex-end;
 }
 
-.bcl-header--neutral {
-  .bcl-header__project {
-    background: $gray-700;
-  }
-}
-
-.bcl-header:not(.bcl-header--neutral) .bcl-header__project {
-  padding-top: map-get($spacers, 3);
-}
-
 .bcl-header {
-  .navbar-brand img {
-    width: 100px;
-  }
-
   .notification {
     position: relative;
     padding-right: 0;
@@ -64,16 +62,6 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-.bcl-header__project .bcl-header__site-name {
-  display: inline-block;
-  margin-bottom: 0;
-  font-size: 1.3rem;
-  font-weight: 300;
-  color: $white;
-  vertical-align: middle;
-  max-width: 80%;
-}
-
 .bcl-header__navbar.navbar {
   padding: 0;
   .dropdown-toggle,
@@ -87,12 +75,6 @@ $header-link-active-background: #003776 !default;
   }
 }
 
-@media only screen and (max-width: 400px) {
-  .bcl-header--neutral .bcl-header__project-logo {
-    display: none;
-  }
-}
-
 @include media-breakpoint-up(md) {
   .bcl-header--ec,
   .ec__header {
@@ -124,23 +106,8 @@ $header-link-active-background: #003776 !default;
     }
   }
 
-  .bcl-header__project {
-    padding: map-get($spacers, 3) 0;
-  }
-
   .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:not(:has(.bcl-header__project)) {
-    > .navbar:first-child {
-      box-shadow: var(--bs-box-shadow);
-    }
+    box-shadow: var(--bs-box-shadow);
   }
 
   .bcl-header nav + nav {
@@ -225,12 +192,6 @@ $header-link-active-background: #003776 !default;
 }
 
 @include media-breakpoint-up(lg) {
-  .bcl-header__project.light,
-  .bcl-header--ec .bcl-header__project.light,
-  .ec__header .bcl-header__project.light {
-    background: $white;
-  }
-
   .bcl-header__navbar {
     background: linear-gradient(
       90deg,
@@ -256,33 +217,16 @@ $header-link-active-background: #003776 !default;
     }
   }
 
-  .bcl-header__site-name {
-    margin-left: map-get($spacers, 4);
-    font-weight: 500;
-  }
-
-  .bcl-header__project.light .bcl-header__site-name {
-    color: $black;
-  }
-
   .bcl-header .navbar-toggler {
     position: relative;
     right: 0;
     bottom: 0;
   }
 
-  .bcl-header .navbar-brand img {
-    width: auto;
-  }
-
   .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;
   }

package/src/scss/_mega-menu.scss

@@ -361,15 +361,15 @@ ul.bcl-mega-menu__items {
   > .__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;
+      @include media-breakpoint-up(lg) {
+        display: none;
+      }
     }
   }
 }
@@ -392,15 +392,15 @@ ul.bcl-mega-menu__items {
     }
     // 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;
+      @include media-breakpoint-up(lg) {
+        display: none;
+      }
     }
     // Items get a bit more space to the sides in xl viewport.
     @include media-breakpoint-up(xl) {

package/src/scss/_multiselect-2.scss

@@ -550,3 +550,15 @@
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
 }
+
+.ss-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+}

package/src/scss/_pagination-v2.scss

@@ -0,0 +1,86 @@
+// Pagination V2 overrides scoped to `.pagination-v2`.
+.pagination-v2 {
+  // Keep the navigation landmark borderless to match Bootstrap defaults.
+  &.pager .pagination {
+    --bs-border-color: transparent;
+  }
+
+  .pagination {
+    // Minimal tweaks so buttons keep the square footprint used in the design
+    // while relying on Bootstrap’s native colour tokens.
+    --bs-pagination-border-color: transparent;
+    --bs-pagination-disabled-border-color: transparent;
+    --bs-pagination-item-size: 2.75rem;
+
+    --bs-pagination-hover-bg: #{$primary};
+    --bs-pagination-hover-color: #{$white};
+
+    @extend .pt-4;
+    border-top: 1px solid $pagination-border-color;
+
+    .page-item {
+      .page-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--bs-pagination-item-size);
+        min-height: var(--bs-pagination-item-size);
+        text-decoration: none;
+
+        // When the current page renders as a `div`, keep the hover state neutral.
+        &:is(div):hover {
+          background-color: transparent;
+          border-color: transparent;
+          color: $primary;
+        }
+      }
+      &.active {
+        .page-link {
+          cursor: default;
+          --bs-pagination-active-bg: #{$primary};
+          --bs-pagination-active-color: #{$white};
+
+          &:active,
+          &:hover {
+            --bs-pagination-active-bg: #{$primary};
+            color: var(--bs-pagination-active-color);
+            background-color: var(--bs-pagination-active-bg);
+            @include media-breakpoint-down(md) {
+              --bs-pagination-active-bg: $white;
+              --bs-pagination-active-color: $dark;
+              --bs-pagination-active-border-color: transparent;
+            }
+          }
+          @include media-breakpoint-down(md) {
+            --bs-pagination-active-bg: $white;
+            --bs-pagination-active-color: $dark;
+            --bs-pagination-active-border-color: transparent;
+          }
+        }
+      }
+    }
+    // Glossary variant.
+    &.pagination--glossary {
+      .page-item {
+        margin-right: inherit;
+        .page-link {
+          @extend .fw-normal;
+          border: 1px solid $gray-400;
+          padding: map-get($spacers, "1-5") map-get($spacers, "2-5");
+          @include focused-item();
+          &:hover {
+            @extend .text-decoration-none;
+            @extend .bg-light;
+          }
+        }
+      }
+    }
+  }
+
+  /* Outline the group when any pager control is focused for keyboard users. */
+  .pager__items:focus-within {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+}

package/src/scss/base/_mixins.scss

@@ -11,3 +11,12 @@
     height: 0;
   }
 }
+
+@mixin focused-item($width: 2px, $offset: 2px, $color: $primary) {
+  &:focus,
+  &:focus-visible {
+    box-shadow: none;
+    outline: $width solid $color;
+    outline-offset: $offset;
+  }
+}

package/src/scss/base/_utilities.scss

@@ -154,6 +154,14 @@ svg {
   border-color: $gray-300;
 }
 
+.border-top-subtle {
+  border-top: 1px solid $primary-border-subtle;
+}
+
+.border-bottom-subtle {
+  border-bottom: 1px solid $primary-border-subtle;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
 }

package/src/scss/base/_variables.scss

@@ -98,6 +98,9 @@ $card-start-col-large-size: 255px;
 $card-start-col-size: 160px;
 $card-start-col-small-size: 120px;
 
+// Pagination
+$pagination-border-color: $gray-400;
+
 // Z-index
 // Based on the webtools cookie banner consent, with z-index 100
 $zindex-dropdown: 40;

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

@@ -87,3 +87,4 @@
 @import "@openeuropa/bcl-theme-default/src/scss/carousel";
 @import "@openeuropa/bcl-theme-default/src/scss/gallery";
 @import "@openeuropa/bcl-theme-default/src/scss/pagination";
+@import "@openeuropa/bcl-theme-default/src/scss/pagination-v2";

package/templates/bcl-base-templates/listing-page.html.twig

@@ -8,20 +8,16 @@
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
 #}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
-
-{% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h2') %}
-{% set _title_link = title_link|default({}) %}
-{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _listing = listing|default({}) %}
-{% set _pagination = pagination|default({}) %}
-{% set _sidebar = sidebar|default({}) %}
-
-{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
-{% block content_top %}
+{%- block content_top %}
+  {% set _title = title|default('') %}
+  {% set _title_tag = title_tag|default('h2') %}
+  {% set _title_link = title_link|default({}) %}
+  {% set _title_attributes = title_attributes ?: create_attribute() %}
+  {% set _title_attributes = _title_attributes ?: create_attribute() %}
 {% if filter_button %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
 {% endif %}
@@ -29,7 +25,7 @@
     <div class="col-md-6 col-lg-8 align-self-center">
       {% if _title is not empty %}
         {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title: _title ~ ' (' ~ (_listing.items|length) ~ ')',
           title_tag: _title_tag,
           title_link: _title_link,
           attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
@@ -54,21 +50,23 @@
     </div>
   </div>
   <hr class="d-none d-md-block mb-4-75"/>
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if _listing is not empty %}
     {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content_bottom %}
+{%- block content_bottom %}
+  {% set _pagination = pagination|default({}) %}
   {% if _pagination is not empty %}
     <hr class="d-none d-md-block mt-4-5">
     {% include '@oe-bcl/bcl-pagination/pagination.html.twig' with _pagination only %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}
 
-{% block sidebar %}
+{%- block sidebar %}
+  {% set _sidebar = sidebar|default({}) %}
   {% include '@oe-bcl/bcl-base-templates/sidebar-search.html.twig' with _sidebar only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-contact-form/contact-form.html.twig

@@ -1,5 +1,5 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block content %}
+{%- block content %}
   {% include '@oe-bcl/bcl-form/form.html.twig' with form only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-content-banner/content-banner.html.twig

@@ -92,6 +92,9 @@
 {% if _date is not empty %}
   {% set _left_col_classes = 'bcl-card-start-col' %}
   {% set _right_col_classes = 'col-12 col-md col-xxl-9' %}
+  {% if _image is empty %}
+    {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-1-5 pb-0' %}
+  {% endif %}
 {% endif %}
 {% if _image is empty and _date is empty %}
   {% set _right_col_classes = 'col-lg-10 col-xl-9 col-xxl-8' %}

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

@@ -42,6 +42,7 @@
 {% set _alignment = alignment|default('') %}
 {% set _dark = dark ?? false %}
 {% set _remove_wrapper = remove_wrapper ?? false %}
+{% set _inside_navigation = inside_navigation ?? false %}
 {% set _items = items|default([]) %}
 
 {% set _class = 'dropdown' %}
@@ -75,14 +76,18 @@
                       .setAttribute('id', _id)
 }) %}
 
-{% if _link %}
-  {% set _trigger = _trigger|merge({
-    attributes: _trigger.attributes.setAttribute('role', 'button') 
-  }) %}
+{% if not _inside_navigation %}
+  {% if _link %}
+    {% set _trigger = _trigger|merge({
+      attributes: _trigger.attributes.setAttribute('role', 'button') 
+    }) %}
+  {% else %}
+    {% set _trigger = _trigger|merge({
+      attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
+    }) %}
+  {% endif %}
 {% else %}
-  {% set _trigger = _trigger|merge({
-    attributes: _trigger.attributes.setAttribute('autocomplete', 'off') 
-  }) %}
+  {% set attributes = attributes.setAttribute('aria-hidden', 'true').setAttribute('role', 'presentation') %}
 {% endif %}
 
 {% if not _remove_wrapper %}

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

@@ -1,10 +1,10 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block sidebar %}
+{%- block sidebar %}
   {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
 
   <h2 id="item-1" class="my-4">Description</h2>
@@ -21,4 +21,4 @@
   <h2 id="item-2" class="my-4">Related documents</h2>
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-glossary/glossary-detail.html.twig

@@ -1,6 +1,6 @@
-{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' -%}
 
-{% block  content %}
+{%- block  content %}
 	{% include  '@oe-bcl/bcl-heading/heading.html.twig' with {
 		title: 'Description',
 		title_tag: 'h2',
@@ -38,6 +38,5 @@
     <div {{ file_classes ? 'class="' ~ file_classes ~ '"' }}>
       {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
     </div>
-  {% endfor %}
-
-{% endblock %}
+	{% endfor %}
+{%- endblock -%}

package/templates/bcl-glossary/glossary-listing.html.twig

@@ -1,6 +1,6 @@
-{% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' %}
+{% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' -%}
 
-{% block content_row %}
+{%- block content_row %}
 		{% include '@oe-bcl/bcl-pagination/pagination.html.twig' with glossary only %}
 	<div class="col-12">
 	  <div class="d-md-flex justify-content-end mb-md-4-75 align-items-center border-bottom-md border-top-md border-gray-300 py-3">
@@ -8,12 +8,12 @@
 	    {% include '@oe-bcl/bcl-select/select.html.twig' with itemsPerPage only %}
 	  </div>
   </div>
-{% endblock %}
+{%- endblock -%}
 
-{% block content_top %}
+{%- block content_top %}
 	{% include '@oe-bcl/bcl-heading/heading.html.twig' with {
 	  title: 'Starting with "A" (48)',
 	  title_tag: 'h2',
 	} only %}
 
-{% endblock %}
+{%- endblock -%}

package/templates/bcl-group/group-landing.html.twig

@@ -1,6 +1,6 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
-{% block banner %}
+{%- block banner %}
 <div class="container">
   {% if banner is not empty %}
   <div class="mt-4 mt-md-5">
@@ -70,9 +70,9 @@
   </div>
   {% endif %}
 </div>
-{% endblock %}
+{%- endblock -%}
 
-{% block content %}
+{%- block content %}
   {% if recent is not empty and members is not empty %}
   <div class="row mt-3">
     <div class="col-md-8">
@@ -98,4 +98,4 @@
       {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
     {% endif %}
   {% endif %}
-{% endblock %}
+{%- endblock -%}