@openeuropa/bcl-theme-default 0.15.0 → 0.19.0

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

@@ -7,7 +7,9 @@
   - items (array) (default: []): format: [
       {
         title: (string),
+        title_tag: (string),
         content: (block),
+        stay_open (boolean) (default: false) stay open after another selected
       },
       ...
     ]
@@ -23,6 +25,11 @@
 {% if _flush %}
   {% set _classes = _classes|merge(['accordion-flush']) %}
 {% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes).setAttribute('id', 'accordion-' ~ _id) %}
 
 {% if _items is not empty %}
@@ -36,7 +43,11 @@
     {% set _button_classes = _button_classes|merge(['collapsed']) %}
   {% endif %}
   <div class="accordion-item">
-    <h2 class="accordion-header" id="heading-{{ _id }}-{{ loop.index }}">
+    {%- set _item_title_tag = _item.title_tag|default('h2') %}
+    <{{ _item_title_tag }} 
+      class="accordion-header" 
+      id="heading-{{ _id }}-{{ loop.index }}"
+    >
       {% set button_attributes = create_attribute()
                                 .addClass(_button_classes)
                                 .setAttribute('data-bs-toggle', 'collapse')
@@ -50,12 +61,15 @@
         clean_class: true,
         attributes: button_attributes
       } only %}
-    </h2>
+    </{{ _item_title_tag }}>
     <div
       id="collapse-{{ _id }}-{{ loop.index }}"
       class="accordion-collapse collapse{{ _open_item ? ' show' }}"
       aria-labelledby="heading-{{ _id }}-{{ loop.index }}"
+      role="region"
+    {% if not _item.stay_open %}
       data-bs-parent="#accordion-{{ _id }}"
+    {% endif %}
     >
       <div class="accordion-body">
         {%- set _content = _item.content|default('') %}

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

@@ -37,6 +37,10 @@
   {% set _classes = _classes|merge(['fade', 'show']) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes).setAttribute('role', 'alert') %}
 
 <div {{ attributes }}>
@@ -48,7 +52,7 @@
     attributes: create_attribute().addClass(['flex-shrink-0 me-3 mt-1 align-self-start']),
   } only %}
 {% endif %}
-  <div class="alert-content">
+  <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
     <h4 class="alert-heading">{{ _heading }}</h4>
   {%- endif -%}

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

@@ -8,13 +8,15 @@
   - dismissible (boolean) (default: false)
   - assistive_text (string) (default: '')
   - rounded_pill (boolean) (default: false)
+  - outline (boolean) (default: false)
   - icons_path (string) (default: '')
 #}
 
 {% set _rounded_pill = rounded_pill|default(false) %}
+{% set _outline = outline|default(false) %}
 {% set _background = background|default('primary') %}
 {% set _label = label|default('') %}
-{% set _classes = ['badge', 'bg-' ~ _background] %}
+{% set _classes = ['badge'] %}
 {% set _url = url|default('') %}
 {% set _icons_path = icons_path|default('') %}
 {% set _title = title|default(_label) %}
@@ -25,7 +27,13 @@
   {% set _classes = _classes|merge(['rounded-pill']) %}
 {% endif %}
 
-{% if _background in ['light', 'warning', 'info'] %}
+{% if _outline %}
+  {% set _classes = _classes|merge([ 'badge-outline-' ~ _background]) %}
+{% else %}
+  {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
+{% endif %}
+
+{% if _background in ['light', 'warning'] %}
   {% set _classes = _classes|merge(['text-dark']) %}
 {% endif %}
 

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

@@ -40,6 +40,11 @@
   _hero ? 'hero',
   _full_width ? 'full-width' 
   ] %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <div {{ attributes }}>

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

@@ -6,7 +6,9 @@
   - with_footer (boolean) (default: false)
   - with_banner (boolean) (default: false)
   - with_sidebar (boolean) (default: false)
-  - columns (string) (default: 3-9 )
+  - sidebar_size (string) (default: 'normal')
+    options: ['normal', 'large']
+  - landing (boolean) (default: false)
   - content_type (string) (default: '')
   - attributes (drupal attrs)
 
