@openeuropa/bcl-theme-default 0.15.0 → 0.19.0

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

@@ -1,28 +1,13 @@
 {% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
 
 {% block sidebar %}
-  {% if sidebar.image is not empty %}
-    <img class="mb-4" src="https://picsum.photos/275?random=1" alt="image" />
-  {% endif %}
-  <div class="bcl-event-details mb-4">
-    <h3 class="fw-bold mb-4">Event Details</h3>
-    {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with sidebar only %}
-    <div class="mt-3-5">
-    {% for badge in sidebar.badges %}
-      {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
-    {% endfor %}
-    </div>
-  </div>
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
 {% endblock %}
 
 {% block content %}
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
-  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
-  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
-  <h3 class="fw-bold my-4">Description</h3>
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
+
+  <h3 id="item-1" class="fw-bold my-4">Description</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
   posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
@@ -32,10 +17,8 @@
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet.
   </p>
-{% endblock %}
 
-{% block related %}
-  <h3 class="fw-bold my-4">Related documents</h3>
+  <h3 id="item-2" class="fw-bold my-4">Related documents</h3>
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
 {% endblock %}

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 }}>
@@ -86,9 +90,9 @@
         {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}
       {% endif %}
       {% if _item.title is defined and _item.title is not empty %}
-        <h3 class="text-capitalize fw-bold mt-2">
+        <h4 class="text-capitalize fw-bold mt-2">
           {{- _item.title -}}
-        </h3>
+        </h4>
       {% endif %}
       {% if _item.subtitle is defined and _item.subtitle is not empty %}
         <h5 class="fw-bold">

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,12 @@
   {% set _wrapper_classes = _wrapper_classes ~ ' ' ~ wrapper_classes %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
+
 {% if _with_text %}
 <div class="{{ _wrapper_classes }}">
 
@@ -71,7 +77,7 @@
         {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
       {% endif %}
     </div>
-    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2' : '1' }}">
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2 mt-4 mt-md-0' : '1' }}">
 {% endif %}
 
 <figure

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('') %}
@@ -53,10 +53,14 @@
 {% if _icon is not empty %}
   {% set _container_classes = _container_classes ~ ' ms-2-5' %}
   {% set _icon = _icon|merge({
-    attributes: create_attribute().addClass(['mt-1', 'text-secondary'])
+    attributes: create_attribute().addClass(['mt-1', 'icon--file'])
   }) %}
 {% 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 }}">
