@openeuropa/bcl-theme-default 0.21.0 → 0.23.1

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

@@ -2,29 +2,37 @@
 
 {#
   Parameters:
-    - "background" (string) (default: 'white')
+    - background: (string) (default: 'white')
       options: [ white, gray ]
-    - "title" (object)
-    - "image" (object)
-    - "image_size" (string) 
+    - title: (string) (default: '')
+    - title_tag: (string) (default: 'h5')
+    - title_link: (link object) (default: {})
+    - title_attributes: (drupal attrs)
+    - image (object)
+    - image_size: (string)
+    - date: (object)
       options: ['sm', 'md', 'lg']
-    - "content" (string)
-    - "badges" (array of objects of type badge)
-    - "links" (array of objects of type link)
-    - "action_button" (object of type button) (default: {})
-    - "service_buttons" (array of objects of type button) (default: [])
-    - "attributes" (drupal attrs)
+    - content: (string)
+    - badges: (array of objects of type badge)
+    - links: (array of objects of type link)
+    - attributes: (drupal attrs)
+
+  Blocks
+    - "action_bar" (string)
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _background = background|default('white') %}
-{% set _action_button = action_button|default({}) %}
-{% set _service_buttons = service_buttons|default([]) %}
+{% set _action_bar = action_bar|default('') %}
 {% set _image = image|default({}) %}
+{% set _date = date|default({}) %}
 {% set _image_size = image_size|default('md') %}
 
 {% set _css_classes = [
   'bcl-content-banner',
-  'pt-lg-4-75',
 ] %}
 
 {% if _background != 'white' %}
@@ -32,10 +40,12 @@
     'pb-md-4-75',
     'pb-4',
     'pt-4',
+    'pt-md-4-75',
   ]) %}
 {% else %}
   {% set _css_classes = _css_classes|merge([
-    'pt-3'
+    'pt-4',
+    'pt-md-4-75',
   ]) %}
 {% endif %}
 
@@ -64,6 +74,10 @@
     {% set _left_col_classes = 'col-6 col-md-4 col-lg-2 offset-3 offset-md-0' %}
   {% endif %}
 {% endif %}
