dynamically build the defaultIcons query result to avoid harcoding pr…

…o familyStyles

packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.spec.ts

@@ -1,6 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { FaIconChooser } from './fa-icon-chooser';
-import { defaultIcons } from '../../utils/utils';
+import { buildDefaultIconsSearchResult } from '../../utils/utils';
 import { get } from 'lodash';
 
 // TODO: tests
@@ -66,6 +66,8 @@ describe('fa-icon-chooser', () => {
       }
     });
 
+    expect(foundFaCss).toBe(true);
+
     // the script should have been injected into the outer DOM's head
     const scriptsInHead = await page.doc.head.querySelectorAll('script');
     let foundFaScript = false;
@@ -77,6 +79,12 @@ describe('fa-icon-chooser', () => {
 
     expect(foundFaScript).toBe(true);
 
+    const defaultIcons = buildDefaultIconsSearchResult([
+      {family: "classic", style: "solid"},
+      {family: "classic", style: "regular"},
+      {family: "classic", style: "brands"}
+    ])
+
     // The initial default icons should have be shown
     get(defaultIcons, 'data.search', [])
       .filter(i => i.familyStylesByLicense.free.length > 0)

packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx

@@ -12,7 +12,7 @@ import {
   buildIconChooserResult,
   CONSOLE_MESSAGE_PREFIX,
   createFontAwesomeScriptElement,
-  defaultIcons,
+  buildDefaultIconsSearchResult,
   freeCdnBaseUrl,
   IconChooserResult,
   IconLookup,
@@ -428,7 +428,7 @@ export class FaIconChooser {
         const css = document.createTextNode(dom.css());
         style.appendChild(css);
         this.host.shadowRoot.appendChild(style);
-        this.defaultIcons = defaultIcons;
+        this.defaultIcons = buildDefaultIconsSearchResult(this.familyStyles)
 
         this.setIcons(this.defaultIcons, this.iconUploadsAsIconUploadLookups());
 

packages/fa-icon-chooser/src/utils/utils.ts

@@ -1,13 +1,41 @@
-import defaultIconsSearchResult from "./defaultIconsSearchResult.json";
+import defaultIconsSearchResultTemplate from "./defaultIconsSearchResult.json";
 import { valid as validSemver } from "semver";
+import { cloneDeep, get, set } from "lodash";
 
 const FREE_CDN_URL = "https://use.fontawesome.com";
 const PRO_KIT_ASSET_URL = "https://ka-p.fontawesome.com";
 const FREE_KIT_ASSET_URL = "https://ka-f.fontawesome.com";
 
 export type UrlTextFetcher = (url: string) => Promise<string>;
 
-export const defaultIcons: any = defaultIconsSearchResult;
+// Given a set of familyStyles, replace the term "ALL" in the defaultIconsSearchResult
+// asset. This is to allow that static query result to dynamically include
+// new familyStyles, as they are released and made available via the GraphQL API.
+// It rests on the assumption that each (non-brands) icon in that static default query is
+// available in all Pro familyStyles.
+export function buildDefaultIconsSearchResult(familyStyles: object): object {
+  const allNonBrandsFamilyStyles = []
+
+  for(const family in familyStyles) {
+    for(const style in familyStyles[family]) {
+      if('brands' !== style && 'brands' !== family) {
+        allNonBrandsFamilyStyles.push({family, style})
+      }
+    }
+  }
+
+  const defaultIconsSearchResult = cloneDeep(defaultIconsSearchResultTemplate)
+
+  const icons = get(defaultIconsSearchResult, 'data.search', [])
+
+  for(const i of icons) {
+    if('ALL' === get(i, 'familyStylesByLicense.pro')) {
+      set(i, 'familyStylesByLicense.pro', allNonBrandsFamilyStyles)
+    }
+  }
+
+  return defaultIconsSearchResult
+}
 
 export interface IconLookup {
   prefix: string;