@@ -68,7 +72,8 @@
   {% set attributes = attributes.addClass(['border', 'rounded-bottom']) %}
   {% set _image = _image|merge({
     position: "top",
-    classes: "mb-3"
+    classes: "mb-3",
+    rounded: 0,
   }) %}
   {% include '@oe-bcl/bcl-card/card.html.twig' with {
     horizontal: true,

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,14 @@
   ]
 #}
 
+{% 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-form/form.html.twig

@@ -1,6 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - helper_text (string) (default: '')
+  - antispam (string) (default: '')
   - items (array of array of objects) (default: []) format: [
    [
     {
@@ -20,9 +24,28 @@
   - submit (object) (default: {}) Array of objects or object of type button
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _helper_text = helper_text|default('') %}
 {% set _items = items|default([]) %}
+{% set _antispam = antispam|default('') %}
 {% set _submit = submit|default({}) %}
 
+{% 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 }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+{% if _helper_text is not empty %}
+  <p>{{ _helper_text }}</p>
+{% endif %}
+
 <form
   {{ attributes }}
 >
@@ -94,6 +117,13 @@
   {% endif %}
 {% endfor %}
 {% endif %}
+{% if _antispam is not empty %}
+  <div class="mt-4 mb-2">
+    <div class="bg-light">
+      {{ _antispam }}
+    </div>
+  </div>
+{% endif %}
 {# submit #}
 {% if _submit is not empty %}
   {% if _submit.items is empty %}

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,12 @@ 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) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% 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

@@ -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("h5") %}
+{% set _title_tag = title_tag|default("h2") %}
 {% set _links = links|default([])%}
 
 {% if attributes is empty %}
@@ -21,10 +21,10 @@
 {% endif %}
 
 {% if _background == "gray" %}
-  {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3"]) %}
+  {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3", "rounded-2"]) %}
 {% endif %}
 
-<div 
+<div
   {{ attributes }}
 >
   {% if _title is not 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 }}>
@@ -38,11 +43,14 @@
 
 {% if _items is not empty %}
   {% for _card in _items %}
+    {% set  _alignment_class = '' %}
     {% set _max_width = '' %}
     {% set _image = {} %}
     {% if _card.image is not empty %}
       {% set _max_width = 'mw-listing-img' %}
-      {% set _image_classes = _card.image.classes ? _card.image.classes ~ " mb-3" : "mb-3" %}
+      {% if not _alignment == 'center' %}
+        {% set _image_classes = _card.image.classes ? _card.image.classes ~ ' mb-3' : 'mb-3' %}
+      {% endif %}
       {% set _card = _card|merge({image: _card.image|merge({
         classes: _image_classes
       })}) %}
@@ -50,7 +58,7 @@
       {% set _max_width = 'mw-date mb-3' %}
     {% endif %}
     {% if _alignment is not empty %}
-      {% set _alignment = ' align-self-' ~ _alignment %}
+      {% set _alignment_class = ' align-self-' ~ _alignment %}
     {% endif %}
     {% set _card_classes = [] %}
     {% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
@@ -67,8 +75,8 @@
         horizontal: true,
         extra_classes_body: 'p-0 pb-md-0 pb-3',
         horizontal_grid: {
-          left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment,
-          right_col_classes: 'col-md-9 col-lg-10' ~ _alignment,
+          left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment_class,
+          right_col_classes: 'col-md-9 col-lg-10' ~ _alignment_class,
         },
         attributes: _card_attributes,
       }) %}
@@ -91,8 +99,8 @@
       {% if _variant == 'default-2-col' %}
         {% set _card = _card|merge({
           horizontal_grid: {
-            left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment,
-            right_col_classes: 'col-xl-9 col-md-7' ~ _alignment,
+            left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment_class,
+            right_col_classes: 'col-xl-9 col-md-7' ~ _alignment_class,
           },
         }) %}
         {% set _card_layout = _card_layout|merge({
@@ -101,8 +109,8 @@
       {% else %}
         {% set _card = _card|merge({
           horizontal_grid: {
-            left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment,
-            right_col_classes: 'col-lg-8 col-md-6' ~ _alignment,
+            left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment_class,
+            right_col_classes: 'col-lg-8 col-md-6' ~ _alignment_class,
           },
         }) %}
         {% set _card_layout = _card_layout|merge({
@@ -121,10 +129,14 @@
       ] %}
      {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
      {% set _card = _card|merge({
-         extra_classes_body: 'pb-4',
          wrapper_class: 'col',
          attributes: _card_attributes,
       }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: "pt-0",
+        }) %}
+      {% endif %}
      {% set _card_layout = _card_layout|merge({
        cols_extra_classes: 'mt-4-5',
      }) %}
@@ -141,9 +153,13 @@
       {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
       {% set _card = _card|merge({
         wrapper_class: 'col',
-        extra_classes_body: 'pt-0',
         attributes: _card_attributes,
       }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: 'pt-0',
+        }) %}
+      {% endif %}
       {% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
       {% if variant == 'highlight-2-col' %}
         {% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}
@@ -152,6 +168,12 @@
       {% endif %}
     {% endif %}
 
+    {% if _card.image is empty and _card.date is empty %}
+      {% set _card = _card|merge({
+        horizontal: false,
+      }) %}
+    {% endif %}
+
     {% set _cards = _cards|merge([_card]) %}
   {% endfor %}
 {% endif %}
@@ -161,9 +183,6 @@
 {% if _link is not empty %}
   {% set _link_attributes = _link.attributes ? _link.attributes : create_attribute() %}
   {% set _link_attributes = _link_attributes.addClass(['mt-3-5', 'd-inline-block']) %}
-  {% if _variant == 'default-1-col' or _variant == 'default-2-col' or variant == 'default-3-col' %}
-    {% set _link_attributes = _link_attributes.addClass(['ps-3-5']) %}
-  {% endif %}
   {% include '@oe-bcl/bcl-link/link.html.twig' with _link|merge({
     attributes: _link_attributes,
     icon: _link.icon|merge({

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

@@ -45,26 +45,28 @@
   {{ attributes }}
 >
   <div class='container'>
-    {% if _brand is not empty %}
-      <a class='navbar-brand' href='{{ _brand.link }}'>
-      {%- if _brand.label is defined -%}
-        {{- _brand.label -}}
-      {%- else -%}
-        {% for logo in _brand.logos %}
-          <img
-            src='{{ logo.src }}'
-            {% if logo.alt is not empty %}
-            alt='{{ logo.alt }}'
-            {% endif %}
-            {% if logo.class is not empty %}
-            class='{{ logo.class }}'
-            {% endif %}
-          />
-        {% endfor %}
-      {%- endif -%}
-      </a>
-    {% endif %}
-    {% if not _disable_collapse %}
+  {% if _brand is not empty %}
+    <a class='navbar-brand' href='{{ _brand.link }}'>
+    {% for logo in _brand.logos %}
+      <img
+        src='{{ logo.src }}'
+        {% if logo.alt is not empty %}
+        alt='{{ logo.alt }}'
+        {% endif %}
+        {% if logo.class is not empty %}
+        class='{{ logo.class }}'
+        {% endif %}
+      />
+    {% endfor %}
+  {%- if _brand.label is defined -%}
+   <div class="h5 ms-4-5 d-none d-lg-inline-block">
+    {{- _brand.label -}}
+    </div>
+  {% endif %}
+    </a>
+  {% endif %}
+
+  {% if not _disable_collapse %}
     <button
       class='navbar-toggler'
       type='button'