@openeuropa/bcl-theme-default 0.13.0 → 0.17.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.13.0",
+  "version": "0.17.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.13.0",
-    "@openeuropa/bcl-builder": "^0.13.0",
-    "@openeuropa/bcl-twig-templates": "^0.13.0",
+    "@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",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "7.2.0",
@@ -39,5 +40,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "f50b203b79a2c63a03c70849b628a196113969cb"
+  "gitHead": "07ff24de8a209d80750a32cd52dfe9663fabf8e2"
 }

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

@@ -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,13 +86,14 @@ $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;
   font-weight: 300;
   color: $white;
   vertical-align: middle;
+  max-width: 80%;
 }
 
 .bcl-header .navbar-toggler {
@@ -96,6 +107,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 +120,100 @@ $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;
+    }
+  }
+
+  .bcl-header__navbar {
+    .navbar-collapse {
+      max-width: 100%;
+      .nav-item {
+        &.dropdown {
+          max-width: 100%;
+          a {
+            white-space: normal;
+          }
+          .dropdown-menu {
+            max-width: 100%;
+          }
+        }
+      }
+    }
   }
 }
 
 @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/_utilities.scss

@@ -67,3 +67,12 @@ $utilities: map-merge(
 .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

@@ -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/src/scss/oe-bcl-default.scss

@@ -27,6 +27,7 @@
 @import "@openeuropa/bcl-bootstrap/scss/accordion";
 @import "@openeuropa/bcl-bootstrap/scss/breadcrumb";
 @import "@openeuropa/bcl-bootstrap/scss/pagination";
+@import "@openeuropa/bcl-bootstrap/scss/placeholders";
 @import "@openeuropa/bcl-bootstrap/scss/badge";
 @import "@openeuropa/bcl-bootstrap/scss/alert";
 @import "@openeuropa/bcl-bootstrap/scss/progress";

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

@@ -8,6 +8,7 @@
       {
         title: (string),
         content: (block),
+        stay_open (boolean) (default: false) stay open after another selected
       },
       ...
     ]
@@ -23,6 +24,11 @@
 {% if _flush %}
   {% set _classes = _classes|merge(['accordion-flush']) %}
 {% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes).setAttribute('id', 'accordion-' ~ _id) %}
 
 {% if _items is not empty %}
@@ -55,7 +61,10 @@
       id="collapse-{{ _id }}-{{ loop.index }}"
       class="accordion-collapse collapse{{ _open_item ? ' show' }}"
       aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
+      role="region"
+    {% if not _item.stay_open %}
       data-bs-parent="#accordion-{{ _id }}"
+    {% endif %}
     >
       <div class="accordion-body">
         {%- set _content = _item.content|default('') %}

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

@@ -37,6 +37,10 @@
   {% set _classes = _classes|merge(['fade', 'show']) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
 
 <div {{ attributes }}>

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,6 +2,7 @@
 
 {# 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
@@ -11,14 +12,15 @@
   - 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_classes = content_classes|default('') %}
 
 
 {% set _content_class = 'bcl-banner__content' %}
@@ -38,6 +40,11 @@
   _hero ? 'hero',
   _full_width ? 'full-width' 
   ] %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <div {{ attributes }}>
@@ -47,7 +54,7 @@
   <div class="container">
     <div class="{{ _content_class }}">
     {% if _title is not empty %}
-      <div class="{{ _title_classes }}">{{ _title }}</div>
+      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
       {% if _description is not empty %}
       <p class="mb-4">{{ _description }}</p>
       {% endif %}

package/templates/bcl-base-templates/content-type.html.twig

@@ -0,0 +1,120 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - with_header (boolean) (default: false)
+  - with_footer (boolean) (default: false)
+  - with_banner (boolean) (default: false)
+  - with_sidebar (boolean) (default: false)
+  - sidebar_size (string) (default: 'normal')
+    options: ['normal', 'large']
+  - landing (boolean) (default: false)
+  - content_type (string) (default: '')
+  - attributes (drupal attrs)
+
+  BLOCKS:
+  - header
+  - footer
+  - content
+  - sidebar
+  - banner
+  - feedback
+  - share
+  - related
+#}
+
+{% set _with_header = header|default(false) %}
+{% set _with_footer = footer|default(false) %}
+{% set _with_banner = banner|default(false) %}
+{% set _with_sidebar = sidebar|default(false) %}
+{% set _sidebar_size = sidebar_size|default('normal') %}
+{% set _landing = landing|default(false) %}
+{% set _content_type = content_type|default('') %}
+{% set _classes = ['bcl-node-type'] %}
+
+{% 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 %}
+  {% set _classes = _classes|merge(['bcl-' ~ _content_type]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _with_header %}
+  {% include '@oe-bcl/bcl-header/header.html.twig' with header only %}
+{% endif %}
+
+<main {{ attributes }}>
+{% if _with_banner %}
+  {% block banner %}
+    {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
+  {% endblock %}
+{% endif %}
+
+  <div class="container mt-md-4-75 mt-4">
+    <div class="row">
+    {% if _with_sidebar %}
+      <div class="{{ _col_classes.left|join(' ') }}">
+        {% block sidebar %}{% endblock %}
+      </div>
+      <div class="{{ _col_classes.right|join(' ') }}">
+    {% else %}
+      {% 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 }}
+      {% endblock %}
+      {% block content %}
+        {{ content }}
+      {% endblock %}
+      {% block content_bottom %}
+        {{ content_bottom }}
+      {% endblock %}
+      {% block related %}
+        {{ related }}
+      {% endblock %}
+    </div>
+  </div>
+</main>
+
+{% block feedback %}
+  {{ feedback }}
+{% endblock %}
+{% block share %}
+  {{ share }}
+{% endblock %}
+
+{% if _with_footer %}
+  {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
+{% endif %}
+
+{% endspaceless %}

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

@@ -0,0 +1,63 @@
+{#
+  Parameters:
+  - listing (object) (default: {})
+  - pagination (object) (default: {})
+  - sidebar (object) (default: '')
+  - page_title (string) (default: '')
+#}
+
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% set _listing = listing|default({}) %}
+{% set _pagination = pagination|default({}) %}
+{% set _search = search|default({}) %}
+{% set _sidebar = sidebar|default({}) %}
+{% set _page_title = page_title|default({}) %}
+
+{% block content_top %}
+  {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button 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>
+  </div>
+  <hr class="d-none d-md-block mb-4"/>
+{% endblock %}
+
+{% block content %}
+  {% if _listing is not empty %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing %}
+  {% endif %}
+{% endblock %}
+
+{% block content_bottom %}
+  {% if _pagination is not empty %}
+    <hr class="d-none d-md-block mt-4-5">
+    {% include '@oe-bcl/bcl-pagination/pagination.html.twig' with _pagination only %}
+  {% endif %}
+{% endblock %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-base-templates/sidebar-search.html.twig' with _sidebar only %}
+{% endblock %}

package/templates/{bcl-group-landing-listing/group-landing-listing-offcanvas.html.twig → bcl-base-templates/sidebar-search.html.twig}

@@ -4,5 +4,4 @@
   <div class="offcanvas-body p-lg-0">
     {% include '@oe-bcl/bcl-form/form.html.twig' with search_form only %}
   </div>
-  
 {% endblock %}