@openeuropa/bcl-theme-default 0.18.0 → 0.21.0

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 %}
+    <h3
+      class="fw-bold mb-4"
+    >{{- social_media.main_title -}}</h3>
+  {% 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 %}
+    <h3
+      class="fw-bold mb-4"
+    >{{- information.main_title -}}</h3>
+  {% endif %}
+  {% if information.content is not empty %}
+    <div class="mb-4-5">
+      {{- information.content -}}
+    </div>
+  {% endif %} 
+
+  {% if files.main_title is not empty %}
+    <h3
+      class="fw-bold mb-4"
+    >{{- files.main_title -}}</h3>
+  {% 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

@@ -6,6 +6,7 @@
   - max (int) (default: 100)
   - striped (boolean) (default: false)
   - animated (boolean) (default: false)
+  - hidden_label (boolean) (default: false)
   - label (string) (default: '')
   - bar_label (string) (default: '')
   - variant (string) (default: '')
@@ -17,6 +18,7 @@
 {% set _max = max|default(100) %}
 {% set _striped = striped|default(false) %}
 {% set _animated = animated|default(false) %}
+{% set _hidden_label = hidden_label|default(false) %}
 {% set _label = label|default('') %}
 {% set _bar_label = bar_label|default('') %}
 {% set _variant = variant|default('') %}
@@ -57,7 +59,9 @@
     aria-valuemin="{{ _min }}"
     aria-valuemax="{{ _max }}"
   >
-  {{- _bar_label -}}
+  {%- if not _hidden_label -%}
+    {{- _bar_label -}}
+  {%- endif -%}
   </div>
 </div>
 {% if _message is not empty %}

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

@@ -0,0 +1,112 @@
+{% 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 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>
+  {% 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>
+  {% 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 %}
+  {% 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>
+
+      {{- 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>
+  {% 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 %}
+  {% 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 -}}
+    {% 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>
+  {% 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 %}
+  </div>
+  {% endif %}
+
+  {% if social_block is not empty %}
+    {% block social_block %}
+      {{ social_buttons }}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with button_social_modal only %}
+      {% include '@oe-bcl/bcl-modal/modal.html.twig' with social_modal only %}
+    {% endblock %}
+  {% endif %}
+
+{% endblock %}

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

@@ -0,0 +1,128 @@
+{% spaceless %}
+
+{# Parameters:
+  - title_id (string) (default: "")
+  - title (string) (default: "")
+  - title_tag (string) (default: "h3")
+  - status (string) (default: 'planned')
+  - start_date (string) (default: '')
+  - start_label (string) (default: '')
+  - end_date (string) (default: '')
+  - end_label (string) (default: '')
+  - label (string) (default: '')
+  - badge (string) (default: ''),
+  - progress (string) (default: '')
+  - corporate_contribution (string) (default: '') // value every 5 percent
+  - chart_legend (object) (default: {})
+
+    Blocks - chart
+#}
+
+{% set _title_id = title_id|default('') %}
+{% set _title = title|default('') %}
+{% set _label = label|default('') %}
+{% set _title_tag = title_tag|default('h3') %}
+{% set _status = status|default('planned') %}
+{% set _charts = charts|default('') %}
+{% set _badge = badge|default('') %}
+{% set _start_date = start_date|default('') %}
+{% set _end_date = end_date|default('') %}
+{% set _start_label = start_label|default('') %}
+{% set _end_label = end_label|default('') %}
+{% set _progress = progress|default('') %}
+{% set _corporate_contribution = corporate_contribution|default('') %}
+{% set _chart_legend = chart_legend|default({}) %}
+
+{% set _bgs = {
+    ongoing: 'info',
+    closed: 'dark',
+    planned: 'secondary',
+  } %}
+{% set _bg = _bgs[_status]|default('secondary') %}
+
+
+<{{ _title_tag }}
+  class="fw-bold mb-4"
+  {% if title_id is not empty %}
+    id="{{ title_id }}"
+  {% endif %}
+>
+  {{- title -}}
+</{{ _title_tag }}>
+
+<div class="border-bottom pb-4 mb-4">
+  <div class="row">
+    <div class="col-12 col-md-3">
+    {% if _label is not empty %}
+      <p class="fw-bold">{{ _label }}</p>
+    {% endif %}
+
+    {% if _badge is not empty %}
+      {% include '@oe-bcl/bcl-badge/badge.html.twig' with {
+        label: _badge,
+        background: _bg,
+        attributes: create_attribute().addClass(['mb-3', 'mb-md-0']),
+      } only %}
+    {% endif %}
+
+    </div>
+
+    <div class="col-12 col-md-9">
+      <div class="d-flex justify-content-between">
+
+      {% if _start_date is not empty and _start_label is not empty %}
+        <p class="fw-bold">
+          {{- _start_label -}} <br>
+          <span class="fw-normal">
+            {{- _start_date -}}
+          </span>
+        </p>
+      {% endif %}
+
+      {% if _end_date is not empty and _end_label is not empty %}
+        <p class="fw-bold text-end">
+          {{- _end_label -}} <br>
+          <span class="fw-normal">
+            {{- _end_date -}}
+          </span>
+        </p>
+      {% endif %}
+      </div>
+
+    {% if _progress is not empty or _status != 'ongoing' %}
+      {% if _progress is empty %}
+        {% set _progress = _status == 'closed' ? 100 : 0 %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-progress/progress.html.twig' with {
+        variant: _bg,
+        hidden_label: true,
+        progress: _progress,
+      } only %}
+    {% endif %}
+
+    </div>
+  </div>
+</div>
+{% if _corporate_contribution is not empty and _chart_legend is not empty %}
+<div class="border-bottom pb-4 mb-4">
+  {% block chart %}
+  <div class="row">
+    <div class="col-5 col-md-3">
+      <div class="circular-progress" data-percentage="{{ _corporate_contribution }}">
+        <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>
+    </div>
+    <div class="col-7 col-md-9 align-self-center">
+      {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with _chart_legend only %}
+    </div>
+  </div>
+  {% endblock %} 
+</div>
+{% endif %} 
+
+{% endspaceless %}

package/templates/bcl-recent-activities/recent-activities.html.twig

@@ -32,7 +32,7 @@
 >
 {% if _activities is not empty and _activities is iterable %}
   {% for _activity in _activities %}
-  <div class="d-flex bg-lighter py-3 px-3 px-md-3-5 mb-3-5">
+  <div class="d-flex bg-lighter py-3 px-3 px-md-3-5 mb-3-5 rounded-2">
     {% if _activity.image is not empty %}
     <div>
       {{- _activity.image -}}

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

@@ -4,6 +4,7 @@
   Parameters:
   - "id" (string) (default: '')
   - "label" (string) (default: '')
+  - "label_extra_classes" (string) (default: '')
   - "hidden_label" (boolean) (default: false)
   - "helper_text" (string) (default: '')
   - "helper_text_id" (string) (default: '')
@@ -16,6 +17,7 @@
   - "multiple" (boolean) (default: false)
   - "options": (array of objects with value and label keys) (default: [])
   - "aria_label": (string) (default: '')
+  - "clean_class": (boolean) (default: false) - removes 'form-select' class
 #}
 
 {% set _classes = ['form-select'] %}
@@ -32,11 +34,12 @@
 {% set _helper_text = helper_text|default('') %}
 {% set _helper_text_id = helper_text_id|default('') %}
 {% set _label = label|default('') %}
-{% set _extra_classes = extra_classes|default('') %}
+{% set _label_extra_classes = label_extra_classes|default('') %}
 {% set _clean_class = clean_class|default(false) %}
-{% set _label_class = 'form-label' %}
 {% set _hidden_label = hidden_label|default(false) %}
 
+{% set _label_class = 'form-label' %}
+
 {% if _clean_class %}
   {% set _classes = [] %}
 {% endif %}
@@ -53,6 +56,10 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% if _label_extra_classes is not empty %}
+  {% set _label_class = _label_class ~ ' ' ~ _label_extra_classes %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', _aria_label) %}
 {% endif %}
@@ -78,7 +85,7 @@
 {% endif %}
 
 {% if _classes is not empty %}
-{% set attributes = attributes.addClass(_classes) %}
+  {% set attributes = attributes.addClass(_classes) %}
 {% endif %}
 
 {% if _label is not empty %}
@@ -129,6 +136,9 @@
       {% if _option.disabled %}
         disabled
       {% endif %}
+      {% if _option.hidden %}
+        hidden
+      {% endif %}
       >
         {{- _option.label -}}
       </option>

package/templates/bcl-subscription/subscription-modal.html.twig

@@ -0,0 +1,24 @@
+{# Parameters:
+  - form: (form object) (default: {})
+  - success_alert: (alert object) (default: {})
+  - error_alert: (button Object) (default: {})
+
+  Blocks:
+  - body
+  - messages
+#}
+
+{% set _form = form|default({}) %}
+{% set _success_alert = success_alert|default({}) %}
+{% set _error_alert = error_alert|default({}) %}
+
+{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}
+
+{% block body %}
+  {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
+{% endblock %}
+
+{% block messages %}
+  {% include '@oe-bcl/bcl-alert/alert.html.twig' with _success_alert only %}
+  {% include '@oe-bcl/bcl-alert/alert.html.twig' with _error_alert only %}
+{% endblock %}

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

@@ -0,0 +1,10 @@
+{% 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_bottom %}
+  {% include '@oe-bcl/bcl-subscription-block/subscription-block.html.twig' with subscription only %}
+  {% include '@oe-bcl/bcl-subscription/subscription-modal.html.twig' with modal only %}
+{% endblock %}

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

@@ -0,0 +1,36 @@
+{% spaceless %}
+
+{# Parameters:
+  - title: (string) (default: '')
+  - content: (string) (default: '')
+  - button: (button Object) (default: {})
+#}
+
+{% set _title = title|default(false) %}
+{% set _content = content|default('') %}
+{% set _button = button|default({}) %}
+{% set _modal = modal|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bg-light', 'px-4-5', 'pt-4', 'pb-4-5']) %}
+
+<div
+  {{ attributes }}
+>
+  {% if _title is not empty %}
+    <div class="fs-2 fw-normal">{{ _title }}</div>
+  {% endif %}
+  {% if _content is not empty %}
+    {{ _content }}
+  {% endif %}
+  {% if _button is not empty %}
+    <div class="pb-2">
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
+    </div>
+  {% endif %}
+</div>
+
+{% endspaceless %}

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

@@ -15,7 +15,7 @@ Parameters:
     - "label": (string) (default: '')
     - "title": (string) (default: '')
     - "content": (block) (default: '')
-  - "icons_path" (string) (default: ''): file containing the svg icons
+  - "icon_path" (string) (default: ''): file containing the svg icons
 #}
 
 {# Internal properties #}
@@ -24,7 +24,7 @@ Parameters:
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
 {% set _items = items|default([]) %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _toggle_collapsed = toggle_collapsed|default('') %}
 {% set _toggle_expanded = toggle_expanded|default('') %}
 {% set _hide_from = hide.from|default(items|length) %}
@@ -100,7 +100,7 @@ Parameters:
             {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
               name: 'chevron-down',
               size: 'fluid',
-              path: _icons_path,
+              path: _icon_path,
               attributes: create_attribute().addClass('ms-2-5'),
             } only %}
           </button>