Merge pull request #1240 from openeuropa/EWPP-3069

EWPP-3069: Update to ECL 3.7.0.
openeuropa · Mar 2, 2023 · 578a481 · 578a481
2 parents c42f9db + 53bad13
commit 578a481
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 123 deletions.
diff --git a/README.md b/README.md
@@ -536,7 +536,7 @@ ECL components can be patched by using the [`patch-package`][18] NPM project.
 
 To patch a component:
 
-1. Modify its source files directly in `./node_modules/@ecl-twig/[component-name]`
+1. Modify its source files directly in `./node_modules/@ecl/[component-name]`
 2. Run:
 
 ```bash
@@ -548,7 +548,7 @@ Or, when using Docker Compose:
 ```bash
 docker-compose exec -u node node git config --global user.email "[email protected]"
 docker-compose exec -u node node git config --global user.name "Name"
-docker-compose exec -u node node npx patch-package @ecl-twig/[component-name]
+docker-compose exec -u node node npx patch-package @ecl/[component-name]
 ```
 
 Patches will be generated in `./patches` and applied when running `npm install`.

diff --git a/oe_theme.theme b/oe_theme.theme
@@ -2108,7 +2108,7 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
       'centered' => FALSE,
       // The paragraph has a required image field, so we need to set a default
       // image variant in order to render the image.
-      'variant' => 'image-gradient',
+      'variant' => 'text-highlight',
     ];
     $cacheability->applyTo($variables);
   }

diff --git a/package.json b/package.json
@@ -14,55 +14,56 @@
     "prepare": "patch-package"
   },
   "dependencies": {
-    "@ecl/builder": "3.6.0",
-    "@ecl/preset-ec": "3.6.0",
-    "@ecl/preset-eu": "3.6.0",
-    "@ecl/preset-reset": "3.6.0",
+    "@ecl/builder": "3.7.0",
+    "@ecl/preset-ec": "3.7.0",
+    "@ecl/preset-eu": "3.7.0",
+    "@ecl/preset-reset": "3.7.0",
     "@ecl/stylelint-config": "0.2.1",
-    "@ecl/theme-ec": "3.6.0",
-    "@ecl/theme-eu": "3.6.0",
-    "@ecl/twig-component-accordion": "3.6.0",
-    "@ecl/twig-component-blockquote": "3.6.0",
-    "@ecl/twig-component-breadcrumb": "3.6.0",
-    "@ecl/twig-component-button": "3.6.0",
-    "@ecl/twig-component-card": "3.6.0",
-    "@ecl/twig-component-carousel": "3.6.0",
-    "@ecl/twig-component-content-item": "3.6.0",
-    "@ecl/twig-component-datepicker": "3.6.0",
-    "@ecl/twig-component-description-list": "3.6.0",
-    "@ecl/twig-component-expandable": "3.6.0",
-    "@ecl/twig-component-fact-figures": "3.6.0",
-    "@ecl/twig-component-featured-item": "3.6.0",
-    "@ecl/twig-component-file": "3.6.0",
-    "@ecl/twig-component-gallery": "3.6.0",
-    "@ecl/twig-component-hero-banner": "3.6.0",
-    "@ecl/twig-component-icon": "3.6.0",
-    "@ecl/twig-component-inpage-navigation": "3.6.0",
-    "@ecl/twig-component-label": "3.6.0",
-    "@ecl/twig-component-language-list": "3.6.0",
-    "@ecl/twig-component-link": "3.6.0",
-    "@ecl/twig-component-list-illustration": "3.6.0",
-    "@ecl/twig-component-media-container": "3.6.0",
-    "@ecl/twig-component-menu": "3.6.0",
-    "@ecl/twig-component-message": "3.6.0",
-    "@ecl/twig-component-navigation-list": "3.6.0",
-    "@ecl/twig-component-news-ticker": "3.6.0",
-    "@ecl/twig-component-page-banner": "3.6.0",
-    "@ecl/twig-component-page-header": "3.6.0",
-    "@ecl/twig-component-pagination": "3.6.0",
-    "@ecl/twig-component-radio": "3.6.0",
-    "@ecl/twig-component-search-form": "3.6.0",
-    "@ecl/twig-component-site-footer": "3.6.0",
-    "@ecl/twig-component-site-header": "3.6.0",
-    "@ecl/twig-component-skip-link": "3.6.0",
-    "@ecl/twig-component-social-media-follow": "3.6.0",
-    "@ecl/twig-component-social-media-share": "3.6.0",
-    "@ecl/twig-component-table": "3.6.0",
-    "@ecl/twig-component-tag": "3.6.0",
-    "@ecl/twig-component-text-input": "3.6.0",
-    "@ecl/twig-component-timeline": "3.6.0",
-    "@ecl/vanilla-utility-background": "3.6.0",
-    "@ecl/vanilla-utility-border": "3.6.0",
+    "@ecl/theme-ec": "3.7.0",
+    "@ecl/theme-eu": "3.7.0",
+    "@ecl/twig-component-accordion": "3.7.0",
+    "@ecl/twig-component-banner": "3.7.0",
+    "@ecl/twig-component-blockquote": "3.7.0",
+    "@ecl/twig-component-breadcrumb": "3.7.0",
+    "@ecl/twig-component-button": "3.7.0",
+    "@ecl/twig-component-card": "3.7.0",
+    "@ecl/twig-component-carousel": "3.7.0",
+    "@ecl/twig-component-content-item": "3.7.0",
+    "@ecl/twig-component-datepicker": "3.7.0",
+    "@ecl/twig-component-description-list": "3.7.0",
+    "@ecl/twig-component-expandable": "3.7.0",
+    "@ecl/twig-component-fact-figures": "3.7.0",
+    "@ecl/twig-component-featured-item": "3.7.0",
+    "@ecl/twig-component-file": "3.7.0",
+    "@ecl/twig-component-gallery": "3.7.0",
+    "@ecl/twig-component-hero-banner": "3.7.0",
+    "@ecl/twig-component-icon": "3.7.0",
+    "@ecl/twig-component-inpage-navigation": "3.7.0",
+    "@ecl/twig-component-label": "3.7.0",
+    "@ecl/twig-component-language-list": "3.7.0",
+    "@ecl/twig-component-link": "3.7.0",
+    "@ecl/twig-component-list-illustration": "3.7.0",
+    "@ecl/twig-component-media-container": "3.7.0",
+    "@ecl/twig-component-menu": "3.7.0",
+    "@ecl/twig-component-message": "3.7.0",
+    "@ecl/twig-component-navigation-list": "3.7.0",
+    "@ecl/twig-component-news-ticker": "3.7.0",
+    "@ecl/twig-component-page-banner": "3.7.0",
+    "@ecl/twig-component-page-header": "3.7.0",
+    "@ecl/twig-component-pagination": "3.7.0",
+    "@ecl/twig-component-radio": "3.7.0",
+    "@ecl/twig-component-search-form": "3.7.0",
+    "@ecl/twig-component-site-footer": "3.7.0",
+    "@ecl/twig-component-site-header": "3.7.0",
+    "@ecl/twig-component-skip-link": "3.7.0",
+    "@ecl/twig-component-social-media-follow": "3.7.0",
+    "@ecl/twig-component-social-media-share": "3.7.0",
+    "@ecl/twig-component-table": "3.7.0",
+    "@ecl/twig-component-tag": "3.7.0",
+    "@ecl/twig-component-text-input": "3.7.0",
+    "@ecl/twig-component-timeline": "3.7.0",
+    "@ecl/vanilla-utility-background": "3.7.0",
+    "@ecl/vanilla-utility-border": "3.7.0",
     "chokidar-cli": "1.2.0",
     "grunt": "1.4.0",
     "grunt-contrib-copy": "1.0.0",

diff --git a/patches/@ecl/twig-component-file+3.7.0.patch b/patches/@ecl/twig-component-file+3.7.0.patch
@@ -0,0 +1,29 @@
+patch-package
+--- a/node_modules/@ecl/twig-component-file/file.html.twig
++++ b/node_modules/@ecl/twig-component-file/file.html.twig
+@@ -113,7 +113,11 @@
+     <div class="ecl-file__detail">
+       <div class="ecl-file__detail-info">
+       {% if _labels is defined %}
+-        {{- _labelsMarkup -}}
++        {% for _label in _labels %}
++          <div class="ecl-file__label">
++            {% include '@ecl/label/label.html.twig' with _label only %}
++          </div>
++        {% endfor %}
+       {% endif %}
+       {% if _meta_detail_string is not empty %}
+         <div class="ecl-file__detail-meta">
+@@ -146,7 +150,11 @@
+     <div class="ecl-file__info">
+     {% if _variant == 'default' %}
+       {% if _labels is defined %}
+-        {{ _labelsMarkup }}
++        {% for _label in _labels %}
++          <div class="ecl-file__label">
++            {% include '@ecl/label/label.html.twig' with _label only %}
++          </div>
++        {% endfor %}
+       {% endif %}
+       {% if  _meta_detail_string is not empty %}
+       <div class="ecl-file__detail-meta">
diff --git a/...cl/twig-component-site-footer+3.6.0.patch → ...cl/twig-component-site-footer+3.7.0.patch b/...cl/twig-component-site-footer+3.6.0.patch → ...cl/twig-component-site-footer+3.7.0.patch
diff --git a/...hes/@ecl/twig-component-table+3.6.0.patch → ...hes/@ecl/twig-component-table+3.7.0.patch b/...hes/@ecl/twig-component-table+3.6.0.patch → ...hes/@ecl/twig-component-table+3.7.0.patch
diff --git a/templates/patterns/carousel/carousel.ui_patterns.yml b/templates/patterns/carousel/carousel.ui_patterns.yml
@@ -5,22 +5,22 @@ carousel:
     items:
       type: "array"
       label: "Carousel items"
-      description: "List of items compatible with the Page banner structure."
+      description: "List of items compatible with the ECL Banner component structure."
       preview:
         - title: "Lorem ipsum dolor sit amet"
           description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
           url: "https://example.com"
           url_text: "CTA"
           image: "https://placeimg.com/640/480/tech"
-          variant: "image"
+          variant: "text-box"
           centered: false
           credit: "© Copyright first item"
         - title: "Duis vitae pulvinar turpis"
           description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
           url: "https://example.com"
           url_text: "CTA"
           image: "https://placeimg.com/640/480/arch"
-          variant: "image-gradient"
+          variant: "text-highlight"
         - title: "Donec maximus pharetra ex a ultricies"
           description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies"
           url: "https://example.com"
@@ -30,19 +30,19 @@ carousel:
           url: "https://example.com"
           url_text: "CTA"
           image: "https://placeimg.com/640/480/tech"
-          variant: "image-shade"
+          variant: "image-overlay"
           credit: "© Copyright fourth item"
         - title: "Lorem ipsum dolor sit amet"
           description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
           url: "https://example.com"
           url_text: "CTA"
-          variant: "secondary"
+          variant: "text-highlight"
           centered: false
         - title: "Duis vitae pulvinar turpis"
           description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
           url: "https://example.com"
           url_text: "CTA"
-          variant: "white"
+          variant: "text-box"
           centered: false
     counter_label:
       type: "string"

diff --git a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
@@ -1043,28 +1043,28 @@ public function testCarousel(): void {
         [
           'title' => 'Item 1',
           'image' => file_create_url($en_file_1->getFileUri()),
-          'variant' => 'image-gradient',
+          'variant' => 'text-highlight',
         ],
         [
           'title' => 'Item 2',
           'description' => 'Item description 2',
           'url' => 'http://www.example.com/',
           'url_text' => 'CTA 2',
           'image' => file_create_url($en_file_2->getFileUri()),
-          'variant' => 'image-gradient',
+          'variant' => 'text-highlight',
         ],
         [
           'title' => 'Item 3',
           'image' => file_create_url($en_file_1->getFileUri()),
-          'variant' => 'image-gradient',
+          'variant' => 'text-highlight',
         ],
         [
           'title' => 'Item 4',
           'description' => 'Item description 4',
           'url' => '/',
           'url_text' => 'CTA 4',
           'image' => file_create_url($en_file_2->getFileUri()),
-          'variant' => 'image-gradient',
+          'variant' => 'text-highlight',
         ],
       ],
     ];