EWPP-3816: Add extra attributes for navigation menu pattern.

patches/@ecl+twig-component-content-block+4.0.0.patch

@@ -0,0 +1,20 @@
+diff --git a/node_modules/@ecl/twig-component-content-block/content-block.html.twig b/node_modules/@ecl/twig-component-content-block/content-block.html.twig
+index 141368d..8fffb43 100644
+--- a/node_modules/@ecl/twig-component-content-block/content-block.html.twig
++++ b/node_modules/@ecl/twig-component-content-block/content-block.html.twig
+@@ -147,6 +147,7 @@
+             link: _link.link|merge({
+               type: 'standalone',
+             }),
++            extra_attributes: _link.extra_attributes|default([]),
+             icon: _link.icon|default({})
+           } only %}
+         {%- else -%}
+@@ -165,6 +166,7 @@
+             link: _link.link|merge({
+               type: 'standalone',
+             }),
++            extra_attributes: _link.extra_attributes|default([]),
+             icon: _link.icon|default({})
+           } only %}
+         {%- else -%}

patches/@ecl+twig-component-menu+4.0.0.patch

@@ -0,0 +1,77 @@
+diff --git a/node_modules/@ecl/twig-component-menu/menu-item.html.twig b/node_modules/@ecl/twig-component-menu/menu-item.html.twig
+index 32d1ff9..dbf8814 100644
+--- a/node_modules/@ecl/twig-component-menu/menu-item.html.twig
++++ b/node_modules/@ecl/twig-component-menu/menu-item.html.twig
+@@ -11,11 +11,17 @@
+     - "external" (boolean) External link
+     - "path" (string) Href of the menu link
+     - "trigger_aria_label" (string) Aria label for the trigger button,
++    - "extra_attributes" (optional) (array) (default: []) Extra attributes for link
++      - "name" (string) Attribute name, eg. 'data-test'
++      - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+     - "children" (array of object) Array of sub-items
+       - "external": (boolean) External link
+       - "is_current" (boolean) Whether the sub-item is currently selected
+       - "path" (string) Href of the sub-item link
+       - "label" (string) Label of the sub-item link
++      - "extra_attributes" (optional) (array) (default: []) Extra attributes for link
++        - "name" (string) Attribute name, eg. 'data-test'
++        - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+ #}
+
+ {% set _id = id|default('') %}
+@@ -39,6 +45,10 @@
+
+ <li class="{{ _menu_list_item_class }}" {{ _menu_list_item_attributes|raw }} id="{{ _id }}">
+   {% set _sublink_class = 'ecl-menu__sublink' ~ (child.is_current is defined ? ' ecl-menu__sublink--current' : '') %}
++  {% set _menu_item_attributes = _item.extra_attributes|default([])|merge([
++    { name: _menu_item_attributes },
++    { name: 'id', value: _id ~ "-link" },
++  ]) %}
+   {% include '@ecl/link/link.html.twig' with {
+     link: {
+       type: 'standalone',
+@@ -48,10 +58,7 @@
+       external: _item.external|default(false),
+     },
+     extra_classes: _menu_item_class,
+-    extra_attributes: [
+-      { name: _menu_item_attributes },
+-      { name: 'id', value: _id ~ "-link" },
+-    ],
++    extra_attributes: _menu_item_attributes,
+   } %}
+
+ {%- if item.children is defined and item.children is not empty and item.children is iterable -%}
+@@ -100,6 +107,7 @@
+             external: child.external,
+           },
+           extra_classes: _sublink_class,
++          extra_attributes: child.extra_attributes|default([]),
+         } %}
+       </li>
+     {% endfor %}
+diff --git a/node_modules/@ecl/twig-component-menu/menu.html.twig b/node_modules/@ecl/twig-component-menu/menu.html.twig
+index 11f04bd..c31636e 100644
+--- a/node_modules/@ecl/twig-component-menu/menu.html.twig
++++ b/node_modules/@ecl/twig-component-menu/menu.html.twig
+@@ -16,12 +16,18 @@
+       "is_current": (boolean) (optional),
+       "external": (boolean) (optional),
+       "trigger_aria_label" (string),
++      "extra_attributes" (optional) (array) (default: []) Extra attributes for link,
++        - "name" (string) Attribute name, eg. 'data-test'
++        - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+       "children": (associative array) (optional): [
+         {
+           "label": (string) (default: '')
+           "path": (string) (default: '')
+           "is_current": (boolean) (optional),
+-          "external": (boolean)
++          "external": (boolean),
++          "extra_attributes" (optional) (array) (default: []) Extra attributes for link,
++            - "name" (string) Attribute name, eg. 'data-test'
++            - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+         }
+       ]
+     }

