@openeuropa/bcl-theme-joinup 0.22.0 → 0.25.0

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) %}

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

@@ -1,12 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - title (object) (default: {})
-    format: {
-      content: '',
-      tag: '',
-      classes: ''
-    }
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h1')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - subtitle (object) (default: {})
     format: {
       content: '',
@@ -30,9 +28,10 @@
   - horizontal (boolean) (default: false)
   - horizontal_grid (object) (default: {})
     format: {
-      left_col_classes (default: 'col-4')
-      right_col_classes (default: 'col-8')
+      left_col_classes (default: 'bcl-card-start-col')
+      right_col_classes (default: 'col')
       gutter (default: '')
+      gutter (default: '') - options: ['small', 'large']
     }
   - variant (string) (default: '')
   - border_variant (string) (default: '')
@@ -44,6 +43,8 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+  - links (array of link object) (default: [])
+  - attributes (drupal attrs)
 
   Blocks
     - card_date
@@ -51,7 +52,10 @@
     - card_links
 #}
 
-{% set _title = title|default({}) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _subtitle = subtitle|default({}) %}
 {% set _text = text|default({}) %}
 {% set _content = content|default('') %}
@@ -60,8 +64,9 @@
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal|default(false) %}
 {% set _horizontal_grid = horizontal_grid|default({
-  left_col_classes: 'col-4',
-  right_col_classes: 'col-8'
+  left_col_classes: 'bcl-card-start-col',
+  right_col_classes: 'col',
+  left_col_size: '',
 }) %}
 {% set _border_variant = border_variant|default('') %}
 {% set _text_color = text_color|default('') %}
@@ -72,19 +77,13 @@
 {% set _extra_classes_footer = extra_classes_footer|default('') %}
 {% set _badges = badges|default([]) %}
 {% set _links = links|default([]) %}
+
 {% set _classes = ['card'] %}
 {% if _text_color is not empty %}
   {% set _classes = _classes|merge(['text-' ~ _text_color]) %}
 {% endif %}
 {% if _variant is not empty %}
   {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
-  {% if _text_color is empty %}
-    {% if _variant == 'warning' or _variant == 'info' or _variant == 'light' %}
-      {% set _classes = _classes|merge(['text-dark']) %}
-    {% else %}
-      {% set _classes = _classes|merge(['text-white']) %}
-    {% endif %}
-  {% endif %}
 {% endif %}
 {% if _border_variant is not empty %}
   {% set _classes = _classes|merge(['border-' ~ _border_variant]) %}
@@ -116,7 +115,7 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
-<div
+<article
   {{ attributes }}
 >
 {% if _card_header is not empty %}
@@ -171,16 +170,18 @@
 <div class='{{ _horizontal_grid.right_col_classes }}'>
 {% endif %}
   <div class='{{ _body_classes }}'>
-  {%- if _title is not empty -%}
-    {% set _title_tag = _title.tag ?? 'h5' %}
-    <{{ _title_tag }}
-      {% set _title_attributes = title.attributes ?: create_attribute() %}
-      {% set _title_attributes = _title_attributes.addClass("card-title") %}
-      {{ _title_attributes }}
-    >
-      {{- title.content -}}
-    </{{ _title_tag }}>
-  {%- endif -%}
+  {% if _title is not empty %}
+    {% if _title_attributes.class is empty %}
+      {% set _title_attributes = _title_attributes.addClass('fs-4') %}
+    {% endif %}
+    {% set _title_attributes = _title_attributes.addClass('card-title') %}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes,
+    } only %}
+  {% endif %}
   {%- if _subtitle is not empty -%}
     {% set _subtitle_tag = _subtitle.tag ?? 'h6' %}
     <{{ _subtitle_tag }}
@@ -229,7 +230,7 @@
     {%- if _links is not empty and _links is iterable -%}
       <div class="mt-2-5 mb-2">
       {% for _link in _links %}
-        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-4-5">
+        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-md-4-5">
           {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
         </div>
       {% endfor %}
@@ -270,6 +271,6 @@
     {{- _card_footer -}}
   </div>
 {% endif %}
-</div>
+</article>
 
 {% endspaceless %}

package/templates/bcl-card-layout/card-layout.html.twig

@@ -3,7 +3,7 @@
 {# Parameters:
   - type (string) (default: 'group')
     options: ['group', 'grid', 'masonry']
-  - items (array of Card) (default: [])
+  - items (array of object type card) (default: [])
   - grid_columns (int) (default: 1)
     options: ['1', '2', '3']
   - responsiveness (string) (default: '')
@@ -14,6 +14,7 @@
     options: ['0', '1', '2', '3', '4', '5']
   - equal_height (boolean) (default: false)
   - cols_extra_classes (string) (default: '')
+  - attributes (drupal attrs)
 
   Blocks
     - card_layout_card
@@ -27,6 +28,7 @@
 {% set _gutter = gutter|default('') %}
 {% set _equal_height = equal_height|default(false) %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
+
 {% set _cols_classes = 'col' %}
 
 {% if _cols_extra_classes is not empty %}

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

@@ -1,7 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - id (string) (default: '')
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - autoplay (boolean) (default: true)
   - autoinit (boolean) (default: true)
   - dark (boolean) (default: false)
@@ -14,30 +17,36 @@
       caption_title (string) 
       interval (integer) (default: 0)
      }
-     ...
    ],
   - fade (boolean) (default: false)
   - with_controls (boolean) (default: true)
-  - previous_label (string) (default: '')
+  - prev_label (string) (default: '')
   - next_label (string) (default: '')
   - with_indicators (boolean) (default: false)
   - rounded_indicators (boolean) (default: false)
+  - disable_touch (boolean) (default: false)
+  - 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('') %}
+{% set _autoinit = autoinit ?? true %}
+{% set _autoplay = autoplay ?? true %}
+{% set _dark = dark|default(false) %}
+{% set _active_item = active_item|default(1) %}
 {% set _items = items|default([]) %}
+{% set _fade = fade|default(false) %}
 {% set _with_controls = with_controls ?? true %}
-{% set _active_item = active_item|default(1) %}
 {% set _prev_label = prev_label|default('') %}
 {% set _next_label = next_label|default('') %}
 {% set _with_indicators = with_indicators|default(false) %}
 {% set _rounded_indicators = rounded_indicators|default(false) %}
-{% set _classes = ['carousel slide'] %}
-{% set _autoinit = autoinit ?? true %}
-{% set _autoplay = autoplay ?? true %}
 {% set _disable_touch = disable_touch|default(false) %}
-{% set _fade = fade|default(false) %}
-{% set _dark = dark|default(false) %}
+
+{% set _classes = ['carousel', 'slide'] %}
 
 {% if _fade %}
   {% set _classes = _classes|merge(['carousel-fade']) %}
@@ -72,6 +81,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 -%}
+
 <div
   {{ attributes }}
 >