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

openeuropa · Jan 29, 2024 · 34d895d · 34d895d
1 parent a7331df
commit 34d895d
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 0 deletions.
diff --git a/patches/@ecl/twig-component-menu+3.13.0.patch b/patches/@ecl/twig-component-menu+3.13.0.patch
@@ -0,0 +1,92 @@
+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 6891f9e..0944464 100644
+--- a/node_modules/@ecl/twig-component-menu/menu-item.html.twig
++++ b/node_modules/@ecl/twig-component-menu/menu-item.html.twig
+@@ -9,11 +9,17 @@
+     - "label" (string) Label of the menu link
+     - "path": (string) Href of the 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
++      - "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('') %}
+@@ -30,13 +36,23 @@
+   {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-menu__item--current' %}
+ {% endif %}
+
++{% if _item.extra_attributes is defined and _item.extra_attributes is not empty and _item.extra_attributes is iterable %}
++  {% for attr in _item.extra_attributes %}
++    {% if attr.value is defined %}
++      {% set _menu_item_attributes = _menu_item_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
++    {% else %}
++      {% set _menu_item_attributes = _menu_item_attributes ~ ' ' ~ attr.name|e('html_attr') %}
++    {% endif %}
++  {% endfor %}
++{% endif %}
++
+ {% if item.children is defined and item.children is not empty and item.children is iterable %}
+   {% set _menu_list_item_attributes = _menu_list_item_attributes ~ ' data-ecl-has-children aria-haspopup aria-expanded="false"' %}
+   {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-menu__item--has-children' %}
+ {% endif %}
+
+ <li class="{{ _menu_list_item_class }}" {{ _menu_list_item_attributes|raw }} id="{{ _id }}">
+-  <a href="{{ item.path }}" class="{{ _menu_item_class }}" {{ _menu_item_attributes }} id="{{ _id }}-link">
++  <a href="{{ item.path }}" class="{{ _menu_item_class }}" {{ _menu_item_attributes|raw }} id="{{ _id }}-link">
+     {{- item.label -}}
+     {%- if item.external -%}
+       {% include '@ecl/icon/icon.html.twig' with {
+@@ -91,9 +107,20 @@
+           {% if child.external %}
+             {% set _sublink_class = _sublink_class ~ ' ecl-link--icon-after' %}
+           {% endif %}
++        {% set _sub_menu_item_attributes = '' %}
++        {% if child.extra_attributes is defined and child.extra_attributes is not empty and child.extra_attributes is iterable %}
++          {% for attr in child.extra_attributes %}
++            {% if attr.value is defined %}
++              {% set _sub_menu_item_attributes = _sub_menu_item_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
++            {% else %}
++              {% set _sub_menu_item_attributes = _sub_menu_item_attributes ~ ' ' ~ attr.name|e('html_attr') %}
++            {% endif %}
++          {% endfor %}
++        {% endif %}
+         <a
+           href="{{ child.path }}"
+           class="{{ _sublink_class }}"
++          {{ _sub_menu_item_attributes }}
+         >
+           {{- child.label -}}
+           {%- if child.external -%}
+diff --git a/node_modules/@ecl/twig-component-menu/menu.html.twig b/node_modules/@ecl/twig-component-menu/menu.html.twig
+index 1a932c1..1a90a74 100644
+--- a/node_modules/@ecl/twig-component-menu/menu.html.twig
++++ b/node_modules/@ecl/twig-component-menu/menu.html.twig
+@@ -14,12 +14,18 @@
+       "path": (string) (default: '')
+       "is_current": (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)
++          "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'
+         }
+       ]
+     }
diff --git a/templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml b/templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml
@@ -47,9 +47,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: '#'

diff --git a/templates/patterns/navigation_menu/pattern-navigation-menu.html.twig b/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({

diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
@@ -3084,11 +3084,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: '#'
@@ -3118,8 +3124,10 @@
       '.ecl-menu__inner-header button.ecl-menu__close .ecl-button__label': "Close"
       '.ecl-menu__inner-header button.ecl-menu__back .ecl-button__label': "Back"
       'li.ecl-menu__item:nth-child(1) a.ecl-menu__link': "Parent 1"
+      'li.ecl-menu__item:nth-child(1) a.ecl-menu__link[data-name1="data-value1"]': "Parent 1"
       'li.ecl-menu__item:nth-child(2) a.ecl-menu__link': "Parent 2"
       'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem--current a.ecl-menu__sublink.ecl-link--icon-after': 'Child 1.1'
+      'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem--current a.ecl-menu__sublink.ecl-link--icon-after[data-name2="data-value2"]': 'Child 1.1'
       'li.ecl-menu__item:nth-child(1) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink.ecl-link--icon-after': 'Child 1.3'
       'li.ecl-menu__item:nth-child(2) ul.ecl-menu__sublist li.ecl-menu__subitem:nth-child(3) a.ecl-menu__sublink.ecl-link--icon-after': 'Child 2.3'
     equals: