@openeuropa/bcl-theme-default 0.19.0 → 0.22.0

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

@@ -14,6 +14,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
 {% set _image = image|default('') %}
@@ -28,11 +29,13 @@
   {% set _content_class = _content_class ~ " " ~ _content_classes %}
 {% endif %}
 
-{% set _title_classes = "display-6" %}
+{% set _title_classes = ['display-6'] %}
 {% if _description is not empty or _link is not empty %}
-  {% set _title_classes = _title_classes ~ " mb-3" %}
+  {% set _title_classes = _title_classes|merge(['mb-3']) %}
 {% endif %}
 
+{% set _title_attributes = _title_attributes.addClass(_title_classes) %}
+
 {% set _classes = [
   'bcl-banner',
   _shade ? 'shade',
@@ -53,14 +56,18 @@
   {% endif %}
   <div class="container">
     <div class="{{ _content_class }}">
-    {% if _title is not empty %}
-      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
-      {% if _description is not empty %}
-      <p class="mb-4">{{ _description }}</p>
-      {% endif %}
-      {% if _link.path %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title,
+          title_tag: _title_tag,
+          attributes: _title_attributes,
+        } only %}
       {% endif %}
+    {% if _description is not empty %}
+      <p class="mb-4">{{ _description }}</p>
+    {% endif %}
+    {% if _link.path %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
     {% endif %}
     </div>
   </div>

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

@@ -17,32 +17,32 @@
 {% block content_top %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
   <div class="row">
-    <div class="col-md-6 col-lg-8">
-      <h4>
+    <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>
     </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>
+    {% if badges is not empty and badges is iterable %}
+      <div class="col-md-12 order-md-2 mt-3">
+      {% 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 %}
+      </div>
+    {% endif %}
     <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']),
+          attributes: create_attribute().addClass(['ms-md-2']),
         }) only %}
       </div>
     </div>
   </div>
-  <hr class="d-none d-md-block mb-4"/>
+  <hr class="d-none d-md-block mb-4-75"/>
 {% endblock %}
 
 {% block content %}

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

@@ -6,7 +6,7 @@
 
 {% set _classes = 'breadcrumb' %}
 {% set _links = links|default([]) %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
@@ -41,7 +41,7 @@
               icon_position: 'before',
                 icon: {
                   name: "arrow-left",
-                  path: _icons_path,
+                  path: _icon_path,
                   attributes: create_attribute().addClass(['d-md-none ms-0 me-2']),
                 },
              }) %}

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

@@ -44,6 +44,11 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+
+  Blocks
+    - card_date
+    - card_badges
+    - card_links
 #}
 
 {% set _title = title|default({}) %}
@@ -66,6 +71,7 @@
 {% set _extra_classes_header = extra_classes_header|default('') %}
 {% 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]) %}
@@ -145,7 +151,9 @@
   <div class='{{ _horizontal_grid.left_col_classes  }}'>
 {% endif %}
   {% if _date is not empty %}
-    {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% block card_date %}
+      {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% endblock %}
   {% elseif _image is not empty and _image.position != "bottom" %}
     <img
       src="{{ _image.path }}"
@@ -192,28 +200,42 @@
   {%- 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 %}
+  {% block card_badges %}
+    {%- 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('me-2')
+            attributes: _badge.attributes.addClass('mb-2')
           })
         %}
