feat(icons-tnt): add new TNT icon collection (#2414)

based on SAP-icons-TNT

Author: pskelin

package.json

@@ -9,20 +9,22 @@
     "ui5"
   ],
   "scripts": {
-    "build": "npm-run-all --sequential build:base build:localization build:theme-base build:icons build:main build:fiori",
+    "build": "npm-run-all --sequential build:base build:localization build:theme-base build:icons build:icons-tnt build:main build:fiori",
     "build:localization": "cd packages/localization && yarn build",
     "build:base": "cd packages/base && yarn build",
     "build:theme-base": "cd packages/theme-base && yarn build",
     "build:icons": "cd packages/icons && yarn build",
+    "build:icons-tnt": "cd packages/icons-tnt && yarn build",
     "build:main": "cd packages/main && yarn build",
     "build:fiori": "cd packages/fiori && yarn build",
     "build:playground": "yarn build:main && yarn build:fiori && cd packages/playground && yarn build",
     "build:playground:master": "yarn build:main && yarn build:fiori && cd packages/playground && yarn build:master",
-    "clean": "npm-run-all --sequential clean:base clean:localization clean:theme-base clean:icons clean:main clean:fiori",
+    "clean": "npm-run-all --sequential clean:base clean:localization clean:theme-base clean:icons clean:icons-tnt clean:main clean:fiori",
     "clean:localization": "cd packages/localization && yarn clean",
     "clean:base": "cd packages/base && yarn clean",
     "clean:theme-base": "cd packages/theme-base && yarn clean",
     "clean:icons": "cd packages/icons && yarn clean",
+    "clean:icons-tnt": "cd packages/icons-tnt && yarn clean",
     "clean:main": "cd packages/main && yarn clean",
     "clean:fiori": "cd packages/fiori && yarn clean",
     "prepare:main": "cd packages/main && nps prepare",
@@ -35,8 +37,8 @@
     "dev:fiori": "cd packages/fiori && nps dev",
     "scopeDev:main": "cd packages/main && nps scope.dev",
     "scopeDev:fiori": "cd packages/fiori && nps scope.dev",
-    "start": "npm-run-all --sequential build:base build:localization build:theme-base build:icons prepare:main prepare:fiori start:all",
-    "startWithScope": "npm-run-all --sequential build:base build:localization build:theme-base build:icons scopePrepare:main scopePrepare:fiori scopeStart:all",
+    "start": "npm-run-all --sequential build:base build:localization build:theme-base build:icons build:icons-tnt prepare:main prepare:fiori start:all",
+    "startWithScope": "npm-run-all --sequential build:base build:localization build:theme-base build:icons build:icons-tnt scopePrepare:main scopePrepare:fiori scopeStart:all",
     "start:all": "npm-run-all --parallel dev:base dev:localization dev:main dev:fiori",
     "scopeStart:all": "npm-run-all --parallel dev:base dev:localization scopeDev:main scopeDev:fiori",
     "start:base": "cd packages/base && yarn start",
@@ -68,6 +70,7 @@
     "packages/main",
     "packages/fiori",
     "packages/icons",
+    "packages/icons-tnt",
     "packages/tools",
     "packages/playground"
   ]

packages/base/src/SVGIconRegistry.js

@@ -6,28 +6,41 @@ const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map())
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
 const DEFAULT_COLLECTION = "SAP-icons";
 
