@openeuropa/bcl-theme-default 0.18.0 → 0.21.0

package/package.json

@@ -2,21 +2,28 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.18.0",
+  "version": "0.21.0",
   "description": "OE - BCL theme default",
   "scripts": {
+    "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
     "build": "npm-run-all build:*",
     "build:styles": "cross-env bcl-builder styles",
     "build:scripts": "cross-env bcl-builder scripts",
     "build:copy": "cross-env bcl-builder copy",
-    "clean": "rimraf css js templates",
-    "prepublish": "npm run build"
+    "build:sprite": "cross-env bcl-builder sprite",
+    "clean": "rimraf css js templates logos icons",
+    "prepublish": "npm run build",
+    "update:styles": "npm run build:styles && copyfiles -f css/*.min.css ../../../assets",
+    "update:scripts": "npm run build:scripts && copyfiles -f js/*.bundle.min.js ../../../assets",
+    "update:templates": "run-s align-templates build:copy"
   },
   "devDependencies": {
-    "@ecl/resources-flag-icons": "3.1.3",
-    "@openeuropa/bcl-bootstrap": "^0.18.0",
-    "@openeuropa/bcl-builder": "^0.18.0",
-    "@openeuropa/bcl-twig-templates": "^0.18.0",
+    "@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.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",
@@ -40,5 +47,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "a82834df6dff563a956a79bf2899c92742dd5820"
+  "gitHead": "18c01b34ca76780f480c692c566dfe507d961ccf"
 }

package/src/icons/icons.js