templates/patterns/navigation_list/navigation_list.ui_patterns.yml

@@ -17,6 +17,13 @@ navigation_list:
       label: "External link"
       description: "Whether the title URL is external or not."
       preview: true
+    title_extra_attributes:
+      type: "array"
+      label: "Link attributes"
+      description: "Extra attributes for title link"
+      preview:
+        - name: "extra-attr"
+          value: "extra value"
     description:
       type: "text"
       label: "Description"
@@ -30,6 +37,9 @@ navigation_list:
         - label: 'Addressing shared challenges'
           url: 'https://commission.europa.eu/education/policy-educational-issues/shared-challenges-education-and-training_en'
           is_external: true
+          extra_attributes:
+            -  name: "extra-attr2"
+               value: "extra value2"
         - label: 'Setting objectives and measuring progress'
           url: 'https://commission.europa.eu/education/policy-educational-issues/setting-objectives-and-measuring-progress_en'
         - label: 'International cooperation'
@@ -42,6 +52,9 @@ navigation_list:
       preview:
         - label: 'Integrating migrants and refugees'
           url: 'https://commission.europa.eu/education/policy-educational-issues/shared-challenges-education-and-training/integrating-migrants-and-refugees_en'
+          extra_attributes:
+            -  name: "extra-attr2"
+               value: "extra value2"
         - label: 'Early school leaving'
           url: 'https://commission.europa.eu/education/policy-educational-issues/shared-challenges-education-and-training/early-school-leaving_en'
           is_external: true
@@ -57,3 +70,4 @@ navigation_list:
       preview:
         src: "https://loremflickr.com/1000/500/arch"
         alt: "Alternative text for image"
+

templates/patterns/navigation_list/pattern-navigation-list.html.twig

@@ -13,7 +13,8 @@
       path: title_url,
       external: external_link|default(false),
       icon_path: ecl_icon_path
-    }
+    },
+    extra_attributes: title_extra_attributes|default([])
   } %}
 {% endif %}
 
@@ -27,7 +28,8 @@
         path : link.url,
         icon_path: ecl_icon_path,
         external: link.is_external|default(false)
-      }
+      },
+      extra_attributes: link.extra_attributes|default([])
     } %}
     {% set _primary_links = _primary_links|merge([_link]) %}
   {% endfor %}
@@ -43,7 +45,8 @@
         path : secondary_link.url,
         icon_path: ecl_icon_path,
         external: secondary_link.is_external|default(false)
-      }
+      },
+      extra_attributes: secondary_link.extra_attributes|default([])
     } %}
     {% set _secondary_links = _secondary_links|merge([_secondary_link]) %}
   {% endfor %}

templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml

@@ -79,9 +79,15 @@ navigation_menu:
           label: "EU law"
           external: true
           is_current: TRUE
+          extra_attributes:
+            - name: "extra-attr1"
+              value: "extra value1"
           children:
             - href: '#'
               label: 'Eu Treaties'
+              extra_attributes:
+                - name: "extra-attr2"
+                  value: "extra value2"
               is_current: TRUE
               external: true
             - href: '#'

templates/patterns/navigation_menu/pattern-navigation-menu.html.twig

