@openeuropa/bcl-theme-default 0.25.1 → 0.26.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -18,12 +18,12 @@
     "update:templates": "run-s align-templates build:copy"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "3.3.3",
-    "@ecl/resources-eu-logo": "3.3.3",
-    "@ecl/resources-flag-icons": "3.3.3",
-    "@openeuropa/bcl-bootstrap": "^0.25.1",
-    "@openeuropa/bcl-builder": "^0.25.1",
-    "@openeuropa/bcl-twig-templates": "^0.25.1",
+    "@ecl/resources-ec-logo": "3.4.0",
+    "@ecl/resources-eu-logo": "3.4.0",
+    "@ecl/resources-flag-icons": "3.4.0",
+    "@openeuropa/bcl-bootstrap": "^0.26.0",
+    "@openeuropa/bcl-builder": "^0.26.0",
+    "@openeuropa/bcl-twig-templates": "^0.26.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "8.0.3",
@@ -48,5 +48,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "01db3de0765fee0f44e4f202f3ea7d0f2e28f742"
+  "gitHead": "94d89cc379780cfce06178959194b3bc1b4c5eda"
 }

package/src/js/gallery/gallery.js

@@ -5,11 +5,10 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, typeCheckConfig } from '@openeuropa/bcl-bootstrap/js/src/util/index'
+import { defineJQueryPlugin } from '@openeuropa/bcl-bootstrap/js/src/util/index'
 import EventHandler from '@openeuropa/bcl-bootstrap/js/src/dom/event-handler'
 import BaseComponent from '@openeuropa/bcl-bootstrap/js/src/base-component'
 import SelectorEngine from '@openeuropa/bcl-bootstrap/js/src/dom/selector-engine'
-import Manipulator from '@openeuropa/bcl-bootstrap/js/src/dom/manipulator'
 
 /**
  * ------------------------------------------------------------------------
@@ -18,7 +17,6 @@ import Manipulator from '@openeuropa/bcl-bootstrap/js/src/dom/manipulator'
  */
 
 const Default = {}
-const DefaultType = {}
 
 const NAME = 'gallery'
 const DATA_KEY = 'bs.gallery'
@@ -43,14 +41,13 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
 class Gallery extends BaseComponent {
   constructor(element, config) {
-    super(element)
+    super(element, config)
     this.carousel = SelectorEngine.findOne(CAROUSEL_SELECTOR, this.element)
     this.carouselPager = SelectorEngine.findOne(CAROUSEL_PAGER_SELECTOR, this.element)
     this.carouselStartIndex = element.getAttribute('data-gallery-start')
     this.carouselActiveItem = SelectorEngine.find(CAROUSEL_ITEM_SELECTOR, this.carousel)[this.carouselStartIndex]
     this.carouselPager.textContent = Number(this.carouselStartIndex) + 1
     this.modal = SelectorEngine.findOne(MODAL_SELECTOR, this.element)
-    this.config = this.getConfig(config)
     this.addEventListeners()
     this.carouselLazyLoad(this.carouselActiveItem)
   }
@@ -95,16 +92,6 @@ class Gallery extends BaseComponent {
     }
   }
 
