EWPP-2433: Update navigation list pattern to use ecl component.

openeuropa · Jul 27, 2022 · 5e9515b · 5e9515b
1 parent 2df8920
commit 5e9515b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@ecl/twig-component-media-container": "3.3.3",
     "@ecl/twig-component-menu": "3.3.3",
     "@ecl/twig-component-message": "3.3.3",
+    "@ecl/twig-component-navigation-list": "3.3.3",
     "@ecl/twig-component-news-ticker": "3.3.3",
     "@ecl/twig-component-page-banner": "3.3.3",
     "@ecl/twig-component-page-header": "3.3.3",

diff --git a/templates/compositions/ec-component-navigation-list/navigation-list.html.twig b/templates/compositions/ec-component-navigation-list/navigation-list.html.twig
@@ -5,6 +5,8 @@
  * @file
  * Theme implementation for ECL Navigation List.
  *
+ * @deprecated since pattern-navigation-list.html.twig uses ECL navigation-list component.
+ *
  * Available variables:
  * - "title" (string) (default: ''): title of the navigation list.
  * - "title_url" (string) (default: ''): url of the title.

diff --git a/templates/patterns/navigation_list/pattern-navigation-list.html.twig b/templates/patterns/navigation_list/pattern-navigation-list.html.twig
@@ -11,30 +11,44 @@
     link: {
       label : link.label,
       path : link.url,
-      is_external: link.is_external|default(false)
+      icon_path: ecl_icon_path,
+      external: link.is_external|default(false)
     }
   } %}
   {% set _links = _links|merge([_link]) %}
 {% endfor %}
 
+{% set title = {
+  label: title,
+  path: title_url,
+  icon_path: ecl_icon_path,
+  external: external_link|default(false)
+} %}
+
 {% set _secondary_links = [] %}
 {% for secondary_link in secondary_links %}
   {% set _secondary_link = {
     link: {
       label : secondary_link.label,
       path : secondary_link.url,
-      is_external: secondary_link.is_external|default(false)
+      icon_path: ecl_icon_path,
+      external: secondary_link.is_external|default(false)
     }
   } %}
   {% set _secondary_links = _secondary_links|merge([_secondary_link]) %}
 {% endfor %}
 
-{% include '@oe_theme/compositions/ec-component-navigation-list/navigation-list.html.twig' with {
-  title: title,
-  title_url: title_url,
-  external_link: external_link|default(false),
-  description: description,
-  links: _links,
-  secondary_links: _secondary_links,
-  icon_path: ecl_icon_path
-} only %}
+<div class="ecl-u-mv-s">
+  {% include '@ecl-twig/navigation-list/navigation-list-item.html.twig' with {
+    'title': title,
+    'description': description,
+    'links': _links,
+  } only %}
+
+  {% if _secondary_links is not empty %}
+    {% include '@ecl-twig/navigation-list/navigation-list-item.html.twig' with {
+      'extra_classes': 'ecl-u-border-top ecl-u-border-color-grey-50',
+      'links': _secondary_links,
+    } only %}
+  {% endif %}
+</div>
diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
@@ -1725,31 +1725,39 @@
     '#fields':
       title: 'Navigation list title'
       title_url: 'http://example.com'
+      external_link: true
       description: 'Navigation list description'
       links:
         - label: 'Child 1'
           url: 'http://example.com/child1'
+          is_external: true
         - label: 'Child 2'
           url: 'http://example.com/child2'
         - label: 'Child 3'
           url: 'http://example.com/child3'
       secondary_links:
         - label: 'Secondary Link 1'
           url: 'http://example.com/secondary1'
+          is_external: true
         - label: 'Secondary Link 2'
           url: 'http://example.com/secondary2'
   assertions:
     equals:
