@openeuropa/bcl-theme-default 0.4230.202512021730 → 0.4360.202601141610

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

@@ -15,10 +15,12 @@
   - language_modal (object) (default: {})
   - light (boolean) (default: false)
   - modals (modal[]) (default: [])
+  - toggler_attributes (drupal attrs)
+  - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
 
-{% set _variant = variant|default('neutral') %}
+{%- set _variant = variant|default('neutral') %}
 {% set _navbar = navbar|default({}) %}
 {% set _project_logo = project_logo|default({}) %}
 {% set _site_name = site_name|default('') %}
@@ -28,116 +30,106 @@
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
 {% set _light = light ?? false %}
+{% set _toggler_attributes = toggler_attributes ?: create_attribute() %}
+{% set _icon_path = icon_path|default('') %}
 {% set _modals = modals|default([]) %}
 
-{% set _site_name_classes = 'bcl-header__site-name' %}
+{%- set _site_name_classes = 'bcl-header__site-name' %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+{%- set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant, 'shadow-sm']) %}
 
-{% if site_name_classes is not empty %}
-  {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
+{%- if site_name_classes is not empty %}
+  {%- set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
 {% endif %}
 
-{% set _project_classes = 'bcl-header__project' %}
+{%- set _project_classes = 'bcl-header__project' %}
 {% if _light is not empty %}
-  {% set _project_classes = _project_classes ~ ' light' %}
+  {%- set _project_classes = _project_classes ~ ' light' %}
 {% endif %}
 
+{%- set toggler_attributes = _toggler_attributes.addClass(['bcl-navbar-toggler', 'd-lg-none'])
+  .setAttribute('type', 'button')
+  .setAttribute('data-bs-toggle', 'collapse')
+  .setAttribute('data-bs-target', '#' ~ navbar_id)
+  .setAttribute('aria-controls', navbar_id)
+  .setAttribute('aria-expanded', 'false')
+%}
+
+{%- set navbar_toggle_button -%}
+  <button
+    {{ toggler_attributes }}
+  >
+    {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'list',
+      size: 'fluid',
+      path: _icon_path,
+      attributes: create_attribute().addClass(['default-icon']),
+    } only %}
+    {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'x',
+      size: 'fluid',
+      path: _icon_path,
+      attributes: create_attribute().addClass(['active-icon']),
+    } only -%}
+  </button>
+{%- endset -%}
+
 <header
   {{ attributes }}
