@openeuropa/bcl-twig-templates 0.28.0 → 1.0.0

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

@@ -15,13 +15,13 @@
     path: '',
     alt: '',
   }
-  - badges (array of badges Object) (default: [])
+  - badges (badge[]) (default: [])
   - meta (string) (default: '')
   - language (string) (default: '')
   - variant (string) (default: 'default')
     - options: ['default', 'card']
   - download (link Object) (default: {})
-  - translation (object) (default: {}) format: {
+  - translation (file translation Object) (default: {}) format: {
     id: '',
     label: {}, - link Object
     items: [

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

@@ -2,7 +2,8 @@
 
 {# Parameters:
   - variant (string) (default: 'neutral')
-  - rows (default: []) - Array of predefined objects - format: 
+    - options: ['eu', 'ec', 'neutral']
+  - rows (object[]) (default: []) - format: 
   [
     {
       extra_classes: ""
@@ -13,7 +14,7 @@
             {
               type: "links" or "content" or "image",
               -- for type "links" --
-                links: Array of links object,
+                links: (link[]),
 
               -- for type "image" --
                 path: "",

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

@@ -7,7 +7,7 @@
   - title_attributes (drupal attrs)
   - helper_text (string) (default: '')
   - antispam (string) (default: '')
-  - items (array of array of objects) (default: []) format: [
+  - items (object[ object[] ]) (default: []) format: [
    [
     {
       ...object of type form-Input
@@ -20,7 +20,7 @@
       legend_classes: (string) (default: ''),
    },
   ],
-  - submit (object) (default: {}) Button or Array of button
+  - submit (object) (default: {}) button or button[]
   - attributes (drupal attrs)
 #}
 

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

@@ -31,26 +31,26 @@
 {% set _id = id|default('') %}
 {% set _input_type = input_type|default('text') %}
 {% set _label = label|default('') %}
-{% set _required = required|default(false) %}
-{% set _checked = checked|default(false) %}
-{% set _hidden_label = hidden_label|default(false) %}
-{% set _disabled = disabled|default(false) %}
-{% set _readonly = readonly|default(false) %}
-{% set _invalid = invalid|default(false) %}
-{% set _valid = valid|default(false) %}
+{% set _required = required ?? false %}
+{% set _checked = checked ?? false %}
+{% set _hidden_label = hidden_label ?? false %}
+{% set _disabled = disabled ?? false %}
+{% set _readonly = readonly ?? false %}
+{% set _invalid = invalid ?? false %}
+{% set _valid = valid ?? false %}
 {% set _invalid_feedback = invalid_feedback|default('') %}
 {% set _valid_feedback = valid_feedback|default('') %}
-{% set _floating = floating|default(false) %}
+{% set _floating = floating ?? false %}
 {% set _helper_text = helper_text|default('') %}
 {% set _helper_text_id = helper_text_id|default('') %}
 {% set _placeholder = placeholder|default('') %}
-{% set _horizontal = horizontal|default(false) %}
+{% set _horizontal = horizontal ?? false %}
 {% set _horizontal_class = horizontal_class|default('col-sm-10') %}
 {% set _horizontal_label_class = horizontal_label_class|default('col-sm-2') %}
-{% set _switch = switch|default(false) %}
-{% set _toggle = toggle|default(false) %}
+{% set _switch = switch ?? false %}
+{% set _toggle = toggle ?? false %}
 {% set _toggle_variant = toggle_variant|default('primary') %}
-{% set _remove_wrapper = remove_wrapper|default(false) %}
+{% set _remove_wrapper = remove_wrapper ?? false %}
 
 {% set _label_block = false %}
 {% set _label_class = 'form-label' %}

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

@@ -2,17 +2,17 @@
 
 {#
 Parameters:
-  - item (object) (default: '')
+  - item (object) (default: {})
     format: {
-      thumbnails (string) img path
+      thumbnail (string) img path
       media: (string) <img> tag
       caption (string)
       caption_title (string)
-      caption_classes (string)
-      interval (integer) (default: 0)
+      is_playable (boolean)
     }
   - carousel_id (string) (default: '')
   - modal_id (string) (default: '')
+  - carousel_anchor (string) (default: '')
   - icon_path (string) (default: '')
   - attributes (drupal attrs)
 #}
@@ -21,6 +21,7 @@ Parameters:
 {% set _carousel_id = carousel_id|default('') %}
 {% set _modal_id = modal_id|default('') %}
 {% set _icon_path = icon_path|default('') %}
+{% set _carousel_anchor = carousel_anchor|default('') %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -28,14 +29,14 @@ Parameters:
 
 {% 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)
+                              .setAttribute('data-bs-slide-to', _carousel_anchor)
 %}
 
 <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 %}
+  {% if _item.is_playable %}
     <span class="bcl-gallery__item-play-icon">
     {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
       name: 'play-fill',

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

@@ -2,7 +2,7 @@
 
 {#
 Parameters:
-  - id (string) (default: '')
+  - id (string) (default: gallery-random(1000))
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
   - title_link: (link object) (default: {})
@@ -13,18 +13,19 @@ Parameters:
   - next_label (string) (default: 'Next')
   - prev_label (string) (default: 'Previous')
   - max_visible_thumbnails (int) (default: 5)
-  - items (array of objects) format: [
+  - items (object[]) format: [
       {
-        thumbnails (string) img path
+        thumbnail (string) img path
         media: (string) <img> tag
         caption (string)
         caption_title (string)
-        caption_classes (string)
-        interval (integer) (default: 0)
       }
     ]
   - icon_path (string) (default: '')
   - attributes (drupal attrs)
+
+  Blocks:
+    carousel
 #}
 
 {% set _id = id|default('gallery-' ~ random(1000)) %}
@@ -43,7 +44,7 @@ Parameters:
 {% set _carousel_id = "carousel" ~ _id|capitalize %}
 {% set _modal_id = "modal" ~ _id|capitalize %}
 {% set _collapse_id = "collapse" ~ _id|capitalize %}
-{% set _max_visible_thumbnails = _max_visible_thumbnails + 1 %}
+{% set _carousel_items = [] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -51,10 +52,11 @@ Parameters:
 
 {% set attributes = attributes.addClass('bcl-gallery') %}
 
+{% if _items is not empty and _items is iterable %}
 <div
   {{ attributes }}
 >
-{% if _title is not empty or _counter is not empty %}
+  {% 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">
@@ -72,83 +74,122 @@ Parameters:
     </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">
+  <div class="bcl-gallery__thumbnails">
+  {% for _batch in _items|batch(_max_visible_thumbnails) %}
+    {% if loop.index0 == 1 %}
+      <div class="bcl-gallery__thumbnails-collaspe collapse" id="{{ _collapse_id }}">
     {% endif %}
-        <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 class="bcl-gallery__grid">
+        {% for _item in _batch %}
+          <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,
+            carousel_anchor: loop.index0 + (_max_visible_thumbnails * loop.parent.loop.index0),
+          } only %}
+          </li>
+        {% endfor %}
       </ul>
-    {% endif %}  
-  {% if loop.last %}
-    </div>
-  {% endif %}
-  {% if loop.index > _max_visible_thumbnails and loop.last %}
+    {% if loop.last and loop.index0 >= 1 %}
+      </div>
+    {% endif %}
+  {% endfor %}
+    {% if _items|length > _max_visible_thumbnails %}
+      <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 %}
   </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 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">
+            {% if _title is not empty %}
+              {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+                title: _title,
+                title_tag: 'h3',
+                attributes: create_attribute().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">
+        {% block carousel %}
+          {% for _item in _items %}
+            {% set _carousel_items = _carousel_items|merge([_item|merge({
+              caption_title: ('<iframe' in _item.media or '<video' in _item.media) ? '' : _item.caption_title,
+              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 %}
+        {% endblock %}
+        </div>
+      </div>
+    </div>
   </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>
+{% endif %}
 
 {% endapply %}

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

@@ -2,6 +2,7 @@
 
 {# Parameters:
   - variant (string) (default: 'neutral')
+    - options: ['ec', 'eu', 'neutral']
   - navbar (Navbar object) (default: {})
   - project_logo (object) (default: {})
     format: {
@@ -14,8 +15,8 @@
   - head (Navbar object) (default: {})
   - breadcrumbs (Breadcrumbs object) (default: {})
   - language_modal (object) (default: {})
-  - modals (Array of modal objects) (default: [])
   - light (boolean) (default: false)
+  - modals (modal[]) (default: [])
   - attributes (drupal attrs)
 #}
 
@@ -27,7 +28,7 @@
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _language_modal = language_modal|default({}) %}
-{% set _light = light|default(false) %}
+{% set _light = light ?? false %}
 {% set _modals = modals|default([]) %}
 
 {% set _site_name_classes = 'bcl-header__site-name' %}

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

@@ -3,11 +3,11 @@
 {#
 Parameters:
   - title: (string) (default: '')
-  - title_tag: (string) (default: 'h3')
+  - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - links: (array of link objects) (default: [])
-  - id (string) (default: 'bcl-inpage-navigation-' random(10))
+  - links: (link[]) (default: [])
+  - id (string) (default: bcl-inpage-navigation-random(10))
   - attributes (drupal attrs)
 #}
 
@@ -16,9 +16,7 @@ Parameters:
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _links = links|default([]) %}
-{% set _content = content|default('') %}
 {% set _id = id|default('bcl-inpage-navigation-' ~ random(10)) %}
-{% set _full_layout = full_layout|default(false) %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}

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

@@ -26,8 +26,8 @@
   - close_label (string) (default: '')
 #}
 
-{% set _overlay = overlay|default(false) %}
-{% set _inside_container = inside_container|default(false) %}
+{% set _overlay = overlay ?? false %}
+{% set _inside_container = inside_container ?? false %}
 {% set _variant = variant|default('neutral') %}
 {% set _title = title|default('') %}
 {% set _logo = logo|default({}) %}

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

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

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

@@ -19,11 +19,11 @@
 {% set _path = path|default('#') %}
 {% set _variant = variant|default('') %}
 {% set _id = id|default('') %}
-{% set _disabled = disabled|default(false) %}
-{% set _standalone = standalone|default(false) %}
+{% set _disabled = disabled ?? false %}
+{% set _standalone = standalone ?? false %}
 {% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
-{% set _remove_icon_spacers = remove_icon_spacers|default(false) %}
+{% set _remove_icon_spacers = remove_icon_spacers ?? false %}
 
 {% set _classes = [] %}
 

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

@@ -9,7 +9,7 @@
     - options ['gray', 'transparent']
   - variant: (string) (default: 'vertical')
     - options ['vertical', 'horizontal']
-  - links (array of link objects) (default: [])
+  - links (link[]) (default: [])
   - attributes (drupal attrs)
 #}
 

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

@@ -7,12 +7,12 @@
   - id (string) (default: '')
   - type (string) (default: 'unordered')
     - options ['unordered', 'ordered', 'actionable']
-  - items (array of objects: list item object or Button and Link component object if type actionable)
+  - items (badge or link or button [])
       format: [
       {
         - html (string)
         - variant (string)
-        - badge (predefined object Badge component)
+        ...badge
       }
       {
         ...Link
@@ -27,7 +27,7 @@
   - attributes (drupal attrs)
 #}
 
-{% set _flush = flush|default(false) %}
+{% set _flush = flush ?? false %}
 {% set _horizontal = horizontal|default('') %}
 {% set _id = id|default('') %}
 {% set _type = type|default('unordered') %}

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

@@ -5,9 +5,9 @@
   - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
+  - items: (card[])
   - 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)
   - alignment: (string) (default: '')
     options ['start', 'end', 'center', 'baseline', 'stretch']

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

@@ -3,7 +3,7 @@
 {# Parameters:
   - size (string) default('')
     options: sm, lg, xl, fullscreen
-  - id (boolean) (default: 'modal-' ~ random(1000))
+  - id (boolean) (default: modal-random(1000))
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
@@ -25,9 +25,9 @@
 {% set _size =  size|default('') %}
 {% set _id = id|default('modal-' ~ random(1000)) %}
 {% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
-{% set _static_backdrop = static_backdrop|default(false) %}
-{% set _verticaly_centered = verticaly_centered|default(false) %}
-{% set _scrollable = scrollable|default(false) %}
+{% set _static_backdrop = static_backdrop ?? false %}
+{% set _verticaly_centered = verticaly_centered ?? false %}
+{% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
 {% set _messages = messages|default('') %}
 {% set _body = body|default('') %}

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

@@ -33,7 +33,7 @@
 {% set _form = form|default({}) %}
 {% set _expand = expand|default('lg') %}
 {% set _color_set = color_set|default('light') %}
-{% set _disable_collapse = disable_collapse|default(false) %}
+{% set _disable_collapse = disable_collapse ?? false %}
 
 {% set _classes = ['navbar', 'navbar-expand-' ~ _expand] %}
 {% if _background is not empty %}

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

@@ -12,14 +12,14 @@
   - tabs_content (boolean) (default: false)
   - nav (boolean) (default: false)
   - navbar (boolean) (default: false)
-  - items (array of objects)
+  - items (object[])
     format: [
       {
-        - Link or Button object component
+        - link or button
         - active (boolean)
         - button (boolean) - set to button
         - content (string) - content for tab
-        - navigation (navigation Object) - set for multiple level or navigation, items inside is required
+        - navigation (navigation Object)
       }
     ]
   - attributes (drupal attrs)
@@ -31,14 +31,14 @@
   {% import _self as navigation %}
 
   {% set _id = id|default('') %}
-  {% set _pills = pills|default(false) %}
-  {% set _tabs = tabs|default(false) %}
-  {% set _vertical = vertical|default(false) %}
-  {% set _full_width = full_width|default(false) %}
+  {% set _pills = pills ?? false %}
+  {% set _tabs = tabs ?? false %}
+  {% set _vertical = vertical ?? false %}
+  {% set _full_width = full_width ?? false %}
   {% set _alignment = alignment|default('') %}
-  {% set _tabs_content = tabs_content|default(false) %}
-  {% set _nav = nav|default(false) %}
-  {% set _navbar = navbar|default(false) %}
+  {% set _tabs_content = tabs_content ?? false %}
+  {% set _nav = nav ?? false %}
+  {% set _navbar = navbar ?? false %}
   {% set _items = items|default([]) %}
 
   {% if _navbar %}

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

@@ -2,7 +2,7 @@
 
 {# Parameters:
   - title: (string) (default: '')
-  - title_tag: (string) (default: 'h3')
+  - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
   - placement (string) (default: '') (start, end, top, bottom)
@@ -27,7 +27,7 @@
 {% set _placement = placement|default('') %}
 {% set _id = id|default('') %}
 {% set _body = body|default('') %}
-{% set _with_body_scroll = with_body_scroll|default(false) %}
+{% set _with_body_scroll = with_body_scroll ?? false %}
 {% set _with_backdrop = with_backdrop ?? true %}
 {% set _with_close = with_close ?? true %}
 {% set _close_aria_label = close_aria_label|default('') %}