From deff3d5c8f429aa2b61b5d9621fad4a4ac7840c4 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Mon, 5 Jul 2021 19:21:10 +0300
Subject: [PATCH 1/8] EWPP-1277: Port CSS for recreating contextual navigation
 composition inside ECL3.

---
 sass/components/_contextual_navigation.scss   | 85 +++++++++++++++++++
 .../_contextual_navigation_print.scss         | 39 +++++++++
 sass/print.scss                               |  5 +-
 sass/style-ec.scss                            |  1 +
 sass/style-eu.scss                            |  1 +
 5 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 sass/components/_contextual_navigation.scss
 create mode 100644 sass/components/_contextual_navigation_print.scss

diff --git a/sass/components/_contextual_navigation.scss b/sass/components/_contextual_navigation.scss
new file mode 100644
index 000000000..3b66f73b5
--- /dev/null
+++ b/sass/components/_contextual_navigation.scss
@@ -0,0 +1,85 @@
+@use "sass:map";
+@use '@ecl/theme-dev/theme';
+@use '@ecl/vanilla-layout-grid/mixins/breakpoints';
+
+.ecl-contextual-navigation {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.ecl-contextual-navigation__label {
+  color: map.get(theme.$color, 'black-100');
+  font: map.get(theme.$font, 'm');
+}
+
+.ecl-contextual-navigation__list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: map.get(theme.$spacing, 's');
+  padding-left: 0;
+}
+
+.ecl-contextual-navigation__item {
+  border-right: 1px solid map.get(theme.$color, 'grey-50');
+  display: block;
+  margin-right: map.get(theme.$spacing, 's');
+  padding-right: map.get(theme.$spacing, 's');
+}
+
+.ecl-contextual-navigation__item:last-child {
+  border-right-width: 0;
+  margin-right: 0;
+  padding-right: 0;
+}
+
+.ecl-contextual-navigation__item--collapsed {
+  display: none;
+
+  .no-js & {
+    display: block;
+  }
+}
+
+.ecl-contextual-navigation__item--more {
+  .no-js & {
+    display: none;
+  }
+}
+
+.ecl-contextual-navigation__list[aria-expanded='true'] {
+  .ecl-contextual-navigation__item--collapsed {
+    display: block;
+  }
+}
+
+.ecl-contextual-navigation__more {
+  font-weight: map.get(theme.$font, 'weight-regular');
+  line-height: 1;
+  padding: 0;
+
+  &:hover {
+    color: map.get(theme.$color, 'black-100');
+  }
+
+  &:focus {
+    color: map.get(theme.$color, 'black-100');
+    outline-offset: 2px;
+  }
+}
+
+@include breakpoints.up('sm') {
+  .ecl-contextual-navigation {
+    flex-direction: row;
+  }
+
+  .ecl-contextual-navigation__label {
+    margin-right: map.get(theme.$spacing, '4xl');
+  }
+
+  .ecl-contextual-navigation__list {
+    margin-top: 0;
+  }
+}
diff --git a/sass/components/_contextual_navigation_print.scss b/sass/components/_contextual_navigation_print.scss
new file mode 100644
index 000000000..78a0d021d
--- /dev/null
+++ b/sass/components/_contextual_navigation_print.scss
@@ -0,0 +1,39 @@
+@use "sass:map";
+@use '@ecl/theme-dev/theme';
+
+.ecl-contextual-navigation {
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+}
+
+.ecl-contextual-navigation__label {
+  color: map.get(theme.$color, 'black-100');
+  font: map.get(theme.$font-print, 'm');
+  margin-right: map.get(theme.$spacing-print, 'xl');
+}
+
+.ecl-contextual-navigation__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.ecl-contextual-navigation__item {
+  border-right: 1px solid map.get(theme.$color, 'grey-50');
+  display: block;
+  margin-right: map.get(theme.$spacing, 's');
+  padding-right: map.get(theme.$spacing, 's');
+}
+
+.ecl-contextual-navigation__item:last-child {
+  border-right-width: 0;
+  margin-right: 0;
+  padding-right: 0;
+}
+
+.ecl-contextual-navigation__item--more {
+  display: none;
+}
diff --git a/sass/print.scss b/sass/print.scss
index 48474a34a..2bc821d1b 100644
--- a/sass/print.scss
+++ b/sass/print.scss
@@ -1,6 +1,3 @@
 // Style adjustment for print version.
 
