From 065e7889d5263ecd513dea5527c44dc3460186c9 Mon Sep 17 00:00:00 2001
From: 22Alexandra <beldean.ale@gmail.com>
Date: Thu, 1 Jun 2023 19:11:52 +0300
Subject: [PATCH] EWPP-3321: Update List with illustrations pattern and
 paragraphs rendering.

---
 composer.json                                 |  2 +-
 oe_theme.theme                                | 24 +++++++
 ...raph--oe-illustration-list-flags.html.twig |  1 +
 ...raph--oe-illustration-list-icons.html.twig |  1 +
 ...aph--oe-illustration-list-images.html.twig |  3 +-
 .../list_with_illustration.ui_patterns.yml    | 13 +++-
 .../pattern-list-with-illustration.html.twig  |  1 +
 .../IllustrationListsParagraphsTest.php       | 72 ++++++++++++++++++-
 tests/src/Kernel/fixtures/rendering.yml       | 18 ++++-
 .../ListWithIllustrationAssert.php            | 26 +++++++
 10 files changed, 153 insertions(+), 8 deletions(-)

diff --git a/composer.json b/composer.json
index 705fd666fc..cf732cf8a9 100644
--- a/composer.json
+++ b/composer.json
@@ -50,7 +50,7 @@
         "openeuropa/oe_corporate_countries": "^2.0.0-alpha8",
         "openeuropa/oe_media": "^1.23.1",
         "openeuropa/oe_multilingual": "^1.13",
-        "openeuropa/oe_paragraphs": "dev-master",
+        "openeuropa/oe_paragraphs": "dev-EWPP-3320",
         "openeuropa/oe_search": "^2.0@beta",
         "openeuropa/oe_webtools": "^1.23",
         "openeuropa/rdf_skos": "^1.0.0-alpha10",
diff --git a/oe_theme.theme b/oe_theme.theme
index 69190ec613..559d2fcf57 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -1858,6 +1858,10 @@ function _oe_theme_preprocess_paragraph_oe_illustration_list(array &$variables):
   // Set the column value based on the selected variant.
   $variant_value = $paragraph->get('oe_paragraphs_variant')->first()->value;
   $variables['column'] = $variant_value === 'oe_illustration_vertical' ? 1 : $paragraph->get('field_oe_illustration_columns')->value;