-const calcKey = (name, collection) => {
+const parseName = name => {
 	// silently support ui5-compatible URIs
 	if (name.startsWith("sap-icon://")) {
 		name = name.replace("sap-icon://", "");
-		[name, collection] = name.split("/").reverse();
 	}
+
+	let collection;
+	[name, collection] = name.split("/").reverse();
 	collection = collection || DEFAULT_COLLECTION;
-	return `${collection}:${name}`;
+	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
+	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
+	if (collection === "SAP-icons-TNT") {
+		collection = "tnt";
+	}
+	const registryKey = `${collection}/${name}`;
+	return { name, collection, registryKey };
 };
 
+
 const registerIcon = (name, { pathData, ltr, accData, collection } = {}) => { // eslint-disable-line
-	const key = calcKey(name, collection);
+	if (!collection) {
+		collection = DEFAULT_COLLECTION;
+	}
+
+	const key = `${collection}/${name}`;
 	registry.set(key, { pathData, ltr, accData });
 };
 
-const getIconDataSync = (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
-	return registry.get(key);
+const getIconDataSync = nameProp => {
+	const { registryKey } = parseName(nameProp);
+	return registry.get(registryKey);
 };
 
-const getIconData = async (name, collection = DEFAULT_COLLECTION) => {
-	const key = calcKey(name, collection);
+const getIconData = async nameProp => {
+	const { collection, registryKey } = parseName(nameProp);
 
 	if (!iconCollectionPromises.has(collection)) {
 		iconCollectionPromises.set(collection, Promise.resolve(ICON_NOT_FOUND));
@@ -39,14 +52,12 @@ const getIconData = async (name, collection = DEFAULT_COLLECTION) => {
 		return iconData;
 	}
 
-	return registry.get(key);
+	return registry.get(registryKey);
 };
 
 const getRegisteredNames = async () => {
-	if (iconCollectionPromises.has(DEFAULT_COLLECTION)) {
-		await iconCollectionPromises.get(DEFAULT_COLLECTION);
-	}
-	return Array.from(registry.keys()).map(k => k.split(":")[1]);
+	await Promise.all(Array.from(iconCollectionPromises.values()));
+	return Array.from(registry.keys());
 };
 
 const registerCollectionPromise = (collection, promise) => {

packages/icons-tnt/.npmignore

@@ -0,0 +1,15 @@
+*.css
+dist/resources
+dist/test-resources
+lib/
+node_modules/
+src/
+test/
+bundle.*.js
+.eslintrc.js
+.eslintignore
+main.*js
+rollup*
+serve.json
+wdio.conf.js
+!core

packages/icons-tnt/.npmrc

@@ -0,0 +1,2 @@
+# Enforce public npm registry
+registry = https://registry.npmjs.org/

packages/icons-tnt/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/icons-tnt/README.md

@@ -0,0 +1,49 @@
+![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+
+# UI5 Web Components - SAP Fiori Tools Icons
+
+[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
+[![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
+
+Provides assets for the rich `tnt` icon collection.
+
+|        Icon asset        |                           Module import                            |
+| ------------------------ | ------------------------------------------------------------------ |
+| All icons (~33KB zipped) | `import "@ui5/webcomponents-icons-tnt/dist/Assets.js";`                |
+| Actor icon               | `import "@ui5/webcomponents-icons-tnt/dist/actor.js";`           |
+| Ad hoc actor icon        | `import "@ui5/webcomponents-icons-tnt/dist/ad-hoc-actor.js";`    |
+| ...                      | ...                                                                |
+| Workflow editor icon     | `import "@ui5/webcomponents-icons-tnt/dist/workflow-editor.js";` |
+
+*Note:* The `@ui5/webcomponents-icons-tnt` package does not provide any web components per se, but rather icon assets,
+usable by other web components such as `ui5-icon`. You could import all icons, but it's recommended to import
+just the ones that your app will actually use.
+
+## Usage
+
+Since this is a non-default icon collection, all names have to be prefixed with the collection name and a `/` separator when used by web components.
+
+Example usage with `<ui5-icon>` web component:
+
+```html
+<ui5-icon name="tnt/actor"></ui5-icon>
+```
+
+For a full list of the icons in the `tnt` collection, click [here](https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).
+
+For a complete list of all public module imports from the `icons` package, click [here](../../docs/Public%20Module%20Imports.md#icons):
+
+## Resources
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
+- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
+
+## Support
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+
+## Contribute
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md).
+
+## License
+Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.

packages/icons-tnt/package-scripts.js

@@ -0,0 +1,14 @@
+const getScripts = require("@ui5/webcomponents-tools/icons-collection/nps.js");
+
+const options = {
+	collectionName: "SAP-icons-TNT",
+};
+
+const scripts = getScripts(options);
+
+// no i18n in this package
+scripts.build.i18n = "";
+
+module.exports = {
+	scripts
+};

packages/icons-tnt/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ui5/webcomponents-icons-tnt",
+  "version": "1.0.0-rc.9",
+  "description": "UI5 Web Components: SAP Fiori Tools icon set",
+  "author": "SAP SE (https://www.sap.com)",
+  "license": "Apache-2.0",
+  "private": false,
+  "keywords": [
+    "openui5",
+    "sapui5",
+    "ui5"
+  ],
+  "scripts": {
+    "clean": "wc-dev clean",
+    "build": "wc-dev build",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "directory": "packages/icons-tnt"
+  },
+  "dependencies": {
+    "@ui5/webcomponents-base": "0.24.0"
+  },
+  "devDependencies": {
+    "@ui5/webcomponents-tools": "1.0.0-rc.9",
+    "chromedriver": "latest"
+  }
+}

packages/icons-tnt/src/Assets.js

@@ -0,0 +1 @@
+import "./json-imports/Icons.js";