@openeuropa/bcl-theme-default 0.19.0 → 0.22.0

package/templates/bcl-language-switcher/language-switcher.html.twig

@@ -0,0 +1,44 @@
+{% spaceless %}
+
+{# Parameters:
+  - id (string) (default: collapse-{random number 0-1000}) - collapse custom id - optional
+  - message (alert object) (default: {})
+  - expandable (button object) (default: [])
+  - language (array of link object) (default: [])
+#}
+
+{% set _id = id|default('collapse-' ~ random(1000)) %}
+{% set _message = message|default({}) %}
+{% set _expandable = expandable|default({}) %}
+{% set _languages = languages|default([]) %}
+
+{% set _expandable_attributes = _expandable.attributes ?: create_attribute() %}
+
+{% set _expandable_attributes = _expandable_attributes
+                                .setAttribute('data-bs-toggle', 'collapse')
+                                .setAttribute('autocomplete', 'off')
+                                .setAttribute('aria-expanded', 'false')
+                                .setAttribute('aria-controls', _id)
+                                .setAttribute('data-bs-target', '#' ~ _id)
+%}
+
+{% include '@oe-bcl/bcl-alert/alert.html.twig' with _message only %}
+
+{% include '@oe-bcl/bcl-button/button.html.twig' with _expandable|merge({
+  attributes: _expandable_attributes
+}) only %}
+
+<div class="collapse mt-3" id="{{ _id }}">
+  <div
+    class="d-md-grid"
+    style="grid-auto-flow: column; grid-template-rows: repeat(4, 1fr)"
+  >
+    {% for language in languages %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with language|merge({
+        attributes: create_attribute().addClass(["btn", "btn-link", "d-block", "ps-0", "text-start"])
+      }) only %}
+    {% endfor %}
+  </div>
+</div>
+
+{% endspaceless %}

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

@@ -65,7 +65,7 @@
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}
 {% if _standalone %}
-  {% set _classes = _classes|merge(['text-underline-hover']) %}
+  {% set _classes = _classes|merge(['standalone']) %}
 {% endif %}
 {% if _classes is not empty %}
   {% set attributes = attributes.addClass(_classes) %}

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

@@ -7,6 +7,7 @@
     - options ["vertical", "horizontal"]
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_attributes (drupal attrs)
   - links (array of link objects) (default: [])
 #}
 
@@ -14,6 +15,8 @@
 {% set _variant = variant|default("vertical") %}
 {% set _title = title|default("") %}
 {% set _title_tag = title_tag|default("h2") %}
+{% set _title_classes = ['fw-bold', 'pb-3', 'mb-3', 'border-bottom'] %}
+{% set _title_attributes = title_attributes ?: create_attribute().addClass(_title_classes) %}
 {% set _links = links|default([])%}
 
 {% if attributes is empty %}
@@ -28,8 +31,11 @@
   {{ attributes }}
 >
   {% if _title is not empty %}
-    {% set _title_classes = 'fw-bold pb-3 mb-3 border-bottom' %}
-    <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      attributes: _title_attributes,
+    } only %}
   {% endif %}
   {% if _links is not empty and _links is iterable %}
     <ul class="ps-0 mb-0">
@@ -41,7 +47,7 @@
         {% endif %}
         {% set _link = _link|merge({
           clean_class: true,
-          attributes: _link.attributes.addClass(["pb-3", "d-inline-block"])
+          attributes: _link.attributes.addClass(["pb-3", "d-inline-block", "standalone"])
         }) %}
         {% set _list_item_classes = "list-unstyled" %}
         {% if _variant == "horizontal" %}

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