@@ -14,6 +14,7 @@
     {% set _child = {
       path: child.href,
       label: child.label,
+      extra_attributes: child.extra_attributes,
     } %}
     {% if child.is_current is defined and child.is_current == true%}
       {% set _child = _child|merge({
@@ -35,6 +36,7 @@
     label: item.label,
     children: _children,
     trigger_aria_label: "Access item's children"|t,
+    extra_attributes: item.extra_attributes,
   } %}
   {% if _children is empty and item.external is defined and item.external == true %}
     {% set _item = _item|merge({

tests/src/Kernel/fixtures/rendering.yml

@@ -1780,12 +1780,18 @@
     '#fields':
       title: 'Navigation list title'
       title_url: 'http://example.com'
+      title_extra_attributes:
+        - name: "extra-attr"
+          value: "extra value"
       external_link: true
       description: 'Navigation list description'
       links:
         - label: 'Child 1'
           url: 'http://example.com/child1'
           is_external: true
+          extra_attributes:
+            - name: "extra-attr1"
+              value: "extra value1"
         - label: 'Child 2'
           url: 'http://example.com/child2'
         - label: 'Child 3'
@@ -1794,6 +1800,9 @@
         - label: 'Secondary Link 1'
           url: 'http://example.com/secondary1'
           is_external: true
+          extra_attributes:
+            - name: "extra-attr2"
+              value: "extra value2"
         - label: 'Secondary Link 2'
           url: 'http://example.com/secondary2'
       border: true
@@ -1820,6 +1829,9 @@
       'li.ecl-content-block__link-item': 5
       "img.ecl-navigation-list__image[src=\"https://placeimg.com/1000/500/arch\"]": 1
       'img.ecl-navigation-list__image[alt="Alternative text for image"]': 1
+      '.ecl-content-block__link-list:nth-child(1) li.ecl-content-block__link-item:nth-child(1) a.ecl-link[extra-attr1="extra value1"]': 1
+      '.ecl-content-block__link-list:nth-child(2) li.ecl-content-block__link-item:nth-child(1) a.ecl-link[extra-attr2="extra value2"]': 1
+      'div.ecl-content-block__title a.ecl-link[extra-attr="extra value"]': 1
 - array:
     '#type': pattern
     '#id': navigation_list
@@ -3003,11 +3015,17 @@
       items:
         - href: "#"
           label: 'Parent 1'
+          extra_attributes:
+            - name: 'data-name1'
+              value: 'data value1'
           children:
             - href: '#'
               label: 'Child 1.1'
               is_current: true
               external: true
+              extra_attributes:
+                - name: 'data-name2'
+                  value: 'data value2'
             - href: '#'
               label: 'Child 1.2'
             - href: '#'
@@ -3052,6 +3070,8 @@
       'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(2) a.ecl-menu__sublink': 'Child 2.2'
       'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a svg.ecl-icon.ecl-icon--2xs.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
       'li.ecl-menu__item:nth-child(3) a.ecl-menu__link': "Link"
+      'li.ecl-menu__item:nth-child(1) a.ecl-menu__link[data-name1="data value1"]': "Parent 1"
+      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem--current a.ecl-menu__sublink.ecl-link--icon[data-name2="data value2"] .ecl-link__label': 'Child 1.1'
 - array:
     '#type': "pattern"
     '#id': "navigation_menu"
@@ -3516,15 +3536,15 @@
           image: "https://picsum.photos/seed/picsum/600/300"
           variant: "text-overlay"
           link_extra_attributes:
-              -   name: 'data-name'
-                  value: 'data value'
+            - name: 'data-name'
+              value: 'data value'
         - title: "Donec maximus pharetra ex a ultricies"
           description: "Integer quis lorem tellus."
           url: "https://example.com"
           url_text: "CTA 3"
           link_extra_attributes:
-              -   name: 'data-name'
-                  value: 'data value'
+            - name: 'data-name'
+              value: 'data value'
         - title: "Donec maximus pharetra"
           centered: false
         - title: "Lorem ipsum dolor sit amet"