EWPP-3916: Use tabs pattern in local tasks.

patches/@ecl+twig-component-tabs+4.0.0-beta-1.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/@ecl/twig-component-tabs/tabs.html.twig b/node_modules/@ecl/twig-component-tabs/tabs.html.twig
+index 428181c..f114135 100644
+--- a/node_modules/@ecl/twig-component-tabs/tabs.html.twig
++++ b/node_modules/@ecl/twig-component-tabs/tabs.html.twig
+@@ -80,6 +80,9 @@
+           {% else %}
+             {% set _item_extra_attributes = _item_extra_attributes|merge([{ name: 'aria-selected', value: 'false' }]) %}
+           {% endif %}
++          {% if _item.extra_classes is defined %}
++            {% set _item_extra_classes = _item_extra_classes ~ ' ' ~ _item.extra_classes %}
++          {% endif %}
+           {% if _menu is not empty %}
+             {% set extra_attributes = extra_attributes|merge([{ name: 'data-ecl-has-menu' }]) %}
+           {% endif %}

templates/compositions/ec-component-navigation/local-tasks.html.twig

@@ -18,21 +18,22 @@
 {% set _title = title|default('Navigation') %}
 {% set _links = links|default([]) %}
 {% set _variant = variant|default('primary') %}
-{% set _css_class = 'ecl-navigation' %}
+{% set _item_extra_classes = '' %}
+{% set _extra_classes = '' %}
 {% set _extra_attributes = '' %}
 
 {# Internal logic - Process properties #}
 
-{% if _variant == 'primary' %}
-  {% set _list_class = ' ecl-u-pb-m ecl-u-pt-m ecl-u-type-bold' %}
-  {% set _list_item_class = ' ecl-u-pa-m' %}
-{% endif %}
 {% if _variant == 'secondary' %}
-  {% set _list_class = ' ecl-u-pb-s ecl-u-pt-s ecl-u-type-s' %}
-  {% set _list_item_class = ' ecl-u-pa-s' %}
+  {% set _item_extra_classes = 'ecl-u-type-s' %}
+{% endif %}
+
+{% if item_extra_classes is not empty %}
+  {% set _item_extra_classes = _item_extra_classes ~ ' ' ~ item_extra_classes %}
 {% endif %}
+
 {% if extra_classes is not empty %}
-  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
+  {% set _extra_classes = _extra_classes ~ ' ' ~ extra_classes %}
 {% endif %}
 
 {% if extra_attributes is not empty %}
@@ -43,16 +44,19 @@
 
 {# Print the result #}
 
-{% if _links is not empty %}
-  <nav class="{{ _css_class }}"{{ _extra_attributes|raw }}>
-    <h2 hidden>{{ _title }}</h2>
-    <ul class="ecl-navigation ecl-unordered-list--no-marker ecl-u-border-bottom {{ ecl_class_border_color() }}{{ _list_class }}">
-      {% for _link in _links %}
-        {% set _active_class = _link.is_active == true ? ' ecl-navigation__item--active ecl-u-border-bottom ecl-u-border-color-primary' : '' %}
-        <li class="ecl-navigation__item ecl-unordered-list__item ecl-u-d-inline{{ _list_item_class }}{{ _active_class }}">
-          {% include '@ecl-twig/link' with _link only %}
-        </li>
-      {% endfor %}
-    </ul>
-  </nav>
-{% endif %}
+{% set _items = {} %}
+{% for _link in _links %}
+  {% set _item = {
+    label : _link.link.label,
+    path : _link.link.path,
+    is_current: _link.is_active,
+    extra_classes: _item_extra_classes
+  } %}
+  {% set _items = _items|merge([_item]) %}
+{% endfor %}
+
+{{ pattern('tabs', {
+  'items': _items,
+  'extra_classes': _extra_classes,
+  'extra_attributes': _extra_attributes,
+}) }}

templates/patterns/tabs/pattern-tabs.html.twig

@@ -11,5 +11,5 @@
   next_label: next_label,
   icon_path: ecl_icon_path,
   extra_attributes: extra_attributes,
-  extra_classes: classes
+  extra_classes: extra_classes
 } only %}

templates/patterns/tabs/tabs.ui_patterns.yml

@@ -31,3 +31,9 @@ tabs:
       label: "Next label"
       description: "Label for the next button (mobile only); this is for screen readers"
       preview: "Next"
+    extra_classes:
+      type: 'text'
+      label: 'Extra classes string'
+      description: 'Extra classes string'
+      preview: ''
+