@openeuropa/bcl-twig-templates 0.22.0 → 0.25.0

package/package.json

@@ -2,74 +2,75 @@
   "name": "@openeuropa/bcl-twig-templates",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.22.0",
+  "version": "0.25.0",
   "description": "OE Bcl Twig Templates",
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@openeuropa/bcl-accordion": "^0.22.0",
-    "@openeuropa/bcl-alert": "^0.22.0",
-    "@openeuropa/bcl-badge": "^0.22.0",
-    "@openeuropa/bcl-banner": "^0.22.0",
-    "@openeuropa/bcl-base-templates": "^0.22.0",
-    "@openeuropa/bcl-blockquote": "^0.22.0",
-    "@openeuropa/bcl-breadcrumb": "^0.22.0",
-    "@openeuropa/bcl-button": "^0.22.0",
-    "@openeuropa/bcl-button-group": "^0.22.0",
-    "@openeuropa/bcl-card": "^0.22.0",
-    "@openeuropa/bcl-card-layout": "^0.22.0",
-    "@openeuropa/bcl-carousel": "^0.22.0",
-    "@openeuropa/bcl-contact-form": "^0.22.0",
-    "@openeuropa/bcl-content-banner": "^0.22.0",
-    "@openeuropa/bcl-date-block": "^0.22.0",
-    "@openeuropa/bcl-description-list": "^0.22.0",
-    "@openeuropa/bcl-dropdown": "^0.22.0",
-    "@openeuropa/bcl-event": "^0.22.0",
-    "@openeuropa/bcl-fact-figures": "^0.22.0",
-    "@openeuropa/bcl-featured-media": "^0.22.0",
-    "@openeuropa/bcl-file": "^0.22.0",
-    "@openeuropa/bcl-footer": "^0.22.0",
-    "@openeuropa/bcl-form": "^0.22.0",
-    "@openeuropa/bcl-form-input": "^0.22.0",
-    "@openeuropa/bcl-gallery": "^0.22.0",
-    "@openeuropa/bcl-group": "^0.22.0",
-    "@openeuropa/bcl-header": "^0.22.0",
-    "@openeuropa/bcl-heading": "^0.22.0",
-    "@openeuropa/bcl-icon": "^0.22.0",
-    "@openeuropa/bcl-inpage-navigation": "^0.22.0",
-    "@openeuropa/bcl-landing-page": "^0.22.0",
-    "@openeuropa/bcl-language-list": "^0.22.0",
-    "@openeuropa/bcl-language-switcher": "^0.22.0",
-    "@openeuropa/bcl-link": "^0.22.0",
-    "@openeuropa/bcl-links-block": "^0.22.0",
-    "@openeuropa/bcl-list-group": "^0.22.0",
-    "@openeuropa/bcl-listing": "^0.22.0",
-    "@openeuropa/bcl-modal": "^0.22.0",
-    "@openeuropa/bcl-multilingual": "^0.22.0",
-    "@openeuropa/bcl-navbar": "^0.22.0",
-    "@openeuropa/bcl-navigation": "^0.22.0",
-    "@openeuropa/bcl-news": "^0.22.0",
-    "@openeuropa/bcl-offcanvas": "^0.22.0",
-    "@openeuropa/bcl-page": "^0.22.0",
-    "@openeuropa/bcl-pagination": "^0.22.0",
-    "@openeuropa/bcl-person": "^0.22.0",
-    "@openeuropa/bcl-placeholder": "^0.22.0",
-    "@openeuropa/bcl-progress": "^0.22.0",
-    "@openeuropa/bcl-project": "^0.22.0",
-    "@openeuropa/bcl-project-status": "^0.22.0",
-    "@openeuropa/bcl-recent-activities": "^0.22.0",
-    "@openeuropa/bcl-search": "^0.22.0",
-    "@openeuropa/bcl-search-form": "^0.22.0",
-    "@openeuropa/bcl-select": "^0.22.0",
-    "@openeuropa/bcl-spinner": "^0.22.0",
-    "@openeuropa/bcl-subscription": "^0.22.0",
-    "@openeuropa/bcl-subscription-block": "^0.22.0",
-    "@openeuropa/bcl-table": "^0.22.0",
-    "@openeuropa/bcl-textarea": "^0.22.0",
-    "@openeuropa/bcl-timeline": "^0.22.0",
-    "@openeuropa/bcl-toast": "^0.22.0",
-    "@openeuropa/bcl-user": "^0.22.0",
+    "@openeuropa/bcl-accordion": "^0.25.0",
+    "@openeuropa/bcl-alert": "^0.25.0",
+    "@openeuropa/bcl-badge": "^0.25.0",
+    "@openeuropa/bcl-banner": "^0.25.0",
+    "@openeuropa/bcl-base-templates": "^0.25.0",
+    "@openeuropa/bcl-blockquote": "^0.25.0",
+    "@openeuropa/bcl-breadcrumb": "^0.25.0",
+    "@openeuropa/bcl-button": "^0.25.0",
+    "@openeuropa/bcl-button-group": "^0.25.0",
+    "@openeuropa/bcl-card": "^0.25.0",
+    "@openeuropa/bcl-card-layout": "^0.25.0",
+    "@openeuropa/bcl-carousel": "^0.25.0",
+    "@openeuropa/bcl-contact-form": "^0.25.0",
+    "@openeuropa/bcl-content-banner": "^0.25.0",
+    "@openeuropa/bcl-date-block": "^0.25.0",
+    "@openeuropa/bcl-description-list": "^0.25.0",
+    "@openeuropa/bcl-dropdown": "^0.25.0",
+    "@openeuropa/bcl-event": "^0.25.0",
+    "@openeuropa/bcl-fact-figures": "^0.25.0",
+    "@openeuropa/bcl-featured-media": "^0.25.0",
+    "@openeuropa/bcl-file": "^0.25.0",
+    "@openeuropa/bcl-footer": "^0.25.0",
+    "@openeuropa/bcl-form": "^0.25.0",
+    "@openeuropa/bcl-form-input": "^0.25.0",
+    "@openeuropa/bcl-gallery": "^0.25.0",
+    "@openeuropa/bcl-glossary": "^0.25.0",
+    "@openeuropa/bcl-group": "^0.25.0",
+    "@openeuropa/bcl-header": "^0.25.0",
+    "@openeuropa/bcl-heading": "^0.25.0",
+    "@openeuropa/bcl-icon": "^0.25.0",
+    "@openeuropa/bcl-inpage-navigation": "^0.25.0",
+    "@openeuropa/bcl-landing-page": "^0.25.0",
+    "@openeuropa/bcl-language-list": "^0.25.0",
+    "@openeuropa/bcl-language-switcher": "^0.25.0",
+    "@openeuropa/bcl-link": "^0.25.0",
+    "@openeuropa/bcl-links-block": "^0.25.0",
+    "@openeuropa/bcl-list-group": "^0.25.0",
+    "@openeuropa/bcl-listing": "^0.25.0",
+    "@openeuropa/bcl-modal": "^0.25.0",
+    "@openeuropa/bcl-multilingual": "^0.25.0",
+    "@openeuropa/bcl-navbar": "^0.25.0",
+    "@openeuropa/bcl-navigation": "^0.25.0",
+    "@openeuropa/bcl-news": "^0.25.0",
+    "@openeuropa/bcl-offcanvas": "^0.25.0",
+    "@openeuropa/bcl-page": "^0.25.0",
+    "@openeuropa/bcl-pagination": "^0.25.0",
+    "@openeuropa/bcl-person": "^0.25.0",
+    "@openeuropa/bcl-placeholder": "^0.25.0",
+    "@openeuropa/bcl-progress": "^0.25.0",
+    "@openeuropa/bcl-project": "^0.25.0",
+    "@openeuropa/bcl-project-status": "^0.25.0",
+    "@openeuropa/bcl-recent-activities": "^0.25.0",
+    "@openeuropa/bcl-search": "^0.25.0",
+    "@openeuropa/bcl-search-form": "^0.25.0",
+    "@openeuropa/bcl-select": "^0.25.0",
+    "@openeuropa/bcl-spinner": "^0.25.0",
+    "@openeuropa/bcl-subscription": "^0.25.0",
+    "@openeuropa/bcl-subscription-block": "^0.25.0",
+    "@openeuropa/bcl-table": "^0.25.0",
+    "@openeuropa/bcl-textarea": "^0.25.0",
+    "@openeuropa/bcl-timeline": "^0.25.0",
+    "@openeuropa/bcl-toast": "^0.25.0",
+    "@openeuropa/bcl-user": "^0.25.0",
     "copyfiles": "2.4.1",
     "rimraf": "3.0.2"
   },
