@openeuropa/bcl-theme-default 0.18.0 → 0.21.0

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

@@ -10,19 +10,23 @@
         classes: ""
       }
   - site_name (string) (default: "")
+  - project_link (string) (default: "")
   - head (Navbar object) (default: {})
   - breadcrumbs (Breadcrumbs object) (default: {})
   - light (boolean) (default: false)
   - modals (Array of modal objects) (default: [])
+  - language_modal (object) (default: {})
 #}
 
 {% set _variant = variant|default('neutral') %}
 {% set _navbar = navbar|default({}) %}
 {% set _project_logo = project_logo|default({}) %}
+{% set _project_link = project_link|default('') %}
 {% set _site_name = site_name|default('') %}
 {% set _site_name_classes = 'bcl-header__site-name' %}
 {% set _head = head|default({}) %}
 {% set _breadcrumbs = breadcrumbs|default({}) %}
+{% set _language_modal = language_modal|default({}) %}
 {% set _modals = modals|default([]) %}
 {% set _light = light|default(false) %}
 
@@ -53,23 +57,31 @@
   {% if _project_logo is not empty or _site_name is not empty %}
   <div class="{{ _project_classes  }}">
     <div class="container">
-    {% if _project_logo is not empty %}
-      <img
-      {% if _project_logo.path is not empty %}
-        src="{{ _project_logo.path }}"
-      {% endif %}
-      {% if _project_logo.alt is not empty %}
-        alt="{{ _project_logo.alt }}"
+    {% if _project_link is not empty %}
+      <a
+        href="{{ _project_link }}"
+      >
+    {% endif %}
+      {% if _project_logo is not empty %}
+        <img
+        {% if _project_logo.path is not empty %}
+          src="{{ _project_logo.path }}"
+        {% endif %}
+        {% if _project_logo.alt is not empty %}
+          alt="{{ _project_logo.alt }}"
+        {% endif %}
+        {% if _project_logo.classes is not empty %}
+          class="{{ _project_logo.classes }}"
+        {% endif %}
+        />
       {% endif %}
-      {% if _project_logo.classes is not empty %}
-        class="{{ _project_logo.classes }}"
+      {% if _site_name is not empty %}
+        <span class="{{ _site_name_classes }}">
+        {{- _site_name -}}
+        </span>
       {% endif %}
-      />
-    {% endif %}
-    {% if _site_name is not empty %}
-      <div class="{{ _site_name_classes }}">
-       {{- _site_name -}}
-       </div>
+    {% if _project_link is not empty %}
+      </a>
     {% endif %}
     </div>
   </div>
