@openeuropa/bcl-theme-default 1.0.2 → 1.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -18,16 +18,16 @@
     "update:templates": "run-s align-templates build:copy"
   },
   "devDependencies": {
-    "@ecl/resources-ec-logo": "3.6.0",
-    "@ecl/resources-eu-logo": "3.6.0",
-    "@ecl/resources-flag-icons": "3.6.0",
-    "@openeuropa/bcl-bootstrap": "^1.0.2",
-    "@openeuropa/bcl-builder": "^1.0.2",
-    "@openeuropa/bcl-twig-templates": "^1.0.2",
+    "@ecl/resources-ec-logo": "3.7.1",
+    "@ecl/resources-eu-logo": "3.7.1",
+    "@ecl/resources-flag-icons": "3.7.1",
+    "@openeuropa/bcl-bootstrap": "^1.1.1",
+    "@openeuropa/bcl-builder": "^1.1.1",
+    "@openeuropa/bcl-twig-templates": "^1.1.1",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "flag-icons": "6.6.6",
-    "glob": "8.0.3",
+    "glob": "10.0.0",
     "npm-run-all": "4.1.5",
     "slim-select": "1.27.1"
   },
@@ -48,5 +48,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "54df3dccb26d9f6958862f06103766a0a2d78ca6"
+  "gitHead": "556ad7ce96c849c539c6722a4da68e1ae2822514"
 }

package/src/icons/custom-icons/email.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="bi bi-email" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z" fill="#212529"/>
+</svg>

package/src/icons/custom-icons/flickr.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="bi bi-flickr" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.01797 0H13.982C15.1113 0 16 0.888675 16 2.01797V13.982C16 14.5824 15.7594 15.0391 15.3996 15.3996C15.0629 15.7363 14.5348 16 13.982 16H2.01797C0.888675 16 0 15.1113 0 13.982V2.01797C0 1.46524 0.26445 0.937107 0.600394 0.600394C0.960938 0.23985 1.41758 0 2.01797 0ZM4.68476 10.6426C6.1746 10.6426 7.39922 9.44102 7.39922 7.95195C7.39922 6.46288 6.17383 5.2375 4.68476 5.2375C3.21953 5.2375 1.97031 6.46288 1.97031 7.95195C1.97031 9.44102 3.21953 10.6426 4.68476 10.6426ZM11.3152 10.6426C12.7805 10.6426 14.0297 9.44102 14.0297 7.95195C14.0297 6.46288 12.7805 5.2375 11.3152 5.2375C9.8254 5.2375 8.57618 6.46288 8.57618 7.95195C8.57618 9.44102 9.8254 10.6426 11.3152 10.6426Z" fill="#212529"/>
+</svg>

