Merge pull request #1379 from openeuropa/EWPP-3912

EWPP-3912: Adapt site and page header templates.

modules/oe_theme_helper/templates/oe-theme-helper-site-navigation.html.twig

@@ -12,6 +12,7 @@
 #}
 {{ pattern('navigation_menu', {
   label: 'Menu'|t,
+  close: close,
   items: menu_items,
   site_name: site_name,
 }, 'vertical') }}

modules/oe_theme_helper/tests/src/Functional/PageHeaderBlockTest.php

@@ -56,7 +56,6 @@ public function setUp(): void {
    * Tests the page header block rendering and context system.
    */
   public function testRendering(): void {
-    $this->markTestSkipped('Must be re-enabled before considering migration to ECL 4 as complete.');
     // Create a test entity.
     $entity = EntityTest::create([
       'name' => $this->randomString(),
@@ -67,8 +66,8 @@ public function testRendering(): void {
     $assert_session = $this->assertSession();
 
     // Only one page header should be rendered.
-    $assert_session->elementsCount('css', '.ecl-page-header.ecl-page-header--negative', 1);
-    $header = $this->getSession()->getPage()->find('css', '.ecl-page-header.ecl-page-header--negative');
+    $assert_session->elementsCount('css', '.ecl-page-header', 1);
+    $header = $this->getSession()->getPage()->find('css', '.ecl-page-header');
     // Test that the page title is rendered in the page header.
     $this->assertEquals($entity->label(), trim($header->find('css', '.ecl-page-header__title')->getText()));
     // Intro and meta items are empty.
@@ -77,8 +76,8 @@ public function testRendering(): void {
 
     // Test another route.
     $this->drupalGet('/user/login');
-    $assert_session->elementsCount('css', '.ecl-page-header.ecl-page-header--negative', 1);
-    $header = $this->getSession()->getPage()->find('css', '.ecl-page-header.ecl-page-header--negative');
+    $assert_session->elementsCount('css', '.ecl-page-header', 1);
+    $header = $this->getSession()->getPage()->find('css', '.ecl-page-header');
     $this->assertEquals('Log in', trim($header->find('css', '.ecl-page-header__title')->getText()));
     $assert_session->elementsCount('css', '.ecl-page-header__description', 0);
     $assert_session->elementsCount('css', '.ecl-page-header__meta-list', 0);
@@ -104,10 +103,10 @@ public function testRendering(): void {
     $this->drupalGet('/user/login');
     // The test plugin metadata is shown as it has higher priority than the
     // default one.
-    $assert_session->elementsCount('css', '.ecl-page-header.ecl-page-header--negative', 1);
+    $assert_session->elementsCount('css', '.ecl-page-header', 1);
     $assert_session->elementsCount('css', '.ecl-page-header__description', 1);
     $assert_session->elementsCount('css', '.ecl-page-header__meta', 1);
-    $header = $this->getSession()->getPage()->find('css', '.ecl-page-header.ecl-page-header--negative');
+    $header = $this->getSession()->getPage()->find('css', '.ecl-page-header');
     $this->assertEquals($test_data['title'], trim($header->find('css', '.ecl-page-header__title')->getText()));
     $this->assertEquals($test_data['introduction'], trim($header->find('css', '.ecl-page-header__description')->getText()));
 

oe_theme.theme

@@ -146,6 +146,12 @@ function oe_theme_preprocess_menu__main(array &$variables): void {
       ];
     }, $variables['items'][$name]['below']);
   }
+  $variables['close'] = [
+    'label' => t('Close'),
+    'icon_name' => $variables['ecl_component_library'] === 'ec' ? 'close' : 'close-filled',
+    'icon_size' => $variables['ecl_component_library'] === 'ec' ? 'm' : 's',
+    'hide_label' => $variables['ecl_component_library'] === 'ec',
+  ];
 }
 
 /**
@@ -1944,6 +1950,12 @@ function oe_theme_preprocess_oe_theme_helper_site_navigation(&$variables) {
     // with 'Core' ECL branding.
     unset($variables['site_name']);
   }
+  $variables['close'] = [
+    'label' => t('Close'),
+    'icon_name' => $variables['ecl_component_library'] === 'ec' ? 'close' : 'close-filled',
+    'icon_size' => $variables['ecl_component_library'] === 'ec' ? 'm' : 's',
+    'hide_label' => $variables['ecl_component_library'] === 'ec',
+  ];
 }
 
 /**

sass/style-eu.scss

@@ -12,7 +12,7 @@
 );
 // TODO: The help form component is not available on ECL v3.
 //@use '@ecl/eu-component-form-help-block/eu-component-form-help-block';
-//@use "./compositions/content_item";
+@use "./compositions/content_item";
 @use "./components/form";
 @use "./components/toolbar";
 @use "./components/wysiwyg";

templates/blocks/block--oe-search.html.twig

@@ -6,9 +6,9 @@
  * @see ./core/themes/stable/templates/block/block.html.twig
  */
 #}
-<div class="ecl-site-header__search-container">
+<div class="ecl-site-header__search-container" role="search">
   <a
-    class="ecl-button ecl-button--ghost ecl-site-header__search-toggle"
+    class="ecl-button ecl-button--tertiary ecl-site-header__search-toggle"
     href=""
     data-ecl-search-toggle="true"
     aria-controls="{{ content['#id'] }}"
@@ -22,7 +22,10 @@
         extra_attributes: [
           { name: 'aria-hidden', value: true }
         ],
-        extra_classes: 'ecl-site-header__icon',
+      },
+      extra_classes: 'ecl-site-header__icon',
+      extra_accessibility: {
+        role: 'img',
       }
     } only -%}
     {{ 'Search'|t }}

