@openeuropa/bcl-theme-joinup 0.25.0 → 0.27.0

package/src/scss/oe-bcl-joinup.scss

@@ -7,6 +7,7 @@
 // Configuration
 @import "@openeuropa/bcl-bootstrap/scss/functions";
 @import "@openeuropa/bcl-bootstrap/scss/variables";
+@import "@openeuropa/bcl-bootstrap/scss/maps";
 
 // Override Bootstrap variables
 @import "@openeuropa/bcl-theme-default/src/scss/base/variables";
@@ -80,7 +81,6 @@
 @import "@openeuropa/bcl-theme-default/src/scss/spinners";
 @import "@openeuropa/bcl-theme-default/src/scss/badge";
 @import "@openeuropa/bcl-theme-default/src/scss/multiselect";
-@import "@openeuropa/bcl-theme-default/src/scss/bcl-offcanvas";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
 @import "@openeuropa/bcl-theme-default/src/scss/timeline";

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

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

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

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

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

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

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

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

package/templates/bcl-base-templates/content-type.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -136,4 +136,4 @@
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-base-templates/sidebar-search.html.twig

@@ -1,7 +1,20 @@
 {% extends "@oe-bcl/bcl-offcanvas/offcanvas.html.twig" %}
 
+{% set responsiveness = 'lg' %}
+{% if extra_classes_header is empty %}
+  {% set extra_classes_header = 'd-lg-block' %}
+{% else %}
+  {% set extra_classes_header = extra_classes_header ~ ' d-lg-block' %}
+{% endif %}
+
 {% block body %}
+  {% if search_form.attributes is empty %}
+    {% set attributes = search_form.create_attribute() %}
+  {% endif %}
+
   <div class="offcanvas-body p-lg-0">
-    {% include '@oe-bcl/bcl-form/form.html.twig' with search_form only %}
+    {% include '@oe-bcl/bcl-form/form.html.twig' with search_form|merge({
+      attributes: search_form.attributes.addClass('w-100')
+    }) only %}
   </div>
 {% endblock %}

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

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

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - links (array of objects of type link) (default: [])
@@ -58,4 +58,4 @@
 </nav>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

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

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

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

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

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

package/templates/bcl-card-layout/card-layout.html.twig

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

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title (string) (default: '')
@@ -6,7 +6,6 @@
   - title_link: (link object) (default: {})
   - title_attributes: (drupal attrs)
   - autoplay (boolean) (default: true)
-  - autoinit (boolean) (default: true)
   - dark (boolean) (default: false)
   - active_item (integer) (default: 1)
   - items (array of objects) format: [
@@ -33,7 +32,6 @@
 {% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _id = id|default('') %}
-{% set _autoinit = autoinit ?? true %}
 {% set _autoplay = autoplay ?? true %}
 {% set _dark = dark|default(false) %}
 {% set _active_item = active_item|default(1) %}
@@ -63,7 +61,7 @@
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}
 
-{% if _autoinit %}
+{% if _autoplay %}
   {% set attributes = attributes.setAttribute('data-bs-ride', 'carousel') %}
 {% endif %}
 
@@ -75,10 +73,6 @@
   {% set attributes = attributes.addClass('rounded-indicators') %}
 {% endif %}
 
-{% if not _autoplay %}
-  {% set attributes = attributes.setAttribute('data-bs-interval', 'false') %}
-{% endif %}
-
 {% set attributes = attributes.addClass(_classes) %}
 
 {%- if _title is not empty -%}
@@ -140,7 +134,7 @@
             <div class="{{ _item.caption_classes }}">
           {% endif %}
           {% if _item.caption_title is not empty %}
