@openeuropa/bcl-theme-default 0.15.0 → 0.19.0

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

@@ -1,8 +1,9 @@
+{% import _self as navigation %}
 {% spaceless %}
 
 {# Parameters:
   - pills (boolean) (default: false)
-  - tabs (boolean) (default: false)
+  - tabs (boolean) (default: false) - If tabs is set to true, the nav should also be set to true for accessibility reasons
   - vertical (boolean) (default: false)
   - full_width (boolean) (default: false)
   - alignment (string) (default: '')
@@ -17,131 +18,160 @@
         - active (boolean)
         - button (boolean) - set to button
         - content (string) - content for tab
+        - navigation (navigation Object) - set for multiple level or navigation, items inside is required
       }
     ]
 #}
 
-{% set _pills = pills|default(false) %}
-{% set _tabs = tabs|default(false) %}
-{% set _vertical = vertical|default(false) %}
-{% set _full_width = full_width|default(false) %}
-{% set _alignment = alignment|default('') %}
-{% set _id = id|default('') %}
-{% set _tabs_content = tabs_content|default(false) %}
-{% set _nav = nav|default(false) %}
-{% set _navbar = navbar|default(false) %}
-{% set _items = items|default([]) %}
+{# Define main macro #}
+{% macro render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) %}
+{% spaceless %}
+  {% import _self as navigation %}
 