templates/compositions/ec-component-language-list/language-list-selector.html.twig

@@ -37,23 +37,34 @@
 
 {% set _aria_label = 'Change language, current language is '|t ~ label %}
 
+{% set _label = ecl_component_library == 'eu' ? label|default('') : code|default('') %}
+{% set _overlay_close_icon = ecl_component_library == 'ec' ? 'close' : 'close-filled' %}
+
 {% set _language_selector = {
   href: path|default(''),
-  label: label|default(''),
+  label: _label,
   aria_label: _aria_label|default(''),
   code: code|default(''),
   eu_category: eu_category,
   non_eu_category: non_eu_category,
   overlay: {
-    close_label: 'Close'|t,
+    close: {
+      label: 'Close'|t,
+      icon: {
+        path: icon_path,
+        name: _overlay_close_icon,
+        size: 'm',
+      },
+      hide_label: true,
+    },
     title: 'Select your language'|t,
     items: items,
     non_eu_items: non_eu_languages,
   }
 } %}
 
 {% include '@ecl-twig/site-header/site-header-language-switcher.html.twig' with {
-  icon_file_path: icon_path|default(''),
+  icon_path: icon_path|default(''),
   language_selector: _language_selector,
 } only %}
 {% endapply %}

templates/form/form--oe-search-search-form.html.twig

@@ -19,14 +19,15 @@
   extra_attributes: input_array.extra_attributes,
   extra_group_classes: 'ecl-form-group--text-input'
 } %}
+
+{% set _button_variant = ecl_component_library == 'ec' ? 'ghost' : 'primary' %}
 {% set button = {
-  variant: 'search',
+  variant: _button_variant,
   icon: {
-    name: 'search',
     path: ecl_icon_path,
-    size: 'fluid'
   },
   label: 'Search'|t,
+  icon_position: 'before',
   extra_classes: 'ecl-search-form__button'
 } %}
 {% set extra_attributes = attributes|to_ecl_attributes|merge([{'name': 'data-ecl-search-form'}]) %}

templates/layout/page.html.twig

@@ -15,12 +15,14 @@
 >
   {{ page.site_top_bar }}
   {% block site_header_container %}
