@openeuropa/bcl-theme-default 0.12.0 → 0.16.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.12.0",
+  "version": "0.16.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "build": "npm-run-all build:*",
@@ -13,9 +13,10 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@openeuropa/bcl-bootstrap": "^0.12.0",
-    "@openeuropa/bcl-builder": "^0.12.0",
-    "@openeuropa/bcl-twig-templates": "^0.12.0",
+    "@ecl/resources-flag-icons": "3.1.3",
+    "@openeuropa/bcl-bootstrap": "^0.16.0",
+    "@openeuropa/bcl-builder": "^0.16.0",
+    "@openeuropa/bcl-twig-templates": "^0.16.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "7.2.0",
@@ -39,5 +40,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "b39df646cb20e7faf4564fe7d6bc78aa6bc9022f"
+  "gitHead": "39a52d25c36789a0c4712b0f6e55cbc5cbbedcb5"
 }

package/src/scss/_badge.scss

@@ -2,7 +2,8 @@
 .badge {
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
-  vertical-align: 15%;
+  display: inline-flex;
+  align-items: center;
   @include media-breakpoint-up(md) {
     font-size: $badge-font-size-desktop;
   }
@@ -82,3 +83,18 @@ a {
     font-size: 0.75em; // Default size in Bootstrap
   }
 }
+
+@each $color, $value in $theme-colors {
+  .badge-outline-#{$color} {
+    border: $border-width solid $value;
+    color: $value !important;
+    background: transparent !important;
+    .icon--close {
+      background: $value;
+      color: $white;
+      @if $color == light {
+        color: $black;
+      }
+    }
+  }
+}

package/src/scss/_banners.scss

@@ -30,7 +30,7 @@
 
 .bcl-banner__content {
   padding: map-get($spacers, "4-75") map-get($spacers, "4-5");
-  border-color: $banner-content-border-color !important;
+  border-color: $banner-content-border-color;
 }
 
 .bcl-banner__image {
@@ -91,13 +91,15 @@
         border-left: 4px solid transparent;
       }
     }
+  }
 
