Merge pull request #343 from openeuropa/OPENEUROPA-1987

OPENEUROPA-1987: Port Dropdown to 2.x.
openeuropa · Oct 24, 2019 · 44a15f5 · 44a15f5
2 parents e90cdb0 + 8161ebe
commit 44a15f5
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 55 deletions.
diff --git a/behat.yml.dist b/behat.yml.dist
@@ -14,7 +14,7 @@ default:
             elements:
               about dropdown menu: ".ecl-menu-legacy__item:nth-child(2) .ecl-menu-legacy__mega"
               breadcrumb: "nav.ecl-breadcrumb"
-              dropdown content: ".ecl-link-block__list"
+              dropdown content: ".ecl-unordered-list"
               language switcher: ".ecl-language-list"
               language switcher link: ".ecl-site-header__selector"
               language switcher links: ".ecl-language-list--overlay"

diff --git a/ecl-builder.config.js b/ecl-builder.config.js
@@ -42,6 +42,7 @@ module.exports = {
     { from: path.resolve(nodeModules, '@ecl-twig'), patterns: 'ec-component-breadcrumb/*.twig', to: path.resolve(outputFolder, 'components') },
     { from: path.resolve(nodeModules, '@ecl-twig'), patterns: 'ec-component-button/*.twig', to: path.resolve(outputFolder, 'components') },
     { from: path.resolve(nodeModules, '@ecl-twig'), patterns: 'ec-component-card/*.twig', to: path.resolve(outputFolder, 'components') },
+    { from: path.resolve(nodeModules, '@ecl-twig'), patterns: 'ec-component-dropdown-legacy/*.twig', to: path.resolve(outputFolder, 'components') },
     { from: path.resolve(nodeModules, '@ecl-twig'), patterns: 'ec-component-expandable/*.twig', to: path.resolve(outputFolder, 'components') },
     { from: path.resolve(nodeModules, '@ecl-twig'), patterns: 'ec-component-file/*.twig', to: path.resolve(outputFolder, 'components') },
     { from: path.resolve(nodeModules, '@ecl-twig'), patterns: 'ec-component-footer/*.twig', to: path.resolve(outputFolder, 'components') },

diff --git a/oe_theme.libraries.yml b/oe_theme.libraries.yml
@@ -25,10 +25,4 @@ dialogs:
     js/dialogs.js: {}
   dependencies:
     - core/drupal
-
-dropdown:
-  js:
-    js/dropdown.js: {}
-  dependencies:
-    - core/drupal
     - oe_theme/base
diff --git a/oe_theme.theme b/oe_theme.theme
@@ -706,24 +706,7 @@ function oe_theme_preprocess_pattern_banner_video(array &$variables): void {
  * Implements hook_preprocess_HOOK().
  */
 function oe_theme_preprocess_pattern_dropdown(array &$variables): void {
-  $defaults = [
-    'wrapper_id' => 'ecl-button-dropdown',
-    'expandable_id' => 'expandable-ecl-button-dropdown',
-    'button_id' => 'button-ecl-button-dropdown',
-  ];
-
-  foreach ($defaults as $key => $id) {
-    if (!empty($variables[$key])) {
-      continue;
-    }
-
-    $variables[$key] = Html::getUniqueId($id);
-  }
-
-  // @todo: Remove this duplicated code and reuse the link_block from below.
-  foreach ($variables['links'] as $key => $link) {
-    $variables['links'][$key]['href'] = $link['url'];
-  }
+  $variables['id'] = Html::getUniqueId('ecl-button-dropdown');
 }
 
 /**

diff --git a/templates/patterns/dropdown/dropdown.ui_patterns.yml b/templates/patterns/dropdown/dropdown.ui_patterns.yml
@@ -10,13 +10,11 @@ dropdown:
     links:
       type: "array"
       label: "Links"
-      description: "Array of links"
+      description: "Array of links, 'url' values must be a string or object of type \\Drupal\\Core\\Url."
       preview:
         - label: 'European Commission'
           url: 'http://example.com'
         - label: 'Priorities'
           url: 'http://example.com'
         - label: 'Jobs, Growth and Investment'
           url: 'http://example.com'
-  libraries:
-    - oe_theme/dropdown
diff --git a/templates/patterns/dropdown/pattern-dropdown.html.twig b/templates/patterns/dropdown/pattern-dropdown.html.twig
@@ -4,7 +4,28 @@
  * Dropdown component.
  */
 #}
-{% include '@ecl/ec-component-dropdown' with {
-  'button_label': button_label,
-  'links': links,
+{% set _links = {} %}
+{% for link in links %}
+  {% set _link = {
+    label: link(link.label, link.url)
+  } %}
+  {% set _links = _links|merge([_link]) %}
+{% endfor %}
+
+{% include '@ecl/dropdown-legacy' with {
+  'id': id,
+  'button': {
+    'label': button_label,
+    'variant': 'secondary',
+    'icon': {
+      'path': ecl_icon_path,
+      'type': 'ui',
+      'name': 'corner-arrow',
+      'transform': 'rotate-180',
+      'size': 'fluid',
+    },
+  },
+  'list': {
+    'items': _links,
+  },
 } %}
diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
@@ -793,29 +793,28 @@
       '.ecl-accordion2__content#id-0-content': "Body 1"
       '.ecl-accordion2__title button.ecl-accordion2__toggle[aria-controls="id-1-content"]': "Title 2"
       '.ecl-accordion2__content#id-1-content': "Body 2"
-#- array:
-#    '#type': pattern
-#    '#id': dropdown
-#    '#fields':
-#      identifier: "id"
-#      button_label: "Dropdown"
-#      links:
-#        - label: 'Link 1'
-#          url: 'http://example.com/1'
-#        - label: 'Link 2'
-#          url: 'http://example.com/2'
-#        - label: 'Link 3'
-#          url: 'http://example.com/3'
-#  assertions:
-#    count:
-#      'a.ecl-link-block__link[href="http://example.com/1"]': 1
-#      'a.ecl-link-block__link[href="http://example.com/2"]': 1
-#      'a.ecl-link-block__link[href="http://example.com/3"]': 1
-#    equals:
-#      'button.ecl-button': "Dropdown"
-#      '.ecl-link-block__list .ecl-link-block__item:nth-child(1)': "Link 1"
-#      '.ecl-link-block__list .ecl-link-block__item:nth-child(2)': "Link 2"
-#      '.ecl-link-block__list .ecl-link-block__item:nth-child(3)': "Link 3"
+- array:
+    '#type': pattern
+    '#id': dropdown
+    '#fields':
+      button_label: "Dropdown"
+      links:
+        - label: 'Link 1'
+          url: 'http://example.com/1'
+        - label: 'Link 2'
+          url: 'http://example.com/2'
+        - label: 'Link 3'
+          url: 'http://example.com/3'
+  assertions:
+    count:
+      '.ecl-dropdown-legacy__content a[href="http://example.com/1"]': 1
+      '.ecl-dropdown-legacy__content a[href="http://example.com/2"]': 1
+      '.ecl-dropdown-legacy__content a[href="http://example.com/3"]': 1
+    equals:
+      'button.ecl-dropdown-legacy__toggle span.ecl-button__label': "Dropdown"
+      '.ecl-dropdown-legacy__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(1)': "Link 1"
+      '.ecl-dropdown-legacy__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(2)': "Link 2"
+      '.ecl-dropdown-legacy__content .ecl-unordered-list .ecl-unordered-list__item:nth-child(3)': "Link 3"
 #- array:
 #    '#type': pattern
 #    '#id': field

diff --git a/tests/features/theme-showcase.feature b/tests/features/theme-showcase.feature
@@ -45,7 +45,7 @@ Feature: Theme showcase
     And the "about dropdown menu" is not visible
     But the "priorities dropdown menu" is visible
 
-  @javascript
+  @javascript @ecl2
   Scenario: The dropdown component shows/hides on click event
     When I am on "the ECL dropdown component page"
     Then the "dropdown content" is not visible