-// Workaround which should be removed after the release of Webtools with https://citnet.tech.ec.europa.eu/CITnet/jira/browse/WEBTOOLS-12842.
-#globan, #cookie-consent-banner {
-  display: none;
-}
+@use "./components/_contextual_navigation_print";
diff --git a/sass/style-ec.scss b/sass/style-ec.scss
index 88c8e0002..553edb7c8 100644
--- a/sass/style-ec.scss
+++ b/sass/style-ec.scss
@@ -14,3 +14,4 @@
 @use "./components/description_list";
 @use "./components/media_iframe";
 @use "./components/expandable";
+@use "./components/_contextual_navigation";
diff --git a/sass/style-eu.scss b/sass/style-eu.scss
index d0d6fabd4..b2fe3f31a 100644
--- a/sass/style-eu.scss
+++ b/sass/style-eu.scss
@@ -19,3 +19,4 @@
 @use "./components/description_list";
 @use "./components/media_iframe";
 @use "./components/expandable";
+@use "./components/_contextual_navigation";

From e02118777a7b0dc6c0116adbbcf6d013ce9eff87 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Mon, 5 Jul 2021 19:22:19 +0300
Subject: [PATCH 2/8] EWPP-1277: Adjust contextual navigation pattern.

---
 .../contextual-navigation.html.twig                         | 3 ---
 templates/patterns/context_nav/context_nav.ui_patterns.yml  | 6 ++++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/templates/compositions/ec-component-contextual-navigation/contextual-navigation.html.twig b/templates/compositions/ec-component-contextual-navigation/contextual-navigation.html.twig
index b52e0faf3..763dcd3d2 100644
--- a/templates/compositions/ec-component-contextual-navigation/contextual-navigation.html.twig
+++ b/templates/compositions/ec-component-contextual-navigation/contextual-navigation.html.twig
@@ -44,9 +44,6 @@
 
   class="{{ _css_class }}"{{ _extra_attributes|raw }}
   data-ecl-contextual-navigation