-      {% endif %}
-      {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
-    {% endfor %}
-    </div>
-  {%- 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 -%}
+  {% endblock %}
+  {% block card_links %}
+    {%- 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">
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+        </div>
+      {% endfor %}
+      </div>
+    {%- endif -%}
+  {% endblock %}
   </div>
 {% if _horizontal %}
 </div>

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

@@ -14,6 +14,9 @@
     options: ['0', '1', '2', '3', '4', '5']
   - equal_height (boolean) (default: false)
   - cols_extra_classes (string) (default: '')
+
+  Blocks
+    - card_layout_card
 #}
 
 {% set _type = type|default('group') %}
@@ -69,7 +72,9 @@
     {% if _type == 'grid' or _type == 'masonry' %}
       <div class="{{ _cols_classes }}">
     {% endif %}
-      {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% block card_layout_card %}
+        {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% endblock %}
     {% if _type == 'grid' or _type == 'masonry' %}
       </div>
     {% endif %}

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

@@ -11,6 +11,7 @@
       image: (string) <img> tag
       caption (string)
       caption_classes (string)
+      caption_title (string) 
       interval (integer) (default: 0)
      }
      ...
@@ -20,6 +21,7 @@
   - previous_label (string) (default: '')
   - next_label (string) (default: '')
   - with_indicators (boolean) (default: false)
+  - rounded_indicators (boolean) (default: false)
 #}
 
 {% set _id = id|default('') %}
@@ -29,6 +31,7 @@
 {% 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 %}
@@ -59,6 +62,10 @@
   {% set attributes = attributes.setAttribute('data-bs-touch', 'false') %}
 {% endif %}
 
+{% if _rounded_indicators %}
+  {% set attributes = attributes.addClass('rounded-indicators') %}
+{% endif %}
+
 {% if not _autoplay %}
   {% set attributes = attributes.setAttribute('data-bs-interval', 'false') %}
 {% endif %}
@@ -69,7 +76,7 @@
   {{ attributes }}
 >
 {% if _with_indicators %}
-  <div class="carousel-indicators">
+  <div class="carousel-indicators d-none d-md-flex">
   {% for _i in 0..(_items|length - 1) %}
     {% set button_attributes = create_attribute()
                               .setAttribute('aria-label', 'Slide ' ~ (_i + 1))
@@ -102,15 +109,29 @@
     {% if _item.image is defined and _item.image is not empty %}
       {{ _item.image }}
     {% endif %}
-    {% if _item.caption is defined and _item.caption is not empty %}
+    {% if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) %}
       {% set _caption_classes = 'carousel-caption' %}
-      {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
-        {% set _caption_classes = _caption_classes ~ ' ' ~ _item.caption_classes %}
+      {% if _item.caption is not empty and _item.link is empty %}
+        {% set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
       {% endif %}
       <div
         class="{{ _caption_classes }}"
       >
-        {{- _item.caption -}}
+        {% if _item.caption is not empty or _item.caption_title is not empty %}
+          {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
+            <div class="{{ _item.caption_classes }}">
+          {% endif %}
+          {% if _item.caption_title is not empty %}
+            <h5>{{ _item.caption_title }}</h5>
+          {% endif %}
+            {{- _item.caption -}}
+          {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
+            </div>
+          {% endif %}
+        {% endif %}
+        {% if _item.link is defined and _item.link is not empty %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
+        {% endif %}
       </div>
     {% endif %}
     </div>

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

@@ -4,11 +4,13 @@
   Parameters:
     - "background" (string) (default: 'white')
       options: [ white, gray ]
-    - "banner" (object)
     - "title" (object)
     - "image" (object)
+    - "image_size" (string) 
+      options: ['sm', 'md', 'lg']
     - "content" (string)
     - "badges" (array of objects of type badge)
+    - "links" (array of objects of type link)
     - "action_button" (object of type button) (default: {})
     - "service_buttons" (array of objects of type button) (default: [])
     - "attributes" (drupal attrs)
@@ -18,6 +20,7 @@
 {% set _action_button = action_button|default({}) %}
 {% set _service_buttons = service_buttons|default([]) %}
 {% set _image = image|default({}) %}
+{% set _image_size = image_size|default('md') %}
 
 {% set _css_classes = [
   'bcl-content-banner',
@@ -45,34 +48,39 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% set _body_classes = 'pt-0 px-0 pb-0' %}
+{% set _left_col_classes = '' %}
+{% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
+
+{% if _image is not empty %}
+  {% set _left_col_classes = 'col-8 col-md-4 col-lg-3 offset-2 offset-md-0' %}
+  {% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
+  {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-3 pb-0' %}
+  {% if _image_size == 'lg' %}
+    {% set _left_col_classes = 'col-md-4' %}
+    {% set _right_col_classes = 'col-md-8' %}
+  {% endif %}
+  {% if _image_size == 'sm' %}
+    {% set _left_col_classes = 'col-6 col-md-4 col-lg-2 offset-3 offset-md-0' %}
+  {% endif %}
+{% endif %}
+
+{% set _horizontal_classes = {
+  left_col_classes: _left_col_classes,
+  right_col_classes: _right_col_classes,
+} %}
+
 {% set _card = {
   title: title|default({})|merge({
     tag: 'h2',
     attributes: create_attribute().addClass(['fw-bold']),
   }),
   horizontal: true,
-  horizontal_grid: {
-    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
-  },
+  horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
-  extra_classes_body: 'pt-0 px-0 pb-0',
+  extra_classes_body: _body_classes,
 } %}
 
-{% 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: {
-      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
-    },
-  }) %}
-{% endif %}
-
 {% set _css_classes = _css_classes|merge([_modifiers[_background]]) %}
 {% set _attributes = attributes.addClass(['bg-transparent', 'border-0']) %}
 
@@ -82,24 +90,22 @@
 
 <div class="{{ _css_classes|join(' ') }}">
   <div class="container">
-    <div class="row">
-    {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
+  {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
 
-  {% if _action_button is not empty %}
-    <div class="col-12 col-md-2 text-end">
-      <div class="d-grid d-md-block">
+  {% if _service_buttons is not empty or _action_button is not empty %}
+    <div class="d-flex justify-content-end mt-2 align-items-center">
+    {% if _service_buttons is not empty %}
+      {% for _button in _service_buttons %}
+        {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
+      {% endfor %}
+    {% endif %}
+    {% if _action_button is not empty %}
+      <div class="d-grid d-md-block ms-3">
         {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
       </div>
+    {% endif %}
     </div>
   {% endif %}
-  {% if _service_buttons is not empty %}
-    <div class="d-flex justify-content-end">
-    {% for _button in _service_buttons %}
-      {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
-    {% endfor %}
-    </div>
-  {% endif %}
-  </div>
   </div>
 </div>
 

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

@@ -7,24 +7,29 @@
     - "month" (string) (default: '')
     - "date_time" (string) (default: '')
     - "year" (integer) (default: '')
+    - "end_day" (integer) (default: '')
+    - "end_month" (string) (default: '')
+    - "end_year" (integer) (default: '')
 #}
 
 {% set _month = month|default('') %}
 {% set _day = day|default('') %}
 {% set _year = year|default('') %}
 {% set _date_time = date_time|default('') %}
+{% set _end_day = end_day|default('') %}
+{% set _end_month = end_month|default('') %}
+{% set _end_year = end_year|default('') %}
 {% set _variant = variant|default('') %}
 {% set _css_classes = [
   'bcl-date-block',
-  'd-flex',
-  'flex-column',
-  'align-items-center',
-  'justify-content-center',
   'bg-date',
-  'text-light',
-  'pt-2',
-  'rounded-top',
+  'rounded',
   'mw-date',
+  'text-center',
+  'd-flex',
+  'flex-column',
+  'ratio',
+  'ratio-1x1'
 ] %}
 
 {% if attributes is empty %}
@@ -38,8 +43,23 @@
 {% endif %}
 
 <time {{ attributes }}>
-  <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>
+  <span class="d-flex flex-column pt-2">
+    <span class="d-flex flex-column align-item-center justify-content-center bg-white border border-bottom-0 w-100 h-100 fs-5 text-uppercase">
+      <span class="d-block">{{- _day ~ ' ' ~ _month ~ ((_end_day or _end_month) ? ' - ' ) -}}</span>
+      {%- if _end_day is not empty -%}
+        {{- _end_day -}}
+      {% endif %}
+      {% if _end_month is not empty %}
+        {{- _end_month -}}
+      {%- endif -%}
+    </span>
+    <span class="bg-lighter border w-100 rounded-bottom py-1">
+      {{- _year -}}
+      {%- if _end_year is not empty -%}
+        {{ ' - ' ~ _end_year }}
+      {%- endif -%}
+    </span>
+  </span>
 </time>
 
 {% endspaceless %}

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

@@ -4,6 +4,7 @@
   Parameters:
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
+  - title_attributes (drupal attrs)
   - "items" (array) (default: []): format: [
       {
         "term" (object or array of object) -format: {
@@ -22,6 +23,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('') %}
 
@@ -34,10 +36,11 @@
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 <dl
@@ -63,10 +66,14 @@
               {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
                 attributes: create_attribute().addClass(_icon_classes)
               }) only %}
-            <p class="mb-0 d-inline-block">{{ _term.label }}</p>
-          {%- else -%}
-            {{- _term.label -}}
-          {%- endif -%}
+              <p class="mb-0 d-inline-block">{{ _term.label }}</p>
+            {%- elseif _term.color is not empty -%}
+              <div class="d-flex align-items-center">
+                <span class="p-2 me-2 d-inline-block rounded-1 {{ _term.color }}"></span>{{- _term.label -}}
+              </div>
+            {%- else -%}
+              {{- _term.label -}}
+            {%- endif -%}
           </dt>
         {% endfor %}
         {% if _variant == 'horizontal' %}
@@ -87,6 +94,10 @@
               attributes: create_attribute().addClass(_icon_classes)
             }) only -%}
             <p class="mb-0 d-inline-block">{{ _item.term.label }}</p>
+          {%- elseif _item.term.color is not empty -%}
+            <div class="d-flex align-items-center">
+              <span class="p-2 me-2 d-inline-block rounded-1 {{ _item.term.color }}"></span>{{- _item.term.label -}}
+            </div>
           {%- else -%}
             {{- _item.term.label -}}
           {%- endif -%}
@@ -96,10 +107,10 @@
     {% if _item.definition is not empty %}
       {% if _item.definition is iterable %}
         {% if _variant == 'horizontal' %}
-          <div>
+          <dd>
         {% endif %}
         {% for _definition in _item.definition %}
-          <dd>
+          {% if _variant == 'horizontal' %}<div>{% else %}<dd>{% endif %}
             {%- if _definition.button is defined -%}
               {% include '@oe-bcl/bcl-button/button.html.twig' with _definition.button only %}
             {%- elseif _definition.link is defined %}
@@ -115,10 +126,10 @@
                 {{- _definition.label -}}
               {%- endif -%}
             {%- endif -%}
-          </dd>
+          {% if _variant == 'horizontal' %}</div>{% else %}</dd>{% endif %}
         {% endfor %}
         {% if _variant == 'horizontal' %}
-          </div>
+          </dd>
         {% endif %}
       {% else %}
         <dd>

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -18,7 +18,7 @@
   - "gutter" (int) (default: 4)
   - "equal_height" (boolean) (default: false)
   - "cols_extra_classes" (string) (default: '')
-  - "icons_path" (string) (default: '')
+  - "icon_path" (string) (default: '')
   - "link_more" (object of type link) (default {})
 #}
 
@@ -26,6 +26,7 @@
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_attributes = title_attributes ?: create_attribute().addClass(['fw-bold']) %}
 {% set _variant = variant|default('default') %}
 {% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
@@ -37,7 +38,7 @@
 {% set _equal_height = equal_height|default(false) %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
 {% set _cols_classes = 'col' %}
-{% set _icons_path = icons_path|default('') %}
+{% set _icon_path = icon_path|default('') %}
 {% set _link_more = link_more|default({}) %}
 {% set _wrapper_classes = [] %}
 
@@ -68,8 +69,11 @@
 
 <div {{ attributes }}>
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
   <div
   {% if _wrapper_classes is not empty %}
@@ -83,7 +87,7 @@
       {% if _item.icon is defined and _item.icon is not empty and _display_icons %}
         {% set _item = _item|merge({
           icon: _item.icon|merge({
-            path: _icons_path,
+            path: _icon_path,
             size: 'l',
           })
         }) %}