@openeuropa/bcl-theme-default 0.17.0 → 0.20.0

package/package.json

@@ -2,26 +2,33 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.17.0",
+  "version": "0.20.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.17.0",
-    "@openeuropa/bcl-builder": "^0.17.0",
-    "@openeuropa/bcl-twig-templates": "^0.17.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.20.0",
+    "@openeuropa/bcl-builder": "^0.20.0",
+    "@openeuropa/bcl-twig-templates": "^0.20.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "7.2.0",
     "npm-run-all": "4.1.5",
-    "slim-select": "1.27.0"
+    "slim-select": "1.27.1"
   },
   "publishConfig": {
     "access": "public"
@@ -40,5 +47,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "07ff24de8a209d80750a32cd52dfe9663fabf8e2"
+  "gitHead": "ea13560489a089d0c198f781e75951a9160d2554"
 }

package/src/icons/icons.js

@@ -0,0 +1,337 @@
+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",
+
+  //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",
+
+  //Files and folders
+  "file-earmark-pdf.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",
+];

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/_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;
+}

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

@@ -0,0 +1,120 @@
+//styling
+$borderWidth: 12px;
+$animationTime: 1s;
+$size: 120px;
+
+//Create how many steps
+$howManySteps: 20;
+
+.circular-progress {
+  width: $size;
+  height: $size;
+  line-height: $size;
+  background: none;
+  box-shadow: none;
+  position: relative;
+  &:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: $borderWidth solid $circular-progress-border-color;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  > span {
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+  }
+}
+
+.circular-progress-bar {
+  width: 100%;
+  height: 100%;
+  background: none;
+  border-width: $borderWidth;
+  border-style: solid;
+  position: absolute;
+  top: 0;
+  border-color: $circular-progress-border-color-fill;
+}
+
+.circular-progress-left {
+  left: 0;
+  .circular-progress-bar {
+    left: 100%;
+    border-top-right-radius: ($size / 2);
+    border-bottom-right-radius: ($size / 2);
+    border-left: 0;
+    transform-origin: center left;
+  }
+}
+
+.circular-progress-right {
+  right: 0;
+  .circular-progress-bar {
+    left: -100%;
+    border-top-left-radius: ($size / 2);
+    border-bottom-left-radius: ($size / 2);
+    border-right: 0;
+    transform-origin: center right;
+  }
+}
+
+/* This for loop creates the necessary css animation names 
+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));
+
+  //animation only the left side if below 50%
+  @if $i <= ($howManySteps / 2) {
+    .circular-progress[data-percentage="#{$stepName}"] {
+      .circular-progress-right .circular-progress-bar {
+        animation: loading-#{$i} $animationTime linear forwards;
+      }
+      .circular-progress-left .circular-progress-bar {
+        animation: 0;
+      }
+    }
+  }
+  //animation only the right side if above 50%
+  @if $i > ($howManySteps / 2) {
+    .circular-progress[data-percentage="#{$stepName}"] {
+      .circular-progress-right .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{($howManySteps / 2)}
+          $animationTime
+          linear
+          forwards; //set the animation to longest animation
+      }
+      .circular-progress-left .circular-progress-bar {
+        // prettier-ignore
+        animation: loading-#{$i - ($howManySteps / 2)}
+          $animationTime
+          linear
+          forwards
+          $animationTime;
+      }
+    }
+  }
+}
+
+//animation
+@for $i from 1 through ($howManySteps / 2) {
+  $degrees: (180 / ($howManySteps / 2));
+  $degrees: ($degrees * $i);
+  @keyframes loading-#{$i} {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(#{$degrees}deg);
+    }
+  }
+}

package/src/scss/_footer.scss

@@ -13,6 +13,9 @@ $footer-border-color: #adb5bd !default;
 .bcl-footer--eu,
 .eu__footer {
   background: $eu-light-blue;
+  a {
+    color: $eu-footer-link;
+  }
 }
 
 .bcl-footer--ec,