->
+>{# -#}
   <nav
-    {{ _head.attributes.addClass(['navbar', 'navbar-expand-lg', 'navbar-light']) }}>
+    {{ _head.attributes.addClass(['navbar', 'navbar-expand-lg', 'navbar-light']) }}>{# -#}
     <div class='container'>
-    {% if _head.brand is not empty %}
+    {%- if _head.brand is not empty -%}
       <a class='navbar-brand' href='{{ _head.brand.link }}'>
-      {% for logo in _head.brand.logos %}
+      {%- for logo in _head.brand.logos -%}
         <img
           src='{{ logo.src }}'
           {% if logo.alt is not empty %}
           alt='{{ logo.alt }}'
           {% endif %}
-          {% if logo.class is not empty %}
+          {%- if logo.class is not empty %}
           class='{{ logo.class }}'
           {% endif %}
         />
-      {% endfor %}
+      {%- endfor -%}
       </a>
-    {% endif %}
-      <button
-        class="navbar-toggler bcl-navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target='#{{ _navbar_id }}'
-        aria-controls='{{ _navbar_id }}'
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-    </div>
-  </nav>
-
+    {%- endif %}
+      {{- navbar_toggle_button -}}
+    </div>{# -#}
+  </nav>{# -#}
 
-  <!-- project name -->
-  {% if _project_logo is not empty or _site_name is not empty %}
-  <div class="{{ _project_classes  }}">
-    <div class="container">
-    {% if _project_link is not empty %}
-      <a
-        href="{{ _project_link }}"
-      >
-    {% endif %}
-      {% if _project_logo is not empty %}
-        <img
-        {% if _project_logo.path is not empty %}
-          src="{{ _project_logo.path }}"
-        {% endif %}
-        {% if _project_logo.alt is not empty %}
-          alt="{{ _project_logo.alt }}"
-        {% endif %}
-        {% if _project_logo.classes is not empty %}
-          class="{{ _project_logo.classes }}"
-        {% endif %}
-        />
-      {% endif %}
-      {% if _site_name is not empty %}
-        <span class="{{ _site_name_classes }}">
-        {{- _site_name -}}
-        </span>
-      {% endif %}
-    {% if _project_link is not empty %}
-      </a>
-    {% endif %}
-    </div>
-  </div>
-  {% endif %}
+  <!-- site name -->{# -#}
+  <div class="bcl-header__site-name" id="site-name-heading">{# -#}
+    <div class="container">{# -#}
+      <span class="h5 py-3-5 border-top-subtle mb-0 d-block">{{ _site_name }}</span>{# -#}
+    </div>{# -#}
+  </div>{# -#}
 
   <!-- navbar -->
-  {% if _navbar is not empty %}
-    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({
+  {%- if _navbar is not empty %}
+    {%- include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar|merge({
       disable_collapse: true,
       attributes: create_attribute().addClass('bcl-header__navbar collapse navbar-collapse').setAttribute('id', _navbar_id).setAttribute('aria-label', 'Main Navigation'),
     }) only %}
-  {% endif %}
+  {%- endif -%}
+</header>{# -#}
 
-  <!-- breadcrumbs -->
-  {% if _breadcrumbs is not empty %}
-    <div class="container">
-      {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
-    </div>
-  {% endif %}
-</header>
+<!-- breadcrumbs -->
+{%- if _breadcrumbs is not empty -%}
+  <div class="container">
+    {%- include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only -%}
+  </div>
+{%- endif %}
 
-{% for modal in _modals %}
-  {% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
+{%- for modal in _modals %}
+  {%- include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
 {% endfor %}
 
-{% if _language_modal is not empty %}
-  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
-{% endif %}
-
+{%- if _language_modal is not empty %}
+  {%- include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
+{% endif -%}

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

@@ -5,33 +5,32 @@
   - attributes (drupal attrs)
 #}
 
-{% set _title = title|default('') %}
+{%- set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{%  endif %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
+{% endif %}
 
-{% if attributes.class is empty %}
-  {% set attributes = attributes.addClass(['mb-4']) %}
+{%- if attributes.class is empty %}
+  {%- set attributes = attributes.addClass(['mb-4']) %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-heading']) %}
+{%- set attributes = attributes.addClass(['bcl-heading']) %}
 
-{% if _title_link is not empty and _title is not empty and _title_link.label is empty %}
-  {% set _title_link = _title_link|merge({ label: _title }) %}
+{%- if _title_link is not empty and _title is not empty and _title_link.label is empty %}
+  {%- set _title_link = _title_link|merge({ label: _title }) %}
 {% endif %}
 
-{% if _title is not empty or _title_link is not empty %}
-<{{ _title_tag }} 
+{%- if _title is not empty or _title_link is not empty -%}
+<{{ _title_tag }}
   {{- attributes -}}
 >
 {%- if _title_link is not empty -%}
   {% include '@oe-bcl/bcl-link/link.html.twig' with _title_link|merge({ standalone: true }) only %}
 {%- else -%}
   {{- _title -}}
-{%- endif %}
+{%- endif -%}
 </{{ _title_tag }}>
-{% endif -%}
-
+{%- endif -%}

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

@@ -8,26 +8,26 @@
   - attributes (drupal attrs)
 #}
 
-{% set _name = name|default('') %}
+{%- set _name = name|default('') %}
 {% set _path = path|default('') %}
 {% set _size = size|default('s') %}
 {% set _transformation = transformation|default('') %}
 
-{% set _classes = ['bi', 'icon--' ~ _size] %}
+{%- set _classes = ['bi', 'icon--' ~ _size] %}
 
-{% if _transformation is not empty %}
-  {% set _classes = _classes|merge(['icon--' ~ _transformation]) %}
+{%- if _transformation is not empty %}
+  {%- set _classes = _classes|merge(['icon--' ~ _transformation]) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+{%- set attributes = attributes.addClass(_classes) -%}
 
 <svg
   {{ attributes }}
->
-  <use xlink:href="{{ _path ~ "#" ~ _name }}"/>
+>{# -#}
+  <use xlink:href="{{ _path ~ "#" ~ _name }}"/>{# -#}
 </svg>
-
+{#--#}

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

@@ -12,7 +12,7 @@ Parameters:
   - attributes (drupal attrs)
 #}
 
-{% set _title = title|default('') %}
+{%- set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
@@ -22,19 +22,19 @@ Parameters:
 {% set _dropdown_id = dropdown_id|default('bcl-inpage-navigation-dropdown' ~ random(10000)) %}
 {% set _dyanmic_active = dynamic_active|default(false) %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
+{%- if attributes is empty %}
+  {%- set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
+{%- set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
 
-{% if not attributes.hasAttribute('aria-label') and not attributes.hasAttribute('aria-labelledby') %}
-  {% set attributes = attributes.setAttribute('aria-labelledby', _dropdown_id) %}
+{%- if not attributes.hasAttribute('aria-label') and not attributes.hasAttribute('aria-labelledby') %}
+  {%- set attributes = attributes.setAttribute('aria-labelledby', _dropdown_id) %}
 {% endif %}
 
-{% set title_attributes = _title_attributes.addClass(['mb-0', 'd-none', 'd-md-block']) %}
+{%- set title_attributes = _title_attributes.addClass(['mb-0', 'd-none', 'd-md-block']) %}
 {% set _button_content %}
-  {{ _title }}
+  {{- _title }}
   {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: 'chevron-down',
     size: 's',
@@ -42,36 +42,36 @@ Parameters:
   } only -%}
 {% endset %}
 
-{% set _classes = [] %}
+{%- set _classes = [] %}
 
-{% if _dyanmic_active %}
-  {% set _classes = _classes|merge(['dynamic-active']) %}
-{% endif %}
+{%- if _dyanmic_active %}
+  {%- set _classes = _classes|merge(['dynamic-active']) %}
+{% endif -%}
 
 <nav{{ attributes.addClass(_classes) }}>
-  {% set trigger_attributes = create_attribute()
+  {%- set trigger_attributes = create_attribute()
                               .setAttribute('aria-expanded', 'false')
                               .setAttribute('type', 'button')
                               .setAttribute('id', _dropdown_id)
                               .setAttribute('data-bs-toggle', 'dropdown')
                               .addClass(['dropdown-toggle', 'h2', 'd-md-none']) %}
-  {% include '@oe-bcl/bcl-button/button.html.twig' with {
+  {%- include '@oe-bcl/bcl-button/button.html.twig' with {
     label: _button_content,
     clean_class: true,
     attributes: trigger_attributes,
   } only %}
-  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+  {%- include '@oe-bcl/bcl-heading/heading.html.twig' with {
     title: _title,
     title_tag: _title_tag,
     title_link: _title_link,
     attributes: _title_attributes,
-  } only %}
+  } only -%}
   <div class="dropdown-menu">
-    {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
+    {%- include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
       'pills': true,
       'vertical': true,
       'items': _links,
-    } only %}
-  </div>
+    } only -%}
+  </div>{# -#}
 </nav>
-
+{#--#}

package/templates/bcl-landing-page/landing-page.html.twig

@@ -1,56 +1,56 @@
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" -%}
 
 {%- block banner %}
-  {% if banner is defined %}
-    {% include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
-  {% endif %}
+  {%- if banner is defined %}
+    {%- include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
+  {%- endif %}
 {%- endblock -%}
-{%- block content %}
+{%- block content -%}
 <div class="container">
-  {% if featured_section is defined %}
-    <div class="my-4">
-      <h2 class="mb-4">{{ featured_section.title }}</h2>
-      <div class="row">
+  {%- if featured_section is defined -%}
+    <div class="my-4">{# -#}
+      <h2 class="mb-4">{{ featured_section.title }}</h2>{# -#}
+      <div class="row">{# -#}
         <div class="col-12 col-md-6">
-          {{ featured_section.content }}
-        </div>
+          {{- featured_section.content -}}
+        </div>{# -#}
         <div class="col-12 col-md-6">
-          {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_section.featured_media only %}
-        </div>
-      </div>
+          {%- include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_section.featured_media only -%}
+        </div>{# -#}
+      </div>{# -#}
     </div>
-  {% endif %}
+  {%- endif %}
 
-  {% if listing_section is defined %}
+  {%- if listing_section is defined -%}
     <div class="my-4">
-      {% include '@oe-bcl/bcl-listing/listing.html.twig' with listing_section only %}
+      {%- include '@oe-bcl/bcl-listing/listing.html.twig' with listing_section only -%}
     </div>
-  {% endif %}
+  {%- endif %}
 
-  {% if inpage_banner is defined %}
+  {%- if inpage_banner is defined -%}
     <div class="my-4">
-      {% include '@oe-bcl/bcl-banner/banner.html.twig' with inpage_banner only %}
+      {%- include '@oe-bcl/bcl-banner/banner.html.twig' with inpage_banner only -%}
     </div>
-  {% endif %}
+  {%- endif %}
 
-  {% if activity_featured is defined %}
-    <div class="my-4">
-      <h2 class="mb-4">{{ activity_featured.title }}</h2>
-      <div class="row">
+  {%- if activity_featured is defined -%}
+    <div class="my-4">{# -#}
+      <h2 class="mb-4">{{ activity_featured.title }}</h2>{# -#}
+      <div class="row">{# -#}
         <div class="col-12 col-md-6">
-          {{ activity_featured.content }}
-        </div>
+          {{- activity_featured.content -}}
+        </div>{# -#}
         <div class="col-12 col-md-6">
-          {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with activity_featured.featured_media only %}
-        </div>
-      </div>
+          {%- include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with activity_featured.featured_media only -%}
+        </div>{# -#}
+      </div>{# -#}
     </div>
-  {% endif %}
+  {%- endif %}
 
-  {% if activity_listing is defined %}
+  {%- if activity_listing is defined -%}
     <div class="my-4">
-      {% include '@oe-bcl/bcl-listing/listing.html.twig' with activity_listing only %}
+      {%- include '@oe-bcl/bcl-listing/listing.html.twig' with activity_listing only -%}
     </div>
-  {% endif %}
+  {%- endif -%}
 </div>
 {%- endblock -%}

package/templates/bcl-language-list/language-list-grid.html.twig

@@ -12,54 +12,54 @@
   - icon_path (string) (default: '')
 #}
 
-{% set _items = items|default([]) %}
+{%- set _items = items|default([]) %}
 {% set _category = category|default('') %}
 {% set _icon_path = icon_path|default('') %}
 
-{% set _columns = [] %}
+{%- set _columns = [] %}
 {% set _columns = _columns|merge([_items|slice(0, (items|length / 2)|round(0, 'ceil'))]) %}
-{% set _columns = _columns|merge([_items|slice((items|length / 2)|round(0, 'ceil'), items|length)]) %}
+{% set _columns = _columns|merge([_items|slice((items|length / 2)|round(0, 'ceil'), items|length)]) -%}
 
 <div class="pb-2">
-  {% if _category is not empty %}
+  {%- if _category is not empty -%}
   <h5 class="mb-4">{{ _category }}</h5>
-  {% endif %}
-  {% if _columns is not empty and _columns is iterable %}
+  {%- endif %}
+  {%- if _columns is not empty and _columns is iterable -%}
   <div class="row">
-    {% for _column in _columns %}
+    {%- for _column in _columns -%}
       <div class="col-12 col-md">
-      {% for _item in _column %}
-        {% if _item.attributes is empty %}
-          {% set _item = _item|merge({
+      {%- for _item in _column %}
+        {%- if _item.attributes is empty %}
+          {%- set _item = _item|merge({
             attributes: create_attribute()
           }) %}
-        {% endif %}
-        {% set _item = _item|merge({
+        {%- endif %}
+        {%- set _item = _item|merge({
           attributes: _item.attributes.addClass(['w-100', 'mb-2-5', 'btn', 'w-100'])
         }) %}
-        {% if _item.active %}
-          {% set _item = _item|merge({
+        {%- if _item.active %}
+          {%- set _item = _item|merge({
             icon: {
               name: "check2",
               path: _icon_path,
             },
             attributes: _item.attributes.addClass(['selected', 'justify-content-between'])
           }) %}
-        {% else %}
-          {% set _item = _item|merge({
+        {%- else %}
+          {%- set _item = _item|merge({
             attributes: _item.attributes.addClass('justify-content-start')
           }) %}
-        {% endif %}
-        {% if _item.lang is not empty %}
-          {% set _item = _item|merge({
+        {%- endif %}
+        {%- if _item.lang is not empty %}
+          {%- set _item = _item|merge({
             attributes: _item.attributes.setAttribute('lang', _item.lang).setAttribute('hreflang', _item.lang)
           }) %}
-        {% endif %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
-      {% endfor %}
+        {%- endif %}
+        {%- include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+      {%- endfor -%}
       </div>
-    {% endfor %}
+    {%- endfor -%}
   </div>
-  {% endif %}
+  {%- endif -%}
 </div>
-
+{#--#}