From 231d0b021b69c363ecf4caf7a463989388fc6318 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Mon, 8 Jan 2024 14:21:59 +0100
Subject: [PATCH 1/2] EWPP-3771: Fix link block style.

---
 .../ec-component-link-block/link-block.html.twig             | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/compositions/ec-component-link-block/link-block.html.twig b/templates/compositions/ec-component-link-block/link-block.html.twig
index 30d838e4f..1d855e039 100644
--- a/templates/compositions/ec-component-link-block/link-block.html.twig
+++ b/templates/compositions/ec-component-link-block/link-block.html.twig
@@ -24,6 +24,7 @@
 {% set _links = links|default([]) %}
 {% set _css_class = 'ecl-link-block' %}
 {% set _extra_attributes = '' %}
+{% set _color = ecl_component_library == 'ec' ? 'neutral-20' : 'primary-5' %} %}
 
 {# Internal logic - Process properties #}
 
@@ -37,7 +38,7 @@
   {% endfor %}
 {% endif %}
 
-<div class="{{ _css_class }} ecl-u-bg-grey-5 ecl-u-ph-m"{{ _extra_attributes|raw }}>
+<div class="{{ _css_class }} ecl-u-bg-{{ _color }} ecl-u-ph-m"{{ _extra_attributes|raw }}>
   {% if _title is not empty %}
     <div class="ecl-link-block__title ecl-row ecl-u-pl-m ecl-u-pr-m">
       <h5 class="ecl-u-type-heading-5 ecl-u-mt-xs ecl-u-mb-none">{{ _title }}</h5>
@@ -45,7 +46,7 @@
   {% endif %}
   {% if _links is not empty and _links is iterable %}
     <div class="ecl-row ecl-u-pl-m ecl-u-pr-m">
-      <ul class="ecl-link-block__list ecl-unordered-list--no-bullet ecl-u-ma-none">
+      <ul class="ecl-link-block__list ecl-unordered-list--no-marker ecl-u-ma-none">
         {% for _link in _links %}
           <li class="ecl-link-block__item ecl-u-mt-xs ecl-u-mb-xs">
             {% include '@ecl-twig/link' with {

From ed9761799a6e313afcd2c627800609387aa4dfb5 Mon Sep 17 00:00:00 2001
From: Imanol Eguskiza <imanoleguskizarojo@gmail.com>
Date: Tue, 23 Jan 2024 10:08:44 +0100
Subject: [PATCH 2/2] EWPP-3771: Use twig filter to get background color.

---
 .../src/TwigExtension/TwigExtension.php       | 14 +++++++
 .../tests/src/Unit/TwigExtensionTest.php      | 40 +++++++++++++++++++
 .../link-block.html.twig                      |  3 +-
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
index ce1ce0c2e..1bf546d37 100644
--- a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
+++ b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
@@ -98,6 +98,7 @@ public function getFunctions(): array {
       new TwigFunction('get_link_icon', [$this, 'getLinkIcon'], ['needs_context' => TRUE]),
       new TwigFunction('ecl_footer_links', [$this, 'eclFooterLinks'], ['needs_context' => TRUE]),
       new TwigFunction('ecl_class_border_color', [$this, 'eclBorderColor'], ['needs_context' => TRUE]),
+      new TwigFunction('ecl_class_background_color', [$this, 'eclBackgroundColor'], ['needs_context' => TRUE]),
     ];
   }
 
@@ -671,6 +672,19 @@ public function eclBorderColor(array $context): string {
     return $context['ecl_component_library'] === 'ec' ? 'ecl-u-border-color-neutral-40' : 'ecl-u-border-color-primary-10';
   }
 
+  /**
+   * Determines the proper background color class for the component library.
+   *
+   * @param array $context
+   *   The twig context.
+   *
+   * @return string
+   *   The background color class.
+   */
+  public function eclBackgroundColor(array $context): string {
+    return $context['ecl_component_library'] === 'ec' ? 'ecl-u-bg-neutral-40' : 'ecl-u-bg-primary-5';
+  }
+
   /**
    * Creates a Markup object.
    *
diff --git a/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php b/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php
index 63badca62..7424881cb 100644
--- a/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php
+++ b/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php
@@ -440,6 +440,46 @@ public function eclBorderColorProvider(): array {
     ];
   }
 
+  /**
+   * Tests the ECL background color class is properly.
+   *
+   * @param string $component_library
+   *   The current component library.
+   * @param string $expected_class
+   *   The expected background color class.
+   *
+   * @covers ::eclBackgroundColor
+   * @dataProvider eclBackgroundColorProvider
+   */
+  public function testEclBackgroundColor(string $component_library, string $expected_class) {
+    $context = [
+      'ecl_component_library' => $component_library,
+    ];
+    $result = $this->twig->render("{{ ecl_class_background_color() }}", $context);
+    $this->assertEquals($expected_class, $result);
+  }
+
+  /**
+   * Returns test cases for ::testEclBackgroundColor().
+   *
+   * @return array[]
+   *   Test cases array.
+   *
+   * @see ::testEclBackgroundColor()
+   */
+  public function eclBackgroundColorProvider(): array {
+    return [
+      [
+        'ec',
+        'ecl-u-bg-neutral-40',
+      ],
+      [
+        'eu',
+        'ecl-u-bg-primary-5',
+      ],
+    ];
+  }
+
   /**
    * Test that create_markup filter returns MarkupInterface object.
    */
diff --git a/templates/compositions/ec-component-link-block/link-block.html.twig b/templates/compositions/ec-component-link-block/link-block.html.twig
index 1d855e039..9cf1df67a 100644
--- a/templates/compositions/ec-component-link-block/link-block.html.twig
+++ b/templates/compositions/ec-component-link-block/link-block.html.twig
@@ -24,7 +24,6 @@
 {% set _links = links|default([]) %}
 {% set _css_class = 'ecl-link-block' %}
 {% set _extra_attributes = '' %}
-{% set _color = ecl_component_library == 'ec' ? 'neutral-20' : 'primary-5' %} %}
 
 {# Internal logic - Process properties #}
 
@@ -38,7 +37,7 @@
   {% endfor %}
 {% endif %}
 
-<div class="{{ _css_class }} ecl-u-bg-{{ _color }} ecl-u-ph-m"{{ _extra_attributes|raw }}>
+<div class="{{ _css_class }} {{ ecl_class_background_color() }} ecl-u-ph-m"{{ _extra_attributes|raw }}>
   {% if _title is not empty %}
     <div class="ecl-link-block__title ecl-row ecl-u-pl-m ecl-u-pr-m">
       <h5 class="ecl-u-type-heading-5 ecl-u-mt-xs ecl-u-mb-none">{{ _title }}</h5>