Merge branch 'EPIC-EWPP-1142-theme-ECL-v3' into EWPP-1278

openeuropa · Jul 26, 2021 · 5f2fa7b · 5f2fa7b
2 parents 43e3758 + 913e3b4
commit 5f2fa7b
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 111 deletions.
diff --git a/composer.json b/composer.json
@@ -51,7 +51,7 @@
         "openeuropa/oe_corporate_blocks": "~4.0",
         "openeuropa/oe_corporate_countries": "~2.0",
         "openeuropa/oe_media": "~1.12",
-        "openeuropa/oe_multilingual": "dev-master",
+        "openeuropa/oe_multilingual": "~1.8",
         "openeuropa/oe_paragraphs": "dev-master",
         "openeuropa/oe_search": "~1.0",
         "openeuropa/oe_webtools": "~1.10",
@@ -66,7 +66,8 @@
         "We explicitly require consolidation/annotated-command to allow lower 'composer update --prefer-lowest' to complete successfully."
     ],
     "conflict": {
-        "openeuropa/oe_corporate_blocks": "<3.0.0"
+        "openeuropa/oe_corporate_blocks": "<3.0.0",
+        "openeuropa/oe_multilingual": "<1.8.0"
     },
     "scripts": {
         "post-install-cmd": "./vendor/bin/run drupal:site-setup",

diff --git a/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php b/modules/oe_theme_helper/src/TwigExtension/TwigExtension.php
@@ -277,32 +277,40 @@ public function toEclAttributes($attributes): array {
    */
   public function toEclIcon(array $context, $icon, string $size = ''): array {
     $path = $context['ecl_icon_path'];
+    $social_path = $context['ecl_icon_social_media_path'];
 
     // ECL supported icons naming and rotation.
     $icons = [
       'facebook' => [
         'name' => 'facebook',
+        'social' => TRUE,
       ],
       'instagram' => [
         'name' => 'instagram',
+        'social' => TRUE,
       ],
       'linkedin' => [
         'name' => 'linkedin',
+        'social' => TRUE,
       ],
       'pinterest' => [
         'name' => 'pinterest',
+        'social' => TRUE,
       ],
       'rss' => [
         'name' => 'rss',
       ],
       'skype' => [
         'name' => 'skype',
+        'social' => TRUE,
       ],
       'twitter' => [
         'name' => 'twitter',
+        'social' => TRUE,
       ],
       'youtube' => [
         'name' => 'youtube',
+        'social' => TRUE,
       ],
       'audio' => [
         'name' => 'audio',
@@ -469,9 +477,6 @@ public function toEclIcon(array $context, $icon, string $size = ''): array {
       'plus' => [
         'name' => 'plus',
       ],
-      'rounded-arrow' => [
-        'name' => 'rounded-arrow',
-      ],
       'solid-arrow' => [
         'name' => 'solid-arrow',
       ],
@@ -485,7 +490,7 @@ public function toEclIcon(array $context, $icon, string $size = ''): array {
         'name' => 'close',
       ],
       'up' => [
-        'name' => 'rounded-arrow',
+        'name' => 'corner-arrow',
       ],
       'arrow-down' => [
         'name' => 'solid-arrow',
@@ -495,25 +500,28 @@ public function toEclIcon(array $context, $icon, string $size = ''): array {
         'name' => 'solid-arrow',
       ],
       'breadcrumb' => [
-        'name' => 'rounded-arrow',
+        'name' => 'corner-arrow',
         'transform' => 'rotate-90',
       ],
       'down' => [
-        'name' => 'rounded-arrow',
+        'name' => 'corner-arrow',
         'transform' => 'rotate-180',
       ],
       'left' => [
-        'name' => 'rounded-arrow',
+        'name' => 'corner-arrow',
         'transform' => 'rotate-270',
       ],
       'right' => [
-        'name' => 'rounded-arrow',
+        'name' => 'corner-arrow',
         'transform' => 'rotate-90',
       ],
     ];
 
     if (array_key_exists($icon, $icons)) {
       $icons[$icon]['path'] = $path;
+      if (isset($icons[$icon]['social']) && $icons[$icon]['social']) {
+        $icons[$icon]['path'] = $social_path;
+      }
       if ($size) {
         $icons[$icon]['size'] = $size;
       }

diff --git a/modules/oe_theme_helper/templates/oe-theme-helper-site-navigation.html.twig b/modules/oe_theme_helper/templates/oe-theme-helper-site-navigation.html.twig
@@ -10,14 +10,8 @@
  * @ingroup themeable
  */
 #}
-{% if menu_items %}
-  {{ pattern('navigation_menu', {
-    label: 'Menu'|t,
-    items: menu_items,
-    site_name: site_name,
-  }, 'vertical') }}
-{% else %}
-  <div class="ecl-site-header-{{ ecl_branding }}__banner">
-    <div class="ecl-container">{{ site_name }}</div>
-  </div>
-{% endif %}
+{{ pattern('navigation_menu', {
+  label: 'Menu'|t,
+  items: menu_items,
+  site_name: site_name,
+}, 'vertical') }}
diff --git a/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php b/modules/oe_theme_helper/tests/src/Unit/TwigExtensionTest.php
@@ -273,7 +273,10 @@ protected static function getEuropeanUnionLanguageList(): array {
    * @dataProvider toEclIconProvider
    */
   public function testToEclIcon(string $icon_name, array $expected_icon_array, string $size = NULL) {
-    $context = ['ecl_icon_path' => '/path/to/theme/resources/icons/'];
+    $context = [
+      'ecl_icon_path' => '/path/to/theme/resources/icons/',
+      'ecl_icon_social_media_path' => '/path/to/theme/resources/social-media-icons/',
+    ];
     // We join the resulting array from to_ecl_icon() function so that we have
     // a visual representation of the array being returned by the function.
     if ($size === NULL) {
@@ -299,13 +302,24 @@ public function toEclIconProvider(): array {
       [
         'right',
         [
-          'name' => 'rounded-arrow',
+          'name' => 'corner-arrow',
           'transform' => 'rotate-90',
           'path' => '/path/to/theme/resources/icons/',
           'size' => 'xs',
         ],
         'xs',
       ],
+      [
+        'instagram',
+        [
+          'name' => 'instagram',
+          // A TRUE value is rendered as 1 by twig.
+          'social' => 1,
+          'path' => '/path/to/theme/resources/social-media-icons/',
+          'size' => 'xs',
+        ],
+        'xs',
+      ],
       [
         'close-dark',
         [

diff --git a/oe_theme.theme b/oe_theme.theme
@@ -1587,6 +1587,7 @@ function oe_theme_preprocess_pattern_banner_page(array &$variables): void {
  * Implements hook_preprocess_page().
  */
 function oe_theme_preprocess_page(array &$variables): void {
+  $variables['site_name'] = \Drupal::config('system.site')->get('name');
   $variables['main_attributes'] = new Attribute([
     'class' => ['ecl-u-pb-xl'],
     'id' => ['main-content'],

diff --git a/package.json b/package.json
@@ -14,54 +14,54 @@
     "prepare": "patch-package"
   },
   "dependencies": {
-    "@ecl/builder": "3.0.0-beta.1",
-    "@ecl/twig-component-accordion": "3.0.0-beta.1",
-    "@ecl/twig-component-blockquote": "3.0.0-beta.1",
-    "@ecl/twig-component-breadcrumb-core": "3.0.0-beta.1",
-    "@ecl/twig-component-breadcrumb-standardised": "3.0.0-beta.1",
-    "@ecl/twig-component-button": "3.0.0-beta.1",
-    "@ecl/twig-component-card": "3.0.0-beta.1",
-    "@ecl/twig-component-description-list": "3.0.0-beta.1",
-    "@ecl/twig-component-expandable": "3.0.0-beta.1",
-    "@ecl/twig-component-fact-figures": "3.0.0-beta.1",
-    "@ecl/twig-component-file": "3.0.0-beta.1",
-    "@ecl/twig-component-footer-core": "3.0.0-beta.1",
-    "@ecl/twig-component-footer-standardised": "3.0.0-beta.1",
-    "@ecl/twig-component-gallery": "3.0.0-beta.1",
-    "@ecl/twig-component-hero-banner": "3.0.0-beta.1",
-    "@ecl/twig-component-icon": "3.0.0-beta.1",
-    "@ecl/twig-component-inpage-navigation": "3.0.0-beta.1",
-    "@ecl/twig-component-language-list": "3.0.0-beta.1",
-    "@ecl/twig-component-link": "3.0.0-beta.1",
-    "@ecl/twig-component-media-container": "3.0.0-beta.1",
-    "@ecl/twig-component-menu": "3.0.0-beta.1",
-    "@ecl/twig-component-message": "3.0.0-beta.1",
-    "@ecl/twig-component-page-banner": "3.0.0-beta.1",
-    "@ecl/twig-component-page-header-core": "3.0.0-beta.1",
-    "@ecl/twig-component-page-header-standardised": "3.0.0-beta.1",
-    "@ecl/twig-component-pagination": "3.0.0-beta.1",
-    "@ecl/twig-component-radio": "3.0.0-beta.1",
-    "@ecl/twig-component-search-form": "3.0.0-beta.1",
-    "@ecl/twig-component-site-header-core": "3.0.0-beta.1",
-    "@ecl/twig-component-site-header-standardised": "3.0.0-beta.1",
-    "@ecl/twig-component-skip-link": "3.0.0-beta.1",
-    "@ecl/twig-component-social-media-follow": "3.0.0-beta.1",
-    "@ecl/twig-component-social-media-share": "3.0.0-beta.1",
-    "@ecl/twig-component-table": "3.0.0-beta.1",
-    "@ecl/twig-component-tag": "3.0.0-beta.1",
-    "@ecl/twig-component-text-input": "3.0.0-beta.1",
-    "@ecl/twig-component-timeline": "3.0.0-beta.1",
-    "@ecl/twig-component-datepicker": "3.0.0-beta.1",
-    "@ecl/preset-reset": "3.0.0-beta.1",
-    "@ecl/preset-ec": "3.0.0-beta.1",
-    "@ecl/preset-eu": "3.0.0-beta.1",
+    "@ecl/builder": "3.0.0-beta.2",
+    "@ecl/twig-component-accordion": "3.0.0-beta.2",
+    "@ecl/twig-component-blockquote": "3.0.0-beta.2",
+    "@ecl/twig-component-breadcrumb-core": "3.0.0-beta.2",
+    "@ecl/twig-component-breadcrumb-standardised": "3.0.0-beta.2",
+    "@ecl/twig-component-button": "3.0.0-beta.2",
+    "@ecl/twig-component-card": "3.0.0-beta.2",
+    "@ecl/twig-component-description-list": "3.0.0-beta.2",
+    "@ecl/twig-component-expandable": "3.0.0-beta.2",
+    "@ecl/twig-component-fact-figures": "3.0.0-beta.2",
+    "@ecl/twig-component-file": "3.0.0-beta.2",
+    "@ecl/twig-component-footer-core": "3.0.0-beta.2",
+    "@ecl/twig-component-footer-standardised": "3.0.0-beta.2",
+    "@ecl/twig-component-gallery": "3.0.0-beta.2",
+    "@ecl/twig-component-hero-banner": "3.0.0-beta.2",
+    "@ecl/twig-component-icon": "3.0.0-beta.2",
+    "@ecl/twig-component-inpage-navigation": "3.0.0-beta.2",
+    "@ecl/twig-component-language-list": "3.0.0-beta.2",
+    "@ecl/twig-component-link": "3.0.0-beta.2",
+    "@ecl/twig-component-media-container": "3.0.0-beta.2",
+    "@ecl/twig-component-menu": "3.0.0-beta.2",
+    "@ecl/twig-component-message": "3.0.0-beta.2",
+    "@ecl/twig-component-page-banner": "3.0.0-beta.2",
+    "@ecl/twig-component-page-header-core": "3.0.0-beta.2",
+    "@ecl/twig-component-page-header-standardised": "3.0.0-beta.2",
+    "@ecl/twig-component-pagination": "3.0.0-beta.2",
+    "@ecl/twig-component-radio": "3.0.0-beta.2",
+    "@ecl/twig-component-search-form": "3.0.0-beta.2",
+    "@ecl/twig-component-site-header-core": "3.0.0-beta.2",
+    "@ecl/twig-component-site-header-standardised": "3.0.0-beta.2",
+    "@ecl/twig-component-skip-link": "3.0.0-beta.2",
+    "@ecl/twig-component-social-media-follow": "3.0.0-beta.2",
+    "@ecl/twig-component-social-media-share": "3.0.0-beta.2",
+    "@ecl/twig-component-table": "3.0.0-beta.2",
+    "@ecl/twig-component-tag": "3.0.0-beta.2",
+    "@ecl/twig-component-text-input": "3.0.0-beta.2",
+    "@ecl/twig-component-timeline": "3.0.0-beta.2",
+    "@ecl/twig-component-datepicker": "3.0.0-beta.2",
+    "@ecl/preset-reset": "3.0.0-beta.2",
+    "@ecl/preset-ec": "3.0.0-beta.2",
+    "@ecl/preset-eu": "3.0.0-beta.2",
     "@ecl/ec-component-form-help-block": "2.37.0",
     "@ecl/eu-component-form-help-block": "2.37.0",
     "@ecl/ec-preset-editor": "2.37.0",
-    "@ecl/theme-ec": "3.0.0-beta.1",
-    "@ecl/theme-eu": "3.0.0-beta.1",
-    "@ecl/vanilla-utility-background": "3.0.0-beta.1",
-    "@ecl/vanilla-utility-border": "3.0.0-beta.1",
+    "@ecl/theme-ec": "3.0.0-beta.2",
+    "@ecl/theme-eu": "3.0.0-beta.2",
+    "@ecl/vanilla-utility-background": "3.0.0-beta.2",
+    "@ecl/vanilla-utility-border": "3.0.0-beta.2",
     "@ecl/stylelint-config": "0.2.1",
     "chokidar-cli": "1.2.0",
     "grunt": "^1.4.0",

diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
@@ -20,6 +20,11 @@
       </div>
     </div>
   </div>
+  {% if ecl_branding == 'standardised' %}
+    <div class="ecl-site-header-{{ ecl_branding }}__banner">
+      <div class="ecl-container">{{ site_name }}</div>
+    </div>
+  {% endif %}
   {% block navigation %}
     {{ page.navigation }}
   {% endblock %}

diff --git a/templates/patterns/facts_figures/pattern-facts-figures.html.twig b/templates/patterns/facts_figures/pattern-facts-figures.html.twig
@@ -6,11 +6,27 @@
 #}
 {% if view_all is not empty %}
   {% set _link = {'path' : view_all.path, 'label' : view_all.label} %}
+  {% set view_all_icon = {
+    path: ecl_icon_path,
+    name: "corner-arrow",
+    transform: "rotate-90",
+  } %}
+{% endif %}
+{% if ecl_component_library == 'eu' %}
+  {% set icon_size = 'l' %}
+  {% if view_all_icon is not empty %}
+    {% set view_all_icon = view_all_icon|merge({size: 'm'}) %}
+  {% endif %}
+{% else %}
+  {% set icon_size = 'm' %}
+  {% if view_all_icon is not empty %}
+    {% set view_all_icon = view_all_icon|merge({size: 'xs'}) %}
+  {% endif %}
 {% endif %}
 {% set _items = [] %}
 {% for _item in items %}
   {% set _items = _items|merge([{
-    icon: _item.icon ? to_ecl_icon(_item.icon),
+    icon: _item.icon ? to_ecl_icon(_item.icon, icon_size),
     value: _item.value,
     title: _item.title,
     description: _item.description,
@@ -20,6 +36,7 @@
 {% include '@ecl-twig/fact-figures' with {
   'items': _items,
   "view_all":{
-    "link": _link
+    "link": _link,
+    "icon": view_all_icon,
   }
 } %}
diff --git a/templates/patterns/navigation_menu/pattern-navigation-menu.html.twig b/templates/patterns/navigation_menu/pattern-navigation-menu.html.twig
@@ -37,7 +37,7 @@
   {% set _items = _items|merge([_item]) %}
 {% endfor %}
 
-{% if _items or site_name %}
+{% if _items %}
   {% include '@ecl-twig/menu' with {
     title: label|default('Menu'|t),
     close: 'Close'|t,
@@ -46,11 +46,5 @@
     items: _items,
     icon_path: ecl_icon_path
   } only %}
-{% elseif site_name %}
-  <div class="ecl-site-header-{{ ecl_branding }}__banner">
-    <div class="ecl-container">
-      {{ site_name }}
-    </div>
-  </div>
 {% endif %}
 
diff --git a/tests/Behat/OeThemeTestContext.php b/tests/Behat/OeThemeTestContext.php
@@ -425,6 +425,12 @@ public function iShouldSeeTheSiteHeader(string $ecl_branding): void {
     $this->assertSession()->elementExists('css', 'a.ecl-site-header-' . $ecl_branding_code . '__logo-link .ecl-site-header-' . $ecl_branding_code . '__logo-image');
     $this->assertSession()->elementExists('css', '.ecl-site-header-' . $ecl_branding_code . '__top .ecl-site-header-' . $ecl_branding_code . '__action .ecl-site-header-' . $ecl_branding_code . '__language-selector');
     $this->assertSession()->elementExists('css', '.ecl-site-header-' . $ecl_branding_code . '__top .ecl-site-header-' . $ecl_branding_code . '__action .ecl-site-header-' . $ecl_branding_code . '__search-container');
+    $site_name_method = 'elementExists';
+    if ($ecl_branding_code == 'core') {
+      $site_name_method = 'elementNotExists';
+    }
+    $this->assertSession()->{$site_name_method}('css', '.ecl-site-header-' . $ecl_branding_code . '__banner');
+
   }
 
   /**

diff --git a/tests/Functional/ParagraphsTest.php b/tests/Functional/ParagraphsTest.php
@@ -25,6 +25,24 @@ class ParagraphsTest extends BrowserTestBase {
     'oe_content_timeline_field',
   ];
 
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    // Enable and set OpenEuropa Theme as default.
+    \Drupal::service('theme_installer')->install(['oe_theme']);
+    \Drupal::configFactory()
+      ->getEditable('system.theme')
+      ->set('default', 'oe_theme')
+      ->save();
+
+    // Rebuild the ui_pattern definitions to collect the ones provided by
+    // oe_theme itself.
+    \Drupal::service('plugin.manager.ui_patterns')->clearCachedDefinitions();
+  }
+
   /**
    * Test Accordion item paragraph form.
    */