-  getConfig(config) {
-    config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(this.element),
-      ...(typeof config === 'object' ? config : {})
-    }
-    typeCheckConfig(NAME, config, DefaultType)
-    return config
-  }
-
   addEventListeners() {
     EventHandler.on(this.carousel, CAROUSEL_EVENT, event => this.setSlide(event))
     EventHandler.on(this.modal, EVENT_MODAL_HIDE, event => this.stopSlide(event))
@@ -115,19 +102,6 @@ class Gallery extends BaseComponent {
     return Default
   }
 
-  static galleryInterface(element, config) {
-    const data = Gallery.getOrCreateInstance(element, config)
-
-    let { _config } = data
-    if (typeof config === 'object') {
-      // eslint-disable-next-line no-unused-vars
-      _config = {
-        ..._config,
-        ...config
-      }
-    }
-  }
-
   static jQueryInterface(config) {
     return this.each(function jInterface() {
       const data = Gallery.getOrCreateInstance(this)
@@ -156,7 +130,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, (event) => {
   const firstSlide = event.target.parentNode.getAttribute('data-bs-slide-to');
   gallery.dataset.galleryStart = firstSlide;
 
-  Gallery.galleryInterface(gallery, Gallery.getInstance(gallery))
+  Gallery.getOrCreateInstance(gallery);
 })
 
 /**

package/src/scss/_banners.scss

@@ -145,6 +145,15 @@
       }
     }
   }
+
+  .tab-pane {
+    .bcl-content-banner {
+      .card {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+  }
 }
 
 // Banners ratio

package/src/scss/_header.scss

@@ -4,6 +4,10 @@ $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 {
   background: linear-gradient(
@@ -13,27 +17,64 @@ $header-link-active-background: #003776 !default;
   );
 }
 
-.bcl-header__navbar .container {
-  position: relative;
-}
-
-.bcl-header__navbar .navbar-collapse {
-  padding-bottom: map-get($spacers, 3);
-}
+.bcl-header__top-navbar {
+  .navbar-collapse {
+    justify-content: end;
+  }
 
-.bcl-header--neutral {
-  .bcl-header__project,
-  .bcl-header__navbar {
-    background: $gray-700;
+  .navbar-toggler {
+    border: none;
+    color: $light;
   }
-}
 
-.bcl-navbar-header {
-  align-items: flex-end;
+  .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;
+      }
+
+      &:first-child {
+        padding-left: 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,
@@ -42,51 +83,46 @@ $header-link-active-background: #003776 !default;
   .bcl-header__navbar {
     background: $header-background;
   }
-
+  /* stylelint-disable-next-line no-descending-specificity */
   .nav-link {
     color: $ec-blue;
   }
 }
 
-.bcl-header:not(.bcl-header--neutral) .bcl-header__project {
-  padding-top: map-get($spacers, 3);
+.bcl-navbar-header {
+  align-items: flex-end;
 }
 
-.bcl-header__navbar .navbar-nav .nav-link {
-  color: $gray-100;
-  &:first-child {
-    padding-left: 0;
+.bcl-header--neutral {
+  .bcl-header__project,
+  .bcl-header__navbar {
+    background: $gray-700;
   }
 }
 
-.bcl-header__navbar .navbar-nav .nav-link:focus,
-.bcl-header__navbar .navbar-nav .nav-link:hover,
-.bcl-header__navbar .navbar-nav .nav-link.active {
-  color: #fff;
-}
-
-.bcl-header__navbar input:active,
-.bcl-header__navbar input:focus {
-  box-shadow: 0 0 0 0.25rem hsl(210deg 2% 83% / 50%);
-}
-
-.bcl-header .notification {
-  position: relative;
-  padding-right: 0;
+.bcl-header:not(.bcl-header--neutral) .bcl-header__project {
+  padding-top: map-get($spacers, 3);
 }
 
-.bcl-header .navbar-brand img {
-  width: 100px;
-}
+.bcl-header {
+  .navbar-brand img {
+    width: 100px;
+  }
 
-.bcl-header .notification span {
-  z-index: 1;
-  height: 18px;
-  padding-right: 5px;
-  padding-left: 5px;
-  line-height: 0.6rem;
-  border-radius: 10px;
-  transform: translate(-11px, 5px);
+  .notification {
+    position: relative;
+    padding-right: 0;
+
+    span {
+      z-index: 1;
+      height: 18px;
+      padding-right: 5px;
+      padding-left: 5px;
+      line-height: 0.6rem;
+      border-radius: 10px;
+      transform: translate(-11px, 5px);
+    }
+  }
 }
 
 .bcl-header__project .bcl-header__site-name {
@@ -99,17 +135,6 @@ $header-link-active-background: #003776 !default;
   max-width: 80%;
 }
 
-.bcl-header .navbar-toggler {
-  position: absolute;
-  top: -43px;
-  right: 14px;
-  border-color: $white;
-}
-
-.bcl-header .navbar-toggler .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");
-}
-
 @media only screen and (max-width: 400px) {
   .bcl-header--neutral .bcl-header__project-logo {
     display: none;
@@ -132,21 +157,42 @@ $header-link-active-background: #003776 !default;
 }
 
 @include media-breakpoint-down(lg) {
+  .bcl-header__site-name {
+    margin-left: 5rem;
+  }
+
+  .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);
+
+      li {
+        width: 100%;
+      }
+    }
+  }
+
   .bcl-header__project {
     min-height: map-get($spacers, 5);
     padding-top: map-get($spacers, 3);
   }
 
   .bcl-header nav + nav {
-    min-height: map-get($spacers, 5);
+    min-height: 3.5rem;
 
     .navbar-toggler {
       position: static;
     }
-
-    .container {
-      justify-content: right;
-    }
   }
 
   .bcl-header__navbar {
@@ -175,7 +221,7 @@ $header-link-active-background: #003776 !default;
   }
 
   .bcl-header__site-name {
-    padding-left: map-get($spacers, 4);
+    margin-left: map-get($spacers, 4);
     font-weight: 500;
   }
 

package/src/scss/_pagination.scss

@@ -18,7 +18,7 @@
     border: none;
     border-bottom: 2px solid transparent;
     color: $dark;
-    font-weight: bold;
+    font-weight: $font-weight-bold;
     text-transform: uppercase;
     white-space: nowrap;
   }
@@ -30,7 +30,7 @@
   }
 
   .page-item:first-child .page-link {
-    border-radius: 0px;
+    border-radius: 0;
   }
 }
 

package/src/scss/base/_utilities.scss

@@ -14,6 +14,33 @@ $utilities: map-merge(
             ),
         )
       ),