package/src/icons/custom-icons/pinterest.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" class="bi bi-pinterest" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_16135_108095)">
+    <path d="M8 0C3.58125 0 0 3.58125 0 8C0 11.275 1.96875 14.0875 4.7875 15.325C4.7625 14.7688 4.78125 14.0937 4.925 13.4875C5.08125 12.8375 5.95625 9.13125 5.95625 9.13125C5.95625 9.13125 5.7 8.61875 5.7 7.86875C5.7 6.68125 6.3875 5.8 7.24375 5.8C7.96875 5.8 8.325 6.34375 8.325 7C8.325 7.73125 7.85625 8.825 7.61875 9.8375C7.41875 10.6875 8.04375 11.375 8.88125 11.375C10.4 11.375 11.4187 9.43125 11.4187 7.125C11.4187 5.375 10.2375 4.0625 8.0875 4.0625C5.6625 4.0625 4.15 5.86875 4.15 7.89375C4.15 8.59375 4.35625 9.08125 4.675 9.4625C4.825 9.6375 4.84375 9.70625 4.7875 9.90625C4.75 10.05 4.6625 10.4062 4.625 10.55C4.56875 10.75 4.40625 10.825 4.225 10.75C3.10625 10.2937 2.5875 9.06875 2.5875 7.69375C2.5875 5.41875 4.50625 2.69375 8.30625 2.69375C11.3625 2.69375 13.3687 4.90625 13.3687 7.275C13.3687 10.4125 11.625 12.7563 9.05 12.7563C8.1875 12.7563 7.375 12.2875 7.09375 11.7625C7.09375 11.7625 6.63125 13.6062 6.53125 13.9625C6.3625 14.5812 6.03125 15.1937 5.725 15.675C6.44375 15.8875 7.20625 16.0062 7.99375 16.0062C12.4125 16.0062 15.9937 12.425 15.9937 8.00625C16 3.58125 12.4187 0 8 0Z" fill="#212529"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_16135_108095">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/custom-icons/storify.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" class="bi bi-storify" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_16135_108074)">
+    <path d="M15.32 5.71088C15.5333 6.11555 15.6953 6.56088 15.808 7.04755C15.9213 7.53422 15.984 8.04422 15.998 8.57555C16.0113 9.10555 15.9573 9.64555 15.838 10.1862C15.718 10.7295 15.54 11.2602 15.3066 11.7782C15.0733 12.2962 14.7533 12.7882 14.346 13.2582C13.9373 13.7289 13.4706 14.1509 12.9413 14.5255C12.4206 14.8949 11.7813 15.2149 11.0413 15.4649C10.3006 15.7249 9.49063 15.8949 8.61063 15.9949L8.4113 15.5142C8.46063 15.5042 8.52063 15.4842 8.61063 15.4549C8.70197 15.4242 8.86063 15.3649 9.0913 15.2542C9.33063 15.1542 9.55063 15.0349 9.7713 14.8942C9.9913 14.7542 10.2306 14.5642 10.4913 14.3142C10.7606 14.0642 10.9806 13.7949 11.1713 13.5042C11.3613 13.2049 11.5213 12.8442 11.652 12.4049C11.782 11.9649 11.8526 11.4949 11.8526 10.9949C11.8526 10.5142 11.7926 10.0742 11.6626 9.65488C11.5326 9.23422 11.362 8.88488 11.152 8.57422C10.9426 8.27488 10.7026 7.98422 10.4526 7.71488C10.2026 7.44488 9.94197 7.18488 9.69197 6.94488C9.4313 6.70488 9.20263 6.45488 8.9813 6.21488C8.77197 5.97422 8.59197 5.70422 8.46197 5.40488C8.33197 5.10488 8.26197 4.79422 8.26197 4.46488C8.26197 3.87488 8.50263 3.36488 8.96197 2.94488C9.43197 2.51422 10.0713 2.30488 10.892 2.30488C11.1326 2.30488 11.3726 2.32422 11.6226 2.37488C11.8726 2.42422 12.172 2.51422 12.512 2.66488C12.8533 2.81555 13.1733 3.00488 13.482 3.23422C13.7933 3.46488 14.1226 3.79422 14.4626 4.20422C14.8026 4.61688 15.114 5.09422 15.3926 5.63422L15.32 5.71088ZM0.679967 10.3009C0.4673 9.89622 0.304633 9.45088 0.192633 8.96355C0.0799666 8.47622 0.0159666 7.96755 0.00263331 7.43622C-0.0113667 6.90555 0.0433 6.36622 0.162633 5.82555C0.2833 5.28155 0.4593 4.75088 0.692633 4.23355C0.9273 3.71555 1.2473 3.22288 1.65263 2.75355C2.06263 2.28355 2.5293 1.86022 3.05863 1.48688C3.57863 1.11622 4.21797 0.796883 4.9593 0.546883C5.69997 0.284883 6.50997 0.105549 7.38997 0.00488281L7.5893 0.478883C7.5473 0.488216 7.48397 0.508216 7.3993 0.532216C7.31663 0.558216 7.15997 0.622216 6.92463 0.727549C6.6913 0.831549 6.46663 0.950216 6.2493 1.08555C6.03463 1.22022 5.79597 1.41155 5.53463 1.65955C5.2733 1.90755 5.04797 2.17755 4.85997 2.46955C4.67063 2.76222 4.51263 3.12622 4.38263 3.56288C4.25197 3.99888 4.18863 4.46622 4.18863 4.96755C4.18863 5.44088 4.24863 5.88422 4.3893 6.30088C4.5193 6.71755 4.68863 7.07555 4.8993 7.37622C5.1093 7.68688 5.3493 7.96622 5.5993 8.24755C5.8493 8.52688 6.10997 8.77688 6.35997 9.01688C6.60997 9.25622 6.8493 9.50622 7.05997 9.74755C7.2793 9.99755 7.44997 10.2669 7.57997 10.5569C7.70997 10.8569 7.7793 11.1669 7.7793 11.4969C7.7793 12.0962 7.53997 12.6075 7.07997 13.0275C6.6093 13.4575 5.96863 13.6669 5.14863 13.6669C4.9093 13.6669 4.66863 13.6469 4.41863 13.5969C4.16863 13.5475 3.86863 13.4575 3.53863 13.3069C3.19863 13.1562 2.87863 12.9669 2.55863 12.7369C2.24797 12.5069 1.91863 12.1769 1.57863 11.7669C1.23863 11.3575 0.928633 10.8775 0.647967 10.3375L0.679967 10.3009Z" fill="#212529"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_16135_108074">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/custom-icons/yammer.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" class="bi bi-yammer" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2ZM3.89865 3.69347C4.17157 3.58578 4.48012 3.71972 4.58782 3.99265L6.37826 8.53006L8.19415 3.99034C8.30311 3.71792 8.61228 3.58542 8.8847 3.69439C9.15712 3.80336 9.28962 4.11253 9.18065 4.38494L6.86992 10.1618L6.52877 11.0611L6.52787 11.0636L6.52772 11.0639L6.52633 11.0676L6.52506 11.0709L6.51746 11.0899C6.51136 11.1048 6.50315 11.124 6.49266 11.1469C6.47175 11.1926 6.44146 11.2535 6.40049 11.3239C6.31928 11.4635 6.19172 11.6478 6.00529 11.8239C5.61643 12.1911 4.99695 12.4941 4.12361 12.3353C3.83495 12.2828 3.64348 12.0063 3.69597 11.7176C3.74845 11.4289 4.02501 11.2375 4.31368 11.29C4.81534 11.3812 5.10212 11.2154 5.27575 11.0514C5.37057 10.9619 5.43833 10.8649 5.48212 10.7896C5.50364 10.7526 5.51828 10.7228 5.52666 10.7045C5.53083 10.6954 5.53336 10.6893 5.53434 10.6869L5.53455 10.6864L5.80528 9.97268L3.59948 4.38264C3.49179 4.10972 3.62573 3.80117 3.89865 3.69347ZM10.1874 8.12519C10.2186 8.40644 12.0624 8.62519 13.3124 8.56269C13.9061 8.53144 13.8749 7.59394 13.2811 7.56269C12.6874 7.50019 10.1561 7.84394 10.1874 8.12519ZM9.40613 6.71894C9.56238 6.96894 11.3124 6.25019 12.3749 5.59394C12.8749 5.28144 12.4061 4.46894 11.8436 4.71894C11.3124 4.96894 9.24988 6.50019 9.40613 6.71894ZM9.43738 9.40644C9.31238 9.62519 10.7811 10.8127 11.8436 11.4377C12.3749 11.7189 12.8749 10.9064 12.3749 10.5627C11.8749 10.2189 9.56238 9.15644 9.43738 9.40644Z" fill="#212529"/>
+</svg>

