feat: support SAPBusinessSuite icons v1 and v2 font ( Horizon ) (#6535)

* feat: support business icons v1 and v2 font ( Horizon )

packages/base/src/config/Icons.ts

@@ -3,16 +3,17 @@ import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js
 
 const IconCollectionConfiguration = new Map<string, string>();
 
-// All supported icon collections + uknown custom ones
-type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | string;
+// All supported icon collections + unknown custom ones
+type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | "business-suite-v1" | "business-suite-v2" | string;
 
 // All registered icon collections - all icon collections resolves to these options at the end
 enum RegisteredIconCollection {
 	SAPIconsV4 = "SAP-icons-v4",
 	SAPIconsV5 = "SAP-icons-v5",
 	SAPIconsTNTV2 = "tnt-v2",
 	SAPIconsTNTV3 = "tnt-v3",
-	SAPBSIcons = "business-suite",
+	SAPBSIconsV1 = "business-suite-v1",
+	SAPBSIconsV2 = "business-suite-v2",
 }
 
 /**
@@ -87,9 +88,11 @@ const getEffectiveIconCollection = (collectionName?: IconCollection): IconCollec
  * - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz", "Belize", and resolves to "tnt-v3" in "Horizon"
  * - "tnt-v2" forces "TNT icons v2" in any theme and resolves to itself "tnt-v2"
  * - "tnt-v3" forces "TNT icons v3" in any theme and resolves to itself "tnt-v3"
- * - "business-suite" (and its alias "BusinessSuiteInAppSymbols") has no versioning and resolves to "business-suite"
+ * - "business-suite" (and its alias "BusinessSuiteInAppSymbols") resolves to "business-suite-v1" in "Quartz", "Belize", and resolves to "business-suite-v2" in "Horizon"
+ * - "business-suite-v1" forces "Business Suite icons v1" in any theme and resolves to itself "business-suite-v1"
+ * - "business-suite-v2" forces "Business Suite icons v2" in any theme and resolves to itself "business-suite-v2"
  *
- * <b>Note:</b> "SAP-icons-v4", "SAP-icons-v5", "tnt-v2", "tnt-v3" and "business-suite" are just returned
+ * <b>Note:</b> "SAP-icons-v4", "SAP-icons-v5", "tnt-v2", "tnt-v3", "business-suite-v1" and "business-suite-v2" are just returned
  * @param { IconCollection } collectionName
  * @returns { RegisteredIconCollection } the registered collection name
  */
@@ -104,6 +107,10 @@ const getIconCollectionByTheme = (collectionName?: IconCollection): RegisteredIc
 		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsTNTV3 : RegisteredIconCollection.SAPIconsTNTV2;
 	}
 
+	if (collectionName === "business-suite") {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPBSIconsV2 : RegisteredIconCollection.SAPBSIconsV1;
+	}
+
 	return collectionName as RegisteredIconCollection;
 };
 

packages/icons-business-suite/README.md

