Merge pull request #1366 from openeuropa/EWPP-3771

EWPP-3771: Fix link block style.
openeuropa · Jan 26, 2024 · 36340a0 · 36340a0
2 parents 73d49fb + ed97617
commit 36340a0
Show file tree

Hide file tree

Showing 3 changed files with 56 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
@@ -37,15 +37,15 @@
   {% endfor %}
 {% endif %}
 
-<div class="{{ _css_class }} ecl-u-bg-grey-5 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>
     </div>
   {% 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 {