@openeuropa/bcl-theme-default 0.14.0 → 0.18.0

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

@@ -2,6 +2,7 @@
 
 {# Parameters:
   - title: (string) (default: "")
+  - title_tag: (string) (default: "div")
   - description: (string) (default: "")
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
@@ -11,14 +12,15 @@
   - content_classes: (string) (default: "")
 #}
 
-{% set _title = title|default("") %}
-{% set _description = description|default("") %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('div') %}
+{% set _description = description|default('') %}
 {% set _link = link|default({}) %}
-{% set _image = image|default("") %}
+{% set _image = image|default('') %}
 {% set _shade = shade|default(false) %}
 {% set _hero = hero|default(false) %}
 {% set _full_width = full_width|default(false) %}
-{% set _content_classes = content_classes|default("") %}
+{% set _content_classes = content_classes|default('') %}
 
 
 {% set _content_class = 'bcl-banner__content' %}
@@ -38,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 }}>
@@ -47,7 +54,7 @@
   <div class="container">
     <div class="{{ _content_class }}">
     {% if _title is not empty %}
-      <div class="{{ _title_classes }}">{{ _title }}</div>
+      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
       {% if _description is not empty %}
       <p class="mb-4">{{ _description }}</p>
       {% endif %}

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

@@ -6,8 +6,9 @@
   - with_footer (boolean) (default: false)
   - with_banner (boolean) (default: false)
   - with_sidebar (boolean) (default: false)
-  - title (string) (default: '')
-  - columns (string) (default: 3-9 )
+  - sidebar_size (string) (default: 'normal')
+    options: ['normal', 'large']
+  - landing (boolean) (default: false)
   - content_type (string) (default: '')
   - attributes (drupal attrs)
 
@@ -26,41 +27,68 @@
 {% 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 _title = title|default('') %}
