feat(icons): add linter to standard n actions icons (#5077)

* feat(icons): add linter to standard n actions icons

* chore: remove comments

* chore: update linter with new colors

* chore: update recommended color set

* chore: revert icon lint script

* update script to evaulate changes

* chore: move recommended colors to a separate file

* chore: update the color codes to references

Author: Amarnath510

assets/icon-colors/icon-colors.json

@@ -0,0 +1,32 @@
+{
+  "description": "Recommended Colors for Standard and Action Icons. These colors will be used by icon-linter to verify bg-standard.yml and bg-actions.yml files",
+  "source": "https://docs.google.com/presentation/d/1sZfkUjVIgdvCFac8O3FbLimkUSw9QeVJ8AgZ4fg4QlU/edit#slide=id.g13a86adcae5_0_0",
+  "recommendedColors": [
+    "green-60",
+    "green-40",
+    "indigo-50",
+    "indigo-30",
+    "hot-orange-60",
+    "hot-orange-30",
+    "teal-60",
+    "teal-40",
+    "purple-50",
+    "purple-30",
+    "neutral-60",
+    "neutral-40",
+    "cloud-blue-50",
+    "cloud-blue-30",
+    "violet-60",
+    "violet-40",
+    "blue-60",
+    "blue-20",
+    "pink-60",
+    "pink-40"
+  ],
+  "specialColors": [
+    "#4A154B",
+    "#481A54",
+    "#0F1E3C",
+    "#22683E"
+  ]
+}

gulpfile.js

@@ -159,6 +159,7 @@ gulp.task('lint:javascript:test', lint.javascriptTest);
 gulp.task('lint:html', lint.html);
 gulp.task('lint:markup', lint.markup);
 gulp.task('lint:tokens:yml', lint.tokensYml);
+gulp.task('lint:icons:yml', lint.iconsYml);
 gulp.task('lint:tokens:components', lint.tokensComponents);
 gulp.task('lint:tokens:aliases', lint.tokensAliases);
 
@@ -171,6 +172,13 @@ gulp.task(
   )
 );
 
