@openeuropa/bcl-theme-default 0.24.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.24.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.2",
-    "@ecl/resources-eu-logo": "3.3.2",
-    "@ecl/resources-flag-icons": "3.3.2",
-    "@openeuropa/bcl-bootstrap": "^0.24.1",
-    "@openeuropa/bcl-builder": "^0.24.1",
-    "@openeuropa/bcl-twig-templates": "^0.24.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": "3ebebdea0c76a5a8df03abbd13873956a1e4837a"
+  "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/_description_list.scss

@@ -1,3 +1,15 @@
+dd {
+  margin-bottom: 0;
+
+  > div + div {
+    margin-top: map-get($spacers, 2);
+  }
+}
+
+dd + dd {
+  margin-top: map-get($spacers, 2);
+}
+
 // Desktop uses grid, this is to apply the same spacing in tablet and mobile.
 @include media-breakpoint-down(md) {
   dd + dt {

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/_layout.scss

@@ -3,3 +3,40 @@
     font-size: $h4-font-size;
   }
 }
+
+.bcl-card-start-col {
+  flex-basis: $card-start-col-size;
+  padding: 0;
+  &.bcl-size-small {
+    flex-basis: $card-start-col-small-size;
+  }
+  &.bcl-size-large {
+    flex-basis: $card-start-col-large-size;
+  }
+  &.bcl-size-extra-large {
+    flex-basis: $card-start-col-extra-large-size;
+  }
+}
+
+.row {
+  .bcl-card-start-col {
+    margin-left: calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+    margin-right: calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .bcl-content-banner {
+    .bcl-card-start-col {
+      margin: 0 auto;
+      padding: 0 calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+    }
+  }
+}
+@include media-breakpoint-down(lg) {
+  .bcl-content-banner {
+    .bcl-card-start-col.bcl-size-extra-large {
+      margin: 0 auto;
+    }
+  }
+}

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

@@ -96,3 +96,21 @@ $navbar-nav-link-padding-x: 0.75rem;
 // Circular progress bar
 $circular-progress-border-color: $gray-400;
 $circular-progress-border-color-fill: $primary;
+
+$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

@@ -2,6 +2,10 @@
 
 {#
   Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - id (int) (default: random(1000))
   - flush (boolean) (default: false)
   - items (array) (default: []): format: [
@@ -16,6 +20,10 @@
   - attributes (drupal attrs)
 #}
 
+{% 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 _id = id|default(random(1000)) %}
 {% set _flush = flush|default(false) %}
 {% set _items = items|default([]) %}
@@ -35,6 +43,15 @@
 <div
   {{ attributes }}
 >
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
 {% for _item in _items %}
   {% set _open_item = _open_item_id == loop.index %}
   {% set _button_classes = ['accordion-button'] %}

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,6 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - quote (string) (default: '')
   - attribution (string) (default: '')
   - cite (string) (default: '')
@@ -9,6 +13,10 @@
   - attributes (drupal attrs)
 #}
 
+{% 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 _quote = quote|default('') %}
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
@@ -37,6 +45,15 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
 <figure
   {{ attributes }}
 >

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

@@ -28,9 +28,10 @@
   - horizontal (boolean) (default: false)
   - horizontal_grid (object) (default: {})
     format: {
-      left_col_classes (default: 'col-4')
-      right_col_classes (default: 'col-8')
+      left_col_classes (default: 'bcl-card-start-col')
+      right_col_classes (default: 'col')
       gutter (default: '')
+      gutter (default: '') - options: ['small', 'large']
     }
   - variant (string) (default: '')
   - border_variant (string) (default: '')
@@ -63,8 +64,9 @@
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal|default(false) %}
 {% set _horizontal_grid = horizontal_grid|default({
-  left_col_classes: 'col-4',
-  right_col_classes: 'col-8'
+  left_col_classes: 'bcl-card-start-col',
+  right_col_classes: 'col',
+  left_col_size: '',
 }) %}
 {% set _border_variant = border_variant|default('') %}
 {% set _text_color = text_color|default('') %}
@@ -170,7 +172,7 @@
   <div class='{{ _body_classes }}'>
   {% if _title is not empty %}
     {% if _title_attributes.class is empty %}
-      {% set _title_attributes = _title_attributes.addClass('fs-5') %}
+      {% set _title_attributes = _title_attributes.addClass('fs-4') %}
     {% endif %}
     {% set _title_attributes = _title_attributes.addClass('card-title') %}
     {% include '@oe-bcl/bcl-heading/heading.html.twig' with {