@openeuropa/bcl-theme-default 0.15.0 → 0.16.0

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

@@ -38,11 +38,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 +53,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 +70,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 +94,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 +104,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 +124,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 +148,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 }) %}
@@ -161,9 +172,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'

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

@@ -1,3 +1,4 @@
+{% import _self as navigation %}
 {% spaceless %}
 
 {# Parameters:
@@ -17,131 +18,155 @@
         - active (boolean)
         - button (boolean) - set to button
         - content (string) - content for tab
+        - navigation (navigation Object) - set for multiple level or navigation, items inside is required
       }
     ]
 #}
 
-{% set _pills = pills|default(false) %}
-{% set _tabs = tabs|default(false) %}
-{% set _vertical = vertical|default(false) %}
-{% set _full_width = full_width|default(false) %}
-{% set _alignment = alignment|default('') %}
-{% set _id = id|default('') %}
-{% set _tabs_content = tabs_content|default(false) %}
-{% set _nav = nav|default(false) %}
-{% set _navbar = navbar|default(false) %}
-{% set _items = items|default([]) %}
+{# Define main macro #}
+{% macro render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) %}
+{% spaceless %}
+  {% import _self as navigation %}
 
-{% if _navbar %}
-  {% set _classes = ['navbar-nav'] %}
-{% else %}
-  {% set _classes = ['nav'] %}
-{% endif %}
-{% if _pills %}
-  {% set _classes = _classes|merge(['nav-pills']) %}
-{% endif %}
-{% if _tabs %}
-  {% set _classes = _classes|merge(['nav-tabs']) %}
-{% endif %}
-{% if _vertical %}
-  {% set _classes = _classes|merge(['flex-column']) %}
-{% endif %}
-{% if _full_width %}
-  {% set _classes = _classes|merge(['nav-fill']) %}
-{% endif %}
-{% if _alignment is not empty %}
-  {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
-{% endif %}
+  {% set _pills = pills|default(false) %}
+  {% set _tabs = tabs|default(false) %}
+  {% set _vertical = vertical|default(false) %}
+  {% set _full_width = full_width|default(false) %}
+  {% set _alignment = alignment|default('') %}
+  {% set _id = id|default('') %}
+  {% set _tabs_content = tabs_content|default(false) %}
+  {% set _nav = nav|default(false) %}
+  {% set _navbar = navbar|default(false) %}
+  {% set _items = items|default([]) %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
+  {% if _navbar %}
+    {% set _classes = ['navbar-nav'] %}
+  {% else %}
+    {% set _classes = ['nav'] %}
+  {% endif %}
+  {% if _pills %}
+    {% set _classes = _classes|merge(['nav-pills']) %}
+  {% endif %}
+  {% if _tabs %}
+    {% set _classes = _classes|merge(['nav-tabs']) %}
+  {% endif %}
+  {% if _vertical %}
+    {% set _classes = _classes|merge(['flex-column']) %}
+  {% endif %}
+  {% if _full_width %}
+    {% set _classes = _classes|merge(['nav-fill']) %}
+  {% endif %}
+  {% if _alignment is not empty %}
+    {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
+  {% endif %}
 
-{% if _id is not empty %}
-  {% set attributes = attributes.setAttribute('id', _id) %}
-{% endif %}
+  {% if attributes is empty %}
+    {% set attributes = create_attribute() %}
+  {% endif %}
 
-{% if not _nav and _tabs %}
-  {% set attributes = attributes.setAttribute('role', 'tablist') %}
-{% endif %}
+  {% if _id is not empty %}
+    {% set attributes = attributes.setAttribute('id', _id) %}
+  {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+  {% if not _nav and _tabs %}
+    {% set attributes = attributes.setAttribute('role', 'tablist') %}
+  {% endif %}
+  {% set attributes = attributes.addClass(_classes) %}
 
-{% if _nav %}
-<nav
-  {{ attributes }}
->
-{% else %}
-<ul
-  {{ attributes }}
->
-{% endif %}
-  {% if _items is not empty and _items is iterable %}
-    {% for _item in _items %}
-      {% set _nav_class = 'nav-item' %}
-      {% if _item.dropdown %}
-        {% set _nav_class = _nav_class ~ ' dropdown' %}
-        {% set _item = _item|merge({remove_wrapper: true}) %}
-      {% endif %}
-      {% if _item.dropdown %}
-        {% set _item_classes = [] %}
-      {% else %}
-        {% set _item_classes = ['nav-link'] %}
-      {% endif %}
-      {% if _item.active %}
-        {% set _item_classes = _item_classes|merge(['active']) %}
-      {% endif %}
-      {% if _item.attributes is empty %}
-        {% set _item = _item|merge({
-          attributes: create_attribute()
-        }) %}
-      {% endif %}
-      {% set _item = _item|merge({
-        attributes: _item.attributes.addClass(_item_classes),
-        clean_class: true}) %}
-      {% if not _nav %}
-      <li
-        class="{{ _nav_class }}"
-        {% if _tabs %}
-          role="presentation"
-        {% endif %}
-      >
-      {% endif %}
-      {% if _item.dropdown is defined %}
-        {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
-      {% elseif _item.button is defined %}
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
-      {% else %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
-      {% endif %}
-      {% if not _nav %}
-      </li>
-      {% endif %}
-    {% endfor %}
+  {% if _nav %}
+  <nav
+    {{ attributes }}
+  >
+  {% else %}
+  <ul
+    {{ attributes }}
+  >
   {% endif %}
-{% if _nav %}
-</nav>
-{% else %}
-</ul>
-{% endif %}
-{% if _tabs_content %}
-<div class="tab-content">
-  {%- block contents -%}
     {% if _items is not empty and _items is iterable %}
-      {% for _item in _items %}
-        {% if _item.content is not empty %}
-          {% set _content_class = 'tab-pane fade' %}
-          {% if _item.active %}
-            {% set _content_class = _content_class ~ ' show active' %}
+      {% for _item in items %}
+        {% set _nav_class = 'nav-item' %}
+        {% if _item.dropdown %}
+          {% set _nav_class = _nav_class ~ ' dropdown' %}
+          {% set _item = _item|merge({remove_wrapper: true}) %}
+        {% endif %}
+        {% if _item.dropdown %}
+          {% set _item_classes = [] %}
+        {% else %}
+          {% set _item_classes = ['nav-link'] %}
+        {% endif %}
+        {% if _item.active %}
+          {% set _item_classes = _item_classes|merge(['active']) %}
+        {% endif %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(_item_classes),
+          clean_class: true}) %}
+        {% if not _nav %}
+        <li
+          class="{{ _nav_class }}"
+          {% if _tabs %}
+            role="presentation"
           {% endif %}
-          <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
-            {{- _item.content -}}
-          </div>
+        >
+        {% endif %}
+        {% if _item.dropdown is defined %}
+          {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
+        {% elseif _item.button is defined %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% else %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+        {% if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
+          {{ navigation.render(
+            _item.navigation.items,
+            _item.navigation.pills,
+            _item.navigation.tabs,
+            _item.navigation.tabs_content,
+            _item.navigation.vertical,
+            _item.navigation.full_width,
+            _item.navigation.alignment,
+            _item.navigation.id,
+            _item.navigation.nav,
+            _item.navigation.navbar,
+            _item.navigation.attributes
+            ) }}
+        {% endif %}
+        {% if not _nav %}
+        </li>
         {% endif %}
       {% endfor %}
     {% endif %}
-  {%- endblock -%}
-</div>
-{% endif %}
+  {% if _nav %}
+  </nav>
+  {% else %}
+  </ul>
+  {% endif %}
+  {% if _tabs_content %}
+  <div class="tab-content">
+    {%- block contents -%}
+      {% if _items is not empty and _items is iterable %}
+        {% for _item in _items %}
+          {% if _item.content is not empty %}
+            {% set _content_class = 'tab-pane fade' %}
+            {% if _item.active %}
+              {% set _content_class = _content_class ~ ' show active' %}
+            {% endif %}
+            <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
+              {{- _item.content -}}
+            </div>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    {%- endblock -%}
+  </div>
+  {% endif %}
+{% endspaceless %}
+{% endmacro %}
+
+{{ navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) }}
 
 {% endspaceless %}