+{% 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-lg-9' } %}
 
-{% if _columns == '4-8' %}
-  {% set _col_classes = { left: 'col-md-4', right: 'col-12 col-lg-8' } %}
-{% elseif _columns == '2-10' %}
-  {% set _col_classes = { left: 'col-md-2', right: 'col-12 col-lg-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 _with_banner %}
-    {% block banner %}
-      {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
-    {% endblock %}
-  {% endif %}
+{% if _with_banner %}
+  {% block banner %}
+    {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
+  {% endblock %}
+{% endif %}
+
   <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 }}
@@ -71,13 +99,13 @@
       {% block content_bottom %}
         {{ content_bottom }}
       {% endblock %}
+      {% block related %}
+        {{ related }}
+      {% endblock %}
     </div>
   </div>
 </main>
 
-{% block related %}
-  {{ related }}
-{% endblock %}
 {% block feedback %}
   {{ feedback }}
 {% endblock %}

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

@@ -3,6 +3,7 @@
   - listing (object) (default: {})
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
+  - page_title (string) (default: '')
 #}
 
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
@@ -11,33 +12,37 @@
 {% set _pagination = pagination|default({}) %}
 {% set _search = search|default({}) %}
 {% set _sidebar = sidebar|default({}) %}
+{% set _page_title = page_title|default({}) %}
 
 {% 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">
-        {{ content_type }}
-      </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

@@ -14,6 +14,10 @@
 {% set _alignment = alignment|default('left') %}
 {% set _classes = ['text-' ~ _alignment] %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <figure

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

@@ -133,7 +133,7 @@
     {% set _img_class = _img_class ~ " " ~ _image.classes %}
   {% endif %}
 {% endif %}
-{% if _horizontal %}
+{% if _horizontal and (_image is not empty or _date is not empty)  %}
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
@@ -145,7 +145,7 @@
       class="{{ _img_class }}"
     >
   {% endif %}
-{% if _horizontal %}
+{% if _horizontal and (_image is not empty or _date is not empty) %}
   </div>
 {% endif %}
 {% if _image.position == 'background' %}
@@ -155,24 +155,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 +184,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-content-banner/content-banner.html.twig

@@ -17,34 +17,59 @@
 {% set _background = background|default('white') %}
 {% set _action_button = action_button|default({}) %}
 {% set _service_buttons = service_buttons|default([]) %}
+{% set _image = image|default({}) %}
 
 {% set _css_classes = [
   'bcl-content-banner',
   'vw-100',
-  'py-md-4-75',
-  'py-4',
+  'pt-lg-4-75',
 ] %}
 
+{% if _background != 'white' %}
+  {% set _css_classes = _css_classes|merge([
+    'pb-md-4-75',
+    'pb-4',
+    'pt-4',
+  ]) %}
+{% else %}
+  {% set _css_classes = _css_classes|merge([
+    'pt-3'
+  ]) %}
+{% endif %}
+
 {% set _modifiers = {
   'white': 'bg-white',
   'gray': 'bg-lighter',
 } %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set _card = {
-  horizontal: true,
   title: title|default({})|merge({
     tag: 'h2',
-    classes: 'fw-bold',
+    attributes: create_attribute().addClass(['fw-bold']),
   }),
+  horizontal: true,
+  horizontal_grid: {
+    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
+  },
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
-  extra_classes_body: 'pt-md-0 px-0 px-md-3 pb-0',
+  extra_classes_body: 'pt-0 px-0 pb-0',
 } %}
 
-{% if image is not empty %}
+{% if _image is not empty %}
+  {% set _card = _card|merge({
+    horizontal_grid: _card.horizontal_grid|merge({
+      left_col_classes: 'col-md-4 col-lg-3',
+    }),
+    extra_classes_body: 'pt-md-0 px-0 px-md-3 pb-0',
+  }) %}
+{% else %}
   {% set _card = _card|merge({
     horizontal_grid: {
-      left_col_classes: 'col-md-3',
-      right_col_classes: 'col-md-9',
+      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8 px-sm-0 px-md-2-5',
     },
   }) %}
 {% endif %}

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

@@ -27,6 +27,10 @@
   'mw-date',
 ] %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_css_classes) %}
 
 {% if _date_time is not empty %}

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

@@ -2,6 +2,8 @@
 
 {#
   Parameters:
+  - title: (string) (default: "")
+  - title_tag: (string) (default: "h2")
   - "items" (array) (default: []): format: [
       {
         "term" (object or array of object) -format: {
@@ -14,19 +16,30 @@
     ]
   - "variant" (string) (default: '') 
     - option: ["horizontal"]
-
 #}
 
 {# Parameters #}
 
-
+{% set _title = title|default('') %}
+{% 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 %}
 
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
 <dl
   {{ attributes }}
 >
@@ -37,26 +50,42 @@
           <div>
         {% endif %}
         {% for _term in _item.term %}
-          <dt>
+          <dt
+          {% if _variant == 'horizontal' and _term.icon is not empty %}
+            class="d-flex"
+          {% endif %}
+          >
             {%- if _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 _term.icon|merge({
-                attributes: create_attribute().addClass('me-2')
+                attributes: create_attribute().addClass(_icon_classes)
               }) only %}
             {%- endif -%}
-            <div class="align-middle d-inline-block">{{- _term.label -}}</div>
+            {{- _term.label -}}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
           </div>
         {% endif %}
       {% else %}
-        <dt>
+        <dt
+          {% if _variant == 'horizontal' and _item.term.icon is not empty %}
+            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 %}
             {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
-              attributes: create_attribute().addClass('me-2')
+              attributes: create_attribute().addClass(_icon_classes)
             }) only -%}
           {% endif %}
-          <div class="align-middle d-inline-block">{{- _item.term.label -}}</div>
+          {{- _item.term.label -}}
         </dt>
       {% endif %}
     {% endif %}

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

@@ -0,0 +1,41 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% if sidebar.image is not empty %}
+    <img class="mb-4" src="https://picsum.photos/275?random=1" alt="image" />
+  {% endif %}
+  <div class="bcl-event-details mb-4">
+    <h3 class="fw-bold mb-4">Event Details</h3>
+    {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with sidebar only %}
+    <div class="mt-3-5">
+    {% for badge in sidebar.badges %}
+      {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
+    {% endfor %}
+    </div>
+  </div>
+{% endblock %}
+
+{% block content %}
+  <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>
+  <h3 class="fw-bold my-4">Description</h3>
+  <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>
+  <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.
+  </p>
+{% endblock %}
+
+{% block related %}
+  <h3 class="fw-bold my-4">Related documents</h3>
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
+{% endblock %}