@openeuropa/bcl-theme-default 0.20.0 → 0.23.0

package/src/js/gallery/gallery.js

@@ -0,0 +1,168 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): gallery.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { defineJQueryPlugin, typeCheckConfig } 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'
+
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+const Default = {}
+const DefaultType = {}
+
+const NAME = 'gallery'
+const DATA_KEY = 'bs.gallery'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+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, .bcl-gallery__mobile-view-more'
+const MODAL_SELECTOR = '.modal'
+const EVENT_MODAL_HIDE = 'hide.bs.modal'
+const CAROUSEL_EVENT = 'slide.bs.carousel'
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+/**
+ * ------------------------------------------------------------------------
+ * Class Definition
+ * ------------------------------------------------------------------------
+ */
+
+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)
+  }
+
+  // Getters
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  setSlide(event) {
+    const slideFrom = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel)
+    const slideTo = event.relatedTarget
+    this._carouselLazyLoad(slideTo)
+    this._carouselPager.textContent = event.to + 1
+    this.stopVideo(slideFrom)
+  }
+
+  stopSlide() {
+    const currentSlide = SelectorEngine.findOne(CAROUSEL_ACTIVE_SELECTOR, this._carousel)
+    this.stopVideo(currentSlide)
+  }
+
+  stopVideo(slide) {
+    const iframe = SelectorEngine.findOne('iframe', slide);
+    const video = SelectorEngine.findOne('video', slide);
+    if (iframe) {
+      iframe.src = iframe.dataset.src;
+    } else if (video) {
+      video.pause();
+    }
+  }
+
+  // Private
+  _carouselLazyLoad(slide) {
+    const media = SelectorEngine.findOne('[data-src]', slide);
+
+    if (media && !media.src) {
+      media.src = media.dataset.src;
+    }
+  }
+
+  _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))
+  }
+
+  // Static
+  static get Default() {
+    return Default
+  }
+
+  static galleryInterface(element, config) {
+    const data = Gallery.getOrCreateInstance(element, config)
+
+    let { _config } = data
+    if (typeof config === 'object') {
+      _config = {
+        ..._config,
+        ...config
+      }
+    }
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const data = Gallery.getOrCreateInstance(this)
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config](this)
+    })
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation
+ * ------------------------------------------------------------------------
+ */
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, THUMBNAIL_SELECTOR, function (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))
+})
+
+/**
+ * ------------------------------------------------------------------------
+ * jQuery
+ * ------------------------------------------------------------------------
+ * add .gallery to jQuery only if jQuery is present
+ */
+
+defineJQueryPlugin(Gallery)
+
+export default Gallery

package/src/js/index.esm.js

