From 57635b513cd193d5ad531e9c60a95260f3c64ae7 Mon Sep 17 00:00:00 2001 From: Sergii Pavlenko Date: Mon, 29 Jan 2024 20:05:17 +0200 Subject: [PATCH 1/2] EWPP-3816: Add extra attirbutes for navigation menu pattern. --- patches/@ecl+twig-component-menu+4.0.0.patch | 92 +++++++++++++++++++ .../navigation_menu.ui_patterns.yml | 6 ++ .../pattern-navigation-menu.html.twig | 2 + tests/src/Kernel/fixtures/rendering.yml | 16 +++- 4 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 patches/@ecl+twig-component-menu+4.0.0.patch diff --git a/patches/@ecl+twig-component-menu+4.0.0.patch b/patches/@ecl+twig-component-menu+4.0.0.patch new file mode 100644 index 000000000..a49af4858 --- /dev/null +++ b/patches/@ecl+twig-component-menu+4.0.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 cf328e71f..0572eb566 100644 --- a/templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml +++ b/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: '#' diff --git a/templates/patterns/navigation_menu/pattern-navigation-menu.html.twig b/templates/patterns/navigation_menu/pattern-navigation-menu.html.twig index 47d7a3f7a..c66559358 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 7d9d2b4da..0336349dc 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3003,11 +3003,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 +3058,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' - array: '#type': "pattern" '#id': "navigation_menu" @@ -3516,15 +3524,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" From 9ae9978ab0b3dd07bd3458c8b4d31226f103f14c Mon Sep 17 00:00:00 2001 From: Sergii Pavlenko Date: Tue, 30 Jan 2024 18:45:58 +0200 Subject: [PATCH 2/2] 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 000000000..f8c2847c2 --- /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 a49af4858..db86ee59e 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 2a2180755..6b836f2be 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 2c0238a96..ff3f37b36 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 0336349dc..448f33d1d 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"