Skip to content

Commit

Permalink
EWPP-3816: Add support of extra_attributes for navigation_list pattern.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergepavle
sergepavle committed Mar 13, 2024
1 parent 2b33e76 commit ad2920b
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 61 deletions.
20 changes: 20 additions & 0 deletions patches/@ecl+twig-component-content-block+4.0.0.patch
View file
Original file line number Diff line number Diff line change
@@ -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 -%}
97 changes: 41 additions & 56 deletions patches/@ecl+twig-component-menu+4.0.0.patch
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -13,78 +13,63 @@ 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 @@

<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 -%}
{% 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 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): [
{
"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'
}
Expand Down
14 changes: 14 additions & 0 deletions templates/patterns/navigation_list/navigation_list.ui_patterns.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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'
Expand All @@ -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
Expand All @@ -57,3 +70,4 @@ navigation_list:
preview:
src: "https://loremflickr.com/1000/500/arch"
alt: "Alternative text for image"

9 changes: 6 additions & 3 deletions templates/patterns/navigation_list/pattern-navigation-list.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
path: title_url,
external: external_link|default(false),
icon_path: ecl_icon_path
}
},
extra_attributes: title_extra_attributes|default([])
} %}
{% endif %}

Expand All @@ -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 %}
Expand All @@ -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 %}
Expand Down
16 changes: 14 additions & 2 deletions tests/src/Kernel/fixtures/rendering.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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': '<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-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"
Expand Down

0 comments on commit ad2920b

Please sign in to comment.