EWPP-3771: Use twig filter to get background color.

openeuropa · Jan 26, 2024 · ed97617 · ed97617
1 parent 231d0b0
commit ed97617
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>