@openeuropa/bcl-theme-default 0.12.0 → 0.16.0

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

@@ -0,0 +1,59 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block banner %}
+  {% if banner is defined %}
+    {% include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
+  {% endif %}
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  {% if featured_section is defined %}
+    <div class="my-4">
+      <h2 class="mb-4 fw-bold">{{ featured_section.title }}</h2>
+      <div class="row">
+        <div class="col-12 col-md-6">
+          {{ featured_section.content }}
+        </div>
+        <div class="col-12 col-md-6">
+          {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_section.featured_media only %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if listing_section is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with listing_section only %}
+    </div>
+  {% endif %}
+
+  {% if inpage_banner is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-banner/banner.html.twig' with inpage_banner only %}
+    </div>
+  {% endif %}
+
+  {% if activity_featured is defined %}
+    <div class="my-4">
+      <h2 class="mb-4 fw-bold">{{ activity_featured.title }}</h2>
+      <div class="row">
+        <div class="col-12 col-md-6">
+          {{ activity_featured.content }}
+        </div>
+        <div class="col-12 col-md-6">
+          {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with activity_featured.featured_media only %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if activity_listing is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with activity_listing only %}
+    </div>
+  {% endif %}
+</div>
+
+{% endblock %}

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

@@ -8,6 +8,7 @@
   - id (string) (default: '')
   - disabled (boolean) (default: false)
   - remove_icon_spacers (boolean) (default: false)
+  - standalone (boolean) (default: false)
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
     - options ["after", "before"]
@@ -18,6 +19,7 @@
 {% set _variant = variant|default('') %}
 {% set _id = id|default('') %}
 {% set _disabled = disabled|default(false) %}
+{% set _standalone = standalone|default(false) %}
 {% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
 {% set _remove_icon_spacers = remove_icon_spacers|default(false) %}
@@ -62,6 +64,9 @@
 {% if _id is not empty %}
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}
+{% if _standalone %}
+  {% set _classes = _classes|merge(['text-underline-hover']) %}
+{% endif %}
 {% if _classes is not empty %}
   {% set attributes = attributes.addClass(_classes) %}
 {% endif %}

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

@@ -6,12 +6,14 @@
   - variant: (string) (default: "vertical")
     - options ["vertical", "horizontal"]
   - title: (string) (default: "")
+  - title_tag: (string) (default: "h5")
   - links (array of link objects) (default: [])
 #}
 
 {% set _background = background|default("gray") %}
 {% set _variant = variant|default("vertical") %}
 {% set _title = title|default("") %}
+{% set _title_tag = title_tag|default("h4") %}
 {% set _links = links|default([])%}
 
 {% if attributes is empty %}
@@ -22,11 +24,12 @@
   {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3"]) %}
 {% endif %}
 
-<div 
+<div
   {{ attributes }}
 >
   {% if _title is not empty %}
-    <h5 class="fw-bold pb-3 mb-3 border-bottom">{{ _title }}</h5>
+    {% set _title_classes = 'fw-bold pb-3 mb-3 border-bottom' %}
+    <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
   {% endif %}
   {% if _links is not empty and _links is iterable %}
     <ul class="ps-0 mb-0">

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

@@ -3,21 +3,26 @@
 {# Parameters:
   - variant: (string) (default: "horizontal") options:
   [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
-  - title: (string) (default: {})
+  - title: (string) (default: "")
+  - title_tag: (string) (default: "h4")
   - items: (array of objects of type card)
   - link: (object of type link)
+  - alignment: (string) (default: '') options:
+  ['start', 'end', 'center', 'baseline', 'stretch']
 #}
 
 {% set _items = items|default([]) %}
 {% set _variant = variant|default('default-1-col') %}
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _alignment = alignment|default('') %}
 {% set _link = link|default({}) %}
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
 {% set _cards = [] %}
 {% set _card_layout = {
   type: 'grid',
-  gutter: 4,
-  responsiveness: "md",
+  responsiveness: 'md',
+  gutter: '4',
   attributes: create_attribute(),
 } %}
 {% set attributes = attributes.addClass(_classes) %}
@@ -25,29 +30,48 @@
 <div {{ attributes }}>
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-3-5' %}
-  {% if _variant == 'default-1-col' or _variant == 'default-3-col' or _variant == 'default-2-col' %}
-    {% set _title_classes = _title_classes ~ ' ps-3' %}
-  {% endif %}
-  <h4 class="{{ _title_classes }}">
-    {{ _title }}
-  </h4>
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
 {% endif %}
 
 {% if _items is not empty %}
   {% for _card in _items %}
+    {% set  _alignment_class = '' %}
+    {% set _max_width = '' %}
+    {% set _image = {} %}
+    {% if _card.image is not empty %}
+      {% set _max_width = 'mw-listing-img' %}
+      {% if not _alignment == 'center' %}
+        {% set _image_classes = _card.image.classes ? _card.image.classes ~ ' mb-3' : 'mb-3' %}
+      {% endif %}
+      {% set _card = _card|merge({image: _card.image|merge({
+        classes: _image_classes
+      })}) %}
+    {% elseif _card.date is not empty %}
+      {% set _max_width = 'mw-date mb-3' %}
+    {% endif %}
+    {% if _alignment is not empty %}
+      {% set _alignment_class = ' align-self-' ~ _alignment %}
+    {% endif %}
     {% set _card_classes = [] %}
     {% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
 
     {% if _variant == 'default-1-col' %}
-      {% set _card_classes = ['listing-item', 'px-3', 'mb-2', 'border-0'] %}
+      {% set _card_classes = [
+        'listing-item',
+        'border-bottom',
+        'border-md-0',
+        'border-0',
+      ] %}
       {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
       {% set _card = _card|merge({
         horizontal: true,
-        body_classes: 'p-md-0 pt-sm-3',
+        extra_classes_body: 'p-0 pb-md-0 pb-3',
         horizontal_grid: {
-          left_col_classes: 'col-md-3 col-lg-2 rounded',
-          right_col_classes: 'col-md-9 col-lg-10',
+          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,
       }) %}
@@ -56,40 +80,38 @@
     {% if _variant == 'default-2-col' or _variant == 'default-3-col' %}
       {% set _card_classes = [
         'listing-item',
-        'px-3',
-        'border-0'
+        'border-bottom',
+        'border-md-0',
+        'border-0',
       ] %}
       {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
       {% set _card = _card|merge({
-        body_classes: "p-md-0 pt-sm-3",
+        extra_classes_body: 'p-0 pb-md-0 pb-3',
         horizontal: true,
         attributes: _card_attributes,
       }) %}
-      {% set _card_layout = _card_layout|merge({
-        cols_extra_classes: "mt-4-5",
-      }) %}
+
       {% if _variant == 'default-2-col' %}
         {% set _card = _card|merge({
           horizontal_grid: {
-            left_col_classes: "col-lg-3 col-md-4",
-            right_col_classes: "col-lg-9 col-md-8",
+            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({
-          gutter: 2,
           responsive_columns: 2,
         }) %}
       {% else %}
         {% set _card = _card|merge({
           horizontal_grid: {
-            left_col_classes: "col-md-6",
-            right_col_classes: "col-md-6",
+            left_col_classes: 'col-lg-4 col-md-6 ' ~ _max_width ~ _alignment_class,
+            right_col_classes: 'col-lg-8 col-md-6' ~ _alignment_class,
           },
         }) %}
         {% set _card_layout = _card_layout|merge({
-          gutter: 2,
+          attributes: _card_layout.attributes.addClass(['row-cols-md-2']),
           responsive_columns: 3,
-          responsiveness: 'lg',
+          responsiveness: 'xl',
         }) %}
       {% endif %}
     {% endif %}
@@ -98,32 +120,42 @@
       {% set _card_classes = [
         'listing-item--highlight',
         'border-0',
-        'bg-light'
+        'bg-lighter'
       ] %}
      {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
      {% set _card = _card|merge({
-         body_classes: "pb-4",
-         wrapper_class: "col",
+         wrapper_class: 'col',
          attributes: _card_attributes,
       }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: "pt-0",
+        }) %}
+      {% endif %}
      {% set _card_layout = _card_layout|merge({
-       cols_extra_classes: "mt-4-5",
+       cols_extra_classes: 'mt-4-5',
      }) %}
     {% endif %}
 
     {% if _variant == 'highlight-2-col' or variant == 'highlight-3-col' %}
       {% set _card_classes  = [
         'listing-item--highlight',
-        'border-0', 'bg-light',
+        'border-0',
+        'bg-lighter',
         'h-100',
         'rounded-2'
       ] %}
       {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
       {% set _card = _card|merge({
-        wrapper_class: "col",
-        cols_extra_classes: "mt-4-5",
+        wrapper_class: 'col',
         attributes: _card_attributes,
       }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: 'pt-0',
+        }) %}
+      {% endif %}
+      {% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
       {% if variant == 'highlight-2-col' %}
         {% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}
       {% else %}
@@ -139,10 +171,7 @@
 
 {% if _link is not empty %}
   {% set _link_attributes = _link.attributes ? _link.attributes : create_attribute() %}
-  {% set _link_attributes = _link_attributes.addClass(['mt-3-5', 'd-block']) %}
-  {% if _variant == 'default-1-col' or _variant == 'default-2-col' or variant == 'default-3-col' %}
-    {% set _link_attributes = _link_attributes.addClass(['ps-3-5']) %}
-  {% endif %}
+  {% set _link_attributes = _link_attributes.addClass(['mt-3-5', 'd-inline-block']) %}
   {% include '@oe-bcl/bcl-link/link.html.twig' with _link|merge({
     attributes: _link_attributes,
     icon: _link.icon|merge({

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

@@ -45,26 +45,28 @@
   {{ attributes }}
 >
   <div class='container'>
-    {% if _brand is not empty %}
-      <a class='navbar-brand' href='{{ _brand.link }}'>
-      {%- if _brand.label is defined -%}
-        {{- _brand.label -}}
-      {%- else -%}
-        {% for logo in _brand.logos %}
-          <img
-            src='{{ logo.src }}'
-            {% if logo.alt is not empty %}
-            alt='{{ logo.alt }}'
-            {% endif %}
-            {% if logo.class is not empty %}
-            class='{{ logo.class }}'
-            {% endif %}
-          />
-        {% endfor %}
-      {%- endif -%}
-      </a>
-    {% endif %}
-    {% if not _disable_collapse %}
+  {% if _brand is not empty %}
+    <a class='navbar-brand' href='{{ _brand.link }}'>
+    {% for logo in _brand.logos %}
+      <img
+        src='{{ logo.src }}'
+        {% if logo.alt is not empty %}
+        alt='{{ logo.alt }}'
+        {% endif %}
+        {% if logo.class is not empty %}
+        class='{{ logo.class }}'
+        {% endif %}
+      />
+    {% endfor %}
+  {%- if _brand.label is defined -%}
+   <div class="h5 ms-4-5 d-none d-lg-inline-block">
+    {{- _brand.label -}}
+    </div>
+  {% endif %}
+    </a>
+  {% endif %}
+
+  {% if not _disable_collapse %}
     <button
       class='navbar-toggler'
       type='button'

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

@@ -1,3 +1,4 @@
+{% import _self as navigation %}
 {% spaceless %}
 
 {# Parameters:
@@ -17,131 +18,155 @@
         - active (boolean)
         - button (boolean) - set to button
         - content (string) - content for tab
+        - navigation (navigation Object) - set for multiple level or navigation, items inside is required
       }
     ]
 #}
 
-{% set _pills = pills|default(false) %}
-{% set _tabs = tabs|default(false) %}
-{% set _vertical = vertical|default(false) %}
-{% set _full_width = full_width|default(false) %}
-{% set _alignment = alignment|default('') %}
-{% set _id = id|default('') %}
-{% set _tabs_content = tabs_content|default(false) %}
-{% set _nav = nav|default(false) %}
-{% set _navbar = navbar|default(false) %}
-{% set _items = items|default([]) %}
+{# Define main macro #}
+{% macro render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) %}
+{% spaceless %}
+  {% import _self as navigation %}
 
-{% if _navbar %}
-  {% set _classes = ['navbar-nav'] %}
-{% else %}
-  {% set _classes = ['nav'] %}
-{% endif %}
-{% if _pills %}
-  {% set _classes = _classes|merge(['nav-pills']) %}
-{% endif %}
-{% if _tabs %}
-  {% set _classes = _classes|merge(['nav-tabs']) %}
-{% endif %}
-{% if _vertical %}
-  {% set _classes = _classes|merge(['flex-column']) %}
-{% endif %}
-{% if _full_width %}
-  {% set _classes = _classes|merge(['nav-fill']) %}
-{% endif %}
-{% if _alignment is not empty %}
-  {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
-{% endif %}
+  {% set _pills = pills|default(false) %}
+  {% set _tabs = tabs|default(false) %}
+  {% set _vertical = vertical|default(false) %}
+  {% set _full_width = full_width|default(false) %}
+  {% set _alignment = alignment|default('') %}
+  {% set _id = id|default('') %}
+  {% set _tabs_content = tabs_content|default(false) %}
+  {% set _nav = nav|default(false) %}
+  {% set _navbar = navbar|default(false) %}
+  {% set _items = items|default([]) %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
+  {% if _navbar %}
+    {% set _classes = ['navbar-nav'] %}
+  {% else %}
+    {% set _classes = ['nav'] %}
+  {% endif %}
+  {% if _pills %}
+    {% set _classes = _classes|merge(['nav-pills']) %}
+  {% endif %}
+  {% if _tabs %}
+    {% set _classes = _classes|merge(['nav-tabs']) %}
+  {% endif %}
+  {% if _vertical %}
+    {% set _classes = _classes|merge(['flex-column']) %}
+  {% endif %}
+  {% if _full_width %}
+    {% set _classes = _classes|merge(['nav-fill']) %}
+  {% endif %}
+  {% if _alignment is not empty %}
+    {% set _classes = _classes|merge(['justify-content-' ~ _alignment]) %}
+  {% endif %}
 
-{% if _id is not empty %}
-  {% set attributes = attributes.setAttribute('id', _id) %}
-{% endif %}
+  {% if attributes is empty %}
+    {% set attributes = create_attribute() %}
+  {% endif %}
 
-{% if not _nav and _tabs %}
-  {% set attributes = attributes.setAttribute('role', 'tablist') %}
-{% endif %}
+  {% if _id is not empty %}
+    {% set attributes = attributes.setAttribute('id', _id) %}
+  {% endif %}
 
-{% set attributes = attributes.addClass(_classes) %}
+  {% if not _nav and _tabs %}
+    {% set attributes = attributes.setAttribute('role', 'tablist') %}
+  {% endif %}
+  {% set attributes = attributes.addClass(_classes) %}
 
-{% if _nav %}
-<nav
-  {{ attributes }}
->
-{% else %}
-<ul
-  {{ attributes }}
->
-{% endif %}
-  {% if _items is not empty and _items is iterable %}
-    {% for _item in _items %}
-      {% set _nav_class = 'nav-item' %}
-      {% if _item.dropdown %}
-        {% set _nav_class = _nav_class ~ ' dropdown' %}
-        {% set _item = _item|merge({remove_wrapper: true}) %}
-      {% endif %}
-      {% if _item.dropdown %}
-        {% set _item_classes = [] %}
-      {% else %}
-        {% set _item_classes = ['nav-link'] %}
-      {% endif %}
-      {% if _item.active %}
-        {% set _item_classes = _item_classes|merge(['active']) %}
-      {% endif %}
-      {% if _item.attributes is empty %}
-        {% set _item = _item|merge({
-          attributes: create_attribute()
-        }) %}
-      {% endif %}
-      {% set _item = _item|merge({
-        attributes: _item.attributes.addClass(_item_classes),
-        clean_class: true}) %}
-      {% if not _nav %}
-      <li
-        class="{{ _nav_class }}"
-        {% if _tabs %}
-          role="presentation"
-        {% endif %}
-      >
-      {% endif %}
-      {% if _item.dropdown is defined %}
-        {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
-      {% elseif _item.button is defined %}
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
-      {% else %}
-        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
-      {% endif %}
-      {% if not _nav %}
-      </li>
-      {% endif %}
-    {% endfor %}
+  {% if _nav %}
+  <nav
+    {{ attributes }}
+  >
+  {% else %}
+  <ul
+    {{ attributes }}
+  >
   {% endif %}
-{% if _nav %}
-</nav>
-{% else %}
-</ul>
-{% endif %}
-{% if _tabs_content %}
-<div class="tab-content">
-  {%- block contents -%}
     {% if _items is not empty and _items is iterable %}
-      {% for _item in _items %}
-        {% if _item.content is not empty %}
-          {% set _content_class = 'tab-pane fade' %}
-          {% if _item.active %}
-            {% set _content_class = _content_class ~ ' show active' %}
+      {% for _item in items %}
+        {% set _nav_class = 'nav-item' %}
+        {% if _item.dropdown %}
+          {% set _nav_class = _nav_class ~ ' dropdown' %}
+          {% set _item = _item|merge({remove_wrapper: true}) %}
+        {% endif %}
+        {% if _item.dropdown %}
+          {% set _item_classes = [] %}
+        {% else %}
+          {% set _item_classes = ['nav-link'] %}
+        {% endif %}
+        {% if _item.active %}
+          {% set _item_classes = _item_classes|merge(['active']) %}
+        {% endif %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(_item_classes),
+          clean_class: true}) %}
+        {% if not _nav %}
+        <li
+          class="{{ _nav_class }}"
+          {% if _tabs %}
+            role="presentation"
           {% endif %}
-          <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
-            {{- _item.content -}}
-          </div>
+        >
+        {% endif %}
+        {% if _item.dropdown is defined %}
+          {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}
+        {% elseif _item.button is defined %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% else %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+        {% endif %}
+        {% if _item.navigation is defined and _item.navigation.items is not empty and _item.navigation.items is iterable %}
+          {{ navigation.render(
+            _item.navigation.items,
+            _item.navigation.pills,
+            _item.navigation.tabs,
+            _item.navigation.tabs_content,
+            _item.navigation.vertical,
+            _item.navigation.full_width,
+            _item.navigation.alignment,
+            _item.navigation.id,
+            _item.navigation.nav,
+            _item.navigation.navbar,
+            _item.navigation.attributes
+            ) }}
+        {% endif %}
+        {% if not _nav %}
+        </li>
         {% endif %}
       {% endfor %}
     {% endif %}
-  {%- endblock -%}
-</div>
-{% endif %}
+  {% if _nav %}
+  </nav>
+  {% else %}
+  </ul>
+  {% endif %}
+  {% if _tabs_content %}
+  <div class="tab-content">
+    {%- block contents -%}
+      {% if _items is not empty and _items is iterable %}
+        {% for _item in _items %}
+          {% if _item.content is not empty %}
+            {% set _content_class = 'tab-pane fade' %}
+            {% if _item.active %}
+              {% set _content_class = _content_class ~ ' show active' %}
+            {% endif %}
+            <div class="{{ _content_class }}" id="{{ _item.target }}" role="tabpanel" aria-labelledby="{{ _item.id }}">
+              {{- _item.content -}}
+            </div>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+    {%- endblock -%}
+  </div>
+  {% endif %}
+{% endspaceless %}
+{% endmacro %}
+
+{{ navigation.render(items, pills, tabs, tabs_content, vertical, full_width, alignment, id, nav, navbar, attributes) }}
 
 {% endspaceless %}