@openeuropa/bcl-theme-joinup 0.28.1 → 1.0.0

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

@@ -7,12 +7,12 @@
   - id (string) (default: '')
   - type (string) (default: 'unordered')
     - options ['unordered', 'ordered', 'actionable']
-  - items (array of objects: list item object or Button and Link component object if type actionable)
+  - items (badge or link or button [])
       format: [
       {
         - html (string)
         - variant (string)
-        - badge (predefined object Badge component)
+        ...badge
       }
       {
         ...Link
@@ -27,7 +27,7 @@
   - attributes (drupal attrs)
 #}
 
-{% set _flush = flush|default(false) %}
+{% set _flush = flush ?? false %}
 {% set _horizontal = horizontal|default('') %}
 {% set _id = id|default('') %}
 {% set _type = type|default('unordered') %}

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

@@ -5,9 +5,9 @@
   - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
+  - items: (card[])
   - variant: (string) (default: 'default-1-col')
     options [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
-  - items: (array of objects of type card)
   - link: (object of type link)
   - alignment: (string) (default: '')
     options ['start', 'end', 'center', 'baseline', 'stretch']

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

@@ -3,7 +3,7 @@
 {# Parameters:
   - size (string) default('')
     options: sm, lg, xl, fullscreen
-  - id (boolean) (default: 'modal-' ~ random(1000))
+  - id (boolean) (default: modal-random(1000))
   - fullscreen_responsive (string) (default: '')
     options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
@@ -25,9 +25,9 @@
 {% set _size =  size|default('') %}
 {% set _id = id|default('modal-' ~ random(1000)) %}
 {% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
-{% set _static_backdrop = static_backdrop|default(false) %}
-{% set _verticaly_centered = verticaly_centered|default(false) %}
-{% set _scrollable = scrollable|default(false) %}
+{% set _static_backdrop = static_backdrop ?? false %}
+{% set _verticaly_centered = verticaly_centered ?? false %}
+{% set _scrollable = scrollable ?? false %}
 {% set _header = header|default('') %}
 {% set _messages = messages|default('') %}
 {% set _body = body|default('') %}

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

@@ -33,7 +33,7 @@
 {% set _form = form|default({}) %}
 {% set _expand = expand|default('lg') %}
 {% set _color_set = color_set|default('light') %}
-{% set _disable_collapse = disable_collapse|default(false) %}
+{% set _disable_collapse = disable_collapse ?? false %}
 
 {% set _classes = ['navbar', 'navbar-expand-' ~ _expand] %}
 {% if _background is not empty %}

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

@@ -12,14 +12,14 @@
   - tabs_content (boolean) (default: false)
   - nav (boolean) (default: false)
   - navbar (boolean) (default: false)
-  - items (array of objects)
+  - items (object[])
     format: [
       {
-        - Link or Button object component
+        - link or button
         - 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
+        - navigation (navigation Object)
       }
     ]
   - attributes (drupal attrs)
@@ -31,14 +31,14 @@
   {% import _self as navigation %}
 
   {% set _id = id|default('') %}
-  {% set _pills = pills|default(false) %}
-  {% set _tabs = tabs|default(false) %}
-  {% set _vertical = vertical|default(false) %}
-  {% set _full_width = full_width|default(false) %}
+  {% set _pills = pills ?? false %}
+  {% set _tabs = tabs ?? false %}
+  {% set _vertical = vertical ?? false %}
+  {% set _full_width = full_width ?? false %}
   {% set _alignment = alignment|default('') %}
-  {% set _tabs_content = tabs_content|default(false) %}
-  {% set _nav = nav|default(false) %}
-  {% set _navbar = navbar|default(false) %}
+  {% set _tabs_content = tabs_content ?? false %}
+  {% set _nav = nav ?? false %}
+  {% set _navbar = navbar ?? false %}
   {% set _items = items|default([]) %}
 
   {% if _navbar %}

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

@@ -2,7 +2,7 @@
 
 {# Parameters:
   - title: (string) (default: '')
-  - title_tag: (string) (default: 'h3')
+  - title_tag: (string) (default: 'h2')
   - title_link: (link object) (default: {})
   - title_attributes (drupal attrs)
   - placement (string) (default: '') (start, end, top, bottom)
@@ -27,7 +27,7 @@
 {% set _placement = placement|default('') %}
 {% set _id = id|default('') %}
 {% set _body = body|default('') %}
-{% set _with_body_scroll = with_body_scroll|default(false) %}
+{% set _with_body_scroll = with_body_scroll ?? false %}
 {% set _with_backdrop = with_backdrop ?? true %}
 {% set _with_close = with_close ?? true %}
 {% set _close_aria_label = close_aria_label|default('') %}

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

@@ -0,0 +1,73 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - path (string) (default: '')
+  - label (string) (default: '')
+  - disabled (boolean) (default: false)
+  - active (boolean) (default: false)
+  - aria_label (string) (default: '') - deprecated, use attributes
+  - icon (icon object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _path = path|default('') %}
+{% set _label = label|default('') %}
+{% set _disabled = disabled ?? false %}
+{% set _active = active ?? false %}
+{% set _aria_label = aria_label|default('') %}
+{% set _icon = icon|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _icon_name = icon_name|default('') %}
+{% set _icon_html = icon_html|default('') %}
+{% set _classes = ['page-link'] %}
+
+{% if _icon_path is not empty and _icon is empty %}
+  {% if _icon_name is not empty %}
+    {% set _icon = _icon|merge({
+      name: _icon_name,
+      path: _icon_path,
+      size: "fluid"
+    }) %}
+    {% set _label = "" %}
+  {% endif %}
+{% else %}
+  {% if _icon_html is not empty %}
+    {% set _label %}
+      <span aria-hidden="true">{{- _icon_html -}}</span>
+    {% endset %}
+  {% endif %}
+{% endif %}
+
+{% if _icon is not empty %}
+  {% set _icon = _icon|merge({
+    path: _icon_path,
+  }) %}
+{% 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 _active %}
+  {% set attributes = attributes.setAttribute('aria-current', 'page' ) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _path %}
+  {%- include '@oe-bcl/bcl-link/link.html.twig' with {
+    label: _label,
+    path: _path,
+    disabled: _disabled,
+    icon: _icon,
+    attributes: attributes,
+  } only -%}
+{% else %}
+  <div {{ attributes }}>{{- _label -}}</div>
+{% endif %}
+
+{% endapply %}

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

@@ -5,49 +5,27 @@
     - options ['sm', 'lg']
   - alignment (string) (default: '')
     - options ['end', 'center']
-  - aria_label (string) (default: '')
   - variant: (string) (default: '')
+    - options: ['glossary']
+  - aria_label (string) (default: '') - deprecated, use attributes
   - 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)
-      - label (string)
-      - disabled (boolean)
-      - aria_label (string)
-      - icon (Icon component)
-    }
-  - next (object)
-    format: {
-      - path (string)
-      - label (string)
-      - disabled (boolean)
-      - 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)
+  - ellipsis_before (boolean) (default: false)
+  - ellipsis_after (boolean) (default: false)
+  - first (pagination Item object) (default: {})
+  - prev (pagination Item object) (default: {})
+  - next (pagination Item object) (default: {})
+  - last (pagination Item object) (default: {})
+  - items (pagination item[]) (default: [])
     format: [
     {
-      - path (string)
-      - label (string)
-      - disabled (boolean)
-      - active (boolean)
+      - path (string) (default: '')
+      - label (string) (default: '')
+      - disabled (boolean) (default: false)
+      - active (boolean) (default: false)
+      - aria_label (string) (default: '') - deprecated, use attributes
+      - icon (Icon component) (default: {})
+      - attributes (drupal attrs)
     }
   - icon_path (string) (default: '')
   - attributes (drupal attrs)
@@ -55,32 +33,90 @@
 
 {% set _size = size|default('') %}
 {% set _alignment = alignment|default('') %}
-{% set _aria_label = aria_label|default('') %}
 {% set _variant = variant|default('') %}
-{% set _enable_prev_next_icon = enable_prev_next_icon|default(false) %}
+{% set _aria_label = aria_label|default('') %}
+{% set _enable_prev_next_icon = enable_prev_next_icon ?? false %}
 {% set _enable_first_last_icon = enable_first_last_icon ?? true %}
+{% set _ellipsis_before = ellipsis_before ?? false %}
+{% set _ellipsis_after = ellipsis_after ?? false %}
 {% set _first = first|default({}) %}
 {% set _prev = prev|default({}) %}
 {% set _next = next|default({}) %}
 {% set _last = last|default({}) %}
 {% set _items = items|default([]) %}
 {% set _icon_path = icon_path|default('') %}
+{% set _internal_items = [] %}
 
-{% set _classes = 'pagination' %}
-{% if _size is not empty %}
-  {% set _classes = _classes ~ ' pagination-' ~ _size %}
+{% if _enable_first_last_icon %}
+  {% if _first is not empty %}
+    {% set _first = _first|merge({
+      icon_html: "«",
+      icon_name: "chevron-double-left",
+    }) %}
+  {% endif %}
+  {% if _last is not empty %}
+    {% set _last = _last|merge({
+      icon_html: '»',
+      icon_name: "chevron-double-right",
+    }) %}
+  {% endif %}
 {% endif %}
-{% if _variant is not empty %}
-  {% set _classes = _classes ~ ' pagination--' ~ _variant %}
+
+{% if _enable_prev_next_icon %}
+  {% if _prev is not empty %}
+    {% set _prev = _prev|merge({
+      icon_html: "‹",
+      icon_name: "chevron-left",
+    }) %}
+  {% endif %}
+  {% if _next is not empty %}
+    {% set _next = _next|merge({
+      icon_html: "›",
+      icon_name: "chevron-right",
+    }) %}
+  {% endif %}
 {% endif %}
-{% if _alignment is not empty %}
-  {% set _classes = _classes ~ ' justify-content-' ~ _alignment %}
+
+
+{% set _internal_items = _internal_items|merge([_first, _prev]) %}
+
+{% set _ellipsis_markup %} … {% endset %}
+
+{% if _ellipsis_before %}
+  {% set _ellipsis_before_item = {
+    icon_html: _ellipsis_markup,
+    icon_path: "",
+  } %}
+  {% set _internal_items = _internal_items|merge([_ellipsis_before_item]) %}
+{% endif %}
+
+{% set _internal_items = _internal_items|merge(_items) %}
+
+{% if _ellipsis_after %}
+  {% set _ellipsis_after_item = {
+    icon_html: _ellipsis_markup,
+    icon_path: "",
+  } %}
+  {% set _internal_items = _internal_items|merge([_ellipsis_after_item]) %}
 {% endif %}
 
+{% set _internal_items = _internal_items|merge([_next, _last]) %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set _classes = ['pagination'] %}
+{% if _size is not empty %}
+  {% set _classes = _classes|merge(['pagination-' ~ _size]) %}
+{% endif %}
+{% if _variant is not empty %}
+  {% set _classes = _classes|merge(['pagination--' ~ _variant]) %}
+{% endif %}
+{% if _alignment is not empty %}
+  {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
+{% endif %}
+
 {% set attributes = attributes.setAttribute('role', 'navigation') %}
 
 {% if _variant == 'glossary' %}
@@ -90,188 +126,32 @@
 {% 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 %}
-{% endif %}
 
 <nav
   {{ 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"
+  <ul class="{{ _classes|join(' ') }}">
+{% if _internal_items is not empty and _internal_items is iterable %}
+  {% for _item in _internal_items %}
+    {% if _item is not empty %}
+      {% set _item_class = ['page-item'] %}
+      {% if _item.disabled %}
+        {% set _item_class = _item_class|merge(['disabled']) %}
+      {% endif %}
+      {% if _item.active %}
+        {% set _item_class = _item_class|merge(['active']) %}
+      {% endif %}
+      <li class="{{ _item_class|join(' ') }}">
+        {% if _item.icon_path is not defined %}
+          {% set _item = _item|merge({
+            icon_path: _icon_path,
+          }) %}
         {% 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 %}
-      {% set _prev_class = _prev_class ~ ' disabled' %}
-    {% endif %}
-    <li class="{{ _prev_class }}">
-      <a
-        class="page-link"
-        href="{{ _prev.path }}"
-        {% if _prev.disabled %}
-        tabindex="-1"
-        aria-disabled="true"
-        {% endif %}
-        {%- if _prev.aria_label -%}
-        aria-label="{{ _prev.aria_label }}"
-        {%- endif -%}
-      >
-      {%- if _enable_prev_next_icon -%}
-        {%- if _prev.icon is not empty -%}
-          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _prev.icon only -%}
-        {%- else -%}
-          {%- 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 -}}
-      {%- endif -%}
-      </a>
-    </li>
-  {% endif %}
-  {% if _items is not empty and _items is iterable %}
-    {% for _item in _items %}
-    {% set _item_class = 'page-item' %}
-    {% if _item.disabled %}
-      {% set _item_class = _item_class ~ ' disabled' %}
+        {% include '@oe-bcl/bcl-pagination/pagination-item.html.twig' with _item only %}
+      </li>
     {% endif %}
-    {% if _item.active %}
-      {% set _item_class = _item_class ~ ' active' %}
-    {% endif %}
-    <li class="{{ _item_class }}">
-      <a
-        class="page-link"
-        href="{{ _item.path }}"
-        {% if _item.disabled %}
-        tabindex="-1"
-        aria-disabled="true"
-        {% endif %}
-        {% if _item.active %}
-        aria-current="page"
-        {% endif %}
-      >
-        {{- _item.label -}}
-      </a>
-    </li>
-    {% endfor %}
-  {% endif %}
-  {% if _next is not empty %}
-    {% set _next_class = 'page-item' %}
-    {% if _next.disabled %}
-      {% set _next_class = _next_class ~ ' disabled' %}
-    {% endif %}
-    <li class="{{ _next_class }}">
-      <a
-        class="page-link"
-        href="{{ _next.path }}"
-        {% if _next.disabled %}
-        tabindex="-1"
-        aria-disabled="true"
-        {% endif %}
-        {%- if _next.aria_label -%}
-        aria-label="{{ _next.aria_label }}"
-        {%- endif -%}
-      >
-      {%- if _enable_prev_next_icon -%}
-        {%- if _next.icon is not empty -%}
-          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _next.icon only -%}
-        {%- else -%}
-          {%- 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>
-  {% endif %}
+  {% endfor %}
+{% endif %}
   </ul>
 </nav>
 

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

@@ -17,9 +17,9 @@
 {% set _progress = progress|default(0) %}
 {% set _min = min|default(0) %}
 {% set _max = max|default(100) %}
-{% set _striped = striped|default(false) %}
-{% set _animated = animated|default(false) %}
-{% set _hidden_label = hidden_label|default(false) %}
+{% set _striped = striped ?? false %}
+{% set _animated = animated ?? false %}
+{% set _hidden_label = hidden_label ?? false %}
 {% set _label = label|default('') %}
 {% set _bar_label = bar_label|default('') %}
 {% set _variant = variant|default('') %}

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

@@ -5,26 +5,22 @@
 {% endblock %}
 
 {% block content %}
-  {% 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 %}
   {% if project_status is not empty %}
+    {% if project_status_title is not empty %}
+      {% set _project_title_attributes = create_attribute().addClass(['mb-4']) %}
+      {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+        title: project_status_title,
+        title_tag: 'h2',
+        attributes: create_attribute().setAttribute('id', project_status_id),
+      } only %}
+    {% endif %}
     {% include '@oe-bcl/bcl-project-status/project-status.html.twig' with project_status %}
-  {% endif %}
-  {% if project_contributions is not empty %}
-    {% include '@oe-bcl/bcl-project-status/project-contributions.html.twig' with project_contributions %}
-  {% endif %}
-
-  {% if status_lists is not empty %}
-    {% include '@oe-bcl/bcl-project/project-lists.html.twig' with status_lists only %}
+    {% if project_contributions is not empty %}
+      {% include '@oe-bcl/bcl-project-status/project-contributions.html.twig' with project_contributions %}
+    {% endif %}
+    {% if status_lists is not empty %}
+      {% include '@oe-bcl/bcl-project/project-lists.html.twig' with status_lists only %}
+    {% endif %}
   {% endif %}
 
   {% if first_paragraphs is defined and first_paragraphs is not empty %}
@@ -59,17 +55,6 @@
     {% endfor %}
   {% endif %}
 
-  {% if gallery.main_title is not empty %}
-    {% 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 is not empty %}
   <div class="mt-3 mb-4-5">
     {% include '@oe-bcl/bcl-gallery/gallery.html.twig' with gallery only %}

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

@@ -2,7 +2,7 @@
 
 {# Parameters:
   - corporate_contributions (string) (default: '') // value every 5 percent
-  - legend (description list object) (default: false)
+  - legend (description list object) (default: {})
   - chart (boolean) (default: false)
 
   Blocks - 
@@ -12,7 +12,7 @@
 
 {% set _corporate_contributions = corporate_contributions|default('') %}
 {% set _legend = legend|default({}) %}
-{% set _chart = chart|default(false) %}
+{% set _chart = chart ?? false %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}