+    "width":
+      map-merge(
+        map-get($utilities, "width"),
+        (
+          values:
+            map-merge(
+              map-get(map-get($utilities, "width"), "values"),
+              (
+                min-content: min-content,
+              )
+            ),
+        )
+      ),
+    "flex":
+      map-merge(
+        map-get($utilities, "flex"),
+        (
+          values:
+            map-merge(
+              map-get(map-get($utilities, "flex"), "values"),
+              (
+                1: 1,
+                end-100: 1 0 100%,
+              )
+            ),
+        )
+      ),
     // Extend rounded-top utility.
     "max-width":
       map-merge(

package/src/scss/base/_variables.scss

@@ -101,3 +101,16 @@ $card-start-col-extra-large-size: 350px;
 $card-start-col-large-size: 255px;
 $card-start-col-size: 160px;
 $card-start-col-small-size: 120px;
+
+// Z-index
+// Based on the webtools cookie banner consent, with z-index 100
+$zindex-dropdown: 40;
+$zindex-sticky: 50;
+$zindex-fixed: 60;
+$zindex-offcanvas-backdrop: 65;
+$zindex-offcanvas: 70;
+$zindex-popover: 80;
+$zindex-tooltip: 90;
+
+$zindex-modal-backdrop: 110;
+$zindex-modal: 120;

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

@@ -4,6 +4,7 @@
 // Configuration
 @import "@openeuropa/bcl-bootstrap/scss/functions";
 @import "@openeuropa/bcl-bootstrap/scss/variables";
+@import "@openeuropa/bcl-bootstrap/scss/maps";
 @import "@openeuropa/bcl-bootstrap/scss/mixins";
 
 // Custom variables
@@ -72,7 +73,6 @@
 @import "@openeuropa/bcl-theme-default/src/scss/spinners";
 @import "@openeuropa/bcl-theme-default/src/scss/badge";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect";
-@import "@openeuropa/bcl-theme-default/src/scss/bcl-offcanvas";
 @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-base-templates/sidebar-search.html.twig

@@ -1,7 +1,20 @@
 {% extends "@oe-bcl/bcl-offcanvas/offcanvas.html.twig" %}
 
+{% set responsiveness = 'lg' %}
+{% if extra_classes_header is empty %}
+  {% set extra_classes_header = 'd-lg-block' %}
+{% else %}
+  {% set extra_classes_header = extra_classes_header ~ ' d-lg-block' %}
+{% endif %}
+
 {% block body %}
+  {% if search_form.attributes is empty %}
+    {% set attributes = search_form.create_attribute() %}
+  {% endif %}
+
   <div class="offcanvas-body p-lg-0">
-    {% include '@oe-bcl/bcl-form/form.html.twig' with search_form only %}
+    {% include '@oe-bcl/bcl-form/form.html.twig' with search_form|merge({
+      attributes: search_form.attributes.addClass('w-100')
+    }) only %}
   </div>
 {% endblock %}

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

@@ -6,7 +6,6 @@
   - title_link: (link object) (default: {})
   - title_attributes: (drupal attrs)
   - autoplay (boolean) (default: true)
-  - autoinit (boolean) (default: true)
   - dark (boolean) (default: false)
   - active_item (integer) (default: 1)
   - items (array of objects) format: [
@@ -33,7 +32,6 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _id = id|default('') %}
-{% set _autoinit = autoinit ?? true %}
 {% set _autoplay = autoplay ?? true %}
 {% set _dark = dark|default(false) %}
 {% set _active_item = active_item|default(1) %}
@@ -63,7 +61,7 @@
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}
 
-{% if _autoinit %}
+{% if _autoplay %}
   {% set attributes = attributes.setAttribute('data-bs-ride', 'carousel') %}
 {% endif %}
 
@@ -75,10 +73,6 @@
   {% set attributes = attributes.addClass('rounded-indicators') %}
 {% endif %}
 
