@openeuropa/bcl-theme-default 0.26.0 → 0.28.0

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title: (string) (default: '')
@@ -29,8 +29,8 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _helper_text = helper_text|default('') %}
-{% set _items = items|default([]) %}
 {% set _antispam = antispam|default('') %}
+{% set _items = items|default([]) %}
 {% set _submit = submit|default({}) %}
 
 {% if attributes is empty %}
@@ -147,4 +147,4 @@
 {% endif %}
 </form>
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-form-input/form-input.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -180,4 +180,4 @@
 </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-gallery/gallery-item.html.twig

@@ -0,0 +1,63 @@
+{% apply spaceless %}
+
+{#
+Parameters:
+  - item (object) (default: '')
+    format: {
+      thumbnails (string) img path
+      media: (string) <img> tag
+      caption (string)
+      caption_title (string)
+      caption_classes (string)
+      interval (integer) (default: 0)
+    }
+  - carousel_id (string) (default: '')
+  - modal_id (string) (default: '')
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _item = item|default({}) %}
+{% set _carousel_id = carousel_id|default('') %}
+{% set _modal_id = modal_id|default('') %}
+{% set _icon_path = icon_path|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-gallery__item', 'd-block', 'w-100', 'img-fluid'])
+                              .setAttribute('data-bs-target', '#' ~ _carousel_id)
+                              .setAttribute('data-bs-slide-to', loop.index - 1)
+%}
+
+<a 
+  {{ attributes }}
+>
+  <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+  {% if '<iframe' in _item.media or '<video' in _item.media %}
+    <span class="bcl-gallery__item-play-icon">
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'play-fill',
+      size: 's',
+      path: _icon_path,
+    } only %}
+    </span>
+  {% endif %}
+  {% if _item.caption is not empty or item.caption_title is not empty %}
+    <div class="bcl-gallery__item-caption">
+    {% if _item.caption_title is not empty %}
+      <p class="fs-5">{{ _item.caption_title }}</p>
+    {% endif %}
+    {% if _item.caption is not empty %}
+      <div class="bcl-gallery__item-description">
+        {{ _item.caption }}
+      </div>
+    {% endif %}
+    </div>
+  {% endif %}
+  </div>
+  {{ _item.thumbnail }}
+</a>
+
+{% endapply %}

package/templates/bcl-gallery/gallery-modal.html.twig

@@ -0,0 +1,105 @@
+{% apply spaceless %}
+
+{#
+Parameters:
+  - id (string) (default: '')
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - items (array of objects) format: [
+      {
+        thumbnails (string) img path
+        media: (string) <img> tag
+        caption (string)
+        caption_title (string)
+        caption_classes (string)
+        interval (integer) (default: 0)
+      }
+    ]
+  - carousel_id (string) (default: '')
+  - next_label (string) (default: '')
+  - prev_label (string) (default: '')
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _id = id|default('') %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h3') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _items = items|default([]) %}
+{% set _carousel_id = carousel_id|default('') %}
+{% set _next_label = next_label|default('Next') %}
+{% set _prev_label = prev_label|default('Previous') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _carousel_items = [] %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass('modal')
+                              .setAttribute('id', _id)
+                              .setAttribute('tabindex', '-1')
+                              .setAttribute('aria-labelledby', _id)
+                              .setAttribute('aria-hidden', 'true')
+                              .setAttribute('data-bs-backdrop', 'false')
+%}
+
+<div
+  {{ attributes }}
+>
+  <div class="modal-dialog modal-dialog-centered modal-fullscreen">
+    <div class="modal-content">
+      <div class="modal-header border-0 justify-content-between">
+      {% if _title is not empty %}
+        <div class="modal-title">
+          {% if _title is not empty %}
+            {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+              title: _title,
+              title_tag: _title_tag,
+              title_link: _title_link,
+              attributes: _title_attributes.addClass(['d-sm-block', 'd-none']),
+            } only %}
+          {% endif %}
+        </div>
+      {% endif %}
+        <div class="carousel-pager">
+          <span>1</span> / {{ _items|length -}}
+        </div>
+        <div class="modal-close">
+          {% set button_attributes = create_attribute()
+                                    .addClass('btn-close')
+                                    .setAttribute('aria-label', 'Close')
+                                    .setAttribute('data-bs-dismiss', 'modal')
+          %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with {
+            clean_class: true,
+            attributes: button_attributes
+          } only %}
+        </div>
+      </div>
+      <div class="modal-body d-flex align-items-center justify-content-center">
+        {% for _item in _items %}
+          {% set _carousel_items = _carousel_items|merge([_item|merge({
+            caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
+            image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
+          })]) %}
+        {% endfor %}
+        {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
+          id: _carousel_id,
+          with_controls: true,
+          with_indicators: false,
+          prev_label: _prev_label,
+          next_label: _next_label,
+          autoplay: false,
+          items: _carousel_items,
+        } only %}
+      </div>
+    </div>
+  </div>
+</div>
+
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
 Parameters:
