[EWPP-1142] EWPP-1278: Update language switcher composition for ECL v3.

README.md

@@ -154,6 +154,12 @@ infos:
   description: "A list of infos of the current page. Deprecated from ECL 2.30."
 ```
 
+In addition, the customization that allowed the content language switcher to be rendered inside the page header
+has been deprecated in favor of the new [ECL composition](https://europa-component-library.netlify.app/playground/ec/?path=/story/compositions-etranslation--default).
+Instead, the OpenEuropa Content Language Switcher block provided by OpenEuropa Multilingual needs to be used
+in its place. Sites updating to OpenEuropa Theme V3 are advised to place this block in the page header region
+if they wish still need the functionality.
+
 #### Content item compositions
 
 We have removed the following compositions from our theme:

oe_theme.theme

@@ -705,39 +705,43 @@ function _oe_theme_preprocess_languages(array $link_items, string $current_langu
  * and prepares the links for rendering.
  */
 function oe_theme_preprocess_links__oe_multilingual_content_language_block(array &$variables): void {
-  $entity = \Drupal::service('oe_multilingual.helper')->getEntityFromCurrentRoute();
-  /** @var \Drupal\Core\Entity\EntityInterface $translation */
-  $translation = \Drupal::service('oe_multilingual.helper')->getCurrentLanguageEntityTranslation($entity);
-  $variables['current'] = $translation->language()->getName();
+
+  // Generate the label for the unavailable language.
   /** @var \Drupal\Core\Language\LanguageInterface[] $languages */
   $languages = \Drupal::service('language_manager')->getNativeLanguages();
-  $variables['unavailable'] = $languages[$variables['current_language_id']]->getName();
+  $variables['unavailable_language'] = $languages[$variables['current_language_id']]->getName();
 
   // Normalize the links to an array of optional languages suitable for the ECL.
-  $variables['options'] = [];
+  $variables['languages'] = [];
   foreach ($variables['links'] as $language_code => $link) {
-
-    $language_internal = $language_code;
-    if (EuropeanUnionLanguages::hasLanguage($language_code)) {
-      $language_internal = EuropeanUnionLanguages::getInternalLanguageCode($language_code);
-    }
-
     /** @var \Drupal\Core\Url $url */
     $url = $link['link']['#url'];
     $href = $url
       ->setOptions($link['link']['#options'])
       ->setAbsolute(TRUE)
       ->toString();
 
-    $variables['options'][] = [
+    $variables['languages'][] = [
       'href' => $href,
       'hreflang' => $language_code,
       'label' => $link['link']['#title'],
-      'lang' => $language_internal,
+      'current' => FALSE,
     ];
   }
 
-  // Generate unique element ID for the expandable component.
+  // Add the current language to the list.
+  $multilingual_helper = \Drupal::service('oe_multilingual.helper');
+  $entity = $multilingual_helper->getEntityFromCurrentRoute();
+  /** @var \Drupal\Core\Entity\EntityInterface $translation */
+  $translation = $multilingual_helper->getCurrentLanguageEntityTranslation($entity);
+  $variables['languages'][] = [
+    'href' => $translation->toUrl()->setAbsolute(TRUE)->toString(),
+    'hreflang' => $translation->language()->getId(),
+    'label' => $languages[$translation->language()->getId()]->getName(),
+    'current' => TRUE,
+  ];
+
+  // Generate required ids.
   $variables['expandable_id'] = Html::getUniqueId('ecl-expandable');
 }
 

templates/blocks/block--oe-multilingual-content-language-switcher.html.twig

@@ -6,8 +6,4 @@
  * @see ./core/themes/stable/templates/block/block.html.twig
  */
 #}
-<div class="ecl-u-bg-blue">
-  <div class="ecl-container">
-    {% include '@oe_theme/blocks/block--bare.html.twig' %}
-  </div>
-</div>
+{% include '@oe_theme/blocks/block--bare.html.twig' %}

templates/compositions/ec-component-content-language-switcher/content-language-switcher.html.twig

@@ -2,77 +2,101 @@
 
 {#
   Parameters:
+    - "unavailable_language" (string) (default: ''): the name of the unavailable language.
     - "expandable_id" (string) (default: ''): unique ID for the expandable component.
-    - "unavailable" (string) (default: ''): language currently unavailable.
-    - "current" (string) (default: ''): language currently displayed instead of the selected, unavailable, one.
-    - "options" (array) (default: []): array of links to the content in different languages. Format:
+    - "languages" (array) (default: []): array of links to the content in different languages. Format:
       [
         {
           "href" (string) URL of the content (default: ''),
           "hreflang" (string) language code to be used as link attribute,
-          "label" (string) link label, i.e. the language name in its native form (default: '')
+          "label" (string) link label, i.e. the language name in its native form (default: ''),
+          "current" (boolean) whether the language is the current page language or not (default: false)
         },
         ...
       ]
-    - "icon_path" (string) (default: ''): path to ECL SVG icon assets.
 #}
-
-<div class="ecl-lang-select-page">
-  <div class="ecl-u-d-flex ecl-u-align-items-start ecl-u-font-s">
-    <span class="ecl-lang-select-page__unavailable_language ecl-u-d-flex ecl-u-align-items-center ecl-u-pt-xs">
-      {% include '@ecl-twig/icon' with {
+  <div class="ecl-u-bg-grey-5 ecl-u-pv-m">
+    <div class="ecl-container">
+      {% include '@ecl-twig/message' with {
+        title: 'The @language language is unavailable.'|t({'@language': unavailable_language}),
+        variant: 'warning',
+        extra_classes: 'ecl-u-bg-transparent ecl-u-mb-m',
         icon: {
-          path: icon_path,
-          name: "generic-lang",
-          size: "l"
-        }
-      } only %}
-      {# Show the unavailable language with a striketrought. #}
-      <span class="ecl-u-ml-m ecl-u-type-m ecl-u-type-strike">
-        {{ unavailable }}
-      </span>
-    </span>
-    {# If we have more than one optional languages then use an expandable to display them. #}
-    {% if options %}
-      {% set languages %}
-        <ul class="ecl-u-d-flex ecl-u-flex-wrap ecl-unordered-list ecl-unordered-list--no-bullet">
-          {% for language in options %}
-            <li class="ecl-u-mt-none ecl-u-d-flex ecl-unordered-list__item">
-              <a href="{{ language.href }}" lang="{{ language.hreflang }}" class="ecl-button">{{ language.label }}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endset %}
-      {% include '@ecl-twig/expandable' with {
-        'id': expandable_id,
-        'label_expanded': current,
-        'label_collapsed': current,
-        'expanded': false,
-        'button': {
-          'label': current,
-          'type': 'button',
-          'variant': 'secondary',
-          'icon': {
-            'path': icon_path,
-            'name': "corner-arrow",
-            'size': "xs",
-            'transform': "rotate-180"
-          },
-          'icon_position': 'after'
+          path: ecl_icon_path,
+          name: 'warning',
+          size: 'l',
+        },
+        close: {
+          label: 'Close this message'|t,
+          icon : {
+            path: ecl_icon_path,
+            name: 'close',
+            size: 's',
+          }
         },
-        'extra_classes': 'ecl-u-ml-s',
-        'content': languages,
-      } only %}
-    {% else %}
-      {# If we have only one alternative language just display it as a button, without any otherwise empty expandable. #}
-      {% include '@ecl-twig/button' with {
-        'label': current,
-        'type': 'button',
-        'variant': 'secondary',
-        'extra_classes': 'ecl-u-ml-s'
       } only %}
-    {% endif %}
+
+      {# The expandable containing languages is split in two different blocks: "button" and "languages" #}
+      {# This is necessary as, in some cases, additional Webtools widgets might need to be placed right #}
+      {# beside the expandalbe button region, whether we have languages or not. #}
+      <div class="ecl-u-d-inline-flex ecl-u-align-items-center"{{ languages ? ' data-ecl-expandable="true" data-ecl-auto-init="Expandable"' }}>
+        {# This block wraps around the expandable button and it is displayed even if the button is not. #}
+        {% block button %}
+          {% if languages %}
+            {% set _label = 'Choose another language'|t %}
+            {% include '@ecl-twig/button' with {
+              label: _label,
+              variant: 'secondary',
+              type: 'button',
+              icon_position: "after",
+              icon: {
+                path: ecl_icon_path,
+                name: 'corner-arrow',
+                size: 'fluid',
+                transform: 'rotate-180'
+              },
+              extra_classes: 'ecl-expandable__toggle ecl-u-mr-s ecl-u-bg-transparent',
+              extra_attributes: [
+                { name: 'aria-controls', value: expandable_id ~ '-content'|default('') },
+                { name: 'data-ecl-expandable-toggle' },
+                { name: 'data-ecl-label-expanded', value: _label },
+                { name: 'data-ecl-label-collapsed', value: _label},
+                { name: 'aria-expanded', value: 'false' }
+              ]
+            } only %}
+          {% endif %}
+        {% endblock %}
+      </div>
+      {# This block wraps around the expandable content and it is displayed even if the content is not. #}
+      {% block language_list %}
+        {% if languages %}
+        <div id="{{ expandable_id ~ '-content' }}" class="ecl-expandable__content" hidden>
+          <ul style="grid-auto-flow: column; grid-template-rows: repeat(4, 1fr)" class="ecl-u-d-block ecl-u-d-m-grid ecl-unordered-list ecl-unordered-list--no-bullet ecl-u-mt-xs ecl-u-type-m">
+            {% for language in languages %}
+              <li class="ecl-unordered-list__item ecl-u-ma-2xs">
+                {% set link_classes = language.current ? 'ecl-u-bg-blue-50 ecl-u-type-color-white ecl-u-type-bold' : '' %}
+                {% include '@ecl-twig/link' with {
+                  link: {
+                    label: language.label,
+                    path: language.href,
+                    type: 'standalone',
+                    no_visited: true,
+                    extra_attributes: [
+                      [
+                        'lang',
+                        language.hreflang
+                      ]
+                    ]
+                  },
+                  extra_classes: 'ecl-u-pv-s ecl-u-ph-m ecl-u-d-block ' ~ link_classes,
+                } only %}
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+      {% endblock %}
+    </div>
   </div>
-</div>
 
 {% endspaceless %}

templates/navigation/links--oe-multilingual-content-language-block.html.twig

@@ -7,9 +7,8 @@
  */
 #}
 {% include '@oe_theme/compositions/ec-component-content-language-switcher/content-language-switcher.html.twig' with {
-  'expandable_id': expandable_id,
-  'unavailable': unavailable,
-  'current': current,
-  'options': options,
-  'icon_path': ecl_icon_path,
-} only %}
+  'expandable': expandable,
+  'message': message,
+  'languages': languages,
+  'unavailable_language': unavailable_language,
+} %}

templates/patterns/page_header/page_header.ui_patterns.yml

@@ -29,8 +29,8 @@ page_header:
         - "Brussels"
     language_switcher:
       type: "array"
-      label: "Language switcher"
-      description: "The language selector offers the alternative language versions of the page’s main content."
+      label: "Language switcher (Deprecated)"
+      description: "The language selector offers the alternative language versions of the page’s main content. This has been deprecated in ECL V3."
       preview:
         current: "French"
         unavailable: "English"

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

@@ -31,26 +31,13 @@
 ]
 %}
 
-{% if language_switcher %}
-  {% set _language_switcher %}
-    {% include '@oe_theme/compositions/ec-component-content-language-switcher/content-language-switcher.html.twig' with {
-      'expandable_id': language_switcher.expandable_id,
-      'unavailable': language_switcher.unavailable,
-      'current': language_switcher.current,
-      'options': language_switcher.options,
-      'icon_path': ecl_icon_path,
-    } only %}
-  {% endset %}
-{% endif %}
-
 {% include '@ecl-twig/page-header-' ~ ecl_branding ~ '/page-header-' ~ ecl_branding with {
   'title': title,
   'thumbnail': thumbnail,
   'description': introduction,
   'breadcrumb': _breadcrumb,
   'meta': metas|filter_empty,
   'background_image_url': background_image_url,
-  'composition': _language_switcher,
   'extra_classes': _extra_classes|join(' '),
   'overlay': ecl_component_library == 'ec' and overlay is not empty,
 } %}

tests/Kernel/ContentLanguageSwitcherTest.php

@@ -68,10 +68,10 @@ public function testLanguageSwitcherRendering(): void {
     $crawler = new Crawler($html);
 
     // Make sure that content language switcher block is present.
-    $actual = $crawler->filter('.ecl-lang-select-page');
+    $actual = $crawler->filter('div.ecl-u-bg-grey-5.ecl-u-pv-m div.ecl-container');
     $this->assertCount(1, $actual);
 
-    // Make sure that unavailable language is properly rendered.
+    // Make sure that warning message contains the unavailable language.
     $this->assertUnavailableLanguage($crawler, 'български');
 
     // Make sure that selected language is properly rendered.
@@ -111,8 +111,8 @@ public function testLanguageSwitcherRendering(): void {
    *   The label of the language.
    */
   protected function assertUnavailableLanguage(Crawler $crawler, string $expected): void {
-    $actual = $crawler->filter('.ecl-lang-select-page .ecl-u-type-strike')->text();
-    $this->assertEquals($expected, trim($actual));
+    $actual = $crawler->filter('div.ecl-u-bg-grey-5.ecl-u-pv-m div.ecl-container div.ecl-message--warning')->text();
+    $this->assertContains($expected, trim($actual));
   }
 
   /**
@@ -124,7 +124,7 @@ protected function assertUnavailableLanguage(Crawler $crawler, string $expected)
    *   The label of the language.
    */
   protected function assertSelectedLanguage(Crawler $crawler, string $expected): void {
-    $actual = $crawler->filter('.ecl-lang-select-page .ecl-button.ecl-button--secondary')->text();
+    $actual = $crawler->filter('div.ecl-u-bg-grey-5.ecl-u-pv-m div.ecl-container div.ecl-expandable__content li.ecl-unordered-list__item a.ecl-u-bg-blue-50')->text();
     $this->assertEquals($expected, trim($actual));
   }
 
@@ -137,7 +137,7 @@ protected function assertSelectedLanguage(Crawler $crawler, string $expected): v
    *   The labels of the translations that should be rendered as links.
    */
   protected function assertTranslationLinks(Crawler $crawler, array $expected): void {
-    $elements = $crawler->filter('.ecl-lang-select-page .ecl-expandable__content .ecl-button');
+    $elements = $crawler->filter('div.ecl-u-bg-grey-5.ecl-u-pv-m div.ecl-container div.ecl-expandable__content li.ecl-unordered-list__item a:not(.ecl-u-bg-blue-50)');
     $this->assertSameSize($expected, $elements);
 
     $actual = array_column(iterator_to_array($elements), 'nodeValue');