@@ -92,4 +104,8 @@
   {% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
 {% endfor %}
 
+{% if _language_modal is not empty %}
+  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
+{% endif %}
+
 {% endspaceless %}

package/templates/bcl-language-list/language-list-grid.html.twig

@@ -0,0 +1,68 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - items (array) (default: []) format: [
+    {
+      lang (string)
+      label (string)
+      path (string)
+      active (boolean)
+    }
+  ]
+  - category (string) (default: '')
+  - icon_path (string) (default: '')
+#}
+
+{% set _items = items|default([]) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _category = category|default('') %}
+
+{% set _columns = [] %}
+{% set _columns = _columns|merge([_items|slice(0, (items|length / 2)|round(0, 'ceil'))]) %}
+{% set _columns = _columns|merge([_items|slice((items|length / 2)|round(0, 'ceil'), items|length)]) %}
+
+<div class="pb-2">
+  {% if _category is not empty %}
+  <h5 class="mb-4">{{ _category }}</h5>
+  {% endif %}
+  {% if _columns is not empty and _columns is iterable %}
+  <div class="row">
+    {% for _column in _columns %}
+      <div class="col-12 col-md">
+      {% for _item in _column %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(['w-100', 'mb-2-5', 'btn', 'w-100'])
+        }) %}
+        {% if _item.active %}
+          {% set _item = _item|merge({
+            icon: {
+              name: "check2",
+              path: _icon_path,
+            },
+            attributes: _item.attributes.addClass(['selected', 'justify-content-between'])
+          }) %}
+        {% else %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.addClass('justify-content-start')
+          }) %}
+        {% endif %}
+        {% if _item.lang is not empty %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.setAttribute('lang', _item.lang).setAttribute('hreflang', _item.lang)
+          }) %}
+        {% endif %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+      {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+
+{% endspaceless %}

package/templates/bcl-language-list/language-list-modal.html.twig

@@ -0,0 +1,58 @@
+{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}
+
+{% if _title is not empty %}
+  {% set header = true %}
+{% endif %}
+
+{% if _variant == 'neutral' %}
+  {% set size = "xl" %}
+  {% set fullscreen_responsive = "md" %}
+{% else %}
+  {% set size = "fullscreen" %}
+{% endif %}
+
+{% set overlay = false %}
+{% set inside_container = true %}
+
+{% set attributes = attributes.addClass(['bcl-language-list-modal', 'bcl-language-list-modal--' ~ _variant]) %}
+
+{% block header %}
+  {% if size == 'fullscreen' %}
+  <div class="container">
+    {% if variant == 'eu' or variant == 'ec' %}
+    <div class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5">
+      <div class="py-3-5 px-3 px-sm-0 px-md-3">
+    {% endif %}
+    <div class="d-flex justify-content-between align-items-center">
+  {% endif %}
+  <div class="d-flex align-items-center">
+    {% set _title_classes = 'mb-0' %}
+    {% if _icon_path is not empty %}
+      {% set _title_classes = _title_classes ~ ' ms-2' %}
+      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+        name: 'globe2',
+        path: _icon_path
+      } only %}
+    {% endif %}
+    <h5 class="{{ _title_classes }}">{{ _title }}</h5>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="modal"
+    {% if _close_label is not empty %}
+      aria-label="{{ _close_label }}"
+    {% endif %}
+  ></button>
+  {% if size == 'fullscreen' %}
+    </div>
+    {% if variant == 'eu' or variant == 'ec' %}
+      </div>
+    </div>
+    {% endif %}
+  </div>
+  {% endif %}
+{% endblock %}
+
+{% block body %}
+  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with {
+    attributes: create_attribute()
+  } %}
+{% endblock %}

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

@@ -0,0 +1,111 @@
+{% spaceless %}
+
+{# Parameters:
+  - overlay (boolean) (default: false)
+  - inside_container (boolean) (default: false)
+  - variant (string) (default: 'neutral')
+  - title (string) (default: '')
+  - logo (object) (default: {}) format: {
+      path (string),
+      alt (string),
+      class (string),
+    }
+  - icon_path (string) (default: '')
+  - eu_category (string) (default: '');
+  - non_eu_category (string) (default: '')
+  - items (array) (default: [])
+    - "lang" (string) (default: '')
+    - "label" (string) (default: '')
+    - "path" (string) (default: '')
+    - "active (boolean) (default: false)
+  - non_eu_items (array) (default: [])
+    - "lang" (string) (default: '')
+    - "label" (string) (default: '')
+    - "path" (string) (default: '')
+    - "active (boolean) (default: false)
+  - close_label (string) (default: '')
+#}
+
+{% set _overlay = overlay|default(false) %}
+{% set _inside_container = inside_container|default(false) %}
+{% set _variant = variant|default('neutral') %}
+{% set _title = title|default('') %}
+{% set _logo = logo|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _eu_category = eu_category|default('') %}
+{% set _non_eu_category = non_eu_category|default('') %}
+{% set _items = items|default([]) %}
+{% set _non_eu_items = non_eu_items|default([]) %}
+{% set _close_label = close_label|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _overlay %}
+  {% include '@oe-bcl/bcl-language-list/language-list-modal.html.twig' %}
+{% else %}
+  {% set attributes = attributes.addClass(['bcl-language-list', 'bcl-language-list--' ~ _variant]) %}
+
+  {% if not _inside_container %}
+    {% set attributes = attributes.addClass(['pt-5']) %}
+  {% endif %}
+
+  <div
+    {{ attributes }}
+  >
+    {% if _logo is not empty %}
+    <div class="container">
+      {% if _title is empty %}
+      <div class="text-center">
+      {% endif %}
+      <div class="d-inline-flex align-items-center">
+        <img
+          {% if _logo.path is not empty %}
+          src="{{ _logo.path }}"
+          {% endif %}
+          {% if _logo.alt is not empty %}
+          alt="{{ _logo.alt }}"
+          {% endif %}
+          {% if _logo.class is not empty %}
+          class="{{ _logo.class }}"
+          {% endif %}
+        />
+        {% if _title is not empty %}
+        <h5 class="h5 ms-4">{{ _title }}</h5>
+        {% endif %}
+      </div>
+      {% if _title is empty %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {% if _items is not empty or _non_eu_items is not empty %}
+    <div class="main pt-4">
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      <div class="container">
+      {% endif %}
+      {% if _items is not empty and _items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _items,
+            icon_path: _icon_path,
+            category: eu_category,
+        } only %}
+      {% endif %}
+      {% if _non_eu_items is not empty and _non_eu_items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _non_eu_items,
+            icon_path: _icon_path,
+            category: non_eu_category,
+        } only %}
+      {% endif %}
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
+{% endif %}
+
+{% endspaceless %}

