EWPP-3321: Update List with illustrations pattern and paragraphs rend…

…ering.
openeuropa · Jun 21, 2023 · 065e788 · 065e788
1 parent fe03d50
commit 065e788
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
   }