+
+  if ($paragraph->hasField('field_oe_center') && !$paragraph->get('field_oe_center')->isEmpty()) {
+    $variables['centered'] = $paragraph->get('field_oe_center')->value;
+  }
 }
 
 /**
@@ -1910,10 +1914,14 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_flags(array &$varia
       ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
     $icon = $sub_paragraph->get('field_oe_flag')->value;
     $icon .= $ratio === 'square' ? '-square' : '';
+    if ($sub_paragraph->hasField('field_oe_subtitle') && !$sub_paragraph->get('field_oe_subtitle')->isEmpty()) {
+      $highlight = $sub_paragraph->get('field_oe_subtitle')->value;
+    }
     $variables['items'][] = [
       '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,
+      'value' => $highlight ?? '',
     ];
   }
 }
@@ -1926,16 +1934,24 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_icons(array &$varia
   $variables['items'] = [];
 
   $paragraph = $variables['paragraph'];
+  if ($paragraph->hasField('field_oe_size') && !$paragraph->get('field_oe_size')->isEmpty()) {
+    $size = substr($paragraph->get('field_oe_size')->value, 0, 1);
+  }
   $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());
+    if ($sub_paragraph->hasField('field_oe_subtitle') && !$sub_paragraph->get('field_oe_subtitle')->isEmpty()) {
+      $highlight = $sub_paragraph->get('field_oe_subtitle')->value;
+    }
     $variables['items'][] = [
       '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,
+      'media_size' => $size ?? 'm',
+      'value' => $highlight ?? '',
     ];
   }
 }
@@ -1949,6 +1965,9 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
   $paragraph = $variables['paragraph'];
   $variables['items'] = [];
 
+  if ($paragraph->hasField('field_oe_size') && !$paragraph->get('field_oe_size')->isEmpty()) {
+    $size = substr($paragraph->get('field_oe_size')->value, 0, 1);
+  }
   $entity_repository = \Drupal::service('entity.repository');
   $cacheability = CacheableMetadata::createFromRenderArray($variables);
   $builder = \Drupal::entityTypeManager()->getViewBuilder('paragraph');
@@ -1984,10 +2003,15 @@ function oe_theme_preprocess_paragraph__oe_illustration_list_images(array &$vari
         $image = ImageValueObject::fromArray($values);
       }
     }
+    if ($sub_paragraph->hasField('field_oe_subtitle') && !$sub_paragraph->get('field_oe_subtitle')->isEmpty()) {
+      $highlight = $sub_paragraph->get('field_oe_subtitle')->value;
+    }
     $variables['items'][] = [
       '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,
+      'media_size' => $size ?? 'm',
+      'value' => $highlight ?? '',
     ];
   }
 
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
index e0a4e0f7c6..418680e70c 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-flags.html.twig
@@ -16,4 +16,5 @@
   'column': column,
   'zebra': zebra,
   'items': items,
+  'centered': centered ?? false,
 }) }}
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
index ce73a23b57..f2074d9036 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-icons.html.twig
@@ -16,4 +16,5 @@
   'column': column,
   'zebra': zebra,
   'items': items,
+  'centered': centered ?? false,
 }) }}
diff --git a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
index a2ec7ef97d..433d01bac2 100644
--- a/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
+++ b/templates/paragraphs/paragraph--oe-illustration-list-images.html.twig
@@ -16,5 +16,6 @@
   'column': column,
   'zebra': zebra,
   'items': items,
-  'square_image': square_image
+  'square_image': square_image,
+  'centered': centered ?? false,
 }) }}
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 094d785f5d..656a318769 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
@@ -6,7 +6,7 @@ list_with_illustration:
       type: "numeric"
       label: "Column number"
       description: "Number of columns. Maximum of 4 columns."
-      preview: 1
+      preview: 2
       escape: false
     zebra:
       type: "boolean"
@@ -18,6 +18,12 @@ list_with_illustration:
       label: "Square image"
       description: "Whether the rendered image should be rendered in square or landscape mode (only applies to image)."
       preview: true
+    centered:
+      type: "boolean"
+      label: "Centered"
+      description: "Define if the items should be centered."
+      preview: true
+      escape: false
     items:
       type: "array"
       label: "Items"
@@ -29,10 +35,13 @@ list_with_illustration:
             src: "https://placeimg.com/1000/500/arch"
             alt: "Alternative text for featured item image"
           icon: "italy"
+          value: "3.2 millions"
+          media_size: "s"
         - 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"
-
+          value: "3.2 millions"
+          media_size: "m"
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 4d8005b1ce..fd613524b6 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
@@ -30,4 +30,5 @@
   'column': column,
   'zebra': zebra,
   'items': _items,
+  'centered': centered ?? false,
 } only %}
diff --git a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
index 9d77826ed8..f319837118 100644
--- a/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/IllustrationListsParagraphsTest.php
@@ -75,6 +75,7 @@ public function testIllustrationListFlagsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_flag',
+      'field_oe_subtitle' => 'Highlighted Term 2',
       'field_oe_title' => 'Term 2',
       'field_oe_text_long' => '',
       'field_oe_flag' => 'belgium',
@@ -84,6 +85,7 @@ public function testIllustrationListFlagsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_flag',
+      'field_oe_subtitle' => 'Highlighted Term 3',
       'field_oe_title' => '',
       'field_oe_text_long' => 'Description 3',
       'field_oe_flag' => 'france',
@@ -107,6 +109,7 @@ public function testIllustrationListFlagsRendering(): void {
       'field_oe_paragraphs' => $items,
       'field_oe_illustration_columns' => 2,
       'field_oe_illustration_ratio' => 'landscape',
+      'field_oe_center' => FALSE,
     ]);
     $html = $this->renderParagraph($list_paragraph);
 
@@ -130,13 +133,16 @@ public function testIllustrationListFlagsRendering(): void {
         ], [
           'title' => 'Term 2',
           'icon' => 'belgium',
+          'value' => 'Highlighted Term 2',
         ], [
           'description' => 'Description 3',
           'icon' => 'france',
+          'value' => 'Highlighted Term 3',
         ], [
           'icon' => 'finland',
         ],
       ],
+      'centered' => FALSE,
     ];
     $assert = new ListWithIllustrationAssert();
     $assert->assertPattern($expected_values, $html);
@@ -175,10 +181,12 @@ public function testIllustrationListFlagsRendering(): void {
     unset($expected_values['column']);
     $assert->assertPattern($expected_values, $html);
 
-    // Assert vertical variant with zebra.
+    // Assert vertical variant with zebra and centered.
+    $list_paragraph->set('field_oe_center', TRUE);
     $list_paragraph->set('field_oe_illustration_alternate', TRUE)->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
+    $expected_values['centered'] = TRUE;
     $assert->assertPattern($expected_values, $html);
   }
 
@@ -190,6 +198,7 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
+      'field_oe_subtitle' => 'Highlighted Term 1',
       'field_oe_title' => 'Term 1',
       'field_oe_text_long' => 'Description 1',
       'field_oe_icon' => 'data',
@@ -199,6 +208,7 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
+      'field_oe_subtitle' => 'Highlighted Term 2',
       'field_oe_title' => 'Term 2',
       'field_oe_icon' => 'facebook',
     ]);
@@ -207,6 +217,7 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
+      'field_oe_subtitle' => 'Highlighted Term 3',
       'field_oe_text_long' => 'Description 3',
       'field_oe_icon' => 'global',
     ]);
@@ -215,6 +226,7 @@ public function testIllustrationListIconsRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_icon',
+      'field_oe_subtitle' => 'Highlighted Term 4',
       'field_oe_icon' => 'package',
     ]);
     $paragraph->save();
@@ -226,6 +238,8 @@ public function testIllustrationListIconsRendering(): void {
       'field_oe_title' => 'Illustration with icons test',
       'field_oe_paragraphs' => $items,
       'field_oe_illustration_columns' => 2,
+      'field_oe_size' => 'small',
+      'field_oe_center' => FALSE,
     ]);
     $html = $this->renderParagraph($list_paragraph);
 
@@ -244,16 +258,25 @@ public function testIllustrationListIconsRendering(): void {
           'title' => 'Term 1',
           'description' => 'Description 1',
           'icon' => 'data',
+          'value' => 'Highlighted Term 1',
+          'media_size' => 'l',
         ], [
           'title' => 'Term 2',
           'icon' => 'facebook',
+          'value' => 'Highlighted Term 2',
+          'media_size' => 'l',
         ], [
           'description' => 'Description 3',
           'icon' => 'global',
+          'value' => 'Highlighted Term 3',
+          'media_size' => 'l',
         ], [
           'icon' => 'package',
+          'value' => 'Highlighted Term 4',
+          'media_size' => 'l',
         ],
       ],
+      'centered' => FALSE,
     ];
     $assert = new ListWithIllustrationAssert();
     $assert->assertPattern($expected_values, $html);
@@ -270,10 +293,18 @@ public function testIllustrationListIconsRendering(): void {
     unset($expected_values['column']);
     $assert->assertPattern($expected_values, $html);
 
-    // Assert vertical variant with zebra.
-    $list_paragraph->set('field_oe_illustration_alternate', TRUE)->save();
+    // Assert vertical variant with zebra and centered.
+    $list_paragraph->set('field_oe_illustration_alternate', TRUE);
+    $list_paragraph->set('field_oe_center', TRUE);
+    // Update the icon size to Large.
+    $list_paragraph->set('field_oe_size', 'large')->save();
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
+    $expected_values['centered'] = TRUE;
+    $expected_values['items'][0]['media_size'] = '2xl';
+    $expected_values['items'][1]['media_size'] = '2xl';
+    $expected_values['items'][2]['media_size'] = '2xl';
+    $expected_values['items'][3]['media_size'] = '2xl';
     $assert->assertPattern($expected_values, $html);
   }
 
@@ -308,6 +339,7 @@ public function testIllustrationListImagesRendering(): void {
     $items = [];
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
+      'field_oe_subtitle' => 'Highlighted Term 1',
       'field_oe_title' => 'Term 1',
       'field_oe_text_long' => 'Description 1',
       'field_oe_media' => [$media_image],
@@ -317,6 +349,7 @@ public function testIllustrationListImagesRendering(): void {
 
     $paragraph = Paragraph::create([
       'type' => 'oe_illustration_item_image',
+      'field_oe_subtitle' => 'Highlighted Term 1',
       'field_oe_title' => 'Term 2',
       'field_oe_media' => [$media_av_portal_photo],
     ]);
@@ -345,6 +378,9 @@ public function testIllustrationListImagesRendering(): void {
       'field_oe_paragraphs' => $items,
       'field_oe_illustration_columns' => 2,
       'field_oe_illustration_ratio' => 'landscape',
+      // Size value will take action only for "Square" ratio.
+      'field_oe_size' => 'small',
+      'field_oe_center' => FALSE,
     ]);
     $html = $this->renderParagraph($list_paragraph);
 
@@ -367,12 +403,14 @@ public function testIllustrationListImagesRendering(): void {
             'src' => 'example_1.jpeg',
             'alt' => 'Alt',
           ],
+          'value' => 'Highlighted Term 1',
         ], [
           'title' => 'Term 2',
           'image' => [
             'src' => $this->container->get('file_url_generator')->generateAbsoluteString('avportal://P-038924/00-15.jpg'),
             'alt' => 'Euro with miniature figurines',
           ],
+          'value' => 'Highlighted Term 2',
         ], [
           'description' => 'Description 3',
           'image' => [
@@ -384,8 +422,10 @@ public function testIllustrationListImagesRendering(): void {
             'src' => 'example_1.jpeg',
             'alt' => 'Alt',
           ],
+          'value' => 'Highlighted Illustration list with images',
         ],
       ],
+      'centered' => FALSE,
     ];
     $assert = new ListWithIllustrationAssert();
     $assert->assertPattern($expected_values, $html);
@@ -396,6 +436,28 @@ public function testIllustrationListImagesRendering(): void {
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['column'] = 3;
     $expected_values['square_image'] = TRUE;
+    $expected_values['items'][0]['media_size'] = 's';
+    $expected_values['items'][1]['media_size'] = 's';
+    $expected_values['items'][2]['media_size'] = 's';
+    $expected_values['items'][3]['media_size'] = 's';
+    $assert->assertPattern($expected_values, $html);
+
+    // Assert centered with medium and large size.
+    $list_paragraph->set('field_oe_center', TRUE);
+    $list_paragraph->set('field_oe_size', 'medium')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values['centered'] = TRUE;
+    $expected_values['items'][0]['media_size'] = 'm';
+    $expected_values['items'][1]['media_size'] = 'm';
+    $expected_values['items'][2]['media_size'] = 'm';
+    $expected_values['items'][3]['media_size'] = 'm';
+    $assert->assertPattern($expected_values, $html);
+    $list_paragraph->set('field_oe_size', 'large')->save();
+    $html = $this->renderParagraph($list_paragraph);
+    $expected_values['items'][0]['media_size'] = 'l';
+    $expected_values['items'][1]['media_size'] = 'l';
+    $expected_values['items'][2]['media_size'] = 'l';
+    $expected_values['items'][3]['media_size'] = 'l';
     $assert->assertPattern($expected_values, $html);
 
     // Assert vertical variant.
@@ -410,6 +472,10 @@ public function testIllustrationListImagesRendering(): void {
     $html = $this->renderParagraph($list_paragraph);
     $expected_values['zebra'] = TRUE;
     $expected_values['square_image'] = FALSE;
+    $expected_values['items'][0]['media_size'] = NULL;
+    $expected_values['items'][1]['media_size'] = NULL;
+    $expected_values['items'][2]['media_size'] = NULL;
+    $expected_values['items'][3]['media_size'] = NULL;
     $assert->assertPattern($expected_values, $html);
   }
 
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 847b543299..0752da5fc3 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -3365,10 +3365,13 @@
   assertions:
     count:
       div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--centered: 0
       div.ecl-list-illustration.ecl-list-illustration--zebra: 1
       div.ecl-list-illustration__item: 2
+      div.ecl-list-illustration__value: 0
       img.ecl-list-illustration__image: 2
       img.ecl-list-illustration__image.ecl-list-illustration__image--square: 0
+      img.ecl-list-illustration__image.ecl-list-illustration__image--square.ecl-list-illustration__image--m: 0
       img.ecl-list-illustration__image[alt="Alternative text for featured item image 1"]: 1
       img.ecl-list-illustration__image[src="https://placeimg.com/1000/500/arch"]: 1
       img.ecl-list-illustration__image[alt="Alternative text for featured item image 2"]: 1
@@ -3385,24 +3388,29 @@
       square_image: true
       zebra: true
       column: 1
+      centered: 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"
+          media_size: 'l'
         - 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"
+          value: 'Highlighted image'
+          media_size: 'l'
   assertions:
     count:
       div.ecl-list-illustration: 1
       div.ecl-list-illustration.ecl-list-illustration--zebra: 1
       div.ecl-list-illustration__item: 2
       img.ecl-list-illustration__image: 2
-      img.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+      div.ecl-list-illustration__value: 1
+      img.ecl-list-illustration__image.ecl-list-illustration__image--square.ecl-list-illustration__image--l: 2
       img.ecl-list-illustration__image[alt="Alternative text for featured item image 1"]: 1
       img.ecl-list-illustration__image[src="https://placeimg.com/1000/500/arch"]: 1
       img.ecl-list-illustration__image[alt="Alternative text for featured item image 2"]: 1
@@ -3411,6 +3419,7 @@
     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__value': 'Highlighted image'
       '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:
@@ -3430,6 +3439,7 @@
   assertions:
     count:
       div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--centered: 0
       div.ecl-list-illustration.ecl-list-illustration--zebra: 0
       div.ecl-list-illustration__item: 2
       img.ecl-list-illustration__image: 0
@@ -3462,6 +3472,7 @@
   assertions:
     count:
       div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--centered: 0
       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
@@ -3482,24 +3493,29 @@
     '#fields':
       square_image: true
       column: 3
+      centered: 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"
+          media_size: 's'
         - 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"
+          media_size: 's'
   assertions:
     count:
       div.ecl-list-illustration: 1
+      div.ecl-list-illustration.ecl-list-illustration--centered: 1
       div.ecl-list-illustration.ecl-list-illustration--col-3: 1
       div.ecl-list-illustration__item: 2
       img.ecl-list-illustration__image: 2
       img.ecl-list-illustration__image.ecl-list-illustration__image--square: 2
+      img.ecl-list-illustration__image.ecl-list-illustration__image--square.ecl-list-illustration__image--s: 2
       img.ecl-list-illustration__image[alt="Alternative text for featured item image 1"]: 1
       img.ecl-list-illustration__image[src="https://placeimg.com/1000/500/arch"]: 1
       img.ecl-list-illustration__image[alt="Alternative text for featured item image 2"]: 1
diff --git a/tests/src/PatternAssertions/ListWithIllustrationAssert.php b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
index 03c06e546c..ecffc80a5d 100644
--- a/tests/src/PatternAssertions/ListWithIllustrationAssert.php
+++ b/tests/src/PatternAssertions/ListWithIllustrationAssert.php
@@ -28,6 +28,9 @@ protected function getAssertions($variant): array {
       'items' => [
         [$this, 'assertItems'],
       ],
+      'centered' => [
+        [$this, 'assertCentered'],
+      ],
     ];
   }
 
@@ -118,12 +121,35 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
         $image_element = $item_element->filter('.ecl-list-illustration__image');
         self::assertEquals($expected_item['image']['alt'], $image_element->attr('alt'));
         self::assertStringContainsString($expected_item['image']['src'], $image_element->attr('src'));
+        if (isset($expected_item['media_size'])) {
+          self::assertCount(count($expected_items), $crawler->filter('.ecl-list-illustration__image--' . $expected_item['media_size']));
+        }
       }
       if (isset($expected_item['icon'])) {
         $icon_element = $item_element->filter('svg.ecl-icon use');
         $this::assertStringContainsString('#' . $expected_item['icon'], $icon_element->attr('xlink:href'));
+        if (isset($expected_item['media_size'])) {
+          self::assertCount(count($expected_items), $crawler->filter('.ecl-icon--' . $expected_item['media_size']));
+        }
       }
     }
   }
 
+  /**
+   * Asserts if the list is centered or not.
+   *
+   * @param bool $centered
+   *   Whether the list is centered or not.
+   * @param \Symfony\Component\DomCrawler\Crawler $crawler
+   *   The DomCrawler where to check the element.
+   */
+  protected function assertCentered(bool $centered, Crawler $crawler): void {
+    if ($centered) {
+      self::assertElementExists('.ecl-list-illustration--centered', $crawler);
+    }
+    else {
+      self::assertElementNotExists('.ecl-list-illustration--centered', $crawler);
+    }
+  }
+
 }