@openeuropa/bcl-theme-default 0.20.0 → 0.23.0

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

@@ -1,12 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - title (object) (default: {}) format: {
-      label (string)
-      id (string) (default: '')
-      heading (string) (1, 2, 3, 4, 5, 6)
-      extra_classes(string) (default: '')
-    }
+  - title: (string) (default: "")
+  - title_tag: (string) (default: "h3")
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - placement (string) (default: '') (start, end, top, bottom)
   - id (string) (default: '')
   - body (string) (default: '')
@@ -18,7 +16,10 @@
   - extra_classes_close (string) (default: '')
 #}
 
-{% set _title = title|default({}) %}
+{% 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 _body = body|default('') %}
 {% set _with_close = with_close ?? true %}
 {% set _with_backdrop = with_backdrop ?? true %}
@@ -66,19 +67,15 @@
 <div
   {{ attributes }}
 >
-{% if _with_close or
-  (_title.label is defined and _title.label is not empty)
-%}
+{% if _with_close or _title is not empty %}
   <div class="{{ _class_header }}">
-  {% if _title.label is defined and _title.label is not empty %}
-    <h{{ _title.heading|default(5) }}
-      class="{{ 'offcanvas-title' ~ (_title.extra_classes ? ' ' ~ _title.extra_classes : '') }}"
-    {% if _title.id is defined and _title.id is not empty %}
-      id="{{ _title.id }}"
-    {% endif %}
-    >
-      {{- _title.label -}}
-    </h{{ _title.heading|default(5) }}>
+  {% 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.addClass(['offcanvas-title']),
+    } only %}
   {% endif %}
   {% if _with_close %}
     {% set button_attributes = create_attribute()

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

@@ -11,7 +11,7 @@
   Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
   sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
   </p>
-  <h3 id="item-1" class="fw-bold my-4">Section 1</h3>
+  <h2 id="item-1" class="my-4">Section 1</h2>
   {% if featured_item %}
     {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_item only %}
   {% endif %}
@@ -24,7 +24,7 @@
     {% include '@oe-bcl/bcl-listing/listing.html.twig' with listing only %}
   {% endif %}
 
-  <h3 id="item-2" class="fw-bold my-4">Section 2</h3>
+  <h2 id="item-2" class="my-4">Section 2</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,
@@ -50,7 +50,7 @@
   sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
   </p>
 
-  <h3 id="item-3" class="fw-bold my-4">Section 3</h3>
+  <h2 id="item-3" class="my-4">Section 3</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,

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

@@ -6,7 +6,16 @@
   - alignment (string) (default: '')
     - options ["end", "center"]
   - aria_label (string) (default: '')
-  - enable_icon (boolean) (default: false)
+  - enable_prev_next_icon (boolean) (default: false)
+  - enable_first_last_icon (boolean) (default: true)
+  - first (object)
+    format: {
+      - path (string)
+      - label (string)
+      - disabled (boolean)
+      - aria_label (string)
+      - icon (Icon component)
+    }
   - prev (object)
     format: {
       - path (string)
@@ -23,6 +32,14 @@
       - aria_label (string)
       - icon (Icon component)
     }
+  - last (object)
+    format: {
+      - path (string)
+      - label (string)
+      - disabled (boolean)
+      - aria_label (string)
+      - icon (Icon component)
+    }
   - items (array of objects)
     format: [
     {
@@ -31,16 +48,21 @@
       - disabled (boolean)
       - active (boolean)
     }
+  - icon_path (string) (default: '')
   - extra_classes (string) (default: '')
 #}
 
 {% set _size = size|default('') %}
 {% set _alignment = alignment|default('') %}
 {% set _aria_label = aria_label|default('') %}
-{% set _enable_icon = enable_icon|default(false) %}
+{% set _enable_prev_next_icon = enable_prev_next_icon|default(false) %}
+{% set _enable_first_last_icon = enable_first_last_icon ?? true %}
 {% set _items = items|default([]) %}
+{% set _first = first|default({}) %}
 {% set _next = next|default({}) %}
 {% set _prev = prev|default({}) %}
+{% set _last = last|default({}) %}
+{% set _icon_path = icon_path|default({}) %}
 {% set _classes = 'pagination' %}
 {% if _size is not empty %}
   {% set _classes = _classes ~ ' pagination-' ~ _size %}
@@ -53,6 +75,8 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set attributes = attributes.setAttribute('role', 'navigation') %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', aria_label) %}
 {% endif %}
@@ -64,6 +88,43 @@
   {{ attributes }}
 >
   <ul class="{{ _classes }}">
+  {% if _first is not empty %}
+    {% set _first_class = 'page-item' %}
+    {% if _first.disabled %}
+      {% set _first_class = _first_class ~ ' disabled' %}
+    {% endif %}
+    <li class="{{ _first_class }}">
+      <a
+        class="page-link"
+        href="{{ _first.path }}"
+        {% if _first.disabled %}
+        tabindex="-1"
+        aria-disabled="true"
+        {% endif %}
+        {%- if _first.aria_label -%}
+        aria-label="{{ _first.aria_label }}"
+        {%- endif -%}
+      >
+      {%- if _enable_first_last_icon -%}
+        {%- if _first.icon is not empty -%}
+          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _first.icon only -%}
+        {%- else -%}
+          {%- if _icon_path is not empty -%}
+            {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+              name: "chevron-double-left",
+              size: "fluid",
+              path: _icon_path,
+            } only %}
+          {%- else -%}
+            <span aria-hidden="true">&laquo;</span>
+          {%- endif -%}
+        {%- endif -%}
+      {%- else -%}
+        {{- _first.label -}}
+      {%- endif -%}
+      </a>
+    </li>
+  {% endif %}
   {% if _prev is not empty %}
     {% set _prev_class = 'page-item' %}
     {% if _prev.disabled %}
