@openeuropa/bcl-theme-joinup 0.28.1 → 1.0.2

package/templates/bcl-content-banner/content-banner.html.twig

@@ -3,18 +3,33 @@
 {#
   Parameters:
     - title: (string) (default: '')
-    - title_tag: (string) (default: 'h5')
+    - title_tag: (string) (default: 'h1')
     - title_link: (link object) (default: {})
     - title_attributes: (drupal attrs)
     - background: (string) (default: 'white')
       options: [ white, gray ]
-    - image (object)
-    - image_size: (string)
-    - date: (object)
-      options: ['sm', 'md', 'lg', 'xl']
-    - content: (string)
-    - badges: (array of objects of type badge)
-    - links: (array of objects of type link)
+    - image (object) (default: {})
+    - image_size: (string) (default: 'md')
+      options: ['md', 'lg', 'xl']
+    - date: (date block object) (default: {})
+
+    Card inheritance
+      - badges (badge[]) (default: [])
+      - links (link[]) (default: [])
+      - content (string) (default: '')
+      - subtitle (object) (default: {})
+        format: {
+          content: '',
+          tag: '',
+          classes: ''
+        }
+      - text (object) (default: {})
+        format: {
+          content: '',
+          tag: '',
+          classes: ''
+        }
+
     - attributes: (drupal attrs)
 
   Blocks

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

@@ -10,8 +10,8 @@
   - col_classes (string) (default: 'col-3')
   - items (array) (default: []): format: [
       {
-        term (string or array of descriptionListTitle object)
-        definition (string or array of descriptionListDetails object)
+        term (string or description list title [])
+        definition (string or description list details [])
       },
       ...
     ]
@@ -22,11 +22,10 @@
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
-{% set _bordered = bordered|default(false) %}
-{% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
-{% set _items = items|default([]) %}
+{% set _bordered = bordered ?? false %}
 {% set _col_classes = col_classes|default('col-md-3') %}
+{% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
 {% if attributes is empty %}

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

@@ -1,8 +1,8 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - id (string) (default: 'dropdown-' random(1000))
-  - trigger (object of Button or Link component)
+  - id (string) (default: dropdown-random(1000))
+  - trigger (link or button)
   - link (boolean) (default: false)
   - direction (string) (default: '')
     - options ['dropup', 'dropend', 'dropstart']
@@ -23,10 +23,10 @@
     ]
   - dark (boolean) (default: false)
   - remove_wrapper (boolean) (default: false)
-  - items (array of objects)
+  - items (object[])
     format: [
       {
-        - Link or Button object component
+        - link or button object
         - active (boolean)
         - divider (bolean) - show divider
         - button (boolean) - set to button
@@ -37,11 +37,11 @@
 
 {% set _id = id|default('dropdown-' ~ random(1000)) %}
 {% set _trigger = trigger|default({}) %}
-{% set _link = link|default(false) %}
+{% set _link = link ?? false %}
 {% set _direction = direction|default('') %}
 {% set _alignment = alignment|default('') %}
-{% set _dark = dark|default(false) %}
-{% set _remove_wrapper = remove_wrapper|default(false) %}
+{% set _dark = dark ?? false %}
+{% set _remove_wrapper = remove_wrapper ?? false %}
 {% set _items = items|default([]) %}
 
 {% set _class = 'dropdown' %}

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -6,8 +6,8 @@
   - title_tag (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - variant (string) (default: 'default') options:
-    [ default, block ]
+  - variant (string) (default: 'default')
+      options:  default, block ]
   - display_icons (boolean) (default: true)
   - items (array) (default: []):
     - icon (associate array) (default: { size: 'm' })
@@ -35,7 +35,7 @@
 {% set _responsiveness = responsiveness|default('md') %}
 {% set _responsive_columns = responsive_columns|default(3) %}
 {% set _gutter = gutter|default(4) %}
-{% set _equal_height = equal_height|default(false) %}
+{% set _equal_height = equal_height ?? false %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
 {% set _icon_path = icon_path|default('') %}
 {% set _link_more = link_more|default({}) %}

package/templates/bcl-featured-media/featured-media.html.twig

@@ -6,29 +6,29 @@
   - title_link: (link object) (default: {})
   - title_attributes: (drupal attrs)
   - with_text (boolean) (default: false)
-  - alignment: (string) (default: "right")
+  - alignment: (string) (default: 'right')
     - options ['left', 'right']
-  - image: (string) (default: "")
-  - poster_image: (string) (default: "")
-  - content: (string) (default: "")
+  - image: (string) (default: '')
+  - poster_image: (string) (default: '')
+  - content: (string) (default: '')
   - wrapper_classes: (default: '')
-  - content_classes: (string) (default: "")
+  - content_classes: (string) (default: '')
   - read_more (object) (default: {})
   - description (string) (default: '')
-  - ratio: (string) (default: "16x9")
-    - options ["1x1", "4x3", "16x9", "21x9"]
-  - sources: (array of sources) (default: []) format: [
+  - ratio: (string) (default: '16x9')
+    - options ['1x1', '4x3', '16x9', '21x9']
+  - sources: (object[]) (default: []) format: [
     {
-      type: "",
-      src: ""
+      type: '',
+      src: ''
     }
   ]
-  - tracks: (array of tracks) (default: []) format: [
+  - tracks: (object[]) (default: []) format: [
     {
-      kind: "",
-      label: "",
-      src: "",
-      src_lang: ""
+      kind: '',
+      label: '',
+      src: '',
+      src_lang: ''
     }
   ]
 
@@ -40,7 +40,7 @@
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
-{% set _with_text = with_text|default(false) %}
+{% set _with_text = with_text ?? false %}
 {% set _alignment = alignment|default('right') %}
 {% set _image = image|default('') %}
 {% set _poster_image = poster_image|default('') %}

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

@@ -1,7 +1,7 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - id (string) (default: language-dropdown + random(1000))
+  - id (string) (default: language-dropdown-random(1000))
   - label (string) (default: '')
   - icon_path (string) (default: '')
   - items (string) (default: [])

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({}) %}