@@ -40,11 +40,9 @@ Parameters:
 {% set _max_visible_thumbnails = max_visible_thumbnails|default(5) %}
 {% set _items = items|default([]) %}
 {% set _icon_path = icon_path|default('') %}
-
-{% set _carousel_items = [] %}
 {% set _carousel_id = "carousel" ~ _id|capitalize %}
 {% set _modal_id = "modal" ~ _id|capitalize %}
-{% set _collpase_id = "collapse" ~ _id|capitalize %}
+{% set _collapse_id = "collapse" ~ _id|capitalize %}
 {% set _max_visible_thumbnails = _max_visible_thumbnails + 1 %}
 
 {% if attributes is empty %}
@@ -53,155 +51,104 @@ Parameters:
 
 {% set attributes = attributes.addClass('bcl-gallery') %}
 
-{# Print the result #}
-
-{% if _items is not empty %}
-
-  <div {{ attributes }}>
-    {% if _items is iterable %}
-      <div class="d-sm-flex flex-sm-row align-items-sm-center">
-        <div class="flex-sm-grow-1">
-        {% if _title is not empty %}
-          {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-            title: _title,
-            title_tag: _title_tag,
-            title_link: _title_link,
-            attributes: _title_attributes,
-          } only %}
-        {% endif %}
-        </div>
-        <div class="mb-3 mb-sm-0 fw-bold">
-          {%- if _counter is not empty -%}
-            {{ _counter|replace({'%d': _items|length}) }}
-          {%- endif -%}
-        </div>
-      </div>
-
-      {% for _item in _items %}
-        {% if loop.first %}
-          <div class="bcl-gallery__thumbnails">
-        {% endif %}
-          {% if loop.index == _max_visible_thumbnails %}
-            <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collpase_id }}">
-          {% endif %}
-            {% if loop.index % _max_visible_thumbnails == 0 or loop.first %}
-              <ul class="bcl-gallery__grid">
-            {% endif %}
-                <li>
-                  <a href="#" data-bs-target="#{{ _carousel_id }}" data-bs-slide-to="{{ loop.index - 1 }}" class="bcl-gallery__item d-block w-100 img-fluid">
-                    <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
-                    {% if '<iframe' in _item.media or '<video' in _item.media %}
-                      <span class="bcl-gallery__item-play-icon">
-                      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-                        name: 'play-fill',
-                        size: 's',
-                        path: _icon_path,
-                      } only %}
-                      </span>
-                    {% endif %}
-                    {% if _item.caption is not empty or item.caption_title is not empty %}
-                      <div class="bcl-gallery__item-caption">
-                      {% if _item.caption_title is not empty %}
-                        <p class="fs-5">{{ _item.caption_title }}</p>
-                      {% endif %}
-                      {% if _item.caption is not empty %}
-                        <div class="bcl-gallery__item-description">
-                          {{ _item.caption }}
-                        </div>
-                      {% endif %}
-                      </div>
-                    {% endif %}
-                    </div>
-                    {{ _item.thumbnail }}
-                  </a>
-                </li>
-            {% if loop.index % 5 == 0 or loop.last %}
-              </ul>
-            {% endif %}  
-          {% if loop.last %}
-            </div>
-          {% endif %}
-        {% if loop.index > _max_visible_thumbnails and loop.last %}
-          </div>
-          <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
-            <a 
-              class="bcl-gallery__collapse standalone d-none d-sm-inline-block" 
-              aria-controls="{{ _collpase_id }}" 
-              data-bs-toggle="collapse" 
-              aria-expanded="false" 
-              role="button" 
-              href="#{{ _collpase_id }}"
-            >
-              <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
-              <span class="label-expanded">{{ _toggle_expanded }}</span>
-              {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-                name: 'caret-down-fill',
-                size: '2xs',
-                path: _icon_path,
-                attributes: create_attribute().addClass('ms-2-5'),
-              } only %}
-            </a>
-            <a 
-              class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none" 
-              data-bs-target="#{{ _carousel_id }}" 
-              data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}" 
-              role="button" 
-              href="#"
-            >
-              <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
-                <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
-                {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-                  name: 'caret-down-fill',
-                  size: '2xs',
-                  path: _icon_path,
-                  attributes: create_attribute().addClass('ms-2-5'),
-                } only %}
-              <span>
-            </a>
-          </div>
-        {% endif %}
-      {% endfor %}
+<div
+  {{ attributes }}
+>
+{% if _title is not empty or _counter is not empty %}
+  <div class="d-sm-flex flex-sm-row align-items-sm-center">
+  {% if _title is not empty %}
+    <div class="flex-sm-grow-1">
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _title,
+        title_tag: _title_tag,
+        title_link: _title_link,
+        attributes: _title_attributes,
+      } only %}
+    </div>
+  {% endif %}
+  {%- if _counter is not empty -%}
+    <div class="mb-3 mb-sm-0 fw-bold">
+      {{- _counter|replace({'%d': _items|length}) -}}
+    </div>
+  {%- endif -%}
+  </div>
+{% endif %}
+{% if _items is not empty and _items is iterable %}
+{% for _item in _items %}
+  {% if loop.first %}
+  <div class="bcl-gallery__thumbnails">
+  {% endif %}
+  {% if loop.index == _max_visible_thumbnails %}
+    <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collapse_id }}">
+  {% endif %}
+    {% if loop.index % _max_visible_thumbnails == 0 or loop.first %}
+      <ul class="bcl-gallery__grid">
     {% endif %}
