EWPP-5315: Add color mode to list item and update its pattern assert.

openeuropa · Feb 28, 2025 · cb83e77 · cb83e77
1 parent 12478f5
commit cb83e77
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 2 deletions.
diff --git a/templates/paragraphs/paragraph--oe-list-item.html.twig b/templates/paragraphs/paragraph--oe-list-item.html.twig
@@ -14,6 +14,7 @@
   'meta': meta,
   'date': date,
   'image': image,
+  'color_mode': color_mode|default(''),
   'image_position': image_position|default(''),
   'external_link': external_link|default(false)
 }) }}
diff --git a/templates/patterns/list_item/list_item.ui_patterns.yml b/templates/patterns/list_item/list_item.ui_patterns.yml
@@ -165,6 +165,11 @@ list_item:
       label: "Lists variant"
       description: "An optional parameter for the layout of the lists (vertical or horizontal). It defaults to horizontal."
       preview: "vertical"
+    color_mode:
+      type: "text"
+      label: "Color mode"
+      description: "Name of the color mode (only used in Highlight variant)."
+      preview: "green-dark"
     extra_classes:
       type: 'text'
       label: 'Extra classes string'

diff --git a/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig b/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig
@@ -73,6 +73,7 @@
   labels: badges,
   primary_meta: primary_meta|default([]),
   secondary_meta: _secondary_meta|default([]),
+  color_mode: color_mode|default(''),
   extra_classes: extra_classes|default(''),
   extra_attributes: extra_attributes|default([]),
 } only %}
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
@@ -2120,6 +2120,7 @@
     '#fields':
       title: "Item title"
       url: "http://example.com"
+      color_mode: "green-dark"
       image:
         src: "http://via.placeholder.com/300x300"
         alt: "Alternate text for secondary image"
@@ -2140,7 +2141,7 @@
   assertions:
     count:
       article.ecl-card[extra-attr="extra value"] div.ecl-card__body div.ecl-content-block.ecl-card__content-block: 1
-      article.ecl-card div.ecl-card__body a.ecl-link--standalone[href="http://example.com"]: 1
+      article.ecl-card.ecl-color-mode--green-dark div.ecl-card__body a.ecl-link--standalone[href="http://example.com"]: 1
       article.ecl-card picture.ecl-picture--zoom: 0
       article.ecl-card img.ecl-card__image[alt="Alternate text for secondary image"]: 1
       article.ecl-card img.ecl-card__image[src="http://via.placeholder.com/300x300"]: 1
@@ -2165,6 +2166,7 @@
     '#fields':
       title: "Item title"
       url: "http://example.com"
+      color_mode: "blue-electric"
       image:
         src: "http://via.placeholder.com/300x300"
         alt: "Alternate text for secondary image"
@@ -2176,7 +2178,7 @@
       picture_zoom: true
   assertions:
     count:
-      article.ecl-card div.ecl-card__body a.ecl-link--standalone[href="http://example.com"]: 1
+      article.ecl-card.ecl-color-mode--blue-electric div.ecl-card__body a.ecl-link--standalone[href="http://example.com"]: 1
       article.ecl-card picture.ecl-picture--zoom: 1
       article.ecl-card img.ecl-card__image[alt="Alternate text for secondary image"]: 1
       article.ecl-card img.ecl-card__image[src="http://via.placeholder.com/300x300"]: 1

diff --git a/tests/src/PatternAssertions/ListItemAssert.php b/tests/src/PatternAssertions/ListItemAssert.php
@@ -4,6 +4,7 @@
 
 namespace Drupal\Tests\oe_theme\PatternAssertions;
 
+use PHPUnit\Framework\Exception;
 use Symfony\Component\DomCrawler\Crawler;
 
 /**
@@ -31,6 +32,9 @@ protected function getAssertions($variant): array {
         'image' => [
           [$this, 'assertHighlightImage'],
         ],
+        'color_mode' => [
+          [$this, 'assertColorMode'],
+        ],
       ];
     }
 
@@ -221,6 +225,36 @@ protected function assertHighlightImage(?array $expected_image, Crawler $crawler
     self::assertStringContainsString($expected_image['src'], $image_div->attr('style'));
   }
 
+  /**
+   * Asserts the presence or absence of the color mode.
+   *
+   * @param string $color_mode
+   *   The name of the color mode.
+   * @param \Symfony\Component\DomCrawler\Crawler $crawler
+   *   The DomCrawler where to check the element.
+   */
+  protected function assertColorMode(string $color_mode, Crawler $crawler): void {
+    $color_modes = [
+      'blue',
+      'green-dark',
+      'orange',
+      'green',
+      'purple',
+      'blue-navy',
+      'blue-electric',
+    ];
+    if (!in_array($color_mode, $color_modes)) {
+      throw new Exception("The color mode '$color_mode' is not supported.");
+    }
+    if (empty($color_mode)) {
+      foreach ($color_modes as $mode) {
+        $this->assertElementNotExists("article.ecl-color-mode--$mode", $crawler);
+      }
+    }
+
+    $this->assertElementExists("article.ecl-color-mode--$color_mode", $crawler);
+  }
+
   /**
    * Asserts the description of the list item.
    *