package/templates/bcl-language-switcher/language-switcher.html.twig

@@ -0,0 +1,44 @@
+{% spaceless %}
+
+{# Parameters:
+  - id (string) (default: collapse-{random number 0-1000}) - collapse custom id - optional
+  - message (alert object) (default: {})
+  - expandable (button object) (default: [])
+  - language (array of link object) (default: [])
+#}
+
+{% set _id = id|default('collapse-' ~ random(1000)) %}
+{% set _message = message|default({}) %}
+{% set _expandable = expandable|default({}) %}
+{% set _languages = languages|default([]) %}
+
+{% set _expandable_attributes = _expandable.attributes ?: create_attribute() %}
+
+{% set _expandable_attributes = _expandable_attributes
+                                .setAttribute('data-bs-toggle', 'collapse')
+                                .setAttribute('autocomplete', 'off')
+                                .setAttribute('aria-expanded', 'false')
+                                .setAttribute('aria-controls', _id)
+                                .setAttribute('data-bs-target', '#' ~ _id)
+%}
+
+{% include '@oe-bcl/bcl-alert/alert.html.twig' with _message only %}
+
+{% include '@oe-bcl/bcl-button/button.html.twig' with _expandable|merge({
+  attributes: _expandable_attributes
+}) only %}
+
+<div class="collapse mt-3" id="{{ _id }}">
+  <div
+    class="d-md-grid"
+    style="grid-auto-flow: column; grid-template-rows: repeat(4, 1fr)"
+  >
+    {% for language in languages %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with language|merge({
+        attributes: create_attribute().addClass(["btn", "btn-link", "d-block", "ps-0", "text-start"])
+      }) only %}
+    {% endfor %}
+  </div>
+</div>
+
+{% endspaceless %}

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

@@ -65,7 +65,7 @@
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}
 {% if _standalone %}
-  {% set _classes = _classes|merge(['text-underline-hover']) %}
+  {% set _classes = _classes|merge(['standalone']) %}
 {% endif %}
 {% if _classes is not empty %}
   {% set attributes = attributes.addClass(_classes) %}

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

@@ -21,7 +21,7 @@
 {% endif %}
 
 {% if _background == "gray" %}
