@openeuropa/bcl-theme-joinup 1.10.1 → 1.10.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-joinup",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "OE - BCL theme joinup",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -20,18 +20,18 @@
     "update:templates": "npm-run-all -s align-templates build:copy"
   },
   "devDependencies": {
-    "@babel/core": "7.26.9",
-    "@babel/plugin-transform-runtime": "7.26.9",
-    "@babel/preset-env": "7.26.9",
-    "@babel/preset-react": "7.26.3",
+    "@babel/core": "7.27.4",
+    "@babel/plugin-transform-runtime": "7.27.4",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
     "@fontsource/roboto": "5.1.1",
-    "@openeuropa/bcl-bootstrap": "^1.10.1",
-    "@openeuropa/bcl-builder": "^1.10.1",
-    "@openeuropa/bcl-theme-default": "^1.10.1",
-    "@openeuropa/bcl-twig-templates": "^1.10.1",
+    "@openeuropa/bcl-bootstrap": "^1.10.3",
+    "@openeuropa/bcl-builder": "^1.10.3",
+    "@openeuropa/bcl-theme-default": "^1.10.3",
+    "@openeuropa/bcl-twig-templates": "^1.10.3",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
@@ -57,5 +57,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "6c77dfb1e65950872e806cd0acb14023c279b934"
+  "gitHead": "b8331832899a57361f44b8a5e3a6c82d0218532f"
 }

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

@@ -9,6 +9,7 @@
     - end_day (integer) (default: '')
     - end_month (string) (default: '')
     - end_year (integer) (default: '')
+    - icon_path (string) (default: '')
 #}
 
 {% set _day = day|default('') %}
@@ -18,6 +19,7 @@
 {% set _end_day = end_day|default('') %}
 {% set _end_month = end_month|default('') %}
 {% set _end_year = end_year|default('') %}
+{% set _icon_path = icon_path|default('') %}
 
 {% set _classes = [
   'bcl-date-block',
@@ -42,23 +44,37 @@
 {% endif %}
 
 <time {{ attributes }}>
-  <span class="d-flex flex-column pt-2">
-    <span class="d-flex flex-column align-item-center justify-content-center bg-white border border-bottom-0 w-100 h-100 fs-5 text-uppercase">
-      <span class="d-block">{{- _day ~ ' ' ~ _month ~ ((_end_day or _end_month) ? ' - ' ) -}}</span>
-      {%- if _end_day is not empty %}
-        {{- _end_day -}}
-      {% endif -%}
-      {%- if _end_month is not empty %}
-        {{- ' ' ~ _end_month -}}
-      {% endif -%}
-    </span>
-    <span class="bg-lighter border w-100 rounded-bottom py-1">
-      {{- _year -}}
+  <div class="d-flex flex-column pt-2">
+    <div class="d-flex align-item-center bg-white border border-bottom-0 w-100 h-100 text-uppercase justify-content-center gap-2">
+      <div class="d-flex flex-column align-item-center justify-content-center">
+        <div class="date-month lh-1">{{- _month -}}</div>
+        <div class="date-day fw-bold fs-4 lh-1">{{- _day -}}</div>
+      </div>
+      {% if _end_day or _end_month %}
+        <div class="d-flex flex-column align-item-center justify-content-center">
+          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
+            name: "chevron-right",
+            size: "xs",
+            path: _icon_path,
+          } only -%}
+        </div>
+        <div class="d-flex flex-column align-item-center justify-content-center">
+          {%- if _end_month is not empty %}
+            <div class="date-month lh-1">{{- _end_month -}}</div>
+          {% endif -%}
+          {%- if _end_day is not empty %}
+            <div class="date-day fw-bold fs-4 lh-1">{{- _end_day -}}</div>
+          {% endif -%}
+        </div>
+      {% endif %}
+    </div>
+    <div class="bg-lighter border w-100 rounded-bottom py-1 d-flex gap-4 justify-content-center">
+      <div class="date-year year-start">{{- _year -}}</div>
       {%- if _end_year is not empty -%}
-        {{ ' - ' ~ _end_year }}
+        <div class="date-year year-end">{{ _end_year }}</div>
       {%- endif -%}
-    </span>
-  </span>
+    </div>
+  </div>
 </time>
 
 {% endapply %}

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

@@ -29,8 +29,13 @@ Parameters:
 {% endif %}
 
 {% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
-{% set title_attributes = _title_attributes.addClass('mb-0') %}
-{% set _title_content %}
+
+{% if not attributes.hasAttribute('aria-label') and not attributes.hasAttribute('aria-labelledby') %}
+  {% set attributes = attributes.setAttribute('aria-labelledby', _dropdown_id) %}
+{% endif %}
+
+{% set title_attributes = _title_attributes.addClass(['mb-0', 'd-none', 'd-md-block']) %}
+{% set _button_content %}
   {{ _title }}
   {%- include '@oe-bcl/bcl-icon/icon.html.twig' with {
     name: 'chevron-down',
@@ -45,21 +50,25 @@ Parameters:
   {% set _classes = _classes|merge(['dynamic-active']) %}
 {% endif %}
 
-<nav {{ attributes.addClass(_classes) }}>
+<nav{{ attributes.addClass(_classes) }}>
   {% set trigger_attributes = create_attribute()
                               .setAttribute('aria-expanded', 'false')
                               .setAttribute('type', 'button')
                               .setAttribute('id', _dropdown_id)
                               .setAttribute('data-bs-toggle', 'dropdown')
-                              .addClass(['dropdown-toggle']) %}
+                              .addClass(['dropdown-toggle', 'h2', 'd-md-none']) %}
+  {% include '@oe-bcl/bcl-button/button.html.twig' with {
+    label: _button_content,
+    clean_class: true,
+    attributes: trigger_attributes,
+  } only %}
   {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
-    title: _title_content,
+    title: _title,
     title_tag: _title_tag,
     title_link: _title_link,
-    attributes: _title_attributes
-                .merge(trigger_attributes),
+    attributes: _title_attributes,
   } only %}
-  <div class="dropdown-menu" aria-labelledby="{{ _dropdown_id }}">
+  <div class="dropdown-menu">
     {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
       'pills': true,
       'vertical': true,