From ba4b34455b584befb28302989f728ac8cdad52e7 Mon Sep 17 00:00:00 2001
From: 22Alexandra <beldean.ale@gmail.com>
Date: Wed, 20 Dec 2023 18:01:20 +0200
Subject: [PATCH] EWPP-3802: Add carousel variants.

---
 ....paragraph.oe_carousel.oe_banner_image.yml | 47 ++++++++++++++
 ...raph.oe_carousel.oe_banner_image_shade.yml | 47 ++++++++++++++
 ...aragraph.oe_carousel.oe_banner_primary.yml | 47 ++++++++++++++
 ...h.oe_carousel.oe_banner_text_highlight.yml | 47 ++++++++++++++
 .../oe_theme_paragraphs_carousel.info.yml     |  9 +++
 .../oe_theme_paragraphs_carousel.install      | 39 ++++++++++++
 .../oe_theme_paragraphs_carousel.module       | 46 ++++++++++++++
 oe_theme.theme                                | 61 ++++++++++++-------
 runner.yml.dist                               |  1 +
 .../carousel/pattern-carousel.html.twig       |  2 +-
 .../Kernel/Paragraphs/MediaParagraphsTest.php | 23 +++++++
 tests/src/Kernel/fixtures/rendering.yml       |  8 +--
 .../src/PatternAssertions/CarouselAssert.php  |  7 ++-
 13 files changed, 355 insertions(+), 29 deletions(-)
 create mode 100644 modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image.yml
 create mode 100644 modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image_shade.yml
 create mode 100644 modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_primary.yml
 create mode 100644 modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_text_highlight.yml
 create mode 100644 modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.info.yml
 create mode 100644 modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.install
 create mode 100644 modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.module

diff --git a/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image.yml b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image.yml
new file mode 100644
index 000000000..ef17a9a9e
--- /dev/null
+++ b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image.yml
@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_image
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_image
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_image
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true
diff --git a/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image_shade.yml b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image_shade.yml
new file mode 100644
index 000000000..7ab117faf
--- /dev/null
+++ b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image_shade.yml
@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_image_shade
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_image_shade
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_image_shade
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true
diff --git a/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_primary.yml b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_primary.yml
new file mode 100644
index 000000000..496e80e1e
--- /dev/null
+++ b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_primary.yml
@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_primary
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_primary
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_primary
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true
diff --git a/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_text_highlight.yml b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_text_highlight.yml
new file mode 100644
index 000000000..a002dca2f
--- /dev/null
+++ b/modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_text_highlight.yml
@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_text_highlight
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_text_highlight
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_text_highlight
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true
diff --git a/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.info.yml b/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.info.yml
new file mode 100644
index 000000000..acbb94b07
--- /dev/null
+++ b/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.info.yml
@@ -0,0 +1,9 @@
+name: OpenEuropa Theme Paragraphs Carousel
+type: module
+description: Companion module for the OE Paragraphs Carousel module
+package: OpenEuropa
+core_version_requirement: ^10
+dependencies:
+  - oe_paragraphs:oe_paragraphs_banner
+  - oe_paragraphs:oe_paragraphs_carousel
+  - oe_theme:oe_theme_paragraphs_banner
diff --git a/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.install b/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.install
new file mode 100644
index 000000000..4fe893083
--- /dev/null
+++ b/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.install
@@ -0,0 +1,39 @@
+<?php
+
+/**
+ * @file
+ * Install hooks for OpenEuropa Theme Paragraphs Carousel module.
+ */
+
+declare(strict_types = 1);
+
+use Drupal\Core\Entity\Entity\EntityFormDisplay;
+use Drupal\Core\Entity\Entity\EntityFormMode;
+
+/**
+ * Implements hook_install().
+ *
+ * Updates the form modes labels.
+ */
+function oe_theme_paragraphs_carousel_install($is_syncing) {
+  // If we are installing from config, we bail out.
+  if ($is_syncing) {
+    return;
+  }
+  $form_modes_labels = [
+    'paragraph.oe_banner_primary' => 'Plain background',
+    'paragraph.oe_banner_image' => 'Text box',
+    'paragraph.oe_banner_image_shade' => 'Image overlay',
+    'paragraph.oe_banner_text_highlight' => 'Text highlight',
+  ];
+  foreach ($form_modes_labels as $id => $label) {
+    $form_mode = EntityFormMode::load($id);
+    $form_mode->set('label', $label);
+    $form_mode->save();
+  }
+  // Change the field widget for the carousel items field.
+  EntityFormDisplay::load('paragraph.oe_carousel.default')
+    ->setComponent('field_oe_carousel_items', [
+      'type' => 'oe_paragraphs_variants',
+    ])->save();
+}
diff --git a/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.module b/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.module
new file mode 100644
index 000000000..580439629
--- /dev/null
+++ b/modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.module
@@ -0,0 +1,46 @@
+<?php
+
+/**
+ * @file
+ * The OE Theme Paragraphs Carousel module.
+ */
+
+declare(strict_types = 1);
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Render\Element;
+
+/**
+ * Implements hook_field_widget_complete_WIDGET_TYPE_form_alter().
+ */
+function oe_theme_paragraphs_carousel_field_widget_complete_oe_paragraphs_variants_form_alter(&$field_widget_complete_form, FormStateInterface $form_state, $context) {
+  $elements = &$field_widget_complete_form['widget'];
+  $variants_without_image = [
+    'oe_banner_primary',
+    'default',
+  ];
+  foreach (Element::children($elements) as $key) {
+    if (!isset($elements[$key]['#paragraph_type']) || !$elements[$key]['#paragraph_type'] === 'oe_carousel') {
+      continue;
+    }
+    if (!isset($elements[$key]['variant']) || !array_key_exists('oe_banner_primary', $elements[$key]['variant']['#options'])) {
+      continue;
+    }
+    if (!in_array($elements[$key]['variant']['#default_value'], $variants_without_image)) {
+      continue;
+    }
+    if (!isset($elements[$key]['subform']['field_oe_carousel_items']['widget'])) {
+      continue;
+    }
+    // Hide the media field of Carousel item paragraph for variants without
+    // image.
+    $subparagraphs = &$elements[$key]['subform']['field_oe_carousel_items']['widget'];
+    foreach (Element::children($subparagraphs) as $index) {
+      if (!isset($subparagraphs[$index]['#paragraph_type']) || !$subparagraphs[$index]['#paragraph_type'] === 'oe_carousel_item') {
+        continue;
+      }
+      $subparagraphs[$index]['subform']['field_oe_media']['widget'][0]['target_id']['#default_value'] = FALSE;
+      $subparagraphs[$index]['subform']['field_oe_media']['#access'] = FALSE;
+    }
+  }
+}
diff --git a/oe_theme.theme b/oe_theme.theme
index c75000208..8d003f62c 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -2168,6 +2168,19 @@ function oe_theme_preprocess_field__entity_reference_revisions__oe_event_speaker
 function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = $variables['paragraph'];
