From 774ea7ca29cd7dd04a1e1219aabd4929fc2eaff1 Mon Sep 17 00:00:00 2001
From: Sara Arjona <sara@moodle.com>
Date: Tue, 2 Jul 2024 11:54:54 +0200
Subject: [PATCH] MDL-82210 output: Add support to FontAwesome families

The solid family was chosen by default when Font Awesome was upgraded
from 4 to 6, but FA6 has more families, like regular or brands.
This commit adds only the fa class to the icon when no other family
class is used.
---
 .upgradenotes/MDL-82210-2024070210360255.yml  | 11 ++++++
 .../site/layouts/shortcodes/moodleicons.html  |  2 +-
 .../output/icon_system_fontawesome.php        | 34 +++++++++++++++++++
 lib/templates/pix_icon_fontawesome.mustache   |  2 +-
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 .upgradenotes/MDL-82210-2024070210360255.yml

diff --git a/.upgradenotes/MDL-82210-2024070210360255.yml b/.upgradenotes/MDL-82210-2024070210360255.yml
new file mode 100644
index 00000000000..bb73a470dc2
--- /dev/null
+++ b/.upgradenotes/MDL-82210-2024070210360255.yml
@@ -0,0 +1,11 @@
+issueNumber: MDL-82210
+notes:
+  theme_boost:
+    - message: >-
+        Upon upgrading Font Awesome from version 4 to 6, the solid family was
+        selected by default. However, FA6 includes additional families such as
+        regular and brands. Support for these families has now been integrated,
+        allowing icons defined with icon_system::FONTAWESOME to use them.
+        Icons can add the FontAwesome family (fa-regular, fa-brands, fa-solid)
+        near the icon name to display it using this styling.
+      type: improved
diff --git a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
index bb0012391f9..ae90f3d61da 100644
--- a/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
+++ b/admin/tool/componentlibrary/hugo/site/layouts/shortcodes/moodleicons.html
@@ -8,7 +8,7 @@
     <div class="small text-truncate" data-toggle="tooltip" data-placement="bottom" title="{{ .name }}">{{ .name }}</div>
     <div class="row g-0">
       <div class="col-sm-6 d-flex align-items-center justify-content-center">
-        <i class="fa {{ .icon }} fa-2x"></i>
+        <i class="{{ .icon }} fa-2x"></i>
       </div>
       <div class="col-sm-6 d-flex align-items-center justify-content-center">
         {{ .standardicon | safeHTML }}
diff --git a/lib/classes/output/icon_system_fontawesome.php b/lib/classes/output/icon_system_fontawesome.php
index 88b10d6e23b..23f4d916c7e 100644
--- a/lib/classes/output/icon_system_fontawesome.php
+++ b/lib/classes/output/icon_system_fontawesome.php
@@ -35,6 +35,19 @@ class icon_system_fontawesome extends icon_system_font {
      */
     private $map = [];
 
+    /**
+     * @var array $families List of Font Awesome families.
+     */
+    private $families = [
+        'fa-brands',
+        'fa-solid',
+        'fa-regular',
+        'fa-light',
+        'fa-thin',
+        'fa-duotone',
+        'fa-sharp',
+    ];
+
     public function get_core_icon_map() {
         return [
             'core:docs' => 'fa-info-circle',
@@ -473,12 +486,33 @@ class icon_system_fontawesome extends icon_system_font {
                         }
                     }
                 }
+
+                // Add the solid class by default to all icons that have not specific family.
+                foreach ($this->map as $from => $to) {
+                    $this->map[$from] = $this->add_family($to);
+                }
+
                 $cache->set($mapkey, $this->map);
             }
         }
         return $this->map;
     }
 
+    /**
+     * Add the family to the icon if not present.
+     *
+     * @param string $cssclasses The icon classes.
+     * @return string The icon classes with the family.
+     */
+    protected function add_family(string $cssclasses): string {
+        $family = array_intersect(explode(' ', $cssclasses), $this->families);
+        if (count($family) != 0) {
+            return $cssclasses;
+        }
+
+        return 'fa ' . $cssclasses;
+    }
+
     #[\Override]
     public function get_amd_name() {
         return 'core/icon_system_fontawesome';
diff --git a/lib/templates/pix_icon_fontawesome.mustache b/lib/templates/pix_icon_fontawesome.mustache
index 778584e3017..50876e3ae2f 100644
--- a/lib/templates/pix_icon_fontawesome.mustache
+++ b/lib/templates/pix_icon_fontawesome.mustache
@@ -43,7 +43,7 @@
 
 }}
 {{^unmappedIcon}}
-<i class="icon fa {{key}} fa-fw {{extraclasses}}" {{#aria-hidden}}aria-hidden="true"{{/aria-hidden}} {{#title}}title="{{title}}"{{/title}} {{#alt}}role="img" aria-label="{{alt}}"{{/alt}}></i>
+<i class="icon {{key}} fa-fw {{extraclasses}}" {{#aria-hidden}}aria-hidden="true"{{/aria-hidden}} {{#title}}title="{{title}}"{{/title}} {{#alt}}role="img" aria-label="{{alt}}"{{/alt}}></i>
 {{/unmappedIcon}}
 {{#unmappedIcon}}
 {{! We cannot include the pix_icon template directly here because we don't have all the mustache helpers loaded. }}