From ad2920bf244b4b66308b1fc27a9f62fecab27ba3 Mon Sep 17 00:00:00 2001 From: Sergii Pavlenko Date: Tue, 30 Jan 2024 18:45:58 +0200 Subject: [PATCH] EWPP-3816: Add support of extra_attributes for navigation_list pattern. --- ...l+twig-component-content-block+4.0.0.patch | 20 ++++ patches/@ecl+twig-component-menu+4.0.0.patch | 97 ++++++++----------- .../navigation_list.ui_patterns.yml | 14 +++ .../pattern-navigation-list.html.twig | 9 +- tests/src/Kernel/fixtures/rendering.yml | 16 ++- 5 files changed, 95 insertions(+), 61 deletions(-) create mode 100644 patches/@ecl+twig-component-content-block+4.0.0.patch diff --git a/patches/@ecl+twig-component-content-block+4.0.0.patch b/patches/@ecl+twig-component-content-block+4.0.0.patch new file mode 100644 index 0000000000..f8c2847c26 --- /dev/null +++ b/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 -%} diff --git a/patches/@ecl+twig-component-menu+4.0.0.patch b/patches/@ecl+twig-component-menu+4.0.0.patch index a49af48582..db86ee59e7 100644 --- a/patches/@ecl+twig-component-menu+4.0.0.patch +++ b/patches/@ecl+twig-component-menu+4.0.0.patch @@ -1,10 +1,10 @@ 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 +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 -@@ -9,11 +9,17 @@ - - "label" (string) Label of the menu link - - "path": (string) Href of the link +@@ -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' @@ -13,69 +13,53 @@ index 6891f9e..0944464 100644 - "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, + - "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 %} +@@ -39,6 +45,10 @@
  • -- -+ - {{- 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 -%} + {% 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([]), + } %} +
    • + {% endfor %} 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 +index 11f04bd..c31636e 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: '') +@@ -16,12 +16,18 @@ "is_current": (boolean) (optional), + "external": (boolean) (optional), "trigger_aria_label" (string), -+ "extra_attributes" (optional) (array) (default: []) Extra attributes for 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' "children": (associative array) (optional): [ @@ -83,8 +67,9 @@ index 1a932c1..1a90a74 100644 "label": (string) (default: '') "path": (string) (default: '') "is_current": (boolean) (optional), - "external": (boolean) -+ "extra_attributes" (optional) (array) (default: []) Extra attributes for link +- "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' } diff --git a/templates/patterns/navigation_list/navigation_list.ui_patterns.yml b/templates/patterns/navigation_list/navigation_list.ui_patterns.yml index 2a21807553..6b836f2bec 100644 --- a/templates/patterns/navigation_list/navigation_list.ui_patterns.yml +++ b/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" + diff --git a/templates/patterns/navigation_list/pattern-navigation-list.html.twig b/templates/patterns/navigation_list/pattern-navigation-list.html.twig index 2c0238a966..ff3f37b363 100644 --- a/templates/patterns/navigation_list/pattern-navigation-list.html.twig +++ b/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 %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index 0336349dc4..448f33d1db 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/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 @@ -3058,8 +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': '' '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-after[data-name2="data-value2"]': 'Child 1.1' + '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"