Merge pull request #1271 from openeuropa/EWPP-3310

EWPP-3310: Update ECL to 3.8.1 version.
openeuropa · Jun 8, 2023 · c62cfbb · c62cfbb
2 parents 4b74b89 + ec2d826
commit c62cfbb
Show file tree

Hide file tree

Showing 20 changed files with 147 additions and 135 deletions.
diff --git a/.drone.yml b/.drone.yml
@@ -42,7 +42,7 @@ services:
 pipeline:
   npm-build:
     group: prepare
-    image: registry.fpfis.eu/fpfis/node:12.21.0
+    image: registry.fpfis.eu/fpfis/node:16
     commands:
       - npm install --unsafe-perm
       - NODE_ENV=production npm run build

diff --git a/behat.yml.dist b/behat.yml.dist
@@ -31,7 +31,7 @@ default:
               list item: ".ecl-content-item"
               list item image: ".ecl-content-item__image__before"
               logo: "a.ecl-site-header__logo-link .ecl-site-header__logo-image"
-              footer logo: "a.ecl-site-footer__logo-link .ecl-site-footer__logo-image-desktop"
+              footer logo: "a.ecl-site-footer__logo-link .ecl-site-footer__logo-image"
               media container: ".ecl-media-container"
               page header: ".ecl-page-header"
               priorities dropdown menu: ".ecl-menu__item:nth-child(3) .ecl-menu__mega"

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -34,7 +34,7 @@ services:
     expose:
       - '4444'
   node:
-    image: node:12.21.0
+    image: node:16
     user: "node"
     working_dir: /home/node/app
     environment:

diff --git a/package.json b/package.json
@@ -14,62 +14,62 @@
     "prepare": "patch-package"
   },
   "dependencies": {
-    "@ecl/builder": "3.7.1",
-    "@ecl/preset-ec": "3.7.1",
-    "@ecl/preset-eu": "3.7.1",
-    "@ecl/preset-reset": "3.7.1",
+    "@ecl/builder": "3.8.1",
+    "@ecl/preset-ec": "3.8.1",
+    "@ecl/preset-eu": "3.8.1",
+    "@ecl/preset-reset": "3.8.1",
     "@ecl/stylelint-config": "0.2.1",
-    "@ecl/theme-ec": "3.7.1",
-    "@ecl/theme-eu": "3.7.1",
-    "@ecl/twig-component-accordion": "3.7.1",
-    "@ecl/twig-component-banner": "3.7.1",
-    "@ecl/twig-component-blockquote": "3.7.1",
-    "@ecl/twig-component-breadcrumb": "3.7.1",
-    "@ecl/twig-component-button": "3.7.1",
-    "@ecl/twig-component-card": "3.7.1",
-    "@ecl/twig-component-carousel": "3.7.1",
-    "@ecl/twig-component-content-item": "3.7.1",
-    "@ecl/twig-component-datepicker": "3.7.1",
-    "@ecl/twig-component-description-list": "3.7.1",
-    "@ecl/twig-component-expandable": "3.7.1",
-    "@ecl/twig-component-fact-figures": "3.7.1",
-    "@ecl/twig-component-featured-item": "3.7.1",
-    "@ecl/twig-component-file": "3.7.1",
-    "@ecl/twig-component-gallery": "3.7.1",
-    "@ecl/twig-component-hero-banner": "3.7.1",
-    "@ecl/twig-component-icon": "3.7.1",
-    "@ecl/twig-component-inpage-navigation": "3.7.1",
-    "@ecl/twig-component-label": "3.7.1",
-    "@ecl/twig-component-language-list": "3.7.1",
-    "@ecl/twig-component-link": "3.7.1",
-    "@ecl/twig-component-list-illustration": "3.7.1",
-    "@ecl/twig-component-media-container": "3.7.1",
-    "@ecl/twig-component-menu": "3.7.1",
-    "@ecl/twig-component-message": "3.7.1",
-    "@ecl/twig-component-navigation-list": "3.7.1",
-    "@ecl/twig-component-news-ticker": "3.7.1",
-    "@ecl/twig-component-page-banner": "3.7.1",
-    "@ecl/twig-component-page-header": "3.7.1",
-    "@ecl/twig-component-pagination": "3.7.1",
-    "@ecl/twig-component-radio": "3.7.1",
-    "@ecl/twig-component-search-form": "3.7.1",
-    "@ecl/twig-component-site-footer": "3.7.1",
-    "@ecl/twig-component-site-header": "3.7.1",
-    "@ecl/twig-component-skip-link": "3.7.1",
-    "@ecl/twig-component-social-media-follow": "3.7.1",
-    "@ecl/twig-component-social-media-share": "3.7.1",
-    "@ecl/twig-component-table": "3.7.1",
-    "@ecl/twig-component-tag": "3.7.1",
-    "@ecl/twig-component-text-input": "3.7.1",
-    "@ecl/twig-component-timeline": "3.7.1",
-    "@ecl/vanilla-utility-background": "3.7.1",
-    "@ecl/vanilla-utility-border": "3.7.1",
-    "chokidar-cli": "1.2.0",
-    "grunt": "1.4.0",
+    "@ecl/theme-ec": "3.8.1",
+    "@ecl/theme-eu": "3.8.1",
+    "@ecl/twig-component-accordion": "3.8.1",
+    "@ecl/twig-component-banner": "3.8.1",
+    "@ecl/twig-component-blockquote": "3.8.1",
+    "@ecl/twig-component-breadcrumb": "3.8.1",
+    "@ecl/twig-component-button": "3.8.1",
+    "@ecl/twig-component-card": "3.8.1",
+    "@ecl/twig-component-carousel": "3.8.1",
+    "@ecl/twig-component-content-item": "3.8.1",
+    "@ecl/twig-component-datepicker": "3.8.1",
+    "@ecl/twig-component-description-list": "3.8.1",
+    "@ecl/twig-component-expandable": "3.8.1",
+    "@ecl/twig-component-fact-figures": "3.8.1",
+    "@ecl/twig-component-featured-item": "3.8.1",
+    "@ecl/twig-component-file": "3.8.1",
+    "@ecl/twig-component-gallery": "3.8.1",
+    "@ecl/twig-component-hero-banner": "3.8.1",
+    "@ecl/twig-component-icon": "3.8.1",
+    "@ecl/twig-component-inpage-navigation": "3.8.1",
+    "@ecl/twig-component-label": "3.8.1",
+    "@ecl/twig-component-language-list": "3.8.1",
+    "@ecl/twig-component-link": "3.8.1",
+    "@ecl/twig-component-list-illustration": "3.8.1",
+    "@ecl/twig-component-media-container": "3.8.1",
+    "@ecl/twig-component-menu": "3.8.1",
+    "@ecl/twig-component-message": "3.8.1",
+    "@ecl/twig-component-navigation-list": "3.8.1",
+    "@ecl/twig-component-news-ticker": "3.8.1",
+    "@ecl/twig-component-page-banner": "3.8.1",
+    "@ecl/twig-component-page-header": "3.8.1",
+    "@ecl/twig-component-pagination": "3.8.1",
+    "@ecl/twig-component-radio": "3.8.1",
+    "@ecl/twig-component-search-form": "3.8.1",
+    "@ecl/twig-component-site-footer": "3.8.1",
+    "@ecl/twig-component-site-header": "3.8.1",
+    "@ecl/twig-component-skip-link": "3.8.1",
+    "@ecl/twig-component-social-media-follow": "3.8.1",
+    "@ecl/twig-component-social-media-share": "3.8.1",
+    "@ecl/twig-component-table": "3.8.1",
+    "@ecl/twig-component-tag": "3.8.1",
+    "@ecl/twig-component-text-input": "3.8.1",
+    "@ecl/twig-component-timeline": "3.8.1",
+    "@ecl/vanilla-utility-background": "3.8.1",
+    "@ecl/vanilla-utility-border": "3.8.1",
+    "chokidar-cli": "3.0.0",
+    "grunt": "1.6.1",
     "grunt-contrib-copy": "1.0.0",
     "moment": "2.29.1",
-    "node-sass": "4.13.1",
-    "npm-run-all": "4.0.2",
+    "node-sass": "8.0.0",
+    "npm-run-all": "4.1.5",
     "patch-package": "^5.1.2",
     "stylelint": "9.1.1",
     "stylelint-config-prettier": "2.1.0",

diff --git a/patches/@ecl/twig-component-file+3.7.1.patch → patches/@ecl/twig-component-file+3.8.1.patch b/patches/@ecl/twig-component-file+3.7.1.patch → patches/@ecl/twig-component-file+3.8.1.patch
diff --git a/...cl/twig-component-site-footer+3.7.1.patch → ...cl/twig-component-site-footer+3.8.1.patch b/...cl/twig-component-site-footer+3.7.1.patch → ...cl/twig-component-site-footer+3.8.1.patch
diff --git a/...hes/@ecl/twig-component-table+3.7.1.patch → ...hes/@ecl/twig-component-table+3.8.1.patch b/...hes/@ecl/twig-component-table+3.7.1.patch → ...hes/@ecl/twig-component-table+3.8.1.patch
diff --git a/templates/patterns/featured_item/pattern-featured-item.html.twig b/templates/patterns/featured_item/pattern-featured-item.html.twig
@@ -57,11 +57,17 @@
   }]) %}
 {% endfor %}
 
+{% if image %}
+  {% set _image = {
+    img: image
+  } %}
+{% endif %}
+
 {% include '@ecl-twig/card' with {
   'description': _description|default(description|smart_trim(length)),
   'primary_meta': metas,
   'title': _title,
   'secondary_meta': _footer_items,
-  'image': image,
+  'picture': _image,
   'labels': badges,
 } %}
diff --git a/templates/patterns/gallery/pattern-gallery.html.twig b/templates/patterns/gallery/pattern-gallery.html.twig
@@ -56,6 +56,7 @@
     },
   },
   'view_all_label': "See all"|t,
+  'view_all_expanded_label': "Back"|t,
   'counter_label': "media items"|t,
   'items': _items
 } %}

diff --git a/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig b/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig
@@ -13,9 +13,14 @@
     icon_path: ecl_icon_path
   } %}
 {% endif %}
+{% if image %}
+  {% set _image = {
+    img: image
+  } %}
+{% endif %}
 {% include '@ecl-twig/card' with {
   title: title,
-  image: image,
+  picture: _image,
   description: detail|smart_trim(length),
   labels: badges,
 } only %}
diff --git a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -17,8 +17,12 @@
   {% endif %}
   {# Set square image if needed. #}
   {% if item.image %}
-    {% set _image = item.image|merge({'squared': square_image}) %}
-    {% set item = item|merge({'image': _image}) %}
+    {% set item = item|merge({
+      'picture': {
+        'img': item.image
+      },
+      'square': square_image,
+    }) %}
   {% endif %}
   {% set _items = _items|merge([item]) %}
 {% endfor %}

diff --git a/templates/patterns/navigation_list/pattern-navigation-list.html.twig b/templates/patterns/navigation_list/pattern-navigation-list.html.twig
@@ -47,9 +47,11 @@
   {% set _links = _links|merge([_secondary_links]) %}
 {% endif %}
 {% if image %}
-  {% set image = {
-    'src': image.src,
-    'alt': image.alt
+  {% set _image = {
+    'img': {
+      'src': image.src,
+      'alt': image.alt
+    }
   } %}
 {% endif %}
 
@@ -58,5 +60,5 @@
   'description': description|default(''),
   'links': _links,
   'border': border|default(false),
-  'image': image
+  'picture': _image
 } only %}
diff --git a/tests/src/Behat/OeThemeTestContext.php b/tests/src/Behat/OeThemeTestContext.php
@@ -297,9 +297,9 @@ public function assertEuropeanFooterBlockOnPage(string $component_library, strin
     $logo_link = $page->find('css', '.ecl-site-footer__logo-link');
     Assert::assertEquals($link, $logo_link->getAttribute('href'));
     Assert::assertEquals($label, $logo_link->getAttribute('aria-label'));
-    $img = $logo_link->find('css', 'img');
-    Assert::assertEquals($img_alt, $img->getAttribute('alt'));
-    Assert::assertEquals($img_title, $img->getAttribute('title'));
+    $picture = $logo_link->find('css', 'picture');
+    Assert::assertEquals($img_alt, $picture->find('css', 'img')->getAttribute('alt'));
+    Assert::assertEquals($img_title, $picture->getAttribute('title'));
   }
 
   /**

diff --git a/tests/src/Functional/CorporateFooterRenderTest.php b/tests/src/Functional/CorporateFooterRenderTest.php
@@ -935,13 +935,7 @@ protected function assertSocialLink(NodeElement $label, NodeElement $link, array
    *   The component library: 'European Commission' or 'European Union'.
    */
   protected function assertEclLogoPresence(NodeElement $section, string $component_library): void {
-    if ($component_library === 'European Union') {
-      $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image-mobile", 1, $section);
-      $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image-desktop", 1, $section);
-    }
-    else {
-      $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image-desktop", 1, $section);
-    }
+    $this->assertSession()->elementsCount('css', "a img.ecl-site-footer__logo-image", 1, $section);
   }
 
   /**

diff --git a/tests/src/Kernel/Paragraphs/ParagraphsTest.php b/tests/src/Kernel/Paragraphs/ParagraphsTest.php
@@ -216,14 +216,14 @@ public function testListItem(): void {
     $this->assertCount(1, $link_element);
     $this->assertEquals('http://www.example.com/', $link_element->attr('href'));
 
-    $image_element = $crawler->filter('article.ecl-card div.ecl-card__image');
-    $this->assertCount(1, $image_element);
+    $picture_element = $crawler->filter('article.ecl-card picture.ecl-card__picture');
+    $this->assertCount(1, $picture_element);
     $this->assertStringContainsString(
       \Drupal::service('file_url_generator')->generateString($image->getFileUri()),
-      $image_element->attr('style')
+      $picture_element->filter('img.ecl-card__image')->attr('src')
     );
 
-    $this->assertEquals('Druplicon', $image_element->attr('aria-label'));
+    $this->assertEquals('Druplicon', $picture_element->attr('aria-label'));
 
     $paragraph->set('field_oe_link', ['uri' => 'route:<nolink>']);
     $paragraph->save();
@@ -278,13 +278,13 @@ public function testListItem(): void {
 
     $this->assertCount(1, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left'));
     $this->assertCount(0, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right'));
-    $image_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left img.ecl-content-item__image');
-    $this->assertCount(1, $image_element);
+    $picture_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left img.ecl-content-item__image');
+    $this->assertCount(1, $picture_element);
     $this->assertStringContainsString(
       \Drupal::service('file_url_generator')->generateString($image->getFileUri()),
-      $image_element->attr('src')
+      $picture_element->attr('src')
     );
-    $this->assertEquals('Druplicon', $image_element->attr('alt'));
+    $this->assertEquals('Druplicon', $picture_element->attr('alt'));
 
     $this->assertEquals('Meta 1', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)')->text()));
     $this->assertEquals('Meta 2', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)')->text()));
@@ -312,13 +312,13 @@ public function testListItem(): void {
 
     $this->assertCount(0, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--left'));
     $this->assertCount(1, $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right'));
-    $image_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right img.ecl-content-item__image');
-    $this->assertCount(1, $image_element);
+    $picture_element = $crawler->filter('article.ecl-content-item > picture.ecl-content-item__picture--right img.ecl-content-item__image');
+    $this->assertCount(1, $picture_element);
     $this->assertStringContainsString(
       \Drupal::service('file_url_generator')->generateString($image->getFileUri()),
-      $image_element->attr('src')
+      $picture_element->attr('src')
     );
-    $this->assertEquals('Druplicon', $image_element->attr('alt'));
+    $this->assertEquals('Druplicon', $picture_element->attr('alt'));
 
     $this->assertEquals('Meta 1', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)')->text()));
     $this->assertEquals('Meta 2', trim($crawler->filter('.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)')->text()));

diff --git a/tests/src/Kernel/fixtures/patterns/page_header_rendering.yml b/tests/src/Kernel/fixtures/patterns/page_header_rendering.yml
@@ -87,7 +87,7 @@
     count:
       '.ecl-page-header.ecl-page-header--negative': 1
       '.ecl-breadcrumb__segment': 7
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__title.ecl-u-sr-only': 0
       '.ecl-page-header__info-list': 0
@@ -223,7 +223,7 @@
     count:
       '.ecl-page-header': 1
       '.ecl-breadcrumb__segment': 7
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__title.ecl-u-sr-only': 0
       '.ecl-page-header__info-list': 0
@@ -299,7 +299,7 @@
   assertions:
     count:
       '.ecl-page-header': 1
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__info-list': 0
       '.ecl-page-header__info-item': 0
@@ -327,7 +327,7 @@
   assertions:
     count:
       '.ecl-page-header.ecl-page-header--negative': 1
-      '.ecl-page-header__background[style="background-image: url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg)"]': 1
+      '.ecl-page-header__background[src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"]': 1
       '.ecl-page-header__meta .ecl-page-header__meta-item': 3
       '.ecl-page-header__info-list': 0
       '.ecl-page-header__info-item': 0