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

[zhawkins]

pfe-icon uses access.redhat.com as it's default source for SVG files. This is useful for quick prototypes but there's no way to override this default without a http request to access.redhat.com first.

This PR adds support for configuration that can be added to the page before pfe-icon is loaded overriding the default icon set(s).

Example:

window.PfeConfig = {
  IconSets: [
    {
      name: "web",
      path: "https://static.redhat.com/libs/redhat/rh-iconfont/4.2.0/svg"
    },
    {
      name: "rh",
      path: "https://static.redhat.com/libs/redhat/rh-iconfont/4.2.0/svg"
    }
  ]
};

Related issues

• (pfe-icon needs a function to opt out of default icon set #723) pfe-icon needs a function to opt out of default icon set

Testing instructions

There are automated tests for these but here's the manual version:

Setup:

1. Check out branch US288109-pfe-icon-domain
2. npm run dev pfe-icon

🧪 Make sure access.redhat.com is used by default

1. Visit http://localhost:8080/components/icon/
2. Open Chrome devtools and select the "network" tab.
3. Filter by Img
4. Hover over the request for rh-icon-leaf.svg and you should see it coming from access.redhat.com

🧪 pfe-icon should honor a different default icon set

1. Update elements/pfe-icon/docs/index.md line 21 to include the following:

<script>
  window.PfeConfig = {
  IconSets: [
    {
      name: "web",
      path: "https://static.redhat.com/libs/redhat/rh-iconfont/4.2.0/svg"
    },
    {
      name: "rh",
      path: "https://static.redhat.com/libs/redhat/rh-iconfont/4.2.0/svg"
    }
  ]
};
</script>

2. Save the file. Cancel the current watch task and run npm run dev pfe-icon again.
3. Visit http://localhost:8080/components/icon/
4. Open Chrome devtools and select the "network" tab.
5. Filter by Img
6. Hover over the request for rh-icon-leaf.svg and you should see it coming from static.redhat.com

🧪 pfe-icon should allow a user to completely opt out of a default icon set

1. Remove the <script></script> coded you added to elements/pfe-icon/docs/index.md and replace it with:

<script>
  window.PfeConfig = {
  IconSets: []
};
</script>

2. Save the file. Cancel the current watch task and run npm run dev pfe-icon again.
3. Visit http://localhost:8080/components/icon/
4. Open Chrome devtools and select the "network" tab.
5. Filter by Img
6. You should not see any request for rh-icon-leaf.svg.

🧪 pfe-icon should honor a resolveIconName function

1. Update elements/pfe-icon/docs/index.md line 21 to include the following:

<script>
  window.PfeConfig = {
  IconSets: [
    {
      name: "rh",
      path: "https://static.redhat.com/libs/redhat/rh-iconfont/4.2.0/svg",
      resolveIconName: function(name, iconSetName, iconSetPath) { // Optional function to resolve icon paths.
        const regex = new RegExp(`^${iconSetName}(-icon)?-(.*)`);
        const [, , iconName] = regex.exec(name);

        const iconId = `${iconSetName}-icon-${iconName}`;
        const iconPath = `${iconSetPath}/${iconId}.svg?hello-there`;

        return iconPath;
      }
    }
  ]
};
</script>

2. Save the file. Cancel the current watch task and run npm run dev pfe-icon again.
3. Visit http://localhost:8080/components/icon/
4. Open Chrome devtools and select the "network" tab.
5. Filter by Img
6. Hover over the request for rh-icon-leaf.svg and you should see it coming from static.redhat.com AND see the ?hello-there appended to the URL.

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Android mobile device (such as the Galaxy S9)

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• Tests have been updated to cover these changes.
• Browser testing passed.
• Changelog updated.
• Documentation (README.md, WHY.md, etc.) updated or added.
• Link to the demo recording: pfe-icon config

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[starryeyez024]

LGTM - though I defer to @castastrophe for legit code review.

Food for thought: should we add a @todo where we deprecate access.redhat.com icons as the default, so that the open source version of this component does not ship with that path? Instead we would load it in the demo & test files only. Since this would be a breaking change, we would want to wait til 2.0 to do this though.

[castastrophe]

Looks good! Not sure how we want to handle the static URL considering our advice up until now has been not to commit the URL to the upstream repo.

[zhawkins]

Looks good! Not sure how we want to handle the static URL considering our advice up until now has been not to commit the URL to the upstream repo.

Let me think on it. I'm sure I can find a way to write a test that doesn't involve that url.

[zhawkins]

Updated!

[castastrophe]

This is the greatest PR I have ever seen 🥳