@openeuropa/bcl-theme-default 0.15.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.15.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.15.0",
-    "@openeuropa/bcl-builder": "^0.15.0",
-    "@openeuropa/bcl-twig-templates": "^0.15.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": "97a9f0822ee0d4d800e40aa17bf87dc698c5906c"
+  "gitHead": "39a52d25c36789a0c4712b0f6e55cbc5cbbedcb5"
 }

package/src/scss/_badge.scss

@@ -83,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/_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,14 +21,11 @@ $header-link-active-background: #003776 !default;
   padding-bottom: map-get($spacers, 3);
 }
 
-.bcl-header__project {
-  padding-top: map-get($spacers, 3);
-  min-height: map-get($spacers, 5);
-}
-
-.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 {
@@ -39,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 {
@@ -77,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;
@@ -97,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;
@@ -104,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

@@ -1,4 +1,4 @@
-#bcl-inpage-navigation {
+.bcl-inpage-navigation {
   top: map-get($spacers, 3); // needed for position-sticky
   background-color: $gray-100;
 

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

@@ -61,12 +61,10 @@ $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
@@ -75,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/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-base-templates/content-type.html.twig

@@ -6,7 +6,9 @@
   - with_footer (boolean) (default: false)
   - with_banner (boolean) (default: false)
   - with_sidebar (boolean) (default: false)
-  - columns (string) (default: 3-9 )
+  - sidebar_size (string) (default: 'normal')
+    options: ['normal', 'large']
+  - landing (boolean) (default: false)
   - content_type (string) (default: '')
   - attributes (drupal attrs)
 
@@ -25,15 +27,34 @@
 {% set _with_footer = footer|default(false) %}
 {% set _with_banner = banner|default(false) %}
 {% set _with_sidebar = sidebar|default(false) %}
-{% set _columns = columns|default('3-9') %}
+{% set _sidebar_size = sidebar_size|default('normal') %}
+{% set _landing = landing|default(false) %}
 {% set _content_type = content_type|default('') %}
 {% set _classes = ['bcl-node-type'] %}
-{% set _col_classes = { left: 'col-md-3', right: 'col-12 col-md-9' } %}
 
-{% if _columns == '4-8' %}
-  {% set _col_classes = { left: 'col-md-4', right: 'col-12 col-md-8' } %}
-{% elseif _columns == '2-10' %}
-  {% set _col_classes = { left: 'col-md-2', right: 'col-12 col-md-10' } %}
+{% if _with_sidebar %}
+  {% set _col_classes = {
+    left: [
+      'col-12',
+    ],
+    right: [
+      'col-12',
+    ],
+  } %}
+
+  {% if _sidebar_size == 'normal' %}
+    {% set _col_classes = _col_classes|merge({
+      left: _col_classes.left|merge(['col-lg-3']),
+      right: _col_classes.right|merge(['col-lg-9', 'col-xxl-8']),
+    }) %}
+  {% endif %}
+
+  {% if _sidebar_size == 'large' %}
+    {% set _col_classes = _col_classes|merge({
+      left: _col_classes.left|merge(['col-lg-4']),
+      right: _col_classes.right|merge(['col-lg-8']),
+    }) %}
+  {% endif %}
 {% endif %}
 
 {% if _content_type is not empty %}
@@ -54,12 +75,16 @@
   <div class="container mt-md-4-75 mt-4">
     <div class="row">
     {% if _with_sidebar %}
-      <div class="{{ _col_classes.left }}">
+      <div class="{{ _col_classes.left|join(' ') }}">
         {% block sidebar %}{% endblock %}
       </div>
-      <div class="{{ _col_classes.right }}">
+      <div class="{{ _col_classes.right|join(' ') }}">
     {% else %}
-      <div class="col-md-12">
+      {% if _landing %}
+      <div class="col-12">
+      {% else %}
+      <div class="col-12 col-lg-10 col-xl-9 col-xxl-8">
+      {% endif %}
     {% endif %}
       {% block content_top %}
         {{ content_top }}

package/templates/bcl-base-templates/listing-page.html.twig

@@ -16,30 +16,33 @@
 
 {% block content_top %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
-  <div class="mb-3 clearfix">
-    <div class="float-end d-none d-md-flex align-items-center">
-      {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
-        attributes: create_attribute().addClass(['ms-2 mb-2']),
-      }) only %}
+  <div class="row">
+    <div class="col-md-6 col-lg-8">
+      <h4>
+        <span class="text-capitalize">
+          {{- _page_title -}}
+        </span>
+        ({{ listing.items.length }})
+      </h4>
+    </div>
+    <div class="col-md-12 order-md-2 mt-3 mt-md-1">
+      {% if badges is not empty and badges is iterable %}
+        {% for badge in badges %}
+          {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
+            attributes: create_attribute().addClass(["mb-2", "me-2"])
+          }) only %}
+        {% endfor %}
+      {% endif %}
+    </div>
+    <div class="col-md-6 col-lg-4 mt-3 mt-md-0">
+      <div class="float-md-end d-md-flex align-items-center mb-4 mb-md-0">
+        {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
+          attributes: create_attribute().addClass(['ms-md-2 mb-2']),
+        }) only %}
+      </div>
     </div>
