OEL-455: Footer pattern split into several templates per section.

templates/layouts/ec_footer_bottom_left.html.twig

+Logo

templates/layouts/ec_footer_bottom_middle.html.twig

+<h2> {{ contact_eu_title| t }}  </h2>
+{{ contact_eu_links }}
+<h2> {{ social_media_title|t }} </h2>
+{{ social_media_links }}
+<h2> {{ legal_title|t }} </h2>
+<ul>
+  {% for legal_link in legal_links %}
+    <li>{{ pattern('link', {
+        'label': legal_link['link']['label'],
+        'path': legal_link['link']['path'],
+        'icon_position': legal_link['link']['icon_position']
+      }) }}</li>
+  {% endfor %}
+</ul>

templates/layouts/ec_footer_bottom_right.html.twig

+<h2> {{ eu_institutions_title| t }} </h2>
+{{ eu_institutions_links }}
+
+<ul>
+  {% for eu_link in eu_institutions_links %}
+    <li>{{ pattern('link', {
+        'label': eu_link['link']['label'],
+        'path': eu_link['link']['path'],
+        'icon_position': eu_link['link']['icon_position']
+      }) }}</li>
+  {% endfor %}
+</ul>

templates/layouts/ec_footer_top_left.html.twig

+<h2> {{ project_name }} </h2>
+<p> {{ description }} </p>

templates/layouts/ec_footer_top_middle.html.twig

+<h2> {{ contact_title| t }} {{ project_name }} </h2>
+<p> {{ description }} </p>
+
+<h2> {{ follow_title| t }} </h2>
+{{ dump(follow_links) }}
+<ul>
+  {% for follow_link in follow_links %}
+    <li>{{ pattern('link', {
+        'label': follow_link['link']['label'],
+        'path': follow_link['link']['path'],
+        'icon_position': follow_link['link']['icon_position']
+      }) }}</li>
+  {% endfor %}
+</ul>

templates/layouts/ec_footer_top_right.html.twig

+<h2> {{ optional_links_title| t }} </h2>
+{{ optional_links_links }}
+

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

@@ -17,74 +17,59 @@
  *
  * @ingroup themeable
  */
+
+  todo > check ecl_footer_link mapping is different to bcl links?
+  todo > try ecl_footer_links: 'links': ecl_footer_links(corporate_footer.legal_navigation),
 #}
 
-{% include '@oe_whitelabel/patterns/footer/oe-whitelabel-footer.html.twig' %}
+{% block content %}
+  {% set _top_sections = [
+    {
+      'section_id': 'ec_footer_top_left',
+      'project_name': site_specific_footer.site_identity,
+      'project_path': url('<front>'),
+      'project_description': 'This site is managed by the European Commission, Directorate-General for Communication (DG COMM)',
+    },
+    {
+      'section_id': 'ec_footer_top_middle',
+      'contact_title': 'Contact',
+      'project_name': site_specific_footer.site_identity,
+      'contact_path': url('<front>'),
+      'follow_title': 'Follow us on social media',
+      'follow_links': site_specific_footer.social_links,
+    },
+    {
+      'section_id': 'ec_footer_top_right',
+      'optional_links_title': 'Optional Links',
+      'optional_links_links': site_specific_footer.other_links,
+    },
+  ] %}
+  {% set _bottom_sections = [
+    {
+      'section_id': 'ec_footer_bottom_left',
+      'logo': 'logo',
+      'path': url('<front>')
+    },
+    {
+      'section_id': 'ec_footer_bottom_middle',
+      'contact_eu_title': 'Contact the EU',
+      'contact_eu_links': 'Contact EU LINKS',
+      'social_media_title': 'Social Media',
+      'social_media_link': 'Social Media LINKS',
+      'legal_title': 'Legal',
+      'legal_links': ecl_footer_links(corporate_footer.legal_navigation),
+    },
+    {
+      'section_id': 'ec_footer_bottom_right',
+      'eu_institutions_title': 'EU Institutions',
+      'eu_institutions_links': ecl_footer_links(corporate_footer.class_navigation)
+
+    }
+  ] %}
+
+  {{ pattern('footer', {
+    'top_sections': _top_sections,
+    'bottom_sections': _bottom_sections,
+  }) }}
 
