@openeuropa/bcl-theme-default 0.23.0 → 0.24.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -18,17 +18,18 @@
     "update:templates": "run-s align-templates build:copy"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "3.3.0",
-    "@ecl/resources-eu-logo": "3.3.0",
-    "@ecl/resources-flag-icons": "3.3.0",
-    "@openeuropa/bcl-bootstrap": "^0.23.0",
-    "@openeuropa/bcl-builder": "^0.23.0",
-    "@openeuropa/bcl-twig-templates": "^0.23.0",
+    "@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.0",
+    "@openeuropa/bcl-builder": "^0.24.0",
+    "@openeuropa/bcl-twig-templates": "^0.24.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "8.0.3",
     "npm-run-all": "4.1.5",
-    "slim-select": "1.27.1"
+    "slim-select": "1.27.1",
+    "svg-country-flags": "1.2.10"
   },
   "publishConfig": {
     "access": "public"
@@ -47,5 +48,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "fa2097e14024989cddf6f9cd7a9115bed5886aeb"
+  "gitHead": "a46bb6bc12771da4667516dc7b0665b00504ade2"
 }

package/src/icons/icons.js

@@ -18,7 +18,7 @@ module.exports = [
   "arrows-angle-contract.svg",
   "arrows-fullscreen.svg",
 
-  //Shape arrows
+  // Shape arrows
   "arrow-up-circle-fill.svg",
   "arrow-up-circle.svg",
   "arrow-down-circle-fill.svg",
@@ -28,19 +28,19 @@ module.exports = [
   "arrow-right-circle-fill.svg",
   "arrow-right-circle.svg",
 
-  //Box arrows
+  // Box arrows
   "box-arrow-in-right.svg",
   "box-arrow-right.svg",
   "box-arrow-in-up-right.svg",
   "box-arrow-up-right.svg",
 
-  //Carrets
+  // Carrets
   "caret-up-fill.svg",
   "caret-down-fill.svg",
   "caret-left-fill.svg",
   "caret-right-fill.svg",
 
-  //Chevrons
+  // Chevrons
   "chevron-up.svg",
   "chevron-down.svg",
   "chevron-left.svg",
@@ -50,7 +50,7 @@ module.exports = [
   "chevron-double-left.svg",
   "chevron-double-right.svg",
 
-  //Alerts, warnings and signs
+  // Alerts, warnings and signs
   "check-lg.svg",
   "check2.svg",
   "exclamation-lg.svg",
@@ -76,7 +76,7 @@ module.exports = [
   "dash-circle-fill.svg",
   "filter.svg",
 
-  //Files and folders
+  // Files and folders
   "file-earmark-pdf.svg",
   "file-arrow-down-fill.svg",
   "file-pdf-fill.svg",
@@ -111,12 +111,12 @@ module.exports = [
   "folder.svg",
   "folder-fill.svg",
 
-  //UI and keyboard
+  // UI and keyboard
   "trash.svg",
   "trash-fill.svg",
   "link.svg",
 
-  //Social.svg
+  // Social.svg
   "skype.svg",
   "reddit.svg",
   "mastodon.svg",
@@ -134,7 +134,7 @@ module.exports = [
   "google.svg",
   "github.svg",
 
-  //Shapes
+  // Shapes
   "heart.svg",
   "heart-fill.svg",
   "star.svg",
@@ -149,7 +149,7 @@ module.exports = [
   "circle.svg",
   "circle-fill.svg",
 
-  //Media
+  // Media
   "volume-off.svg",
   "volume-off-fill.svg",
   "volume-mute.svg",
@@ -175,7 +175,7 @@ module.exports = [
   "record.svg",
   "record-fill.svg",
 
-  //Devices
+  // Devices
   "camera.svg",
   "camera-fill.svg",
   "printer.svg",
@@ -191,7 +191,7 @@ module.exports = [
   "phone.svg",
   "phone-fill.svg",
 
-  //Date and time
+  // Date and time
   "calendar-x.svg",
   "calendar-x-fill.svg",
   "calendar-check.svg",
@@ -205,7 +205,7 @@ module.exports = [
   "calendar.svg",
   "calendar-fill.svg",
 
-  //Communications
+  // Communications
   "chat-left-quote.svg",
   "chat-left-quote-fill.svg",
   "chat-left-text.svg",
@@ -246,14 +246,14 @@ module.exports = [
   "telephone-fill.svg",
   "translate.svg",
 
-  //Tools
+  // Tools
   "gear.svg",
   "gear-fill.svg",
   "pencil-square.svg",
   "pencil.svg",
   "pencil-fill.svg",
 
-  //Real world
+  // Real world
   "key.svg",
   "key-fill.svg",
   "paperclip.svg",
@@ -278,15 +278,15 @@ module.exports = [
   "house-fill.svg",
   "pin-fill.svg",
 
-  //Geo
+  // Geo
   "geo-alt.svg",
   "geo-alt-fill.svg",
 
-  //Graphics
+  // Graphics
   "zoom-in.svg",
   "zoom-out.svg",
 
-  //Emoji
+  // Emoji
   "emoji-neutral.svg",
   "emoji-neutral-fill.svg",
   "emoji-frown.svg",
@@ -294,13 +294,13 @@ module.exports = [
   "emoji-smile.svg",
   "emoji-smile-fill.svg",
 
-  //Hands
+  // Hands
   "hand-thumbs-down.svg",
   "hand-thumbs-down-fill.svg",
   "hand-thumbs-up.svg",
   "hand-thumbs-up-fill.svg",
 
-  //People
+  // People
   "person-square.svg",
   "person-lines-fill.svg",
   "building.svg",
@@ -317,7 +317,7 @@ module.exports = [
   "person.svg",
   "person-fill.svg",
 
-  //Security
+  // Security
   "unlock.svg",
   "unlock-fill.svg",
   "lock.svg",
@@ -329,13 +329,13 @@ module.exports = [
   "shield-check.svg",
   "shield-fill-check.svg",
 
-  //Cloud
+  // Cloud
   "cloud-arrow-up-fill.svg",
   "cloud-arrow-up.svg",
   "cloud-arrow-down-fill.svg",
   "cloud-arrow-down.svg",
 
-  //Misc
+  // Misc
   "upload.svg",
   "download.svg",
   "bookmarks.svg",

package/src/js/gallery/gallery.js

@@ -44,15 +44,15 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 class Gallery extends BaseComponent {
   constructor(element, config) {
     super(element)
-    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)
+    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)
   }
 
   // Getters
@@ -62,18 +62,19 @@ class Gallery extends BaseComponent {
 
   // Public
   setSlide(event) {
-    const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel)
+    const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel)
     const slideTo = event.relatedTarget
-    this._carouselLazyLoad(slideTo)
-    this._carouselPager.textContent = event.to + 1
+    this.carouselLazyLoad(slideTo)
+    this.carouselPager.textContent = event.to + 1
     this.stopVideo(slideFrom)
   }
 
   stopSlide() {
-    const currentSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel)
+    const currentSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this.carousel)
     this.stopVideo(currentSlide)
   }
 
+  // eslint-disable-next-line class-methods-use-this
   stopVideo(slide) {
     const iframe = SelectorEngine.findOne('iframe', slide);
     const video = SelectorEngine.findOne('video', slide);
@@ -85,7 +86,8 @@ class Gallery extends BaseComponent {
   }
 
   // Private
-  _carouselLazyLoad(slide) {
+  // eslint-disable-next-line class-methods-use-this
+  carouselLazyLoad(slide) {
     const media = SelectorEngine.findOne('[data-src]', slide);
 
     if (media && !media.src) {
@@ -93,19 +95,19 @@ class Gallery extends BaseComponent {
     }
   }
 
-  _getConfig(config) {
+  getConfig(config) {
     config = {
       ...Default,
-      ...Manipulator.getDataAttributes(this._element),
+      ...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))
+  addEventListeners() {
+    EventHandler.on(this.carousel, CAROUSEL_EVENT, event => this.setSlide(event))
+    EventHandler.on(this.modal, EVENT_MODAL_HIDE, event => this.stopSlide(event))
   }
 
   // Static
@@ -118,6 +120,7 @@ class Gallery extends BaseComponent {
 
     let { _config } = data
     if (typeof config === 'object') {
+      // eslint-disable-next-line no-unused-vars
       _config = {
         ..._config,
         ...config
@@ -126,7 +129,7 @@ class Gallery extends BaseComponent {
   }
 
   static jQueryInterface(config) {
-    return this.each(function () {
+    return this.each(function jInterface() {
       const data = Gallery.getOrCreateInstance(this)
 
       if (typeof config !== 'string') {
@@ -148,7 +151,7 @@ class Gallery extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, (event) => {
   const gallery = event.target.closest('div.bcl-gallery')
   const firstSlide = event.target.parentNode.getAttribute('data-bs-slide-to');
   gallery.dataset.galleryStart = firstSlide;

package/src/scss/_card.scss

@@ -0,0 +1,14 @@
+.card {
+  border-color: $gray-300;
+}
+
+@each $color, $value in $theme-colors {
+  .card.bg-#{$color} {
+    color: color-contrast($value);
+    .card-header,
+    .card-footer {
+      border: none;
+      background: shade-color($value, 20%);
+    }
+  }
+}

package/src/scss/_description_list.scss

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

package/src/scss/_inpage-navigation.scss

@@ -1,4 +1,5 @@
 .bcl-inpage-navigation {
+  display: none;
   top: map-get($spacers, 3); // needed for position-sticky
   background-color: $gray-100;
 
@@ -26,3 +27,9 @@
     }
   }
 }
+
+@include media-breakpoint-up(lg) {
+  .bcl-inpage-navigation {
+    display: block;
+  }
+}

package/src/scss/_multiselect.scss

@@ -10,7 +10,7 @@
 // Multiselect Spacers
 $multiselect-spacers: (
   "disabled-spacer": calc(map-get($spacers, 2) - 1px),
-  "disabled-spacer-md": calc(map-get($spacers, 1) - 1px),
+  "disabled-spacer-md": calc(map-get($spacers, 2) - 2px),
   "select-spacer": calc(map-get($spacers, 2) - 2px),
   "select-spacer-md": 0.075rem,
   "select-spacer-start": 0.3rem,
@@ -46,8 +46,27 @@ select.multi-select {
       text-align: center;
       white-space: nowrap;
       vertical-align: baseline;
+      padding-right: map-get($spacers, "3-5");
       @include border-radius($badge-border-radius);
       @include gradient-bg();
+      .ss-value-delete {
+        font-size: 0;
+        &:after {
+          background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 8.5C16 12.9183 12.4183 16.5 8 16.5C3.58172 16.5 0 12.9183 0 8.5C0 4.08172 3.58172 0.5 8 0.5C12.4183 0.5 16 4.08172 16 8.5ZM5.35355 5.14645C5.15829 4.95118 4.84171 4.95118 4.64645 5.14645C4.45118 5.34171 4.45118 5.65829 4.64645 5.85355L7.29289 8.5L4.64645 11.1464C4.45118 11.3417 4.45118 11.6583 4.64645 11.8536C4.84171 12.0488 5.15829 12.0488 5.35355 11.8536L8 9.20711L10.6464 11.8536C10.8417 12.0488 11.1583 12.0488 11.3536 11.8536C11.5488 11.6583 11.5488 11.3417 11.3536 11.1464L8.70711 8.5L11.3536 5.85355C11.5488 5.65829 11.5488 5.34171 11.3536 5.14645C11.1583 4.95118 10.8417 4.95118 10.6464 5.14645L8 7.79289L5.35355 5.14645Z' fill='%23F8F9FA'/%3E%3C/svg%3E%0A");
+          background-repeat: no-repeat;
+          content: "";
+          display: inline-block;
+          height: 1rem;
+          transform: scale(0.8);
+          width: 1rem;
+          padding: 15px;
+          background-position: 50%;
+          border-radius: 50%;
+          position: absolute;
+          right: 0;
+          bottom: -2px;
+        }
+      }
     }
     .ss-disabled {
       padding-top: map-get($multiselect-spacers, "disabled-spacer");
@@ -123,7 +142,9 @@ select.multi-select {
         @include font-size($badge-font-size-desktop);
       }
       .ss-disabled {
-        padding-top: map-get($multiselect-spacers, "disabled-spacer-md");
+        padding-top: calc(
+          map-get($multiselect-spacers, "disabled-spacer-md") + 1px
+        );
         padding-bottom: map-get($multiselect-spacers, "disabled-spacer-md");
       }
     }

package/src/scss/_pagination.scss

@@ -6,3 +6,36 @@
     align-items: center;
   }
 }
+
+.pagination--glossary {
+  margin-bottom: 0;
+
+  .page-item {
+    margin-right: auto;
+  }
+
+  .page-link {
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: $dark;
+    font-weight: bold;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .active .page-link {
+    background: transparent;
+    border-color: $primary;
+    color: $dark;
+  }
+
+  .page-item:first-child .page-link {
+    border-radius: 0px;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .pagination--glossary {
+    @include horizontal-slider;
+  }
+}

package/src/scss/_tabs.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable declaration-no-important */
 .nav {
   &.bcl__nav {
     border: none;
@@ -30,18 +29,9 @@
 
 @include media-breakpoint-down(md) {
   .nav-tabs {
-    position: relative;
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    white-space: nowrap;
+    @include horizontal-slider;
     border: none;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
+
     .nav-item {
       z-index: 1;
     }
@@ -53,6 +43,7 @@
       }
     }
     .dropdown-menu {
+      /* stylelint-disable-next-line declaration-no-important */
       position: fixed !important;
     }
   }

package/src/scss/base/_colors.scss

@@ -11,8 +11,6 @@ $dark: #212529;
 
 $text-muted: #495057;
 
-$link-visited: #6b22b5;
-
 // Color variants scales
 
 // Tables

package/src/scss/base/_layout.scss

@@ -0,0 +1,5 @@
+@include media-breakpoint-up(lg) {
+  .bcl-sidebar h2 {
+    font-size: $h4-font-size;
+  }
+}

package/src/scss/base/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin horizontal-slider {
+  position: relative;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}

package/src/scss/base/_utilities.scss

@@ -23,8 +23,8 @@ $utilities: map-merge(
             map-merge(
               map-get(map-get($utilities, "max-width"), "values"),
               (
-                date: 7.5rem,
-                col-date: calc(7.5rem + var(--#{$variable-prefix}gutter-x)),
+                date: 10rem,
+                col-date: calc(10rem + var(--#{$variable-prefix}gutter-x)),
                 "listing-img": 10rem,
               )
             ),
@@ -46,6 +46,20 @@ $utilities: map-merge(
           responsive: true,
         )
       ),
+    "border-top":
+      map-merge(
+        map-get($utilities, "border-top"),
+        (
+          responsive: true,
+        )
+      ),
+    "border-bottom":
+      map-merge(
+        map-get($utilities, "border-bottom"),
+        (
+          responsive: true,
+        )
+      ),
     // Create medium font weight class
     "font-weight":
       map-merge(
@@ -67,26 +81,32 @@ $utilities: map-merge(
 a {
   text-underline-offset: 2px;
 
-  &:not(.text-underline-hover),
-  &:not(.standalone) {
+  &:not(.text-underline-hover):not(.standalone) {
     text-decoration-color: rgba($primary, 0.3);
+
+    &:visited {
+      text-decoration-color: rgba($purple, 0.3);
+    }
+
     &:hover {
       text-decoration-color: currentColor;
+
+      &:visited {
+        text-decoration-color: $purple;
+      }
     }
   }
 
   &.standalone,
   &.text-underline-hover {
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
+    text-decoration-color: transparent;
 
-  &:visited {
-    color: $link-visited;
     &:hover {
-      color: shade-color($link-visited, 20%);
+      text-decoration-color: currentColor;
+
+      &:visited {
+        text-decoration-color: $purple;
+      }
     }
   }
 }
@@ -117,6 +137,10 @@ svg {
   background-color: $gray-400;
 }
 
+.border-gray-300 {
+  border-color: $gray-300;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
   grid-gap: map-get($gutters, "2-5");

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

@@ -46,16 +46,22 @@
 
 // Helpers
 @import "@openeuropa/bcl-bootstrap/scss/helpers";
+@import "@openeuropa/bcl-theme-default/src/scss/base/layout";
 @import "@openeuropa/bcl-theme-default/src/scss/base/utilities";
 
 // Utilities
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
+// BCL mixins
+@import "@openeuropa/bcl-theme-default/src/scss/base/mixins";
+
 // Custom styles
 @import "@openeuropa/bcl-theme-default/src/scss/alert";
 @import "@openeuropa/bcl-theme-default/src/scss/button";
+@import "@openeuropa/bcl-theme-default/src/scss/card";
 @import "@openeuropa/bcl-theme-default/src/scss/collapse";
 @import "@openeuropa/bcl-theme-default/src/scss/circular-progress-bar";
+@import "@openeuropa/bcl-theme-default/src/scss/description_list";
 @import "@openeuropa/bcl-theme-default/src/scss/reset";
 @import "@openeuropa/bcl-theme-default/src/scss/header";
 @import "@openeuropa/bcl-theme-default/src/scss/footer";

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

@@ -3,18 +3,17 @@
 {#
   Parameters:
   - id (int) (default: random(1000))
-  - flush (boolean) (default: false) flush variant of the accordion
+  - flush (boolean) (default: false)
   - items (array) (default: []): format: [
       {
         title: (string),
         title_tag: (string),
         content: (block),
-        stay_open (boolean) (default: false) stay open after another selected
+        stay_open (boolean) (default: false)
       },
-      ...
     ]
-  - open_item_id (int) (default: 0) index value of the item to open (starting from 1),
-    all closed by default (0)
+  - open_item_id (int) (default: 0)
+  - attributes (drupal attrs)
 #}
 
 {% set _id = id|default(random(1000)) %}

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

@@ -8,15 +8,17 @@
   - animated_dismiss (boolean) (default: true)
   - icon_path (string) (default: '')
   - icon_name (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _message = message|default('') %}
-{% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icon_path = icon_path|default('') %}
+{% set _variant = variant|default('primary') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
+{% set _icon_path = icon_path|default('') %}
 {% set _icon_name = icon_name|default('') %}
+
 {% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
 {% set _icon_names = {
     primary: "info-circle-fill",
@@ -62,7 +64,7 @@
 {% endif %}
   <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
-    <h4 class="alert-heading">{{ _heading }}</h4>
+    <div class="alert-heading h4">{{ _heading }}</div>
   {%- endif -%}
   {%- if _message is not empty -%}
     {{- _message -}}