+{% if _date is not empty %}
+  {% set _left_col_classes = 'col-8 col-md-3 col-lg-2 offset-4 offset-md-0' %}
+  {% set _right_col_classes = 'col-md-9 col-lg-10 col-xxl-8' %}
+{% endif %}
 
 {% set _horizontal_classes = {
   left_col_classes: _left_col_classes,
@@ -71,10 +85,10 @@
 } %}
 
 {% set _card = {
-  title: title|default({})|merge({
-    tag: 'h2',
-    attributes: create_attribute().addClass(['fw-bold']),
-  }),
+  title: _title,
+  title_tag: _title_tag,
+  title_link: _title_link,
+  title_attributes: _title_attributes.addClass('mb-0'),
   horizontal: true,
   horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
@@ -92,20 +106,9 @@
   <div class="container">
   {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
 
-  {% if _service_buttons is not empty or _action_button is not empty %}
-    <div class="d-flex justify-content-end mt-2 align-items-center">
-    {% if _service_buttons is not empty %}
-      {% for _button in _service_buttons %}
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
-      {% endfor %}
-    {% endif %}
-    {% if _action_button is not empty %}
-      <div class="d-grid d-md-block ms-3">
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
-      </div>
-    {% endif %}
-    </div>
-  {% endif %}
+    {%- block action_bar -%}
+      {{ _action_bar }}
+    {%- endblock -%}
   </div>
 </div>
 

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

@@ -4,24 +4,26 @@
   Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
-  - "items" (array) (default: []): format: [
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - items (array) (default: []): format: [
       {
-        "term" (object or array of object) -format: {
+        term (object or array of object) -format: {
           icon: {} - icon object,
           label: ""
         }
-        "definition" (block or array of string)
+        definition (block or array of string)
       },
       ...
     ]
-  - "variant" (string) (default: '') 
+  - variant (string) (default: '') 
     - option: ["horizontal"]
 #}
 
-{# Parameters #}
-
 {% 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 _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
@@ -34,10 +36,12 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 <dl

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

@@ -7,7 +7,7 @@
 {% block content %}
   {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
 
-  <h3 id="item-1" class="fw-bold my-4">Description</h3>
+  <h2 id="item-1" class="my-4">Description</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
   posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
@@ -18,7 +18,7 @@
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet.
   </p>
 
-  <h3 id="item-2" class="fw-bold my-4">Related documents</h3>
+  <h2 id="item-2" class="my-4">Related documents</h2>
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
 {% endblock %}

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

@@ -2,30 +2,32 @@
 
 {#
   Parameters:
-  - "title" (string) (default: '')
-  - "title_tag" (string) (default: 'h2')
-  - "variant" (string) (default: '') options:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - variant (string) (default: '') options:
     [ default, block ]
-  - "display_icons" (boolean) (default: true)
-  - "items" (array) (default: []):
-    - "icon" (associate array) (default: { size: 'm' })
-    - "subtitle" (string) (default: '')
-    - "title" (string) (default: '')
-    - "description" (string) (default:'')
-  - "grid_columns" (int) (default: 1)
-  - "responsiveness" (string) (default: 'md')
-  - "responsive_columns" (integer) (default: 3)
-  - "gutter" (int) (default: 4)
-  - "equal_height" (boolean) (default: false)
-  - "cols_extra_classes" (string) (default: '')
-  - "icon_path" (string) (default: '')
-  - "link_more" (object of type link) (default {})
+  - display_icons (boolean) (default: true)
+  - items (array) (default: []):
+    - icon (associate array) (default: { size: 'm' })
+    - subtitle (string) (default: '')
+    - title (string) (default: '')
+    - description (string) (default:'')
+  - grid_columns (int) (default: 1)
+  - responsiveness (string) (default: 'md')
+  - responsive_columns (integer) (default: 3)
+  - gutter (int) (default: 4)
+  - equal_height (boolean) (default: false)
+  - cols_extra_classes (string) (default: '')
+  - icon_path (string) (default: '')
+  - link_more (object of type link) (default {})
 #}
 
-{# Parameters #}
-
 {% 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 _variant = variant|default('default') %}
 {% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
@@ -68,8 +70,12 @@
 
 <div {{ attributes }}>
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+  {% 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
   {% if _wrapper_classes is not empty %}
@@ -90,14 +96,14 @@
         {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}
       {% endif %}
       {% if _item.title is defined and _item.title is not empty %}
-        <h4 class="text-capitalize fw-bold mt-2">
+        <div class="fs-3 mt-2">
           {{- _item.title -}}
-        </h4>
+        </div>
       {% endif %}
       {% if _item.subtitle is defined and _item.subtitle is not empty %}
-        <h5 class="fw-bold">
+        <div class="fs-5">
           {{- _item.subtitle -}}
-        </h5>
+        </div>
       {% endif %}
       {% if _item.description is defined and _item.description is not empty %}
         <p>

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

@@ -4,6 +4,8 @@
   Parameters:
   - title (string) (default: '')
   - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - item_title (string) (default: '')
   - icon (icon Object) (default: {})
   - text (string) (default: '')
@@ -37,6 +39,8 @@
 {% set _icon = icon|default({}) %}
 {% 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 _text = text|default('') %}
 {% set _content = content|default('') %}
@@ -49,6 +53,12 @@
 {% set _translation = translation|default({}) %}
 {% set _icon_path = icon_path|default({}) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-file']) %}
+
 {% set _container_classes = 'w-100 d-md-flex' %}
 {% if _icon is not empty %}
   {% set _container_classes = _container_classes ~ ' ms-2-5' %}
@@ -57,15 +67,13 @@
   }) %}
 {% endif %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
-
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _variant == 'card' %}
@@ -82,9 +90,7 @@
       right_col_classes: "col-12 col-md-8",
     },
     badges: _badges,
-    title: {
-      content: _item_title,
-    },
+    title: _item_title,
     text: {
       content: _text,
       classes: "mb-2",
@@ -134,7 +140,8 @@
             path: _icon_path,
           },
           attributes: create_attribute()
-                      .setAttribute('download', _download.url)
+                      .setAttribute('download', true)
+                      .setAttribute('target', '_blank')
                       .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
         }) %}
         {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
@@ -168,7 +175,7 @@
               {% if _item.title is not empty %}
                 <p class="fw-bold m-0">{{ _item.title }}</p>
               {% endif %}
-              {% if _item.title is not empty %}
+              {% 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 %}
@@ -193,7 +200,8 @@
                 path: _icon_path,
               },
               attributes: create_attribute()
-                          .setAttribute("download", _item.download.url)
+                          .setAttribute('download', true)
+                          .setAttribute('target', '_blank')
                           .addClass(['d-block', 'standalone', 'mt-1'])
             }) only %}
             </div>

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

@@ -3,6 +3,8 @@
 {# Parameters:
   - title: (string) (default: '')
   - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - helper_text (string) (default: '')
   - antispam (string) (default: '')
   - items (array of array of objects) (default: []) format: [
@@ -26,6 +28,8 @@
 
 {% 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 _helper_text = helper_text|default('') %}
 {% set _items = items|default([]) %}
 {% set _antispam = antispam|default('') %}
@@ -36,10 +40,12 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _helper_text is not empty %}

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

@@ -2,16 +2,18 @@
 
 {#
 Parameters:
-  - "id" (string) (default: '')
-  - "title" (string) (default: '')
-  - "title_tag" (string) (default: 'h2')
-  - "counter" (string) (default: '')
-  - "toggle_collapsed" (string) (default: '')
-  - "toggle_expanded" (string) (default: '')
-  - "previous_label" (string) (default: '')
-  - "next_label" (string) (default: '')
-  - "max_visible_thumbnails" (int) (default: 5)
-  - "items" (array of objects) format: [
+  - id (string) (default: '')
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - counter (string) (default: '')
+  - toggle_collapsed (string) (default: '')
+  - toggle_expanded (string) (default: '')
+  - previous_label (string) (default: '')
+  - next_label (string) (default: '')
+  - max_visible_thumbnails (int) (default: 5)
+  - items (array of objects) format: [
       {
         thumbnails (string) img path
         media: (string) <img> tag
@@ -22,14 +24,14 @@ Parameters:
       }
       ...
     ],
-  - "icon_path" (string) (default: '')
+  - icon_path (string) (default: '')
 #}
 
-{# Internal properties #}
-
 {% set _id = id|default('gallery-' ~ random(1000)) %}
 {% 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 _counter = counter|default('') %}
 {% set _toggle_collapsed = toggle_collapsed|default('') %}
 {% set _toggle_expanded = toggle_expanded|default('') %}
@@ -59,12 +61,14 @@ Parameters:
     {% 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 -%}
-            {% set _title_classes = 'fw-bold mb-3' %}
-            <{{ _title_tag }} class="{{ _title_classes }}">
-              {{- _title -}}
-            </{{ _title_tag }}>
-          {%- endif -%}
+        {% 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 -%}

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

@@ -17,7 +17,7 @@
     {% endif %}
     {% if banner.title is not empty %}
       <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
-        <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+        <h1 class="mb-0 d-inline-block">{{ banner.title }}</h1>
         {% if banner.actions is not empty and banner.actions is iterable %}
         <div class="d-grid d-md-block ms-auto">
           {% for _action in banner.actions %}
@@ -56,10 +56,10 @@
         </div>
       </div>
       <div class="col-md-4">
-        <h4 class="mb-3 pb-2">{{ contact.title }}</h4>
+        <h2 class="mb-3 pb-2">{{ contact.title }}</h2>
         {% if contact.profiles is not empty and contact.profiles is iterable %}
           {% for _profile in contact.profiles %}
-            {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+            {% include '@oe-bcl/bcl-user/user-compact.html.twig' with _profile only %}
           {% endfor %}
         {% endif %}
         {% if contact.more_link is not empty %}
@@ -76,14 +76,14 @@
   {% if recent is not empty and members is not empty %}
   <div class="row mt-3">
     <div class="col-md-8">
-      <h4 class="mb-4 pb-2">{{ recent.title }}</h4>
+      <h2 class="mb-4 pb-2">{{ recent.title }}</h2>
       {% include '@oe-bcl/bcl-recent-activities/recent-activities.html.twig' with recent.block_data only %}
     </div>
     <div class="col-md-4">
-      <h4 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h4>
+      <h2 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h2>
       {% if members.profiles is not empty and members.profiles is iterable %}
         {% for _profile in members.profiles %}
-          {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+          {% include '@oe-bcl/bcl-user/user-compact.html.twig' with _profile only %}
         {% endfor %}
       {% endif %}
       {% if members.more_link is not empty %}
@@ -93,7 +93,7 @@
   </div>
   {% endif %}
   {% if contributions is not empty %}
-    <h4 class="my-4 pt-3 pb-2">{{ contributions.title}}</h4>
+    <h2 class="my-4 pt-3 pb-2">{{ contributions.title}}</h2>
     {% if contributions.listing is not empty %}
       {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
     {% endif %}

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

@@ -4,7 +4,7 @@
 <div class="container mt-4 mt-md-5">
   <div class="col-xxl-11">
     <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
-      <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+      <h1 class="mb-0 d-inline-block">{{ banner.main_title }}</h1>
       {% if banner.actions is not empty and banner.actions is iterable %}
       <div class="d-grid d-md-block ms-auto">
         {% for _action in banner.actions %}

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

@@ -0,0 +1,40 @@
+{% spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{%  endif %}
+
+{% if attributes.class is empty %}
+  {% set attributes = attributes.addClass(['mb-4']) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-heading']) %}
+
+{% if _title_link is not empty and _title is not empty and _title_link.label is empty %}
+  {% set _title_link = _title_link|merge({ label: _title }) %}
+{% endif %}
+
+{% if _title is not empty or _title_link is not empty %}
+<{{ _title_tag }} 
+  {{- attributes -}}
+>
+{%- if _title_link is not empty -%}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with _title_link|merge({ standalone: true }) only %}
+{%- else -%}
+  {{- _title -}}
+{%- endif %}
+</{{ _title_tag }}>
+{% endif -%}
+
+{% endspaceless %}

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

@@ -2,14 +2,19 @@
 
 {#
 Parameters:
-  - "title": (string) (default: '')
-  - "full_layout": (boolean) (default: false)
-  - "links": (array of link objects) (default: [])
-  - "content": (string) (default: '')
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h5')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - full_layout: (boolean) (default: false)
+  - links: (array of link objects) (default: [])
+  - content: (string) (default: '')
 #}
 
-{# Internal properties #}
 {% 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 _links = links|default([]) %}
 {% set _content = content|default('') %}
 {% set _id = id|default('bcl-inpage-navigation-' ~ random(5)) %}
@@ -27,9 +32,12 @@ Parameters:
   <div class="col-md-3 d-none d-md-block">
 {% endif %}
     <nav {{ attributes }}>
-      {% if _title is defined and _title is not empty %}
-        <h5>{{ _title }}</h5>
-      {% endif %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _title,
+        title_tag: _title_tag,
+        title_link: _title_link,
+        attributes: _title_attributes,
+      } only %}
       {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
         'pills': true,
         'vertical': true,

package/templates/bcl-landing-page/landing-page.html.twig

@@ -11,7 +11,7 @@
 <div class="container">
   {% if featured_section is defined %}
     <div class="my-4">
-      <h2 class="mb-4 fw-bold">{{ featured_section.title }}</h2>
+      <h2 class="mb-4">{{ featured_section.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
           {{ featured_section.content }}
@@ -37,7 +37,7 @@
 
   {% if activity_featured is defined %}
     <div class="my-4">
-      <h2 class="mb-4 fw-bold">{{ activity_featured.title }}</h2>
+      <h2 class="mb-4">{{ activity_featured.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
           {{ activity_featured.content }}