+gulp.task(
+  'lint:icons',
+  gulp.parallel(
+    withName('lint:icons:yml')(lint.iconsYml)
+  )
+);
+
 gulp.task(
   'lint:examples',
   gulp.series(
@@ -196,7 +204,8 @@ gulp.task(
     withName('lint:spaces')(lint.spaces),
     withName('lint:javascript')(lint.javascript),
     withName('lint:javascript:test')(lint.javascriptTest),
-    'lint:tokens'
+    'lint:tokens',
+    'lint:icons'
   )
 );
 

scripts/gulp/lint/index.js

@@ -8,7 +8,7 @@ import eslint from 'gulp-eslint';
 import stylelint from 'gulp-stylelint';
 import htmlhint from 'gulp-htmlhint';
 import yamlValidate from './validate-yaml.js';
-
+import iconlint from '../plugins/lint-icons';
 import tokenlint from '../plugins/lint-tokens';
 
 import validateMarkup from './validate-markup';
@@ -135,3 +135,12 @@ export const tokensAliases = () =>
     .src(['./design-tokens/aliases/*.yml'])
     .pipe(tokenlint({ prefix: false }))
     .pipe(tokenlint.report('verbose'));
+
+/**
+ * To ensure that only the recommended colors are used for standard and action icons, a linter is being used to evaluate them
+ */
+export const iconsYml = () =>
+  gulp
+    .src(['./design-tokens/bg-standard.yml', './design-tokens/bg-actions.yml'])
+    .pipe(iconlint())
+    .pipe(iconlint.report());

scripts/gulp/plugins/lint-icons.js

@@ -0,0 +1,113 @@
+import paths from './../../helpers/paths';
+const path = require('path');
+const yaml = require('js-yaml');
+const map = require('map-stream');
+const _ = require('lodash');
+const gutil = require('gulp-util');
+const sdsColorPalette = require(`${path.resolve(paths.sdsStylingAliases, 'color-palettes.json')}`).aliases;
+const recommendedIconColors = require(path.resolve(__dirname, '../../../assets/icon-colors/icon-colors.json'));
+
+const recommendedColorsHexCodes = recommendedIconColors.recommendedColors
+                                    .map(color => `PALETTE_${color.replace(/-/g, '_').toUpperCase()}`)
+                                    .map(color => sdsColorPalette[color].toUpperCase());
+const ICONS_COLORS = [...recommendedColorsHexCodes, ...recommendedIconColors.specialColors];
+const ICON_TYPES_TO_CHECK = ["standard", "actions"];
+
+const verboseReporter = (lint, file) =>
+  lint.errors.forEach(error => {
+    const errors = Array.from(error.error).map(err => `\t❌ ${err}`).join('\n');
+    const icon = error.icon;
+    const filePath = file.path;
+    const message = `${icon} in ${filePath} has following error(s): \n${errors}`;
+
+    gutil.log('iconlint: ', `${message}`);
+  });
+
+const IconLint = function (icons, pluginOptions = {}) {
+  let self = this;
+
+  if (!(self instanceof IconLint)) {
+    return new IconLint(icons, pluginOptions);
+  }
+
+  self.errors = [];
+
+  _.keys(icons).forEach(icon => {
+    const iconName = icon;
+    const iconColor = icons[icon].value;
+    try {
+      self.iconColorAndCaseLint(iconName, iconColor, pluginOptions.type);
+    } catch (e) {
+      self.errors.push({
+        icon: iconName,
+        error: e
+      });
+    }
+  });
+
+  return {
+    errors: self.errors
+  };
+};
+
+IconLint.prototype.iconColorAndCaseLint = function (iconName, iconColor, iconType) {
+  const errors = [];
+
+  if (!iconName || iconName.trim().length === 0 || !iconColor || iconColor.trim().length === 0) {
+    errors.push('Icon name or color cannot be empty');
+  }
+
+  if (iconName.toUpperCase() !== iconName) {
+    errors.push('Icon names should be in uppercase');
+  }
+
+  if (iconColor.toUpperCase() !== iconColor) {
+    errors.push('Icon color code should be in uppercase');
+  }
+
+  if (!_.includes(ICONS_COLORS, iconColor.toUpperCase())) {
+    errors.push(`Icon color should be part of recommended colors - [${ICONS_COLORS}]`,
+      `Please add the icon color to the recommended list if it is meant to be included`
+      );
+  }
+
+  if (errors.length) {
+    throw errors;
+  }
+};
+
+const iconlintPlugin = (pluginOptions = {}) =>
+  map(function (file, cb) {
+    const iconType = path.parse(file.path).name.replace('bg-', '');
+    if (ICON_TYPES_TO_CHECK.includes(iconType)) {
+      pluginOptions.type = iconType;
+      const icons = yaml.safeLoad(file.contents.toString('utf8'));
+      const iconList = icons.props ? icons.props : [];
+      const result = IconLint(iconList, pluginOptions);
+      file.iconlint = {
+        errors: result.errors
+      };
+    }
+
+    // Pass file
+    cb(null, file);
+  });
+
+iconlintPlugin.report = _ =>
+  map(function (file, cb) {
+    let error = null;
+    const iconlintErrors = file.iconlint ? file.iconlint.errors : null;
+    if (iconlintErrors) {
+      if (iconlintErrors.length) {
+        error = new gutil.PluginError(
+          'iconlint', `Found ${iconlintErrors.length} linting error(s)`
+        );
+      }
+      verboseReporter(file.iconlint, file);
+    }
+
+    // Pass file
+    cb(error, file);
+  });
+
+module.exports = iconlintPlugin;

scripts/helpers/paths.js

@@ -42,6 +42,10 @@ module.exports = {
     node_modules,
     '@salesforce-ux/sds-styling-hooks/src/props'
   ),
+  sdsStylingAliases: path.resolve(
+    node_modules,
+    '@salesforce-ux/sds-styling-aliases/dist'
+  ),
   icons: path.resolve(
     node_modules,
     '@salesforce-ux/icons/dist/salesforce-lightning-design-system-icons'