@@ -19,32 +21,69 @@
   - feedback
   - share
   - related
+  - messages_area
 #}
 
 {% set _with_header = header|default(false) %}
 {% set _with_footer = footer|default(false) %}
 {% set _with_banner = banner|default(false) %}
 {% set _with_sidebar = sidebar|default(false) %}
-{% set _columns = columns|default('3-9') %}
+{% set _sidebar_size = sidebar_size|default('normal') %}
+{% set _landing = landing|default(false) %}
 {% set _content_type = content_type|default('') %}
 {% set _classes = ['bcl-node-type'] %}
-{% set _col_classes = { left: 'col-md-3', right: 'col-12 col-md-9' } %}
 
-{% if _columns == '4-8' %}
-  {% set _col_classes = { left: 'col-md-4', right: 'col-12 col-md-8' } %}
-{% elseif _columns == '2-10' %}
-  {% set _col_classes = { left: 'col-md-2', right: 'col-12 col-md-10' } %}
+{% if _with_sidebar %}
+  {% set _col_classes = {
+    left: [
+      'col-12',
+    ],
+    right: [
+      'col-12',
+    ],
+  } %}
+
+  {% if _sidebar_size == 'normal' %}
+    {% set _col_classes = _col_classes|merge({
+      left: _col_classes.left|merge(['col-lg-3']),
+      right: _col_classes.right|merge(['col-lg-9', 'col-xxl-8']),
+    }) %}
+  {% endif %}
+
+  {% if _sidebar_size == 'large' %}
+    {% set _col_classes = _col_classes|merge({
+      left: _col_classes.left|merge(['col-lg-4']),
+      right: _col_classes.right|merge(['col-lg-8']),
+    }) %}
+  {% endif %}
 {% endif %}
 
 {% if _content_type is not empty %}
   {% set _classes = _classes|merge(['bcl-' ~ _content_type]) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _with_header %}
   {% include '@oe-bcl/bcl-header/header.html.twig' with header only %}
 {% endif %}
 
 <main {{ attributes }}>
+{% if messages is defined and messages is not empty %}
+  {% block messages_area %}
+  <div class="container">
+    {% for message in messages %}
+    {% set message_attributes = create_attribute().addClass(['mt-lg-5', 'mt-2']) %}
+      {% include '@oe-bcl/bcl-alert/alert.html.twig' with message|merge({
+        attributes: message_attributes,
+      }) only %}
+    {% endfor %}
+  </div>
+  {% endblock %}
+{% endif %}
+
 {% if _with_banner %}
   {% block banner %}
     {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
@@ -54,12 +93,16 @@
   <div class="container mt-md-4-75 mt-4">
     <div class="row">
     {% if _with_sidebar %}
-      <div class="{{ _col_classes.left }}">
+      <div class="{{ _col_classes.left|join(' ') }}">
         {% block sidebar %}{% endblock %}
       </div>
-      <div class="{{ _col_classes.right }}">
+      <div class="{{ _col_classes.right|join(' ') }}">
     {% else %}
-      <div class="col-md-12">
+      {% if _landing %}
+      <div class="col-12">
+      {% else %}
+      <div class="col-12 col-lg-10 col-xl-9 col-xxl-8">
+      {% endif %}
     {% endif %}
       {% block content_top %}
         {{ content_top }}

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

@@ -16,30 +16,33 @@
 
 {% block content_top %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
-  <div class="mb-3 clearfix">
-    <div class="float-end d-none d-md-flex align-items-center">
-      {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
-        attributes: create_attribute().addClass(['ms-2 mb-2']),
-      }) only %}
+  <div class="row">
+    <div class="col-md-6 col-lg-8">
+      <h4>
+        <span class="text-capitalize">
+          {{- _page_title -}}
+        </span>
+        ({{ listing.items.length }})
+      </h4>
+    </div>
+    <div class="col-md-12 order-md-2 mt-3 mt-md-1">
+      {% if badges is not empty and badges is iterable %}
+        {% for badge in badges %}
+          {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
+            attributes: create_attribute().addClass(["mb-2", "me-2"])
+          }) only %}
+        {% endfor %}
+      {% endif %}
+    </div>
+    <div class="col-md-6 col-lg-4 mt-3 mt-md-0">
+      <div class="float-md-end d-md-flex align-items-center mb-4 mb-md-0">
+        {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
+          attributes: create_attribute().addClass(['ms-md-2 mb-2']),
+        }) only %}
+      </div>
     </div>