-    <div class="ecl-site-header__header">
-      <div class="ecl-site-header__container ecl-container">
-        <div class="ecl-site-header__top" data-ecl-site-header-top>
-          {{ page.site_header }}
-          <div class="ecl-site-header__action">
-            {{ page.site_header_secondary }}
+    <div class="ecl-site-header__background">
+      <div class="ecl-site-header__header">
+        <div class="ecl-site-header__container ecl-container">
+          <div class="ecl-site-header__top" data-ecl-site-header-top>
+            {{ page.site_header }}
+            <div class="ecl-site-header__action">
+              {{ page.site_header_secondary }}
+            </div>
           </div>
         </div>
       </div>

templates/navigation/links--language-block.html.twig

@@ -8,6 +8,7 @@
 #}
 {% if links -%}
   {% include '@oe_theme/compositions/ec-component-language-list/language-list-selector.html.twig' with {
+    ecl_component_library: ecl_component_library,
     label: current_language.label,
     path: current_language.path,
     code: current_language.lang,

templates/navigation/menu--main.html.twig

@@ -9,6 +9,7 @@
 {% if links %}
   {{ pattern('navigation_menu', {
     label: 'Menu'|t,
+    close: close,
     items: links,
     variant: 'vertical',
   }) }}

templates/patterns/navigation_menu/navigation_menu.ui_patterns.yml

@@ -17,10 +17,11 @@ navigation_menu:
       description: "Name of the site."
       preview: "Site name"
     close:
-      type: "text"
+      type: "array"
       label: "Close button"
-      description: "Close button label."
-      preview: "Close"
+      preview:
+        label: 'Close'
+      description: "Close button label and whether only an icon should be displayed."
     back:
       type: "text"
       label: "Back button"

templates/patterns/navigation_menu/pattern-navigation-menu.html.twig

@@ -72,7 +72,13 @@
       }
     },
     close: {
-      label: close|default('Close'|t),
+      label: close.label|default('Close'|t),
+      icon: {
+        path: ecl_icon_path,
+        name: 'close-filled',
+        size: 'm',
+      },
+      hide_label: false
     },
     back_label: back|default('Back'|t),
     icon_path: ecl_icon_path,

templates/patterns/page_header/pattern-page-header.html.twig

@@ -4,7 +4,6 @@
  * Default implementation for the page header component.
  */
 #}
-{% set variant = ecl_component_library == 'ec' and ecl_branding == 'core' ? 'negative' : '' %}
 
 {% set _breadcrumb_links = {} %}
 {% for breadcrumb_item in breadcrumb %}
@@ -20,7 +19,7 @@
     'links' : _breadcrumb_links,
     'navigation_text' : '',
     'ellipsis_label': '',
-    'icon_file_path' : ecl_icon_path,
+    'icon_path' : ecl_icon_path,
     'extra_attributes': [
       {
         'name': 'aria-label',
@@ -30,15 +29,31 @@
   } %}
 {% endif %}
 
+{% if background_image_url is not empty %}
+  {% set _picture_background = {
+    'img': {
+      'src': background_image_url,
+      'alt': '',
+    }
+  } %}
+{% endif %}
+{% if thumbnail.src is not empty %}
+  {% set _picture_thumbnail = {
+    'img': {
+      'src': thumbnail.src,
+      'alt': thumbnail.alt,
+    }
+  } %}
+{% endif %}
+
 {% include '@ecl-twig/page-header' with {
   'title': title,
-  'thumbnail': thumbnail,
+  'picture_thumbnail': _picture_thumbnail|default([]),
   'description': introduction,
   'breadcrumb': _breadcrumb,
   'meta': metas|filter_empty,
-  'background_image_url': background_image_url,
+  'picture_background': _picture_background|default([]),
   'extra_classes': _extra_classes|join(' '),
   'overlay': overlay|default(''),
   'hide_title': hide_title|default(false),
-  'variant': variant
 } %}

tests/features/corporate-blocks.feature

@@ -14,7 +14,6 @@ Feature: Corporate blocks feature
       | the home page               |
       | the user registration page  |
 
