@openeuropa/bcl-theme-joinup 0.27.0 → 0.28.0

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

@@ -6,14 +6,12 @@
   - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - bordered (boolean) (default: '')
+  - bordered (boolean) (default: false)
+  - col_classes (string) (default: 'col-3')
   - items (array) (default: []): format: [
       {
-        term (object or array of object) -format: {
-          icon: {} - icon object,
-          label: ''
-        }
-        definition (block or array of string)
+        term (string or array of descriptionListTitle object)
+        definition (string or array of descriptionListDetails object)
       },
       ...
     ]
@@ -28,33 +26,21 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _items = items|default([]) %}
+{% set _col_classes = col_classes|default('col-md-3') %}
 {% set _variant = variant|default('') %}
 
-{% set _classes = ['bcl-description-list'] %}
-
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set _item_classes = '' %}
+{% set _item_classes = ['mb-3'] %}
 
-{% if _variant == 'horizontal' %}
-  {% set _item_classes = 'd-md-grid grid-3-9' %}
-  {% if _bordered %}
-    {% set _item_classes = _item_classes ~ ' mb-2-5 pb-2-5' %}
-  {% else %}
-    {% set _item_classes = _item_classes ~ ' mb-3' %}
-  {% endif %}
-{% else %}
-  {% set _item_classes = 'mb-3' %}
-  {% if _bordered %}
-    {% set _item_classes = 'mb-2-5' %}
-    {% set _item_classes = _item_classes ~ ' pb-2-5' %}
-  {% endif %}
+{% if _bordered %}
+  {% set _item_classes = ['border-bottom', 'pb-2-5', 'mb-2-5'] %}
 {% endif %}
 
-{% if _bordered %}
-  {% set _item_classes = _item_classes ~ ' border-bottom' %}
+{% if _variant == 'horizontal' %}
+  {% set _item_classes = _item_classes|merge(['row']) %}
 {% endif %}
 
 {% if _title is not empty %}
@@ -66,122 +52,71 @@
   } only %}
 {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+{% set attributes = attributes.addClass(['bcl-description-list']) %}
 
+{% if _variant != 'horizontal' %}
+<dl
+  {{ attributes }}
+>
+{% else %}
 <div
   {{ attributes }}
 >
-  <dl>
+{% endif %}
   {% for _item in _items %}
-  {% if loop.last and _variant != 'horizontal' %}
-    {% set _item_classes = '' %}
+  {% if _variant == 'horizontal' %}
+  <dl
+    {{ create_attribute().addClass(_item_classes) }}
+  >
+  {% else %}
+  <div
+    {{ create_attribute().addClass(_item_classes) }}
+  >
   {% endif %}
   {% if _item.term is not empty %}
-    <div
-    {% if _item_classes is not empty %}
-      class="{{ _item_classes }}"
+    {% if _variant == 'horizontal' %}
+    <div class="{{ _col_classes }}">
     {% endif %}
-    >
-      {% if _item.term is iterable %}
-      <dt>
+    {% if _item.term is iterable %}
       {% for _term in _item.term %}
-        {%- if _item.term|length > 1 -%}
-        <div
-        {% if _variant == 'horizontal' and _term.icon is not empty %}
-          class="d-flex"
-        {% endif %}
-        >
-        {%- endif -%}
-        {%- if _term.icon is not empty -%}
-          {% set _icon_classes = ["me-2"] %}
-          {% if _variant == 'horizontal' %}
-            {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
-          {% endif %}
-          {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
-            attributes: create_attribute().addClass(_icon_classes)
-          }) only %}
-          <p class="mb-0 d-inline-block">{{ _term.label }}</p>
-        {%- elseif _term.color is not empty -%}
-          <div class="d-flex align-items-center">
-            <span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
-          </div>
-        {%- else -%}
-          {{- _term.label -}}
-        {%- endif -%}
-        {% if _item.term|length > 1 %}
-        </div>
-        {% endif %}
+        {%- include '@oe-bcl/bcl-description-list/description-list-title.html.twig' with _term only -%}
       {% endfor %}
