@openeuropa/bcl-theme-default 0.21.0 → 0.24.0

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

@@ -29,7 +29,7 @@ const CAROUSEL_SELECTOR = '.carousel'
 const CAROUSEL_PAGER_SELECTOR = '.carousel-pager span'
 const CAROUSEL_ACTIVE_SELECTOR = '.carousel-item.active'
 const CAROUSEL_ITEM_SELECTOR = '.carousel-item'
-const THUMBNAIL_SELECTOR = '.bcl-gallery__grid a'
+const THUMBNAIL_SELECTOR = '.bcl-gallery__grid a, .bcl-gallery__mobile-view-more'
 const MODAL_SELECTOR = '.modal'
 const EVENT_MODAL_HIDE = 'hide.bs.modal'
 const CAROUSEL_EVENT = 'slide.bs.carousel'
@@ -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,9 +151,9 @@ class Gallery extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, function (event) {
-  const gallery = event.srcElement.closest('div.bcl-gallery')
-  const firstSlide = event.srcElement.parentNode.getAttribute('data-bs-slide-to');
+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;
 
   Gallery.galleryInterface(gallery, Gallery.getInstance(gallery))

package/src/scss/_alert.scss

@@ -0,0 +1,8 @@
+.alert-light {
+  border-color: $light;
+  background: $white;
+}
+.alert-dark {
+  border-color: $gray-400;
+  background: $gray-200;
+}

package/src/scss/_badge.scss

@@ -16,84 +16,102 @@
     font-weight: 300;
     justify-content: center;
     align-items: center;
-    cursor: pointer;
     background: $white;
     border-radius: 50%;
+    border: none;
+    padding: 0;
     svg {
       width: 6px;
       height: 6px;
       margin: 0;
     }
   }
-  &.bg-primary {
-    .icon--close {
-      color: $primary;
-    }
-  }
-  &.bg-secondary {
-    .icon--close {
-      color: $secondary;
-    }
-  }
-  &.bg-success {
-    .icon--close {
-      color: $success;
-    }
-  }
-  &.bg-danger {
-    .icon--close {
-      color: $danger;
-    }
-  }
-  &.bg-dark {
-    .icon--close {
-      color: $dark;
-    }
-  }
-  &.bg-warning {
-    .icon--close {
-      color: $warning;
-      background: $black;
-    }
-  }
-  &.bg-info {
-    .icon--close {
-      color: $info;
-      background: $black;
-    }
-  }
-  &.bg-light {
-    .icon--close {
-      color: $light;
-      background: $black;
-    }
-  }
 }
 
-// Badges in headings and other text elements
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a {
-  .badge {
-    font-size: 0.75em; // Default size in Bootstrap
+a.badge {
+  text-decoration: none;
+  &:focus-visible {
+    outline: none;
   }
 }
 
 @each $color, $value in $theme-colors {
-  .badge-outline-#{$color} {
-    border: $border-width solid $value;
+  .badge.bg-#{$color} a,
+  .badge.bg-#{$color} {
+    @if $color == light or $color == warning {
+      color: $black;
+    } @else {
+      color: $white;
+    }
+    .icon--close {
+      color: $value;
+      @if $color == light or $color == warning {
+        background: $black;
+      }
+    }
+  }
+  .badge-outline-#{$color} a {
     color: $value !important;
+  }
+  .badge-outline-#{$color} {
     background: transparent !important;
+    @if $color == light {
+      border: $border-width solid $light;
+      color: $light !important;
+    } @else {
+      border: $border-width solid $value;
+      color: $value !important;
+    }
     .icon--close {
       background: $value;
-      color: $white;
       @if $color == light {
         color: $black;
+      } @else {
+        color: $white;
+      }
+    }
+  }
+  a.badge {
+    &:focus-within,
+    &:active,
+    &:hover {
+      &.badge-outline-#{$color} {
+        @if $color == dark {
+          background-color: $light !important;
+          border-color: $black;
+        } @else if $color == light {
+          border-color: $white;
+          color: $white;
+          background: rgba($white, 0.3) !important;
+        } @else {
+          background-color: tint-color($value, 90%) !important;
+          border-color: shade-color($value, 15%) !important;
+        }
+      }
+      &.bg-#{$color} {
+        background-color: shade-color($value, 15%) !important;
+      }
+    }
+    &.badge.bg-#{$color} {
+      &:focus {
+        @if $enable-shadows {
+          @include box-shadow(
+            $btn-box-shadow,
+            0 0 0 $btn-focus-width
+              rgba(mix(color-contrast($value), $value, 15%), 0.5)
+          );
+        } @else {
+          box-shadow: 0
+            0
+            0
+            $btn-focus-width
+            rgba(mix(color-contrast($value), $value, 15%), 0.5);
+        }
+      }
+    }
+    &.badge-outline-#{$color} {
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba($value, 0.5);
       }
     }
   }

