@openeuropa/bcl-theme-default 0.12.0 → 0.16.0

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

@@ -0,0 +1,115 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - "title" (string) (default: '')
+  - "title_tag" (string) (default: 'h4')
+  - "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:'')
+  - "grid_columns" (int) (default: 1)
+  - "responsiveness" (string) (default: 'md')
+  - "responsive_columns" (integer) (default: 3)
+  - "gutter" (int) (default: 4)
+  - "equal_height" (boolean) (default: false)
+  - "cols_extra_classes" (string) (default: '')
+  - "icons_path" (string) (default: '')
+  - "link_more" (object of type link) (default {})
+#}
+
+{# Parameters #}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _variant = variant|default('default') %}
+{% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
+{% set _display_icons = display_icons ?? true %}
+{% set _items = items|default([]) %}
+{% set _grid_columns = grid_columns|default(1) %}
+{% set _responsiveness = responsiveness|default('md') %}
+{% set _responsive_columns = responsive_columns|default(3) %}
+{% set _gutter = gutter|default(4) %}
+{% 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 _link_more = link_more|default({}) %}
+{% set _wrapper_classes = [] %}
+
+{% set _grid_classes = [
+  'row-cols-' ~ _responsiveness ~ '-' ~ _responsive_columns,
+  'row', 'row-cols-' ~ _grid_columns
+] %}
+{% if _responsive_columns == 3 %}
+ {% set _grid_classes = _grid_classes|merge(['row-cols-sm-2']) %}
+{% endif %}
+{% if _variant == 'block' or _variant == 'block-primary' %}
+  {% set _wrapper_classes = _wrapper_classes|merge(['bg-light p-3-5 pt-0']) %}
+{% endif %}
+{% if _gutter is not empty %}
+  {% set _grid_classes = _grid_classes|merge(['g-' ~ _gutter]) %}
+{% endif %}
+{% if _title is not empty %}
+  {% set _grid_classes = _grid_classes|merge(['mt-3']) %}
+{% endif %}
+{% if _equal_height %}
+  {% set  _cols_classes =  _cols_classes ~ ' h-100' %}
+{% endif %}
+{% set attributes = attributes.addClass(_css_classes) %}
+
+<div {{ attributes }}>
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+{% endif %}
+  <div
+  {% if _wrapper_classes is not empty %}
+    class="{{ _wrapper_classes|join(' ') }}"
+  {% endif %}
+  >
+    <div class="{{ _grid_classes|join(' ') }}">
+    {% if _items is defined and _items is not empty and _items is iterable %}
+      {% for _item in _items %}
+      <div class="{{ _cols_classes }}">
+      {% 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,
+            size: 'l',
+          })
+        }) %}
+        {% 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">
+          {{- _item.title -}}
+        </h3>
+      {% endif %}
+      {% if _item.subtitle is defined and _item.subtitle is not empty %}
+        <h5 class="fw-bold">
+          {{- _item.subtitle -}}
+        </h5>
+      {% endif %}
+      {% if _item.description is defined and _item.description is not empty %}
+        <p>
+          {{- _item.description -}}
+        </p>
+      {% endif %}
+      </div>
+      {% endfor %}
+    {% endif %}
+    </div>
+    {% if _link_more is defined and _link_more is not empty %}
+      <div class="border-top d-block pt-3 mt-3">
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _link_more only %}
+      </div>
+    {% endif %}
+  </div>
+</div>
+
+{% endspaceless %}

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: 'h3')
   - 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,47 @@
     - "embedded_media"
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% 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 _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 +117,10 @@
 {% endif %}
 </figure>
 
+{% if _with_text %}
+    </div>
+  </div>
+</div>
+{% endif %}
+
 {% endspaceless %}

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

