OEL-589: Adapt footer to BCL 0.8.0.

templates/layouts/ec_footer_bottom_left.html.twig

-<h4>{{ pattern('link', title.link) }}</h4>
+<p class="fw-bold pb-2 mb-2"> European Commission </p>

templates/layouts/ec_footer_middle_row.html.twig

+<p class="fw-bold pb-2 mb-2">More information on:</p>
+{% if links is defined and links is not empty and links is iterable %}
+<ul class="nav flex-column">
+  {% for link in links %}
+    <li class="nav-item">{{ pattern('link', link) }}</li>
+  {% endfor %}
+</ul>
+{% endif %}

templates/layouts/eu_footer_middle.html.twig

-<h4> {{ contact_eu_title|t }}  </h4>
+<p class="fw-bold border-bottom pb-2 mb-2"> {{ contact_eu_title|t }}  </p>
 {% if contact_eu_links is defined and contact_eu_links is not empty and contact_eu_links is iterable %}
 <ul class="nav flex-column">
   {% for contact_link in contact_eu_links %}
@@ -7,7 +7,7 @@
 </ul>
 {% endif %}
 
-<h4> {{ social_media_title|t }} </h4>
+<p class="fw-bold border-bottom pb-2 pt-3 mb-2"> {{ social_media_title|t }} </p>
 {% if social_media_links is defined and social_media_links is not empty and social_media_links is iterable %}
   <ul class="nav flex-column">
     {% for social_link in social_media_links %}
@@ -16,7 +16,7 @@
   </ul>
 {% endif %}
 
-<h4> {{ legal_title|t }} </h4>
+<p class="fw-bold border-bottom pb-2 pt-3 mb-2"> {{ legal_title|t }} </p>
 {% if legal_links is defined and legal_links is not empty and legal_links is iterable %}
 <ul class="nav flex-column">
   {% for legal_link in legal_links %}

templates/layouts/eu_footer_right.html.twig

-<h4> {{ eu_institutions_title|t }} </h4>
+<p class="fw-bold border-bottom pb-2 pt-4 pt-lg-0 mb-2"> {{ eu_institutions_title|t }} </p>
 {% if eu_institutions_links is defined and eu_institutions_links is not empty and eu_institutions_links is iterable %}
 <ul class="nav flex-column">
   {% for eu_link in eu_institutions_links %}

templates/layouts/eu_footer_top_left.html.twig → templates/layouts/footer_top_left.html.twig

-<h4>{{ pattern('link', title.link) }}</h4>
+<p class="fw-bold mb-2">[{{ title.link.label }}]</p>
 <p> {{ description }} </p>

templates/layouts/eu_footer_top_middle.html.twig → templates/layouts/footer_top_middle.html.twig

 {% if sections is defined and sections is not empty and sections is iterable %}
+  {% set i = 0 %}
   {% for section in sections %}
-    <h4>{{ section.title }}</h4>
+    {% if i == 0 %}
+      <p class="fw-bold border-bottom pb-2 mb-2">{{ section.title }}</p>
+    {% else %}
+      <p class="fw-bold border-bottom pb-2 mb-2 mt-3">{{ section.title }}</p>
+    {% endif %}
+    {% set i = i + 1 %}
     {% if section.links is defined and section.links is not empty and section.links is iterable %}
       <ul class="nav flex-column">
         {% for link in section.links %}

templates/layouts/eu_footer_top_right.html.twig → templates/layouts/footer_top_right.html.twig

 {% if sections is defined and sections is not empty and sections is iterable %}
+  {% set i = 0 %}
   {% for section in sections %}