package/src/icons/custom-icons.js

@@ -0,0 +1,8 @@
+module.exports = [
+  // Custom Social Icons - OEL-2240
+  "email.svg",
+  "flickr.svg",
+  "pinterest.svg",
+  "storify.svg",
+  "yammer.svg",
+];

package/src/js/gallery/gallery.js

@@ -42,12 +42,13 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 class Gallery extends BaseComponent {
   constructor(element, config) {
     super(element, config)
-    this.carousel = SelectorEngine.findOne(CAROUSEL_SELECTOR, this.element)
-    this.carouselPager = SelectorEngine.findOne(CAROUSEL_PAGER_SELECTOR, this.element)
+    /* eslint no-underscore-dangle: ["error", { "allow": ["_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.modal = SelectorEngine.findOne(MODAL_SELECTOR, this._element)
     this.addEventListeners()
     this.carouselLazyLoad(this.carouselActiveItem)
   }

package/src/scss/_badge.scss

@@ -9,22 +9,7 @@
   }
   .icon--close {
     display: inline-flex;
-    width: 12px;
-    height: 12px;
-    margin-left: 0.3rem;
-    font-size: 1em;
-    font-weight: 300;
-    justify-content: center;
-    align-items: center;
-    background: $white;
-    border-radius: 50%;
-    border: none;
-    padding: 0;
-    svg {
-      width: 6px;
-      height: 6px;
-      margin: 0;
-    }
+    margin-left: map-get($spacers, 2);
   }
 }
 
@@ -43,12 +28,6 @@ a.badge {
     } @else {
       color: $white;
     }
-    .icon--close {
-      color: $value;
-      @if $color == light or $color == warning {
-        background: $black;
-      }
-    }
   }
   .badge-outline-#{$color} a {
     color: $value !important;
@@ -62,14 +41,6 @@ a.badge {
       border: $border-width solid $value;
       color: $value !important;
     }
-    .icon--close {
-      background: $value;
-      @if $color == light {
-        color: $black;
-      } @else {
-        color: $white;
-      }
-    }
   }
   a.badge {
     &:focus-within,

package/src/scss/_multiselect.scss

@@ -33,7 +33,11 @@ select.multi-select {
 
 .ss-main.multi-select {
   padding: 0;
-
+  &.form-select.is-invalid,
+  &.form-select.is-valid {
+    background: none;
+    padding: 0;
+  }
   .ss-values {
     @include font-size($h4-font-size);
     .ss-value {
@@ -101,7 +105,7 @@ select.multi-select {
     background-repeat: no-repeat;
     background-position: right map-get($multiselect-spacers, "icon-position-x")
       center;
-    background-size: 1rem 1rem;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
   }
 }
 .ss-main.multi-select.is-invalid,

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

@@ -54,7 +54,8 @@
   {%- if _dismissible -%}
   <span class="icon--close" aria-hidden="true">
     {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-      name: "x-lg",
+      name: "x-circle-fill",
+      size: "xs",
       path: _icon_path,
     } only %}
   </span>

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

@@ -92,6 +92,7 @@
     {% set button_attributes = create_attribute()
                               .addClass(['btn-close', 'text-reset'])
                               .setAttribute('data-bs-dismiss', 'offcanvas')
+                              .setAttribute('data-bs-target', '#' ~ _id)
                               .setAttribute('aria-label', _close_aria_label)
     %}
     {% if _extra_classes_close is not empty %}