-  @wip
   Scenario Outline: By default the European Commission footer is displayed.
     Given I am an anonymous user
     When I am on "<page>"
@@ -25,7 +24,6 @@ Feature: Corporate blocks feature
       | the home page               |
       | the user registration page  |
 
-  @wip
   Scenario Outline: Changing the site's style will display either the European Commission or the European Union footer.
     Given I am an anonymous user
     When I am on "<page>"

tests/features/page-header.feature

@@ -30,7 +30,6 @@ Feature: Page header block component.
     And the breadcrumb trail should be "Home"
     And the breadcrumb active element should be "Create new account"
 
-  @wip
   Scenario: Change the title to verify that the page header is updated accordingly.
     Given I am logged in as a user that can "edit any" demo pages
     When I go to the "Robots are everywhere" page

tests/features/theme-showcase.feature

@@ -4,7 +4,6 @@ Feature: Theme showcase
   As a developer
   I want to make sure that I can setup a demo site with enabled more featured standardised branding.
 
-  @wip
   Scenario: The demo site header features placeholder blocks
     When I am on the homepage
     Then I should see the "logo" element in the "header"
@@ -13,7 +12,6 @@ Feature: Theme showcase
     And I should see the "navigation menu" element in the "header"
     And I should see the "site name" element in the "header"
 
-  @wip
   Scenario: The demo site navigation features placeholder menu links
     When I am on the homepage
     Then I should see the following links in the "navigation" region:
@@ -33,7 +31,7 @@ Feature: Theme showcase
       | Commission at work |
       | Departments        |
 
-  @wip @javascript
+  @javascript
   Scenario: The demo site navigation menu features dropdown menus
     When I am on the homepage
     # We can't check the visibility of the submenus
@@ -51,15 +49,15 @@ Feature: Theme showcase
     Then I should not visibly see the link "Commission at work"
     But I should see the link "Democratic change"
 
-  @wip @javascript
+  @javascript
   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
 
     When I press "Dropdown"
     Then the "dropdown content" is visible
 
-  @wip @javascript
+  @javascript
   Scenario: The language switcher dialog can be accessed
     When I am on the homepage
     Then the overlay "language switcher links" is not visible
@@ -107,8 +105,9 @@ Feature: Theme showcase
     When I press "Close"
     Then the "language switcher links" is not visible
 
-  @wip @javascript
+  @javascript
   Scenario: Site visitor can change language using the language switcher
+    Given the theme is configured to use the "European Union" style
     When I am on the homepage
     Then the "language switcher link" element should contain "English"
 
@@ -117,14 +116,12 @@ Feature: Theme showcase
     Then the url should match "/pl"
     And the "language switcher link" element should contain "polski"
 
-  @wip
   Scenario: Site visitors can access the ECL components overview page
     When I am on the homepage
     And I click "Components" in the "navigation" region
     Then I should be on "the ECL components overview page"
     And I should see the heading "Components" in the "page header"
 
-  @wip
   Scenario: Changing the ECL branding will display site header with Core or Standardised style.
     Given I am an anonymous user
     When the theme is configured to use the "Standardised" ECL branding

tests/src/Behat/OeThemeTestContext.php

@@ -426,7 +426,7 @@ public function iShouldSeeTheSiteHeader(string $ecl_branding): void {
     $this->assertSession()->elementExists('css', 'a.ecl-site-header__logo-link .ecl-site-header__logo-image');
     $this->assertSession()->elementExists('css', '.ecl-site-header__top .ecl-site-header__action .ecl-site-header__language-selector');
     $this->assertSession()->elementExists('css', '.ecl-site-header__top .ecl-site-header__action .ecl-site-header__search-container');
-    $menu = $this->getSession()->getPage()->find('css', 'header.ecl-site-header .ecl-menu.ecl-menu--group1');
+    $menu = $this->getSession()->getPage()->find('css', 'header.ecl-site-header .ecl-menu');
     if ($ecl_branding === 'Core' && !$menu) {
       $this->assertSession()->elementNotExists('css', '.ecl-site-header__banner');
     }