-      'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
-      'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 'Navigation list description'
-      'li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/child1"]': 'Child 1'
-      'li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
-      'li.ecl-unordered-list__item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
-      'div.ecl-u-border-top li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/secondary1"]': 'Secondary Link 1'
-      'div.ecl-u-border-top li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/secondary2"]': 'Secondary Link 2'
+      'h1.ecl-content-block__title a.ecl-link--standalone.ecl-link[href="http://example.com"] .ecl-link__label': 'Navigation list title'
+      'div.ecl-content-block__description': 'Navigation list description'
+      'li.ecl-content-block__link-item:nth-child(1) a.ecl-link[href="http://example.com/child1"] .ecl-link__label': 'Child 1'
+      'li.ecl-content-block__link-item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
+      'li.ecl-content-block__link-item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
+      'article.ecl-u-border-top li.ecl-content-block__link-item:nth-child(1) a.ecl-link[href="http://example.com/secondary1"] .ecl-link__label': 'Secondary Link 1'
+      'article.ecl-u-border-top li.ecl-content-block__link-item:nth-child(2) a.ecl-link[href="http://example.com/secondary2"]': 'Secondary Link 2'
     count:
-      ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 2
-      li.ecl-unordered-list__item: 5
+      'h1.ecl-content-block__title a.ecl-link .ecl-icon': 1
+      'li.ecl-content-block__link-item:nth-child(1) a.ecl-link .ecl-icon': 2
+      'li.ecl-content-block__link-item:nth-child(2) a.ecl-link .ecl-icon': 0
+      'article.ecl-u-border-top li.ecl-content-block__link-item:nth-child(1) a.ecl-link .ecl-link__label': 1
+      'article.ecl-u-border-top li.ecl-content-block__link-item:nth-child(2) a.ecl-link .ecl-link__label': 0
+      ul.ecl-content-block__link-list: 2
+      li.ecl-content-block__link-item: 5
 - array:
     '#type': pattern
     '#id': navigation_list
@@ -1759,11 +1767,12 @@
       description: 'Navigation list description'
   assertions:
     equals:
-      'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
-      'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 'Navigation list description'
+      'h1.ecl-content-block__title a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
+      'div.ecl-content-block__description': 'Navigation list description'
     count:
-      ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 0
-      li.ecl-unordered-list__item: 0
+      'h1.ecl-content-block__title a.ecl-link .ecl-icon': 0
+      ul.ecl-content-block__link-list: 0
+      li.ecl-content-block__link-item: 0
       div.ecl-u-border-top: 0
 - array:
     '#type': pattern
@@ -1780,14 +1789,14 @@
           url: 'http://example.com/child3'
   assertions:
     equals:
-      'h2.ecl-u-ma-none.ecl-u-type-prolonged-xl.ecl-u-type-bold a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
-      'li.ecl-unordered-list__item:nth-child(1) a.ecl-link[href="http://example.com/child1"]': 'Child 1'
-      'li.ecl-unordered-list__item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
-      'li.ecl-unordered-list__item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
+      'h1.ecl-content-block__title a.ecl-link--standalone.ecl-link[href="http://example.com"]': 'Navigation list title'
+      'li.ecl-content-block__link-item:nth-child(1) a.ecl-link[href="http://example.com/child1"]': 'Child 1'
+      'li.ecl-content-block__link-item:nth-child(2) a.ecl-link[href="http://example.com/child2"]': 'Child 2'
+      'li.ecl-content-block__link-item:nth-child(3) a.ecl-link[href="http://example.com/child3"]': 'Child 3'
     count:
-      ul.ecl-u-mt-m.ecl-unordered-list.ecl-unordered-list--no-bullet: 1
-      li.ecl-unordered-list__item: 3
-      'p.ecl-u-mb-none.ecl-u-mt-m.ecl-u-type-color-grey.ecl-u-type-paragraph': 0
+      ul.ecl-content-block__link-list: 1
+      li.ecl-content-block__link-item: 3
+      div.ecl-content-block__description: 0
       div.ecl-u-border-top: 0
 - array:
     '#type': pattern