@openeuropa/bcl-theme-default 0.24.1 → 0.26.0

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

@@ -11,6 +11,8 @@
   - link: (object of type link)
   - alignment: (string) (default: '')
     options ['start', 'end', 'center', 'baseline', 'stretch']
+  - image_size: (string) (default: '')
+    options ['small', 'large', 'extra-large']
   - attributes (drupal attrs)
 #}
 
@@ -21,6 +23,7 @@
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('default-1-col') %}
 {% set _alignment = alignment|default('') %}
+{% set _image_size = image_size|default('') %}
 {% set _link = link|default({}) %}
 
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
@@ -52,19 +55,14 @@
 {% if _items is not empty %}
   {% for _card in _items %}
     {% set  _alignment_class = '' %}
-    {% set _max_width = '' %}
-    {% set _image = {} %}
-    {% if _card.image is not empty %}
-      {% set _image_classes = _card.image.classes ?: '' %}
-      {% if not _alignment == 'center' %}
-        {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
-      {% endif %}
-      {% set _max_width = 'mw-listing-img' %}
-      {% set _card = _card|merge({image: _card.image|merge({
-        classes: _image_classes,
-      })}) %}
-    {% elseif _card.date is not empty %}
-      {% set _max_width = 'mw-col-date mb-3' %}
+    {% set _image_classes = _card.image.classes ?: '' %}
+    {% set _start_col_classes = 'bcl-card-start-col mb-3 mb-lg-0' %}
+    {% set _end_col_classes = 'col-12 col-md' %}
+    {% if _image_size is not empty %}
+      {% set _start_col_classes = _start_col_classes ~ ' bcl-size-' ~ _image_size %}
+    {% endif %}
+    {% if 'd-none' in _image_classes %}
+      {% set _start_col_classes = _start_col_classes ~ ' d-none d-md-block' %}
     {% endif %}
     {% if _alignment is not empty %}
       {% set _alignment_class = ' align-self-' ~ _alignment %}
@@ -76,7 +74,7 @@
       title_attributes: _card_title_attributes.addClass(['fs-5'])
     }) %}
 