-{% if _navbar %}
-  {% set _classes = ['navbar-nav'] %}
-{% else %}
-  {% set _classes = ['nav'] %}
-{% endif %}
-{% if _pills %}
-  {% set _classes = _classes|merge(['nav-pills']) %}
-{% endif %}
-{% if _tabs %}
-  {% set _classes = _classes|merge(['nav-tabs']) %}
-{% endif %}
-{% if _vertical %}
-  {% set _classes = _classes|merge(['flex-column']) %}
-{% endif %}
-{% if _full_width %}
-  {% set _classes = _classes|merge(['nav-fill']) %}
-{% endif %}
-{% if _alignment is not empty %}
-  {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
-{% endif %}
+  {% set _pills = pills|default(false) %}
+  {% set _tabs = tabs|default(false) %}
+  {% set _vertical = vertical|default(false) %}
+  {% set _full_width = full_width|default(false) %}
+  {% set _alignment = alignment|default('') %}
+  {% set _id = id|default('') %}
+  {% set _tabs_content = tabs_content|default(false) %}
+  {% set _nav = nav|default(false) %}
+  {% set _navbar = navbar|default(false) %}
+  {% set _items = items|default([]) %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
+  {% if _navbar %}
+    {% set _classes = ['navbar-nav'] %}
+  {% else %}
+    {% set _classes = ['nav'] %}
+  {% endif %}
+  {% if _pills %}
+    {% set _classes = _classes|merge(['nav-pills']) %}
+  {% endif %}
+  {% if _tabs %}
+    {% set _classes = _classes|merge(['nav-tabs']) %}
+  {% endif %}
+  {% if _vertical %}
+    {% set _classes = _classes|merge(['flex-column']) %}
+  {% endif %}
+  {% if _full_width %}
+    {% set _classes = _classes|merge(['nav-fill']) %}
+  {% endif %}
+  {% if _alignment is not empty %}
+    {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
+  {% endif %}
 
-{% if _id is not empty %}
-  {% set attributes = attributes.setAttribute('id', _id) %}
-{% endif %}
+  {% if attributes is empty %}
+    {% set attributes = create_attribute() %}
+  {% endif %}
 
-{% if not _nav and _tabs %}
-  {% set attributes = attributes.setAttribute('role', 'tablist') %}
-{% endif %}
+  {% if _id is not empty %}
+    {% set attributes = attributes.setAttribute('id', _id) %}
+  {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+  {% if _tabs %}
+    {% set attributes = attributes.setAttribute('role', 'tablist') %}
+  {% endif %}
+  {% set attributes = attributes.addClass(_classes) %}
 
-{% if _nav %}
-<nav
-  {{ attributes }}
->
-{% else %}
-<ul
-  {{ attributes }}
->
-{% endif %}
-  {% if _items is not empty and _items is iterable %}
-    {% for _item in _items %}
-      {% set _nav_class = 'nav-item' %}
-      {% if _item.dropdown %}
-        {% set _nav_class = _nav_class ~ ' dropdown' %}
-        {% set _item = _item|merge({remove_wrapper: true}) %}
-      {% endif %}
-      {% if _item.dropdown %}
-        {% set _item_classes = [] %}
-      {% else %}
-        {% set _item_classes = ['nav-link'] %}
-      {% endif %}
-      {% if _item.active %}
-        {% set _item_classes = _item_classes|merge(['active']) %}
-      {% endif %}
-      {% if _item.attributes is empty %}
-        {% set _item = _item|merge({
-          attributes: create_attribute()
-        }) %}
-      {% endif %}
-      {% set _item = _item|merge({
-        attributes: _item.attributes.addClass(_item_classes),
-        clean_class: true}) %}
-      {% if not _nav %}
-      <li
-        class="{{ _nav_class }}"
-        {% if _tabs %}
-          role="presentation"
-        {% endif %}
-      >
-      {% endif %}
-      {% if _item.dropdown is defined %}
-        {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
-      {% elseif _item.button is defined %}
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
-      {% else %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
-      {% endif %}
-      {% if not _nav %}
-      </li>
-      {% endif %}
-    {% endfor %}
+  {% if _nav %}
+  <nav
+    {{ attributes }}
+  >
+  {% else %}
+  <ul
+    {{ attributes }}
+  >
   {% endif %}
-{% if _nav %}
-</nav>
-{% else %}
-</ul>
-{% endif %}
-{% if _tabs_content %}
-<div class="tab-content">
-  {%- block contents -%}
     {% if _items is not empty and _items is iterable %}
-      {% for _item in _items %}
-        {% if _item.content is not empty %}
-          {% set _content_class = 'tab-pane fade' %}
-          {% if _item.active %}
-            {% set _content_class = _content_class ~ ' show active' %}
+      {% for _item in items %}
+        {% set _nav_class = 'nav-item' %}
+        {% if _item.dropdown %}
+          {% set _nav_class = _nav_class ~ ' dropdown' %}
+          {% set _item = _item|merge({remove_wrapper: true}) %}
+        {% endif %}
+        {% if _item.dropdown %}
+          {% set _item_classes = [] %}
+        {% else %}
+          {% set _item_classes = ['nav-link'] %}
+        {% endif %}
+        {% if _item.active %}
+          {% set _item_classes = _item_classes|merge(['active']) %}
+        {% endif %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(_item_classes),
+          clean_class: true}) %}
+        {% if not _nav %}
+        <li
+          class="{{ _nav_class }}"
+          {% if _tabs %}
+            role="tab"
           {% endif %}
-          <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
-            {{- _item.content -}}
-          </div>
+        >
+        {% elseif _tabs %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.setAttribute("role", "tab"),
+            }) 
+          %}
+        {% endif %}
+        {% if _item.dropdown is defined %}
+          {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
+        {% elseif _item.button is defined %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% else %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+        {% if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
+          {{ navigation.render(
+            _item.navigation.items,
+            _item.navigation.pills,
+            _item.navigation.tabs,
+            _item.navigation.tabs_content,
+            _item.navigation.vertical,
+            _item.navigation.full_width,
+            _item.navigation.alignment,
+            _item.navigation.id,
+            _item.navigation.nav,
+            _item.navigation.navbar,
+            _item.navigation.attributes
+            ) }}
+        {% endif %}
+        {% if not _nav %}
+        </li>
         {% endif %}
       {% endfor %}
     {% endif %}
-  {%- endblock -%}
-</div>
-{% endif %}
+  {% if _nav %}
+  </nav>
+  {% else %}
+  </ul>
+  {% endif %}
+  {% if _tabs_content %}
+  <div class="tab-content">
+    {%- block contents -%}
+      {% if _items is not empty and _items is iterable %}
+        {% for _item in _items %}
+          {% if _item.content is not empty %}
+            {% set _content_class = 'tab-pane fade' %}
+            {% if _item.active %}
+              {% set _content_class = _content_class ~ ' show active' %}
+            {% endif %}
+            <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
+              {{- _item.content -}}
+            </div>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    {%- endblock -%}
+  </div>
+  {% endif %}
+{% endspaceless %}
+{% endmacro %}
+
+{{ navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) }}
 
 {% endspaceless %}

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

@@ -41,6 +41,10 @@
   {% set _aria_labelled = _title.id|default('') %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_labelled is defined and _aria_labelled is not empty %}
   {% set attributes = attributes.setAttribute('aria-labelledby', _aria_labelled) %}
 {% endif %}

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

@@ -12,6 +12,7 @@
       - path (string)
       - label (string)
       - disabled (boolean)
+      - aria_label (string)
       - icon (Icon component)
     }
   - next (object)
@@ -19,6 +20,7 @@
       - path (string)
       - label (string)
       - disabled (boolean)
+      - aria_label (string)
       - icon (Icon component)
     }
   - items (array of objects)
@@ -47,11 +49,15 @@
   {% set _classes = _classes ~ ' justify-content-' ~ _alignment %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', aria_label) %}
 {% endif %}
 {% if _extra_classes is not empty %}
-{% set _class = _class ~ ' ' ~ _extra_classes %}
+  {% set _class = _class ~ ' ' ~ _extra_classes %}
 {% endif %}
 
 <nav
@@ -71,6 +77,9 @@
         tabindex="-1"
         aria-disabled="true"
         {% endif %}
+        {%- if _prev.aria_label -%}
+        aria-label="{{ _prev.aria_label }}"
+        {%- endif -%}
       >
       {%- if _enable_icon -%}
         {%- if _prev.icon is not empty -%}
@@ -123,6 +132,9 @@
         tabindex="-1"
         aria-disabled="true"
         {% endif %}
+        {%- if _next.aria_label -%}
+        aria-label="{{ _next.aria_label }}"
+        {%- endif -%}
       >
       {%- if _enable_icon -%}
         {%- if _next.icon is not empty -%}

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

@@ -0,0 +1,43 @@
+{% spaceless %}
+
+{# Parameters:
+  - width (int) (default: 0) - between 0-100
+  - variant (string) (default: '')
+    - options : ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+  - size (string) (default: '')
+    - options : ["xs", "lg"]
+  - animation (string) (default: '')
+    - options : ["glow", "wave"]
+#}
+
+{% set _width = width|default(0) %}
+{% set _variant = variant|default('') %}
+{% set _size = size|default('') %}
+{% set _animation = animation|default('') %}
+{% set _classes = ['placeholder'] %}
+
+{% if _size is not empty %}
+  {% set _classes = _classes|merge(['placeholder-' ~ _size]) %}
+{% endif %}
+
+{% if _variant is not empty %}
+  {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+{% set attributes = attributes.setAttribute('style', 'width: ' ~ _width ~ '%;') %}
+
+{% if _animation is not empty %}
+  <p class="placeholder-{{ _animation }}">
+{% endif %}
+<span {{- attributes -}} >
+</span>
+{% if _animation is not empty %}
+  </p>
+{% endif %}
+
+{% endspaceless %}

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('') %}
@@ -32,6 +34,10 @@
   {% set _classes = _classes ~ ' bg-' ~ _variant %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(['progress']) %}
 
 {% if _bar_label is empty %} 
@@ -49,10 +55,13 @@
     role="progressbar"
     style="width: {{ _progress }}%"
     aria-valuenow="{{ _progress }}"
+    aria-label="{{ _progress }}"
     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,60 @@
+{% 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 %}
+  {% include '@oe-bcl/bcl-project-status/project-status.html.twig' with project_details|merge({ charts: charts }) %}
+
+  <div class="border-bottom mb-4">
+    {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
+  </div>
+
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with coordinator_list only %}
+
+  {% for paragraph in paragraphs %}
+      <h3
+        class="fw-bold mb-4 pt-3"
+        id="{{ paragraph.title_id }}"
+      >
+        {{ paragraph.title }}
+      </h3>
+
+    {{ paragraph.content }}
+  {% endfor %}
+
+  <h3
+    class="fw-bold mb-4 pt-2"
+    id="{{ contributors.main_title_id }}"
+  >
+    {{ contributors.main_title }}
+  </h3>
+
+{% for contributor in contributors.listing %}
+  <h4 class="fw-bold mb-3">{{ contributor.title }}</h4>
+
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with contributor.list only %}
+
+{% endfor %}
+
+{% for achievement in achievements %}
+  <h3
+    class="fw-bold mb-4 pt-2"
+    id="{{ achievement.title_id }}"
+  >
+    {{ achievement.title }}
+  </h3>
+  {{ achievement.content }}
+{% endfor %}
+
+  <h3
+    class="fw-bold mb-4 pt-2"
+    id="{{ gallery.title_id }}"
+  >
+    {{ gallery.title }}
+  </h3>
+
+  {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with gallery.featured only %}
+  {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with gallery.carousel only %}
+{% endblock %}

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

@@ -0,0 +1,109 @@
+{% 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: '')
+
+  Blocks - charts
+#}
+
+{% 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 _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 _charts is not empty %}
+<div class="border-bottom pb-4 mb-4">
+  {%- block charts _charts -%}
+</div>
+{% endif %}
+
+{% endspaceless %}

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

@@ -23,12 +23,16 @@
 
 {% set _activities = activities|default([]) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 <div 
   {{ attributes }}
 >
 {% 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-search/search.html.twig

@@ -0,0 +1,15 @@
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+
+{% block banner %}
+{% if banner.search_bar is defined %}
+  <div class="bg-lighter py-4 py-lg-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-lg-6 offset-lg-3">
+          {% include '@oe-bcl/bcl-search-form/search-form.html.twig' with banner.search_bar only %}
+        </div>
+      </div>  
+    </div>
+  </div>
+{% endif %}
+{% endblock %}

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

@@ -0,0 +1,52 @@
+{% spaceless %}
+
+{# Parameters:
+  - pill: (boolean) (default: false)
+  - icon: (icon Object) (default: {})
+  - submit: (button Object) (default: {})
+  - input: (form input Object) (default: {})
+  ]
+#}
+
+{% set _pill = pill|default(false) %}
+{% set _icon = icon|default({}) %}
+{% set _submit = submit|default({}) %}
+{% set _input = input|default({}) %}
+
+{% set _classes = ["bcl-search-form"] %}
+
+{% if _pill %}
+  {% set _classes = _classes|merge(['rounded']) %}
+{% endif %}
+
+{% if _submit is not empty %}
+  {% set _classes = _classes|merge(['submittable']) %}
+{% endif %}
+
+{% if _icon is not empty %}
+  {% set _input = _input|merge({
+    attributes: _input.attributes.addClass("ps-5")
+  }) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass( _classes ) %}
+
+<form
+  {{ attributes }}
+>
+  <div class="bcl-search-form__group">
+    {% if _icon is not empty %}
+      {% include '@oe-bcl/bcl-icon/icon.html.twig' with _icon only %}
+    {% endif %}
+    {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with _input only %}
+    {% if _submit is not empty %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _submit only %}
+    {% endif %}
+  </div>
+</form>
+
+{% endspaceless %}