-  {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3"]) %}
+  {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3", "rounded-2"]) %}
 {% endif %}
 
 <div
@@ -41,7 +41,7 @@
         {% endif %}
         {% set _link = _link|merge({
           clean_class: true,
-          attributes: _link.attributes.addClass(["pb-3", "d-inline-block"])
+          attributes: _link.attributes.addClass(["pb-3", "d-inline-block", "standalone"])
         }) %}
         {% set _list_item_classes = "list-unstyled" %}
         {% if _variant == "horizontal" %}

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

@@ -47,15 +47,16 @@
     {% set _max_width = '' %}
     {% set _image = {} %}
     {% if _card.image is not empty %}
-      {% set _max_width = 'mw-listing-img' %}
+      {% set _image_classes = _card.image.classes ?: '' %}
       {% if not _alignment == 'center' %}
-        {% set _image_classes = _card.image.classes ? _card.image.classes ~ ' mb-3' : 'mb-3' %}
+        {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
       {% endif %}
+      {% set _max_width = 'mw-listing-img' %}
       {% set _card = _card|merge({image: _card.image|merge({
-        classes: _image_classes
+        classes: _image_classes,
       })}) %}
     {% elseif _card.date is not empty %}
-      {% set _max_width = 'mw-date mb-3' %}
+      {% set _max_width = 'mw-col-date mb-3' %}
     {% endif %}
     {% if _alignment is not empty %}
       {% set _alignment_class = ' align-self-' ~ _alignment %}
@@ -168,6 +169,12 @@
       {% endif %}
     {% endif %}
 
+    {% if _card.image is empty and _card.date is empty %}
+      {% set _card = _card|merge({
+        horizontal: false,
+      }) %}
+    {% endif %}
+
     {% set _cards = _cards|merge([_card]) %}
   {% endfor %}
 {% endif %}

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

@@ -3,17 +3,22 @@
 {# Parameters:
   - size (string) (sm, lg, xl, fullscreen) default('')
   - id (boolean) (default: 'modal-' ~ random(1000))
+  - fullscreen_responsive (string) (default: '')
+    options: sm, md, lg, xl, xxl
   - static_backdrop (boolean) (default: false)
   - verticaly_centered (boolean) (default: false)
   - scrollable (boolean) (default: false)
   - header (block) (default: '')
+  - messages (block) (default: '')
   - body (block) (default: '')
   - footer (block) (default: '')
 #}
 {% set _size =  size|default('') %}
 {% set _id = id|default('modal-' ~ random(1000)) %}
+{% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
 {% set _header = header|default('') %}
 {% set _body = body|default('') %}
+{% set _messages = messages|default('') %}
 {% set _static_backdrop = static_backdrop|default(false) %}
 {% set _verticaly_centered = verticaly_centered|default(false) %}
 {% set _scrollable = scrollable|default(false) %}
@@ -28,7 +33,7 @@
                     .setAttribute('id', _id)
                     .setAttribute('tabindex', '-1')
                     .setAttribute('aria-hidden', 'true')
-                    .setAttribute('aria-labelledby', _id ~ 'Label')
+                    .setAttribute('aria-label', _id ~ 'Label')
                     .addClass(_classes)
 %}
 
@@ -37,20 +42,26 @@
 >
   <div class="modal-dialog
   {{- _size ? ' modal-' ~ size -}}
+  {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
   {{- _verticaly_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
   {{- _static_backdrop ? ' data-bs-backdrop="static"' -}}
   >
     <div class="modal-content">
+      {% if header is not empty %}
       <div class="modal-header">
         {%- block header _header -%}
       </div>
+      {% endif %}
+      {%- block messages _messages -%}
       <div class="modal-body">
         {%- block body _body -%}
       </div>
+      {% if footer is not empty %}
       <div class="modal-footer">
         {%- block footer _footer -%}
       </div>
+      {% endif %}
     </div>
   </div>
 </div>

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

@@ -18,6 +18,11 @@
   - color_set (string) (default: 'light')
     options ['light', 'dark']
   - disable_collapse (boolean) (default: false)
+
+  Blocks
+    - branding
+    - navigation
+    - right
 #}
 {% set _collapse_id = collapse_id|default('') %}
 {% set _background = background|default('') %}
@@ -45,26 +50,28 @@
   {{ attributes }}
 >
   <div class='container'>
-  {% 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 %}
+  {% block branding %}
+    {% 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 %}
+  {% endblock %}
 
   {% if not _disable_collapse %}
     <button
@@ -79,16 +86,20 @@
       <span class='navbar-toggler-icon'></span>
     </button>
     <div class='collapse navbar-collapse' id='{{ _collapse_id }}'>
+  {% endif %}
+  {% block navigation %}
+    {% if _navigation is not empty %}
+      {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
     {% endif %}
-      {% if _navigation is not empty %}
-        {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with _navigation only %}
-      {% endif %}
-      {% if _form is not empty %}
-        {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
-      {% endif %}
-    {% if not _disable_collapse %}
-    </div>
+  {%  endblock %}
+  {% block right %}
+    {% if _form is not empty %}
+      {% include '@oe-bcl/bcl-form/form.html.twig' with _form only %}
     {% endif %}
+  {%  endblock %}
+  {% if not _disable_collapse %}
+    </div>
+  {% endif %}
   </div>
 </nav>
 

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

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content %}
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  <p id="content">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