@@ -81,14 +142,22 @@
         aria-label="{{ _prev.aria_label }}"
         {%- endif -%}
       >
-      {%- if _enable_icon -%}
+      {%- if _enable_prev_next_icon -%}
         {%- if _prev.icon is not empty -%}
-        {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _prev.icon only -%}
+          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _prev.icon only -%}
         {%- else -%}
-        <span aria-hidden="true">&laquo;</span>
+          {%- if _icon_path is not empty -%}
+            {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+              name: "chevron-left",
+              size: "fluid",
+              path: _icon_path,
+            } only %}
+          {%- else -%}
+            <span aria-hidden="true">&lsaquo;</span>
+          {%- endif -%}
         {%- endif -%}
       {%- else -%}
-      {{- _prev.label -}}
+        {{- _prev.label -}}
       {%- endif -%}
       </a>
     </li>
@@ -136,14 +205,59 @@
         aria-label="{{ _next.aria_label }}"
         {%- endif -%}
       >
-      {%- if _enable_icon -%}
+      {%- if _enable_prev_next_icon -%}
         {%- if _next.icon is not empty -%}
-        {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _next.icon only -%}
+          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _next.icon only -%}
         {%- else -%}
-        <span aria-hidden="true">&raquo;</span>
+          {%- if _icon_path is not empty -%}
+            {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+              name: "chevron-right",
+              size: "fluid",
+              path: _icon_path,
+            } only %}
+          {%- else -%}
+            <span aria-hidden="true">&rsaquo;</span>
+          {%- endif -%}
         {%- endif -%}
       {%- else -%}
         {{- _next.label -}}
+      {%- endif -%}
+      </a>
+    </li>
+  {% endif %}
+  {% if _last is not empty %}
+    {% set _last_class = 'page-item' %}
+    {% if _last.disabled %}
+      {% set _last_class = _last_class ~ ' disabled' %}
+    {% endif %}
+    <li class="{{ _last_class }}">
+      <a
+        class="page-link"
+        href="{{ _last.path }}"
+        {% if _last.disabled %}
+        tabindex="-1"
+        aria-disabled="true"
+        {% endif %}
+        {%- if _last.aria_label -%}
+        aria-label="{{ _last.aria_label }}"
+        {%- endif -%}
+      >
+      {%- if _enable_first_last_icon -%}
+        {%- if _last.icon is not empty -%}
+          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _last.icon only -%}
+        {%- else -%}
+          {%- if _icon_path is not empty -%}
+            {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+              name: "chevron-double-right",
+              size: "fluid",
+              path: _icon_path,
+            } only %}
+          {%- else -%}
+            <span aria-hidden="true">&raquo;</span>
+          {%- endif -%}
+        {%- endif -%}
+      {%- else -%}
+        {{- _last.label -}}
         {%- endif -%}
       </a>
     </li>

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

