@openeuropa/bcl-theme-joinup 0.27.0 → 0.28.0

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

@@ -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>
 
 {% 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

@@ -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' %}
 

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

@@ -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 %}

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

@@ -4,7 +4,7 @@
   - 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)) %}

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

@@ -5,7 +5,7 @@
   - 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 = [] %}

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

@@ -1,7 +1,8 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - size (string) (sm, lg, xl, fullscreen) default('')
+  - size (string) default('')
+    options: sm, lg, xl, fullscreen
   - id (boolean) (default: 'modal-' ~ random(1000))
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl

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

@@ -56,15 +56,15 @@
 {% set _size = size|default('') %}
 {% set _alignment = alignment|default('') %}
 {% set _aria_label = aria_label|default('') %}
+{% set _variant = variant|default('') %}
 {% set _enable_prev_next_icon = enable_prev_next_icon|default(false) %}
 {% set _enable_first_last_icon = enable_first_last_icon ?? true %}
-{% set _items = items|default([]) %}
 {% set _first = first|default({}) %}
-{% set _next = next|default({}) %}
 {% set _prev = prev|default({}) %}
+{% set _next = next|default({}) %}
 {% set _last = last|default({}) %}
-{% set _variant = variant|default('') %}
-{% set _icon_path = icon_path|default({}) %}
+{% set _items = items|default([]) %}
+{% set _icon_path = icon_path|default('') %}
 
 {% set _classes = 'pagination' %}
 {% if _size is not empty %}
@@ -83,6 +83,10 @@
 
 {% set attributes = attributes.setAttribute('role', 'navigation') %}
 
+{% if _variant == 'glossary' %}
+  {% set attributes = attributes.setAttribute('class', 'bcl-glossary') %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', aria_label) %}
 {% endif %}

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

@@ -15,6 +15,7 @@
 {% set _variant = variant|default('') %}
 {% set _size = size|default('') %}
 {% set _animation = animation|default('') %}
+
 {% set _classes = ['placeholder'] %}
 
 {% if _size is not empty %}

package/templates/bcl-project/project-lists.html.twig

@@ -3,7 +3,10 @@
 
 {#
   Parameters:
-  - title (heading object) (default: {})
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - items (array) (default: [])
     {
       title: (heading object),

package/templates/bcl-project-status/project-contributions.html.twig

@@ -2,7 +2,7 @@
 
 {# Parameters:
   - corporate_contributions (string) (default: '') // value every 5 percent
-  - legend (boolean or object (default: false)
+  - legend (description list object) (default: false)
   - chart (boolean) (default: false)
 
   Blocks - 
@@ -11,7 +11,7 @@
 #}
 
 {% set _corporate_contributions = corporate_contributions|default('') %}
-{% set _legend = legend|default(false) %}
+{% set _legend = legend|default({}) %}
 {% set _chart = chart|default(false) %}
 
 {% if attributes is empty %}

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

@@ -22,21 +22,21 @@
 #}
 
 {% set _id = id|default('') %}
+{% set _label = label|default('') %}
+{% set _label_extra_classes = label_extra_classes|default('') %}
+{% set _hidden_label = hidden_label|default(false) %}
+{% set _helper_text = helper_text|default('') %}
+{% set _helper_text_id = helper_text_id|default('') %}
 {% set _disabled = disabled|default(false) %}
-{% set _options = options|default([]) %}
-{% set _aria_label = aria_label|default('') %}
-{% set _required = required|default(false) %}
-{% set _multiple = multiple|default(false) %}
 {% set _invalid = invalid|default(false) %}
 {% set _valid = valid|default(false) %}
 {% set _invalid_feedback = invalid_feedback|default('') %}
 {% set _valid_feedback = valid_feedback|default('') %}
-{% set _helper_text = helper_text|default('') %}
-{% set _helper_text_id = helper_text_id|default('') %}
-{% set _label = label|default('') %}
-{% set _label_extra_classes = label_extra_classes|default('') %}
+{% set _required = required|default(false) %}
+{% set _multiple = multiple|default(false) %}
+{% set _options = options|default([]) %}
+{% set _aria_label = aria_label|default('') %}
 {% set _clean_class = clean_class|default(false) %}
-{% set _hidden_label = hidden_label|default(false) %}
 
 {% set _classes = ['form-select'] %}
 {% set _label_class = 'form-label' %}

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

@@ -1,3 +1,5 @@
+{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}
+
 {# Parameters:
   - form: (form object) (default: {})
   - success_alert: (alert object) (default: {})
@@ -12,8 +14,6 @@
 {% set _success_alert = success_alert|default({}) %}
 {% set _error_alert = error_alert|default({}) %}
 
-{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}
-
 {% block body %}
   {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
 {% endblock %}

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

@@ -7,7 +7,7 @@
   - attributes (drupal attrs)
 #}
 
-{% set _title = title|default(false) %}
+{% set _title = title|default('') %}
 {% set _content = content|default('') %}
 {% set _button = button|default({}) %}
 

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

@@ -7,8 +7,8 @@
   - required (boolean) (default: false)
   - disabled (boolean) (default: false)
   - readonly (boolean) (default: false)
-  - valid (boolean) (default: false)
   - invalid (boolean) (default: false)
+  - valid (boolean) (default: false)
   - invalid_feedback (string) (default: '')
   - valid_feedback (string) (default: '')
   - helper_text (string) (default: '')

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

@@ -0,0 +1,34 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: '')
+  - label (string) (default: '')
+  - title (string) (default: '')
+  - content (string) (default: '')
+#}
+
+{% set _id = id|default('') %}
+{% set _label = label|default('') %}
+{% set _title = title|default('') %}
+{% set _content = content|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _id is not empty %}
+  {% set attributes = attributes.setAttribute('id', _id) %}
+{% endif %}
+
+<li
+  {{ attributes }}>
+  <p class="fs-5 mb-1 fw-medium">{{ _label }}</p>
+  {% if _title is not empty %}
+  <p class="fs-6 mb-1 fw-medium">{{ _title }}</p>
+  {% endif %}
+  {% if _content is not empty %}
+  <div>{{ _content }}</div>
+  {% endif %}
+</li>
+
+{% endapply %}