@@ -5,6 +5,7 @@
   [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_attributes (drupal attrs)
   - items: (array of objects of type card)
   - link: (object of type link)
   - alignment: (string) (default: '') options:
@@ -15,6 +16,7 @@
 {% set _variant = variant|default('default-1-col') %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _alignment = alignment|default('') %}
 {% set _link = link|default({}) %}
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
@@ -35,10 +37,11 @@
 <div {{ attributes }}>
 
 {% 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_attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _items is not empty %}
@@ -47,15 +50,16 @@
     {% set _max_width = '' %}
     {% set _image = {} %}
     {% if _card.image is not empty %}
-      {% set _max_width = 'mw-listing-img' %}
+      {% set _image_classes = _card.image.classes ?: '' %}
       {% if not _alignment == 'center' %}
-        {% set _image_classes = _card.image.classes ? _card.image.classes ~ ' mb-3' : 'mb-3' %}
+        {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
       {% endif %}
+      {% set _max_width = 'mw-listing-img' %}
       {% set _card = _card|merge({image: _card.image|merge({
-        classes: _image_classes
+        classes: _image_classes,
       })}) %}
     {% elseif _card.date is not empty %}
-      {% set _max_width = 'mw-date mb-3' %}
+      {% set _max_width = 'mw-col-date mb-3' %}
     {% endif %}
     {% if _alignment is not empty %}
       {% set _alignment_class = ' align-self-' ~ _alignment %}

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

@@ -3,17 +3,22 @@
 {# Parameters:
   - size (string) (sm, lg, xl, fullscreen) default('')
   - id (boolean) (default: 'modal-' ~ random(1000))
+  - fullscreen_responsive (string) (default: '')
+    options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
   - verticaly_centered (boolean) (default: false)
   - scrollable (boolean) (default: false)
   - header (block) (default: '')
+  - messages (block) (default: '')
   - body (block) (default: '')
   - footer (block) (default: '')
 #}
 {% set _size =  size|default('') %}
 {% set _id = id|default('modal-' ~ random(1000)) %}
+{% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
 {% set _header = header|default('') %}
 {% set _body = body|default('') %}
+{% set _messages = messages|default('') %}
 {% set _static_backdrop = static_backdrop|default(false) %}
 {% set _verticaly_centered = verticaly_centered|default(false) %}
 {% set _scrollable = scrollable|default(false) %}
@@ -28,7 +33,7 @@
                     .setAttribute('id', _id)
                     .setAttribute('tabindex', '-1')
                     .setAttribute('aria-hidden', 'true')
-                    .setAttribute('aria-labelledby', _id ~ 'Label')
+                    .setAttribute('aria-label', _id ~ 'Label')
                     .addClass(_classes)
 %}
 
@@ -37,20 +42,26 @@
 >
   <div class="modal-dialog
   {{- _size ? ' modal-' ~ size -}}
+  {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
   {{- _verticaly_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
   {{- _static_backdrop ? ' data-bs-backdrop="static"' -}}
   >
     <div class="modal-content">
+      {% if header is not empty %}
       <div class="modal-header">
         {%- block header _header -%}
       </div>
+      {% endif %}
+      {%- block messages _messages -%}
       <div class="modal-body">
         {%- block body _body -%}
       </div>
+      {% if footer is not empty %}
       <div class="modal-footer">
         {%- block footer _footer -%}
       </div>
+      {% endif %}
     </div>
   </div>
 </div>

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

@@ -18,6 +18,11 @@
   - color_set (string) (default: 'light')
     options ['light', 'dark']
   - disable_collapse (boolean) (default: false)
+
+  Blocks
+    - branding
+    - navigation
+    - right
 #}
 {% set _collapse_id = collapse_id|default('') %}
 {% set _background = background|default('') %}
@@ -45,26 +50,28 @@
   {{ attributes }}
 >
   <div class='container'>
-  {% if _brand is not empty %}
-    <a class='navbar-brand' href='{{ _brand.link }}'>
-    {% for logo in _brand.logos %}
-      <img
-        src='{{ logo.src }}'
-        {% if logo.alt is not empty %}
-        alt='{{ logo.alt }}'
-        {% endif %}
-        {% if logo.class is not empty %}
-        class='{{ logo.class }}'
-        {% endif %}
-      />
-    {% endfor %}
-  {%- if _brand.label is defined -%}
-   <div class="h5 ms-4-5 d-none d-lg-inline-block">
-    {{- _brand.label -}}
-    </div>
-  {% endif %}
-    </a>
-  {% endif %}
+  {% block branding %}
+    {% if _brand is not empty %}
+      <a class='navbar-brand' href='{{ _brand.link }}'>
+      {% for logo in _brand.logos %}
+        <img
+          src='{{ logo.src }}'
+          {% if logo.alt is not empty %}
+          alt='{{ logo.alt }}'
+          {% endif %}
+          {% if logo.class is not empty %}
+          class='{{ logo.class }}'
+          {% endif %}
+        />
+      {% endfor %}
+    {%- if _brand.label is defined -%}
+    <div class="h5 ms-4-5 d-none d-lg-inline-block">
+      {{- _brand.label -}}
+      </div>
+    {% endif %}
+      </a>
+    {% endif %}
+  {% endblock %}
 
   {% if not _disable_collapse %}
     <button
@@ -79,16 +86,20 @@
       <span class='navbar-toggler-icon'></span>
     </button>
     <div class='collapse navbar-collapse' id='{{ _collapse_id }}'>
+  {% endif %}
+  {% block navigation %}
+    {% if _navigation is not empty %}
+      {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
     {% endif %}
-      {% if _navigation is not empty %}
-        {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
-      {% endif %}
-      {% if _form is not empty %}
-        {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
-      {% endif %}
-    {% if not _disable_collapse %}
-    </div>
+  {%  endblock %}
+  {% block right %}
+    {% if _form is not empty %}
+      {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
     {% endif %}
+  {%  endblock %}
+  {% if not _disable_collapse %}
+    </div>
+  {% endif %}
   </div>
 </nav>
 

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

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content %}
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  <p id="content">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.
   Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue

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-project/project-lists.html.twig

@@ -0,0 +1,67 @@
+{% 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('h3') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _items = items|default([]) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _title_classes = ['fw-bold', '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,
+    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(['fw-bold', 'mb-3']) %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: _item.title,
+        title_tag: _item.title_tag|default('h4'),
+        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 %}