Merge pull request #500 from UN-OCHA/develop

D11 compatiblity and minor fixes

.github/workflows/checks.yml

@@ -7,16 +7,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Cache node modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
 
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: '^18.16.1'
 

common_design.info.yml

@@ -1,7 +1,7 @@
 name: OCHA Common Design
 type: theme
 description: OCHA Common Design drupal theme. Use as a base theme, and extend.
-core_version_requirement: ^9.5 || ^10
+core_version_requirement: ^9.5 || ^10 || ^11
 dependencies:
   - drupal:stable
 base theme: stable
@@ -40,10 +40,6 @@ libraries-extend:
     - common_design/messages
 
 libraries-override:
-  core/modernizr:
-    js:
-      assets/vendor/modernizr/modernizr.min.js: js/vendor/cd-modernizr.min.js
-
   # select_a11y module for Facets dropdowns.
   select_a11y/select_a11y_facets.widget:
     css:

common_design.libraries.yml

@@ -133,15 +133,6 @@ cd-core:
 # function on old browsers.
 #
 
-# Custom library to set img as background img when object-fit is not supported (IE 11, 15)
-cd-object-fit:
-  header: true
-  js:
-    js/cd-object-fit.js: { attributes: { nomodule: true } }
-  dependencies:
-    - core/drupal
-    - core/modernizr
-
 # The nomodule attribute means browsers who support ES6 modules will ignore this file but browsers like IE load it.
 cd-polyfill:
   js:

common_design.theme

@@ -32,6 +32,13 @@ function common_design_form_system_theme_settings_alter(&$form, FormStateInterfa
     ];
   }
 
+  // Add a setting to use light/dark favicons.
+  $form['common_design']['use_light_dark_favicon'] = [
+    '#type'          => 'checkbox',
+    '#title'         => t('Use light/dark favicon'),
+    '#default_value' => theme_get_setting('use_light_dark_favicon') ?? FALSE,
+  ];
+
   // Load the node view modes.
   $storage = \Drupal::entityTypeManager()->getStorage('entity_view_mode');
   $view_modes = $storage->loadByProperties([
@@ -1001,3 +1008,63 @@ function common_design_preprocess_datetime_wrapper(&$variables) {
     $variables['title_attributes']['class'][] = 'visually-hidden';
   }
 }
+
+/**
+ * Implements hook_page_attachments_alter().
+ */
+function common_design_page_attachments_alter(array &$page) {
+  $active_theme = \Drupal::theme()->getActiveTheme();
+
+  if (!theme_get_setting('use_light_dark_favicon')) {
+    return;
+  }
+
+  // Attach blue favicon from active theme.
+  if (file_exists($active_theme->getPath() . '/img/favicons/blue/favicon.ico')) {
+    $page['#attached']['html_head_link'][][] = [
+      'rel' => 'icon',
+      'href' => '/' . $active_theme->getPath() . '/img/favicons/blue/favicon.ico',
+      'type' => 'image/x-icon',
+      'media' => '(prefers-color-scheme: light)',
+    ];
+  }
+  else {
+    // Attach favicon from parent theme.
+    foreach ($active_theme->getBaseThemeExtensions() as $base_theme) {
+      if (file_exists($base_theme->getPath() . '/img/favicons/blue/favicon.ico')) {
+        $page['#attached']['html_head_link'][][] = [
+          'rel' => 'icon',
+          'href' => '/' . $base_theme->getPath() . '/img/favicons/blue/favicon.ico',
+          'type' => 'image/x-icon',
+          'media' => '(prefers-color-scheme: light)',
+        ];
+        break;
+      }
+    }
+  }
+
+  // Attach white favicon from active theme.
+  if (file_exists($active_theme->getPath() . '/img/favicons/white/favicon.ico')) {
+    $page['#attached']['html_head_link'][][] = [
+      'rel' => 'icon',
+      'href' => '/' . $active_theme->getPath() . '/img/favicons/white/favicon.ico',
+      'type' => 'image/x-icon',
+      'media' => '(prefers-color-scheme: dark)',
+    ];
+  }
+  else {
+    // Attach favicon from parent theme.
+    foreach ($active_theme->getBaseThemeExtensions() as $base_theme) {
+      if (file_exists($base_theme->getPath() . '/img/favicons/white/favicon.ico')) {
+        $page['#attached']['html_head_link'][][] = [
+          'rel' => 'icon',
+          'href' => '/' . $base_theme->getPath() . '/img/favicons/white/favicon.ico',
+          'type' => 'image/x-icon',
+          'media' => '(prefers-color-scheme: dark)',
+        ];
+
+        break;
+      }
+    }
+  }
+}

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "unocha/common_design",
-    "description": "OCHA Common Design base theme for Drupal 9+",
+    "description": "OCHA Common Design base theme for Drupal",
     "type": "drupal-theme",
     "license": "GPL-2.0-only",
     "require": {

libraries/cd-search--inline/cd-search--inline.html.twig

@@ -1,20 +1,20 @@
 <div class="cd-search--inline">
 
-  <div class="cd-search--inline__form" aria-labelledby="cd-search--inline__btn" data-cd-toggable="Search" data-cd-component="cd-search--inline" data-cd-logo="search" data-cd-focus-target="cd-search--inline" role="search">
+  <div class="cd-search--inline__form" aria-labelledby="cd-search--inline__btn" data-cd-toggable="{{ 'Search'|t }}" data-cd-component="cd-search--inline" data-cd-logo="search" data-cd-focus-target="cd-search--inline" role="search">
 
-    <h2 class="visually-hidden">Search form</h2>
+    <h2 class="visually-hidden">{{ 'Search form'|t }}</h2>
 
     <form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8">
       <div class="js-form-item form-item js-form-type-search form-type-search js-form-item-keys form-item-keys form-no-label">
-        <label for="edit-keys" class="visually-hidden">Search</label>
+        <label for="edit-keys" class="visually-hidden">{{ 'Search'|t }}</label>
         <input title="Enter the terms you wish to search for." placeholder="What are you looking for?" class="cd-search--inline__input form-search" id="cd-search--inline" type="search" name="keys" value="" size="15" maxlength="128">
       </div>
       <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
         <button class="cd-search--inline__submit" value="Search" type="submit" id="edit-submit">
           <svg class="cd-icon cd-icon--search">
             <use xlink:href="#cd-icon--search"></use>
           </svg>
-          <span class="visually-hidden">Search</span>
+          <span class="visually-hidden">{{ 'Search'|t }}</span>
         </button>
       </div>
     </form>

libraries/cd/cd-other/cd-print.css

@@ -20,6 +20,7 @@
   a,
   a:visited {
     text-decoration: underline;
+    overflow-wrap: anywhere;
   }
 
   a[href]::after {

package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@xmldom/xmldom": "^0.8.4",
-    "axios": ">=0.21.2",
+    "axios": ">=1.7.4",
     "core-js": "^3.20.0",
     "css-what": ">=5.0.1",
     "eslint": "^7.23.0",

templates/layout/page--demo.html.twig

@@ -345,7 +345,7 @@
 Narrator: While bringing food, relief supplies, and medicine, we are at risk of being looted, harassed and even killed.
 
 Humanitarian workers are never the enemy.
-Face world leaders to say civilians are \#NotATarget
+Face world leaders to say civilians are #NotATarget
 World Humanitarian Day
 19. August 2018
 https://www.WorldHumanitarianDay.org',