-    <h4>{{ section.title }}</h4>
+    {% if i == 0 %}
+      <p class="fw-bold border-bottom pb-2 mb-2">{{ section.title }}</p>
+    {% else %}
+      <p class="fw-bold border-bottom pb-2 mb-2 mt-3">{{ section.title }}</p>
+    {% endif %}
+    {% set i = i + 1 %}
     {% if section.links is defined and section.links is not empty and section.links is iterable %}
       <ul class="nav flex-column">
         {% for link in section.links %}
           <li class="nav-item">{{ pattern('link', {
-              label: link.label,
-              path: link.path|render,
-              icon: link.icon,
-              icon_position: link.icon_position
-            }) }}</li>
+            label: link.label,
+            path: link.path|render,
+            icon: link.icon,
+            icon_position: link.icon_position
+          }) }}</li>
         {% endfor %}
       </ul>
     {% endif %}

templates/overrides/navigation/oe-corporate-blocks-ec-footer.html.twig

@@ -19,30 +19,99 @@
  */
 #}
 
-{% block content %}
-<div class="mt-5">
-  {% set _bottom_sections = [
-    {
-      'section_id': 'ec_footer_bottom_left',
-      'title': {
-        'link': {
-          'label': site_specific_footer.site_identity,
-          'path': url('<front>')|render,
-        }
+{% set _section_2 = [] %}
+{% set _section_3 = [] %}
+
+{# First we parse the other_links, we make a simple grid. #}
+{% for section in site_specific_footer.other_links %}
+  {% if loop.index is odd %}
+    {% set _section_2 = _section_2|merge([{
+      'title': section.label,
+      'links': bcl_footer_links(section.links),
+    }]) %}
+  {% else %}
+    {% set _section_3 = _section_3|merge([{
+      'title': section.label,
+      'links': bcl_footer_links(section.links),
+    }]) %}
+  {% endif %}
+{% endfor %}
+
+{# When follow section is present. #}
+{% if site_specific_footer.social_links is not empty %}
+  {# If section numbers are odd, then we flip the last row so to have the follow as first. #}
+  {% if _section_2|length > _section_3|length %}
+    {% set _last_in_section_2 = _section_2|last %}
+
+    {# Compensate for bug in twig where _section_2[1:] returns empty if _section_2|length is 1. #}
+    {% if _last_in_section_2 is empty %}
+      {% set _last_in_section_2 = _section_2[0] %}
+      {% set _section_2 = [] %}
+    {% endif %}
+
+    {% set _section_2 = _section_2[:_section_2|length - 1] %}
+    {% set _section_3 = _section_3|merge([_last_in_section_2]) %}
+
+  {% endif %}
+
+  {# Follow section must always be the last on the left. #}
+  {% set _section_2 = _section_2|merge([{
+    'title': 'Follow us on social media'|t,
+    'links': bcl_footer_links(site_specific_footer.social_links),
+  }]) %}
+{% endif %}
+
+{% set _top_sections = [
+  {
+    'section_id': 'footer_top_left',
+    'title': {
+    'link': {
+      'label': site_specific_footer.site_identity,
+      'path': url('<front>')|render
+    }
+  },
+    'description': site_owner ? 'This site is managed by the @name'|t({'@name': site_owner}),
+  },
+  {
+    'section_id': 'footer_top_middle',
+    'sections': _section_2
+  },
+  {
+    'section_id': 'footer_top_right',
+    'sections': _section_3
+  }
+] %}
+
+{% set _bottom_sections = [
+  {
+    'section_id': 'ec_footer_bottom_left',
+    'title': {
+      'link': {
+        'label': site_specific_footer.site_identity,
+        'path': url('<front>')|render,
       }
-    },
-    {
-      'section_id': 'ec_footer_bottom_middle',
-      'links': bcl_footer_links(corporate_footer.service_navigation),
-    },
-    {
-      'section_id': 'ec_footer_bottom_right',
-      'links': bcl_footer_links(corporate_footer.legal_navigation)
     }
-  ] %}
+  },
+  {
+    'section_id': 'ec_footer_bottom_middle',
+    'links': bcl_footer_links(corporate_footer.service_navigation),
+  },
+  {
+    'section_id': 'ec_footer_bottom_right',
+    'links': bcl_footer_links(corporate_footer.legal_navigation)
+  }
+] %}
+
+{% set _middle_sections = [
+  {
+    'section_id': 'ec_footer_middle_row',
+    'links': bcl_footer_links(corporate_footer.class_navigation),
+  }
+] %}
+
+{{ pattern('footer', {
+  'top_sections': _top_sections,
+  'middle_sections': _middle_sections,
+  'bottom_sections': _bottom_sections,
+}) }}
 
-  {{ pattern('footer', {
-    'bottom_sections': _bottom_sections,
-  }) }}
-</div>
-{% endblock %}

templates/overrides/navigation/oe-corporate-blocks-eu-footer.html.twig

@@ -54,14 +54,14 @@
 
   {# Follow section must always be the last on the left. #}
   {% set _section_2 = _section_2|merge([{
-    'title': 'Follow us'|t,
+    'title': 'Follow us on social media'|t,
     'links': bcl_footer_links(site_specific_footer.social_links),
   }]) %}
 {% endif %}
 
 {% set _top_sections = [
   {
-    'section_id': 'eu_footer_top_left',
+    'section_id': 'footer_top_left',
     'title': {
       'link': {
         'label': site_specific_footer.site_identity,
@@ -71,11 +71,11 @@
     'description': site_owner ? 'This site is managed by the @name'|t({'@name': site_owner}),
   },
   {
-    'section_id': 'eu_footer_top_middle',
+    'section_id': 'footer_top_middle',
     'sections': _section_2
   },
   {
-    'section_id': 'eu_footer_top_right',
+    'section_id': 'footer_top_right',
     'sections': _section_3
   }
 ] %}
@@ -99,9 +99,9 @@
     'eu_institutions_links': bcl_footer_links(corporate_footer.institution_links)
   }
 ] %}
-<div class="mt-5">
-  {{ pattern('footer', {
-    'top_sections': _top_sections,
-    'bottom_sections': _bottom_sections
-  }) }}
-</div>
\ No newline at end of file
+
+{{ pattern('footer', {
+  'top_sections': _top_sections,
+  'bottom_sections': _bottom_sections,
+}) }}
+

templates/overrides/page/page.html.twig

@@ -97,7 +97,11 @@
   </main>
 
   {% if page.footer %}
-    <footer class="page__footer">
+    {% if "ecfooterblock" in page.footer|keys %}
+      <footer class="ec__footer bcl-footer">
+    {% else %}
+      <footer class="bcl-footer">
+    {% endif %}
       <div class="container">
         {{ page.footer }}
       </div>

templates/patterns/footer/footer.ui_patterns.yml

@@ -8,3 +8,6 @@ footer:
     bottom_sections:
       type: array
       label: Sections in the footer
+    middle_sections:
+      type: array
+      label: Sections in the footer

templates/patterns/footer/pattern-footer.html.twig

-<div class="row">
+<div class="pt-4 pt-lg-5 row">
   {% for section in top_sections %}
     {% set section_id = section.section_id %}
     <div class="col footer-section">
@@ -10,9 +10,23 @@
     </div>
   {% endfor %}
 </div>
+{% if middle_sections is defined and middle_sections is not empty and middle_sections is iterable %}
+  <div class="pb-4 pb-lg-5 mt-4 mt-lg-5 bcl-footer__bordered-row row">
+    {% for section in middle_sections %}
+      {% set section_id = section.section_id %}
+      <div class="col">
+        {% include '@oe_whitelabel/layouts/' ~ section_id ~ '.html.twig'  with {
+          title: section.title,
+          links: section.links,
+          more_info_title: section.contact_eu_title,
+          contact_eu_links: section.contact_eu_links,
+        } %}
+      </div>
+    {% endfor %}
+  </div>
+{% endif %}
 {% if bottom_sections is defined and bottom_sections is not empty and bottom_sections is iterable %}
-  <hr/>
-  <div class="row">
+  <div class="pb-4 pb-lg-5 mt-4 mt-lg-5 bcl-footer__bordered-row row">
     {% for section in bottom_sections %}
       {% set section_id = section.section_id %}
       <div class="col">