@@ -92,5 +93,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "57304ad94ae3c234f2f2b904208ce540a7a53f23"
+  "gitHead": "f50c7dfeab8695bbb5c18d5f7d5304509512268a"
 }

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

@@ -2,21 +2,28 @@
 
 {#
   Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - id (int) (default: random(1000))
-  - flush (boolean) (default: false) flush variant of the accordion
+  - flush (boolean) (default: false)
   - items (array) (default: []): format: [
       {
         title: (string),
         title_tag: (string),
         content: (block),
-        stay_open (boolean) (default: false) stay open after another selected
+        stay_open (boolean) (default: false)
       },
-      ...
     ]
-  - open_item_id (int) (default: 0) index value of the item to open (starting from 1),
-    all closed by default (0)
+  - open_item_id (int) (default: 0)
+  - attributes (drupal attrs)
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _id = id|default(random(1000)) %}
 {% set _flush = flush|default(false) %}
 {% set _items = items|default([]) %}
@@ -36,6 +43,15 @@
 <div
   {{ attributes }}
 >
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
 {% for _item in _items %}
   {% set _open_item = _open_item_id == loop.index %}
   {% set _button_classes = ['accordion-button'] %}

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

@@ -8,15 +8,17 @@
   - animated_dismiss (boolean) (default: true)
   - icon_path (string) (default: '')
   - icon_name (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _message = message|default('') %}