@@ -0,0 +1,205 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h4')
+  - item_title (string) (default: '')
+  - icon (icon Object) (default: {})
+  - text (string) (default: '')
+  - content (string) (default: '')
+  - image (object) (default: {}) - format: {
+    path:"",
+    alt: "",
+  }
+  - badges (array of badges Object) (default: [])
+  - meta (string) (default: '')
+  - language (string) (default: '')
+  - variant (string) (default: 'default')
+    - options: ['default', 'card']
+  - download (link Object) (default: {})
+  - translation (object) (default: {}) format: {
+    id: "",
+    label: {}, - link Object
+    items: [
+      {
+        extension: "",
+        language: "",
+        size: "",
+        download: {}, - link Object
+      },
+  }
+  - icon_path (string) (default: '')
+#}
+
+{# Internal properties #}
+
+{% set _icon = icon|default({}) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _item_title = item_title|default('') %}
+{% set _text = text|default('') %}
+{% set _content = content|default('') %}
+{% set _image = image|default({}) %}
+{% set _badges = badges|default([]) %}
+{% set _meta = meta|default('') %}
+{% set _language = language|default('') %}
+{% set _variant = variant|default('default') %}
+{% set _download = download|default({}) %}
+{% set _translation = translation|default({}) %}
+{% set _icon_path = icon_path|default({}) %}
+
+{% set _container_classes = 'w-100 d-md-flex' %}
+{% if _icon is not empty %}
+  {% set _container_classes = _container_classes ~ ' ms-2-5' %}
+  {% set _icon = _icon|merge({
+    attributes: create_attribute().addClass(['mt-1', 'text-secondary'])
+  }) %}
+{% 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({
+    position: "top",
+    classes: "mb-3"
+  }) %}
+  {% include '@oe-bcl/bcl-card/card.html.twig' with {
+    horizontal: true,
+    horizontal_grid: {
+      left_col_classes: "col-12 col-md-4 order-md-2",
+      right_col_classes: "col-12 col-md-8",
+    },
+    badges: _badges,
+    title: {
+      content: _item_title,
+    },
+    text: {
+      content: _text,
+      classes: "mb-2",
+    },
+    content: _content,
+    image: _image,
+    extra_classes_body: "p-0",
+    attributes: create_attribute().addClass(['rounded-0', 'rounded-top', 'p-4', 'border-bottom-0'])
+  } only %}
+{% else %}
+  {% set attributes = attributes.addClass(['border', 'rounded']) %}
+{% endif %}
+
+<div
+  {{ attributes }}
+>
+  <div class="px-3-5 py-3">
+    <div class="d-flex">
+      {% if _icon is not empty %}
+        {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+          path: _icon_path,
+        }) only -%}
+      {% endif %}
+      <div class="{{ _container_classes }}">
+        <div class="flex-grow-1">
+          {% 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">
+            {%- if _language is not empty -%}
+              {{- _language -}}
+            {%- endif -%}
+            {%- if _meta is not empty -%}
+              <span class="fw-normal">
+                {{- ' ' ~ _meta -}}
+              </span>
+            {%- endif -%}
+          </small>
+          {% endif %}
+        </div>
+        {% set _download = _download|merge({
+          icon_position: "after",
+          icon: {
+            name: "download",
+            size: "fluid",
+            path: _icon_path,
+          },
+          attributes: create_attribute()
+                      .setAttribute('download', _download.url)
+                      .addClass(['text-underline-hover', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
+        }) %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
+      </div>
+    </div>
+  </div>
+  {% if _translation is not empty %}
+  <div class="bg-lighter py-3 px-4 border-top">
+    {% set _id = _translation.id|default('language-dropdown' ~ random(1000)) %}
+    <div class="text-end text-md-center">
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _translation.label|merge({
+        path: '#' ~ _id,
+        attributes: create_attribute()
+                    .addClass(['text-underline-hover'])
+                    .setAttribute('aria-controls', _id)
+                    .setAttribute('data-bs-toggle', 'collapse')
+                    .setAttribute('aria-expanded', 'false')
+                    .setAttribute('role', 'button'),
+      }) only %}
+    </div>
+    {% if _translation.items is not empty and _translation.items is iterable %}
+    <div class="collapse" id="{{ _id }}">
+      {% for _item in _translation.items %}
+        {% set _item_classes = loop.last ? 'pt-3' : 'py-3 border-bottom' %}
+        <div class="{{ _item_classes }}">
+        {% if _item.type == 'content' %}
+          {{ _item.content }}
+        {% else %}
+          <div class="row">
+            <div class="col-12 col-md-9">
+              {% if _item.title is not empty %}
+                <p class="fw-bold m-0">{{ _item.title }}</p>
+              {% endif %}
+              {% if _item.title is not empty %}
+                <p class="m-0">{{ _item.description }}</p>
+              {% endif %}
+              {% if _item.language is not empty or _item.meta is not empty %}
+              <small class="fw-bold m-0">
+                {%- if _item.language is not empty -%}
+                  {{- _item.language -}}
+                {%- endif -%}
+                {%- if _item.meta is not empty -%}
+                  <span class="fw-normal">
+                    {{- ' ' ~ _item.meta -}}
+                  </span>
+                {%- endif -%}
+              </small>
+              {% endif %}
+            </div>
+            <div class="col-12 col-md-3 align-self-end text-md-end">
+            {% include '@oe-bcl/bcl-link/link.html.twig' with _item.download|merge({
+              icon_position: "after",
+              icon: {
+                name: "download",
+                size: "fluid",
+                path: _icon_path,
+              },
+              attributes: create_attribute()
+                          .setAttribute("download", _item.download.url)
+                          .addClass(['d-block', 'text-underline-hover', 'mt-1'])
+            }) only %}
+            </div>
+          </div>
+        {% endif %}
+        </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+
+{% endspaceless %}

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,13 @@
   ]
 #}
 
+{% 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 }}
@@ -67,7 +69,7 @@
                   {% if item.type == 'links' %}
                     {% for link in item.links %}
                       {% include '@oe-bcl/bcl-link/link.html.twig' with link|merge({
-                        attributes: create_attribute().addClass(['d-block', 'text-decoration-none', 'mb-1'])
+                        attributes: create_attribute().addClass(['d-block', 'text-underline-hover', 'mb-1'])
                       }) only %}
                     {% endfor %}
                   {% endif %}

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 %}
-      <p>{{ _site_name }}</p>
+      <div class="{{ _site_name_classes }}">
+       {{- _site_name -}}
+       </div>
     {% endif %}
     </div>
   </div>

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

@@ -0,0 +1,42 @@
+{% spaceless %}
+
+{#
+Parameters:
+  - "title": (string) (default: '')
+  - "full_layout": (boolean) (default: false)
+  - "links": (array of link objects) (default: [])
+  - "content": (string) (default: '')
+#}
+
+{# Internal properties #}
+{% 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) %}
+{% 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">
+{% endif %}
+    <nav {{ attributes }}>
+      {% if _title is defined and _title is not empty %}
+        <h5>{{ _title }}</h5>
+      {% endif %}
+      {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
+        'pills': true,
+        'vertical': true,
+        'items': _links,
+      } only %}
+    </nav>
+{% if _full_layout %}
+  </div>
+  <div class="col-md-9">
+    {{ _content }}
+  </div>
+</div>
+{% endif %}
+
+{% endspaceless %}