+  // Map the deprecated variants from oe_paragraphs to Banner pattern variants.
+  $deprecated_paragraph_variants_mapping = [
+    'default' => 'plain_background',
+    'primary' => 'plain_background',
+    'image' => 'text_box',
+    'image_shade' => 'image_overlay',
+  ];
+  // If the paragraph has a value set for the variant field, we retrieve it,
+  // otherwise keep text_highlight as default variant like before.
+  $variant = $paragraph->get('oe_paragraphs_variant')->first()->value ?? 'text_highlight';
+  $variant = str_replace('oe_banner_', '', $variant);
+  $variant = $deprecated_paragraph_variants_mapping[$variant] ?? $variant;
+  $variant = str_replace('_', '-', $variant);
   $variables['items'] = [];
   $cacheability = CacheableMetadata::createFromRenderArray($variables);
 
@@ -2176,6 +2189,29 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
     // Get sub-paragraph translation.
     $sub_paragraph = \Drupal::service('entity.repository')
       ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
+    // Add CTA, Title and description if available.
+    $link = '';
+    $link_text = '';
+    if (!$sub_paragraph->get('field_oe_link')->isEmpty()) {
+      /** @var \Drupal\link\Plugin\Field\FieldType\LinkItem $link_item */
+      $link_item = $sub_paragraph->get('field_oe_link')->first();
+      $link = Url::fromUri($link_item->get('uri')->getValue())->toString();
+      $link_text = $link_item->get('title')->getValue();
+    }
+    $item = [
+      'title' => $sub_paragraph->get('field_oe_title')->value,
+      'description' => !$sub_paragraph->get('field_oe_text')->isEmpty() ? $sub_paragraph->get('field_oe_text')->value : '',
+      'url' => $link ?? '',
+      'url_text' => $link_text ?? '',
+      'centered' => FALSE,
+      'variant' => $variant,
+    ];
+    if ($variant === 'plain-background') {
+      // If variant the doesn't have an image, skip to the next item.
+      $variables['items'][] = $item;
+      $cacheability->applyTo($variables);
+      continue;
+    }
     /** @var \Drupal\media\Entity\Media $media */
     $media = $sub_paragraph->get('field_oe_media')->entity;
     if (!$media instanceof MediaInterface) {
@@ -2217,28 +2253,9 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
       continue;
     }
     $style = \Drupal::entityTypeManager()->getStorage('image_style')->load('oe_theme_full_width');
