Merge pull request #7 from openeuropa/OEL-452

OEL-452: Multilingual

composer.json

@@ -10,8 +10,7 @@
         "drupal/core": "^8.9 || ^9.1",
         "drupal/ui_patterns": "^1.0",
         "drupal/ui_patterns_settings": "^1.0",
-        "openeuropa/oe_bootstrap_theme": "0.100920211846",
-        "openeuropa/oe_authentication": "^1.4",
+        "openeuropa/oe_bootstrap_theme": "0.140920211750",
         "php": ">=7.3"
     },
     "require-dev": {
@@ -23,6 +22,8 @@
         "openeuropa/code-review": "1.6",
         "openeuropa/composer-artifacts": "~0.1",
         "openeuropa/drupal-core-require-dev": "^8.9 || ^9.1",
+        "openeuropa/oe_authentication": "^1.4",
+        "openeuropa/oe_multilingual": "^1.8",
         "openeuropa/task-runner-drupal-project-symlink": "^1.0",
         "phpspec/prophecy-phpunit": "^1 || ^2"
     },

modules/oe_whitelabel_helper/README.md

@@ -0,0 +1,28 @@
+# OpenEuropa Whitelabel Helper
+
+This module offers some additional functionality that might come in useful when
+theming an OpenEuropa website.
+
+Here is an overview of the features it offers:
+
+### Corporate Logo Blocks
+
+Two blocks, one for EC one for EU displaying the European Commission and European Union logos linked.
+
+### Enables OE Authentication
+
+Enables the [OpenEuropa Authentication](https://github.com/openeuropa/oe_authentication) module so the themed login block can be picked up by Drupal.
+
+### Enables OE Multilingual
+
+Enables the [OpenEuropa Multilingual](https://github.com/openeuropa/oe_multilingual) module.
+The language switcher block is themed out of the box.
+
+## Requirements
+
+To be able to enable this module you will have to provide the dependent modules in your projects composer.json
+
+```
+composer require openeuropa/oe_authentication
+composer require openeuropa/oe_multilingual
+```

modules/oe_whitelabel_helper/oe_whitelabel_helper.info.yml

@@ -5,3 +5,4 @@ package: OpenEuropa Whitelabel Theme
 core_version_requirement: ^8.9 || ^9.1
 dependencies:
   - openeuropa:oe_authentication
+  - openeuropa:oe_multilingual

oe_whitelabel.theme

@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * @file
+ * Functions to support theming.
+ */
+
+declare(strict_types = 1);
+
+/**
+ * Implements hook__preprocess_links__language_block().
+ */
+function oe_whitelabel_preprocess_links__language_block(&$variables) {
+  $currentLanguage = \Drupal::languageManager()->getCurrentLanguage();
+  $current_language_id = $currentLanguage->getId();
+  $language_config_storage = \Drupal::entityTypeManager()->getStorage('configurable_language');
+  $eu_links = [];
+  $non_eu_links = [];
+
+  foreach ($variables['links'] as $language_code => $link) {
+    /** @var \Drupal\Core\Url $url */
+    $url = $link['link']['#url'];
+    $href = $url
+      ->setOptions($link['link']['#options'])
+      ->setAbsolute(TRUE)
+      ->toString();
+    $label = $link['link']['#title'];
+
+    $link = [
+      'href' => $href,
+      'name' => $label,
+      'id' => 'link_' . $language_code,
+      'hreflang' => $language_code,
+    ];
+
+    if (!empty($current_language_id) && $language_code === $current_language_id) {
+      $variables['language']['link'] = $link;
+      $variables['language']['link']['target'] = 'languageModal';
+      $link['active'] = TRUE;
+    }
+
+    $language_config = $language_config_storage->load($language_code);
+    $category = $language_config->getThirdPartySetting('oe_multilingual', 'category');
+
+    if ($category === 'eu') {
+      $eu_links[$language_code] = $link;
+    }
+    else {
+      $non_eu_links[$language_code] = $link;
+    }
+  }
+
+  $variables['language']['modal'] = [
+    'id' => 'languageModal',
+    'size' => 'fullscreen',
+    'header' => [
+      'title' => t('Select your language'),
+      'label' => t('Close'),
+    ],
+    'eu_links' => $eu_links,
+    'non_eu_links' => $non_eu_links,
+    'footer' => [
+      'label' => t('Close'),
+    ],
+  ];
+}

templates/overrides/navigation/block--oe-authentication-login_block.html.twig

@@ -4,8 +4,20 @@
  * icon.
  */
 #}
-{% include '@oe-bcl/bcl-icon/icon.html.twig' with {
-  'name': 'person-fill',
-  'path': bcl_icon_path,
-  'size': 'm',
-} %} {{ content }}
+{% set extra_attributes = create_attribute() %}
+{% set extra_attributes = extra_attributes.addClass('nav-link') %}
+
+<ul class="nav oe-authentication">
+  <li class="nav-item">
+    {{ pattern('link', {
+      label: content['#title']|render,
+      path: content['#url']|render,
+      icon: {
+        name: 'person-fill',
+        size: 's'
+      },
+      icon_position: 'before',
+      attributes: extra_attributes
+    }) }}
+  </li>
+</ul>

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

@@ -0,0 +1,42 @@
+{% spaceless %}
+
+{# Parameters:
+  - language
+    - link
+      - label
+      - href
+      - target
+    - modal
+#}
+
+{% set _language = {
+  link: {
+    label: language.link.name|default(''),
+    href: language.link.href|default('#'),
+    target: language.link.target|default(language.modal.id|default('')),
+  },
+  modal: language.modal,
+} %}
+{% set extra_attributes = create_attribute() %}
+{% set extra_attributes = extra_attributes.setAttribute('data-bs-toggle', 'modal') %}
+{% set extra_attributes = extra_attributes.setAttribute('data-bs-target', '#' ~ _language.link.target) %}
+{% set extra_attributes = extra_attributes.addClass('nav-link') %}
+
+<ul class="nav">
+  <li class="nav-item">
+    {{ pattern('link', {
+      label: _language.link.label,
+      path: _language.link.href,
+      icon: {
+        name: 'chat-left-dots-fill',
+        size: 's'
+      },
+      icon_position: 'before',
+      attributes: extra_attributes
+    }) }}
+  </li>
+</ul>
+
+{% include '@oe_whitelabel/patterns/modal/modal-language.html.twig' with _language.modal only %}
+
+{% endspaceless %}

templates/patterns/modal/modal-language.html.twig

@@ -0,0 +1,82 @@
+{% spaceless %}
+
+{# Parameters:
+  - modal
+    - id
+    - size
+    - header
+      - title
+      - label
+    - body
+      - links
+    - footer
+      - label
+#}
+
+{% if header %}
+  {% set _header %}
+    <h5 class="modal-title" id="languageeModalLabel">{{ header.title|default('Select your language'|t) }}</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ header.label|default('Close'|t) }}"></button>
+  {% endset %}
+{% endif %}
+
+{% if eu_links or non_eu_links %}
+  {% set _body %}
+    <div class="container">
+      <div class="row">
+      {% set _number_items = (eu_links|length / 2) %}
+      {% for link in eu_links|batch(_number_items) %}
+        {% if loop.index % 2 == 0 %}
+          <div class="col col-lg-4 offset-lg-2">
+        {% else %}
+          <div class="col col-lg-4">
+        {% endif %}
+            <div class="oe-language__list">
+              {% for id, data in link %}
+                <a id="{{ data.id }}" href="{{ data.href|default('#') }}" class="oe-language__item">{{ data.name }}</a>
+              {% endfor %}
+            </div>
+          </div>
+      {% endfor %}
+      </div>
+      {% if non_eu_links %}
+        <div class="row">
+        {% set _number_items = (non_eu_links|length / 2) %}
+        {% for link in non_eu_links|batch(_number_items) %}
+          {% if loop.index % 2 == 0 %}
+            <div class="col col-lg-4 offset-lg-2">
+          {% else %}
+            <div class="col col-lg-4">
+          {% endif %}
+              <div class="oe-language__list">
+                {% for id, data in link %}
+                  <a  id="{{ data.id }}" href="{{ data.href|default('#') }}" class="oe-language__item">{{ data.name }}</a>
+                {% endfor %}
+              </div>
+            </div>
+        {% endfor %}
+        </div>
+      {% endif %}
+    </div>
+  {% endset %}
+{% endif %}
+
+{% if footer %}
+  {% set _footer %}
+    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ header.label|default('Close'|t) }}</button>
+  {% endset %}
+{% endif %}
+
+{% set _data = {
+  id: id,
+  size: size,
+  header: _header,
+  body: _body,
+  footer: _footer,
+} %}
+
+<div class="oe-language">
+  {% include '@oe-bcl/bcl-modal/modal.html.twig' with _data only %}
+</div>
+
+{% endspaceless %}

tests/src/Kernel/AuthenticationBlockTest.php

@@ -68,10 +68,10 @@ public function testBlockRendering(): void {
     $render = $this->container->get('renderer')->renderRoot($build);
     $crawler = new Crawler($render->__toString());
 
-    $actual = $crawler->filter('#block-euloginlinkblock');
+    $actual = $crawler->filter('.oe-authentication');
     $this->assertCount(1, $actual);
     $icon = $actual->filter('svg');
-    $this->assertSame('bi icon--m', $icon->attr('class'));
+    $this->assertSame('bi icon--s', $icon->attr('class'));
     $use = $icon->filter('use');
     $expected = '/themes/contrib/oe_bootstrap_theme/assets/icons/bootstrap-icons.svg#person-fill';
     $this->assertSame($expected, $use->attr('xlink:href'));