@openeuropa/bcl-theme-default 0.20.0 → 0.21.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -21,9 +21,9 @@
     "@ecl/resources-ec-logo": "3.2.3",
     "@ecl/resources-eu-logo": "3.2.3",
     "@ecl/resources-flag-icons": "3.2.3",
-    "@openeuropa/bcl-bootstrap": "^0.20.0",
-    "@openeuropa/bcl-builder": "^0.20.0",
-    "@openeuropa/bcl-twig-templates": "^0.20.0",
+    "@openeuropa/bcl-bootstrap": "^0.21.0",
+    "@openeuropa/bcl-builder": "^0.21.0",
+    "@openeuropa/bcl-twig-templates": "^0.21.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "7.2.0",
@@ -47,5 +47,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "ea13560489a089d0c198f781e75951a9160d2554"
+  "gitHead": "18c01b34ca76780f480c692c566dfe507d961ccf"
 }

package/src/icons/icons.js

@@ -45,6 +45,10 @@ module.exports = [
   "chevron-down.svg",
   "chevron-left.svg",
   "chevron-right.svg",
+  "chevron-double-up.svg",
+  "chevron-double-down.svg",
+  "chevron-double-left.svg",
+  "chevron-double-right.svg",
 
   //Alerts, warnings and signs
   "check-lg.svg",
@@ -70,9 +74,11 @@ module.exports = [
   "plus-circle-fill.svg",
   "dash-circle.svg",
   "dash-circle-fill.svg",
+  "filter.svg",
 
   //Files and folders
   "file-earmark-pdf.svg",
+  "file-arrow-down-fill.svg",
   "file-pdf-fill.svg",
   "file-earmark-bar-graph.svg",
   "file-bar-graph-fill.svg",
@@ -334,4 +340,17 @@ module.exports = [
   "download.svg",
   "bookmarks.svg",
   "bookmarks-fill.svg",
+
+  // Needed by paragraphs OEL-1348
+  "book.svg",
+  "check.svg",
+  "currency-euro.svg",
+  "file.svg",
+  "filter.svg",
+  "box-arrow-up.svg",
+  "image.svg",
+  "info.svg",
+  "files.svg",
+  "share.svg",
+  "camera-video.svg",
 ];

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'
+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.srcElement.closest('div.bcl-gallery')
+  const firstSlide = event.srcElement.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/_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% {

package/src/scss/_gallery.scss

@@ -0,0 +1,262 @@
+.bcl-gallery {
+  .bcl-gallery__thumbnails {
+    border-radius: $border-radius;
+    overflow: hidden;
+  }
+
+  ul.bcl-gallery__grid {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  .bcl-gallery__item {
+    position: relative;
+  }
+
+  .bcl-gallery__item-overlay {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 map-get($spacers, 3);
+    transition: background-color 0.2s ease;
+  }
+
+  .bcl-gallery__item-play-icon {
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: $border-radius;
+    pointer-events: none;
+
+    .bi {
+      fill: $white;
+    }
+  }
+
+  .bcl-gallery__item-caption {
+    display: none;
+    color: $white;
+    text-align: center;
+    pointer-events: none;
+
+    h5 {
+      margin-bottom: 0;
+    }
+  }
+
+  .bcl-gallery__item-description {
+    display: none;
+    margin-top: map-get($spacers, 1);
+  }
+
+  ul.bcl-gallery__grid li:not(:last-child) {
+    margin-bottom: map-get($spacers, 2);
+  }
+
+  .bcl-gallery__thumbnails-collaspe {
+    ul.bcl-gallery__grid {
+      margin-top: map-get($spacers, 2);
+    }
+  }
+
+  .bcl-gallery__collapse {
+    &[aria-expanded="false"] {
+      .label-expanded {
+        display: none;
+      }
+    }
+    &[aria-expanded="true"] {
+      .label-collapsed {
+        display: none;
+      }
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .carousel {
+    height: 100%;
+    width: 100%;
+    max-height: 500px;
+  }
+
+  .carousel-inner {
+    height: 100%;
+  }
+
+  .carousel-item {
+    position: relative;
+    height: 100%;
+    text-align: center;
+    z-index: 1;
+  }
+
+  .modal-content {
+    background: black;
+    justify-content: center;
+  }
+
+  .modal-title {
+    width: 35%;
+    color: white;
+  }
+
+  .carousel-pager {
+    display: flex;
+    justify-content: center;
+    color: white;
+    width: 30%;
+
+    span {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  .modal-close {
+    display: flex;
+    justify-content: end;
+    width: 35%;
+
+    .btn-close {
+      filter: invert(100%);
+      opacity: 1;
+    }
+  }
+
+  .carousel-control-next,
+  .carousel-control-prev {
+    // avoid overlapping medias and make play button of the video accessible
+    top: 50%;
+    height: 20%;
+    transform: translateY(-50%);
+  }
+
+  iframe,
+  video {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 16 / 9;
+    max-width: 900px;
+    object-fit: contain;
+  }
+
+  img {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+
+  /* lazyload */
+  img:not([src]):not([srcset]) {
+    visibility: hidden;
+  }
+
+  @keyframes lazy_spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .carousel-item:after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    border-radius: 50%;
+    border: 2px solid #ccc;
+    border-top-color: #000;
+    animation: lazy_spinner 0.6s linear infinite;
+    z-index: -1;
+  }
+
+  @include media-breakpoint-up(sm) {
+    ul.bcl-gallery__grid {
+      display: grid;
+      grid-template-rows: 1fr 1fr 0;
+      grid-gap: map-get($spacers, 2);
+      grid-template-columns: repeat(4, 1fr);
+      margin-bottom: -#{map-get($spacers, 2)};
+    }
+
+    ul.bcl-gallery__grid li:not(:last-child) {
+      margin-bottom: 0;
+    }
+
+    ul.bcl-gallery__grid li:first-child {
+      grid-column: 1 / 3;
+      grid-row: 1 / 3;
+    }
+
+    .bcl-gallery__thumbnails-collaspe {
+      ul.bcl-gallery__grid {
+        margin-top: map-get($spacers, 2);
+      }
+      ul.bcl-gallery__grid:nth-child(odd) li:first-child {
+        grid-column: auto;
+        grid-row: auto;
+      }
+      ul.bcl-gallery__grid:nth-child(odd) li:last-child {
+        grid-column: 3 / 5;
+        grid-row: 1 / 3;
+      }
+    }
+
+    .bcl-gallery__item:hover {
+      .bcl-gallery__item-overlay {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+      .bcl-gallery__item-play-icon {
+        background-color: $white;
+
+        .bi {
+          fill: $black;
+        }
+      }
+    }
+
+    .modal-title,
+    .modal-close {
+      width: 45%;
+    }
+
+    .carousel-pager {
+      width: 10%;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .bcl-gallery__item:hover {
+      .bcl-gallery__item-caption {
+        display: block;
+      }
+
+      .bcl-gallery__item-play-icon + .bcl-gallery__item-caption {
+        margin-top: map-get($spacers, 2);
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .bcl-gallery__item-description {
+      display: block;
+    }
+  }
+}