@openeuropa/bcl-theme-default 0.17.0 → 0.20.0

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,12 +47,13 @@
     {% 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' %}
@@ -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-navigation/navigation.html.twig

@@ -3,7 +3,7 @@
 
 {# Parameters:
   - pills (boolean) (default: false)
-  - tabs (boolean) (default: false)
+  - tabs (boolean) (default: false) - If tabs is set to true, the nav should also be set to true for accessibility reasons
   - vertical (boolean) (default: false)
   - full_width (boolean) (default: false)
   - alignment (string) (default: '')
@@ -68,7 +68,7 @@
     {% set attributes = attributes.setAttribute('id', _id) %}
   {% endif %}
 
-  {% if not _nav and _tabs %}
+  {% if _tabs %}
     {% set attributes = attributes.setAttribute('role', 'tablist') %}
   {% endif %}
   {% set attributes = attributes.addClass(_classes) %}
@@ -109,9 +109,14 @@
         <li
           class="{{ _nav_class }}"
           {% if _tabs %}
-            role="presentation"
+            role="tab"
           {% endif %}
         >
+        {% elseif _tabs %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.setAttribute("role", "tab"),
+            }) 
+          %}
         {% endif %}
         {% if _item.dropdown is defined %}
           {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %}

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

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

@@ -12,6 +12,7 @@
       - path (string)
       - label (string)
       - disabled (boolean)
+      - aria_label (string)
       - icon (Icon component)
     }
   - next (object)
@@ -19,6 +20,7 @@
       - path (string)
       - label (string)
       - disabled (boolean)
+      - aria_label (string)
       - icon (Icon component)
     }
   - items (array of objects)
@@ -75,6 +77,9 @@
         tabindex="-1"
         aria-disabled="true"
         {% endif %}
+        {%- if _prev.aria_label -%}
+        aria-label="{{ _prev.aria_label }}"
+        {%- endif -%}
       >
       {%- if _enable_icon -%}
         {%- if _prev.icon is not empty -%}
@@ -127,6 +132,9 @@
         tabindex="-1"
         aria-disabled="true"
         {% endif %}
+        {%- if _next.aria_label -%}
+        aria-label="{{ _next.aria_label }}"
+        {%- endif -%}
       >
       {%- if _enable_icon -%}
         {%- if _next.icon is not empty -%}

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

@@ -6,6 +6,7 @@
   - max (int) (default: 100)
   - striped (boolean) (default: false)
   - animated (boolean) (default: false)
+  - hidden_label (boolean) (default: false)
   - label (string) (default: '')
   - bar_label (string) (default: '')
   - variant (string) (default: '')
@@ -17,6 +18,7 @@
 {% set _max = max|default(100) %}
 {% set _striped = striped|default(false) %}
 {% set _animated = animated|default(false) %}
+{% set _hidden_label = hidden_label|default(false) %}
 {% set _label = label|default('') %}
 {% set _bar_label = bar_label|default('') %}
 {% set _variant = variant|default('') %}
@@ -53,10 +55,13 @@
     role="progressbar"
     style="width: {{ _progress }}%"
     aria-valuenow="{{ _progress }}"
+    aria-label="{{ _progress }}"
     aria-valuemin="{{ _min }}"
     aria-valuemax="{{ _max }}"
   >
-  {{- _bar_label -}}
+  {%- if not _hidden_label -%}
+    {{- _bar_label -}}
+  {%- endif -%}
   </div>
 </div>
 {% if _message is not empty %}

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

@@ -0,0 +1,112 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
+{% endblock %}
+
+{% block content %}
+
+  {% if project_status.main_title is not empty %}
+    <h3
+      class="fw-bold mb-4"
+      {% if project_status.main_title_id is not empty %}
+      id="{{ project_status.main_title_id }}"
+      {% endif %}
+    >{{- project_status.main_title -}}</h3>
+  {% endif %}
+  {% include '@oe-bcl/bcl-project-status/project-status.html.twig' with project_status %}
+
+  {% if status_lists.main_title is not empty %}
+    <h3
+      class="fw-bold my-4"
+      {% if status_lists.main_title_id is not empty %}
+      id="{{ status_lists.main_title_id }}"
+      {% endif %}
+    >{{- status_lists.main_title -}}</h3>
+  {% endif %}
+  {% if status_lists.listing is defined and status_lists.listing is not empty %}
+    {% for lists in status_lists.listing %}
+      {% if lists.title is not empty %}
+      <h4 class="fw-bold mb-3">{{ lists.title }}</h4>
+      {% endif %}
+      {% for list in lists.content %}
+        {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with list only %}
+      {% endfor %}
+    {% endfor %}
+  {% endif %}
+
+  {% if first_paragraphs is defined and first_paragraphs is not empty %}
+    {% for paragraph in first_paragraphs %}
+        <h3
+          class="fw-bold mb-4 pt-3"
+          id="{{ paragraph.title_id }}"
+        >
+          {{- paragraph.title -}}
+        </h3>
+
+      {{- paragraph.content -}}
+    {% endfor %}
+  {% endif %}
+
+  {% if content_lists.main_title is not empty %}
+    <h3
+      class="fw-bold my-4"
+      {% if content_lists.main_title_id is not empty %}
+      id="{{ content_lists.main_title_id }}"
+      {% endif %}
+    >{{- content_lists.main_title -}}</h3>
+  {% endif %}
+  {% if content_lists.listing is defined and content_lists.listing is not empty %}
+    {% for lists in content_lists.listing %}
+      {% if lists.title is not empty %}
+      <h4 class="fw-bold mb-3">{{ lists.title }}</h4>
+      {% endif %}
+      {% for list in lists.content %}
+        {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with list only %}
+      {% endfor %}
+    {% endfor %}
+  {% endif %}
+
+  {% if second_paragraphs is defined and second_paragraphs is not empty %}
+    {% for paragraph in second_paragraphs %}
+      <h3
+        class="fw-bold mb-4 pt-2"
+        id="{{ paragraph.title_id }}"
+      >
+        {{- paragraph.title -}}
+      </h3>
+      {{- paragraph.content -}}
+    {% endfor %}
+  {% endif %}
+
+  {% if gallery.main_title is not empty %}
+    <h3
+      class="fw-bold my-4"
+      {% if gallery.main_title_id is not empty %}
+      id="{{ gallery.main_title_id }}"
+      {% endif %}
+    >{{- gallery.main_title -}}</h3>
+  {% endif %}
+  {% if gallery.listing is defined and gallery.listing is not empty %}
+  <div class="mt-3">
+    {% for showcase in gallery.listing %}
+      <div class="mb-2-5 pb-4">
+      {% if showcase.carousel %}
+        {% include '@oe-bcl/bcl-carousel/carousel.html.twig' with showcase only %}
+      {% else %}
+        {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with showcase only %}
+      {% endif %}
+      </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {% if social_block is not empty %}
+    {% block social_block %}
+      {{ social_buttons }}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with button_social_modal only %}
+      {% include '@oe-bcl/bcl-modal/modal.html.twig' with social_modal only %}
+    {% endblock %}
+  {% endif %}
+
+{% endblock %}