Merge pull request #870 from openeuropa/EWPP-1277

[EWPP-1142] EWPP-1277: Port contextual navigation to ECL v3.
openeuropa · Jul 19, 2021 · 5980e59 · 5980e59
2 parents 4126a9d + b3b31c8
commit 5980e59
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 7 deletions.
diff --git a/sass/components/_contextual_navigation.scss b/sass/components/_contextual_navigation.scss
@@ -0,0 +1,92 @@
+@use "sass:map";
+@use '@ecl/theme-dev/theme';
+@use '@ecl/vanilla-layout-grid/mixins/breakpoints';
+
+$outline-width: 3px !default;
+
+.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;
+  }
+  button.ecl-button--ghost:focus {
+    padding: 0;
+    border: 0;
+    outline: $outline-width solid map.get(theme.$color, 'secondary');
+  }
+}
+
+.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
@@ -0,0 +1,30 @@
+@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 {
+  display: block;
+}
+
+.ecl-contextual-navigation__item--more {
+  display: none;
+}
diff --git 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
@@ -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
@@ -19,3 +19,6 @@
 @use "./components/description_list";
 @use "./components/media_iframe";
 @use "./components/expandable";
+@use "./components/contextual_navigation" with (
+  $outline-width: 2px,
+);
diff --git 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
@@ -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
diff --git a/templates/patterns/context_nav/js/contextual_navigation.js b/templates/patterns/context_nav/js/contextual_navigation.js
@@ -0,0 +1,65 @@
+/**
+ * @file
+ * Contextual navigation behavior.
+ *
+ * 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) {
+  /**
+   * @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);