diff --git a/patches/@ecl/twig-component-menu+3.13.0.patch b/patches/@ecl/twig-component-menu+3.13.0.patch new file mode 100644 index 000000000..a49af4858 --- /dev/null +++ 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 %} + +
  • +- ++ + {{- 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 %} + + {{- 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 index d548faf98..a2825f9e3 100644 --- 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 index 4aaadfde7..23e3c04fc 100644 --- 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 index 4fc096259..dfadc0f9e 100644 --- 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: