@openeuropa/bcl-theme-default 0.28.0 → 1.0.0

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

@@ -1,10 +1,10 @@
 {% apply spaceless %}
 
 {# Parameters:
-  - id (string) (default: collapse-{random number 0-1000}) - collapse custom id - optional
+  - id (string) (default: collapse-random(1000), optional)
   - message (alert object) (default: {})
-  - expandable (button object) (default: [])
-  - languages (array of link object) (default: [])
+  - expandable (button object) (default: {})
+  - languages (link[]) (default: [])
 #}
 
 {% set _id = id|default('collapse-' ~ random(1000)) %}

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

@@ -19,11 +19,11 @@
 {% set _path = path|default('#') %}
 {% set _variant = variant|default('') %}
 {% set _id = id|default('') %}
-{% set _disabled = disabled|default(false) %}
-{% set _standalone = standalone|default(false) %}
+{% set _disabled = disabled ?? false %}
+{% set _standalone = standalone ?? false %}
 {% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
-{% set _remove_icon_spacers = remove_icon_spacers|default(false) %}
+{% set _remove_icon_spacers = remove_icon_spacers ?? false %}
 
 {% set _classes = [] %}
 

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

@@ -9,7 +9,7 @@
     - options ['gray', 'transparent']
   - variant: (string) (default: 'vertical')
     - options ['vertical', 'horizontal']
-  - links (array of link objects) (default: [])
+  - links (link[]) (default: [])
   - attributes (drupal attrs)
 #}
 

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,223 +33,125 @@
 
 {% 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' %}
-  {% set attributes = attributes.setAttribute('class', 'bcl-glossary') %}
+  {% set attributes = attributes.addClass(['bcl-glossary']) %}
 {% 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 %}
-{% 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('') %}