-{% if not _autoplay %}
-  {% set attributes = attributes.setAttribute('data-bs-interval', 'false') %}
-{% endif %}
-
 {% set attributes = attributes.addClass(_classes) %}
 
 {%- if _title is not empty -%}
@@ -140,7 +134,7 @@
             <div class="{{ _item.caption_classes }}">
           {% endif %}
           {% if _item.caption_title is not empty %}
-            <h5>{{ _item.caption_title }}</h5>
+            <p class="fs-5">{{ _item.caption_title }}</p>
           {% endif %}
             {{- _item.caption -}}
           {% if _item.caption_classes is defined and _item.caption_classes is not empty %}

package/templates/bcl-date-block/date-block.html.twig

@@ -2,7 +2,6 @@
 
 {#
   Parameters:
-    - "variant" (string) (default: '')
     - "day" (integer) (default: '')
     - "month" (string) (default: '')
     - "date_time" (string) (default: '')
@@ -19,7 +18,6 @@
 {% set _end_day = end_day|default('') %}
 {% set _end_month = end_month|default('') %}
 {% set _end_year = end_year|default('') %}
-{% set _variant = variant|default('') %}
 {% set _css_classes = [
   'bcl-date-block',
   'bg-date',

package/templates/bcl-featured-media/featured-media.html.twig

@@ -67,6 +67,15 @@
 
 {% set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
 
+{% if _image is not empty %}
+  {% set attributes = attributes.addClass(["d-inline-flex", "flex-wrap"]) %}
+  {% if _content_classes is not empty %}
+    {% set _content_classes = _content_classes ~ ' flex-1 w-min-content' %}
+  {% else %}
+    {% set _content_classes = 'flex-1 w-min-content' %}
+  {% endif %}
+{% endif %}
+
 {% if _with_text %}
 <div class="{{ _wrapper_classes }}">
   <div class="row">

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

@@ -39,7 +39,7 @@
 {# Internal properties #}
 
 {% set _icon = icon|default({}) %}
-{% set _icon_inline = icon_inline|default(true) %}
+{% set _icon_inline = icon_inline ?? true %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}

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

@@ -102,7 +102,7 @@ Parameters:
                     {% if _item.caption is not empty or item.caption_title is not empty %}
                       <div class="bcl-gallery__item-caption">
                       {% if _item.caption_title is not empty %}
-                        <h5>{{ _item.caption_title }}</h5>
+                        <p class="fs-5">{{ _item.caption_title }}</p>
                       {% endif %}
                       {% if _item.caption is not empty %}
                         <div class="bcl-gallery__item-description">

package/templates/bcl-language-switcher/language-switcher.html.twig

@@ -30,12 +30,18 @@
 
 <div class="collapse mt-3" id="{{ _id }}">
   <div
-    class="d-md-grid"
-    style="grid-auto-flow: column; grid-template-rows: repeat(4, 1fr)"
+    class="d-grid"
+    style="grid-auto-flow: row;  grid-template-columns: repeat(auto-fit, minmax(4rem, 8rem))"
   >
     {% for language in languages %}
       {% include '@oe-bcl/bcl-link/link.html.twig' with language|merge({
-        attributes: create_attribute().addClass(["btn", "btn-link", "d-block", "ps-0", "text-start"])
+        attributes: create_attribute().addClass(
+          [ "btn",
+            "btn-link",
+            "d-block",
+            "ps-0",
+            "text-start"
+          ])
       }) only %}
     {% endfor %}
   </div>

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

@@ -78,17 +78,17 @@
 
   {% if not _disable_collapse %}
     <button
-      class='navbar-toggler'
-      type='button'
-      data-bs-toggle='collapse'
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
       data-bs-target='#{{ _collapse_id }}'
       aria-controls='{{ _collapse_id }}'
-      aria-expanded='false'
-      aria-label='Toggle navigation'
+      aria-expanded="false"
+      aria-label="Toggle navigation"
     >
-      <span class='navbar-toggler-icon'></span>
+      <span class="navbar-toggler-icon"></span>
     </button>
-    <div class='collapse navbar-collapse' id='{{ _collapse_id }}'>
+    <div class="collapse navbar-collapse" id='{{ _collapse_id }}'>
   {% endif %}
   {% block navigation %}
     {% if _navigation is not empty %}

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

@@ -114,7 +114,7 @@
             role="tab"
           {% endif %}
         >
-        {% elseif _tabs %}
+        {% elseif _tabs and _item.dropdown is not defined %}
           {% set _item = _item|merge({
             attributes: _item.attributes.setAttribute("role", "tab"),
             })