-    <h4 class="mb-4">
-      <span class="text-capitalize">
-        {{- _page_title -}}
-      </span>
-      ({{ listing.items.length }})
-    </h4>
-    {% if badges is not empty and badges is iterable %}
-      {% for badge in badges %}
-        {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
-      {% endfor %}
-    {% endif %}
   </div>
   <hr class="d-none d-md-block mb-4"/>
-  <div class="d-md-none">
-    {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
-      extra_classes: 'mb-4',
-    }) only %}
-  </div>
 {% endblock %}
 
 {% block content %}

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

@@ -18,7 +18,7 @@
     class="{{ _classes }}"
   >
     {% for _link in _links %}
-      {% set _segment_classes = 'breadcrumb-item d-none d-md-block' %}  
+      {% set _segment_classes = 'breadcrumb-item d-none d-md-block' %}
       {% if loop.revindex == 2 %}
         {% set _segment_classes = 'breadcrumb-item' %}
       {% endif %}
@@ -29,7 +29,7 @@
       {% endif %}
       <li
         class="{{ _segment_classes }}"
-        {{ _segment_attrs }}
+        {{ _segment_attrs|raw }}
       >
         {%- if _link.path -%}
           {% if loop.revindex == 2 %}

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

@@ -155,24 +155,6 @@
 <div class='{{ _horizontal_grid.right_col_classes }}'>
 {% endif %}
   <div class='{{ _body_classes }}'>