-    {% if _variant == 'default-1-col' %}
+    {% if _variant == 'default-1-col' or _variant == 'default-2-col' or _variant == 'default-3-col'  %}
       {% set _card_classes = [
         'listing-item',
         'border-bottom',
@@ -87,45 +85,18 @@
       {% set _card = _card|merge({
         horizontal: true,
         extra_classes_body: 'p-0 pb-md-0 pb-3',
-        horizontal_grid: {
-          left_col_classes: 'col-md-3 col-lg-2 rounded ' ~ _max_width ~ _alignment_class,
-          right_col_classes: 'col-md-9 col-lg-10' ~ _alignment_class,
-        },
-        attributes: _card_attributes,
-      }) %}
-    {% endif %}
-
-    {% if _variant == 'default-2-col' or _variant == 'default-3-col' %}
-      {% set _card_classes = [
-        'listing-item',
-        'border-bottom',
-        'border-md-0',
-        'border-0',
-      ] %}
-      {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
-      {% set _card = _card|merge({
-        extra_classes_body: 'p-0 pb-md-0 pb-3',
-        horizontal: true,
         attributes: _card_attributes,
+        horizontal_grid: {
+          left_col_classes: _start_col_classes ~ _alignment_class,
+          right_col_classes: _end_col_classes ~ _alignment_class,
+        }
       }) %}
-
+    
       {% if _variant == 'default-2-col' %}
-        {% set _card = _card|merge({
-          horizontal_grid: {
-            left_col_classes: 'col-xl-3 col-md-5 ' ~ _max_width ~ _alignment_class,
-            right_col_classes: 'col-xl-9 col-md-7' ~ _alignment_class,
-          },
-        }) %}
         {% set _card_layout = _card_layout|merge({
           responsive_columns: 2,
         }) %}
-      {% else %}
-        {% set _card = _card|merge({
-          horizontal_grid: {
-            left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment_class,
-            right_col_classes: 'col-lg-8 col-md-6' ~ _alignment_class,
-          },
-        }) %}
+      {% elseif _variant == 'default-3-col' %}
         {% set _card_layout = _card_layout|merge({
           attributes: _card_layout.attributes.addClass(['row-cols-md-2']),
           responsive_columns: 3,
@@ -150,9 +121,19 @@
           extra_classes_body: "pt-0",
         }) %}
       {% endif %}
-     {% set _card_layout = _card_layout|merge({
-       cols_extra_classes: 'mt-4-5',
-     }) %}
+      {% set _card_layout = _card_layout|merge({
+        cols_extra_classes: 'mt-4-5',
+      }) %}
+      {% if _card.image is not empty %}
+        {% set _image_classes = _card.image.classes ?: '' %}
+        {% if not _alignment == 'center' %}
+          {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
+        {% endif %}
+        {% set _card = _card|merge({image: _card.image|merge({
+          classes: _image_classes,
+        })}) %}
+      {% endif %}
+
     {% endif %}
 
     {% if _variant == 'highlight-2-col' or variant == 'highlight-3-col' %}
@@ -173,6 +154,15 @@
           extra_classes_body: 'pt-0',
         }) %}
       {% endif %}
+      {% if _card.image is not empty %}
+        {% set _image_classes = _card.image.classes ?: '' %}
+        {% if not _alignment == 'center' %}
+          {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
+        {% endif %}
+        {% set _card = _card|merge({image: _card.image|merge({
+          classes: _image_classes,
+        })}) %}
+      {% endif %}
       {% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
       {% if variant == 'highlight-2-col' %}
         {% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}

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

@@ -32,7 +32,7 @@
 {% set _body = body|default('') %}
 {% set _footer = footer|default('') %}
 
-{% set _classes = ['modal fade'] %}
+{% set _classes = ['modal', 'fade'] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}

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

@@ -78,17 +78,17 @@
 
   {% if not _disable_collapse %}
     <button
-      class='navbar-toggler'
-      type='button'
-      data-bs-toggle='collapse'
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
       data-bs-target='#{{ _collapse_id }}'
       aria-controls='{{ _collapse_id }}'
-      aria-expanded='false'
-      aria-label='Toggle navigation'
+      aria-expanded="false"
+      aria-label="Toggle navigation"
     >
-      <span class='navbar-toggler-icon'></span>
+      <span class="navbar-toggler-icon"></span>
     </button>
-    <div class='collapse navbar-collapse' id='{{ _collapse_id }}'>
+    <div class="collapse navbar-collapse" id='{{ _collapse_id }}'>
   {% endif %}
   {% block navigation %}
     {% if _navigation is not empty %}

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

@@ -114,7 +114,7 @@
             role="tab"
           {% endif %}
         >
-        {% elseif _tabs %}
+        {% elseif _tabs and _item.dropdown is not defined %}
           {% set _item = _item|merge({
             attributes: _item.attributes.setAttribute("role", "tab"),
             }) 

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

@@ -11,9 +11,12 @@
   - with_body_scroll (boolean) (default: false)
   - with_backdrop (boolean) (default: true)
   - with_close (boolean) (default: true)
+  - close_aria_label (default: '')
   - extra_classes_body (string) (default: '')
   - extra_classes_header (string) (default: '')
   - extra_classes_close (string) (default: '')
+  - responsiveness (string) (default: '')
+    options: ['sm', 'md', 'lg', 'xl', 'xxl']
   - attributes (drupal attrs)
 #}
 
@@ -25,13 +28,20 @@
 {% set _id = id|default('') %}
 {% set _body = body|default('') %}
 {% set _with_body_scroll = with_body_scroll|default(false) %}
-{% set _with_backdrop = with_backdrop|default(true) %}
-{% set _with_close = with_close|default(true) %}
+{% set _with_backdrop = with_backdrop ?? true %}
+{% set _with_close = with_close ?? true %}
+{% set _close_aria_label = close_aria_label|default('') %}
 {% set _extra_classes_body = extra_classes_body|default('') %}
 {% set _extra_classes_header = extra_classes_header|default('') %}
 {% set _extra_classes_close = extra_classes_close|default('') %}
+{% set _responsiveness = responsiveness|default('') %}
+
+{% if _responsiveness is not empty %}
+ {% set _classes = ['offcanvas-' ~ _responsiveness] %}
+{% else %}
+ {% set _classes = ['offcanvas'] %}
+{% endif %}
 
-{% set _classes = ['offcanvas'] %}
 {% set _class_body = 'offcanvas-body' ~ (_extra_classes_body ? ' ' ~ _extra_classes_body : '') %}
 {% set _class_header = 'offcanvas-header' ~ (_extra_classes_header ? ' ' ~ _extra_classes_header : '') %}
 
@@ -82,6 +92,7 @@
     {% set button_attributes = create_attribute()
                               .addClass(['btn-close', 'text-reset'])
                               .setAttribute('data-bs-dismiss', 'offcanvas')
+                              .setAttribute('aria-label', _close_aria_label)
     %}
     {% if _extra_classes_close is not empty %}
       {% set button_attributes = button_attributes.addClass(_extra_classes_close) %}

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

@@ -5,11 +5,7 @@
 {% endblock %}
 
 {% block content %}
-  <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
-  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
-  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  <p id="content">{{ get_dummy_text(6) }}
   </p>
   <h2 id="item-1" class="my-4">Section 1</h2>
   {% if featured_item %}
@@ -26,12 +22,7 @@
 
   <h2 id="item-2" class="my-4">Section 2</h2>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
-  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
-  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
+  {{ get_dummy_text(6, true) }}
 
   {% if blockquote %}
     {% include '@oe-bcl/bcl-blockquote/blockquote.html.twig' with blockquote only %}
@@ -43,21 +34,11 @@
     {% include '@oe-bcl/bcl-timeline/timeline.html.twig' with timeline only %}
   {% endif %}
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
-  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
-  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
+  {{ get_dummy_text(8, true) }}
 
   <h2 id="item-3" class="my-4">Section 3</h2>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
-  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
-  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
-  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
-  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
-  </p>
+  {{ get_dummy_text(4, true) }}
 
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
   {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}

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

@@ -57,7 +57,7 @@
 {% set _alignment = alignment|default('') %}
 {% set _aria_label = aria_label|default('') %}
 {% set _enable_prev_next_icon = enable_prev_next_icon|default(false) %}
-{% set _enable_first_last_icon = enable_first_last_icon|default(true) %}
+{% set _enable_first_last_icon = enable_first_last_icon ?? true %}
 {% set _items = items|default([]) %}
 {% set _first = first|default({}) %}
 {% set _next = next|default({}) %}

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

@@ -18,14 +18,12 @@
 
   {% if files.main_title is not empty %}
     <h2
-      class="mb-4"
+      class="mb-3-5"
     >{{- files.main_title -}}</h2>
   {% endif %}
   {% if files.listing is defined and files.listing is not empty %}
-    <div class="mb-4-5">
     {% for file in files.listing %}
       {% include '@oe-bcl/bcl-file/file.html.twig' with file only %}
     {% endfor %}
-    </div>
   {% endif %}
 {% endblock %}

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

@@ -33,10 +33,7 @@
   {% set _classes = _classes ~ ' progress-bar-animated' %}
 {% endif %}
 {% if _variant is not empty %}
-  {% set _classes = _classes ~ ' bg-' ~ _variant %}
-{% endif %}
-{% if _variant == 'light' %}
-  {% set _classes = _classes ~ ' text-dark' %}
+  {% set _classes = _classes ~ ' text-bg-' ~ _variant %}
 {% endif %}
 
 {% if attributes is empty %}

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

@@ -57,7 +57,7 @@
       {% endif %}
       {% if not loop.last %}
         {% set _list = _list|merge({
-            attributes: _list.attributes.addClass(['border-bottom', 'pb-3'])
+            attributes: _list.attributes.addClass(['border-bottom', 'mb-3'])
           })
         %}
       {% endif %}

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

@@ -14,7 +14,7 @@
 {% set _submit = submit|default({}) %}
 {% set _input = input|default({}) %}
 
-{% set _classes = ["bcl-search-form"] %}
+{% set _classes = ['bcl-search-form'] %}
 
 {% if _pill %}
   {% set _classes = _classes|merge(['rounded']) %}

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

@@ -11,11 +11,13 @@
 {% set _content = content|default('') %}
 {% set _button = button|default({}) %}
 
+{% set _classes = ['bcl-subscription-block', 'bg-light', 'px-4-5', 'pt-4', 'pb-4-5'] %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(['bg-light', 'px-4-5', 'pt-4', 'pb-4-5']) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 <div
   {{ attributes }}

package/templates/bcl-user/user-compact.html.twig

@@ -13,13 +13,14 @@
   - infos (array of strings) (default: [])
 #}
 
-{% set _picture_classes = "rounded-pill" %}
+{% set _picture_classes = 'rounded-pill' %}
+{% set _classes = ['bcl-user-compact', 'd-flex', 'mb-3'] %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass(["d-flex", "mb-3"]) %}
+{% set attributes = attributes.addClass(_classes) %}
 
 {% if picture is not empty and picture.classes is not empty %}
   {% set _picture_classes = _picture_classes ~ ' ' ~ picture.classes %}

package/templates/bcl-user/user-terms.html.twig

@@ -1,11 +1,11 @@
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
 
 {% block content %}
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. </p>
+  {{ get_dummy_text(4, true) }}
   <ul class="mb-4-5">
-    <li>Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. </li>
-    <li>Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, </li>
-    <li>A fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. </li>
+    <li>{{ get_dummy_text() }}</li>
+    <li>{{ get_dummy_text() }}</li>
+    <li>{{ get_dummy_text() }}</li>
   </ul>
   {% include '@oe-bcl/bcl-form/form.html.twig' with terms_form only %}
 {% endblock %}

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

@@ -100,10 +100,10 @@
       <h1 class="my-4-5">Edit my profile</h1>
       <h2 class="mb-4-5">Profile image</h2>
       <div class="row">
-        <div class="offset-3 col-6 offset-lg-0 col-lg-3">
+        <div class="bcl-card-start-col bcl-size-large mx-auto ms-md-2-5">
           <img src="https://picsum.photos/seed/1002/400/400" class="img-fluid" alt="profile-image">
         </div>
-        <div class="col align-self-center">
+        <div class="col-12 col-md align-self-center">
           <div class="mt-3 text-center text-md-start">
             {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with edit.image_upload_input only %}
             <div class="d-md-inline-block">

package/src/scss/_bcl-offcanvas.scss

@@ -1,24 +0,0 @@
-@include media-breakpoint-up(lg) {
-  .bcl-offcanvas {
-    position: relative;
-    width: auto;
-    visibility: visible !important; // stylelint-disable-line declaration-no-important
-    border: none;
-    transform: none;
-    box-shadow: none;
-
-    .offcanvas-body {
-      overflow: visible;
-    }
-
-    .offcanvas-title {
-      height: 38px;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .bcl-offcanvas + .offcanvas-backdrop {
-    display: none;
-  }
-}