-            <h5>{{ _item.caption_title }}</h5>
+            <p class="fs-5">{{ _item.caption_title }}</p>
           {% endif %}
             {{- _item.caption -}}
           {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
@@ -182,4 +176,4 @@
 {% endif %}
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

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

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

@@ -1,8 +1,7 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
-    - "variant" (string) (default: '')
     - "day" (integer) (default: '')
     - "month" (string) (default: '')
     - "date_time" (string) (default: '')
@@ -19,7 +18,6 @@
 {% set _end_day = end_day|default('') %}
 {% set _end_month = end_month|default('') %}
 {% set _end_year = end_year|default('') %}
-{% set _variant = variant|default('') %}
 {% set _css_classes = [
   'bcl-date-block',
   'bg-date',
@@ -62,4 +60,4 @@
   </span>
 </time>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -71,115 +71,117 @@
 <div
   {{ attributes }}
 >
+  <dl>
   {% for _item in _items %}
   {% if loop.last and _variant != 'horizontal' %}
     {% set _item_classes = '' %}
   {% endif %}
   {% if _item.term is not empty %}
-  <dl
-  {% if _item_classes is not empty %}
-    class="{{ _item_classes }}"
-  {% endif %}
-  >
-    {% if _item.term is iterable %}
-    <dt>
-    {% for _term in _item.term %}
-      {%- if _item.term|length > 1 -%}
-      <div
-      {% if _variant == 'horizontal' and _term.icon is not empty %}
-        class="d-flex"
-      {% endif %}
+    <div
+    {% if _item_classes is not empty %}
+      class="{{ _item_classes }}"
+    {% endif %}
+    >
+      {% if _item.term is iterable %}
+      <dt>
+      {% 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 %}
+      {% endfor %}
+      </dt>
+      {% else %}
+      <dt
+        {% if _variant == 'horizontal' and _item.term.icon is not empty %}
+          class="d-flex"
+        {% endif %}
       >
-      {%- endif -%}
-      {%- if _term.icon is not empty -%}
+      {%- 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 _term.icon|merge({
+        {%- 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">{{ _term.label }}</p>
-      {%- elseif _term.color is not empty -%}
+        }) 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 {{ _term.color }}"></span>{{- _term.label -}}
+          <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
         </div>
       {%- else -%}
-        {{- _term.label -}}
+        {{- _item.term.label -}}
       {%- endif -%}
-      {% if _item.term|length > 1 %}
-      </div>
+      </dt>
       {% endif %}
-    {% 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 %}
-  {% endif %}
-  {% if _item.definition is not empty %}
-    {% if _item.definition is iterable %}
-      {% if _variant == 'horizontal' %}
+    {% 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 %}
       >
-      {% 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' %}
+        {%- block definition _item.definition -%}
       </dd>
       {% endif %}
-    {% else %}
-    <dd
-      {% if _bordered %}
-        class="mb-0"
-      {% endif %}
-    >
-      {%- block definition _item.definition -%}
-    </dd>
-    {% endif %}
-  </dl>
+    </div>
   {% endif %}
   {% endfor %}
+  </dl>
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - id (string) (default: 'dropdown-' random(1000))
@@ -127,4 +127,4 @@
 </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

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

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - with_text (boolean) (default: false)
@@ -67,6 +67,15 @@
 
 {% set attributes = attributes.addClass(["rounded", "overflow-hidden"]) %}
 
+{% if _image is not empty %}
+  {% set attributes = attributes.addClass(["d-inline-flex", "flex-wrap"]) %}
+  {% if _content_classes is not empty %}
+    {% set _content_classes = _content_classes ~ ' flex-1 w-min-content' %}
+  {% else %}
+    {% set _content_classes = 'flex-1 w-min-content' %}
+  {% endif %}
+{% endif %}
+
 {% if _with_text %}
 <div class="{{ _wrapper_classes }}">
   <div class="row">
@@ -141,4 +150,4 @@
 </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
   Parameters:
@@ -39,7 +39,7 @@
 {# Internal properties #}
 
 {% set _icon = icon|default({}) %}
-{% set _icon_inline = icon_inline|default(true) %}
+{% set _icon_inline = icon_inline ?? true %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _title_link = title_link|default({}) %}
@@ -221,4 +221,4 @@
   {% endif %}
 </div>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - variant (string) (default: 'neutral')
@@ -86,4 +86,4 @@
   </div>
 </footer>
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - title: (string) (default: '')
@@ -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.html.twig

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {#
 Parameters:
@@ -102,7 +102,7 @@ Parameters:
                     {% 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 %}
-                        <h5>{{ _item.caption_title }}</h5>
+                        <p class="fs-5">{{ _item.caption_title }}</p>
                       {% endif %}
                       {% if _item.caption is not empty %}
                         <div class="bcl-gallery__item-description">
@@ -204,4 +204,4 @@ Parameters:
   
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -1,4 +1,4 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - variant (string) (default: 'neutral')
@@ -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: '')
@@ -32,4 +32,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 %}