-
-    <div class="modal" id="{{ _modal_id }}" tabindex="-1" aria-labelledby="{{ _modal_id }}" aria-hidden="true" data-bs-backdrop="false">
-      <div class="modal-dialog modal-dialog-centered modal-fullscreen">
-        <div class="modal-content">
-          <div class="modal-header border-0 justify-content-between">
-            {% if _title is not empty %}
-              <div class="modal-title">
-                <h3 class="d-none d-sm-block">{{- _title -}}</h3>
-              </div>
-            {% endif %}
-            <div class="carousel-pager">
-              <span>1</span> / {{ _items|length }}
-            </div>
-            <div class="modal-close">
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-          </div>
-          
-          <div class="modal-body d-flex align-items-center justify-content-center">
-            {% for _item in _items %}
-              {% set _carousel_items = _carousel_items|merge([_item|merge({
-                caption: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption,
-                image: ('<iframe' in _item.media or '<img' in _item.media) ? _item.media|replace({'src=': 'data-src='}) : _item.media,
-              })]) %}
-            {% endfor %}
-            {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with {
-              id: _carousel_id,
-              with_controls: true,
-              with_indicators: false,
-              prev_label: _prev_label,
-              next_label: _next_label,
-              autoplay: false,
-              items: _carousel_items,
-            } only %}
-          </div>
-        </div>
-      </div>
+        <li>
+        {% include '@oe-bcl/bcl-gallery/gallery-item.html.twig' with {
+          item: _item,
+          carousel_id: _carousel_id,
+          modal_id: _modal_id,
+          icon_path: _icon_path,
+          loop: loop,
+        } only %}
+        </li>
+    {% if loop.index % 5 == 0 or loop.last %}
+      </ul>
+    {% endif %}  
+  {% if loop.last %}
     </div>
+  {% endif %}
+  {% if loop.index > _max_visible_thumbnails and loop.last %}
+  </div>
+  <div class="bg-lighter py-3 px-4 mt-2 rounded text-center">
+    <a
+      class="bcl-gallery__collapse standalone d-none d-sm-inline-block"
+      aria-controls="{{ _collapse_id }}"
+      data-bs-toggle="collapse"
+      aria-expanded="false"
+      role="button"
+      href="#{{ _collapse_id }}"
+    >
+      <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+      <span class="label-expanded">{{ _toggle_expanded }}</span>
+      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+        name: 'caret-down-fill',
+        size: '2xs',
+        path: _icon_path,
+        attributes: create_attribute().addClass('ms-2-5'),
+      } only %}
+    </a>
+    <a
+      class="bcl-gallery__mobile-view-more standalone d-inline-block d-sm-none"
+      data-bs-target="#{{ _carousel_id }}"
+      data-bs-slide-to="{{ _max_visible_thumbnails - 1 }}"
+      role="button"
+      href="#"
+    >
+      <span data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+        <span class="label-collapsed">{{ _toggle_collapsed|replace({'%d': _items|length}) }}</span>
+        {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+          name: 'caret-down-fill',
+          size: '2xs',
+          path: _icon_path,
+          attributes: create_attribute().addClass('ms-2-5'),
+        } only %}
+      <span>
+    </a>
   </div>