-      </dt>
-      {% else %}
-      <dt
-        {% if _variant == 'horizontal' and _item.term.icon is not empty %}
-          class="d-flex"
-        {% endif %}
-      >
-      {%- if _item.term.icon is not empty -%}
-        {% set _icon_classes = ["me-2"] %}
-        {% if _variant == 'horizontal' %}
-          {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
-        {% endif %}
-        {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
-          attributes: create_attribute().addClass(_icon_classes)
-        }) only -%}
-        <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
-      {%- elseif _item.term.color is not empty -%}
-        <div class="d-flex align-items-center">
-          <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
-        </div>
-      {%- else -%}
-        {{- _item.term.label -}}
-      {%- endif -%}
-      </dt>
-      {% endif %}
+    {% else %}
+      {%- include '@oe-bcl/bcl-description-list/description-list-title.html.twig' with {
+        label: _item.term
+      } only -%}
     {% endif %}
-    {% if _item.definition is not empty %}
-      {% if _item.definition is iterable %}
-        {% if _variant == 'horizontal' %}
-        <dd
-          {% if _bordered %}
-            class="mb-0"
-          {% endif %}
-        >
-        {% endif %}
-        {% for _definition in _item.definition %}
-          {% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
-            {%- if _definition.button is defined -%}
-              {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
-            {%- elseif _definition.link is defined %}
-              {% include '@oe-bcl/bcl-link/link.html.twig' with _definition.link only -%}
-            {%- else -%}
-              {%- if _definition.icon is defined -%}
-                {%- set _icon_classes = ["me-2"] -%}
-                {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _definition.icon|merge({
-                  attributes: create_attribute().addClass(_icon_classes)
-                }) only -%}
-                <p class="mb-0 d-inline-block">{{ _definition.label }}</p>
-              {%- else -%}
-                {{- _definition.label -}}
-              {%- endif -%}
-            {%- endif -%}
-          {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
-        {% endfor %}
-        {% if _variant == 'horizontal' %}
-        </dd>
-        {% endif %}
-      {% else %}
-      <dd
-        {% if _bordered %}
-          class="mb-0"
-        {% endif %}
-      >
-        {%- block definition _item.definition -%}
-      </dd>
-      {% endif %}
+    {% if _variant == 'horizontal' %}
     </div>
+    {% endif %}
   {% endif %}
-  {% endfor %}
+  {% if _item.definition is not empty %}
+    {% if _variant == 'horizontal' %}
+    <div class="col">
+    {% endif %}
+    {% if _item.definition is iterable %}
+      {% for _definition in _item.definition %}
+        {%- include '@oe-bcl/bcl-description-list/description-list-details.html.twig' with _definition only -%}
+      {% endfor %}
+    {% else %}
+      {%- include '@oe-bcl/bcl-description-list/description-list-details.html.twig' with {
+        label: _item.definition
+      } only -%}
+    {% endif %}
+    {% if _variant == 'horizontal' %}
+    </div>
+    {% endif %}
+  {% endif %}
+  {% if _variant == 'horizontal' %}
   </dl>
+  {% else %}
+  </div>
+  {% endif %}
+  {% endfor %}
+{% if _variant != 'horizontal' %}
+</dl>
+{% else %}
 </div>
+{% endif %}
 
 {% endapply %}

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

@@ -6,7 +6,7 @@
   - title_tag (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
-  - variant (string) (default: '') options:
+  - variant (string) (default: 'default') options:
     [ default, block ]
   - display_icons (boolean) (default: true)
   - items (array) (default: []):
@@ -29,7 +29,6 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _variant = variant|default('default') %}
-{% set _classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
 {% set _items = items|default([]) %}
 {% set _grid_columns = grid_columns|default(1) %}
@@ -38,9 +37,11 @@
 {% set _gutter = gutter|default(4) %}
 {% set _equal_height = equal_height|default(false) %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
-{% set _cols_classes = 'col' %}
 {% set _icon_path = icon_path|default('') %}
 {% set _link_more = link_more|default({}) %}
+
+{% set _cols_classes = 'col' %}
+{% set _classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _wrapper_classes = [] %}
 
 {% set _grid_classes = [
@@ -60,7 +61,7 @@
   {% set _grid_classes = _grid_classes|merge(['mt-3']) %}
 {% endif %}
 {% if _equal_height %}
-  {% set  _cols_classes =  _cols_classes ~ ' h-100' %}
+  {% set _cols_classes = _cols_classes ~ ' h-100' %}
 {% endif %}
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}

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

@@ -1,11 +1,13 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - with_text (boolean) (default: false)
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes: (drupal attrs)
+  - with_text (boolean) (default: false)
+  - alignment: (string) (default: "right")
+    - options ['left', 'right']
   - image: (string) (default: "")
   - poster_image: (string) (default: "")
   - content: (string) (default: "")
@@ -39,22 +41,24 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _with_text = with_text|default(false) %}
-{% set _wrapper_classes = 'bcl-featured-item' %}
-{% set _description = description|default('') %}
-{% set _embedded_media = embedded_media|default('') %}
+{% set _alignment = alignment|default('right') %}
 {% set _image = image|default('') %}
 {% set _poster_image = poster_image|default('') %}
 {% set _content = content|default('') %}
-{% set _alignment = alignment|default('right') %}
+{% set _wrapper_classes = wrapper_classes|default('') %}
 {% set _content_classes = content_classes|default('') %}
+{% set _read_more = read_more|default({}) %}
+{% set _description = description|default('') %}
 {% set _ratio = ratio|default('16x9') %}
 {% set _sources = sources|default([]) %}
 {% set _tracks = tracks|default([]) %}
+{% set _embedded_media = embedded_media|default('') %}
+
+{% set _classes = 'bcl-featured-item' %}
 {% set _col_classes = 'col-12 col-md-6' %}
-{% set _read_more = read_more|default({}) %}
 
-{% if wrapper_classes is defined and wrapper_classes is not empty %}
-  {% set _wrapper_classes = _wrapper_classes ~ ' ' ~ wrapper_classes %}
+{% if _wrapper_classes is not empty %}
+  {% set _classes = _classes ~ ' ' ~ wrapper_classes %}
 {% endif %}
 
 {% if attributes is empty %}
@@ -77,7 +81,7 @@
 {% endif %}
 
 {% if _with_text %}
-<div class="{{ _wrapper_classes }}">
+<div class="{{ _classes }}">
   <div class="row">
 {% endif %}
 
@@ -91,14 +95,14 @@
 {%- endif -%}
 
 {% if _with_text %}
-    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
-      {{- _description|default('') -}}
+  <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
+    {{- _description|default('') -}}
 
-      {% if _read_more is not empty %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
-      {% endif %}
-    </div>
-    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2 mt-4 mt-md-0' : '1' }}">
+    {% if _read_more is not empty %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
+    {% endif %}
+  </div>
+  <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2 mt-4 mt-md-0' : '1' }}">
 {% endif %}
 
 <figure

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

@@ -0,0 +1,93 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: language-dropdown + random(1000))
+  - label (string) (default: '')
+  - icon_path (string) (default: '')
+  - items (string) (default: [])
+    format: [
+      {
+        extension: '',
+        language: '',
+        size: '',
+        download: {}, - link Object
+      },
+    ]
+#}
+
+{% set _id = id|default('language-dropdown' ~ random(1000)) %}
+{% set _label = label|default('') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _items = items|default([]) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bg-lighter', 'py-3', 'px-4', 'border-top']) %}
+
+<div
+  {{ attributes }}>
+  <div class="text-end text-md-center">
+    {% include '@oe-bcl/bcl-link/link.html.twig' with _label|merge({
+      path: '#' ~ _id,
+      attributes: create_attribute()
+                  .addClass(['standalone'])
+                  .setAttribute('aria-controls', _id)
+                  .setAttribute('data-bs-toggle', 'collapse')
+                  .setAttribute('aria-expanded', 'false')
+                  .setAttribute('role', 'button'),
+    }) only %}
+  </div>
+  {% if _items is not empty and _items is iterable %}
+  <div class="collapse" id="{{ _id }}">
+    {% for _item in _items %}
+      {% set _item_classes = loop.last ? 'pt-3' : 'py-3 border-bottom' %}
+      <div class="{{ _item_classes }}">
+      {% if _item.type == 'content' %}
+        {{ _item.content }}
+      {% else %}
+        <div class="row">
+          <div class="col-12 col-md-9">
+            {% if _item.title is not empty %}
+              <p class="fw-bold m-0">{{ _item.title }}</p>
+            {% endif %}
+            {% if _item.description is not empty %}
+              <p class="m-0">{{ _item.description }}</p>
+            {% endif %}
+            {% if _item.language is not empty or _item.meta is not empty %}
+            <small class="fw-bold m-0">
+              {%- if _item.language is not empty -%}
+                {{- _item.language -}}
+              {%- endif -%}
+              {%- if _item.meta is not empty -%}
+                <span class="fw-normal">
+                  {{- ' ' ~ _item.meta -}}
+                </span>
+              {%- endif -%}
+            </small>
+            {% endif %}
+          </div>
+          <div class="col-12 col-md-3 align-self-end text-md-end">
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item.download|merge({
+            icon_position: "after",
+            icon: {
+              name: "download",
+              size: "fluid",
+              path: _icon_path,
+            },
+            attributes: create_attribute()
+                        .setAttribute('download', true)
+                        .setAttribute('target', '_blank')
+                        .addClass(['d-block', 'standalone', 'mt-1'])
+          }) only %}
+          </div>
+        </div>
+      {% endif %}
+      </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+
+{% endapply %}

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

@@ -38,13 +38,13 @@
 
 {# Internal properties #}
 
-{% set _icon = icon|default({}) %}
-{% set _icon_inline = icon_inline ?? true %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _item_title = item_title|default('') %}
+{% set _icon = icon|default({}) %}
+{% set _icon_inline = icon_inline ?? true %}
 {% set _text = text|default('') %}
 {% set _content = content|default('') %}
 {% set _image = image|default({}) %}
@@ -54,7 +54,7 @@
 {% set _variant = variant|default('default') %}
 {% set _download = download|default({}) %}
 {% set _translation = translation|default({}) %}
-{% set _icon_path = icon_path|default({}) %}
+{% set _icon_path = icon_path|default('') %}
 
 {% set _classes = ['bcl-file'] %}
 
@@ -110,7 +110,7 @@
     </div>
   {% endif %}
   <div class="px-3-5 py-3">
-    <div class="d-flex">
+    <div class="d-md-flex">
       {% if _icon is not empty and _variant == 'default' %}
         <div class="pe-2 pb-2">
         {% if _icon is not empty %}
@@ -155,69 +155,9 @@
     </div>
   </div>
   {% if _translation is not empty %}
-  <div class="bg-lighter py-3 px-4 border-top">
-    {% set _id = _translation.id|default('language-dropdown' ~ random(1000)) %}
-    <div class="text-end text-md-center">
-      {% include '@oe-bcl/bcl-link/link.html.twig' with _translation.label|merge({
-        path: '#' ~ _id,
-        attributes: create_attribute()
-                    .addClass(['standalone'])
-                    .setAttribute('aria-controls', _id)
-                    .setAttribute('data-bs-toggle', 'collapse')
-                    .setAttribute('aria-expanded', 'false')
-                    .setAttribute('role', 'button'),
-      }) only %}
-    </div>
-    {% if _translation.items is not empty and _translation.items is iterable %}
-    <div class="collapse" id="{{ _id }}">
-      {% for _item in _translation.items %}
-        {% set _item_classes = loop.last ? 'pt-3' : 'py-3 border-bottom' %}
-        <div class="{{ _item_classes }}">
-        {% if _item.type == 'content' %}
-          {{ _item.content }}
-        {% else %}
-          <div class="row">
-            <div class="col-12 col-md-9">
-              {% if _item.title is not empty %}
-                <p class="fw-bold m-0">{{ _item.title }}</p>
-              {% endif %}
-              {% if _item.description is not empty %}
-                <p class="m-0">{{ _item.description }}</p>
-              {% endif %}
-              {% if _item.language is not empty or _item.meta is not empty %}
-              <small class="fw-bold m-0">
-                {%- if _item.language is not empty -%}
-                  {{- _item.language -}}
-                {%- endif -%}
-                {%- if _item.meta is not empty -%}
-                  <span class="fw-normal">
-                    {{- ' ' ~ _item.meta -}}
-                  </span>
-                {%- endif -%}
-              </small>
-              {% endif %}
-            </div>
-            <div class="col-12 col-md-3 align-self-end text-md-end">
-            {% include '@oe-bcl/bcl-link/link.html.twig' with _item.download|merge({
-              icon_position: "after",
-              icon: {
-                name: "download",
-                size: "fluid",
-                path: _icon_path,
-              },
-              attributes: create_attribute()
-                          .setAttribute('download', true)
-                          .setAttribute('target', '_blank')
-                          .addClass(['d-block', 'standalone', 'mt-1'])
-            }) only %}
-            </div>
-          </div>
-        {% endif %}
-        </div>
-      {% endfor %}
-    </div>
-    {% endif %}
-  </div>
+    {% include '@oe-bcl/bcl-file/file-translations.html.twig' with _translation|merge({
+      icon_path: _icon_path
+    }) only %}
   {% endif %}
 </div>
 

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

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

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