package/src/scss/_banners.scss

@@ -51,6 +51,16 @@
   }
 }
 
+@include media-breakpoint-down(md) {
+  .container {
+    .bcl-content-banner {
+      .container {
+        padding: 0;
+      }
+    }
+  }
+}
+
 @include media-breakpoint-up(md) {
   .bcl-banner {
     overflow: hidden;
@@ -128,6 +138,12 @@
         margin-left: 0;
       }
     }
+    .bcl-content-banner {
+      .card {
+        margin-right: -$container-padding-x;
+        margin-left: -$container-padding-x;
+      }
+    }
   }
 }
 

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

@@ -85,6 +85,13 @@
     }
   }
 
+  .bcl-gallery__mobile-view-more > span {
+    display: block;
+    & * {
+      pointer-events: none;
+    }
+  }
+
   .carousel {
     height: 100%;
     width: 100%;

package/src/scss/_inpage-navigation.scss

@@ -1,9 +1,9 @@
 .bcl-inpage-navigation {
+  display: none;
   top: map-get($spacers, 3); // needed for position-sticky
   background-color: $gray-100;
 
-  h5 {
-    font-weight: bold;
+  .bcl-heading {
     margin-bottom: 0;
     padding: map-get($spacers, "3-5");
     border-bottom: 1px solid $gray-300;
@@ -27,3 +27,9 @@
     }
   }
 }
+
+@include media-breakpoint-up(lg) {
+  .bcl-inpage-navigation {
+    display: block;
+  }
+}

package/src/scss/_multiselect.scss

@@ -10,9 +10,10 @@
 // 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": calc(map-get($spacers, 1) + 0.05rem),
+  "select-spacer-md": 0.075rem,
+  "select-spacer-start": 0.3rem,
   "badge-padding-x": map-get($spacers, 1),
   "badge-padding-y": map-get($spacers, 1),
   "add-margin-top": map-get($spacers, "2-5"),
@@ -45,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");
@@ -55,9 +75,10 @@ select.multi-select {
     }
   }
   .ss-multi-selected {
+    border-color: $input-border-color;
     padding: map-get($multiselect-spacers, "select-spacer") 0
       map-get($multiselect-spacers, "select-spacer")
-      map-get($multiselect-spacers, "select-spacer");
+      map-get($multiselect-spacers, "select-spacer-start");
     &.ss-disabled {
       .ss-values {
         .ss-value {
@@ -66,7 +87,8 @@ select.multi-select {
       }
     }
     .ss-add {
-      margin-top: map-get($multiselect-spacers, "add-margin-top");
+      margin-top: 0;
+      align-self: center;
     }
   }
 }
@@ -112,10 +134,7 @@ select.multi-select {
     .ss-multi-selected {
       padding: map-get($multiselect-spacers, "select-spacer-md") 0
         map-get($multiselect-spacers, "select-spacer-md")
-        map-get($multiselect-spacers, "select-spacer-md");
-      .ss-add {
-        margin-top: map-get($multiselect-spacers, "add-margin-top-md");
-      }
+        map-get($multiselect-spacers, "select-spacer-start");
     }
     .ss-values {
       @include font-size(1rem);
@@ -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;
+  }
+}