Merge pull request #1543 from openeuropa/EWPP-5156

EWPP-5156: Update to ECL 5.0.0-alpha1.

.drone.yml

@@ -42,7 +42,7 @@ services:
 pipeline:
   ecl-build:
     group: prepare
-    image: git.fpfis.tech.ec.europa.eu/fpfis/dependency_proxy/containers/node:20.9.0
+    image: git.fpfis.tech.ec.europa.eu/fpfis/dependency_proxy/containers/node:22.11.0
     commands:
       # To build the theme using a development version of ECL set its development branch in .env.dist
       # and make sure that ECL_BUILD is set to "dev".

docker-compose.yml

@@ -36,7 +36,7 @@ services:
       - '4444'
     shm_size: 2g
   node:
-    image: node:20.9.0
+    image: node:22.11.0
     user: "node"
     working_dir: /home/node/app
     environment:

modules/oe_theme_helper/src/Loader/ComponentLibraryLoader.php

@@ -44,7 +44,7 @@ public function __construct($namespaces, $root, $theme, $directory, ThemeHandler
     }
 
     $this->logger = $logger_factory->get('ecl');
-    parent::__construct($namespaces, $path, $root, 'twig-component-', 'ecl-');
+    parent::__construct($namespaces, $path, $root, '', 'ecl-');
   }
 
 }

modules/oe_theme_helper/src/TwigExtension/TwigExtension.php

@@ -162,22 +162,6 @@ public function toInternalLanguageId($language_code): string {
     return $map_other_language_codes[$language_code] ?? $language_code;
   }
 