@@ -0,0 +1,356 @@
+module.exports = [
+  // Arrows
+  "arrow-up.svg",
+  "arrow-down.svg",
+  "arrow-left.svg",
+  "arrow-right.svg",
+  "arrow-clockwise.svg",
+  "arrow-90deg-down.svg",
+  "arrow-90deg-up.svg",
+  "arrow-return-left.svg",
+  "arrow-90deg-left.svg",
+  "arrow-return-right.svg",
+  "arrow-90deg-right.svg",
+  "arrows-move.svg",
+  "arrows-expand.svg",
+  "arrows-collapse.svg",
+  "arrows-angle-expand.svg",
+  "arrows-angle-contract.svg",
+  "arrows-fullscreen.svg",
+
+  //Shape arrows
+  "arrow-up-circle-fill.svg",
+  "arrow-up-circle.svg",
+  "arrow-down-circle-fill.svg",
+  "arrow-down-circle.svg",
+  "arrow-left-circle-fill.svg",
+  "arrow-left-circle.svg",
+  "arrow-right-circle-fill.svg",
+  "arrow-right-circle.svg",
+
+  //Box arrows
+  "box-arrow-in-right.svg",
+  "box-arrow-right.svg",
+  "box-arrow-in-up-right.svg",
+  "box-arrow-up-right.svg",
+
+  //Carrets
+  "caret-up-fill.svg",
+  "caret-down-fill.svg",
+  "caret-left-fill.svg",
+  "caret-right-fill.svg",
+
+  //Chevrons
+  "chevron-up.svg",
+  "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",
+  "check2.svg",
+  "exclamation-lg.svg",
+  "question-lg.svg",
+  "info-lg.svg",
+  "x-lg.svg",
+  "plus-lg.svg",
+  "dash-lg.svg",
+  "check-circle.svg",
+  "check-circle-fill.svg",
+  "exclamation-circle.svg",
+  "exclamation-circle-fill.svg",
+  "exclamation-triangle-fill.svg",
+  "question-circle.svg",
+  "question-circle-fill.svg",
+  "info-circle.svg",
+  "info-circle-fill.svg",
+  "x-circle.svg",
+  "x-circle-fill.svg",
+  "plus-circle.svg",
+  "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",
+  "file-earmark-ppt.svg",
+  "file-ppt-fill.svg",
+  "file-earmark-excel.svg",
+  "file-excel-fill.svg",
+  "file-earmark-word.svg",
+  "file-word-fill.svg",
+  "file-earmark-image.svg",
+  "file-image-fill.svg",
+  "file-earmark-font.svg",
+  "file-font-fill.svg",
+  "file-earmark-slides.svg",
+  "file-slides-fill.svg",
+  "file-earmark-person.svg",
+  "file-person-fill.svg",
+  "file-earmark-music.svg",
+  "file-music-fill.svg",
+  "file-earmark-play.svg",
+  "file-play-fill.svg",
+  "file-earmark-code.svg",
+  "file-code-fill.svg",
+  "file-earmark-zip.svg",
+  "file-zip-fill.svg",
+  "file-earmark-text.svg",
+  "file-text-fill.svg",
+  "file-earmark.svg",
+  "file-fill.svg",
+  "folder.svg",
+  "folder-fill.svg",
+
+  //UI and keyboard
+  "trash.svg",
+  "trash-fill.svg",
+  "link.svg",
+
+  //Social.svg
+  "skype.svg",
+  "reddit.svg",
+  "mastodon.svg",
+  "messenger.svg",
+  "whatsapp.svg",
+  "telegram.svg",
+  "discord.svg",
+  "youtube.svg",
+  "twitch.svg",
+  "twitter.svg",
+  "facebook.svg",
+  "instagram.svg",
+  "slack.svg",
+  "linkedin.svg",
+  "google.svg",
+  "github.svg",
+
+  //Shapes
+  "heart.svg",
+  "heart-fill.svg",
+  "star.svg",
+  "star-fill.svg",
+  "star-half.svg",
+  "diamond.svg",
+  "diamond-fill.svg",
+  "triangle.svg",
+  "triangle-fill.svg",
+  "square.svg",
+  "square-fill.svg",
+  "circle.svg",
+  "circle-fill.svg",
+
+  //Media
+  "volume-off.svg",
+  "volume-off-fill.svg",
+  "volume-mute.svg",
+  "volume-mute-fill.svg",
+  "volume-up.svg",
+  "volume-up-fill.svg",
+  "volume-down.svg",
+  "volume-down-fill.svg",
+  "skip-forward.svg",
+  "skip-forward-fill.svg",
+  "skip-backward.svg",
+  "skip-backward-fill.svg",
+  "skip-end.svg",
+  "skip-end-fill.svg",
+  "skip-start.svg",
+  "skip-start-fill.svg",
+  "stop.svg",
+  "stop-fill.svg",
+  "pause.svg",
+  "pause-fill.svg",
+  "play.svg",
+  "play-fill.svg",
+  "record.svg",
+  "record-fill.svg",
+
+  //Devices
+  "camera.svg",
+  "camera-fill.svg",
+  "printer.svg",
+  "printer-fill.svg",
+  "display.svg",
+  "display-fill.svg",
+  "tablet-landscape.svg",
+  "tablet-landscape-fill.svg",
+  "tablet.svg",
+  "tablet-fill.svg",
+  "phone-landscape.svg",
+  "phone-landscape-fill.svg",
+  "phone.svg",
+  "phone-fill.svg",
+
+  //Date and time
+  "calendar-x.svg",
+  "calendar-x-fill.svg",
+  "calendar-check.svg",
+  "calendar-check-fill.svg",
+  "calendar-minus.svg",
+  "calendar-minus-fill.svg",
+  "clock-fill.svg",
+  "calendar-plus.svg",
+  "calendar-plus-fill.svg",
+  "clock.svg",
+  "calendar.svg",
+  "calendar-fill.svg",
+
+  //Communications
+  "chat-left-quote.svg",
+  "chat-left-quote-fill.svg",
+  "chat-left-text.svg",
+  "chat-left-text-fill.svg",
+  "chat-left-dots.svg",
+  "chat-left-dots-fill.svg",
+  "chat-left.svg",
+  "chat-left-fill.svg",
+  "rss.svg",
+  "rss-fill.svg",
+  "envelope-open.svg",
+  "envelope-open-fill.svg",
+  "envelope.svg",
+  "envelope-fill.svg",
+  "archive.svg",
+  "archive-fill.svg",
+  "inboxes.svg",
+  "inboxes-fill.svg",
+  "wifi.svg",
+  "inbox.svg",
+  "inbox-fill.svg",
+  "search.svg",
+  "forward.svg",
+  "forward-fill.svg",
+  "reply-all.svg",
+  "reply-all-fill.svg",
+  "reply.svg",
+  "reply-fill.svg",
+  "globe2.svg",
+  "flag.svg",
+  "flag-fill.svg",
+  "broadcast.svg",
+  "bell-slash.svg",
+  "bell-slash-fill.svg",
+  "bell.svg",
+  "bell-fill.svg",
+  "telephone.svg",
+  "telephone-fill.svg",
+  "translate.svg",
+
+  //Tools
+  "gear.svg",
+  "gear-fill.svg",
+  "pencil-square.svg",
+  "pencil.svg",
+  "pencil-fill.svg",
+
+  //Real world
+  "key.svg",
+  "key-fill.svg",
+  "paperclip.svg",
+  "funnel.svg",
+  "funnel-fill.svg",
+  "trophy.svg",
+  "trophy-fill.svg",
+  "award.svg",
+  "award-fill.svg",
+  "tag.svg",
+  "tag-fill.svg",
+  "sticky.svg",
+  "sticky-fill.svg",
+  "gift-fill.svg",
+  "eye-slash.svg",
+  "eye-slash-fill.svg",
+  "signpost-split.svg",
+  "signpost-split-fill.svg",
+  "eye.svg",
+  "eye-fill.svg",
+  "house.svg",
+  "house-fill.svg",
+  "pin-fill.svg",
+
+  //Geo
+  "geo-alt.svg",
+  "geo-alt-fill.svg",
+
+  //Graphics
+  "zoom-in.svg",
+  "zoom-out.svg",
+
+  //Emoji
+  "emoji-neutral.svg",
+  "emoji-neutral-fill.svg",
+  "emoji-frown.svg",
+  "emoji-frown-fill.svg",
+  "emoji-smile.svg",
+  "emoji-smile-fill.svg",
+
+  //Hands
+  "hand-thumbs-down.svg",
+  "hand-thumbs-down-fill.svg",
+  "hand-thumbs-up.svg",
+  "hand-thumbs-up-fill.svg",
+
+  //People
+  "person-square.svg",
+  "person-lines-fill.svg",
+  "building.svg",
+  "person-x.svg",
+  "person-x-fill.svg",
+  "person-check.svg",
+  "person-check-fill.svg",
+  "person-dash.svg",
+  "person-dash-fill.svg",
+  "person-plus.svg",
+  "person-plus-fill.svg",
+  "people.svg",
+  "people-fill.svg",
+  "person.svg",
+  "person-fill.svg",
+
+  //Security
+  "unlock.svg",
+  "unlock-fill.svg",
+  "lock.svg",
+  "lock-fill.svg",
+  "shield-exclamation.svg",
+  "shield-fill-exclamation.svg",
+  "shield-x.svg",
+  "shield-fill-x.svg",
+  "shield-check.svg",
+  "shield-fill-check.svg",
+
+  //Cloud
+  "cloud-arrow-up-fill.svg",
+  "cloud-arrow-up.svg",
+  "cloud-arrow-down-fill.svg",
+  "cloud-arrow-down.svg",
+
+  //Misc
+  "upload.svg",
+  "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/_badge.scss

@@ -8,20 +8,20 @@
     font-size: $badge-font-size-desktop;
   }
   .icon--close {
-    display: inline-block;
+    display: inline-flex;
     width: 12px;
     height: 12px;
     margin-left: 0.3rem;
     font-size: 1em;
     font-weight: 300;
-    line-height: 0.55rem;
-    vertical-align: inherit;
+    justify-content: center;
+    align-items: center;
     cursor: pointer;
     background: $white;
     border-radius: 50%;
     svg {
-      width: 12px;
-      height: 12px;
+      width: 6px;
+      height: 6px;
       margin: 0;
     }
   }

package/src/scss/_banners.scss

@@ -42,12 +42,12 @@
   &::before {
     display: block;
     width: 100%;
-    padding-top: 25%;
+    padding-top: 20%;
     content: "";
   }
 
   .hero &::before {
-    padding-top: 33.33%;
+    padding-top: 25%;
   }
 }
 
@@ -147,14 +147,14 @@
     &::before {
       display: block;
       width: 100%;
-      padding-top: 25%;
+      padding-top: 20%;
       content: "";
     }
 
     &.hero {
       min-height: 380px;
       &::before {
-        padding-top: 33.33%;
+        padding-top: 25%;
       }
     }
   }

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

@@ -1,5 +1,6 @@
 @include media-breakpoint-down(md) {
   .breadcrumb-item + .breadcrumb-item {
+    padding-left: 0;
     &::before {
       display: none;
       content: "";

package/src/scss/_button.scss

@@ -0,0 +1,6 @@
+// Button
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}