@openeuropa/bcl-theme-default 0.14.0 → 0.18.0

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

@@ -2,27 +2,30 @@
 
 {#
   Parameters:
+  - "title" (string) (default: '')
+  - "title_tag" (string) (default: 'h2')
   - "variant" (string) (default: '') options:
     [ default, block ]
+  - "display_icons" (boolean) (default: true)
   - "items" (array) (default: []):
     - "icon" (associate array) (default: { size: 'm' })
     - "subtitle" (string) (default: '')
     - "title" (string) (default: '')
     - "description" (string) (default:'')
-  - "display_icons" (boolean) (default: true)
   - "grid_columns" (int) (default: 1)
+  - "responsiveness" (string) (default: 'md')
+  - "responsive_columns" (integer) (default: 3)
   - "gutter" (int) (default: 4)
-  - "equal_height" (boolean) (default: true)
+  - "equal_height" (boolean) (default: false)
   - "cols_extra_classes" (string) (default: '')
-  - "responsiveness" (string) (default: 'md')
   - "icons_path" (string) (default: '')
   - "link_more" (object of type link) (default {})
-
 #}
 
 {# Parameters #}
 
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
 {% set _variant = variant|default('default') %}
 {% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
 {% set _display_icons = display_icons ?? true %}
@@ -57,11 +60,16 @@
 {% if _equal_height %}
   {% set  _cols_classes =  _cols_classes ~ ' h-100' %}
 {% endif %}
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_css_classes) %}
 
 <div {{ attributes }}>
 {% if _title is not empty %}
-  <h4 class="fw-bold">{{ _title }}</h4>
+  {% set _title_classes = 'fw-bold' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
 {% endif %}
   <div
   {% if _wrapper_classes is not empty %}
@@ -82,9 +90,9 @@
         {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}
       {% endif %}
       {% if _item.title is defined and _item.title is not empty %}
-        <h3 class="text-capitalize fw-bold mt-2">
+        <h4 class="text-capitalize fw-bold mt-2">
           {{- _item.title -}}
-        </h3>
+        </h4>
       {% endif %}
       {% if _item.subtitle is defined and _item.subtitle is not empty %}
         <h5 class="fw-bold">

package/templates/bcl-featured-media/featured-media.html.twig

@@ -1,10 +1,16 @@
 {% spaceless %}
 
 {# Parameters:
+  - with_text (boolean) (default: false)
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
   - image: (string) (default: "")
   - poster_image: (string) (default: "")
   - content: (string) (default: "")
+  - wrapper_classes: (default: '')
   - content_classes: (string) (default: "")
+  - read_more (object) (default: {})
+  - description (string) (default: '')
   - ratio: (string) (default: "16x9")
     - options ["1x1", "4x3", "16x9", "21x9"]
   - sources: (array of sources) (default: []) format: [
@@ -26,15 +32,51 @@
     - "embedded_media"
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _with_text = with_text|default(false) %}
+{% set _wrapper_classes = 'bcl-featured-item' %}
+{% set _description = description|default('') %}
 {% set _embedded_media = embedded_media|default('') %}
-{% set _image = image|default("") %}
-{% set _poster_image = poster_image|default("") %}
-{% set _content = content|default("") %}
-{% set _content_classes = content_classes|default("") %}
-{% set _ratio = ratio|default("16x9") %}
+{% set _image = image|default('') %}
+{% set _poster_image = poster_image|default('') %}
+{% set _content = content|default('') %}
+{% set _alignment = alignment|default('right') %}
+{% set _content_classes = content_classes|default('') %}
+{% set _ratio = ratio|default('16x9') %}
 {% set _sources = sources|default([]) %}
 {% set _tracks = tracks|default([]) %}
+{% set _col_classes = 'col-12 col-md-6' %}
+{% set _read_more = read_more|default({}) %}
 
+{% if wrapper_classes is defined and wrapper_classes is not empty %}
+  {% set _wrapper_classes = _wrapper_classes ~ ' ' ~ wrapper_classes %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _with_text %}
+<div class="{{ _wrapper_classes }}">
+
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+  <div class="row">
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
+      {{- _description|default('') -}}
+
+      {% if _read_more is not empty %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
+      {% endif %}
+    </div>
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2' : '1' }}">
+{% endif %}
 
 <figure
   {{ attributes }}
@@ -79,4 +121,10 @@
 {% endif %}
 </figure>
 
+{% if _with_text %}
+    </div>
+  </div>
+</div>
+{% endif %}
+
 {% endspaceless %}

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

@@ -2,8 +2,10 @@
 
 {#
   Parameters:
-  - icon (icon Object) (default: {})
   - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - item_title (string) (default: '')
+  - icon (icon Object) (default: {})
   - text (string) (default: '')
   - content (string) (default: '')
   - image (object) (default: {}) - format: {
@@ -34,6 +36,8 @@
 
 {% set _icon = icon|default({}) %}
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _item_title = item_title|default('') %}
 {% set _text = text|default('') %}
 {% set _content = content|default('') %}
 {% set _image = image|default({}) %}
@@ -53,6 +57,17 @@
   }) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
 {% if _variant == 'card' %}
   {% set attributes = attributes.addClass(['border', 'rounded-bottom']) %}
   {% set _image = _image|merge({
@@ -67,7 +82,7 @@
     },
     badges: _badges,
     title: {
-      content: _title,
+      content: _item_title,
     },
     text: {
       content: _text,
@@ -94,8 +109,8 @@
       {% endif %}
       <div class="{{ _container_classes }}">
         <div class="flex-grow-1">
-          {% if _title is not empty and _variant == 'default' %}
-            <p class="fw-bold m-0">{{ _title }}</p>
+          {% if _item_title is not empty and _variant == 'default' %}
+            <p class="fw-bold m-0">{{ _item_title }}</p>
           {% endif %}
           {% if _language is not empty or _meta is not empty %}
           <small class="fw-bold m-0">

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

@@ -1,6 +1,7 @@
 {% spaceless %}
 
 {# Parameters:
+  - variant (string) (default: 'neutral')
   - rows (default: []) - Array of predefined objects - format: 
   [
     {
@@ -30,12 +31,14 @@
   ]
 #}
 
+{% set _variant = variant|default('neutral') %}
 {% set _rows = rows|default([]) %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
-{% set attributes = attributes.addClass('bcl-footer') %}
+
+{% set attributes = attributes.addClass(['bcl-footer', 'bcl-footer--' ~ _variant]) %}
 
 <footer
   {{ attributes }}

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

@@ -23,6 +23,10 @@
 {% set _items = items|default([]) %}
 {% set _submit = submit|default({}) %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 <form
   {{ attributes }}
 >

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

@@ -0,0 +1,101 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block banner %}
+<div class="container">
+  {% if banner is not empty %}
+  <div class="mt-4 mt-md-5">
+    {% if banner.image is not empty %}
+      <img
+        src="{{ banner.image.path }}"
+        {% if banner.image.alt is not empty %}
+        alt="{{ banner.image.alt }}"
+        {% endif %}
+        {% if banner.image.class is not empty %}
+        class="{{ banner.image.class }}"
+        {% endif %}
+      />
+    {% endif %}
+    {% if banner.title is not empty %}
+      <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
+        <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+        {% if banner.actions is not empty and banner.actions is iterable %}
+        <div class="d-grid d-md-block ms-auto">
+          {% for _action in banner.actions %}
+            {% if _action.type == "link" %}
+              {% include '@oe-bcl/bcl-link/link.html.twig' with _action only %}
+            {% elseif _action.type == "button" %}
+              {% include '@oe-bcl/bcl-button/button.html.twig' with _action only %}
+            {% elseif _action.type == "dropdown" %}
+              {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _action only %}
+            {% endif %}
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    {% endif %}
+  </div>
+  {% endif %}
+  {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
+  {% if banner_description is not empty and contact is not empty %}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with banner_description.collapse_trigger only %}
+  <div class="collapse d-md-block" id="banner-description">
+    <div class="row mt-md-4 mb-md-5 pb-md-5">
+      <div class="col-md-8">
+        <div class="ps-md-3">
+          {% if banner_description.metas is not empty and banner_description.metas is iterable %}
+          <div class="d-block">
+            {% for _meta in banner_description.metas %}
+            <p class="mb-0 me-4 d-inline-block text-muted">
+              {% include '@oe-bcl/bcl-icon/icon.html.twig' with _meta.icon only %}
+              {{- _meta.label -}}
+            </p>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {{ banner_description.content }}
+        </div>
+      </div>
+      <div class="col-md-4">
+        <h4 class="mb-3 pb-2">{{ contact.title }}</h4>
+        {% if contact.profiles is not empty and contact.profiles is iterable %}
+          {% for _profile in contact.profiles %}
+            {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+          {% endfor %}
+        {% endif %}
+        {% if contact.more_link is not empty %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with contact.more_link only %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}
+
+{% block content %}
+  {% if recent is not empty and members is not empty %}
+  <div class="row mt-3">
+    <div class="col-md-8">
+      <h4 class="mb-4 pb-2">{{ recent.title }}</h4>
+      {% include '@oe-bcl/bcl-recent-activities/recent-activities.html.twig' with recent.block_data only %}
+    </div>
+    <div class="col-md-4">
+      <h4 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h4>
+      {% if members.profiles is not empty and members.profiles is iterable %}
+        {% for _profile in members.profiles %}
+          {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+        {% endfor %}
+      {% endif %}
+      {% if members.more_link is not empty %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with members.more_link only %}
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+  {% if contributions is not empty %}
+    <h4 class="my-4 pt-3 pb-2">{{ contributions.title}}</h4>
+    {% if contributions.listing is not empty %}
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
+    {% endif %}
+  {% endif %}
+{% endblock %}

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

@@ -0,0 +1,27 @@
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+
+{% block banner %}
+<div class="container mt-4 mt-md-5">
+  <div class="col-xxl-11">
+    <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
+      <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+      {% if banner.actions is not empty and banner.actions is iterable %}
+      <div class="d-grid d-md-block ms-auto">
+        {% for _action in banner.actions %}
+          {% if _action.type == "link" %}
+            {% include '@oe-bcl/bcl-link/link.html.twig' with _action only %}
+          {% elseif _action.type == "button" %}
+            {% include '@oe-bcl/bcl-button/button.html.twig' with _action only %}
+          {% elseif _action.type == "dropdown" %}
+            {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _action only %}
+          {% endif %}
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  {% if navigation is not empty %}
+    {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
+  {% endif %}
+  </div>
+</div>
+{% endblock %}

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

@@ -1,6 +1,7 @@
 {% spaceless %}
 
 {# Parameters:
+  - variant (string) (default: 'neutral')
   - navbar (Navbar object) (default: {})
   - project_logo (object) (default: {})
     format: {
@@ -15,9 +16,11 @@
   - modals (Array of modal objects) (default: [])
 #}
 
+{% set _variant = variant|default('neutral') %}
 {% set _navbar = navbar|default({}) %}
 {% set _project_logo = project_logo|default({}) %}
 {% set _site_name = site_name|default('') %}
+{% set _site_name_classes = 'bcl-header__site-name' %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
 {% set _modals = modals|default([]) %}
@@ -27,7 +30,11 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% set attributes = attributes.addClass("bcl-header") %}
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+
+{% if site_name_classes is not empty %}
+  {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
+{% endif %}
 
 {% set _project_classes = 'bcl-header__project' %}
 {% if _light is not empty %}
@@ -60,7 +67,9 @@
       />
     {% endif %}
     {% if _site_name is not empty %}
-      {{ _site_name }}
+      <div class="{{ _site_name_classes }}">
+       {{- _site_name -}}
+       </div>
     {% endif %}
     </div>
   </div>

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

@@ -3,6 +3,7 @@
 {#
 Parameters:
   - "title": (string) (default: '')
+  - "full_layout": (boolean) (default: false)
   - "links": (array of link objects) (default: [])
   - "content": (string) (default: '')
 #}
@@ -11,11 +12,21 @@ Parameters:
 {% set _title = title|default('') %}
 {% set _links = links|default([]) %}
 {% set _content = content|default('') %}
+{% set _id = id|default('bcl-inpage-navigation-' ~ random(5)) %}
+{% set _full_layout = full_layout|default(false) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
 
 {# Print the result #}
+{% if _full_layout %}
 <div class="row">
   <div class="col-md-3 d-none d-md-block">
-    <nav class="position-sticky" id="bcl-inpage-navigation">
+{% endif %}
+    <nav {{ attributes }}>
       {% if _title is defined and _title is not empty %}
         <h5>{{ _title }}</h5>
       {% endif %}
@@ -25,10 +36,12 @@ Parameters:
         'items': _links,
       } only %}
     </nav>
+{% if _full_layout %}
   </div>
   <div class="col-md-9">
     {{ _content }}
   </div>
 </div>
+{% endif %}
 
 {% endspaceless %}

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

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

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: "h2")
   - 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("h2") %}
 {% 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-list-group/list-group.html.twig

@@ -32,6 +32,7 @@
 {% set _type = type|default('unordered') %}
 {% set _items = items|default([]) %}
 {% set _classes = ['list-group'] %}
+
 {% if _flush %}
   {% set _classes = _classes|merge(['list-group-flush']) %}
 {% endif %}
@@ -41,6 +42,11 @@
 {% if _horizontal is not empty %}
   {% set _classes = _classes|merge(['list-group-' ~ _horizontal]) %}
 {% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% if _id is not empty %}
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}