@openeuropa/bcl-theme-default 0.16.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.16.0",
+  "version": "0.17.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "build": "npm-run-all build:*",
@@ -14,9 +14,9 @@
   },
   "devDependencies": {
     "@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",
+    "@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",
@@ -40,5 +40,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "39a52d25c36789a0c4712b0f6e55cbc5cbbedcb5"
+  "gitHead": "07ff24de8a209d80750a32cd52dfe9663fabf8e2"
 }

package/src/scss/_header.scss

@@ -93,6 +93,7 @@ $header-link-active-background: #003776 !default;
   font-weight: 300;
   color: $white;
   vertical-align: middle;
+  max-width: 80%;
 }
 
 .bcl-header .navbar-toggler {
@@ -144,6 +145,23 @@ $header-link-active-background: #003776 !default;
       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) {

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-banner/banner.html.twig

@@ -40,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 }}>

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

@@ -61,6 +61,10 @@
   {% 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 %}

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

@@ -14,6 +14,10 @@
 {% set _alignment = alignment|default('left') %}
 {% set _classes = ['text-' ~ _alignment] %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <figure

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

@@ -8,6 +8,10 @@
 {% set _links = links|default([]) %}
 {% set _icons_path = icons_path|default('') %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.setAttribute('aria-label', 'breadcrumb') %}
 
 {% if _links is not empty %}

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

@@ -15,6 +15,8 @@
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
     - options ["after", "before"]
+  - icon_spacing (string) (default: '')
+    - options ["sm", "md", "lg"]
   - clean_class (boolean) (default: false)
   - spinner (spinner object) (default: {})
   - show_spinner (boolean) (default: false)
@@ -31,6 +33,7 @@
 {% set _id = id|default('') %}
 {% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
+{% set _icon_spacing = icon_spacing|default('') %}
 {% set _show_spinner = show_spinner|default(false) %}
 {% set _spinner = spinner|default({}) %}
 {% set _clean_class = clean_class|default(false) %}
@@ -54,6 +57,9 @@
 {% if _classes is not empty %}
   {% set attributes = attributes.addClass(_classes) %}
 {% endif %}
+{% if _icon_spacing is not empty %}
+  {% set _icon_spacing = _icon_spacing ~ '-' %}
+{% endif %}
 {% set attributes = attributes.setAttribute('type', _type) %}
 {% if _icon is not empty %}
     {% set _icon = _icon|merge({
@@ -69,12 +75,12 @@
     {% endif %}
     {% if _icon_position == 'before' %}
       {% set _icon = _icon|merge({
-          attributes: _icon.attributes.addClass('me-2-5')
+          attributes: _icon.attributes.addClass('me-' ~ _icon_spacing ~ '2-5')
         })
       %}
     {% else %}
       {% set _icon = _icon|merge({
-          attributes: _icon.attributes.addClass('ms-2-5')
+          attributes: _icon.attributes.addClass('ms-' ~ _icon_spacing ~ '2-5')
         })
       %}
     {% endif %}

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

@@ -24,6 +24,10 @@
 
 {% set _classes = _classes|merge(['btn-group-' ~ _size]) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', _aria_label) %}
 {% endif %}

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

@@ -192,6 +192,10 @@
           attributes: create_attribute()
         }) %}
       {% endif %}
+      {% set _badge = _badge|merge({
+          attributes: _badge.attributes.addClass('mb-2')
+        })
+      %}
       {% if not loop.last %}
         {% set _badge = _badge|merge({
             attributes: _badge.attributes.addClass('me-2')

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

@@ -41,6 +41,10 @@
   {% endif %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <div

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

@@ -43,6 +43,10 @@
   {% set _classes = _classes|merge(['carousel-dark']) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _id is not empty %}
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}

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

@@ -42,6 +42,10 @@
   'gray': 'bg-lighter',
 } %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set _card = {
   title: title|default({})|merge({
     tag: 'h2',

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

@@ -27,6 +27,10 @@
   'mw-date',
 ] %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_css_classes) %}
 
 {% if _date_time is not empty %}

package/templates/bcl-description-list/description-list.html.twig

@@ -3,7 +3,7 @@
 {#
   Parameters:
   - title: (string) (default: "")
-  - title_tag: (string) (default: "h4")
+  - title_tag: (string) (default: "h2")
   - "items" (array) (default: []): format: [
       {
         "term" (object or array of object) -format: {
@@ -21,10 +21,14 @@
 {# Parameters #}
 
 {% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h4') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _variant == 'horizontal' %}
   {% set attributes = attributes.addClass(["d-md-grid", "grid-3-9"]) %}
 {% endif %}

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -3,7 +3,7 @@
 {#
   Parameters:
   - "title" (string) (default: '')
-  - "title_tag" (string) (default: 'h4')
+  - "title_tag" (string) (default: 'h2')
   - "variant" (string) (default: '') options:
     [ default, block ]
   - "display_icons" (boolean) (default: true)
@@ -25,7 +25,7 @@
 {# Parameters #}
 
 {% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h4') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _variant = variant|default('default') %}
 {% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
@@ -60,6 +60,10 @@
 {% if _equal_height %}
   {% set  _cols_classes =  _cols_classes ~ ' h-100' %}
 {% endif %}
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_css_classes) %}
 
 <div {{ attributes }}>

package/templates/bcl-featured-media/featured-media.html.twig

@@ -3,7 +3,7 @@
 {# Parameters:
   - with_text (boolean) (default: false)
   - title: (string) (default: '')
-  - title_tag: (string) (default: 'h3')
+  - title_tag: (string) (default: 'h2')
   - image: (string) (default: "")
   - poster_image: (string) (default: "")
   - content: (string) (default: "")
@@ -33,7 +33,7 @@
 #}
 
 {% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h4') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _with_text = with_text|default(false) %}
 {% set _wrapper_classes = 'bcl-featured-item' %}
 {% set _description = description|default('') %}
@@ -53,6 +53,10 @@
   {% set _wrapper_classes = _wrapper_classes ~ ' ' ~ wrapper_classes %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _with_text %}
 <div class="{{ _wrapper_classes }}">
 

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

@@ -3,7 +3,7 @@
 {#
   Parameters:
   - title (string) (default: '')
-  - title_tag (string) (default: 'h4')
+  - title_tag (string) (default: 'h2')
   - item_title (string) (default: '')
   - icon (icon Object) (default: {})
   - text (string) (default: '')
@@ -36,7 +36,7 @@
 
 {% set _icon = icon|default({}) %}
 {% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h4') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _item_title = item_title|default('') %}
 {% set _text = text|default('') %}
 {% set _content = content|default('') %}
@@ -57,6 +57,10 @@
   }) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _title is not empty %}
   {% set _title_classes = 'fw-bold mb-4' %}
   <{{ _title_tag }} class="{{ _title_classes }}">

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

@@ -37,6 +37,7 @@
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
+
 {% set attributes = attributes.addClass(['bcl-footer', 'bcl-footer--' ~ _variant]) %}
 
 <footer

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

@@ -23,6 +23,10 @@
 {% set _items = items|default([]) %}
 {% set _submit = submit|default({}) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 <form
   {{ attributes }}
 >

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

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

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

@@ -6,14 +6,14 @@
   - variant: (string) (default: "vertical")
     - options ["vertical", "horizontal"]
   - title: (string) (default: "")
-  - title_tag: (string) (default: "h5")
+  - title_tag: (string) (default: "h2")
   - links (array of link objects) (default: [])
 #}
 
 {% set _background = background|default("gray") %}
 {% set _variant = variant|default("vertical") %}
 {% set _title = title|default("") %}
-{% set _title_tag = title_tag|default("h4") %}
+{% set _title_tag = title_tag|default("h2") %}
 {% set _links = links|default([])%}
 
 {% if attributes is empty %}

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

@@ -32,6 +32,7 @@
 {% set _type = type|default('unordered') %}
 {% set _items = items|default([]) %}
 {% set _classes = ['list-group'] %}
+
 {% if _flush %}
   {% set _classes = _classes|merge(['list-group-flush']) %}
 {% endif %}
@@ -41,6 +42,11 @@
 {% if _horizontal is not empty %}
   {% set _classes = _classes|merge(['list-group-' ~ _horizontal]) %}
 {% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _id is not empty %}
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}

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

@@ -4,7 +4,7 @@
   - variant: (string) (default: "horizontal") options:
   [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - title: (string) (default: "")
-  - title_tag: (string) (default: "h4")
+  - title_tag: (string) (default: "h2")
   - items: (array of objects of type card)
   - link: (object of type link)
   - alignment: (string) (default: '') options:
@@ -14,7 +14,7 @@
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('default-1-col') %}
 {% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h4') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _alignment = alignment|default('') %}
 {% set _link = link|default({}) %}
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
@@ -25,6 +25,11 @@
   gutter: '4',
   attributes: create_attribute(),
 } %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <div {{ attributes }}>

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

@@ -41,6 +41,10 @@
   {% set _aria_labelled = _title.id|default('') %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_labelled is defined and _aria_labelled is not empty %}
   {% set attributes = attributes.setAttribute('aria-labelledby', _aria_labelled) %}
 {% endif %}

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

@@ -47,11 +47,15 @@
   {% set _classes = _classes ~ ' justify-content-' ~ _alignment %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', aria_label) %}
 {% endif %}
 {% if _extra_classes is not empty %}
-{% set _class = _class ~ ' ' ~ _extra_classes %}
+  {% set _class = _class ~ ' ' ~ _extra_classes %}
 {% endif %}
 
 <nav

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

@@ -0,0 +1,43 @@
+{% spaceless %}
+
+{# Parameters:
+  - width (int) (default: 0) - between 0-100
+  - variant (string) (default: '')
+    - options : ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+  - size (string) (default: '')
+    - options : ["xs", "lg"]
+  - animation (string) (default: '')
+    - options : ["glow", "wave"]
+#}
+
+{% set _width = width|default(0) %}
+{% set _variant = variant|default('') %}
+{% set _size = size|default('') %}
+{% set _animation = animation|default('') %}
+{% set _classes = ['placeholder'] %}
+
+{% if _size is not empty %}
+  {% set _classes = _classes|merge(['placeholder-' ~ _size]) %}
+{% endif %}
+
+{% if _variant is not empty %}
+  {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+{% set attributes = attributes.setAttribute('style', 'width: ' ~ _width ~ '%;') %}
+
+{% if _animation is not empty %}
+  <p class="placeholder-{{ _animation }}">
+{% endif %}
+<span {{- attributes -}} >
+</span>
+{% if _animation is not empty %}
+  </p>
+{% endif %}
+
+{% endspaceless %}

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

@@ -32,6 +32,10 @@
   {% set _classes = _classes ~ ' bg-' ~ _variant %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(['progress']) %}
 
 {% if _bar_label is empty %} 

package/templates/bcl-recent-activities/recent-activities.html.twig

@@ -23,6 +23,10 @@
 
 {% set _activities = activities|default([]) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 <div 
   {{ attributes }}
 >

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

@@ -0,0 +1,15 @@
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+
+{% block banner %}
+{% if banner.search_bar is defined %}
+  <div class="bg-lighter py-4 py-lg-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-lg-6 offset-lg-3">
+          {% include '@oe-bcl/bcl-search-form/search-form.html.twig' with banner.search_bar only %}
+        </div>
+      </div>  
+    </div>
+  </div>
+{% endif %}
+{% endblock %}

package/templates/bcl-search-form/search-form.html.twig

@@ -0,0 +1,52 @@
+{% spaceless %}
+
+{# Parameters:
+  - pill: (boolean) (default: false)
+  - icon: (icon Object) (default: {})
+  - submit: (button Object) (default: {})
+  - input: (form input Object) (default: {})
+  ]
+#}
+
+{% set _pill = pill|default(false) %}
+{% set _icon = icon|default({}) %}
+{% set _submit = submit|default({}) %}
+{% set _input = input|default({}) %}
+
+{% set _classes = ["bcl-search-form"] %}
+
+{% if _pill %}
+  {% set _classes = _classes|merge(['rounded']) %}
+{% endif %}
+
+{% if _submit is not empty %}
+  {% set _classes = _classes|merge(['submittable']) %}
+{% endif %}
+
+{% if _icon is not empty %}
+  {% set _input = _input|merge({
+    attributes: _input.attributes.addClass("ps-5")
+  }) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass( _classes ) %}
+
+<form
+  {{ attributes }}
+>
+  <div class="bcl-search-form__group">
+    {% if _icon is not empty %}
+      {% include '@oe-bcl/bcl-icon/icon.html.twig' with _icon only %}
+    {% endif %}
+    {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with _input only %}
+    {% if _submit is not empty %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _submit only %}
+    {% endif %}
+  </div>
+</form>
+
+{% endspaceless %}