-{% if site_specific_footer is not empty %}
-  <div class="ecl-footer__custom">
-    {% if site_specific_footer.site_identity is not empty %}
-      <h2 class="footer__custom-title-identity">{{ site_specific_footer.site_identity }}</h2>
-    {% endif %}
-    {% if site_specific_footer.social_links is not empty %}
-      <p class="footer__custom-label">{{ 'Follow us:'|t }}</p>
-      <ul class="footer__list">
-        {% for social_link in site_specific_footer.social_links %}
-          <li class="footer__list-item">
-            {{ link(social_link.label, social_link.href, create_attribute({'class': ['menu_item.social_network']})) }}
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-    {% for section in site_specific_footer.other_links %}
-      {% if section.links is not empty %}
-        <ul class="footer__list">
-          {% for menu_item in section.links %}
-            <li class="footer__list-item">
-              {{ link(menu_item.label, menu_item.href) }}
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-    {% endfor %}
-  </div>
-{% endif %}
-<div class="footer__corporate">
-  <div class="footer__corporate-top">
-    {% if corporate_footer.corporate_site_link is not empty %}
-      <h4 class="footer__site-name">{{ link(corporate_footer.corporate_site_link.label, corporate_footer.corporate_site_link.href) }}</h4>
-    {% endif %}
-    {% if site_owner is not empty %}
-      <span class="footer__content-owner-details">{{ 'This site is managed by the @name'|t({'@name': site_owner}) }}</span>
-    {% endif %}
-    {% if corporate_footer.class_navigation is not empty %}
-      <ul class="footer__list footer__class-navigation">
-        {% for menu_item in corporate_footer.class_navigation %}
-          <li class="footer__list-item">
-            {{ link(menu_item.label, menu_item.href) }}
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-    {% if corporate_footer.service_navigation is not empty %}
-      <ul class="footer__list footer__service_navigation">
-        {% for menu_item in corporate_footer.service_navigation %}
-          <li>
-            {{ link(menu_item.label, menu_item.href, create_attribute({'class': [menu_item.external ? 'external' ]})) }}
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-  </div>
-  <div class="footer__corporate-bottom">
-    {% if corporate_footer.legal_navigation is not empty %}
-      <ul class="footer__list footer__legal-navigation">
-        {% for menu_item in corporate_footer.legal_navigation %}
-          <li class="footer__list-item">
-            {{ link(menu_item.label, menu_item.href) }}
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-  </div>
-</div>
+{% endblock %}

templates/overrides/page/page.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.navbar_branding: Items for the navbar brand region (logo).
+ * - page.navbar_left: Items for the navbar left region (primary menu).
+ * - page.navbar_right: Items for the navbar right region.
+ * - page.header: Items for the header region.
+ * - page.content: The main content of the current page.
+ * - page.page_bottom: The content of the current page.
+ * - page.footer: Items for the footer region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+
+<div class="page">
+
+  {{ pattern('navbar', {
+    navbar_branding: page.navbar_branding ? page.navbar_branding : false,
+    navbar_left: page.navbar_left ? page.navbar_left : false,
+    navbar_right: page.navbar_right ? page.navbar_right : false,
+    style: 'light'
+  }) }}
+
+  <main class="pt-5 pb-5">
+    {% if page.header %}
+      <header class="page__header mb-3">
+        <div class="container">
+          {{ page.header }}
+        </div>
+      </header>
+    {% endif %}
+
+    {% if page.content %}
+      <div class="page__content">
+        <div class="container">
+          {{ page.content }}
+        </div>
+      </div>
+    {% endif %}
+  </main>
+
+  {% if page.footer %}
+    <footer class="page__footer">
+      <div class="container">
+        {{ page.footer }}
+      </div>
+    </footer>
+  {% endif %}
+</div>

templates/patterns/footer/footer.ui_patterns.yml

+footer:
+  label: Footer
+  description: Footer for oe_corporate blocks
+  fields:
+    top_sections:
+      type: array
+      label: Sections in the footer
+    bottom_sections:
+      type: array
+      label: Sections in the footer

templates/patterns/footer/oe-whitelabel-footer.html.twig

-<div class="container-fluid oe_whitelabel__footer">
-  <div class="row">
-    <div class="col">
-      Column 1 {% if site_specific_footer.site_identity is not empty %}
-        <h2 class="footer__custom-title-identity">{{ site_specific_footer.site_identity }}</h2>
-      {% endif %}
-    </div>
-    <div class="col">
-      Column 2
-    </div>
-    <div class="col">
-      Column 3
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
-      Column 1
-    </div>
-    <div class="col">
-      Column 2
-    </div>
-    <div class="col">
-      Column 3
-    </div>
-  </div>
-</div>
-

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

+{# top_sections
+  bottom_sections
+#}
+
+<footer>
+  <div class="container-fluid">
+    <div class="row">
+      {% for section in top_sections %}
+        {% set section_id = section.section_id %}
+        <div class="col">
+          {% include '@oe_whitelabel/layouts/' ~ section_id ~ '.html.twig'  with {
+            project_name: section.project_name,
+            description: section.project_description,
+            contact_title: section.contact_title,
+            contact_path: section.contact_path,
+            follow_title: section.follow_title,
+            follow_links: section.follow_links,
+            optional_links_title: section.optional_links_title,
+            optional_links_links: section.optional_links_links,
+          } %}
+        </div>
+      {% endfor %}
+    </div>
+    {% if bottom_sections is defined and bottom_sections is not empty and bottom_sections is iterable %}
+      <hr/>
+      <div class="row">
+        {% for section in bottom_sections %}
+          {% set section_id = section.section_id %}
+          <div class="col">
+            {% include '@oe_whitelabel/layouts/' ~ section_id ~ '.html.twig'  with {
+              logo: section.logo,
+              path: section.path,
+              contact_eu_title: section.contact_eu_title,
+              contact_eu_links: section.contact_eu_links,
+              social_media_title: section.social_media_title,
+              social_media_link: section.social_media_link,
+              legal_title: section.legal_title,
+              legal_links: section.legal_links,
+              eu_institutions_title: section.eu_institutions_title,
+              eu_institutions_links: section.eu_institutions_links
+            } %}
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+</footer>