EWPP-3875: Add a twig function to determine the border color class.

modules/oe_theme_helper/src/TwigExtension/TwigExtension.php

@@ -97,6 +97,7 @@ public function getFunctions(): array {
       new TwigFunction('to_ecl_icon', [$this, 'toEclIcon'], ['needs_context' => TRUE]),
       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]),
     ];
   }
 
@@ -657,6 +658,19 @@ public function isExternal(string $path): bool {
     return $this->externalLinks->isExternalLink($path);
   }
 
+  /**
+   * Determines the proper border color class based on the component library.
+   *
+   * @param array $context
+   *   The twig context.
+   *
+   * @return string
+   *   The border color class.
+   */
+  public function eclBorderColor(array $context): string {
+    return $context['ecl_component_library'] === 'ec' ? 'ecl-u-border-color-neutral-40' : 'ecl-u-border-color-primary-10';
+  }
+
   /**
    * Creates a Markup object.
    *

modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php

@@ -400,6 +400,46 @@ public function toEclIconProvider(): array {
     ];
   }
 
+  /**
+   * Tests the ECL border color class is properly.
+   *
+   * @param string $component_library
+   *   The current component library.
+   * @param string $expected_class
+   *   The expected border color class.
+   *
+   * @covers ::eclBorderColor
+   * @dataProvider eclBorderColorProvider
+   */
+  public function testEclBorderColor(string $component_library, string $expected_class) {
+    $context = [
+      'ecl_component_library' => $component_library,
+    ];
+    $result = $this->twig->render("{{ ecl_class_border_color() }}", $context);
+    $this->assertEquals($expected_class, $result);
+  }
+
+  /**
+   * Returns test cases for ::testEclBorderColor().
+   *
+   * @return array[]
+   *   Test cases array.
+   *
+   * @see ::testEclBorderColor()
+   */
+  public function eclBorderColorProvider(): array {
+    return [
+      [
+        'ec',
+        'ecl-u-border-color-neutral-40',
+      ],
+      [
+        'eu',
+        'ecl-u-border-color-primary-10',
+      ],
+    ];
+  }
+
   /**
    * Test that create_markup filter returns MarkupInterface object.
    */

templates/field/field--node--oe-news-sources--oe-news--full.html.twig

@@ -6,11 +6,10 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{% set _color = ecl_component_library == 'ec' ? 'neutral-40' : 'primary-10' %}
 <h3 class="ecl-u-type-heading-3 ecl-u-mt-3xl">{{ 'Sources'|t }}</h3>
 {% for item in items %}
   {% set bubble_cache = item.content|render %}
-  <div class="ecl-u-border-bottom ecl-u-border-color-{{ _color }} ecl-u-pt-m ecl-u-pb-m">
+  <div class="ecl-u-border-bottom {{ ecl_class_border_color() }} ecl-u-pt-m ecl-u-pb-m">
     {% include '@ecl-twig/link' with {
       link: {
         type: 'standalone',

templates/field/field--oe-contact--oe-link--full.html.twig

@@ -6,10 +6,9 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{% set _color = ecl_component_library == 'ec' ? 'neutral-40' : 'primary-10' %}
 {% for item in items %}
   {% set bubble_cache = item.content|render %}
-  <div class="ecl-u-border-bottom ecl-u-border-color-{{ _color }} ecl-u-pt-l ecl-u-pb-l">
+  <div class="ecl-u-border-bottom {{ ecl_class_border_color() }} ecl-u-pt-l ecl-u-pb-l">
     {% include '@ecl-twig/link' with {
       link: {
         type: 'standalone',

templates/field/field--oe-contact--oe-press-contact-url--full.html.twig

@@ -6,10 +6,9 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{% set _color = ecl_component_library == 'ec' ? 'neutral-40' : 'primary-10' %}
 {% for item in items %}
   {% set bubble_cache = item.content|render %}
-  <div class="ecl-u-border-bottom ecl-u-border-color-{{ _color }} ecl-u-pt-l ecl-u-pb-l">
+  <div class="ecl-u-border-bottom {{ ecl_class_border_color() }} ecl-u-pt-l ecl-u-pb-l">
     {% include '@ecl-twig/link' with {
       link: {
         type: 'standalone',

templates/field/field--oe-related-links.html.twig

@@ -1,8 +1,7 @@
-{% set _color = ecl_component_library == 'ec' ? 'neutral-40' : 'primary-10' %}
 <h2 class="ecl-u-type-heading-2 ecl-u-mt-3xl">{{ 'Related links'|t }}</h2>
 {% for item in items %}
   {% set bubble_cache = item.content|render %}
-  <div class="ecl-u-border-bottom ecl-u-border-color-{{ _color }} ecl-u-pt-m ecl-u-pb-m">
+  <div class="ecl-u-border-bottom {{ ecl_class_border_color() }} ecl-u-pt-m ecl-u-pb-m">
     {% include '@ecl-twig/link' with {
       link: {
         type: 'standalone',

templates/oe_contact/oe-contact--full.html.twig

@@ -6,7 +6,6 @@
  * @see ./modules/contrib/oe_content_entity/modules/oe_content_entity_contact/templates/oe-contact.html.twig
  */
 #}
-{% set _color = ecl_component_library == 'ec' ? 'neutral-40' : 'primary-10' %}
 {% set image = content.oe_image|field_value|render %}
 <div class="ecl-row ecl-u-mv-xl">
   {% block title %}
@@ -27,7 +26,7 @@
     {% endif %}
     {{ content.group_contact_information }}
     {% if not entity.oe_press_contact_url.isEmpty() or not entity.oe_link.isEmpty() %}
-      <div class="ecl-u-border-top ecl-u-border-color-{{ _color }} ecl-u-mt-s">
+      <div class="ecl-u-border-top {{ ecl_class_border_color() }} ecl-u-mt-s">
         {{ content.oe_press_contact_url }}
         {{ content.oe_link }}
       </div>