-    <h4 class="mb-4">
-      <span class="text-capitalize">
-        {{- _page_title -}}
-      </span>
-      ({{ listing.items.length }})
-    </h4>
-    {% if badges is not empty and badges is iterable %}
-      {% for badge in badges %}
-        {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
-      {% endfor %}
-    {% endif %}
   </div>
   <hr class="d-none d-md-block mb-4"/>
-  <div class="d-md-none">
-    {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
-      extra_classes: 'mb-4',
-    }) only %}
-  </div>
 {% endblock %}
 
 {% block content %}

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

@@ -12,18 +12,37 @@
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
 {% set _alignment = alignment|default('left') %}
-{% set _classes = ['text-' ~ _alignment] %}
+{% set _classes = [
+  'text-' ~ _alignment,
+  "bg-lighter",
+  "p-2",
+  "px-2-5",
+  "border-4",
+  "border-secondary"
+] %}
+
+{% if _alignment == "center" %}
+  {% set _classes = _classes|merge(["border-top"]) %}
+{% elseif _alignment == "end" %}
+  {% set _classes = _classes|merge(["border-end"]) %}
+{% else %}
+  {% set _classes = _classes|merge(["border-start"]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
 
 {% set attributes = attributes.addClass(_classes) %}
 
 <figure
   {{ attributes }}
 >
-  <blockquote class="blockquote">
+  <blockquote class="blockquote mb-2">
     <p>{{- _quote -}}</p>
   </blockquote>
 {% if _attribution is not empty %}
-  <figcaption class="blockquote-footer">
+  <figcaption class="blockquote-footer m-0">
     {{- _attribution -}}
   {% if _cite is not empty %}
     <cite title="{{ _cite }}">{{- _cite -}}</cite>

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

@@ -8,6 +8,10 @@
 {% set _links = links|default([]) %}
 {% set _icons_path = icons_path|default('') %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.setAttribute('aria-label', 'breadcrumb') %}
 
 {% if _links is not empty %}
@@ -18,7 +22,7 @@
     class="{{ _classes }}"
   >
     {% for _link in _links %}
-      {% set _segment_classes = 'breadcrumb-item d-none d-md-block' %}  
+      {% set _segment_classes = 'breadcrumb-item d-none d-md-block' %}
       {% if loop.revindex == 2 %}
         {% set _segment_classes = 'breadcrumb-item' %}
       {% endif %}
@@ -29,7 +33,7 @@
       {% endif %}
       <li
         class="{{ _segment_classes }}"
-        {{ _segment_attrs }}
+        {{ _segment_attrs|raw }}
       >
         {%- if _link.path -%}
           {% if loop.revindex == 2 %}

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

@@ -15,6 +15,8 @@
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
     - options ["after", "before"]
+  - icon_spacing (string) (default: '')
+    - options ["sm", "md", "lg"]
   - clean_class (boolean) (default: false)
   - spinner (spinner object) (default: {})
   - show_spinner (boolean) (default: false)
@@ -31,6 +33,7 @@
 {% set _id = id|default('') %}
 {% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
+{% set _icon_spacing = icon_spacing|default('') %}
 {% set _show_spinner = show_spinner|default(false) %}
 {% set _spinner = spinner|default({}) %}
 {% set _clean_class = clean_class|default(false) %}
@@ -54,6 +57,9 @@
 {% if _classes is not empty %}
   {% set attributes = attributes.addClass(_classes) %}
 {% endif %}
+{% if _icon_spacing is not empty %}
+  {% set _icon_spacing = _icon_spacing ~ '-' %}
+{% endif %}
 {% set attributes = attributes.setAttribute('type', _type) %}
 {% if _icon is not empty %}
     {% set _icon = _icon|merge({
@@ -69,12 +75,12 @@
     {% endif %}
     {% if _icon_position == 'before' %}
       {% set _icon = _icon|merge({
-          attributes: _icon.attributes.addClass('me-2-5')
+          attributes: _icon.attributes.addClass('me-' ~ _icon_spacing ~ '2-5')
         })
       %}
     {% else %}
       {% set _icon = _icon|merge({
-          attributes: _icon.attributes.addClass('ms-2-5')
+          attributes: _icon.attributes.addClass('ms-' ~ _icon_spacing ~ '2-5')
         })
       %}
     {% endif %}

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

@@ -24,6 +24,10 @@
 
 {% set _classes = _classes|merge(['btn-group-' ~ _size]) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', _aria_label) %}
 {% endif %}

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

@@ -128,6 +128,14 @@
   {% endif %}
   {% if _image.rounded is not empty %}
     {% set _img_class = _img_class ~ ' rounded-' ~ _image.rounded %}
+  {% elseif _horizontal %}
+    {% if attributes.hasClass('border-0') %}
+      {% set _img_class = _img_class ~ ' rounded-1' %}
+    {% else %}
+      {% set _img_class = _img_class ~ ' rounded-0 rounded-start' %}
+    {% endif %}
+  {% elseif _card_header is not empty %}
+    {% set _img_class = _img_class ~ ' rounded-0' %}
   {% endif %}
   {% if _image.classes is not empty %}
     {% set _img_class = _img_class ~ " " ~ _image.classes %}
@@ -155,24 +163,6 @@
 <div class='{{ _horizontal_grid.right_col_classes }}'>
 {% endif %}
   <div class='{{ _body_classes }}'>
-    {%- if _badges is not empty and _badges is iterable -%}
-      <div class="mb-3">
-      {% for _badge in _badges %}
-        {% if _badge.attributes is empty %}
-          {% set _badge = _badge|merge({
-            attributes: create_attribute()
-          }) %}
-        {% endif %}
-        {% if not loop.last %}
-          {% set _badge = _badge|merge({
-              attributes: _badge.attributes.addClass('me-2')
-            })
-          %}
-        {% endif %}
-        {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
-      {% endfor %}
-      </div>
-    {%- endif -%}
   {%- if _title is not empty -%}
     {% set _title_tag = _title.tag ?? 'h5' %}
     <{{ _title_tag }}
@@ -202,6 +192,28 @@
   {%- if _content is not empty -%}
     {{- _content -}}
   {%- endif -%}
+  {%- if _badges is not empty and _badges is iterable -%}
+    <div class="mt-2-5">
+    {% for _badge in _badges %}
+      {% if _badge.attributes is empty %}
+        {% set _badge = _badge|merge({
+          attributes: create_attribute()
+        }) %}
+      {% endif %}
+      {% set _badge = _badge|merge({
+          attributes: _badge.attributes.addClass('mb-2')
+        })
+      %}
+      {% if not loop.last %}
+        {% set _badge = _badge|merge({
+            attributes: _badge.attributes.addClass('me-2')
+          })
+        %}
+      {% endif %}
+      {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+    {% endfor %}
+    </div>
+  {%- endif -%}
   </div>
 {% if _horizontal %}
 </div>

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

@@ -41,6 +41,10 @@
   {% endif %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <div

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

@@ -43,6 +43,10 @@
   {% set _classes = _classes|merge(['carousel-dark']) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _id is not empty %}
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}

package/templates/bcl-contact-form/contact-form.html.twig

@@ -0,0 +1,5 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block content %}
+  {% include '@oe-bcl/bcl-form/form.html.twig' with form only %}
+{% endblock %}

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

@@ -21,7 +21,6 @@
 
 {% set _css_classes = [
   'bcl-content-banner',
-  'vw-100',
   'pt-lg-4-75',
 ] %}
 
@@ -42,6 +41,10 @@
   'gray': 'bg-lighter',
 } %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set _card = {
   title: title|default({})|merge({
     tag: 'h2',
@@ -65,7 +68,7 @@
 {% else %}
   {% set _card = _card|merge({
     horizontal_grid: {
-      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8 px-sm-0 px-md-2-5',
+      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
     },
   }) %}
 {% endif %}

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

@@ -22,11 +22,15 @@
   'justify-content-center',
   'bg-date',
   'text-light',
-  'pt-3',
+  'pt-2',
   'rounded-top',
   'mw-date',
 ] %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_css_classes) %}
 
 {% if _date_time is not empty %}
@@ -34,9 +38,8 @@
 {% endif %}
 
 <time {{ attributes }}>
-  <span>{{ _day }}</span>
-  <span class="pb-3 text-uppercase">{{ _month }}</span>
-  <span class="bg-light w-100 text-center py-2 text-dark rounded-bottom mb-n1">{{ _year }}</span>
+  <span class="py-4 bg-white border border-bottom-0 w-100 fs-5 fw-medium text-dark text-center text-uppercase">{{ _day }} {{ _month }}</span>
+  <span class="bg-lighter border w-100 text-center fs-5 text-dark rounded-bottom mb-n1">{{ _year }}</span>
 </time>
 
 {% endspaceless %}

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

@@ -3,7 +3,7 @@
 {#
   Parameters:
   - title: (string) (default: "")
-  - title_tag: (string) (default: "h4")
+  - title_tag: (string) (default: "h2")
   - "items" (array) (default: []): format: [
       {
         "term" (object or array of object) -format: {
@@ -21,10 +21,14 @@
 {# Parameters #}
 
 {% set _title = title|default('') %}
-{% set _title_tag = title_tag|default('h4') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _variant == 'horizontal' %}
   {% set attributes = attributes.addClass(["d-md-grid", "grid-3-9"]) %}
 {% endif %}
@@ -59,8 +63,10 @@
               {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
                 attributes: create_attribute().addClass(_icon_classes)
               }) only %}
-            {%- endif -%}
+            <p class="mb-0 d-inline-block">{{ _term.label }}</p>
+          {%- else -%}
             {{- _term.label -}}
+          {%- endif -%}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
@@ -72,16 +78,18 @@
             class="d-flex"
           {% endif %}
         >
-          {% if _item.term.icon is not empty %}
-              {% set _icon_classes = ["me-2"] %}
-              {% if _variant == 'horizontal' %}
-                {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
-              {% endif %}
+          {%- if _item.term.icon is not empty -%}
+            {% set _icon_classes = ["me-2"] %}
+            {% if _variant == 'horizontal' %}
+              {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
+            {% endif %}
             {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
               attributes: create_attribute().addClass(_icon_classes)
             }) only -%}
-          {% endif %}
-          {{- _item.term.label -}}
+            <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
+          {%- else -%}
+            {{- _item.term.label -}}
+          {%- endif -%}
         </dt>
       {% endif %}
     {% endif %}
@@ -91,9 +99,23 @@
           <div>
         {% endif %}
         {% for _definition in _item.definition %}
-          {% if _definition.label is not defined %}
-            <dd>{{- _definition -}}</dd>
-          {% endif %}
+          <dd>
+            {%- if _definition.button is defined -%}
+              {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
+            {%- elseif _definition.link is defined %}
+              {% include '@oe-bcl/bcl-link/link.html.twig' with _definition.link only -%}
+            {%- else -%}
+              {%- if _definition.icon is defined -%}
+                {%- set _icon_classes = ["me-2"] -%}
+                {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _definition.icon|merge({
+                  attributes: create_attribute().addClass(_icon_classes)
+                }) only -%}
+               <p class="mb-0 d-inline-block">{{ _definition.label }}</p>
+              {%- else -%}
+                {{- _definition.label -}}
+              {%- endif -%}
+            {%- endif -%}
+          </dd>
         {% endfor %}
         {% if _variant == 'horizontal' %}
           </div>