-  {# Prevent initialization for the moment #}
-  {# TODO: Deprecate or reinstate the component. #}
-  {# data-ecl-auto-init="ContextualNavigation" #}
 >
   <div class="ecl-contextual-navigation__label">{{ _label }}</div>
   <ul
diff --git a/templates/patterns/context_nav/context_nav.ui_patterns.yml b/templates/patterns/context_nav/context_nav.ui_patterns.yml
index 977a470c3..024648f68 100644
--- a/templates/patterns/context_nav/context_nav.ui_patterns.yml
+++ b/templates/patterns/context_nav/context_nav.ui_patterns.yml
@@ -33,3 +33,9 @@ context_nav:
       label: "More label"
       description: "Label of the \"see more items\" button"
       preview: "See more"
+  libraries:
+    - contextual_navigation:
+        js:
+          js/contextual_navigation.js: { }
+        dependencies:
+          - core/drupal

From 89ece6bff9be92f16c777fcbd8c0dbf4a139d096 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Mon, 5 Jul 2021 19:24:12 +0300
Subject: [PATCH 3/8] EWPP-1277: Add javascript for covering contextual
 navigation behavior.

---
 .../context_nav/js/contextual_navigation.js   | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 templates/patterns/context_nav/js/contextual_navigation.js

diff --git a/templates/patterns/context_nav/js/contextual_navigation.js b/templates/patterns/context_nav/js/contextual_navigation.js
new file mode 100644
index 000000000..45c64715e
--- /dev/null
+++ b/templates/patterns/context_nav/js/contextual_navigation.js
@@ -0,0 +1,66 @@
+/**
+ * @file
+ * Contextual navigation initialisation code.
+ *
+ * Simplified version of javascript code for supporting contextual navigation composition which is not part of ECL
+ * anymore. Based on https://github.com/ec-europa/europa-component-library/tree/v2-dev/src/systems/ec/implementations/vanilla/packages/ec-component-contextual-navigation
+ * implementation. In opposite to original solution we don't use anymore 'autoInit' approach. Initialization of all
+ * existing
+ */
+(function (Drupal) {
+  /**
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the contextual navigation behaviors.
+   * @prop {Drupal~behaviorDetach} detach
+   *   Detaches the contextual navigation behaviors.
+   */
+  Drupal.behaviors.eclContextualNavigation = {
+    attach: function attach(context, settings) {
+      Array.prototype.forEach.call(document.querySelectorAll('[data-ecl-contextual-navigation]'), function (contextualNav) {
+        Drupal.contextualNavigation.initialize(contextualNav);
+      });
+    },
+    detach: function detach(context, settings, trigger) {
+      Drupal.contextualNavigation.destroy(context);
+    }
+
+  };
+
+  /**
+   * Contextual navigation helper methods.
+   *
+   * Contains useful methods for covering basic functionality of contextual navigation composition.
+   *
+   * @namespace
+   */
+  Drupal.contextualNavigation = {
+
+    // Selector for list navigation element.
+    listSelector: '[data-ecl-contextual-navigation-list]',
+    // Selector for more item element.
+    moreItemSelector: '[data-ecl-contextual-navigation-more]',
+
+
+    initialize: function (element) {
+      var list = element.querySelector(this.listSelector);
+      if (list) {
+        list
+          .querySelector(this.moreItemSelector)
+          .addEventListener('click', this.handleClickOnMore);
+      }
+    },
+    handleClickOnMore: function () {
+      if (this.parentNode && this.parentNode.parentNode) {
+        this.parentNode.parentNode.setAttribute('aria-expanded', 'true');
+        this.parentNode.parentNode.removeChild(this.parentNode);
+      }
+    },
+    destroy: function (element) {
+      element
+        .querySelector(this.moreItemSelector)
+        .removeEventListener('click', this.handleClickOnMore);
+    }
+  }
+})(Drupal);

From b9a840a38b955bc4d0361d53bf670280b8757fe3 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Tue, 6 Jul 2021 09:38:41 +0300
Subject: [PATCH 4/8] EWPP-1277: Fix styling of 'more items' link.

---
 sass/components/_contextual_navigation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/components/_contextual_navigation.scss b/sass/components/_contextual_navigation.scss
index 3b66f73b5..56125c3cd 100644
--- a/sass/components/_contextual_navigation.scss
+++ b/sass/components/_contextual_navigation.scss
@@ -56,7 +56,7 @@
 }
 
 .ecl-contextual-navigation__more {
-  font-weight: map.get(theme.$font, 'weight-regular');
+  font-weight: map.get(theme.$font-weight, 'regular');
   line-height: 1;
   padding: 0;
 

From 53688a13d4740779d8879b581a27f09ca189b528 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Tue, 6 Jul 2021 10:17:59 +0300
Subject: [PATCH 5/8] EWPP-1277: Fix Accordion paragraph test.

---
 tests/Functional/ParagraphsTest.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/Functional/ParagraphsTest.php b/tests/Functional/ParagraphsTest.php
index eaeaf8a75..15397e1f2 100644
--- a/tests/Functional/ParagraphsTest.php
+++ b/tests/Functional/ParagraphsTest.php
@@ -42,11 +42,11 @@ public function testAccordionItemParagraph(): void {
     $this->assertSession()->fieldExists('field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_text][0][value]');
     $this->assertSession()->fieldExists('field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_text_long][0][value]');
     $this->assertSession()->fieldNotExists('field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_icon]');
-
     $values = [
       'title[0][value]' => 'Test Accordion',
       'field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_text][0][value]' => 'Accordion item title',
       'field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_text_long][0][value]' => 'Accordion item body',
+      'oe_content_content_owner[0][target_id]' => 'Directorate-General for Informatics',
     ];
     $this->drupalPostForm(NULL, $values, 'Save');
     $this->drupalGet('/node/1');

From 288fb5065a8ad6e6b5265f59b5914266ba41f3b3 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Tue, 6 Jul 2021 15:02:39 +0300
Subject: [PATCH 6/8] EWPP-1277: Fix styling issue with more item link and
 print version.

---
 sass/components/_contextual_navigation.scss       | 5 +++++
 sass/components/_contextual_navigation_print.scss | 9 ---------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/sass/components/_contextual_navigation.scss b/sass/components/_contextual_navigation.scss
index 56125c3cd..fcac35810 100644
--- a/sass/components/_contextual_navigation.scss
+++ b/sass/components/_contextual_navigation.scss
@@ -47,6 +47,11 @@
   .no-js & {
     display: none;
   }
+  button.ecl-button--ghost:focus {
+    padding: 0;
+    border: 0;
+    outline: 3px solid map.get(theme.$color, 'yellow');
+  }
 }
 
 .ecl-contextual-navigation__list[aria-expanded='true'] {
diff --git a/sass/components/_contextual_navigation_print.scss b/sass/components/_contextual_navigation_print.scss
index 78a0d021d..19b18f990 100644
--- a/sass/components/_contextual_navigation_print.scss
+++ b/sass/components/_contextual_navigation_print.scss
@@ -22,16 +22,7 @@
 }
 
 .ecl-contextual-navigation__item {
-  border-right: 1px solid map.get(theme.$color, 'grey-50');
   display: block;
-  margin-right: map.get(theme.$spacing, 's');
-  padding-right: map.get(theme.$spacing, 's');
-}
-
-.ecl-contextual-navigation__item:last-child {
-  border-right-width: 0;
-  margin-right: 0;
-  padding-right: 0;
 }
 
 .ecl-contextual-navigation__item--more {

From 15776bc61799117051fb806a8bcaa7a6bd2191db Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Tue, 6 Jul 2021 16:49:41 +0300
Subject: [PATCH 7/8] EWPP-1277: Fix issue with EU styling.

---
 sass/components/_contextual_navigation.scss | 4 +++-
 sass/style-ec.scss                          | 2 +-
 sass/style-eu.scss                          | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/sass/components/_contextual_navigation.scss b/sass/components/_contextual_navigation.scss
index fcac35810..54e99fafc 100644
--- a/sass/components/_contextual_navigation.scss
+++ b/sass/components/_contextual_navigation.scss
@@ -2,6 +2,8 @@
 @use '@ecl/theme-dev/theme';
 @use '@ecl/vanilla-layout-grid/mixins/breakpoints';
 
+$outline-width: 3px !default;
+
 .ecl-contextual-navigation {
   display: flex;
   flex-direction: column;
@@ -50,7 +52,7 @@
   button.ecl-button--ghost:focus {
     padding: 0;
     border: 0;
-    outline: 3px solid map.get(theme.$color, 'yellow');
+    outline: $outline-width solid map.get(theme.$color, 'secondary');
   }
 }
 
diff --git a/sass/style-ec.scss b/sass/style-ec.scss
index 553edb7c8..c3bdee289 100644
--- a/sass/style-ec.scss
+++ b/sass/style-ec.scss
@@ -14,4 +14,4 @@
 @use "./components/description_list";
 @use "./components/media_iframe";
 @use "./components/expandable";
-@use "./components/_contextual_navigation";
+@use "./components/contextual_navigation";
diff --git a/sass/style-eu.scss b/sass/style-eu.scss
index b2fe3f31a..b59f61b11 100644
--- a/sass/style-eu.scss
+++ b/sass/style-eu.scss
@@ -19,4 +19,6 @@
 @use "./components/description_list";
 @use "./components/media_iframe";
 @use "./components/expandable";
-@use "./components/_contextual_navigation";
+@use "./components/contextual_navigation" with (
+  $outline-width: 2px,
+);

From b3b31c866b49b35e7cb846e80b7e48d6e861f045 Mon Sep 17 00:00:00 2001
From: Sergii Pavlenko <sergii.pavlenko.v@gmail.com>
Date: Tue, 6 Jul 2021 17:15:20 +0300
Subject: [PATCH 8/8] EWPP-1277: Fix code documentation in js file.

---
 .../patterns/context_nav/js/contextual_navigation.js     | 9 ++++-----
 tests/Functional/ParagraphsTest.php                      | 1 +
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/patterns/context_nav/js/contextual_navigation.js b/templates/patterns/context_nav/js/contextual_navigation.js
index 45c64715e..402fce636 100644
--- a/templates/patterns/context_nav/js/contextual_navigation.js
+++ b/templates/patterns/context_nav/js/contextual_navigation.js
@@ -1,11 +1,10 @@
 /**
  * @file
- * Contextual navigation initialisation code.
+ * Contextual navigation behavior.
  *
- * Simplified version of javascript code for supporting contextual navigation composition which is not part of ECL
- * anymore. Based on https://github.com/ec-europa/europa-component-library/tree/v2-dev/src/systems/ec/implementations/vanilla/packages/ec-component-contextual-navigation
- * implementation. In opposite to original solution we don't use anymore 'autoInit' approach. Initialization of all
- * existing
+ * Simplified version of the deprecated ECL contextual navigation javascript logic, based on
+ * https://github.com/ec-europa/europa-component-library/tree/v2-dev/src/systems/ec/implementations/vanilla/packages/ec-component-contextual-navigation.
+ * As opposed to using the original 'autoInit' approach we instead add a simple event listener to the appropriate elements.
  */
 (function (Drupal) {
   /**
diff --git a/tests/Functional/ParagraphsTest.php b/tests/Functional/ParagraphsTest.php
index 15397e1f2..a796ec07a 100644
--- a/tests/Functional/ParagraphsTest.php
+++ b/tests/Functional/ParagraphsTest.php
@@ -42,6 +42,7 @@ public function testAccordionItemParagraph(): void {
     $this->assertSession()->fieldExists('field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_text][0][value]');
     $this->assertSession()->fieldExists('field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_text_long][0][value]');
     $this->assertSession()->fieldNotExists('field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_icon]');
+
     $values = [
       'title[0][value]' => 'Test Accordion',
       'field_oe_demo_body[0][subform][field_oe_paragraphs][0][subform][field_oe_text][0][value]' => 'Accordion item title',