FIX: allows admins to set a width to the icon (#27)

It's useful when using an image as icon which can have a large width that our icons.

Author: jjaffeux

javascripts/discourse/initializers/initialize-for-header-icon-links.gjs

@@ -1,6 +1,7 @@
 import { dasherize } from "@ember/string";
 import concatClass from "discourse/helpers/concat-class";
 import { withPluginApi } from "discourse/lib/plugin-api";
+import { escapeExpression } from "discourse/lib/utilities";
 import icon from "discourse-common/helpers/d-icon";
 import isValidUrl from "../lib/isValidUrl";
 
@@ -40,6 +41,11 @@ export default {
           const isLastLink =
             index === links.length - 1 ? "last-custom-icon" : "";
 
+          let style = "";
+          if (link.width) {
+            style = `width: ${escapeExpression(link.width)}px`;
+          }
+
           const iconComponent = <template>
             <li
               class={{concatClass
@@ -55,6 +61,7 @@ export default {
                 title={{link.title}}
                 target={{target}}
                 rel={{rel}}
+                style={{style}}
               >
                 {{iconTemplate}}
               </a>

locales/en.yml

@@ -14,6 +14,9 @@ en:
             url:
               label: URL
               description: The URL for the link
+            width:
+              label: Width
+              description: Allows to set the width of the icon
             view:
               label: View
               description: |

settings.yml

@@ -50,6 +50,9 @@ header_links:
           - vdm
           - vdo
           - vmo
+      width:
+        type: integer
+        required: false
       target:
         type: enum
         choices:

spec/system/discourse_icon_header_links_spec.rb

@@ -25,6 +25,32 @@
     end
   end
 
+  context "when using the width attribute" do
+    before do
+      component.update_setting(
+        :header_links,
+        [
+          {
+            icon: "fab-facebook",
+            url: "https://facebook.com",
+            title: "Desktop and mobile link",
+            width: 200,
+            view: "vdm",
+          },
+        ],
+      )
+      component.save!
+    end
+
+    it "renders the icon with the correct width" do
+      visit("/")
+
+      expect(page.find(".custom-header-icon-link .icon").style("width")).to eq(
+        { "width" => "200px" },
+      )
+    end
+  end
+
   context "when in mobile", mobile: true do
     it "renders the correct icon" do
       visit("/")