@@ -0,0 +1,44 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
+{% endblock %}
+
+{% block content %}
+  {# {% if social_media.main_title is not empty %}
+    <h2
+      class="mb-4"
+    >{{- social_media.main_title -}}</h2>
+  {% endif %}
+  {% if social_media.links is defined and social_media.links is not empty %}
+    <div class="mb-4-5">
+    {% for link in social_media.links %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with link only %}
+    {% endfor %}
+    </div>
+  {% endif %} #}
+
+  {% if information.main_title is not empty %}
+    <h2
+      class="mb-4"
+    >{{- information.main_title -}}</h2>
+  {% endif %}
+  {% if information.content is not empty %}
+    <div class="mb-4-5">
+      {{- information.content -}}
+    </div>
+  {% endif %} 
+
+  {% if files.main_title is not empty %}
+    <h2
+      class="mb-4"
+    >{{- files.main_title -}}</h2>
+  {% endif %}
+  {% if files.listing is defined and files.listing is not empty %}
+    <div class="mb-4-5">
+    {% for file in files.listing %}
+      {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
+    {% endfor %}
+    </div>
+  {% endif %}
+{% endblock %}

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

@@ -33,6 +33,9 @@
 {% if _variant is not empty %}
   {% set _classes = _classes ~ ' bg-' ~ _variant %}
 {% endif %}
+{% if _variant == 'light' %}
+  {% set _classes = _classes ~ ' text-dark' %}
+{% endif %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}

package/templates/bcl-project/project-lists.html.twig

@@ -0,0 +1,70 @@
+{% spaceless %}
+
+
+{#
+  Parameters:
+  - title (heading object) (default: {})
+  - items (array) (default: [])
+    {
+      title: (heading object),
+      content: [
+        description list object
+      ]
+    }
+#}
+
+{% 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([]) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _title_classes = ['my-4-5'] %}
+{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+
+<div
+  {{ attributes }}
+>
+{% 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 %}
+{% if _items is defined and _items is not empty %}
+  {% for _item in _items %}
+    {% if _item.title is not empty %}
+      {% set _item_title_attributes = _item.title_attributes ?: create_attribute() %}
+      {% set _item_title_attributes = _item_title_attributes.addClass(['mb-3']) %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _item.title,
+        title_tag: _item.title_tag|default('h3'),
+        title_link: _item.title_link|default({}),
+        attributes: _item_title_attributes,
+      } only %}
+    {% endif %}
+    {% for _list in _item.content %}
+      {% if _list.attributes is empty %}
+        {% set _list = _list|merge({
+          attributes: create_attribute()
+        }) %}
+      {% endif %}
+      {% if not loop.last %}
+        {% set _list = _list|merge({
+            attributes: _list.attributes.addClass(['border-bottom', 'pb-3'])
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with _list only %}
+    {% endfor %}
+  {% endfor %}
+{% endif %}
+</div>
+
+{% endspaceless %}

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

@@ -5,99 +5,74 @@
 {% endblock %}
 
 {% block content %}
-
-  {% if project_status.main_title is not empty %}
-    <h3
-      class="fw-bold mb-4"
-      {% if project_status.main_title_id is not empty %}
-      id="{{ project_status.main_title_id }}"
-      {% endif %}
-    >{{- project_status.main_title -}}</h3>
+  {% if project_status_title is not empty %}
+    {% set _project_title_attributes = create_attribute().addClass(['mb-4']) %}
+    {% if project_status_id is not empty %}
+      {% set _project_title_attributes = _project_title_attributes.setAttribute('id', project_status_id) %}
+    {% endif %}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: project_status_title,
+      title_tag: 'h2',
+      attributes: _project_title_attributes,
+    } only %}
   {% endif %}
-  {% include '@oe-bcl/bcl-project-status/project-status.html.twig' with project_status %}
-
-  {% if status_lists.main_title is not empty %}
-    <h3
-      class="fw-bold my-4"
-      {% if status_lists.main_title_id is not empty %}
-      id="{{ status_lists.main_title_id }}"
-      {% endif %}
-    >{{- status_lists.main_title -}}</h3>
+  {% if project_status is not empty %}
+    {% include '@oe-bcl/bcl-project-status/project-status.html.twig' with project_status %}
   {% endif %}
-  {% if status_lists.listing is defined and status_lists.listing is not empty %}
-    {% for lists in status_lists.listing %}
-      {% if lists.title is not empty %}
-      <h4 class="fw-bold mb-3">{{ lists.title }}</h4>
-      {% endif %}
-      {% for list in lists.content %}
-        {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with list only %}
-      {% endfor %}
-    {% endfor %}
+  {% if project_contributions is not empty %}
+    {% include '@oe-bcl/bcl-project-status/project-contributions.html.twig' with project_contributions %}
   {% endif %}
 
-  {% if first_paragraphs is defined and first_paragraphs is not empty %}
-    {% for paragraph in first_paragraphs %}
-        <h3
-          class="fw-bold mb-4 pt-3"
-          id="{{ paragraph.title_id }}"
-        >
-          {{- paragraph.title -}}
-        </h3>
+  {% if status_lists is not empty %}
+    {% include '@oe-bcl/bcl-project/project-lists.html.twig' with status_lists only %}
+  {% endif %}
 
-      {{- paragraph.content -}}
+  {% if first_paragraphs is defined and first_paragraphs is not empty %}
+    {% for _paragraph in first_paragraphs %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _paragraph.title,
+        title_tag: 'h2',
+        attributes: create_attribute().addClass(['mb-4', 'pt-3'])
+                                      .setAttribute('id', _paragraph.title_id),
+      } only %}
+      {{- _paragraph.content -}}
     {% endfor %}
   {% endif %}
 
-  {% if content_lists.main_title is not empty %}
-    <h3
-      class="fw-bold my-4"
-      {% if content_lists.main_title_id is not empty %}
-      id="{{ content_lists.main_title_id }}"
-      {% endif %}
-    >{{- content_lists.main_title -}}</h3>
+  {% if featured_lists is not empty %}
+    {% include '@oe-bcl/bcl-project/project-lists.html.twig' with featured_lists only %}
   {% endif %}
-  {% if content_lists.listing is defined and content_lists.listing is not empty %}
-    {% for lists in content_lists.listing %}
-      {% if lists.title is not empty %}
-      <h4 class="fw-bold mb-3">{{ lists.title }}</h4>
-      {% endif %}
-      {% for list in lists.content %}
-        {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with list only %}
-      {% endfor %}
-    {% endfor %}
+
+  {% if content_lists is not empty %}
+    {% include '@oe-bcl/bcl-project/project-lists.html.twig' with content_lists only %}
   {% endif %}
 
   {% if second_paragraphs is defined and second_paragraphs is not empty %}
-    {% for paragraph in second_paragraphs %}
-      <h3
-        class="fw-bold mb-4 pt-2"
-        id="{{ paragraph.title_id }}"
-      >
-        {{- paragraph.title -}}
-      </h3>
-      {{- paragraph.content -}}
+    {% for _paragraph in second_paragraphs %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _paragraph.title,
+        title_tag: 'h2',
+        attributes: create_attribute().addClass(['mb-4', 'pt-3'])
+                                      .setAttribute('id', _paragraph.title_id),
+      } only %}
+      {{- _paragraph.content -}}
     {% endfor %}
   {% endif %}
 
   {% if gallery.main_title is not empty %}
-    <h3
-      class="fw-bold my-4"
-      {% if gallery.main_title_id is not empty %}
-      id="{{ gallery.main_title_id }}"
-      {% endif %}
-    >{{- gallery.main_title -}}</h3>
+    {% set _gallery_title_attributes = create_attribute().addClass(['my-4']) %}
+    {% if gallery.main_title_id is not empty %}
+      {% set _gallery_title_attributes = _gallery_title_attributes.setAttribute('id', gallery.main_title_id) %}
+    {% endif %}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: gallery.main_title,
+      title_tag: 'h2',
+      attributes: _gallery_title_attributes,
+    } only %}
   {% endif %}