-  /**
-   * Returns a list of language data.
-   *
-   * This is the data that is expected to be returned by the overridden language
-   * manager as supplied by the OpenEuropa Multilingual module.
-   *
-   * @return array
-   *   An array with language codes as keys, and English and native language
-   *   names as values.
-   *
-   * @deprecated use EuropeanUnionLanguages::getLanguageList() instead.
-   */
-  public static function getEuropeanUnionLanguageList(): array {
-    return EuropeanUnionLanguages::getLanguageList();
-  }
-
   /**
    * Get date variant class given its status.
    *

oe_theme.theme

@@ -1599,27 +1599,24 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
   }
   // Get the alignment value.
   if ($paragraph->hasField('field_oe_banner_alignment') && !$paragraph->get('field_oe_banner_alignment')->isEmpty()) {
-    $variables['centered'] = $paragraph->get('field_oe_banner_alignment')->value === 'centered';
+    $variables['horizontal'] = $paragraph->get('field_oe_banner_alignment')->value === 'centered' ? 'center' : 'left';
   }
 
-  // Map the deprecated variants from oe_paragraphs to Banner pattern variants.
-  $deprecated_paragraph_variants_mapping = [
-    'default' => 'plain_background',
-    'primary' => 'plain_background',
-    'image' => 'text_box',
-    'image_shade' => 'text_overlay',
-    'text_highlight' => 'text_overlay',
-  ];
+  // Map Banner paragraph variants to their corresponding font_color and
+  // box_background.
   $variant = $paragraph->get('oe_paragraphs_variant')->first()->value;
-  if ($variant) {
-    $variant = str_replace('oe_banner_', '', $variant);
-    $variables['variant'] = $deprecated_paragraph_variants_mapping[$variant] ?? $variant;
-  }
 
-  if ($variables['variant'] === 'plain_background') {
+  if ($variant && (str_contains($variant, 'default') || str_contains($variant, 'primary'))) {
+    $variables['font_color'] = 'light';
+    $variables['box_background'] = 'none';
     return;
   }
 
+  if ($variant && (str_contains($variant, 'image_shade') || str_contains($variant, 'text_highlight'))) {
+    $variables['font_color'] = 'light';
+    $variables['box_background'] = 'dark';
+  }
+
   // Bail out if there is no media present.
   if ($paragraph->get('field_oe_media')->isEmpty()) {
     return;

package.json

@@ -14,59 +14,16 @@
     "prepare": "patch-package"
   },
   "dependencies": {
-    "@ecl/builder": "4.10.0",
-    "@ecl/preset-ec": "4.10.0",
-    "@ecl/preset-eu": "4.10.0",
-    "@ecl/preset-reset": "4.10.0",
+    "@ecl/builder": "5.0.0-alpha.1",
+    "@ecl/preset-ec": "5.0.0-alpha.1",
+    "@ecl/preset-eu": "5.0.0-alpha.1",
+    "@ecl/preset-reset": "5.0.0-alpha.1",
     "@ecl/stylelint-config": "0.2.1",
-    "@ecl/theme-ec": "4.10.0",
-    "@ecl/theme-eu": "4.10.0",
-    "@ecl/twig-component-accordion": "4.10.0",
-    "@ecl/twig-component-banner": "4.10.0",
-    "@ecl/twig-component-blockquote": "4.10.0",
-    "@ecl/twig-component-breadcrumb": "4.10.0",
-    "@ecl/twig-component-button": "4.10.0",
-    "@ecl/twig-component-card": "4.10.0",
-    "@ecl/twig-component-carousel": "4.10.0",
-    "@ecl/twig-component-content-item": "4.10.0",
-    "@ecl/twig-component-datepicker": "4.10.0",
-    "@ecl/twig-component-description-list": "4.10.0",
-    "@ecl/twig-component-expandable": "4.10.0",
-    "@ecl/twig-component-fact-figures": "4.10.0",
-    "@ecl/twig-component-featured-item": "4.10.0",
-    "@ecl/twig-component-file": "4.10.0",
-    "@ecl/twig-component-gallery": "4.10.0",
-    "@ecl/twig-component-icon": "4.10.0",
-    "@ecl/twig-component-inpage-navigation": "4.10.0",
-    "@ecl/twig-component-label": "4.10.0",
-    "@ecl/twig-component-link": "4.10.0",
-    "@ecl/twig-component-list-illustration": "4.10.0",
-    "@ecl/twig-component-media-container": "4.10.0",
-    "@ecl/twig-component-mega-menu": "4.10.0",
-    "@ecl/twig-component-menu": "4.10.0",
-    "@ecl/twig-component-navigation-list": "4.10.0",
-    "@ecl/twig-component-news-ticker": "4.10.0",
-    "@ecl/twig-component-notification": "4.10.0",
-    "@ecl/twig-component-page-header": "4.10.0",
-    "@ecl/twig-component-pagination": "4.10.0",
-    "@ecl/twig-component-radio": "4.10.0",
-    "@ecl/twig-component-search-form": "4.10.0",
-    "@ecl/twig-component-select": "4.10.0",
-    "@ecl/twig-component-separator": "4.10.0",
-    "@ecl/twig-component-site-footer": "4.10.0",
-    "@ecl/twig-component-site-header": "4.10.0",
-    "@ecl/twig-component-skip-link": "4.10.0",
-    "@ecl/twig-component-social-media-follow": "4.10.0",
-    "@ecl/twig-component-social-media-share": "4.10.0",
-    "@ecl/twig-component-splash-page": "4.10.0",
-    "@ecl/twig-component-table": "4.10.0",
-    "@ecl/twig-component-tabs": "4.10.0",
-    "@ecl/twig-component-tag": "4.10.0",
-    "@ecl/twig-component-text-input": "4.10.0",
-    "@ecl/twig-component-timeline": "4.10.0",
-    "@ecl/twig-component-video": "4.10.0",
-    "@ecl/vanilla-utility-background": "4.10.0",
-    "@ecl/vanilla-utility-border": "4.10.0",
+    "@ecl/theme-ec": "5.0.0-alpha.1",
+    "@ecl/theme-eu": "5.0.0-alpha.1",
+    "@ecl/twig-templates": "5.0.0-alpha.1",
+    "@ecl/utility-background": "5.0.0-alpha.1",
+    "@ecl/utility-border": "5.0.0-alpha.1",
     "chokidar-cli": "3.0.0",
     "grunt": "1.6.1",
     "grunt-contrib-copy": "1.0.0",
@@ -81,7 +38,7 @@
     "svg4everybody": "2.1.9"
   },
   "engines": {
-    "node": ">=8",
-    "yarn": ">=0.27.5"
+    "node": ">=22.11.0",
+    "pnpm": ">=9.15.3"
   }
 }

patches/@ecl+twig-component-content-block+4.10.0.patch → patches/@ecl+content-block+5.0.0-alpha.1.patch

@@ -1,7 +1,7 @@
-diff --git a/node_modules/@ecl/twig-component-content-block/content-block.html.twig b/node_modules/@ecl/twig-component-content-block/content-block.html.twig
-index 141368d..8fffb43 100644
---- a/node_modules/@ecl/twig-component-content-block/content-block.html.twig
-+++ b/node_modules/@ecl/twig-component-content-block/content-block.html.twig
+diff --git a/node_modules/@ecl/content-block/content-block.html.twig b/node_modules/@ecl/content-block/content-block.html.twig
+index 7394eb1..332a32b 100644
+--- a/node_modules/@ecl/content-block/content-block.html.twig
++++ b/node_modules/@ecl/content-block/content-block.html.twig
 @@ -147,6 +147,7 @@
              link: _link.link|merge({
                type: 'standalone',

patches/@ecl+twig-component-tabs+4.10.0.patch → patches/@ecl+tabs+5.0.0-alpha.1.patch

@@ -1,8 +1,8 @@
-diff --git a/node_modules/@ecl/twig-component-tabs/tabs.html.twig b/node_modules/@ecl/twig-component-tabs/tabs.html.twig
-index 428181c..f114135 100644
---- a/node_modules/@ecl/twig-component-tabs/tabs.html.twig
-+++ b/node_modules/@ecl/twig-component-tabs/tabs.html.twig
-@@ -80,6 +80,9 @@
+diff --git a/node_modules/@ecl/tabs/tabs.html.twig b/node_modules/@ecl/tabs/tabs.html.twig
+index 1ff2bfd..9584fad 100644
+--- a/node_modules/@ecl/tabs/tabs.html.twig
++++ b/node_modules/@ecl/tabs/tabs.html.twig
+@@ -83,6 +83,9 @@
            {% else %}
              {% set _item_extra_attributes = _item_extra_attributes|merge([{ name: 'aria-selected', value: 'false' }]) %}
            {% endif %}

sass/components/_contextual_navigation.scss

@@ -1,4 +1,4 @@
-@use '@ecl/vanilla-layout-grid/mixins/breakpoints';
+@use '@ecl/grid/mixins/breakpoints';
 
 $outline-width: 3px !default;
 $border_right: 1px solid var(--ecl-color-neutral-60) !default;

sass/components/_description_list.scss

@@ -2,7 +2,7 @@
  * @file
  * Add a featured modifier to ECL description list style.
  */
