@openeuropa/bcl-theme-default 0.25.0 → 0.27.0

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-accordion/accordion.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -97,4 +97,4 @@
 </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - message (string) (default: '')
@@ -80,4 +80,4 @@
 {%- endif -%}
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - label (string) (default: '')
@@ -74,4 +74,4 @@
 </span>
 {%- endif -%}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title: (string) (default: '')
@@ -77,4 +77,4 @@
   </div>
 </div>
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-base-templates/content-type.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -136,4 +136,4 @@
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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-blockquote/blockquote.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title (string) (default: '')
@@ -70,4 +70,4 @@
 {% endif %}
 </figure>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - links (array of objects of type link) (default: [])
@@ -58,4 +58,4 @@
 </nav>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# 
   Parameters:
@@ -110,4 +110,4 @@
 {%- endif -%}
 </button>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - vertical (boolean) (default: false)
@@ -63,4 +63,4 @@
   </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title: (string) (default: '')
@@ -273,4 +273,4 @@
 {% endif %}
 </article>
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-card-layout/card-layout.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - type (string) (default: 'group')
@@ -84,4 +84,4 @@
 {% endif %}
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title (string) (default: '')
@@ -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 %}
@@ -182,4 +176,4 @@
 {% endif %}
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -118,4 +118,4 @@
   </div>
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,8 +1,7 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   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',
@@ -62,4 +60,4 @@
   </span>
 </time>
 
-{% endspaceless %}
+{% endapply %}