-  {% if gallery.listing is defined and gallery.listing is not empty %}
-  <div class="mt-3">
-    {% for showcase in gallery.listing %}
-      <div class="mb-2-5 pb-4">
-      {% if showcase.carousel %}
-        {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with showcase only %}
-      {% else %}
-        {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with showcase only %}
-      {% endif %}
-      </div>
-    {% endfor %}
+  {% if gallery is not empty %}
+  <div class="mt-3 mb-4-5">
+    {% include '@oe-bcl/bcl-gallery/gallery.html.twig' with gallery only %}
   </div>
   {% endif %}
 

package/templates/bcl-project-status/project-contributions.html.twig

@@ -0,0 +1,56 @@
+{% spaceless %}
+
+{# Parameters:
+  - corporate_contributions (string) (default: '') // value every 5 percent
+  - legend (boolean or object (default: false)
+  - chart (boolean) (default: false)
+
+  Blocks - 
+    project_status_contrib_chart
+    project_status_contrib_legend
+#}
+
+{% set _corporate_contributions = corporate_contributions|default('') %}
+{% set _legend = legend|default(false) %}
+{% set _chart = chart|default(false) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass([
+  'bcl-project-contributions',
+  'border-bottom',
+  'pb-4',
+  'mb-4'
+]) %}
+
+<div {{ attributes }}>
+  <div class="row">
+
+  {% if _chart is not empty %}
+    <div class="bcl-project-contributions-chart col-5 col-md-3">
+    {% block project_status_contrib_chart %}
+      <div class="circular-progress" data-percentage="{{ _corporate_contributions }}">
+        <span class="circular-progress-left">
+          <span class="circular-progress-bar"></span>
+        </span>
+        <span class="circular-progress-right">
+          <span class="circular-progress-bar"></span>
+        </span>
+      </div>
+    {% endblock %}
+    </div>
+  {% endif %}
+
+  {% if _legend is not empty %}
+    <div class="bcl-project-contributions-legend col-7 col-md-9 align-self-center">
+    {% block project_status_contrib_legend %}
+      {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with _legend only %}
+    {% endblock %}
+    </div>
+  {% endif %}
+  </div> 
+</div>
+
+{% endspaceless %}