feat: [pfe-icon] add default icon set configuration

CHANGELOG-1.x.md

@@ -1,6 +1,7 @@
-#1.7.1 (2021)
+# 1.8.0 (2021)
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-accordion IE11 regression; background context should always be white with black text
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-icon now supports setting default icon sets
+- [56eb55e](https://github.com/patternfly/patternfly-elements/commit/56eb55ec8b4b62aee7d36950d158229cbf50ddef) fix: pfe-accordion IE11 regression; background context should always be white with black text
 
 # 1.7.0 (2021-05-10)
 

elements/pfe-icon/README.md

@@ -32,23 +32,55 @@ Icon sets are defined in detail in [this blog post][icon-sets].  The blog post s
 
 To register a new icon set, choose a global namespace for that set and identify the path at which the SVGs for that set will be hosted.  Consider also the function needed to convert the icon name into the filename on that hosted location.  The `addIconSet` call accepts the namespace (as a string), the path to the SVGs (as a string), and a function for parsing the icon name into the filename.
 
+```javascript
+PfeIcon.addIconSet(
+  "local",
+  "./",
+  function(name, iconSetName, iconSetPath) {
+    var regex = new RegExp("^" + iconSetName + "-(.*)");
+    var match = regex.exec(name);
+    return iconSetPath + match[1] + ".svg";
+  }
+);
 ```
-    PfeIcon.addIconSet(
-    "local",
-    "./",
-    function(name, iconSetName, iconSetPath) {
+
+### Override the default icon sets
+
+Out of the box, the default icon set (using the rh / web namespace) is hosted on [access.redhat.com](https://access.redhat.com). If you would like to override the `rh / web` namespace, you can add the following to a global variable named `PfeConfig`.
+
+The config must be set _before_ the PfeIcon class is defined.
+
+```javascript
+window.PfeConfig = {
+  IconSets: [
+    {
+      name: "web",
+      path: "path/to/svg/directory", // Or https://hosted-icons.com/,
+      resolveIconName: function(name, iconSetName, iconSetPath) { // Optional function to resolve icon paths.
         var regex = new RegExp("^" + iconSetName + "-(.*)");
         var match = regex.exec(name);
         return iconSetPath + match[1] + ".svg";
+      }
     }
-    );
+  ]
+};
+```
+
+Now when `pfe-icon` is used, it will automatically reference the icon set defined in the config.
+
+If you would like to opt out of any defaults so that you can dynamically add icon sets later using `PfeIcon.addIconSet()`, use the following:
+
+```javascript
+window.PfeConfig = {
+  IconSets: []
+};
 ```
 
 ### Updating an existing icon set
 
 To updating an existing icon set, you use the same `addIconSet` function.  The first input which is the icon set namespace is required, as is the new path.  You can optionally pass in a new function for parsing the icon names into filenames.
 
-```
+```javascript
     PfeIcon.addIconSet("local", "https://hosted-icons.com/");
 ```
 

elements/pfe-icon/docs/index.md

@@ -181,9 +181,9 @@ Values
 - accent
 - critical
 - important
-- moderate 
+- moderate
 - success
-- info 
+- info
 - default
 
 ### circled
@@ -200,11 +200,47 @@ Icon sets are defined in detail in [this blog post](https://clayto.com/2019/07/w
 To register a new icon set, choose a global namespace for that set and identify the path at which the SVGs for that set will be hosted.  Consider also the function needed to convert the icon name into the filename on that hosted location.  The `addIconSet` call accepts the namespace (as a string), the path to the SVGs (as a string), and a function for parsing the icon name into the filename.
 
 ```javascript
-PfeIcon.addIconSet("local", "./", function(name, iconSetName, iconSetPath) {
-  var regex = new RegExp("^" + iconSetName + "-(.*)");
-  var match = regex.exec(name);
-  return iconSetPath + match[1] + ".svg";
-});
+PfeIcon.addIconSet(
+  "local",
+  "./",
+  function(name, iconSetName, iconSetPath) {
+    var regex = new RegExp("^" + iconSetName + "-(.*)");
+    var match = regex.exec(name);
+    return iconSetPath + match[1] + ".svg";
+  }
+);
+```
+
+### Override the default icon sets
+
+Out of the box, the default icon set (using the rh / web namespace) is hosted on [access.redhat.com](https://access.redhat.com). If you would like to override the `rh / web` namespace, you can add the following to a global variable named `PfeConfig`.
+
+The config must be set _before_ the PfeIcon class is defined.
+
+```javascript
+window.PfeConfig = {
+  IconSets: [
+    {
+      name: "rh",
+      path: "path/to/svg/directory", // Or https://hosted-icons.com/,
+      resolveIconName: function(name, iconSetName, iconSetPath) { // Optional function to resolve icon paths.
+        var regex = new RegExp("^" + iconSetName + "-(.*)");
+        var match = regex.exec(name);
+        return iconSetPath + match[1] + ".svg";
+      }
+    }
+  ]
+};
+```
+
+Now when `pfe-icon` is used, it will automatically reference the icon set defined in the config.
+
+If you would like to opt out of any defaults so that you can dynamically add icon sets later using `PfeIcon.addIconSet()`, use the following:
+
+```javascript
+window.PfeConfig = {
+  IconSets: []
+};
 ```
 
 ### Updating an existing icon set

elements/pfe-icon/src/builtin-icon-sets.js

@@ -1,8 +1,16 @@
 /**
  * An 'init' function to add the PFE built-in icon sets to the current page.
  */
-export function addBuiltIns(PfeIcon) {
-  [
+export function addBuiltIns({ PfeIcon, config }) {
+  // If the user wants to completely opt out of default icon sets,
+  // allow them to.
+  if (config.IconSets && config.IconSets.length === 0) {
+    return;
+  }
+
+  // If the user provides their own icon sets, use them. If not, use our defaults.
+  // @TODO: Switch from access.redhat.com to another icon set.
+  const iconSets = config.IconSets || [
     {
       name: "web",
       path: "https://access.redhat.com/webassets/avalon/j/lib/rh-iconfont-svgs"
@@ -11,15 +19,26 @@ export function addBuiltIns(PfeIcon) {
       name: "rh",
       path: "https://access.redhat.com/webassets/avalon/j/lib/rh-iconfont-svgs"
     }
-  ].forEach(set =>
-    PfeIcon.addIconSet(set.name, set.path, (name, iconSetName, iconSetPath) => {
-      const regex = new RegExp(`^${iconSetName}(-icon)?-(.*)`);
-      const [, , iconName] = regex.exec(name);
+  ];
+
+  let resolveDefaultIconName = (name, iconSetName, iconSetPath) => {
+    const regex = new RegExp(`^${iconSetName}(-icon)?-(.*)`);
+    const [, , iconName] = regex.exec(name);
+
+    const iconId = `${iconSetName}-icon-${iconName}`;
+    const iconPath = `${iconSetPath}/${iconId}.svg`;
 
-      const iconId = `${iconSetName}-icon-${iconName}`;
-      const iconPath = `${iconSetPath}/${iconId}.svg`;
+    return iconPath;
+  };
+
+  // Register the icon sets.
+  iconSets.forEach(set => {
+    // If there's a `resolveIconName` function provided, use it. If not, fall back
+    // to the `resolveDefaultIconName` function.
+    if (set.resolveIconName && typeof set.resolveIconName === "function") {
+      resolveDefaultIconName = set.resolveIconName;
+    }
 
-      return iconPath;
-    })
-  );
+    PfeIcon.addIconSet(set.name, set.path, resolveDefaultIconName);
+  });
 }

elements/pfe-icon/src/pfe-icon.js

@@ -221,7 +221,11 @@ class PfeIcon extends PFElement {
 
 PfeIcon._iconSets = {};
 
-addBuiltIns(PfeIcon);
+// Allow the user to supply their own icon sets via config.
+// See more in the pfe-icon README.md.
+const config = PFElement.config;
+
+addBuiltIns({ PfeIcon, config });
 
 PFElement.create(PfeIcon);
 

elements/pfe-icon/test/index.html

@@ -12,6 +12,8 @@
     // Load and run all tests (.html, .js):
     WCT.loadSuites([
       'pfe-icon_test.html',
+      'pfe-icon_config-test-1.html',
+      'pfe-icon_config-test-2.html',
       'pfe-icon_react_test.html',
       'pfe-icon_vue_test.html',
       // @TODO: Deprecate after 1.0

elements/pfe-icon/test/pfe-icon_config-test-1.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="/components/web-component-tester/browser.js"></script>
+  <script>
+    window.PfeConfig = {
+      IconSets: [
+        {
+          name: "rh",
+          path: "."
+        }
+      ]
+    };
+  </script>
+</head>
+
+<body>
+
+  <div id="icon-container">
+    <pfe-icon icon="rh-icon-bike"></pfe-icon>
+  </div>
+
+  <script type="module">
+    import PfeIcon from "../dist/pfe-icon.js";
+
+    suite("pfe-icon config", () => {
+      test("it should use local icons", () => {
+        // See if the image path within the icon svg uses the local url.
+        const usesLocalDir = document.querySelector("pfe-icon")
+          .shadowRoot
+          .querySelector("image")
+          .getAttribute("xlink:href")
+          .includes("./rh-icon-bike");
+
+        assert.equal(usesLocalDir, true)
+      });
+    });
+  </script>
+</body>
+
+</html>

elements/pfe-icon/test/pfe-icon_config-test-2.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <script src="/components/web-component-tester/browser.js"></script>
+  <script>
+    window.PfeConfig = {
+      IconSets: []
+    };
+  </script>
+</head>
+
+<body>
+
+  <div id="icon-container">
+    <pfe-icon icon="rh-code"></pfe-icon>
+  </div>
+
+  <script type="module">
+    import PfeIcon from "../dist/pfe-icon.js";
+
+    suite("pfe-icon empty config", () => {
+      test("it should not load any svgs if config is set but empty", () => {
+        const iconHref = document.querySelector("pfe-icon")
+          .shadowRoot
+          .querySelector("image")
+          .getAttribute("xlink:href");
+
+        assert.equal(iconHref, "")
+      });
+    });
+  </script>
+</body>
+
+</html>

elements/pfelement/src/pfelement.js

@@ -41,6 +41,16 @@ class PFElement extends HTMLElement {
     return PFElement._trackPerformance;
   }
 
+  /**
+   * A object that contains configuration set outside of pfe.
+   *
+   * @example const config = PFElement.config;
+   */
+  static get config() {
+    // @TODO: Add config validation in the future.
+    return window.PfeConfig || {};
+  }
+
   /**
    * A logging wrapper which checks the debugLog boolean and prints to the console if true.
    *