From 01cbe085dd60eb31e6bbaf1947e49f9b11b51ec2 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Tue, 11 Jan 2022 14:19:47 +0100
Subject: [PATCH 01/19] EWPP-1863: Add list with illustrations pattern.

---
 package.json                                  |   1 +
 .../list_with_illustration.ui_patterns.yml    |  52 +++++
 .../pattern-list-with-illustration.html.twig  |  42 ++++
 tests/src/Kernel/fixtures/rendering.yml       | 186 ++++++++++++++++++
 .../ListWithIllustrationAssert.php            | 121 ++++++++++++
 5 files changed, 402 insertions(+)
 create mode 100644 templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
 create mode 100644 templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
 create mode 100644 tests/src/PatternAssertions/ListWithIllustrationAssert.php

diff --git a/package.json b/package.json
index 55257a0dd..f70b0b197 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@ecl/twig-component-inpage-navigation": "3.1.2",
     "@ecl/twig-component-language-list": "3.1.2",
     "@ecl/twig-component-link": "3.1.2",
+    "@ecl/twig-component-list-illustration": "3.1.2",
     "@ecl/twig-component-media-container": "3.1.2",
     "@ecl/twig-component-menu": "3.1.2",
     "@ecl/twig-component-message": "3.1.2",
diff --git a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
new file mode 100644
index 000000000..a64e28429
--- /dev/null
+++ b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
@@ -0,0 +1,52 @@
+list_with_illustration:
+  label: "List with illustration"
+  description: "A list of items with associated illustrations."
+  variants:
+    vertical_images_large:
+      label: "Vertical with images (large)"
+      description: "Vertical list with large images."
+    vertical_images_square:
+      label: "Vertical with images (square)"
+      description: "Vertical list with square images."
+    vertical_icons:
+      label: "Vertical with icons"
+      description: "Vertical list with icons."
+    horizontal_images_large:
+      label: "Horizontal with images (large)"
+      description: "Horizontal list with large images."
+    horizontal_images_square:
+      label: "Horizontal with images (square)"
+      description: "Horizontal list with square images."
+    horizontal_icons:
+      label: "Horizontal with icons"
+      description: "Horizontal list with icons."
+  fields:
+    column:
+      type: "numeric"
+      label: "Column number"
+      description: "Number of columns (only applies to horizontal variants). Maximum of 4 columns."
+      preview: 4
+      escape: false
+    zebra:
+      type: "boolean"
+      label: "Zebra"
+      description: "Use zebra background (only applies to vertical variants)."
+      preview: true
+    items:
+      type: "array"
+      label: "Items"
+      description: "Array of list items"
+      preview:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image"
+          icon: "growth"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image"
+          icon: "budget"
+
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
new file mode 100644
index 000000000..f4ff6b78b
--- /dev/null
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -0,0 +1,42 @@
+{#
+/**
+ * @file
+ * List with illustration.
+ */
+#}
+
+{# Set the columns to 1 if vertical variants. #}
+{% if 'vertical' in variant %}
+  {% set column = 1 %}
+{% endif %}
+
+{# Set the zebra to false if horizontal variants. #}
+{% if 'horizontal' in variant %}
+  {% set zebra = false %}
+{% endif %}
+
+{% set _items = [] %}
+{% for item in items %}
+  {% if 'icon' in variant %}
+    {# Remove image information if an icon variant. #}
+    {% set _item = item|merge({'image': {}}) %}
+    {# Transform icon into ecl array. #}
+    {% if _item.icon %}
+      {% set _item = _item|merge({'icon': to_ecl_icon(item.icon)}) %}
+    {% endif %}
+  {% elseif 'image' in variant %}
+    {# Remove icon information if an image variant. #}
+    {% set _item = item|merge({'icon': {}}) %}
+    {# Make images square if square variant. #}
+    {% if _item.image and 'square' in variant %}
+      {% set _image = _item.image|merge({'squared': true}) %}
+      {% set _item = _item|merge({'image': _image}) %}
+    {% endif %}
+  {% endif %}
+  {% set _items = _items|merge([_item]) %}
+{% endfor %}
+{% include '@ecl-twig/list-illustration' with {
+  'column': column,
+  'zebra': zebra,
+  'items': _items,
+} only %}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 941f7bc2f..94a1ac52b 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -2950,3 +2950,189 @@
       'div.ecl-u-mr-xs.ecl-u-mt-s.ecl-tag.ecl-tag--removable': 'No link'
     equals:
       'div.active-search-filters__name span': 'Source'
+- array:
+    '#type': 'pattern'
+    '#id': 'list_with_illustration'
+    '#variant': "vertical_images_large"
+    '#fields':
+      zebra: true
+      items:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image 1"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          image:
+            src: "https://placeimg.com/500/500/arch"
+            alt: "Alternative text for featured item image 2"
+  assertions:
+    count:
+      div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--zebra: 1
+      div.ecl-list-illustration__item: 2
+      div.ecl-list-illustration__image: 2
+      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+    contains:
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
+- array:
+    '#type': 'pattern'
+    '#id': 'list_with_illustration'
+    '#variant': "vertical_images_square"
+    '#fields':
+      zebra: true
+      items:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image 1"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          image:
+            src: "https://placeimg.com/500/500/arch"
+            alt: "Alternative text for featured item image 2"
+  assertions:
+    count:
+      div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--zebra: 1
+      div.ecl-list-illustration__item: 2
+      div.ecl-list-illustration__image: 2
+      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+    contains:
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
+- array:
+    '#type': 'pattern'
+    '#id': 'list_with_illustration'
+    '#variant': "vertical_icons"
+    '#fields':
+      zebra: false
+      items:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          icon: "growth"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          icon: "budget"
+  assertions:
+    count:
+      div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--zebra: 0
+      div.ecl-list-illustration__item: 2
+      div.ecl-list-illustration__image: 0
+    contains:
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
+    equals:
+      'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#growth"></use>'
+      'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#budget"></use>'
+- array:
+    '#type': 'pattern'
+    '#id': 'list_with_illustration'
+    '#variant': "horizontal_images_large"
+    '#fields':
+      column: 2
+      items:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image 1"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          image:
+            src: "https://placeimg.com/500/500/arch"
+            alt: "Alternative text for featured item image 2"
+  assertions:
+    count:
+      div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--col-2: 1
+      div.ecl-list-illustration__item: 2
+      div.ecl-list-illustration__image: 2
+      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+    contains:
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
+- array:
+    '#type': 'pattern'
+    '#id': 'list_with_illustration'
+    '#variant': "horizontal_images_square"
+    '#fields':
+      column: 3
+      items:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          image:
+            src: "https://placeimg.com/1000/500/arch"
+            alt: "Alternative text for featured item image 1"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          image:
+            src: "https://placeimg.com/500/500/arch"
+            alt: "Alternative text for featured item image 2"
+  assertions:
+    count:
+      div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--col-3: 1
+      div.ecl-list-illustration__item: 2
+      div.ecl-list-illustration__image: 2
+      div.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 1"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
+      div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
+      div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+    contains:
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
+- array:
+    '#type': 'pattern'
+    '#id': 'list_with_illustration'
+    '#variant': "horizontal_icons"
+    '#fields':
+      column: 2
+      items:
+        - title: "Business, Economy, Euro"
+          description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
+          icon: "growth"
+        - title: "About the European Union"
+          description: "The EU and its institutions, how to visit and work at the EU."
+          icon: "budget"
+  assertions:
+    count:
+      div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--col-2: 1
+      div.ecl-list-illustration__item: 2
+      div.ecl-list-illustration__image: 0
+    contains:
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
+      'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__title': 'About the European Union'
+      'div.ecl-list-illustration__item:nth-child(2) div.ecl-list-illustration__description': 'The EU and its institutions, how to visit and work at the EU.'
+    equals:
+      'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#growth"></use>'
+      'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#budget"></use>'
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
new file mode 100644
index 000000000..babc51a97
--- /dev/null
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -0,0 +1,121 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\Tests\oe_theme\PatternAssertions;
+
+use Symfony\Component\DomCrawler\Crawler;
+
+/**
+ * Assertions for the list with illustration pattern.
+ */
+class ListWithIllustrationAssert extends BasePatternAssert {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function getAssertions($variant): array {
+    return [
+      'column' => [
+        [$this, 'assertColumns'],
+        $variant,
+      ],
+      'zebra' => [
+        [$this, 'assertElementExists'],
+        '.ecl-list-illustration--zebra',
+      ],
+      'items' => [
+        [$this, 'assertItems'],
+        $variant,
+      ],
+    ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function assertBaseElements(string $html, string $variant): void {
+    $crawler = new Crawler($html);
+    self::assertElementExists('ecl-list-illustration', $crawler);
+  }
+
+  /**
+   * Asserts the columns of the list.
+   *
+   * @param int $column
+   *   The expected image values.
+   * @param string $variant
+   *   The variant of the pattern being checked.
+   * @param \Symfony\Component\DomCrawler\Crawler $crawler
+   *   The DomCrawler where to check the element.
+   */
+  protected function assertColumns(int $column, string $variant, Crawler $crawler): void {
+    $column_selector = '.ecl-list-illustration--col-' . $column;
+    self::assertElementExists($column_selector, $crawler);
+  }
+
+  /**
+   * Asserts the info block of a card.
+   *
+   * @param array $expected_items
+   *   The expected list items.
+   * @param string $variant
+   *   The variant of the pattern being checked.
+   * @param \Symfony\Component\DomCrawler\Crawler $crawler
+   *   The DomCrawler where to check the element.
+   */
+  protected function assertItems(array $expected_items, string $variant, Crawler $crawler): void {
+    $item_elements = $crawler->filter('.ecl-list-illustration__item');
+    self::assertCount(count($expected_items), $item_elements, 'The expected list items do not match the found list items.');
+    foreach ($expected_items as $index => $expected_item) {
+      $item_element = $item_elements->eq($index);
+      self::assertElementText($expected_item['title'], 'ecl-list-illustration__title', $item_element);
+      self::assertElementText($expected_item['description'], 'ecl-list-illustration__description', $item_element);
+      if (isset($expected_item['image'])) {
+        self::assertElementExists('.ecl-list-illustration__image', $item_element);
+        $image_element = $item_element->filter('.ecl-list-illustration__image');
+        self::assertEquals($expected_item['image']['alt'], $image_element->attr('aria-label'));
+        self::assertStringContainsString($expected_item['image']['src'], $image_element->attr('style'));
+        if (strpos($variant, 'square') !== FALSE) {
+          self::assertElementExists('.ecl-list-illustration__image--square', $item_element);
+        }
+      }
+      if (isset($expected_item['icon'])) {
+        $icon_element = $item_element->filter('svg.ecl-icon use');
+        $this::assertStringContainsString('#' . $expected_item['icon'], $icon_element->attr('xlink:href'));
+      }
+    }
+  }
+
+  /**
+   * {@inheritdoc}
+   *
+   * @SuppressWarnings(PHPMD.CyclomaticComplexity)
+   */
+  protected function getPatternVariant(string $html): string {
+    $crawler = new Crawler($html);
+    // Check whether its horizontal or vertical.
+    $variant = 'vertical';
+    $list = $crawler->filter('.ecl-list-illustration');
+    if (strpos($list->attr('class'), 'ecl-list-illustration--col') !== FALSE) {
+      $variant = 'horizontal';
+    }
+    // Check whether we have images or icons.
+    // If we have one image, we assume its an image variant.
+    $image_element = $crawler->filter('.ecl-list-illustration__item');
+    if ($image_element) {
+      $variant .= '_images';
+      // Check whether it's square or not.
+      if (strpos($image_element->attr('class'), 'ecl-list-illustration__image--square') !== FALSE) {
+        $variant .= '_square';
+      }
+      else {
+        $variant .= '_large';
+      }
+      return $variant;
+    }
+    $variant .= '_icons';
+    return $variant;
+  }
+
+}

From 2ca33c65aa11bedf671cfe00d2fe6c61fb2b2c2d Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Thu, 13 Jan 2022 20:38:31 +0300
Subject: [PATCH 02/19] EWPP-1863: Prepare icon in the template instead of
 pattern.

---
 ...-list-with-illustration--preview.html.twig | 25 +++++++++++++++++++
 .../list_with_illustration.ui_patterns.yml    |  4 +--
 .../pattern-list-with-illustration.html.twig  |  4 ---
 3 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 templates/pattern-previews/pattern-list-with-illustration--preview.html.twig

diff --git a/templates/pattern-previews/pattern-list-with-illustration--preview.html.twig b/templates/pattern-previews/pattern-list-with-illustration--preview.html.twig
new file mode 100644
index 000000000..8d7a08ba3
--- /dev/null
+++ b/templates/pattern-previews/pattern-list-with-illustration--preview.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Render a list with illustration pattern preview with ECL icons.
+ */
+#}
+{% set _items = [] %}
+{% for item in items %}
+  {% set _item = item %}
+  {# Transform icon into ecl array. #}
+  {% if _item.icon %}
+    {% set _item = _item|merge({'icon': {
+      path: ecl_icon_path,
+      name: item.icon
+    }}) %}
+  {% endif %}
+  {% set _items = _items|merge([_item]) %}
+{% endfor %}
+
+{% include 'pattern-list-with-illustration.html.twig' with {
+  'variant': variant,
+  'column': column,
+  'zebra': zebra,
+  'items': _items
+} only %}
diff --git a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
index a64e28429..07915d642 100644
--- a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
+++ b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
@@ -2,7 +2,7 @@ list_with_illustration:
   label: "List with illustration"
   description: "A list of items with associated illustrations."
   variants:
-    vertical_images_large:
+    vertical_images_landscape:
       label: "Vertical with images (large)"
       description: "Vertical list with large images."
     vertical_images_square:
@@ -11,7 +11,7 @@ list_with_illustration:
     vertical_icons:
       label: "Vertical with icons"
       description: "Vertical list with icons."
-    horizontal_images_large:
+    horizontal_images_landscape:
       label: "Horizontal with images (large)"
       description: "Horizontal list with large images."
     horizontal_images_square:
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
index f4ff6b78b..2e29628c9 100644
--- a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -20,10 +20,6 @@
   {% if 'icon' in variant %}
     {# Remove image information if an icon variant. #}
     {% set _item = item|merge({'image': {}}) %}
-    {# Transform icon into ecl array. #}
-    {% if _item.icon %}
-      {% set _item = _item|merge({'icon': to_ecl_icon(item.icon)}) %}
-    {% endif %}
   {% elseif 'image' in variant %}
     {# Remove icon information if an image variant. #}
     {% set _item = item|merge({'icon': {}}) %}

From e6d6236bf3e76b3f793862d26550deda8095b166 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Sun, 16 Jan 2022 21:07:03 +0100
Subject: [PATCH 03/19] EWPP-1863: Fix review remarks and add support for flag
 icons.

---
 .../src/TwigExtension/TwigExtension.php       | 303 ++++++------------
 ...-list-with-illustration--preview.html.twig |  25 --
 .../list_with_illustration.ui_patterns.yml    |   2 +-
 .../pattern-list-with-illustration.html.twig  |   4 +
 tests/src/Kernel/fixtures/rendering.yml       |   7 +
 .../ListWithIllustrationAssert.php            |  16 +-
 6 files changed, 114 insertions(+), 243 deletions(-)
 delete mode 100644 templates/pattern-previews/pattern-list-with-illustration--preview.html.twig

diff --git a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
index 21574fba6..af5d6fca1 100644
--- a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
+++ b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
@@ -275,210 +275,19 @@ public function toEclAttributes($attributes): array {
    *   Icon array for ECL components containing icon name, path and rotation.
    */
   public function toEclIcon(array $context, $icon, string $size = ''): array {
-    $path = $context['ecl_icon_path'];
-    $social_path = $context['ecl_icon_social_media_path'];
-
-    // ECL supported icons naming and rotation.
-    $icons = [
-      'facebook' => [
-        'name' => 'facebook',
-        'social' => TRUE,
-      ],
-      'instagram' => [
-        'name' => 'instagram',
-        'social' => TRUE,
-      ],
-      'linkedin' => [
-        'name' => 'linkedin',
-        'social' => TRUE,
-      ],
-      'pinterest' => [
-        'name' => 'pinterest',
-        'social' => TRUE,
-      ],
-      'rss' => [
-        'name' => 'rss',
-      ],
-      'skype' => [
-        'name' => 'skype',
-        'social' => TRUE,
-      ],
-      'twitter' => [
-        'name' => 'twitter',
-        'social' => TRUE,
-      ],
-      'youtube' => [
-        'name' => 'youtube',
-        'social' => TRUE,
-      ],
-      'audio' => [
-        'name' => 'audio',
-      ],
-      'book' => [
-        'name' => 'book',
-      ],
-      'brochure' => [
-        'name' => 'brochure',
-      ],
-      'budget' => [
-        'name' => 'budget',
-      ],
-      'calendar' => [
-        'name' => 'calendar',
-      ],
-      'copy' => [
-        'name' => 'copy',
-      ],
-      'data' => [
-        'name' => 'data',
-      ],
-      'digital' => [
-        'name' => 'digital',
-      ],
-      'edit' => [
-        'name' => 'edit',
-      ],
-      'energy' => [
-        'name' => 'energy',
-      ],
-      'euro' => [
-        'name' => 'euro',
-      ],
-      'faq' => [
-        'name' => 'faq',
-      ],
-      'feedback' => [
-        'name' => 'feedback',
-      ],
-      'file' => [
-        'name' => 'file',
-      ],
-      'gear' => [
-        'name' => 'gear',
-      ],
-      'generic-lang' => [
-        'name' => 'generic-lang',
-      ],
-      'global' => [
-        'name' => 'global',
-      ],
+    $path = $this->getIconPath($context, $icon);
+
+    // Icons that require transforming.
+    $transformed_icons = [
       'googleplus' => [
         'name' => 'digital',
       ],
-      'growth' => [
-        'name' => 'growth',
-      ],
-      'hamburger' => [
-        'name' => 'hamburger',
-      ],
-      'image' => [
-        'name' => 'image',
-      ],
-      'infographic' => [
-        'name' => 'infographic',
-      ],
-      'language' => [
-        'name' => 'language',
-      ],
-      'livestreaming' => [
-        'name' => 'livestreaming',
-      ],
-      'location' => [
-        'name' => 'location',
-      ],
-      'log-in' => [
-        'name' => 'log-in',
-      ],
-      'logged-in' => [
-        'name' => 'logged-in',
-      ],
-      'multiple-files' => [
-        'name' => 'multiple-files',
-      ],
-      'organigram' => [
-        'name' => 'organigram',
-      ],
-      'package' => [
-        'name' => 'package',
-      ],
-      'presentation' => [
-        'name' => 'presentation',
-      ],
-      'print' => [
-        'name' => 'print',
-      ],
-      'regulation' => [
-        'name' => 'regulation',
-      ],
-      'search' => [
-        'name' => 'search',
-      ],
-      'share' => [
-        'name' => 'share',
-      ],
       'slides' => [
         'name' => 'presentation',
       ],
-      'spinner' => [
-        'name' => 'spinner',
-      ],
-      'spreadsheet' => [
-        'name' => 'spreadsheet',
-      ],
-      'video' => [
-        'name' => 'video',
-      ],
-      'camera' => [
-        'name' => 'video',
-      ],
-      'error' => [
-        'name' => 'error',
-      ],
-      'information' => [
-        'name' => 'information',
-      ],
       'info' => [
         'name' => 'information',
       ],
-      'success' => [
-        'name' => 'success',
-      ],
-      'warning' => [
-        'name' => 'warning',
-      ],
-      'check' => [
-        'name' => 'check',
-      ],
-      'check-filled' => [
-        'name' => 'check-filled',
-      ],
-      'close' => [
-        'name' => 'close',
-      ],
-      'close-filled' => [
-        'name' => 'close-filled',
-      ],
-      'corner-arrow' => [
-        'name' => 'corner-arrow',
-      ],
-      'download' => [
-        'name' => 'download',
-      ],
-      'external' => [
-        'name' => 'external',
-      ],
-      'fullscreen' => [
-        'name' => 'fullscreen',
-      ],
-      'minus' => [
-        'name' => 'minus',
-      ],
-      'plus' => [
-        'name' => 'plus',
-      ],
-      'solid-arrow' => [
-        'name' => 'solid-arrow',
-      ],
       'close-dark' => [
         'name' => 'close-filled',
       ],
@@ -516,30 +325,108 @@ public function toEclIcon(array $context, $icon, string $size = ''): array {
       ],
     ];
 
-    if (array_key_exists($icon, $icons)) {
+    // Check whether the icon needs any transformation.
+    if (array_key_exists($icon, $transformed_icons)) {
       $icons[$icon]['path'] = $path;
-      if (isset($icons[$icon]['social']) && $icons[$icon]['social']) {
-        $icons[$icon]['path'] = $social_path;
-      }
       if ($size) {
         $icons[$icon]['size'] = $size;
       }
-
       return $icons[$icon];
     }
 
+    // We define a default icon if one is not provided.
+    if (!$icon) {
+      $icon = 'digital';
+    }
+    $icon = [
+      'name' => $icon,
+      'path' => $path,
+    ];
     if ($size) {
-      return [
-        'name' => 'digital',
-        'path' => $path,
-        'size' => $size,
-      ];
+      $icon['size'] = $size;
+
     }
+    return $icon;
+  }
 
-    return [
-      'name' => 'digital',
-      'path' => $path,
+  /**
+   * Returns the file path for an ECL icon.
+   *
+   * @param array $context
+   *   The twig context.
+   * @param string $icon
+   *   The icon to be converted.
+   *
+   * @return string
+   *   ECL icon file path.
+   */
+  protected function getIconPath(array $context, string $icon): string {
+    // Flag icon names.
+    $flag_icons = [
+      'austria',
+      'belgium',
+      'bulgaria',
+      'croatia',
+      'cyprus',
+      'czech-republic',
+      'denmark',
+      'estonia',
+      'EU',
+      'finland',
+      'france',
+      'germany',
+      'greece',
+      'hungary',
+      'ireland',
+      'italy',
+      'latvia',
+      'lithuania',
+      'luxembourg',
+      'malta',
+      'netherlands',
+      'poland',
+      'portugal',
+      'romania',
+      'slovakia',
+      'slovenia',
+      'spain',
+      'sweden',
     ];
+    $found_icon = array_filter($flag_icons, function ($var) use ($icon) {
+      if (strpos($icon, $var) === 0) {
+        return TRUE;
+      };
+      return FALSE;
+    });
+    if ($found_icon) {
+      return $context['ecl_icon_flag_path'];
+    }
+
+    // Social media icon names.
+    $social_icons = [
+      'blog',
+      'facebook',
+      'flickr',
+      'foursquare',
+      'instagram',
+      'linkedin',
+      'pinterest',
+      'reddit',
+      'skype',
+      'spotify',
+      'twitter',
+      'youtube',
+    ];
+    $found_icon = array_filter($social_icons, function ($var) use ($icon) {
+      if (strpos($icon, $var) === 0) {
+        return TRUE;
+      };
+      return FALSE;
+    });
+    if ($found_icon) {
+      return $context['ecl_icon_social_media_path'];
+    }
+    return $context['ecl_icon_path'];
   }
 
   /**
diff --git a/templates/pattern-previews/pattern-list-with-illustration--preview.html.twig b/templates/pattern-previews/pattern-list-with-illustration--preview.html.twig
deleted file mode 100644
index 8d7a08ba3..000000000
--- a/templates/pattern-previews/pattern-list-with-illustration--preview.html.twig
+++ /dev/null
@@ -1,25 +0,0 @@
-{#
-/**
- * @file
- * Render a list with illustration pattern preview with ECL icons.
- */
-#}
-{% set _items = [] %}
-{% for item in items %}
-  {% set _item = item %}
-  {# Transform icon into ecl array. #}
-  {% if _item.icon %}
-    {% set _item = _item|merge({'icon': {
-      path: ecl_icon_path,
-      name: item.icon
-    }}) %}
-  {% endif %}
-  {% set _items = _items|merge([_item]) %}
-{% endfor %}
-
-{% include 'pattern-list-with-illustration.html.twig' with {
-  'variant': variant,
-  'column': column,
-  'zebra': zebra,
-  'items': _items
-} only %}
diff --git a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
index 07915d642..afef19d00 100644
--- a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
+++ b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
@@ -25,7 +25,7 @@ list_with_illustration:
       type: "numeric"
       label: "Column number"
       description: "Number of columns (only applies to horizontal variants). Maximum of 4 columns."
-      preview: 4
+      preview: 2
       escape: false
     zebra:
       type: "boolean"
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
index 2e29628c9..f4ff6b78b 100644
--- a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -20,6 +20,10 @@
   {% if 'icon' in variant %}
     {# Remove image information if an icon variant. #}
     {% set _item = item|merge({'image': {}}) %}
+    {# Transform icon into ecl array. #}
+    {% if _item.icon %}
+      {% set _item = _item|merge({'icon': to_ecl_icon(item.icon)}) %}
+    {% endif %}
   {% elseif 'image' in variant %}
     {# Remove icon information if an image variant. #}
     {% set _item = item|merge({'icon': {}}) %}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 94a1ac52b..09187b8c4 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -3000,6 +3000,7 @@
           image:
             src: "https://placeimg.com/500/500/arch"
             alt: "Alternative text for featured item image 2"
+          icon: "budget"
   assertions:
     count:
       div.ecl-list-illustration: 1
@@ -3011,6 +3012,7 @@
       div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/1000/500/arch')"]: 1
       div.ecl-list-illustration__image[aria-label="Alternative text for featured item image 2"]: 1
       div.ecl-list-illustration__image[style="background-image:url('https://placeimg.com/500/500/arch')"]: 1
+      'div.ecl-list-illustration__item svg.ecl-icon': 0
     contains:
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__title': 'Business, Economy, Euro'
       'div.ecl-list-illustration__item:nth-child(1) div.ecl-list-illustration__description': 'EU economy, the euro, and practical information for EU businesses and entrepreneurs.'
@@ -3026,6 +3028,9 @@
         - title: "Business, Economy, Euro"
           description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
           icon: "growth"
+          image:
+            src: "https://placeimg.com/500/500/arch"
+            alt: "Alternative text for featured item image 2"
         - title: "About the European Union"
           description: "The EU and its institutions, how to visit and work at the EU."
           icon: "budget"
@@ -3048,6 +3053,7 @@
     '#id': 'list_with_illustration'
     '#variant': "horizontal_images_large"
     '#fields':
+      zebra: true
       column: 2
       items:
         - title: "Business, Economy, Euro"
@@ -3063,6 +3069,7 @@
   assertions:
     count:
       div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--zebra: 0
       div.ecl-list-illustration.ecl-list-illustration--col-2: 1
       div.ecl-list-illustration__item: 2
       div.ecl-list-illustration__image: 2
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index babc51a97..a2f2988e8 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -36,14 +36,14 @@ protected function getAssertions($variant): array {
    */
   protected function assertBaseElements(string $html, string $variant): void {
     $crawler = new Crawler($html);
-    self::assertElementExists('ecl-list-illustration', $crawler);
+    self::assertElementExists('.ecl-list-illustration', $crawler);
   }
 
   /**
    * Asserts the columns of the list.
    *
    * @param int $column
-   *   The expected image values.
+   *   The expected number of columns.
    * @param string $variant
    *   The variant of the pattern being checked.
    * @param \Symfony\Component\DomCrawler\Crawler $crawler
@@ -55,7 +55,7 @@ protected function assertColumns(int $column, string $variant, Crawler $crawler)
   }
 
   /**
-   * Asserts the info block of a card.
+   * Asserts the item with an illustration from the list.
    *
    * @param array $expected_items
    *   The expected list items.
@@ -65,7 +65,7 @@ protected function assertColumns(int $column, string $variant, Crawler $crawler)
    *   The DomCrawler where to check the element.
    */
   protected function assertItems(array $expected_items, string $variant, Crawler $crawler): void {
-    $item_elements = $crawler->filter('.ecl-list-illustration__item');
+    $item_elements = $crawler->filter('.ecl-list-illustration__image');
     self::assertCount(count($expected_items), $item_elements, 'The expected list items do not match the found list items.');
     foreach ($expected_items as $index => $expected_item) {
       $item_element = $item_elements->eq($index);
@@ -89,21 +89,19 @@ protected function assertItems(array $expected_items, string $variant, Crawler $
 
   /**
    * {@inheritdoc}
-   *
-   * @SuppressWarnings(PHPMD.CyclomaticComplexity)
    */
   protected function getPatternVariant(string $html): string {
     $crawler = new Crawler($html);
-    // Check whether its horizontal or vertical.
+    // Check whether it's horizontal or vertical.
     $variant = 'vertical';
     $list = $crawler->filter('.ecl-list-illustration');
     if (strpos($list->attr('class'), 'ecl-list-illustration--col') !== FALSE) {
       $variant = 'horizontal';
     }
     // Check whether we have images or icons.
-    // If we have one image, we assume its an image variant.
+    // If we have one image, we assume it's an image variant.
     $image_element = $crawler->filter('.ecl-list-illustration__item');
-    if ($image_element) {
+    if ($image_element->count()) {
       $variant .= '_images';
       // Check whether it's square or not.
       if (strpos($image_element->attr('class'), 'ecl-list-illustration__image--square') !== FALSE) {

From 64e9e85b997800bdcb51f6f9c289a9158065009f Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Mon, 17 Jan 2022 10:02:12 +0100
Subject: [PATCH 04/19] EWPP-1863: Improve list with illustration assertion and
 add flag icon path to preprocess.

---
 .../src/TwigExtension/TwigExtension.php       |  4 ++
 oe_theme.theme                                |  1 +
 .../ListWithIllustrationAssert.php            | 40 +++++++++++++++----
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
index af5d6fca1..d91bc08cb 100644
--- a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
+++ b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
@@ -392,6 +392,8 @@ protected function getIconPath(array $context, string $icon): string {
       'spain',
       'sweden',
     ];
+    // Flag icons can have a -square string appended, so check if the icon name
+    // starts with a country name.
     $found_icon = array_filter($flag_icons, function ($var) use ($icon) {
       if (strpos($icon, $var) === 0) {
         return TRUE;
@@ -417,6 +419,8 @@ protected function getIconPath(array $context, string $icon): string {
       'twitter',
       'youtube',
     ];
+    // Social icons can have a -color or a -negative string appended,
+    // so check if the icon name starts with a social name.
     $found_icon = array_filter($social_icons, function ($var) use ($icon) {
       if (strpos($icon, $var) === 0) {
         return TRUE;
diff --git a/oe_theme.theme b/oe_theme.theme
index caecdf2e9..80834ad29 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -75,6 +75,7 @@ function oe_theme_preprocess(&$variables) {
   $variables['ecl_logo_path'] = $variables['ecl_images_path'] . '/logo';
   $variables['ecl_social_icon_path'] = base_path() . drupal_get_path('theme', 'oe_theme') . '/dist/ec/images/social-icons/sprites/icons-social.svg';
   $variables['ecl_icon_social_media_path'] = $variables['ecl_images_path'] . '/icons-social-media/sprites/icons-social-media.svg';
+  $variables['ecl_icon_flag_path'] = $variables['ecl_images_path'] . '/icons-flag/sprites/icons-flag.svg';
   $variables['current_language_id'] = \Drupal::languageManager()->getCurrentLanguage()->getId();
 }
 
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index a2f2988e8..8efc5a0f6 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -21,8 +21,7 @@ protected function getAssertions($variant): array {
         $variant,
       ],
       'zebra' => [
-        [$this, 'assertElementExists'],
-        '.ecl-list-illustration--zebra',
+        [$this, 'assertZebra'],
       ],
       'items' => [
         [$this, 'assertItems'],
@@ -54,6 +53,23 @@ protected function assertColumns(int $column, string $variant, Crawler $crawler)
     self::assertElementExists($column_selector, $crawler);
   }
 
+  /**
+   * Asserts if the list uses zebra pattern or not.
+   *
+   * @param bool $zebra
+   *   Whether the zebra pattern is enabled or not.
+   * @param \Symfony\Component\DomCrawler\Crawler $crawler
+   *   The DomCrawler where to check the element.
+   */
+  protected function assertZebra(bool $zebra, Crawler $crawler): void {
+    if ($zebra) {
+      self::assertElementExists('.ecl-list-illustration--zebra', $crawler);
+    }
+    else {
+      self::assertElementNotExists('.ecl-list-illustration--zebra', $crawler);
+    }
+  }
+
   /**
    * Asserts the item with an illustration from the list.
    *
@@ -69,8 +85,18 @@ protected function assertItems(array $expected_items, string $variant, Crawler $
     self::assertCount(count($expected_items), $item_elements, 'The expected list items do not match the found list items.');
     foreach ($expected_items as $index => $expected_item) {
       $item_element = $item_elements->eq($index);
-      self::assertElementText($expected_item['title'], 'ecl-list-illustration__title', $item_element);
-      self::assertElementText($expected_item['description'], 'ecl-list-illustration__description', $item_element);
+      if ($expected_item['title']) {
+        self::assertElementText($expected_item['title'], '.ecl-list-illustration__title', $item_element);
+      }
+      else {
+        self::assertElementNotExists('.ecl-list-illustration__title', $item_element);
+      }
+      if ($expected_item['description']) {
+        self::assertElementText($expected_item['description'], '.ecl-list-illustration__description', $item_element);
+      }
+      else {
+        self::assertElementNotExists('.ecl-list-illustration__description', $item_element);
+      }
       if (isset($expected_item['image'])) {
         self::assertElementExists('.ecl-list-illustration__image', $item_element);
         $image_element = $item_element->filter('.ecl-list-illustration__image');
@@ -95,7 +121,7 @@ protected function getPatternVariant(string $html): string {
     // Check whether it's horizontal or vertical.
     $variant = 'vertical';
     $list = $crawler->filter('.ecl-list-illustration');
-    if (strpos($list->attr('class'), 'ecl-list-illustration--col') !== FALSE) {
+    if (strpos($list->attr('class'), '.ecl-list-illustration--col') !== FALSE) {
       $variant = 'horizontal';
     }
     // Check whether we have images or icons.
@@ -104,11 +130,11 @@ protected function getPatternVariant(string $html): string {
     if ($image_element->count()) {
       $variant .= '_images';
       // Check whether it's square or not.
-      if (strpos($image_element->attr('class'), 'ecl-list-illustration__image--square') !== FALSE) {
+      if (strpos($image_element->attr('class'), '.ecl-list-illustration__image--square') !== FALSE) {
         $variant .= '_square';
       }
       else {
-        $variant .= '_large';
+        $variant .= '_landscape';
       }
       return $variant;
     }

From 83f1f1f92d2388d391bba0eaef9a6d674c9767bf Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Mon, 17 Jan 2022 10:20:21 +0100
Subject: [PATCH 05/19] EWPP-1863: Fix twig extension tests.

---
 .../src/TwigExtension/TwigExtension.php       |  6 ++--
 .../tests/src/Unit/TwigExtensionTest.php      | 36 ++++++++++++++++---
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
index d91bc08cb..5f8ea0f2a 100644
--- a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
+++ b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
@@ -327,11 +327,11 @@ public function toEclIcon(array $context, $icon, string $size = ''): array {
 
     // Check whether the icon needs any transformation.
     if (array_key_exists($icon, $transformed_icons)) {
-      $icons[$icon]['path'] = $path;
+      $transformed_icons[$icon]['path'] = $path;
       if ($size) {
-        $icons[$icon]['size'] = $size;
+        $transformed_icons[$icon]['size'] = $size;
       }
-      return $icons[$icon];
+      return $transformed_icons[$icon];
     }
 
     // We define a default icon if one is not provided.
diff --git a/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php b/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php
index 599aa2883..101324d0e 100644
--- a/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php
+++ b/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php
@@ -280,6 +280,7 @@ public function testToEclIcon(string $icon_name, array $expected_icon_array, str
     $context = [
       'ecl_icon_path' => '/path/to/theme/resources/icons/',
       'ecl_icon_social_media_path' => '/path/to/theme/resources/social-media-icons/',
+      'ecl_icon_flag_path' => '/path/to/theme/resources/flag-icons/',
     ];
     // We join the resulting array from to_ecl_icon() function so that we have
     // a visual representation of the array being returned by the function.
@@ -317,13 +318,38 @@ public function toEclIconProvider(): array {
         'instagram',
         [
           'name' => 'instagram',
-          // A TRUE value is rendered as 1 by twig.
-          'social' => 1,
           'path' => '/path/to/theme/resources/social-media-icons/',
           'size' => 'xs',
         ],
         'xs',
       ],
+      [
+        'instagram-color',
+        [
+          'name' => 'instagram-color',
+          'path' => '/path/to/theme/resources/social-media-icons/',
+          'size' => 'xs',
+        ],
+        'xs',
+      ],
+      [
+        'spain',
+        [
+          'name' => 'spain',
+          'path' => '/path/to/theme/resources/flag-icons/',
+          'size' => 'xs',
+        ],
+        'xs',
+      ],
+      [
+        'spain-square',
+        [
+          'name' => 'spain-square',
+          'path' => '/path/to/theme/resources/flag-icons/',
+          'size' => 'xs',
+        ],
+        'xs',
+      ],
       [
         'close-dark',
         [
@@ -336,7 +362,7 @@ public function toEclIconProvider(): array {
       [
         'not-supported-icon',
         [
-          'name' => 'digital',
+          'name' => 'not-supported-icon',
           'path' => '/path/to/theme/resources/icons/',
           'size' => 'm',
         ],
@@ -345,7 +371,7 @@ public function toEclIconProvider(): array {
       [
         'no-size',
         [
-          'name' => 'digital',
+          'name' => 'no-size',
           'path' => '/path/to/theme/resources/icons/',
         ],
         NULL,
@@ -353,7 +379,7 @@ public function toEclIconProvider(): array {
       [
         'empty-size',
         [
-          'name' => 'digital',
+          'name' => 'empty-size',
           'path' => '/path/to/theme/resources/icons/',
           'size' => '',
         ],

From 30bd00eaaac5771df801181700c691e90a5dd398 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Mon, 17 Jan 2022 10:22:22 +0100
Subject: [PATCH 06/19] EWPP-1863: Use correct item and image classes on list
 with illustrations assert class.

---
 tests/src/PatternAssertions/ListWithIllustrationAssert.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index 8efc5a0f6..84e1b694b 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -126,7 +126,7 @@ protected function getPatternVariant(string $html): string {
     }
     // Check whether we have images or icons.
     // If we have one image, we assume it's an image variant.
-    $image_element = $crawler->filter('.ecl-list-illustration__item');
+    $image_element = $crawler->filter('.ecl-list-illustration__image');
     if ($image_element->count()) {
       $variant .= '_images';
       // Check whether it's square or not.

From 92a21987f6f085484107abfb53da2e297fdb63db Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Mon, 17 Jan 2022 15:56:27 +0300
Subject: [PATCH 07/19] EWPP-1863: Working list with illustration assert.

---
 .../PatternAssertions/ListWithIllustrationAssert.php   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index 84e1b694b..ab6d487dc 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -81,17 +81,17 @@ protected function assertZebra(bool $zebra, Crawler $crawler): void {
    *   The DomCrawler where to check the element.
    */
   protected function assertItems(array $expected_items, string $variant, Crawler $crawler): void {
-    $item_elements = $crawler->filter('.ecl-list-illustration__image');
+    $item_elements = $crawler->filter('.ecl-list-illustration__item');
     self::assertCount(count($expected_items), $item_elements, 'The expected list items do not match the found list items.');
     foreach ($expected_items as $index => $expected_item) {
       $item_element = $item_elements->eq($index);
-      if ($expected_item['title']) {
+      if (isset($expected_item['title'])) {
         self::assertElementText($expected_item['title'], '.ecl-list-illustration__title', $item_element);
       }
       else {
         self::assertElementNotExists('.ecl-list-illustration__title', $item_element);
       }
-      if ($expected_item['description']) {
+      if (isset($expected_item['description'])) {
         self::assertElementText($expected_item['description'], '.ecl-list-illustration__description', $item_element);
       }
       else {
@@ -121,7 +121,7 @@ protected function getPatternVariant(string $html): string {
     // Check whether it's horizontal or vertical.
     $variant = 'vertical';
     $list = $crawler->filter('.ecl-list-illustration');
-    if (strpos($list->attr('class'), '.ecl-list-illustration--col') !== FALSE) {
+    if (strpos($list->attr('class'), 'ecl-list-illustration--col') !== FALSE) {
       $variant = 'horizontal';
     }
     // Check whether we have images or icons.
@@ -130,7 +130,7 @@ protected function getPatternVariant(string $html): string {
     if ($image_element->count()) {
       $variant .= '_images';
       // Check whether it's square or not.
-      if (strpos($image_element->attr('class'), '.ecl-list-illustration__image--square') !== FALSE) {
+      if (strpos($image_element->attr('class'), 'ecl-list-illustration__image--square') !== FALSE) {
         $variant .= '_square';
       }
       else {

From a4ddf20ab8ae4554c0945042e707111f1da23e52 Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Mon, 17 Jan 2022 15:58:47 +0300
Subject: [PATCH 08/19] EWPP-1864: Style the lists with illustrations
 paragraphs.

(cherry picked from commit 5b109de0d720ec54573a689097b417348f2f87e0)
---
 composer.json                                 |   2 +-
 oe_theme.theme                                | 152 ++++++
 ...raph--oe-illustration-list-flags.html.twig |  20 +
 ...raph--oe-illustration-list-icons.html.twig |  20 +
 ...aph--oe-illustration-list-images.html.twig |  20 +
 .../IllustrationListsParagraphsTest.php       | 438 ++++++++++++++++++
 6 files changed, 651 insertions(+), 1 deletion(-)
 create mode 100644 templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
 create mode 100644 templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
 create mode 100644 templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
 create mode 100644 tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php

diff --git a/composer.json b/composer.json
index 13cec5bfc..597033285 100644
--- a/composer.json
+++ b/composer.json
@@ -51,7 +51,7 @@
         "openeuropa/oe_corporate_countries": "~2.0",
         "openeuropa/oe_media": "~1.12",
         "openeuropa/oe_multilingual": "~1.8",
-        "openeuropa/oe_paragraphs": "~1.10",
+        "openeuropa/oe_paragraphs": "dev-EWPP-1862",
         "openeuropa/oe_search": "1.x-dev",
         "openeuropa/oe_webtools": "~1.12",
         "openeuropa/oe_contact_forms": "~1.1",
diff --git a/oe_theme.theme b/oe_theme.theme
index 80834ad29..817c2e6e5 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -10,11 +10,13 @@ declare(strict_types = 1);
 use Drupal\block\BlockInterface;
 use Drupal\Component\Utility\Html;
 use Drupal\Core\Cache\CacheableMetadata;
+use Drupal\Core\Cache\CacheableDependencyInterface;
 use Drupal\Core\Entity\Entity\EntityViewDisplay;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\Element;
 use Drupal\Core\Template\Attribute;
 use Drupal\Core\Url;
+use Drupal\Core\Session\AccountInterface;
 use Drupal\media\MediaInterface;
 use Drupal\media\Plugin\media\Source\Image;
 use Drupal\media\Plugin\media\Source\OEmbed;
@@ -1711,3 +1713,153 @@ function oe_theme_preprocess_oe_theme_helper_site_navigation(&$variables) {
     unset($variables['site_name']);
   }
 }
+
+/**
+ * Process common fields of illustration list paragraphs.
+ *
+ * @param array $variables
+ *   Render array.
+ */
+function _oe_theme_preprocess_paragraph_oe_illustration_list(array &$variables) {
+  $paragraph = $variables['paragraph'];
+  if (!$paragraph->get('field_oe_title')->isEmpty()) {
+    $variables['title'] = $paragraph->get('field_oe_title')->value;
+  }
+  $variables['zebra'] = (bool) $paragraph->get('field_oe_illustration_alternate')->value;
+  $variables['column'] = $paragraph->get('field_oe_illustration_columns')->value;
+
+  // First part of the variant. Second part should be added in the preprocess
+  // of the specific paragraph.
+  $variant_value = $paragraph->get('oe_paragraphs_variant')->first()->value;
+  $variables['variant'] = $variant_value === 'oe_illustration_vertical' ? 'vertical' : 'horizontal';
+}
+
+/**
+ * Validate and prepare media entity to be processed in theme preprocesses.
+ *
+ * @param mixed $media
+ *   MediaInterface entity will be processed only.
+ * @param \Drupal\Core\Session\AccountInterface $user
+ *   Active user.
+ * @param \Drupal\Core\Cache\CacheableDependencyInterface $cacheability
+ *   Object to collect cacheable dependencies.
+ * @param string $language_id
+ *   Language of the Media to return.
+ *
+ * @return \Drupal\media\MediaInterface|null
+ *   Media entity or null if media isn't accessible.
+ */
+function _oe_theme_prepare_media($media, AccountInterface $user, CacheableDependencyInterface $cacheability, string $language_id): ?MediaInterface {
+  if (!$media instanceof MediaInterface) {
+    // The media entity is not available.
+    return NULL;
+  }
+  $cacheability->addCacheableDependency($media);
+
+  // Run access checks on the media entity.
+  $access = $media->access('view', $user, TRUE);
+  $cacheability->addCacheableDependency($access);
+  if (!$access->isAllowed()) {
+    // Media isn't accessible.
+    return NULL;
+  }
+  // Retrieve the correct media translation.
+  return \Drupal::service('entity.repository')->getTranslationFromContext($media, $language_id);
+}
+
+/**
+ * Implements hook_preprocess_paragraph().
+ */
+function oe_theme_preprocess_paragraph__oe_illustration_list_flags(array &$variables): void {
+  _oe_theme_preprocess_paragraph_oe_illustration_list($variables);
+
+  $variables['variant'] .= '_icons';
+  $variables['items'] = [];
+
+  $paragraph = $variables['paragraph'];
+  $ratio = $paragraph->get('field_oe_illustration_ratio')->first()->value;
+
+  /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
+  foreach ($paragraph->get('field_oe_paragraphs')->referencedEntities() as $sub_paragraph) {
+    // Get sub-paragraph translation.
+    $sub_paragraph = \Drupal::service('entity.repository')
+      ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
+    $description_list = $sub_paragraph->get('field_oe_illustration_text');
+    $icon = $sub_paragraph->get('field_oe_flag')->value;
+    $icon .= $ratio === 'square' ? '-square' : '';
+    $variables['items'][] = [
+      'title' => $description_list->term,
+      'description' => $description_list->description,
+      'icon' => $icon,
+    ];
+  }
+}
+
+/**
+ * Implements hook_preprocess_paragraph().
+ */
+function oe_theme_preprocess_paragraph__oe_illustration_list_icons(array &$variables): void {
+  _oe_theme_preprocess_paragraph_oe_illustration_list($variables);
+
+  $variables['variant'] .= '_icons';
+  $variables['items'] = [];
+
+  $paragraph = $variables['paragraph'];
+  /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
+  foreach ($paragraph->get('field_oe_paragraphs')->referencedEntities() as $sub_paragraph) {
+    // Get sub-paragraph translation.
+    $sub_paragraph = \Drupal::service('entity.repository')
+      ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
+    $description_list = $sub_paragraph->get('field_oe_illustration_text');
+    $variables['items'][] = [
+      'title' => $description_list->term,
+      'description' => $description_list->description,
+      'icon' => $sub_paragraph->get('field_oe_icon')->value,
+    ];
+  }
+}
+
+/**
+ * Implements hook_preprocess_paragraph().
+ */
+function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$variables): void {
+  _oe_theme_preprocess_paragraph_oe_illustration_list($variables);
+
+  $paragraph = $variables['paragraph'];
+  $ratio = $paragraph->get('field_oe_illustration_ratio')->first()->value;
+  $variables['variant'] = $variables['variant'] . '_images_' . $ratio;
+
+  $variables['items'] = [];
+
+  $entity_repository = \Drupal::service('entity.repository');
+  $cacheability = CacheableMetadata::createFromRenderArray($variables);
+  /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
+  foreach ($paragraph->get('field_oe_paragraphs')->referencedEntities() as $sub_paragraph) {
+    // Get sub-paragraph translation.
+    $language_id = $paragraph->language()->getId();
+    $sub_paragraph = $entity_repository->getTranslationFromContext($sub_paragraph, $language_id);
+    // Get the image from attached media.
+    $image = [];
+    $media = _oe_theme_prepare_media($sub_paragraph->get('field_oe_media')->entity, $variables['user'], $cacheability, $language_id);
+    if ($media) {
+      $source = $media->getSource();
+      if ($source instanceof Image && ($file_entity = $media->get('oe_media_image')->entity)) {
+        $uri = $file_entity->getFileUri();
+        $cacheability->addCacheableDependency($file_entity);
+        $values = [
+          'src' => file_create_url($uri),
+          'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? $media->label(),
+        ];
+        $image = ImageValueObject::fromArray($values);
+      }
+    }
+
+    $description_list = $sub_paragraph->get('field_oe_illustration_text');
+    $variables['items'][] = [
+      'title' => $description_list->term,
+      'description' => $description_list->description,
+      'image' => $image,
+    ];
+  }
+  $cacheability->applyTo($variables);
+}
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
new file mode 100644
index 000000000..75ed620ac
--- /dev/null
+++ b/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override to display the 'Illustration list with flags' type paragraph.
+ *
+ * @see ./modules/contrib/paragraphs/templates/paragraph.html.twig
+ */
+#}
+{% if title is not empty %}
+  <h2 class="ecl-u-type-heading-2">
+    {{ title }}
+  </h2>
+{% endif %}
+
+{{ pattern('list_with_illustration', {
+  'variant': variant,
+  'column': column,
+  'zebra': zebra,
+  'items': items,
+}) }}
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
new file mode 100644
index 000000000..00c739927
--- /dev/null
+++ b/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override to display the 'Illustration list with icons' type paragraph.
+ *
+ * @see ./modules/contrib/paragraphs/templates/paragraph.html.twig
+ */
+#}
+{% if title is not empty %}
+  <h2 class="ecl-u-type-heading-2">
+    {{ title }}
+  </h2>
+{% endif %}
+
+{{ pattern('list_with_illustration', {
+  'variant': variant,
+  'column': column,
+  'zebra': zebra,
+  'items': items,
+}) }}
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
new file mode 100644
index 000000000..7bd049e79
--- /dev/null
+++ b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override to display the 'Illustration list with images' type paragraph.
+ *
+ * @see ./modules/contrib/paragraphs/templates/paragraph.html.twig
+ */
+#}
+{% if title is not empty %}
+  <h2 class="ecl-u-type-heading-2">
+    {{ title }}
+  </h2>
+{% endif %}
+
+{{ pattern('list_with_illustration', {
+  'variant': variant,
+  'column': column,
+  'zebra': zebra,
+  'items': items,
+}) }}
diff --git a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
new file mode 100644
index 000000000..41e0875b0
--- /dev/null
+++ b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
@@ -0,0 +1,438 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\Tests\oe_theme\Kernel\Paragraphs;
+
+use Drupal\media\Entity\Media;
+use Drupal\paragraphs\Entity\Paragraph;
+use Drupal\Tests\oe_theme\PatternAssertions\ListWithIllustrationAssert;
+use Symfony\Component\DomCrawler\Crawler;
+
+/**
+ * Tests illustration lists paragraphs.
+ *
+ * @group batch2
+ */
+class IllustrationListsParagraphsTest extends ParagraphsTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = [
+    'composite_reference',
+    'media',
+    'file_link',
+    'oe_media',
+    'options',
+    'oe_paragraphs_media_field_storage',
+    'oe_paragraphs_illustrations_lists',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    $this->installEntitySchema('media');
+
+    module_load_include('install', 'media');
+    media_install();
+    $this->container->get('module_handler')->loadInclude('oe_paragraphs_media_field_storage', 'install');
+    oe_paragraphs_media_field_storage_install(FALSE);
+
+    $this->installConfig([
+      'media',
+      'options',
+      'oe_media',
+      'oe_paragraphs_illustrations_lists',
+    ]);
+  }
+
+  /**
+   * Tests the rendering of the "Illustration list with flags" paragraph.
+   */
+  public function testIllustrationListFlagsRendering(): void {
+    // Create multiple paragraphs to be referenced in the illustration list.
+    $items = [];
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_flag',
+      'field_oe_illustration_text' => [
+        [
+          'term' => 'Term 1',
+          'description' => 'Description 1',
+        ],
+      ],
+      'field_oe_flag' => 'austria',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_flag',
+      'field_oe_illustration_text' => [
+        [
+          'term' => 'Term 2',
+        ],
+      ],
+      'field_oe_flag' => 'belgium',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_flag',
+      'field_oe_illustration_text' => [
+        [
+          'description' => 'Description 3',
+        ],
+      ],
+      'field_oe_flag' => 'france',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_flag',
+      'field_oe_illustration_text' => [],
+      'field_oe_flag' => 'finland',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $list_paragraph = Paragraph::create([
+      'type' => 'oe_illustration_list_flags',
+      'oe_paragraphs_variant' => 'default',
+      'field_oe_title' => 'Illustration with flags test',
+      'field_oe_paragraphs' => $items,
+      'field_oe_illustration_columns' => 2,
+      'field_oe_illustration_ratio' => 'landscape',
+    ]);
+    $html = $this->renderParagraph($list_paragraph);
+
+    // Assert paragraph header.
+    $crawler = new Crawler($html);
+    $heading = $crawler->filter('h2.ecl-u-type-heading-2');
+    $this->assertCount(1, $heading);
+    $this->assertEquals('Illustration with flags test', trim($heading->text()));
+
+    // Assert rendered items.
+    $expected_values = [
+      'column' => 2,
+      'zebra' => FALSE,
+      'items' => [
+        [
+          'title' => 'Term 1',
+          'description' => 'Description 1',
+          'icon' => 'austria',
+        ], [
+          'title' => 'Term 2',
+          'icon' => 'belgium',
+        ], [
+          'description' => 'Description 3',
+          'icon' => 'france',
+        ], [
+          'icon' => 'finland',
+        ],
+      ],
+    ];
+    $assert = new ListWithIllustrationAssert();
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('horizontal_icons', $html);
+
+    // Assert number of columns and ratio.
+    $list_paragraph->set('field_oe_illustration_columns', 4);
+    $list_paragraph->set('field_oe_illustration_ratio', 'square')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values = [
+      'column' => 4,
+      'zebra' => FALSE,
+      'items' => [
+        [
+          'title' => 'Term 1',
+          'description' => 'Description 1',
+          'icon' => 'austria-square',
+        ], [
+          'title' => 'Term 2',
+          'icon' => 'belgium-square',
+        ], [
+          'description' => 'Description 3',
+          'icon' => 'france-square',
+        ], [
+          'icon' => 'finland-square',
+        ],
+      ],
+    ];
+    $assert->assertPattern($expected_values, $html);
+
+    // Assert vertical variant.
+    $list_paragraph->set('oe_paragraphs_variant', 'oe_illustration_vertical')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    unset($expected_values['column']);
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('vertical_icons', $html);
+
+    // Assert vertical variant with zebra.
+    $list_paragraph->set('field_oe_illustration_alternate', TRUE)->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values['zebra'] = TRUE;
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('vertical_icons', $html);
+  }
+
+  /**
+   * Tests the rendering of the "Illustration list with icons" paragraph.
+   */
+  public function testIllustrationListIconsRendering(): void {
+    $items = [];
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_icon',
+      'field_oe_illustration_text' => [
+        [
+          'term' => 'Term 1',
+          'description' => 'Description 1',
+        ],
+      ],
+      'field_oe_icon' => 'data',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_icon',
+      'field_oe_illustration_text' => [
+        [
+          'term' => 'Term 2',
+        ],
+      ],
+      'field_oe_icon' => 'facebook',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_icon',
+      'field_oe_illustration_text' => [
+        [
+          'description' => 'Description 3',
+        ],
+      ],
+      'field_oe_icon' => 'global',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_icon',
+      'field_oe_illustration_text' => [],
+      'field_oe_icon' => 'package',
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $list_paragraph = Paragraph::create([
+      'type' => 'oe_illustration_list_icons',
+      'oe_paragraphs_variant' => 'default',
+      'field_oe_title' => 'Illustration with icons test',
+      'field_oe_paragraphs' => $items,
+      'field_oe_illustration_columns' => 2,
+    ]);
+    $html = $this->renderParagraph($list_paragraph);
+
+    // Assert paragraph header.
+    $crawler = new Crawler($html);
+    $heading = $crawler->filter('h2.ecl-u-type-heading-2');
+    $this->assertCount(1, $heading);
+    $this->assertEquals('Illustration with icons test', trim($heading->text()));
+
+    // Assert rendered items.
+    $expected_values = [
+      'column' => 2,
+      'zebra' => FALSE,
+      'items' => [
+        [
+          'title' => 'Term 1',
+          'description' => 'Description 1',
+          'icon' => 'data',
+        ], [
+          'title' => 'Term 2',
+          'icon' => 'facebook',
+        ], [
+          'description' => 'Description 3',
+          'icon' => 'global',
+        ], [
+          'icon' => 'package',
+        ],
+      ],
+    ];
+    $assert = new ListWithIllustrationAssert();
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('horizontal_icons', $html);
+
+    // Assert number of columns.
+    $list_paragraph->set('field_oe_illustration_columns', 3)->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values['column'] = 3;
+    $assert->assertPattern($expected_values, $html);
+
+    // Assert vertical variant.
+    $list_paragraph->set('oe_paragraphs_variant', 'oe_illustration_vertical')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    unset($expected_values['column']);
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('vertical_icons', $html);
+
+    // Assert vertical variant with zebra.
+    $list_paragraph->set('field_oe_illustration_alternate', TRUE)->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values['zebra'] = TRUE;
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('vertical_icons', $html);
+  }
+
+  /**
+   * Tests the rendering of the "Illustration list with icons" paragraph.
+   */
+  public function testIllustrationListImagesRendering(): void {
+    // Create media image.
+    $file = file_save_data(file_get_contents(drupal_get_path('theme', 'oe_theme') . '/tests/fixtures/example_1.jpeg'), 'public://example_1.jpeg');
+    $file->setPermanent();
+    $file->save();
+
+    $media = Media::create([
+      'bundle' => 'image',
+      'name' => 'test image',
+      'oe_media_image' => [
+        'target_id' => $file->id(),
+        'alt' => 'Alt',
+      ],
+    ]);
+    $media->save();
+
+    // Create Illustration list with images paragraph.
+    $items = [];
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_image',
+      'field_oe_illustration_text' => [
+        [
+          'term' => 'Term 1',
+          'description' => 'Description 1',
+        ],
+      ],
+      'field_oe_media' => [$media],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_image',
+      'field_oe_illustration_text' => [
+        [
+          'term' => 'Term 2',
+        ],
+      ],
+      'field_oe_media' => [$media],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_image',
+      'field_oe_illustration_text' => [
+        [
+          'description' => 'Description 3',
+        ],
+      ],
+      'field_oe_media' => [$media],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $paragraph = Paragraph::create([
+      'type' => 'oe_illustration_item_image',
+      'field_oe_illustration_text' => [],
+      'field_oe_media' => [$media],
+    ]);
+    $paragraph->save();
+    $items[] = $paragraph;
+
+    $list_paragraph = Paragraph::create([
+      'type' => 'oe_illustration_list_images',
+      'oe_paragraphs_variant' => 'default',
+      'field_oe_title' => 'Illustration with images test',
+      'field_oe_paragraphs' => $items,
+      'field_oe_illustration_columns' => 2,
+      'field_oe_illustration_ratio' => 'landscape',
+    ]);
+    $html = $this->renderParagraph($list_paragraph);
+
+    // Assert paragraph header.
+    $crawler = new Crawler($html);
+    $heading = $crawler->filter('h2.ecl-u-type-heading-2');
+    $this->assertCount(1, $heading);
+    $this->assertEquals('Illustration with images test', trim($heading->text()));
+
+    // Assert rendered items.
+    $expected_values = [
+      'column' => 2,
+      'zebra' => FALSE,
+      'items' => [
+        [
+          'title' => 'Term 1',
+          'description' => 'Description 1',
+          'image' => [
+            'src' => 'example_1.jpeg',
+            'alt' => 'Alt',
+          ],
+        ], [
+          'title' => 'Term 2',
+          'image' => [
+            'src' => 'example_1.jpeg',
+            'alt' => 'Alt',
+          ],
+        ], [
+          'description' => 'Description 3',
+          'image' => [
+            'src' => 'example_1.jpeg',
+            'alt' => 'Alt',
+          ],
+        ], [
+          'image' => [
+            'src' => 'example_1.jpeg',
+            'alt' => 'Alt',
+          ],
+        ],
+      ],
+    ];
+    $assert = new ListWithIllustrationAssert();
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('horizontal_images_landscape', $html);
+
+    // Assert number of columns and ratio.
+    $list_paragraph->set('field_oe_illustration_columns', 3);
+    $list_paragraph->set('field_oe_illustration_ratio', 'square')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values['column'] = 3;
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('horizontal_images_square', $html);
+
+    // Assert vertical variant.
+    $list_paragraph->set('oe_paragraphs_variant', 'oe_illustration_vertical')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    unset($expected_values['column']);
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('vertical_images_square', $html);
+
+    // Assert vertical variant with zebra and ratio.
+    $list_paragraph->set('field_oe_illustration_alternate', TRUE);
+    $list_paragraph->set('field_oe_illustration_ratio', 'landscape')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values['zebra'] = TRUE;
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('vertical_images_landscape', $html);
+  }
+
+}

From ae6d16d5bab9526d30ad2244967a6b9b37e298e6 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Sun, 23 Jan 2022 19:46:27 +0100
Subject: [PATCH 09/19] EWPP-1864: Update illustration list paragraph rendering
 from description list to simple fields.

---
 composer.json                                 |  2 +-
 oe_theme.theme                                | 20 +++---
 .../IllustrationListsParagraphsTest.php       | 67 +++++--------------
 3 files changed, 26 insertions(+), 63 deletions(-)

diff --git a/composer.json b/composer.json
index 597033285..1a357a082 100644
--- a/composer.json
+++ b/composer.json
@@ -51,7 +51,7 @@
         "openeuropa/oe_corporate_countries": "~2.0",
         "openeuropa/oe_media": "~1.12",
         "openeuropa/oe_multilingual": "~1.8",
-        "openeuropa/oe_paragraphs": "dev-EWPP-1862",
+        "openeuropa/oe_paragraphs": "dev-master",
         "openeuropa/oe_search": "1.x-dev",
         "openeuropa/oe_webtools": "~1.12",
         "openeuropa/oe_contact_forms": "~1.1",
diff --git a/oe_theme.theme b/oe_theme.theme
index 817c2e6e5..c9c9e9a79 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1778,18 +1778,17 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_flags(array &$varia
 
   $paragraph = $variables['paragraph'];
   $ratio = $paragraph->get('field_oe_illustration_ratio')->first()->value;
-
+  $builder = \Drupal::entityTypeManager()->getViewBuilder('paragraph');
   /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
   foreach ($paragraph->get('field_oe_paragraphs')->referencedEntities() as $sub_paragraph) {
     // Get sub-paragraph translation.
     $sub_paragraph = \Drupal::service('entity.repository')
       ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
-    $description_list = $sub_paragraph->get('field_oe_illustration_text');
     $icon = $sub_paragraph->get('field_oe_flag')->value;
     $icon .= $ratio === 'square' ? '-square' : '';
     $variables['items'][] = [
-      'title' => $description_list->term,
-      'description' => $description_list->description,
+      'title' => $sub_paragraph->get('field_oe_title')->value,
+      'description' => $sub_paragraph->get('field_oe_text_long')->isEmpty() ? '' : $builder->viewField($sub_paragraph->get('field_oe_text_long')),
       'icon' => $icon,
     ];
   }
@@ -1805,15 +1804,15 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_icons(array &$varia
   $variables['items'] = [];
 
   $paragraph = $variables['paragraph'];
+  $builder = \Drupal::entityTypeManager()->getViewBuilder('paragraph');
   /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
   foreach ($paragraph->get('field_oe_paragraphs')->referencedEntities() as $sub_paragraph) {
     // Get sub-paragraph translation.
     $sub_paragraph = \Drupal::service('entity.repository')
       ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
-    $description_list = $sub_paragraph->get('field_oe_illustration_text');
     $variables['items'][] = [
-      'title' => $description_list->term,
-      'description' => $description_list->description,
+      'title' => $sub_paragraph->get('field_oe_title')->value,
+      'description' => $sub_paragraph->get('field_oe_text_long')->isEmpty() ? '' : $builder->viewField($sub_paragraph->get('field_oe_text_long')),
       'icon' => $sub_paragraph->get('field_oe_icon')->value,
     ];
   }
@@ -1833,6 +1832,7 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
 
   $entity_repository = \Drupal::service('entity.repository');
   $cacheability = CacheableMetadata::createFromRenderArray($variables);
+  $builder = \Drupal::entityTypeManager()->getViewBuilder('paragraph');
   /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
   foreach ($paragraph->get('field_oe_paragraphs')->referencedEntities() as $sub_paragraph) {
     // Get sub-paragraph translation.
@@ -1853,11 +1853,9 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
         $image = ImageValueObject::fromArray($values);
       }
     }
-
-    $description_list = $sub_paragraph->get('field_oe_illustration_text');
     $variables['items'][] = [
-      'title' => $description_list->term,
-      'description' => $description_list->description,
+      'title' => $sub_paragraph->get('field_oe_title')->value,
+      'description' => $sub_paragraph->get('field_oe_text_long')->isEmpty() ? '' : $builder->viewField($sub_paragraph->get('field_oe_text_long')),
       'image' => $image,
     ];
   }
diff --git a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
index 41e0875b0..ea984c63c 100644
--- a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
@@ -59,12 +59,8 @@ public function testIllustrationListFlagsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_flag',
-      'field_oe_illustration_text' => [
-        [
-          'term' => 'Term 1',
-          'description' => 'Description 1',
-        ],
-      ],
+      'field_oe_title' => 'Term 1',
+      'field_oe_text_long' => 'Description 1',
       'field_oe_flag' => 'austria',
     ]);
     $paragraph->save();
@@ -72,11 +68,8 @@ public function testIllustrationListFlagsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_flag',
-      'field_oe_illustration_text' => [
-        [
-          'term' => 'Term 2',
-        ],
-      ],
+      'field_oe_title' => 'Term 2',
+      'field_oe_text_long' => '',
       'field_oe_flag' => 'belgium',
     ]);
     $paragraph->save();
@@ -84,11 +77,8 @@ public function testIllustrationListFlagsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_flag',
-      'field_oe_illustration_text' => [
-        [
-          'description' => 'Description 3',
-        ],
-      ],
+      'field_oe_title' => '',
+      'field_oe_text_long' => 'Description 3',
       'field_oe_flag' => 'france',
     ]);
     $paragraph->save();
@@ -96,7 +86,8 @@ public function testIllustrationListFlagsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_flag',
-      'field_oe_illustration_text' => [],
+      'field_oe_title' => '',
+      'field_oe_text_long' => '',
       'field_oe_flag' => 'finland',
     ]);
     $paragraph->save();
@@ -190,12 +181,8 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
-      'field_oe_illustration_text' => [
-        [
-          'term' => 'Term 1',
-          'description' => 'Description 1',
-        ],
-      ],
+      'field_oe_title' => 'Term 1',
+      'field_oe_text_long' => 'Description 1',
       'field_oe_icon' => 'data',
     ]);
     $paragraph->save();
@@ -203,11 +190,7 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
-      'field_oe_illustration_text' => [
-        [
-          'term' => 'Term 2',
-        ],
-      ],
+      'field_oe_title' => 'Term 2',
       'field_oe_icon' => 'facebook',
     ]);
     $paragraph->save();
@@ -215,11 +198,7 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
-      'field_oe_illustration_text' => [
-        [
-          'description' => 'Description 3',
-        ],
-      ],
+      'field_oe_text_long' => 'Description 3',
       'field_oe_icon' => 'global',
     ]);
     $paragraph->save();
@@ -227,7 +206,6 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
-      'field_oe_illustration_text' => [],
       'field_oe_icon' => 'package',
     ]);
     $paragraph->save();
@@ -316,12 +294,8 @@ public function testIllustrationListImagesRendering(): void {
     $items = [];
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
-      'field_oe_illustration_text' => [
-        [
-          'term' => 'Term 1',
-          'description' => 'Description 1',
-        ],
-      ],
+      'field_oe_title' => 'Term 1',
+      'field_oe_text_long' => 'Description 1',
       'field_oe_media' => [$media],
     ]);
     $paragraph->save();
@@ -329,11 +303,7 @@ public function testIllustrationListImagesRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
-      'field_oe_illustration_text' => [
-        [
-          'term' => 'Term 2',
-        ],
-      ],
+      'field_oe_title' => 'Term 2',
       'field_oe_media' => [$media],
     ]);
     $paragraph->save();
@@ -341,11 +311,7 @@ public function testIllustrationListImagesRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
-      'field_oe_illustration_text' => [
-        [
-          'description' => 'Description 3',
-        ],
-      ],
+      'field_oe_text_long' => 'Description 3',
       'field_oe_media' => [$media],
     ]);
     $paragraph->save();
@@ -353,7 +319,6 @@ public function testIllustrationListImagesRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
-      'field_oe_illustration_text' => [],
       'field_oe_media' => [$media],
     ]);
     $paragraph->save();

From be76ae62e4d707855e1d8e2cce9ee09067088308 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Sun, 23 Jan 2022 20:08:01 +0100
Subject: [PATCH 10/19] EWPP-1864: Remove illustration list variants.

---
 oe_theme.theme                                | 12 ++-----
 .../list_with_illustration.ui_patterns.yml    | 32 +++++------------
 .../pattern-list-with-illustration.html.twig  | 36 +++++--------------
 .../IllustrationListsParagraphsTest.php       | 10 ------
 tests/src/Kernel/fixtures/rendering.yml       | 20 +++++------
 .../ListWithIllustrationAssert.php            | 29 ---------------
 6 files changed, 30 insertions(+), 109 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index c9c9e9a79..24ebe99b5 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1726,12 +1726,10 @@ function _oe_theme_preprocess_paragraph_oe_illustration_list(array &$variables)
     $variables['title'] = $paragraph->get('field_oe_title')->value;
   }
   $variables['zebra'] = (bool) $paragraph->get('field_oe_illustration_alternate')->value;
-  $variables['column'] = $paragraph->get('field_oe_illustration_columns')->value;
 
-  // First part of the variant. Second part should be added in the preprocess
-  // of the specific paragraph.
+  // Set the column value based on the selected variant.
   $variant_value = $paragraph->get('oe_paragraphs_variant')->first()->value;
-  $variables['variant'] = $variant_value === 'oe_illustration_vertical' ? 'vertical' : 'horizontal';
+  $variables['column'] = $variant_value === 'oe_illustration_vertical' ? 1 : $paragraph->get('field_oe_illustration_columns')->value;
 }
 
 /**
@@ -1772,8 +1770,6 @@ function _oe_theme_prepare_media($media, AccountInterface $user, CacheableDepend
  */
 function oe_theme_preprocess_paragraph__oe_illustration_list_flags(array &$variables): void {
   _oe_theme_preprocess_paragraph_oe_illustration_list($variables);
-
-  $variables['variant'] .= '_icons';
   $variables['items'] = [];
 
   $paragraph = $variables['paragraph'];
@@ -1799,8 +1795,6 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_flags(array &$varia
  */
 function oe_theme_preprocess_paragraph__oe_illustration_list_icons(array &$variables): void {
   _oe_theme_preprocess_paragraph_oe_illustration_list($variables);
-
-  $variables['variant'] .= '_icons';
   $variables['items'] = [];
 
   $paragraph = $variables['paragraph'];
@@ -1826,8 +1820,6 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
 
   $paragraph = $variables['paragraph'];
   $ratio = $paragraph->get('field_oe_illustration_ratio')->first()->value;
-  $variables['variant'] = $variables['variant'] . '_images_' . $ratio;
-
   $variables['items'] = [];
 
   $entity_repository = \Drupal::service('entity.repository');
diff --git a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
index afef19d00..3af60c8a1 100644
--- a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
+++ b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
@@ -1,36 +1,22 @@
 list_with_illustration:
   label: "List with illustration"
   description: "A list of items with associated illustrations."
-  variants:
-    vertical_images_landscape:
-      label: "Vertical with images (large)"
-      description: "Vertical list with large images."
-    vertical_images_square:
-      label: "Vertical with images (square)"
-      description: "Vertical list with square images."
-    vertical_icons:
-      label: "Vertical with icons"
-      description: "Vertical list with icons."
-    horizontal_images_landscape:
-      label: "Horizontal with images (large)"
-      description: "Horizontal list with large images."
-    horizontal_images_square:
-      label: "Horizontal with images (square)"
-      description: "Horizontal list with square images."
-    horizontal_icons:
-      label: "Horizontal with icons"
-      description: "Horizontal list with icons."
   fields:
     column:
       type: "numeric"
       label: "Column number"
-      description: "Number of columns (only applies to horizontal variants). Maximum of 4 columns."
-      preview: 2
+      description: "Number of columns. Maximum of 4 columns."
+      preview: 1
       escape: false
     zebra:
       type: "boolean"
       label: "Zebra"
-      description: "Use zebra background (only applies to vertical variants)."
+      description: "Use zebra background."
+      preview: true
+    squared:
+      type: "boolean"
+      label: "Squared"
+      description: "Whether the rendered image should be rendered in square or landscape mode (only applies to image)."
       preview: true
     items:
       type: "array"
@@ -42,7 +28,7 @@ list_with_illustration:
           image:
             src: "https://placeimg.com/1000/500/arch"
             alt: "Alternative text for featured item image"
-          icon: "growth"
+          icon: "italy"
         - title: "About the European Union"
           description: "The EU and its institutions, how to visit and work at the EU."
           image:
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
index f4ff6b78b..556bafdd4 100644
--- a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -4,36 +4,18 @@
  * List with illustration.
  */
 #}
-
-{# Set the columns to 1 if vertical variants. #}
-{% if 'vertical' in variant %}
-  {% set column = 1 %}
-{% endif %}
-
-{# Set the zebra to false if horizontal variants. #}
-{% if 'horizontal' in variant %}
-  {% set zebra = false %}
-{% endif %}
-
 {% set _items = [] %}
 {% for item in items %}
-  {% if 'icon' in variant %}
-    {# Remove image information if an icon variant. #}
-    {% set _item = item|merge({'image': {}}) %}
-    {# Transform icon into ecl array. #}
-    {% if _item.icon %}
-      {% set _item = _item|merge({'icon': to_ecl_icon(item.icon)}) %}
-    {% endif %}
-  {% elseif 'image' in variant %}
-    {# Remove icon information if an image variant. #}
-    {% set _item = item|merge({'icon': {}}) %}
-    {# Make images square if square variant. #}
-    {% if _item.image and 'square' in variant %}
-      {% set _image = _item.image|merge({'squared': true}) %}
-      {% set _item = _item|merge({'image': _image}) %}
-    {% endif %}
+  {# Transform icon into ecl array. #}
+  {% if item.icon %}
+    {% set item = item|merge({'icon': to_ecl_icon(item.icon)}) %}
   {% endif %}
-  {% set _items = _items|merge([_item]) %}
+  {# Add squared information to image. #}
+  {% if item.image %}
+    {% set _image = item.image|merge({'squared': squared}) %}
+    {% set item = item|merge({'image': _image}) %}
+  {% endif %}
+  {% set _items = _items|merge([item]) %}
 {% endfor %}
 {% include '@ecl-twig/list-illustration' with {
   'column': column,
diff --git a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
index ea984c63c..e857e47dd 100644
--- a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
@@ -131,7 +131,6 @@ public function testIllustrationListFlagsRendering(): void {
     ];
     $assert = new ListWithIllustrationAssert();
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('horizontal_icons', $html);
 
     // Assert number of columns and ratio.
     $list_paragraph->set('field_oe_illustration_columns', 4);
@@ -163,14 +162,12 @@ public function testIllustrationListFlagsRendering(): void {
     $html = $this->renderParagraph($list_paragraph);
     unset($expected_values['column']);
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('vertical_icons', $html);
 
     // Assert vertical variant with zebra.
     $list_paragraph->set('field_oe_illustration_alternate', TRUE)->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('vertical_icons', $html);
   }
 
   /**
@@ -248,7 +245,6 @@ public function testIllustrationListIconsRendering(): void {
     ];
     $assert = new ListWithIllustrationAssert();
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('horizontal_icons', $html);
 
     // Assert number of columns.
     $list_paragraph->set('field_oe_illustration_columns', 3)->save();
@@ -261,14 +257,12 @@ public function testIllustrationListIconsRendering(): void {
     $html = $this->renderParagraph($list_paragraph);
     unset($expected_values['column']);
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('vertical_icons', $html);
 
     // Assert vertical variant with zebra.
     $list_paragraph->set('field_oe_illustration_alternate', TRUE)->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('vertical_icons', $html);
   }
 
   /**
@@ -374,7 +368,6 @@ public function testIllustrationListImagesRendering(): void {
     ];
     $assert = new ListWithIllustrationAssert();
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('horizontal_images_landscape', $html);
 
     // Assert number of columns and ratio.
     $list_paragraph->set('field_oe_illustration_columns', 3);
@@ -382,14 +375,12 @@ public function testIllustrationListImagesRendering(): void {
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['column'] = 3;
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('horizontal_images_square', $html);
 
     // Assert vertical variant.
     $list_paragraph->set('oe_paragraphs_variant', 'oe_illustration_vertical')->save();
     $html = $this->renderParagraph($list_paragraph);
     unset($expected_values['column']);
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('vertical_images_square', $html);
 
     // Assert vertical variant with zebra and ratio.
     $list_paragraph->set('field_oe_illustration_alternate', TRUE);
@@ -397,7 +388,6 @@ public function testIllustrationListImagesRendering(): void {
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
     $assert->assertPattern($expected_values, $html);
-    $assert->assertVariant('vertical_images_landscape', $html);
   }
 
 }
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index db2d679d1..a541d5ab2 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -3008,9 +3008,10 @@
 - array:
     '#type': 'pattern'
     '#id': 'list_with_illustration'
-    '#variant': "vertical_images_large"
     '#fields':
+      squared: false
       zebra: true
+      column: 1
       items:
         - title: "Business, Economy, Euro"
           description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
@@ -3041,9 +3042,10 @@
 - array:
     '#type': 'pattern'
     '#id': 'list_with_illustration'
-    '#variant': "vertical_images_square"
     '#fields':
+      squared: true
       zebra: true
+      column: 1
       items:
         - title: "Business, Economy, Euro"
           description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
@@ -3076,16 +3078,14 @@
 - array:
     '#type': 'pattern'
     '#id': 'list_with_illustration'
-    '#variant': "vertical_icons"
     '#fields':
+      squared: false
       zebra: false
+      column: 1
       items:
         - title: "Business, Economy, Euro"
           description: "EU economy, the euro, and practical information for EU businesses and entrepreneurs."
           icon: "growth"
-          image:
-            src: "https://placeimg.com/500/500/arch"
-            alt: "Alternative text for featured item image 2"
         - title: "About the European Union"
           description: "The EU and its institutions, how to visit and work at the EU."
           icon: "budget"
@@ -3106,9 +3106,9 @@
 - array:
     '#type': 'pattern'
     '#id': 'list_with_illustration'
-    '#variant': "horizontal_images_large"
     '#fields':
-      zebra: true
+      squared: false
+      zebra: false
       column: 2
       items:
         - title: "Business, Economy, Euro"
@@ -3141,8 +3141,8 @@
 - array:
     '#type': 'pattern'
     '#id': 'list_with_illustration'
-    '#variant': "horizontal_images_square"
     '#fields':
+      squared: true
       column: 3
       items:
         - title: "Business, Economy, Euro"
@@ -3174,8 +3174,8 @@
 - array:
     '#type': 'pattern'
     '#id': 'list_with_illustration'
-    '#variant': "horizontal_icons"
     '#fields':
+      squared: false
       column: 2
       items:
         - title: "Business, Economy, Euro"
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index ab6d487dc..c98bd2e42 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -113,33 +113,4 @@ protected function assertItems(array $expected_items, string $variant, Crawler $
     }
   }
 
-  /**
-   * {@inheritdoc}
-   */
-  protected function getPatternVariant(string $html): string {
-    $crawler = new Crawler($html);
-    // Check whether it's horizontal or vertical.
-    $variant = 'vertical';
-    $list = $crawler->filter('.ecl-list-illustration');
-    if (strpos($list->attr('class'), 'ecl-list-illustration--col') !== FALSE) {
-      $variant = 'horizontal';
-    }
-    // Check whether we have images or icons.
-    // If we have one image, we assume it's an image variant.
-    $image_element = $crawler->filter('.ecl-list-illustration__image');
-    if ($image_element->count()) {
-      $variant .= '_images';
-      // Check whether it's square or not.
-      if (strpos($image_element->attr('class'), 'ecl-list-illustration__image--square') !== FALSE) {
-        $variant .= '_square';
-      }
-      else {
-        $variant .= '_landscape';
-      }
-      return $variant;
-    }
-    $variant .= '_icons';
-    return $variant;
-  }
-
 }

From 78c78ddd8b01d6ae0c25de6675482cd0031b8457 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Mon, 24 Jan 2022 14:25:49 +0100
Subject: [PATCH 11/19] EWPP-1864: Fix qa remarks.

---
 oe_theme.theme                                              | 6 ++----
 .../paragraph--oe-illustration-list-flags.html.twig         | 1 -
 .../paragraph--oe-illustration-list-icons.html.twig         | 1 -
 .../paragraph--oe-illustration-list-images.html.twig        | 1 -
 4 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index 24ebe99b5..131f195ee 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1720,7 +1720,7 @@ function oe_theme_preprocess_oe_theme_helper_site_navigation(&$variables) {
  * @param array $variables
  *   Render array.
  */
-function _oe_theme_preprocess_paragraph_oe_illustration_list(array &$variables) {
+function _oe_theme_preprocess_paragraph_oe_illustration_list(array &$variables): void {
   $paragraph = $variables['paragraph'];
   if (!$paragraph->get('field_oe_title')->isEmpty()) {
     $variables['title'] = $paragraph->get('field_oe_title')->value;
@@ -1819,7 +1819,6 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
   _oe_theme_preprocess_paragraph_oe_illustration_list($variables);
 
   $paragraph = $variables['paragraph'];
-  $ratio = $paragraph->get('field_oe_illustration_ratio')->first()->value;
   $variables['items'] = [];
 
   $entity_repository = \Drupal::service('entity.repository');
@@ -1836,10 +1835,9 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
     if ($media) {
       $source = $media->getSource();
       if ($source instanceof Image && ($file_entity = $media->get('oe_media_image')->entity)) {
-        $uri = $file_entity->getFileUri();
         $cacheability->addCacheableDependency($file_entity);
         $values = [
-          'src' => file_create_url($uri),
+          'src' => $file_entity->createFileUrl(),
           'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? $media->label(),
         ];
         $image = ImageValueObject::fromArray($values);
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
index 75ed620ac..e0a4e0f7c 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
@@ -13,7 +13,6 @@
 {% endif %}
 
 {{ pattern('list_with_illustration', {
-  'variant': variant,
   'column': column,
   'zebra': zebra,
   'items': items,
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
index 00c739927..ce73a23b5 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
@@ -13,7 +13,6 @@
 {% endif %}
 
 {{ pattern('list_with_illustration', {
-  'variant': variant,
   'column': column,
   'zebra': zebra,
   'items': items,
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
index 7bd049e79..bb10e4f97 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
@@ -13,7 +13,6 @@
 {% endif %}
 
 {{ pattern('list_with_illustration', {
-  'variant': variant,
   'column': column,
   'zebra': zebra,
   'items': items,

From 5fbc6ca0d0127aa3d7ae08db6843b9079152f38c Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Wed, 26 Jan 2022 19:14:05 +0300
Subject: [PATCH 12/19] EWPP-1864: Add "squared" option to Illustration list
 image.

---
 oe_theme.theme                                |  5 +++
 ...aph--oe-illustration-list-images.html.twig |  1 +
 .../IllustrationListsParagraphsTest.php       |  8 +++++
 .../ListWithIllustrationAssert.php            | 35 +++++++++++++------
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index 131f195ee..c20d4e3e5 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1849,5 +1849,10 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
       'image' => $image,
     ];
   }
+
+  // Set "Square" or "Landscape" view for an image.
+  $ratio = $paragraph->get('field_oe_illustration_ratio')->first()->value;
+  $variables['squared'] = $ratio === 'square' ? TRUE : FALSE;
+
   $cacheability->applyTo($variables);
 }
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
index bb10e4f97..c5bfa2282 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
@@ -16,4 +16,5 @@
   'column': column,
   'zebra': zebra,
   'items': items,
+  'squared': squared
 }) }}
diff --git a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
index e857e47dd..c72ab360b 100644
--- a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
@@ -108,6 +108,8 @@ public function testIllustrationListFlagsRendering(): void {
     $heading = $crawler->filter('h2.ecl-u-type-heading-2');
     $this->assertCount(1, $heading);
     $this->assertEquals('Illustration with flags test', trim($heading->text()));
+    $icon = $crawler->filter('.ecl-list-illustration__icon use');
+    $this->assertStringNotContainsString('-square', $icon->attr('xlink:href'));
 
     // Assert rendered items.
     $expected_values = [
@@ -156,6 +158,9 @@ public function testIllustrationListFlagsRendering(): void {
       ],
     ];
     $assert->assertPattern($expected_values, $html);
+    $crawler = new Crawler($html);
+    $icon = $crawler->filter('.ecl-list-illustration__icon use');
+    $this->assertStringContainsString('-square', $icon->attr('xlink:href'));
 
     // Assert vertical variant.
     $list_paragraph->set('oe_paragraphs_variant', 'oe_illustration_vertical')->save();
@@ -338,6 +343,7 @@ public function testIllustrationListImagesRendering(): void {
     $expected_values = [
       'column' => 2,
       'zebra' => FALSE,
+      'squared' => FALSE,
       'items' => [
         [
           'title' => 'Term 1',
@@ -374,6 +380,7 @@ public function testIllustrationListImagesRendering(): void {
     $list_paragraph->set('field_oe_illustration_ratio', 'square')->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['column'] = 3;
+    $expected_values['squared'] = TRUE;
     $assert->assertPattern($expected_values, $html);
 
     // Assert vertical variant.
@@ -387,6 +394,7 @@ public function testIllustrationListImagesRendering(): void {
     $list_paragraph->set('field_oe_illustration_ratio', 'landscape')->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
+    $expected_values['squared'] = FALSE;
     $assert->assertPattern($expected_values, $html);
   }
 
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index c98bd2e42..a8d2f637d 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -18,14 +18,15 @@ protected function getAssertions($variant): array {
     return [
       'column' => [
         [$this, 'assertColumns'],
-        $variant,
       ],
       'zebra' => [
         [$this, 'assertZebra'],
       ],
+      'squared' => [
+        [$this, 'assertSquared'],
+      ],
       'items' => [
         [$this, 'assertItems'],
-        $variant,
       ],
     ];
   }
@@ -43,12 +44,10 @@ protected function assertBaseElements(string $html, string $variant): void {
    *
    * @param int $column
    *   The expected number of columns.
-   * @param string $variant
-   *   The variant of the pattern being checked.
    * @param \Symfony\Component\DomCrawler\Crawler $crawler
    *   The DomCrawler where to check the element.
    */
-  protected function assertColumns(int $column, string $variant, Crawler $crawler): void {
+  protected function assertColumns(int $column, Crawler $crawler): void {
     $column_selector = '.ecl-list-illustration--col-' . $column;
     self::assertElementExists($column_selector, $crawler);
   }
@@ -70,17 +69,34 @@ protected function assertZebra(bool $zebra, Crawler $crawler): void {
     }
   }
 
+  /**
+   * Asserts if the list uses square images or not.
+   *
+   * @param bool $squared
+   *   Whether the "squared" option is enabled or not.
+   * @param \Symfony\Component\DomCrawler\Crawler $crawler
+   *   The DomCrawler where to check the element.
+   */
+  protected function assertSquared(bool $squared, Crawler $crawler): void {
+    if ($squared) {
+      // Few square images can exist.
+      $element = $crawler->filter('.ecl-list-illustration__image--square');
+      self::assertTrue((bool) $element->count());
+    }
+    else {
+      self::assertElementNotExists('.ecl-list-illustration__image--square', $crawler);
+    }
+  }
+
   /**
    * Asserts the item with an illustration from the list.
    *
    * @param array $expected_items
    *   The expected list items.
-   * @param string $variant
-   *   The variant of the pattern being checked.
    * @param \Symfony\Component\DomCrawler\Crawler $crawler
    *   The DomCrawler where to check the element.
    */
-  protected function assertItems(array $expected_items, string $variant, Crawler $crawler): void {
+  protected function assertItems(array $expected_items, Crawler $crawler): void {
     $item_elements = $crawler->filter('.ecl-list-illustration__item');
     self::assertCount(count($expected_items), $item_elements, 'The expected list items do not match the found list items.');
     foreach ($expected_items as $index => $expected_item) {
@@ -102,9 +118,6 @@ protected function assertItems(array $expected_items, string $variant, Crawler $
         $image_element = $item_element->filter('.ecl-list-illustration__image');
         self::assertEquals($expected_item['image']['alt'], $image_element->attr('aria-label'));
         self::assertStringContainsString($expected_item['image']['src'], $image_element->attr('style'));
-        if (strpos($variant, 'square') !== FALSE) {
-          self::assertElementExists('.ecl-list-illustration__image--square', $item_element);
-        }
       }
       if (isset($expected_item['icon'])) {
         $icon_element = $item_element->filter('svg.ecl-icon use');

From 51f83e0b9769971c98b67d171521b472a60aa6b6 Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Thu, 27 Jan 2022 12:41:15 +0300
Subject: [PATCH 13/19] EWPP-1864: Rename "squared" to "square_image".

---
 oe_theme.theme                                      |  2 +-
 ...paragraph--oe-illustration-list-images.html.twig |  2 +-
 .../list_with_illustration.ui_patterns.yml          |  4 ++--
 .../pattern-list-with-illustration.html.twig        |  4 ++--
 .../Paragraphs/IllustrationListsParagraphsTest.php  |  6 +++---
 tests/src/Kernel/fixtures/rendering.yml             | 13 ++++++-------
 .../ListWithIllustrationAssert.php                  | 12 ++++++------
 7 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index c20d4e3e5..55f599ed5 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1852,7 +1852,7 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
 
   // Set "Square" or "Landscape" view for an image.
   $ratio = $paragraph->get('field_oe_illustration_ratio')->first()->value;
-  $variables['squared'] = $ratio === 'square' ? TRUE : FALSE;
+  $variables['square_image'] = $ratio === 'square' ? TRUE : FALSE;
 
   $cacheability->applyTo($variables);
 }
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
index c5bfa2282..a2ec7ef97 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
@@ -16,5 +16,5 @@
   'column': column,
   'zebra': zebra,
   'items': items,
-  'squared': squared
+  'square_image': square_image
 }) }}
diff --git a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
index 3af60c8a1..094d785f5 100644
--- a/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
+++ b/templates/patterns/list_with_illustration/list_with_illustration.ui_patterns.yml
@@ -13,9 +13,9 @@ list_with_illustration:
       label: "Zebra"
       description: "Use zebra background."
       preview: true
-    squared:
+    square_image:
       type: "boolean"
-      label: "Squared"
+      label: "Square image"
       description: "Whether the rendered image should be rendered in square or landscape mode (only applies to image)."
       preview: true
     items:
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
index 556bafdd4..ff5f4d843 100644
--- a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -10,9 +10,9 @@
   {% if item.icon %}
     {% set item = item|merge({'icon': to_ecl_icon(item.icon)}) %}
   {% endif %}
-  {# Add squared information to image. #}
+  {# Set square image if needed. #}
   {% if item.image %}
-    {% set _image = item.image|merge({'squared': squared}) %}
+    {% set _image = item.image|merge({'squared': square_image}) %}
     {% set item = item|merge({'image': _image}) %}
   {% endif %}
   {% set _items = _items|merge([item]) %}
diff --git a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
index c72ab360b..06894b6b0 100644
--- a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
@@ -343,7 +343,7 @@ public function testIllustrationListImagesRendering(): void {
     $expected_values = [
       'column' => 2,
       'zebra' => FALSE,
-      'squared' => FALSE,
+      'square_image' => FALSE,
       'items' => [
         [
           'title' => 'Term 1',
@@ -380,7 +380,7 @@ public function testIllustrationListImagesRendering(): void {
     $list_paragraph->set('field_oe_illustration_ratio', 'square')->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['column'] = 3;
-    $expected_values['squared'] = TRUE;
+    $expected_values['square_image'] = TRUE;
     $assert->assertPattern($expected_values, $html);
 
     // Assert vertical variant.
@@ -394,7 +394,7 @@ public function testIllustrationListImagesRendering(): void {
     $list_paragraph->set('field_oe_illustration_ratio', 'landscape')->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
-    $expected_values['squared'] = FALSE;
+    $expected_values['square_image'] = FALSE;
     $assert->assertPattern($expected_values, $html);
   }
 
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index a541d5ab2..7b0c465a7 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -3009,7 +3009,7 @@
     '#type': 'pattern'
     '#id': 'list_with_illustration'
     '#fields':
-      squared: false
+      square_image: false
       zebra: true
       column: 1
       items:
@@ -3043,7 +3043,7 @@
     '#type': 'pattern'
     '#id': 'list_with_illustration'
     '#fields':
-      squared: true
+      square_image: true
       zebra: true
       column: 1
       items:
@@ -3057,7 +3057,6 @@
           image:
             src: "https://placeimg.com/500/500/arch"
             alt: "Alternative text for featured item image 2"
-          icon: "budget"
   assertions:
     count:
       div.ecl-list-illustration: 1
@@ -3079,7 +3078,7 @@
     '#type': 'pattern'
     '#id': 'list_with_illustration'
     '#fields':
-      squared: false
+      square_image: false
       zebra: false
       column: 1
       items:
@@ -3107,7 +3106,7 @@
     '#type': 'pattern'
     '#id': 'list_with_illustration'
     '#fields':
-      squared: false
+      square_image: false
       zebra: false
       column: 2
       items:
@@ -3142,7 +3141,7 @@
     '#type': 'pattern'
     '#id': 'list_with_illustration'
     '#fields':
-      squared: true
+      square_image: true
       column: 3
       items:
         - title: "Business, Economy, Euro"
@@ -3175,7 +3174,7 @@
     '#type': 'pattern'
     '#id': 'list_with_illustration'
     '#fields':
-      squared: false
+      square_image: false
       column: 2
       items:
         - title: "Business, Economy, Euro"
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index a8d2f637d..d79709ce3 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -22,8 +22,8 @@ protected function getAssertions($variant): array {
       'zebra' => [
         [$this, 'assertZebra'],
       ],
-      'squared' => [
-        [$this, 'assertSquared'],
+      'square_image' => [
+        [$this, 'assertSquareImage'],
       ],
       'items' => [
         [$this, 'assertItems'],
@@ -72,13 +72,13 @@ protected function assertZebra(bool $zebra, Crawler $crawler): void {
   /**
    * Asserts if the list uses square images or not.
    *
-   * @param bool $squared
-   *   Whether the "squared" option is enabled or not.
+   * @param bool $square_image
+   *   Whether the "square_image" option is enabled or not.
    * @param \Symfony\Component\DomCrawler\Crawler $crawler
    *   The DomCrawler where to check the element.
    */
-  protected function assertSquared(bool $squared, Crawler $crawler): void {
-    if ($squared) {
+  protected function assertSquareImage(bool $square_image, Crawler $crawler): void {
+    if ($square_image) {
       // Few square images can exist.
       $element = $crawler->filter('.ecl-list-illustration__image--square');
       self::assertTrue((bool) $element->count());

From e83bcb3d6d98880e1bfb96b7cc3f2effc4dd7bdb Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Fri, 28 Jan 2022 11:08:37 +0300
Subject: [PATCH 14/19] EWPP-1864: Do not show zebra style for horizontal view
 even if zebra is enabled.

---
 .../pattern-list-with-illustration.html.twig                 | 5 +++++
 tests/src/Kernel/fixtures/rendering.yml                      | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

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
index ff5f4d843..bce0ad3e1 100644
--- a/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
+++ b/templates/patterns/list_with_illustration/pattern-list-with-illustration.html.twig
@@ -4,6 +4,11 @@
  * List with illustration.
  */
 #}
+{% if column > 1 %}
+  {# Do not show zebra style for horizontal view. #}
+  {% set zebra = false %}
+{% endif %}
+
 {% set _items = [] %}
 {% for item in items %}
   {# Transform icon into ecl array. #}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 7b0c465a7..ab08b0807 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -3107,7 +3107,7 @@
     '#id': 'list_with_illustration'
     '#fields':
       square_image: false
-      zebra: false
+      zebra: true
       column: 2
       items:
         - title: "Business, Economy, Euro"

From 4dd0d1e8cdcfae5e27d4326db212e1073d6796e6 Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Mon, 31 Jan 2022 19:31:01 +0300
Subject: [PATCH 15/19] EWPP-1864: Allow to use Media AV Portal Photo.

---
 composer.json                                 |  5 ++-
 .../oe_theme_helper/oe_theme_helper.module    |  2 +-
 oe_theme.theme                                | 23 ++++++++++---
 .../IllustrationListsParagraphsTest.php       | 32 +++++++++++++------
 4 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/composer.json b/composer.json
index 1a357a082..9fa444ca8 100644
--- a/composer.json
+++ b/composer.json
@@ -51,8 +51,8 @@
         "openeuropa/oe_corporate_countries": "~2.0",
         "openeuropa/oe_media": "~1.12",
         "openeuropa/oe_multilingual": "~1.8",
-        "openeuropa/oe_paragraphs": "dev-master",
-        "openeuropa/oe_search": "1.x-dev",
+        "openeuropa/oe_paragraphs": "dev-EWPP-1865",
+        "openeuropa/oe_search": "~1.8",
         "openeuropa/oe_webtools": "~1.12",
         "openeuropa/oe_contact_forms": "~1.1",
         "openeuropa/rdf_skos": "~1.0",
@@ -64,7 +64,6 @@
         "We explicitly require consolidation/robo to allow lower 'composer update --prefer-lowest' to complete successfully.",
         "We explicitly require consolidation/annotated-command to allow lower 'composer update --prefer-lowest' to complete successfully.",
         "We explicity require drupal/core to allow lower 'composer update --prefer-lowest' to complete successfully.",
-        "openeuropa/oe_search is used from a branch because of major upgrading is pending. Change again when it released.",
         "openeuropa/ecl-twig-loader is used from a branch because it must be upgrade to be D9 compatible. Change again when it released."
     ],
     "conflict": {
diff --git a/modules/oe_theme_helper/oe_theme_helper.module b/modules/oe_theme_helper/oe_theme_helper.module
index ff5e59cb2..04601a598 100644
--- a/modules/oe_theme_helper/oe_theme_helper.module
+++ b/modules/oe_theme_helper/oe_theme_helper.module
@@ -141,7 +141,7 @@ function oe_theme_helper_field_widget_oe_paragraphs_variants_form_alter(&$elemen
 function template_preprocess_oe_theme_helper_in_page_navigation(array &$variables) {
   $variables['title'] = $variables['element']['#title'];
   $variables['entity'] = $variables['element']['#entity'];
-  $variables['items'] = isset($variables['element']['#items']) ? $variables['element']['#items'] : [];
+  $variables['items'] = $variables['element']['#items'] ?? [];
 
   // Process in-page navigation items, assigning them a unique ID.
   foreach ($variables['items'] as $key => $item) {
diff --git a/oe_theme.theme b/oe_theme.theme
index 55f599ed5..68758d3ff 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1200,7 +1200,7 @@ function _oe_theme_preprocess_search_input_text(array $element): array {
   $ecl_array = [
     'id' => $element['#attributes']['id'],
     'name' => $element['#attributes']['name'],
-    'disabled' => isset($element['#attributes']['disabled']) ? $element['#attributes']['disabled'] : FALSE,
+    'disabled' => $element['#attributes']['disabled'] ?? FALSE,
     'type' => $element['#attributes']['type'],
     'class' => $element['#attributes']['class'],
   ];
@@ -1301,7 +1301,7 @@ function oe_theme_preprocess_table(array &$variables): void {
 
   // Assign data to table headers as ECL expects it.
   $ecl_table_header_data = [];
-  $variables['header'] = isset($variables['header']) ? $variables['header'] : [];
+  $variables['header'] = $variables['header'] ?? [];
   foreach ($variables['header'] as &$cell) {
     $cell['label'] = $cell['content'];
 
@@ -1325,7 +1325,7 @@ function oe_theme_preprocess_table(array &$variables): void {
     // Account for colspan values when counting the number of columns.
     // This ensures that header content is is displayed on related columns
     // when the table is displayed on small screen devices.
-    $columns_count = isset($cell['colspan']) ? $cell['colspan'] : 1;
+    $columns_count = $cell['colspan'] ?? 1;
     for ($i = 1; $i <= $columns_count; $i++) {
       $ecl_table_header_data[] = $cell_header_data;
     }
@@ -1833,11 +1833,24 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
     $image = [];
     $media = _oe_theme_prepare_media($sub_paragraph->get('field_oe_media')->entity, $variables['user'], $cacheability, $language_id);
     if ($media) {
+      $url = '';
       $source = $media->getSource();
-      if ($source instanceof Image && ($file_entity = $media->get('oe_media_image')->entity)) {
+      $field_name = $source->getConfiguration()['source_field'];
+      if ($source instanceof Image && ($file_entity = $media->get($field_name)->entity)) {
+        // Media Image.
         $cacheability->addCacheableDependency($file_entity);
+        $url = $file_entity->createFileUrl();
+      }
+      elseif ($source instanceof MediaAvPortalSourceInterface) {
+        // Media AV Portal Photo.
+        $resource_ref = $media->get($field_name)->value;
+        $url = file_create_url('avportal://' . $resource_ref . '.jpg');
+      }
+
+      if ($url) {
+        // Generate image object for the template.
         $values = [
-          'src' => $file_entity->createFileUrl(),
+          'src' => $url,
           'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? $media->label(),
         ];
         $image = ImageValueObject::fromArray($values);
diff --git a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
index 06894b6b0..4a8dba026 100644
--- a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
@@ -4,7 +4,6 @@
 
 namespace Drupal\Tests\oe_theme\Kernel\Paragraphs;
 
-use Drupal\media\Entity\Media;
 use Drupal\paragraphs\Entity\Paragraph;
 use Drupal\Tests\oe_theme\PatternAssertions\ListWithIllustrationAssert;
 use Symfony\Component\DomCrawler\Crawler;
@@ -23,6 +22,11 @@ class IllustrationListsParagraphsTest extends ParagraphsTestBase {
     'composite_reference',
     'media',
     'file_link',
+    'views',
+    'entity_browser',
+    'media_avportal',
+    'media_avportal_mock',
+    'oe_media_avportal',
     'oe_media',
     'options',
     'oe_paragraphs_media_field_storage',
@@ -45,7 +49,9 @@ protected function setUp(): void {
     $this->installConfig([
       'media',
       'options',
+      'media_avportal',
       'oe_media',
+      'oe_media_avportal',
       'oe_paragraphs_illustrations_lists',
     ]);
   }
@@ -279,7 +285,8 @@ public function testIllustrationListImagesRendering(): void {
     $file->setPermanent();
     $file->save();
 
-    $media = Media::create([
+    $media_storage = $this->container->get('entity_type.manager')->getStorage('media');
+    $media_image = $media_storage->create([
       'bundle' => 'image',
       'name' => 'test image',
       'oe_media_image' => [
@@ -287,7 +294,14 @@ public function testIllustrationListImagesRendering(): void {
         'alt' => 'Alt',
       ],
     ]);
-    $media->save();
+    $media_image->save();
+
+    $media_av_portal_photo = $media_storage->create([
+      'bundle' => 'av_portal_photo',
+      'oe_media_avportal_photo' => 'P-038924/00-15',
+      'uid' => 0,
+      'status' => 1,
+    ]);
 
     // Create Illustration list with images paragraph.
     $items = [];
@@ -295,7 +309,7 @@ public function testIllustrationListImagesRendering(): void {
       'type' => 'oe_illustration_item_image',
       'field_oe_title' => 'Term 1',
       'field_oe_text_long' => 'Description 1',
-      'field_oe_media' => [$media],
+      'field_oe_media' => [$media_image],
     ]);
     $paragraph->save();
     $items[] = $paragraph;
@@ -303,7 +317,7 @@ public function testIllustrationListImagesRendering(): void {
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
       'field_oe_title' => 'Term 2',
-      'field_oe_media' => [$media],
+      'field_oe_media' => [$media_av_portal_photo],
     ]);
     $paragraph->save();
     $items[] = $paragraph;
@@ -311,14 +325,14 @@ public function testIllustrationListImagesRendering(): void {
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
       'field_oe_text_long' => 'Description 3',
-      'field_oe_media' => [$media],
+      'field_oe_media' => [$media_image],
     ]);
     $paragraph->save();
     $items[] = $paragraph;
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
-      'field_oe_media' => [$media],
+      'field_oe_media' => [$media_image],
     ]);
     $paragraph->save();
     $items[] = $paragraph;
@@ -355,8 +369,8 @@ public function testIllustrationListImagesRendering(): void {
         ], [
           'title' => 'Term 2',
           'image' => [
-            'src' => 'example_1.jpeg',
-            'alt' => 'Alt',
+            'src' => file_create_url('avportal://P-038924/00-15.jpg'),
+            'alt' => 'Euro with miniature figurines',
           ],
         ], [
           'description' => 'Description 3',

From f5d3bd82fdb88eb8b9bc22a506e9abdc18e347a2 Mon Sep 17 00:00:00 2001
From: Evgenii Nikitin <yenyasinn@gmail.com>
Date: Thu, 24 Feb 2022 13:20:48 +0300
Subject: [PATCH 16/19] EWPP-1861: Add missing
 ecl/twig-component-list-illustration.

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index d575b347e..2e37054f9 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@ecl/twig-component-inpage-navigation": "3.2.3",
     "@ecl/twig-component-language-list": "3.2.3",
     "@ecl/twig-component-link": "3.2.3",
+    "@ecl/twig-component-list-illustration": "3.2.3",
     "@ecl/twig-component-label": "3.2.3",
     "@ecl/twig-component-media-container": "3.2.3",
     "@ecl/twig-component-menu": "3.2.3",

From 79d854899796d6343aa735f02130a92d5429c808 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Tue, 8 Feb 2022 23:30:02 +0200
Subject: [PATCH 17/19] EWPP-1849: Update test to reproduce issue.

---
 .../oe_theme_js_test.routing.yml              |   7 ++
 .../src/Controller/UiPatterns.php             | 101 ++++++++++++++++++
 .../JavascriptBehavioursTest.php              |  30 ++++++
 3 files changed, 138 insertions(+)
 create mode 100644 tests/modules/oe_theme_js_test/src/Controller/UiPatterns.php

diff --git a/tests/modules/oe_theme_js_test/oe_theme_js_test.routing.yml b/tests/modules/oe_theme_js_test/oe_theme_js_test.routing.yml
index 7e23d318d..7214e6b6f 100644
--- a/tests/modules/oe_theme_js_test/oe_theme_js_test.routing.yml
+++ b/tests/modules/oe_theme_js_test/oe_theme_js_test.routing.yml
@@ -19,3 +19,10 @@ oe_theme_js_test.datepicker_test_form:
     _title: 'DatePicker test form'
   requirements:
     _access: 'TRUE'
+oe_theme_js_test.contextual_navigation_ui_pattern:
+  path: '/oe_theme_js_test/ui_patterns/context_nav'
+  defaults:
+    _title: 'Contextual navigation page'
+    _controller: '\Drupal\oe_theme_js_test\Controller\UiPatterns::contextNav'
+  requirements:
+    _access: 'TRUE'
diff --git a/tests/modules/oe_theme_js_test/src/Controller/UiPatterns.php b/tests/modules/oe_theme_js_test/src/Controller/UiPatterns.php
new file mode 100644
index 000000000..1b594c611
--- /dev/null
+++ b/tests/modules/oe_theme_js_test/src/Controller/UiPatterns.php
@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\oe_theme_js_test\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\Render\Markup;
+
+/**
+ * Returns responses for UI Patterns test routes.
+ */
+class UiPatterns extends ControllerBase {
+
+  /**
+   * Generates a page with test Contextual navigation rendered pattern.
+   *
+   * @return array
+   *   The response render array.
+   */
+  public function contextNav(): array {
+    $build = [];
+    $build['context_nav_with_more_button'] = [
+      '#type' => 'pattern',
+      '#id' => 'context_nav',
+      '#fields' => [
+        'label' => $this->t('Contextual navigation with more button'),
+        'items' => [
+          [
+            'href' => 'http://link-1.com',
+            'label' => 'Item one',
+          ],
+          [
+            'href' => 'http://link-2.com',
+            'label' => 'Item two',
+          ],
+          [
+            'href' => 'http://link-3.com',
+            'label' => 'Item three',
+          ],
+          [
+            'href' => 'http://link-4.com',
+            'label' => 'Item four',
+          ],
+          [
+            'href' => 'http://link-5.com',
+            'label' => 'Item five',
+          ],
+        ],
+        'limit' => 4,
+        'more_label' => $this->t('More label'),
+      ],
+    ];
+
+    $build['context_nav_without_more_button'] = [
+      '#type' => 'pattern',
+      '#id' => 'context_nav',
+      '#fields' => [
+        'label' => $this->t('Navigation title'),
+        'items' => [
+          [
+            'href' => 'http://link-1.com',
+            'label' => 'Item one',
+          ],
+          [
+            'href' => 'http://link-2.com',
+            'label' => 'Item two',
+          ],
+          [
+            'href' => 'http://link-3.com',
+            'label' => 'Item three',
+          ],
+        ],
+        'limit' => 4,
+        'more_label' => $this->t('More label'),
+      ],
+    ];
+
+    $script = <<<EndOfScript
+window.onerror = function(error, url, line) {
+  if (typeof(window.collectedErrors) != 'object') {
+    window.collectedErrors = [];
+  }
+  window.collectedErrors.push({type:'error', data:'ERR:'+error+' URL:'+url+' L:'+line});
+}
+EndOfScript;
+
+    $build['#attached']['html_head'][] = [
+      [
+        '#tag' => 'script',
+        '#attributes' => [
+          'type' => 'text/javascript',
+        ],
+        '#value' => Markup::create($script),
+      ], 'js_errors_collector',
+    ];
+
+    return $build;
+  }
+
+}
diff --git a/tests/src/FunctionalJavascript/JavascriptBehavioursTest.php b/tests/src/FunctionalJavascript/JavascriptBehavioursTest.php
index 96ef3cea1..6e1e043e0 100644
--- a/tests/src/FunctionalJavascript/JavascriptBehavioursTest.php
+++ b/tests/src/FunctionalJavascript/JavascriptBehavioursTest.php
@@ -191,4 +191,34 @@ public function testEclDatePicker(): void {
     $this->assertSession()->pageTextContains('Date 1 is 10 May 2020');
   }
 
+  /**
+   * Tests that contextual navigation pattern is rendered properly.
+   */
+  public function testContextNavPattern(): void {
+    $this->drupalGet('/oe_theme_js_test/ui_patterns/context_nav');
+    $script = <<<EndOfScript
+(function(){
+if (typeof(window.collectedErrors) == 'undefined') {
+  return;
+}
+var result = '';
+window.collectedErrors.forEach(function(value) {
+   result += value.data + '[NLS]';
+});
+return result;
+})()
+EndOfScript;
+    $errors = $this->getSession()->evaluateScript($script);
+    if ($errors) {
+      throw new \RuntimeException('Javascript error: ' . str_replace('[NLS]', PHP_EOL, $errors));
+    }
+
+    $this->assertCount(2, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-list]'));
+    $this->assertCount(1, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-more]'));
+
+    $this->getSession()->getPage()->pressButton('More label');
+    $this->assertCount(0, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-more]'));
+    $this->assertCount(2, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-list]'));
+  }
+
 }

From a5660e29dea37ab74c178b770b51538cb416682e Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Wed, 9 Feb 2022 11:39:36 +0200
Subject: [PATCH 18/19] EWPP-1849: Fix javascript for contextual navigation
 pattern.

---
 .../context_nav/js/contextual_navigation.js   | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/templates/patterns/context_nav/js/contextual_navigation.js b/templates/patterns/context_nav/js/contextual_navigation.js
index 402fce636..85673849c 100644
--- a/templates/patterns/context_nav/js/contextual_navigation.js
+++ b/templates/patterns/context_nav/js/contextual_navigation.js
@@ -35,31 +35,37 @@
    * @namespace
    */
   Drupal.contextualNavigation = {
-
     // Selector for list navigation element.
     listSelector: '[data-ecl-contextual-navigation-list]',
     // Selector for more item element.
     moreItemSelector: '[data-ecl-contextual-navigation-more]',
-
+    // Selector for wrapper of more item element.
+    moreItemWrapperSelector: '.ecl-contextual-navigation__item--more',
 
     initialize: function (element) {
       var list = element.querySelector(this.listSelector);
       if (list) {
-        list
-          .querySelector(this.moreItemSelector)
-          .addEventListener('click', this.handleClickOnMore);
+        var moreItem = list.querySelector(this.moreItemSelector);
+        if (moreItem) {
+          moreItem.addEventListener('click', this.handleClickOnMore);
+          moreItem.list = list;
+          moreItem.wrapper = list.querySelector(this.moreItemWrapperSelector);
+        }
       }
     },
     handleClickOnMore: function () {
-      if (this.parentNode && this.parentNode.parentNode) {
-        this.parentNode.parentNode.setAttribute('aria-expanded', 'true');
-        this.parentNode.parentNode.removeChild(this.parentNode);
+      if (this.list) {
+        this.list.setAttribute('aria-expanded', 'true');
+        if (this.wrapper) {
+          this.wrapper.parentNode.removeChild(this.wrapper);
+        }
       }
     },
     destroy: function (element) {
-      element
-        .querySelector(this.moreItemSelector)
-        .removeEventListener('click', this.handleClickOnMore);
+      var moreItem = element.querySelector(this.moreItemSelector);
+      if (moreItem) {
+        moreItem.removeEventListener('click', this.handleClickOnMore);
+      }
     }
   }
 })(Drupal);

From 8b9bce3ead6c85b2bf176c876ebc21481b2e0407 Mon Sep 17 00:00:00 2001
From: 22Alexandra <beldean.ale@gmail.com>
Date: Tue, 1 Mar 2022 14:28:31 +0200
Subject: [PATCH 19/19] EWPP-1539: Fix dependencies.

---
 composer.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/composer.json b/composer.json
index 652933196..7989fbb66 100644
--- a/composer.json
+++ b/composer.json
@@ -18,6 +18,7 @@
         "behat/behat": "^3.10",
         "behat/mink-extension": "^2.3.1",
         "composer/installers": "~1.5",
+        "composer/xdebug-handler": "^2.0",
         "cweagans/composer-patches": "^1.7",
         "drupal/address": "~1.9",
         "drupal/composite_reference": "^2.1",
@@ -112,7 +113,8 @@
             "Explicit minimum version requirement of drupal/ctools module due to D9.2 compatability.",
             "Explicit minimum version requirement of behat library due to PHP compatibility.",
             "Explicit requirement for egulias/email-validator due to https://www.drupal.org/project/drupal/issues/3061074#comment-14300579. It can be removed when Drupal core 9.2 support is droppped.",
-            "Explicit minimum version requirement for symfony/dom-crawler due to its lower versions using the deprecated function libxml_disable_entity_loader() in PHP8."
+            "Explicit minimum version requirement for symfony/dom-crawler due to its lower versions using the deprecated function libxml_disable_entity_loader() in PHP8.",
+            "Requiring composer/xdebug-handler until PHPMD 2.12 is released"
         ]
     },
     "config": {