-    &.full-width {
-      left: 50%;
-      width: 100vw;
-      margin-left: -50vw;
-      border-radius: 0;
-    }
+  .bcl-banner.full-width,
+  .bcl-content-banner {
+    left: 50%;
+    width: 100vw;
+    margin-left: -50vw;
+    border-radius: 0;
+    position: relative;
   }
 
   .bcl-banner__content {

package/src/scss/_bcl-offcanvas.scss

@@ -1,16 +1,16 @@
-// stylelint-disable declaration-no-important
-
-@media screen and (min-width: 992px) {
+@include media-breakpoint-up(lg) {
   .bcl-offcanvas {
     position: relative;
     width: auto;
-    visibility: visible !important;
+    visibility: visible !important; // stylelint-disable-line declaration-no-important
     border: none;
     transform: none;
+
     .offcanvas-body {
       overflow: visible;
     }
   }
+
   .bcl-offcanvas + .offcanvas-backdrop {
     display: none;
   }

package/src/scss/_footer.scss

@@ -2,17 +2,26 @@
 
 $footer-border-color: #adb5bd !default;
 
-.bcl-footer {
-  background: $eu-light-blue;
+.bcl-footer--neutral {
+  background: $gray-600;
+  a,
+  p {
+    color: $white;
+  }
 }
 
-.bcl-footer.ec__footer {
-  background: $ec-blue;
+.bcl-footer--eu,
+.eu__footer {
+  background: $eu-light-blue;
 }
 
-.bcl-footer.ec__footer a,
-.bcl-footer.ec__footer p {
-  color: $white;
+.bcl-footer--ec,
+.ec__footer {
+  background: $ec-blue;
+  a,
+  p {
+    color: $white;
+  }
 }
 
 .bcl-footer *[class*="border-"] {

package/src/scss/_header.scss

@@ -21,13 +21,11 @@ $header-link-active-background: #003776 !default;
   padding-bottom: map-get($spacers, 3);
 }
 
-.bcl-header__project {
-  padding-top: map-get($spacers, 3);
-}
-
-.ec__header .bcl-header__project,
-.ec__header .bcl-header__navbar {
-  background: $header-background;
+.bcl-header--neutral {
+  .bcl-header__project,
+  .bcl-header__navbar {
+    background: $gray-600;
+  }
 }
 
 .bcl-navbar-header {
@@ -38,8 +36,20 @@ $header-link-active-background: #003776 !default;
   color: $eu-blue;
 }
 
-.bcl-header.ec__header .nav-link {
-  color: $ec-blue;
+.bcl-header--ec,
+.ec__header {
+  .bcl-header__project,
+  .bcl-header__navbar {
+    background: $header-background;
+  }
+
+  .nav-link {
+    color: $ec-blue;
+  }
+}
+
+.bcl-header:not(.bcl-header--neutral) .bcl-header__project {
+  padding-top: map-get($spacers, 3);
 }
 
 .bcl-header__navbar .navbar-nav .nav-link {
@@ -76,7 +86,7 @@ $header-link-active-background: #003776 !default;
   transform: translate(-11px, 5px);
 }
 
-.bcl-header__project p {
+.bcl-header__project .bcl-header__site-name {
   display: inline-block;
   margin-bottom: 0;
   font-size: 1.3rem;
@@ -96,6 +106,12 @@ $header-link-active-background: #003776 !default;
   background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
 }
 
+@media only screen and (max-width: 400px) {
+  .bcl-header--neutral .bcl-header__project-logo {
+    display: none;
+  }
+}
+
 @include media-breakpoint-down(sm) {
   .bcl-header .navbar:first-child .nav-link {
     padding: 0.5rem 0.4rem;
@@ -103,48 +119,83 @@ $header-link-active-background: #003776 !default;
 }
 
 @include media-breakpoint-up(md) {
-  .ec__header .navbar-brand img {
-    width: 180px;
+  .bcl-header--ec,
+  .ec__header {
+    .navbar-brand img {
+      width: 180px;
+    }
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .bcl-header__project {
+    min-height: map-get($spacers, 5);
+    padding-top: map-get($spacers, 3);
+  }
+
+  .bcl-header nav + nav {
+    min-height: map-get($spacers, 5);
+
+    .navbar-toggler {
+      position: static;
+    }
+
+    .container {
+      justify-content: right;
+    }
   }
 }
 
 @include media-breakpoint-up(lg) {
   .bcl-header__project.light,
+  .bcl-header--ec .bcl-header__project.light,
   .ec__header .bcl-header__project.light {
     background: $white;
   }
-  .bcl-header__project p {
+
+  .bcl-header__site-name {
     padding-left: map-get($spacers, 4);
     font-weight: 500;
   }
-  .bcl-header__project.light p {
+
+  .bcl-header__project.light .bcl-header__site-name {
     color: $black;
   }
+
   .bcl-header .navbar-toggler {
     position: relative;
     right: 0;
     bottom: 0;
   }
+
   .bcl-header .navbar-brand img {
     width: auto;
   }
+
   .bcl-header__navbar .navbar-collapse {
     padding-bottom: 0;
   }
+
   .bcl-header__navbar .nav-link.active {
     padding-top: $spacer;
     padding-bottom: $spacer;
     margin-top: -#{map-get($spacers, 2)};
     margin-bottom: -#{map-get($spacers, 2)};
   }
+
   .bcl-header__navbar .dropdown-menu {
     z-index: 1050; // Make sure dropdown overlaps the search offcanvas
   }
-  .bcl-header__project {
+
+  .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
     padding-bottom: map-get($spacers, 3);
   }
-  .ec__header .navbar-brand img {
-    width: 285px;
+
+  .bcl-header--ec,
+  .ec__header {
+    .navbar-brand img {
+      width: 285px;
+    }
   }
 }
 

package/src/scss/_inpage-navigation.scss

@@ -0,0 +1,19 @@
+.bcl-inpage-navigation {
+  top: map-get($spacers, 3); // needed for position-sticky
+  background-color: $gray-100;
+
+  h5 {
+    font-weight: bold;
+    margin-bottom: 0;
+    padding: map-get($spacers, "3-5");
+    border-bottom: 1px solid $gray-300;
+  }
+  ul {
+    padding: map-get($spacers, "2-5");
+
+    .nav-link {
+      padding: map-get($spacers, 2);
+      margin-bottom: map-get($spacers, 2);
+    }
+  }
+}

package/src/scss/_multiselect.scss

@@ -3,8 +3,9 @@
    no-descending-specificity,
    function-calc-no-unspaced-operator,
 */
-@use "slim-select/src/slim-select/slimselect.scss" with
-  ($primary-color: $primary);
+@use "slim-select/src/slim-select/slimselect.scss" with (
+  $primary-color: $primary
+);
 
 // Multiselect Spacers
 $multiselect-spacers: (

package/src/scss/_timeline.scss

@@ -0,0 +1,78 @@
+/* stylelint-disable declaration-no-important */
+// timeline
+.bcl-timeline {
+  list-style-type: none;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  max-width: 648px;
+
+  > li {
+    position: relative;
+    padding-bottom: map-get($spacers, "4-5");
+    padding-left: calc(22px + map-get($spacers, 3));
+
+    &::before {
+      content: "";
+      background: $white;
+      display: inline-block;
+      position: absolute;
+      border-radius: 50%;
+      border: 2px solid $primary;
+      left: 0;
+      width: 22px;
+      height: 22px;
+    }
+
+    &::after {
+      content: "";
+      background: $gray-300;
+      display: inline-block;
+      position: absolute;
+      left: 10px;
+      top: 22px;
+      width: 2px;
+      height: 100%;
+    }
+
+    &.collapsing {
+      transition: none !important;
+    }
+
+    &.bcl-timeline__item--toggle {
+      &::before {
+        border-color: $gray-600;
+        top: 7px;
+      }
+      &::after {
+        top: 30px;
+        background: repeating-linear-gradient(
+          to bottom,
+          $gray-300,
+          $gray-300 3px,
+          $white 3px,
+          $white 6px
+        );
+      }
+    }
+    &:last-child {
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  button[aria-expanded="false"] {
+    .label-expanded {
+      display: none;
+    }
+  }
+  button[aria-expanded="true"] {
+    .label-collapsed {
+      display: none;
+    }
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/scss/_utilities.scss

@@ -1,3 +1,60 @@
+$utilities: map-merge(
+  $utilities,
+  (
+    "background-color":
+      map-merge(
+        map-get($utilities, "background-color"),
+        (
+          values:
+            map-merge(
+              map-get(map-get($utilities, "background-color"), "values"),
+              (
+                date: $date,
+              )
+            ),
+        )
+      ),
+    // Extend rounded-top utility.
+    "max-width":
+      map-merge(
+        map-get($utilities, "max-width"),
+        (
+          values:
+            map-merge(
+              map-get(map-get($utilities, "max-width"), "values"),
+              (
+                date: 7.5rem,
+                "listing-img": 10rem,
+              )
+            ),
+        )
+      ),
+    // Create responsive classes for padding
+    "padding":
+      map-merge(
+        map-get($utilities, "padding"),
+        (
+          responsive: true,
+        )
+      ),
+    // Create responsive classes for borders
+    "border":
+      map-merge(
+        map-get($utilities, "border"),
+        (
+          responsive: true,
+        )
+      ),
+  )
+);
+
+.text-underline-hover {
+  text-decoration: none;
+}
+.text-underline-hover:hover {
+  text-decoration: underline;
+}
+
 @include media-breakpoint-down(md) {
   .n-mx-container {
     padding-right: $container-padding-x;
@@ -6,3 +63,16 @@
     margin-left: -$container-padding-x;
   }
 }
+
+.bg-lighter {
+  background-color: $lighter;
+}
+
+.bg-gray-200 {
+  background-color: $gray-200;
+}
+
+.grid-3-9 {
+  grid-template-columns: 25% 75%;
+  grid-gap: map-get($gutters, "2-5");
+}

package/src/scss/_variables.scss

@@ -1,12 +1,25 @@
+$enable-negative-margins: true;
+$negative-spacers: negativify-map($spacers);
+
 // Colors variables
-$gray-100: #f0f0f0;
-$light: $gray-100;
+$light: #f0f0f0;
+$lighter: $gray-100;
+$date: #1698af;
 $blue-50: tint-color($blue, 90%);
 $red-50: tint-color($red, 90%);
 $yellow-50: tint-color($yellow, 90%);
 $green-50: tint-color($green, 90%);
 $cyan-50: tint-color($cyan, 90%);
 
+// Override theme-color "light"
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    "light": $light,
+  )
+);
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+
 $custom-blues: (
   "blue-50": $blue-50,
 );
@@ -23,13 +36,6 @@ $custom-cyans: (
   "cyan-50": $cyan-50,
 );
 
-$theme-colors: map-merge(
-  $theme-colors,
-  (
-    "light": $light,
-  )
-) !default;
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 $blues: map-merge($blues, $custom-blues);
 $reds: map-merge($reds, $custom-reds);
 $yellows: map-merge($yellows, $custom-yellows);
@@ -53,13 +59,12 @@ $spacers-extended: (
 );
 
 $spacers: map-merge($spacers, $spacers-extended);
+$gutters: $spacers;
 
-// Forms
-$form-check-input-size-lg: $form-check-input-width + 0.3em !default;
-$form-font-size: $font-size-base !default;
-$form-font-size-lg: $font-size-base + 0.25rem !default;
-$form-select-height: 3rem !default;
-$form-select-height-md: 2.375rem !default;
+// accordion
+$accordion-button-active-color: $accordion-button-color;
+$accordion-button-active-bg: $lighter;
+$accordion-border-color: $gray-300;
 
 // Badges
 $badge-font-weight: $font-weight-normal; // 400
@@ -68,3 +73,10 @@ $badge-font-size-desktop: 1rem; // 16px
 
 // banners
 $banner-content-border-color: $primary;
+
+// Forms
+$form-check-input-size-lg: $form-check-input-width + 0.3em !default;
+$form-font-size: $font-size-base !default;
+$form-font-size-lg: $font-size-base + 0.25rem !default;
+$form-select-height: 3rem !default;
+$form-select-height-md: 2.375rem !default;

package/src/scss/oe-bcl-default.scss

@@ -8,20 +8,6 @@
 
 @import "@openeuropa/bcl-bootstrap/scss/utilities";
 
-// Create responsive classes for padding
-$utilities: map-merge(
-  $utilities,
-  (
-    "padding":
-      map-merge(
-        map-get($utilities, "padding"),
-        (
-          responsive: true,
-        )
-      ),
-  )
-);
-
 // Layout & components
 @import "@openeuropa/bcl-bootstrap/scss/root";
 @import "@openeuropa/bcl-bootstrap/scss/reboot";
@@ -76,3 +62,5 @@ $utilities: map-merge(
 @import "@openeuropa/bcl-theme-default/src/scss/bcl-offcanvas";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
+@import "@openeuropa/bcl-theme-default/src/scss/timeline";
+@import "@openeuropa/bcl-theme-default/src/scss/inpage-navigation";

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

@@ -8,13 +8,15 @@
   - dismissible (boolean) (default: false)
   - assistive_text (string) (default: '')
   - rounded_pill (boolean) (default: false)
+  - outline (boolean) (default: false)
   - icons_path (string) (default: '')
 #}
 
 {% set _rounded_pill = rounded_pill|default(false) %}
+{% set _outline = outline|default(false) %}
 {% set _background = background|default('primary') %}
 {% set _label = label|default('') %}
-{% set _classes = ['badge', 'bg-' ~ _background] %}
+{% set _classes = ['badge'] %}
 {% set _url = url|default('') %}
 {% set _icons_path = icons_path|default('') %}
 {% set _title = title|default(_label) %}
@@ -25,6 +27,12 @@
   {% set _classes = _classes|merge(['rounded-pill']) %}
 {% endif %}
 
+{% if _outline %}
+  {% set _classes = _classes|merge([ 'badge-outline-' ~ _background]) %}
+{% else %}
+  {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
+{% endif %}
+
 {% if _background in ['light', 'warning', 'info'] %}
   {% set _classes = _classes|merge(['text-dark']) %}
 {% endif %}

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

@@ -2,21 +2,36 @@
 
 {# Parameters:
   - title: (string) (default: "")
+  - title_tag: (string) (default: "div")
   - description: (string) (default: "")
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
+  - content_classes: (string) (default: "")
 #}
 
-{% set _title = title|default("") %}
-{% set _description = description|default("") %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('div') %}
+{% set _description = description|default('') %}
 {% set _link = link|default({}) %}
-{% set _image = image|default("") %}
+{% set _image = image|default('') %}
 {% set _shade = shade|default(false) %}
 {% set _hero = hero|default(false) %}
 {% set _full_width = full_width|default(false) %}
+{% set _content_classes = content_classes|default('') %}
+
+
+{% set _content_class = 'bcl-banner__content' %}
+{% if _content_classes is not empty %}
+  {% set _content_class = _content_class ~ " " ~ _content_classes %}
+{% endif %}
+
+{% set _title_classes = "display-6" %}
+{% if _description is not empty or _link is not empty %}
+  {% set _title_classes = _title_classes ~ " mb-3" %}
+{% endif %}
 
 {% set _classes = [
   'bcl-banner',
@@ -32,10 +47,12 @@
     <div class="bcl-banner__image" style="background-image:url({{ _image }})"></div>
   {% endif %}
   <div class="container">
-    <div class="bcl-banner__content">
+    <div class="{{ _content_class }}">
     {% if _title is not empty %}
-      <div class="display-6 mb-3">{{ _title }}</div>
+      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+      {% if _description is not empty %}
       <p class="mb-4">{{ _description }}</p>
+      {% endif %}
       {% if _link.path %}
         {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
       {% endif %}