-    {%- if _badges is not empty and _badges is iterable -%}
-      <div class="mb-3">
-      {% for _badge in _badges %}
-        {% if _badge.attributes is empty %}
-          {% set _badge = _badge|merge({
-            attributes: create_attribute()
-          }) %}
-        {% endif %}
-        {% if not loop.last %}
-          {% set _badge = _badge|merge({
-              attributes: _badge.attributes.addClass('me-2')
-            })
-          %}
-        {% endif %}
-        {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
-      {% endfor %}
-      </div>
-    {%- endif -%}
   {%- if _title is not empty -%}
     {% set _title_tag = _title.tag ?? 'h5' %}
     <{{ _title_tag }}
@@ -202,6 +184,24 @@
   {%- if _content is not empty -%}
     {{- _content -}}
   {%- endif -%}
+  {%- if _badges is not empty and _badges is iterable -%}
+    <div class="mt-2-5">
+    {% for _badge in _badges %}
+      {% if _badge.attributes is empty %}
+        {% set _badge = _badge|merge({
+          attributes: create_attribute()
+        }) %}
+      {% endif %}
+      {% if not loop.last %}
+        {% set _badge = _badge|merge({
+            attributes: _badge.attributes.addClass('me-2')
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+    {% endfor %}
+    </div>
+  {%- endif -%}
   </div>
 {% if _horizontal %}
 </div>

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

@@ -1,6 +1,7 @@
 {% spaceless %}
 
 {# Parameters:
+  - variant (string) (default: 'neutral')
   - rows (default: []) - Array of predefined objects - format: 
   [
     {
@@ -30,12 +31,13 @@
   ]
 #}
 
+{% set _variant = variant|default('neutral') %}
 {% set _rows = rows|default([]) %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
-{% set attributes = attributes.addClass('bcl-footer') %}
+{% set attributes = attributes.addClass(['bcl-footer', 'bcl-footer--' ~ _variant]) %}
 
 <footer
   {{ attributes }}

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

@@ -1,7 +1,8 @@
 {% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
 
 {% block banner %}
-  <div class="container mt-4 mt-md-5">
+<div class="container mt-4 mt-md-5">
+  <div class="col-xxl-11">
     <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
       <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
       {% if banner.actions is not empty and banner.actions is iterable %}
@@ -18,8 +19,9 @@
       </div>
       {% endif %}
     </div>
-    {% if navigation is not empty %}
-      {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
-    {% endif %}
+  {% if navigation is not empty %}
+    {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
+  {% endif %}
   </div>
+</div>
 {% endblock %}

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

@@ -1,6 +1,7 @@
 {% spaceless %}
 
 {# Parameters:
+  - variant (string) (default: 'neutral')
   - navbar (Navbar object) (default: {})
   - project_logo (object) (default: {})
     format: {
@@ -15,9 +16,11 @@
   - modals (Array of modal objects) (default: [])
 #}
 
+{% set _variant = variant|default('neutral') %}
 {% set _navbar = navbar|default({}) %}
 {% set _project_logo = project_logo|default({}) %}
 {% set _site_name = site_name|default('') %}
+{% set _site_name_classes = 'bcl-header__site-name' %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _modals = modals|default([]) %}
@@ -27,7 +30,11 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass("bcl-header") %}
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+
+{% if site_name_classes is not empty %}
+  {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
+{% endif %}
 
 {% set _project_classes = 'bcl-header__project' %}
 {% if _light is not empty %}
@@ -43,8 +50,8 @@
   {% endif %}
 
   <!-- project name -->
+  {% if _project_logo is not empty or _site_name is not empty %}
   <div class="{{ _project_classes  }}">
-    {% if _project_logo is not empty or _site_name is not empty %}
     <div class="container">
     {% if _project_logo is not empty %}
       <img
@@ -60,11 +67,13 @@
       />
     {% endif %}
     {% if _site_name is not empty %}
-      {{ _site_name }}
+      <div class="{{ _site_name_classes }}">
+       {{- _site_name -}}
+       </div>
     {% endif %}
     </div>
-    {% endif %}
   </div>
+  {% endif %}
 
   <!-- navbar -->
   {% if _navbar is not empty %}

package/templates/bcl-inpage-navigation/inpage-navigation.html.twig

@@ -14,7 +14,7 @@ Parameters:
 {% set _content = content|default('') %}
 {% set _id = id|default('bcl-inpage-navigation-' ~ random(5)) %}
 {% set _full_layout = full_layout|default(false) %}
-{% set attributes = attributes.addClass('position-sticky').setAttribute('id', _id) %}
+{% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
 
 {# Print the result #}
 {% if _full_layout %}

package/templates/bcl-links-block/links-block.html.twig

@@ -13,7 +13,7 @@
 {% set _background = background|default("gray") %}
 {% set _variant = variant|default("vertical") %}
 {% set _title = title|default("") %}
-{% set _title_tag = title_tag|default("h5") %}
+{% set _title_tag = title_tag|default("h4") %}
 {% set _links = links|default([])%}
 
 {% if attributes is empty %}
@@ -24,7 +24,7 @@
   {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3"]) %}
 {% endif %}
 
-<div 
+<div
   {{ attributes }}
 >
   {% if _title is not empty %}