-  
+  {% endif %}
+{% endfor %}
 {% endif %}
+{% include '@oe-bcl/bcl-gallery/gallery-modal.html.twig' with {
+  id: _modal_id,
+  carousel_id: _carousel_id,
+  next_label: _next_label,
+  prev_label: _prev_label,
+  title: _title,
+  items: _items,
+  icon_path: _icon_path
+} only %}
+</div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,12 +1,9 @@
 {% extends '@oe-bcl/bcl-base-templates/listing-page.html.twig' %}
 
 {% block content_row %}
-	<div class="col-lg-4 col-md-6 col-12 mb-5">
-  	{% include '@oe-bcl/bcl-search-form/search-form.html.twig' with search only %}
-  </div>
 		{% include '@oe-bcl/bcl-pagination/pagination.html.twig' with glossary only %}
 	<div class="col-12">
-	  <div class="d-md-flex justify-content-end mb-md-5 align-items-center border-bottom-md border-top-md border-gray-300 py-5">
+	  <div class="d-md-flex justify-content-end mb-md-4-75 align-items-center border-bottom-md border-top-md border-gray-300 py-3">
 	    {% include '@oe-bcl/bcl-select/select.html.twig' with sortBy only %}
 	    {% include '@oe-bcl/bcl-select/select.html.twig' with itemsPerPage only %}
 	  </div>

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - variant (string) (default: 'neutral')
@@ -27,8 +27,8 @@
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
-{% set _modals = modals|default([]) %}
 {% set _light = light|default(false) %}
+{% set _modals = modals|default([]) %}
 
 {% set _site_name_classes = 'bcl-header__site-name' %}
 
@@ -110,4 +110,4 @@
   {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title (string) (default: '')
@@ -37,4 +37,4 @@
 </{{ _title_tag }}>
 {% endif -%}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - name (string) (default: '')
@@ -14,6 +14,7 @@
 {% set _path = path|default('') %}
 {% set _size = size|default('s') %}
 {% set _transformation = transformation|default('') %}
+
 {% set _classes = ['bi', 'icon--' ~ _size] %}
 
 {% if _transformation is not empty %}
@@ -32,4 +33,4 @@
   <use xlink:href="{{ _path ~ "#" ~ _name }}"/>
 </svg>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
 Parameters:
@@ -41,4 +41,4 @@ Parameters:
   } only %}
 </nav>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -65,4 +65,4 @@
   {% endif %}
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - overlay (boolean) (default: false)
@@ -108,4 +108,4 @@
   </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-language-switcher/language-switcher.html.twig

@@ -1,10 +1,10 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - id (string) (default: collapse-{random number 0-1000}) - collapse custom id - optional
   - message (alert object) (default: {})
   - expandable (button object) (default: [])
-  - language (array of link object) (default: [])
+  - languages (array of link object) (default: [])
 #}
 
 {% set _id = id|default('collapse-' ~ random(1000)) %}
@@ -47,4 +47,4 @@
   </div>
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - label (string) (default: '')
@@ -86,4 +86,4 @@
   {%- endif -%}
 </a>
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-links-block/links-block.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title: (string) (default: '')
@@ -73,4 +73,4 @@
   {% endif %}
 </div>
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-list-group/list-group.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - flush (boolean) (default: false)
@@ -117,4 +117,4 @@
 </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,11 +1,11 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - variant: (string) (default: 'horizontal')
+  - variant: (string) (default: 'default-1-col')
     options [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - items: (array of objects of type card)
   - link: (object of type link)
@@ -22,9 +22,9 @@
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('default-1-col') %}
+{% set _link = link|default({}) %}
 {% set _alignment = alignment|default('') %}
 {% set _image_size = image_size|default('') %}
-{% set _link = link|default({}) %}
 
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
 {% set _cards = [] %}
@@ -196,4 +196,4 @@
 {% endif %}
 </div>
 
-{% endspaceless %}
+{% endapply %}