@@ -10,6 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -24,6 +25,7 @@ export {
   Carousel,
   Collapse,
   Dropdown,
+  Gallery,
   Modal,
   Offcanvas,
   Popover,

package/src/js/index.umd.js

@@ -10,6 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
@@ -24,6 +25,7 @@ export default {
   Carousel,
   Collapse,
   Dropdown,
+  Gallery,
   Modal,
   Offcanvas,
   Popover,

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/_bcl-offcanvas.scss

@@ -5,10 +5,17 @@
     visibility: visible !important; // stylelint-disable-line declaration-no-important
     border: none;
     transform: none;
+    box-shadow: none;
 
     .offcanvas-body {
       overflow: visible;
     }
+
+    .offcanvas-title {
+      height: 38px;
+      display: flex;
+      align-items: center;
+    }
   }
 
   .bcl-offcanvas + .offcanvas-backdrop {

package/src/scss/_carousel.scss

@@ -0,0 +1,85 @@
+$indicator-size: 8px;
+
+.carousel-indicators {
+  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+  [data-bs-target] {
+    width: $indicator-size;
+    height: $indicator-size;
+    margin: map-get($spacers, "1-5") map-get($spacers, 2) map-get($spacers, 3);
+    border-radius: 50%;
+  }
+}
+
+.carousel-caption {
+  width: 100%;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  bottom: 0;
+  padding: map-get($spacers, 3) 0 map-get($spacers, 4);
+  p {
+    margin-bottom: 0;
+  }
+  a {
+    color: $white;
+    text-decoration-color: $white;
+  }
+}
+
+.carousel-dark {
+  .carousel-caption {
+    background-color: rgba(255, 255, 255, 0.5);
+    a {
+      color: $black;
+      text-decoration-color: $black;
+    }
+  }
+
+  .carousel-indicators {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.carousel-control-next,
+.carousel-control-prev {
+  opacity: 1;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  width: 40px;
+  height: 40px;
+  background-size: 60% 60%;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+}
+
+.carousel-control-next-icon {
+  background-position: 9px center;
+}
+
+.carousel-control-prev-icon {
+  background-position: 7px center;
+}
+
+.carousel.rounded-indicators {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    border-radius: 50%;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .carousel-indicators {
+    & + .carousel-inner {
+      .carousel-caption {
+        bottom: 50px;
+        padding-bottom: 0;
+      }
+    }
+  }
+}

package/src/scss/_circular-progress-bar.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 //styling
 $borderWidth: 12px;
 $animationTime: 1s;
@@ -48,8 +50,8 @@ $howManySteps: 20;
   left: 0;
   .circular-progress-bar {
     left: 100%;
-    border-top-right-radius: ($size / 2);
-    border-bottom-right-radius: ($size / 2);
+    border-top-right-radius: math.div($size, 2);
+    border-bottom-right-radius: math.div($size, 2);
     border-left: 0;
     transform-origin: center left;
   }
@@ -59,8 +61,8 @@ $howManySteps: 20;
   right: 0;
   .circular-progress-bar {
     left: -100%;
-    border-top-left-radius: ($size / 2);
-    border-bottom-left-radius: ($size / 2);
+    border-top-left-radius: math.div($size, 2);
+    border-bottom-left-radius: math.div($size, 2);
     border-right: 0;
     transform-origin: center right;
   }
@@ -70,10 +72,10 @@ $howManySteps: 20;
 Due to the split circle of progress-left and progress right, we must use the animations on each side. 
 */
 @for $i from 1 through $howManySteps {
-  $stepName: ($i * (100 / $howManySteps));
+  $stepName: ($i * math.div(100, $howManySteps));
 
   //animation only the left side if below 50%
-  @if $i <= ($howManySteps / 2) {
+  @if $i <= math.div($howManySteps, 2) {
     .circular-progress[data-percentage="#{$stepName}"] {
       .circular-progress-right .circular-progress-bar {
         animation: loading-#{$i} $animationTime linear forwards;
@@ -84,18 +86,18 @@ Due to the split circle of progress-left and progress right, we must use the ani
     }
   }
   //animation only the right side if above 50%
-  @if $i > ($howManySteps / 2) {
+  @if $i > math.div($howManySteps, 2) {
     .circular-progress[data-percentage="#{$stepName}"] {
       .circular-progress-right .circular-progress-bar {
         // prettier-ignore
-        animation: loading-#{($howManySteps / 2)}
+        animation: loading-#{ math.div($howManySteps, 2)}
           $animationTime
           linear
           forwards; //set the animation to longest animation
       }
       .circular-progress-left .circular-progress-bar {
         // prettier-ignore
-        animation: loading-#{$i - ($howManySteps / 2)}
+        animation: loading-#{$i - math.div($howManySteps, 2)}
           $animationTime
           linear
           forwards
@@ -106,8 +108,8 @@ Due to the split circle of progress-left and progress right, we must use the ani
 }
 
 //animation
-@for $i from 1 through ($howManySteps / 2) {
-  $degrees: (180 / ($howManySteps / 2));
+@for $i from 1 through math.div($howManySteps, 2) {
+  $degrees: math.div(180, math.div($howManySteps, 2));
   $degrees: ($degrees * $i);
   @keyframes loading-#{$i} {
     0% {