-    $image_url = $style->buildUrl($uri);
-
-    $link = '';
-    $link_text = '';
-    if (!$sub_paragraph->get('field_oe_link')->isEmpty()) {
-      /** @var \Drupal\link\Plugin\Field\FieldType\LinkItem $link_item */
-      $link_item = $sub_paragraph->get('field_oe_link')->first();
-      $link = Url::fromUri($link_item->get('uri')->getValue())->toString();
-      $link_text = $link_item->get('title')->getValue();
-    }
-    $variables['items'][] = [
-      'title' => $sub_paragraph->get('field_oe_title')->value,
-      'description' => !$sub_paragraph->get('field_oe_text')->isEmpty() ? $sub_paragraph->get('field_oe_text')->value : '',
-      'url' => $link ?? '',
-      'url_text' => $link_text ?? '',
-      'image' => $image_url,
-      'image_alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? '',
-      'centered' => FALSE,
-      // The paragraph has a required image field, so we need to set a default
-      // image variant in order to render the image.
-      'variant' => 'text-highlight',
-    ];
+    $item['image'] = $style->buildUrl($uri);
+    $item['image_alt'] = $source->getMetadata($media, 'thumbnail_alt_value') ?? '';
+    $variables['items'][] = $item;
     $cacheability->applyTo($variables);
   }
   if ($paragraph->hasField('field_oe_carousel_size') && !$paragraph->get('field_oe_carousel_size')->isEmpty()) {
diff --git a/runner.yml.dist b/runner.yml.dist
index 3b031ec0b..95a9956d7 100644
--- a/runner.yml.dist
+++ b/runner.yml.dist
@@ -36,6 +36,7 @@ drupal:
     - "./vendor/bin/drush en oe_theme_contact_forms -y"
     - "./vendor/bin/drush en oe_theme_paragraphs_contact -y"
     - "./vendor/bin/drush en oe_theme_paragraphs_banner -y"
+    - "./vendor/bin/drush en oe_theme_paragraphs_carousel -y"
     - "./vendor/bin/drush en field_ui -y"
     - "./vendor/bin/drush en config_devel -y"
     - "./vendor/bin/drush en toolbar -y"
diff --git a/templates/patterns/carousel/pattern-carousel.html.twig b/templates/patterns/carousel/pattern-carousel.html.twig
index 5f7457c3e..7c552ebb9 100644
--- a/templates/patterns/carousel/pattern-carousel.html.twig
+++ b/templates/patterns/carousel/pattern-carousel.html.twig
@@ -30,7 +30,7 @@
     description: item.description,
     link: _link,
     picture: _picture,
-    variant: item.variant|default('primary'),
+    variant: item.variant|default('plain-background'),
     centered: item.centered is defined and item.centered == false ? false : true,
     credit: item.credit|default('')
   }]) %}