@@ -28,6 +28,28 @@ Example usage with `<ui5-icon>` web component:
 <ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>
 ```
 
+The package provides two versions of each icon (SAP Business Suite Icons v1 and SAP Business Suite Icons v2).
+If you don't specify the versioned collection name, like in the example above:
+
+```html
+<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>
+```
+
+the framework will detect the current theme and render the corresponding icon - from `SAP Icons Business suite V2` (collection name `business-suite-v2`) for SAP Horizon theme family  (sap_horizon, sap_horizon_dark, etc.), and from `SAP Icons Business suite V1` (collection name `business-suite-v1`) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).
+
+### Collections `business-suite-v1` and `business-suite-v2 `
+
+In case you want to always display the `SAP Icons Business suite V1` icons in all themes, you can set it explicitly via the `business-suite-v1` collection name:
+
+```html
+<ui5-icon name="business-suite-v1/answered"></ui5-icon>
+```
+
+The same applies if you want to always display the `SAP Icons Business suite V2` icons. You can set it explicitly via the `business-suite-v2` collection name:
+```html
+<ui5-icon name="business-suite-v2/answered"></ui5-icon>
+```
+
 For a full list of the icons in the `business-suite` collection, click [here](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).
 
 ## Resources

packages/icons-business-suite/global.d.ts

@@ -3,7 +3,12 @@ import { ColectionData } from "@ui5/webcomponents-base/dist/asset-registries/Ico
 export {};
 
 declare global {
-	module "*/generated/assets/SAP-icons-business-suite.json" {
+	module "*/generated/assets/v1/SAP-icons-business-suite.json" {
+		const content: ColectionData;
+		export default content;
+	}
+
+	module "*/generated/assets/v2/SAP-icons-business-suite.json" {
 		const content: ColectionData;
 		export default content;
 	}

packages/icons-business-suite/package-scripts.js

@@ -2,6 +2,7 @@ const getScripts = require("@ui5/webcomponents-tools/icons-collection/nps.js");
 
 const options = {
 	collectionName: "SAP-icons-business-suite",
+	versions: ["v1", "v2"],
 	typescript: true,
 };
 

packages/icons-business-suite/src/json-imports/Icons-static.ts

@@ -1,13 +1,21 @@
 import { registerIconLoader, CollectionData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
-import SAPIconsBusinessSuiteUrl from "../generated/assets/SAP-icons-business-suite.json";
+import SAPIconsBusinessSuiteUrlV1 from "../generated/assets/v1/SAP-icons-business-suite.json";
+import SAPIconsBusinessSuiteUrlV2 from "../generated/assets/v2/SAP-icons-business-suite.json";
 
-const loadIconsBundle = async (): Promise<CollectionData> => {
-	if (typeof SAPIconsBusinessSuiteUrl === "object") {
+const loadIconsBundle = async (collection: string): Promise<CollectionData> => {
+	if (typeof SAPIconsBusinessSuiteUrlV1 === "object" || typeof SAPIconsBusinessSuiteUrlV2 === "object") {
 		// inlined from build
 		throw new Error("[icons-business-suite] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
 	}
-	return (await fetch(SAPIconsBusinessSuiteUrl)).json();
+
+	const iconsUrl: string = collection === "business-suite-v1" ? SAPIconsBusinessSuiteUrlV1 : SAPIconsBusinessSuiteUrlV2;
+	return (await fetch(iconsUrl)).json();
 }
 
-registerIconLoader("business-suite", loadIconsBundle);
+const registerLoaders = () => {
+	registerIconLoader("business-suite-v1", loadIconsBundle);
+	registerIconLoader("business-suite-v2", loadIconsBundle);
+};
+
+registerLoaders();

packages/icons-business-suite/src/json-imports/Icons.ts

@@ -1,11 +1,23 @@
 import { registerIconLoader, CollectionData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
-const loadIconsBundle = async (): Promise<CollectionData> => {
-	const iconData = (await import("../generated/assets/SAP-icons-business-suite.json")).default;
-    if (typeof iconData === "string" && (iconData as string).endsWith(".json")) {
-        throw new Error("[icons-business-suite] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons-business-suite/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
-    }
-    return iconData;
+const loadIconsBundle = async (collection: string): Promise<CollectionData> => {
+	let iconData: CollectionData;
+
+	if (collection === "business-suite-v1") {
+		iconData = (await import(`../generated/assets/v1/SAP-icons-business-suite.json`)).default;
+	} else {
+		iconData = (await import(`../generated/assets/v2/SAP-icons-business-suite.json`)).default;
+	}
+
+	if (typeof iconData === "string" && (iconData as string).endsWith(".json")) {
+		throw new Error("[icons-business-suite] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons-business-suite/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
+	}
+	return iconData;
 }
 
-registerIconLoader("business-suite", loadIconsBundle);
+const registerLoaders = () => {
+	registerIconLoader("business-suite-v1", loadIconsBundle);
+	registerIconLoader("business-suite-v2", loadIconsBundle);
+};
+
+registerLoaders();