-{% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icon_path = icon_path|default('') %}
+{% set _variant = variant|default('primary') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
+{% set _icon_path = icon_path|default('') %}
 {% set _icon_name = icon_name|default('') %}
+
 {% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
 {% set _icon_names = {
     primary: "info-circle-fill",
@@ -62,7 +64,7 @@
 {% endif %}
   <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
-    <h4 class="alert-heading">{{ _heading }}</h4>
+    <div class="alert-heading h4">{{ _heading }}</div>
   {%- endif -%}
   {%- if _message is not empty -%}
     {{- _message -}}

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

@@ -10,18 +10,20 @@
   - rounded_pill (boolean) (default: false)
   - outline (boolean) (default: false)
   - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
-{% set _rounded_pill = rounded_pill|default(false) %}
-{% set _outline = outline|default(false) %}
-{% set _background = background|default('primary') %}
 {% set _label = label|default('') %}
-{% set _classes = ['badge'] %}
+{% set _background = background|default('primary') %}
 {% set _url = url|default('') %}
-{% set _icon_path = icon_path|default('') %}
 {% set _title = title|default(_label) %}
 {% set _dismissible = dismissible|default(false) %}
 {% set _assistive_text = assistive_text|default('') %}
+{% set _rounded_pill = rounded_pill|default(false) %}
+{% set _outline = outline|default(false) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _classes = ['badge'] %}
 
 {% if _rounded_pill %}
   {% set _classes = _classes|merge(['rounded-pill']) %}
@@ -33,22 +35,25 @@
   {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
 {% endif %}
 
-{% if _background in ['light', 'warning'] %}
-  {% set _classes = _classes|merge(['text-dark']) %}
-{% endif %}
-
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{%- if _url is not empty -%}
+  {% set attributes = attributes.setAttribute('title', _title).setAttribute('href', _url) %}
+{%- endif -%}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 {%- if _url is not empty -%}
-<a href="{{ _url }}" title="{{ _title }}">
+<a
+  {{ attributes }}
+>
+{%- else -%}
+<span
+  {{ attributes }}
+>
 {%- endif -%}
-  <span
-    {{ attributes }}
-  >
   {%- if _assistive_text is not empty -%}
     <span class="visually-hidden">
       {{- _assistive_text -}}
@@ -63,9 +68,10 @@
       } only %}
     </span>
   {%- endif -%}
-  </span>
 {%- if _url is not empty -%}
 </a>
+{%- else -%}
+</span>
 {%- endif -%}
 
 {% endspaceless %}

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

@@ -1,19 +1,23 @@
 {% spaceless %}
 
 {# Parameters:
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "div")
-  - description: (string) (default: "")
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'div')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - description: (string) (default: '')
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
-  - content_classes: (string) (default: "")
+  - content_classes: (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
+{% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
@@ -23,7 +27,6 @@
 {% set _full_width = full_width|default(false) %}
 {% set _content_classes = content_classes|default('') %}
 
-
 {% set _content_class = 'bcl-banner__content' %}
 {% if _content_classes is not empty %}
   {% set _content_class = _content_class ~ " " ~ _content_classes %}
@@ -60,6 +63,7 @@
         {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
           title: _title,
           title_tag: _title_tag,
+          title_link: _title_link,
           attributes: _title_attributes,
         } only %}
       {% endif %}

package/templates/bcl-base-templates/content-type.html.twig

@@ -16,6 +16,7 @@
   - header
   - footer
   - content
+  - content_row
   - sidebar
   - banner
   - feedback
@@ -37,6 +38,7 @@
   {% set _col_classes = {
     left: [
       'col-12',
+      'bcl-sidebar',
     ],
     right: [
       'col-12',
@@ -92,6 +94,9 @@
 
   <div class="container mt-md-4-75 mt-4">
     <div class="row">
+      {% block content_row %}
+        {{ content_row }}
+      {% endblock %}
     {% if _with_sidebar %}
       <div class="{{ _col_classes.left|join(' ') }}">
         {% block sidebar %}{% endblock %}
@@ -116,6 +121,9 @@
       {% block related %}
         {{ related }}
       {% endblock %}
+      {% block share %}
+        {{ share }}
+      {% endblock %}
     </div>
   </div>
 </main>
@@ -123,9 +131,6 @@
 {% block feedback %}
   {{ feedback }}
 {% endblock %}
-{% block share %}
-  {{ share }}
-{% endblock %}
 
 {% if _with_footer %}
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}

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

@@ -1,29 +1,41 @@
 {#
   Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - listing (object) (default: {})
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
-  - page_title (string) (default: '')
 #}
 
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _listing = listing|default({}) %}
 {% set _pagination = pagination|default({}) %}
 {% set _search = search|default({}) %}
 {% set _sidebar = sidebar|default({}) %}
-{% set _page_title = page_title|default({}) %}
+
+{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
 {% block content_top %}
+{% if filter_button %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
+{% endif %}
   <div class="row">
     <div class="col-md-6 col-lg-8 align-self-center">
-      <h4 class="mb-0">
-        <span class="text-capitalize">
-          {{- _page_title -}}
-        </span>
-        ({{ listing.items.length }})
-      </h4>
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
+        } only %}
+      {% endif %}
     </div>
     {% if badges is not empty and badges is iterable %}
       <div class="col-md-12 order-md-2 mt-3">
@@ -47,7 +59,7 @@
 
 {% block content %}
   {% if _listing is not empty %}
-    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
 {% endblock %}
 

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

@@ -1,17 +1,27 @@
 {% spaceless %}
 
 {# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - quote (string) (default: '')
   - attribution (string) (default: '')
   - cite (string) (default: '')
   - alignment (string) (default: 'left')
-    - options ["left", "center", "end"]
+    - options ['left', 'center', 'end']
+  - attributes (drupal attrs)
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _quote = quote|default('') %}
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
 {% set _alignment = alignment|default('left') %}
+
 {% set _classes = [
   'text-' ~ _alignment,
   "bg-lighter",
@@ -35,6 +45,15 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
 <figure
   {{ attributes }}
 >

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

@@ -1,7 +1,9 @@
 {% spaceless %}
 
 {# Parameters:
-  - links (array of objects of type link)
+  - links (array of objects of type link) (default: [])
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _classes = 'breadcrumb' %}

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

@@ -5,7 +5,7 @@
   - label (string) (default: '')
   - variant (string) (default: 'primary')
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
+    - options ['sm', 'md', 'lg']
   - type (string) (default: 'button')
   - outline (boolean) (default: false)
   - disabled (boolean) (default: false)
@@ -14,12 +14,13 @@
   - id (string) (default: '')
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
-    - options ["after", "before"]
+    - options ['after', 'before']
   - icon_spacing (string) (default: '')
-    - options ["sm", "md", "lg"]
-  - clean_class (boolean) (default: false)
+    - options ['sm', 'md', 'lg']
   - spinner (spinner object) (default: {})
   - show_spinner (boolean) (default: false)
+  - clean_class (boolean) (default: false)
+  - attributes (drupal attrs)
 #}
 
 {% set _label = label|default('') %}
@@ -37,6 +38,7 @@
 {% set _show_spinner = show_spinner|default(false) %}
 {% set _spinner = spinner|default({}) %}
 {% set _clean_class = clean_class|default(false) %}
+
 {% set _classes = [] %}
 {% if _clean_class == false %}
   {% set _classes = _classes|merge(['btn', 'btn-' ~ (_outline ? 'outline-' : '') ~ _variant|e('html_attr')]) %}

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

@@ -3,11 +3,12 @@
 {# Parameters:
   - vertical (boolean) (default: false)
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
-  - toolbar (boolean) (default: 'false')
+    - options ['sm', 'md', 'lg']
   - aria_label (string) (default: '')
+  - toolbar (boolean) (default: 'false')
   - toolbar_aria_label (string) (default: '')
-  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input))
+  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input)) (default: [])
+  - attributes (drupal attrs)
 #}
 
 {% set _vertical = vertical|default(false) %}