-@use '@ecl/vanilla-utility-border/border' as *;
+@use '@ecl/utility-border/border' as *;
 $background-color: var(--ecl-color-neutral-40) !default;
 $border-color: var(--ecl-color-neutral-40) !default;
 

sass/components/_global.scss

@@ -10,7 +10,7 @@ body {
 
 a {
   text-decoration: none;
-  color: var(--ecl-color-primary-100);
+  color: var(--ecl-color-primary-500);
   &:hover,
   &:focus {
     text-decoration: underline;

sass/compositions/_content_item.scss

@@ -16,7 +16,7 @@ $color: var(--ecl-color-dark-140) !default;
 .ecl-content-item__title,
 .ecl-content-item-date__title {
   a {
-    color: var(--ecl-color-primary-100);
+    color: var(--ecl-color-primary-500);
   }
 }
 

sass/style-ec.scss

@@ -1,17 +1,15 @@
 @use "sass:map";
 @use '@ecl/theme-ec';
 @use '@ecl/theme-ec/theme';
-@use '@ecl/vanilla-layout-grid/mixins/breakpoints'  with (
+@use '@ecl/grid/mixins/breakpoints'  with (
   $theme: theme.$theme
 );
-@use '@ecl/vanilla-utility-background/background' with (
+@use '@ecl/utility-background/background' with (
   $theme: theme.$theme
 );
-@use '@ecl/vanilla-utility-border/border' with (
+@use '@ecl/utility-border/border' with (
   $theme: theme.$theme
 );
-// TODO: The help form component is not available on ECL v3.
-//@use '@ecl/ec-component-form-help-block/ec-component-form-help-block';
 @use "./compositions/content_item" with (
   $color: var(--ecl-color-dark-100),
 );