diff --git a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
index 2ea963b07..d55536c93 100644
--- a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
+++ b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
@@ -35,6 +35,7 @@ class MediaParagraphsTest extends ParagraphsTestBase {
     'oe_paragraphs_iframe_media',
     'oe_paragraphs_banner',
     'oe_theme_paragraphs_banner',
+    'oe_theme_paragraphs_carousel',
     'views',
     'entity_browser',
     'media_avportal',
@@ -975,6 +976,9 @@ public function testIframe(): void {
 
   /**
    * Test Carousel paragraph rendering.
+   *
+   * @SuppressWarnings(PHPMD.CyclomaticComplexity)
+   * @SuppressWarnings(PHPMD.NPathComplexity)
    */
   public function testCarousel(): void {
     // Set image media translatable.
@@ -1078,6 +1082,7 @@ public function testCarousel(): void {
     // Create a Carousel paragraph with Bulgarian translation.
     $paragraph = Paragraph::create([
       'type' => 'oe_carousel',
+      'oe_paragraphs_variant' => 'oe_banner_text_highlight',
       'field_oe_carousel_items' => $items,
       'field_oe_carousel_size' => 'large',
     ]);
@@ -1147,6 +1152,24 @@ public function testCarousel(): void {
     $expected_values['items'][3]['url_text'] = 'BG CTA 4';
     $expected_values['items'][3]['image'] = $this->container->get('file_url_generator')->generateAbsoluteString($bg_file_2_uri);
     $assert->assertPattern($expected_values, $html);
+
+    // Update paragraph variant to image-overlay.
+    $paragraph->set('oe_paragraphs_variant', 'oe_banner_image_shade')
+      ->save();
+    $html = $this->renderParagraph($paragraph, 'bg');
+    foreach ($expected_values['items'] as &$item) {
+      $item['variant'] = 'image-overlay';
+    }
+    $assert->assertPattern($expected_values, $html);
+
+    // Update paragraph variant to default.
+    $paragraph->set('oe_paragraphs_variant', 'default')
+      ->save();
+    $html = $this->renderParagraph($paragraph, 'bg');
+    foreach ($expected_values['items'] as &$item) {
+      $item['variant'] = 'plain-background';
+    }
+    $assert->assertPattern($expected_values, $html);
   }
 
   /**
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
index 3f61399f7..895fdef00 100644
--- a/tests/src/Kernel/fixtures/rendering.yml
+++ b/tests/src/Kernel/fixtures/rendering.yml
@@ -3606,7 +3606,7 @@
       div.ecl-carousel__slide section.ecl-banner.ecl-banner.ecl-banner--text-box.ecl-banner--centered: 1
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-highlight: 2
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-highlight.ecl-banner--centered: 1
-      div.ecl-carousel__slide section.ecl-banner.ecl-banner--primary.ecl-banner--m.ecl-banner--centered: 1
+      div.ecl-carousel__slide section.ecl-banner.ecl-banner--plain-background.ecl-banner--m.ecl-banner--centered: 1
       div.ecl-carousel__controls: 1
       section.ecl-banner--text-box.ecl-banner--m picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://placeimg.com/640/480/tech"]: 1
       section.ecl-banner--text-highlight.ecl-banner--m picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://placeimg.com/640/480/arch"]: 1
@@ -3624,9 +3624,9 @@
       div.ecl-carousel__slide div.ecl-banner.ecl-banner--image-gradient.ecl-banner--centered div.ecl-banner__title: 'Duis vitae pulvinar turpis'
       div.ecl-carousel__slide div.ecl-banner.ecl-banner--image-gradient.ecl-banner--centered p.ecl-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
       div.ecl-carousel__slide div.ecl-banner.ecl-banner--image-gradient.ecl-banner--centered div.ecl-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 2'
-      div.ecl-carousel__slide section.ecl-banner--primary.ecl-banner--m div.ecl-banner.ecl-banner--primary.ecl-banner--centered div.ecl-banner__title: 'Donec maximus pharetra ex a ultricies'
-      div.ecl-carousel__slide section.ecl-banner--primary.ecl-banner--m div.ecl-banner.ecl-banner--primary.ecl-banner--centered p.ecl-banner__description: 'Integer quis lorem tellus.'
-      div.ecl-carousel__slide section.ecl-banner--primary.ecl-banner--m div.ecl-banner.ecl-banner--primary.ecl-banner--centered div.ecl-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 3'
+      div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner.ecl-banner--plain-background.ecl-banner--centered div.ecl-banner__title: 'Donec maximus pharetra ex a ultricies'
+      div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner.ecl-banner--plain-background.ecl-banner--centered p.ecl-banner__description: 'Integer quis lorem tellus.'
+      div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner.ecl-banner--plain-background.ecl-banner--centered div.ecl-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 3'
       div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--m.ecl-banner--centered div.ecl-banner__content div.ecl-banner__title: 'Donec maximus pharetra ex a ultricies'
       div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--m.ecl-banner--centered div.ecl-banner__credit: '© Copyright fourth item'
       div.ecl-carousel__slide section.ecl-banner--secondary.ecl-banner--m div.ecl-banner__content div.ecl-banner__title: 'Lorem ipsum dolor sit amet'
diff --git a/tests/src/PatternAssertions/CarouselAssert.php b/tests/src/PatternAssertions/CarouselAssert.php
index 3bbdb692b..2854bbf1e 100644
--- a/tests/src/PatternAssertions/CarouselAssert.php
+++ b/tests/src/PatternAssertions/CarouselAssert.php
@@ -39,6 +39,8 @@ protected function assertBaseElements(string $html, string $variant): void {}
    *   The expected item values.
    * @param \Symfony\Component\DomCrawler\Crawler $crawler
    *   The DomCrawler where to check the element.
+   *
+   * @SuppressWarnings(PHPMD.CyclomaticComplexity)
    */
   protected function assertItems(array $expected_items, Crawler $crawler): void {
     $items = $crawler->filter('div.ecl-carousel__container div.ecl-carousel__slides div.ecl-carousel__slide');
@@ -47,7 +49,7 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
       $item = $items->eq($index);
       // Assert carousel item (banner) variant.
       if (!isset($expected_item['variant'])) {
-        $this->assertElementExists('section.ecl-banner.ecl-banner--primary.ecl-banner--l', $item);
+        $this->assertElementExists('section.ecl-banner.ecl-banner--plain-background', $item);
       }
       else {
         $this->assertElementExists('section.ecl-banner.ecl-banner--' . $expected_item['variant'], $item);
@@ -75,7 +77,8 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
         $this->assertElementText($expected_item['url_text'], 'div.ecl-banner__cta a span.ecl-link__label', $item);
       }
       // Assert image.
-      if (!isset($expected_item['image'])) {
+      if (!isset($expected_item['image']) ||
+        (isset($expected_item['variant']) && $expected_item['variant'] === 'plain-background')) {
         $this->assertElementNotExists('picture.ecl-picture.ecl-banner__picture', $item);
       }
       else {