fix: update process to scrub dirty SVGs

.svglintrc.js

@@ -2,7 +2,8 @@ module.exports = {
     rules: {
         elm: {
             "svg": 1,
-            "svg > title": 1
+            "svg > title": 1,
+            "svg > desc": 1
         },
         attr: [{ // ensure that the SVG element has the appropriate attributes
             "role": "img",
@@ -32,11 +33,13 @@ module.exports = {
             "rule::whitelist": true
         }, { // ensure that a g element has the appropriate attributes
             "style": false,
+            "fill": false,
             "id": false,
 
             "rule::selector": "svg g"
         }, { // ensure that a path element has the appropriate attributes
             "style": false,
+            "fill": false,
 
             "rule::selector": "svg path"
         }]

.travis.yml

@@ -16,7 +16,7 @@ before_script:
   - npm run png@2x
   - npm run png@3x
   - npm run copySass
-  - npm run svgTest
+  - npm run svgjest
 
 after_success:
   - npx semantic-release

README.md

@@ -28,7 +28,7 @@ Icon styles are inheriting from Auro Design Tokens. Any reference to the followi
 
 For use in situations where CSS custom properties are not supported. In the `dist/` directory is `icons.scss`. Import this Sass file for default shape styles.
 
-__`orion-icons.scss` is deprecated, please reference `icons.scss`.__
+<span style="color: red">`orion-icons.scss` is deprecated, please reference `icons.scss`.</span>
 
 ```scss
 @import '@alaskaairux/orion-icons/dist/icons';
@@ -46,11 +46,11 @@ Due to dependency on Auro tokens, be sure to import the Sass variables prior to
 @import "~@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables";
 ```
 
-#### DEPRECATION WARNING! 
+#### <span style="color: red">DEPRECATION WARNING! </span>
 
-__NOTE: This process has been deprecated!__ 
+<span style="color: red">__NOTE: This process has been deprecated!__ </span>
 
-__Due to Auro updates, sizes are uniform. There is no longer a need to have individual selectors. If you are using these selectors, simply remove the reference to `$iconMap` to discontinue use.__
+<span style="color: red">Due to Auro updates, sizes are uniform. There is no longer a need to have individual selectors. If you are using these selectors, simply remove the reference to `$iconMap` to discontinue use.</span>
 
 By default, no CSS classes are created when importing this file. To opt-in to the icon styles needed, add a config variable map, prior to import, that will set a flag to `true` to output the classes needed. See the following example:
 
@@ -268,6 +268,7 @@ See [angular-svg-icon](https://www.npmjs.com/package/angular-svg-icon) for more
 Adding new icons to this repository requires a few steps.
 
 1. Add a new icon `.svg` file to the `src/icons/` directory (see DOs and DON'Ts below)
+1. If the icons is to retain its designed color, please place the new icon in the `src/icons/fullColor` directory 
 1. Add **shape schema** to `./src/data/icons.json` file (see example below)
 1. Submit pull request for approval
 
@@ -285,7 +286,9 @@ $ open icons.html
 
 ### Icon shape schema
 
-When adding new icons, be sure to follow this example to add the proper data to the `icons.json` file
+When adding new icons, be sure to follow this example to add the proper data to the `icons.json` file. Any attribute defined in the `"commonProperties"` object may be over-written in the individual `"icons"` object. 
+
+For icons that need to retain their full color spec, be sure to add the `"path": "/icons/fullColor"` attribute to the icon object. 
 
 ```javascript
 {
@@ -296,15 +299,28 @@ When adding new icons, be sure to follow this example to add the proper data to
       "color": "currentColor",
       "PngColor": "var(--color-type-theme-light-link)",
       "PngSize": 24,
-      "width": "var(--size-icon-square-lg)",
-      "height": "var(--size-icon-square-lg)"
+      "width": "var(--auro-size-lg)",
+      "height": "var(--auro-size-lg)",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "xmlns_xlink": "http://www.w3.org/1999/xlink",
+      "viewBox": "0 0 24 24",
+      "path": "/icons"
   },
   "icons": [
     {
-      "title": "Arrow Up",
-      "desc": "Up pointer",
-      "style": "ico__toggleArrow",
-      "category": "interface"
+      "title": "Error",
+      "name": "error",
+      "desc": "Error alert icon",
+      "style": "ico_squareLarge",
+      "category": "alert"
+    },
+    {
+      "title": "CC Alaska",
+      "name": "cc-alaska",
+      "desc": "Alaska Credit Card",
+      "style": "ico_squareLarge",
+      "category": "payment",
+      "path": "/icons/fullColor"
     }
   ]
 }
@@ -321,18 +337,10 @@ All new icon pull requests MUST comply with the following specifications. Any pu
 
 #### DO
 
-Reduce the SVG HTML to only the following attributes;
-
-1. Set `<title>` specifically to `<title>iconTitle</title>`
-1. Set `<desc>` specifically to `<desc>iconDesc</desc>`
-1. Set `<style></style>`
-1. Keep all necessary `<svg>` elements to render output
+Please reduce the SVG HTML to only the following attributes. The build process will scrub away any unwanted attributes from the SVG file. 
 
 ```html
 <svg>
-  <title>iconTitle</title>
-  <desc>iconDesc</desc>
-  <style></style>
   <g>
     <polygon points="43.9886686 48 24 27.9721836 4.01133144 48 0 44.0611961 19.9886686 23.9666203 0.0679886686 3.93880389 4.14730878 0 24 19.961057 43.8526912 0 47.9320113 3.93880389 27.9433428 23.9666203 48 44.0611961"></polygon>
   </g>
@@ -341,9 +349,7 @@ Reduce the SVG HTML to only the following attributes;
 
 #### DO NOT
 
-Do not include unnecessary specifications, attributes, spaces and returns in the HTML
-
-Never include the following:
+Please do not include unnecessary specifications, attributes, spaces and returns in the HTML as they will be scrubbed away in the build process. Anything not manually removed or scrubbed will fail the svglint tests. 
 
 1. xml version
 1. `width` or `height` hard coded HTML attributes
@@ -371,7 +377,7 @@ The following scripts are available from `./package.json`
 
 | script | Description |
 |----|----|
-| svgTest | runs `jest` to ensure that `index.js` and `./data/icons.json` are formatted correctly |
+| svgjest | runs `jest` to ensure that `index.js` and `./data/icons.json` are formatted correctly |
 | jsonlint | validates that `./data/orion-icons.json` is correctly formatted JSON |
 | svglint | validates all SVGs per spec `./.svglintrc.js`|
 | test | runs jsonlint and svglint |

package.json

@@ -33,18 +33,18 @@
   },
   "scripts": {
     "jsonlint": "jsonlint src/data/icons.json -q -V .jsonlintschema",
-    "svglint": "svglint dist/icons/**/*.svg --ci",
+    "svglint": "svglint dist/icons/*.svg dist/icons/alert/*.svg dist/icons/in-flight/*.svg dist/icons/interface/*.svg dist/icons/shop/*.svg dist/icons/social/*.svg dist/icons/terminal/*.svg --ci",
     "primarybuild": "node scripts/primarybuild.js",
     "sassRender": "sass-render dist/tokens/*.css",
     "copySass": "copyfiles -f ./src/*.scss ./dist",
-    "test": "npm-run-all jsonlint svglint",
-    "svgTest": "jest",
+    "test": "npm-run-all svgjest jsonlint svglint",
+    "svgjest": "jest",
     "delete": "rm -rf ./dist",
     "png@2x": "convert-svg-to-png --height 48px dist/icons/*24@2x.png",
     "png@3x": "convert-svg-to-png --height 72px dist/icons/*24@3x.png",
-    "ciBuild": "npm-run-all delete primarybuild sassRender png@2x png@3x copySass svgTest",
-    "devBuild": "npm-run-all delete primarybuild sassRender copySass",
-    "watch": "nodemon -e svg,scss,js --watch src --exec npm run svgTest"
+    "ciBuild": "npm-run-all delete primarybuild test sassRender png@2x png@3x copySass svgjest",
+    "devBuild": "npm-run-all delete primarybuild test sassRender copySass",
+    "watch": "nodemon -e svg,scss,js --watch src --exec npm-run-all primarybuild test"
   },
   "husky": {
     "hooks": {

scripts/primarybuild.js

@@ -9,7 +9,7 @@
 
 const dataFile = '../src/data/icons.json';
 const indexFile = `${__dirname}/../dist/index.js`;
-const iconsDir = `${__dirname}/../src/icons`;
+const iconsDir = `${__dirname}/../src`;
 const buildIconsDir = `${__dirname}/../dist/icons`;
 const data = require(dataFile);
 const fileSys = require('file-system');
@@ -37,27 +37,46 @@ data.icons.forEach(iconRaw => {
 
   const filename = icon.name;
   const distFilename = getDistFilename(icon);
-  icon.svg = fs.readFileSync(`${iconsDir}/${filename}.svg`, 'utf8');
+  icon.svg = fs.readFileSync(`${iconsDir}${icon.path}/${filename}.svg`, 'utf8');
   const insertPos = icon.svg.indexOf("svg") + 3;
   const height = icon.height ? `height: ${icon.height};` : '';
   const width = icon.width ? `width: ${icon.width};` : '';
   const elementStyle = `style="${width} ${height} fill: ${icon.color}" `;
 
-  icon.style = icon.style || 'ico_squareMed';
+  icon.style = icon.style || 'ico_squareLg';
+
+  // If svg has legacy HTML structure, replace with empty string
   icon.svg = icon.svg.replace(`<title>iconTitle</title>
   <desc>iconDesc</desc>
   <style></style>`, '');
+
+  // Build new Title and Description from icon data
   const altName = filename.replace(/-/g, ' ');
   icon.title = icon.title || titleCase(altName);
   icon.desc = icon.desc || `${altName} icon`;
   const split = icon.svg.split(/(^<svg.*>)/);
+
   // Scrub out any pre-existing attributes
   split[1] = '<svg>';
   split.splice(2, 0, `
-    <title>${icon.title}</title>
-    <desc>${icon.desc}</desc>`);
+  <title>${icon.title}</title>
+  <desc>${icon.desc}</desc>`);
   icon.svg = split.join('');
 
+  if (icon.path === '/icons') {
+    // Locate and remove undesired SVG attributes
+    const fill = icon.svg.match(/fill="#......"/);
+    const fillNone = icon.svg.match(/fill="none"/);
+
+    if (fill) {
+      icon.svg = icon.svg.replace(fill, '')
+    }
+
+    if (fillNone) {
+      icon.svg = icon.svg.replace(fillNone, '')
+    }
+  }
+
   // adds attributes to SVG string based on icons.json data
   icon.svg = [icon.svg.slice(0, insertPos), `class="${icon.style}" `, icon.svg.slice(insertPos)].join('');
   icon.svg = [icon.svg.slice(0, insertPos), elementStyle, icon.svg.slice(insertPos)].join('');
@@ -80,11 +99,9 @@ data.icons.forEach(iconRaw => {
 
   // write new SVGs to ./dist
   fs.writeFileSync( `${buildIconsDir}/${distFilename}.svg`, icon.svg);
-
-  // console.log(`${filename}.js / ${filename}.svg written to ./dist dir`)
 });
 
-// export 20px PNGs versions of Icons; default colors
+// export PNG versions of Icons; default colors
 // =======================================================================
 const pngIcons = {};
 const SizeMedIcons = data.icons.filter(function(sizeData) {
@@ -191,9 +208,9 @@ function fileHeader(options) {
 function titleCase(str) {
   let splitStr = str.toLowerCase().split(' ');
   for (let i = 0; i < splitStr.length; i++) {
-      splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
+      splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
   }
-  return splitStr.join(' '); 
+  return splitStr.join(' ');
 }
 
 CustomStyleDictionary.registerFormat({

src/data/icons.json

@@ -10,7 +10,8 @@
       "height": "var(--auro-size-lg)",
       "xmlns": "http://www.w3.org/2000/svg",
       "xmlns_xlink": "http://www.w3.org/1999/xlink",
-      "viewBox": "0 0 24 24"
+      "viewBox": "0 0 24 24",
+      "path": "/icons"
   },
   "icons": [
     {
@@ -126,24 +127,21 @@
       "name": "information-filled",
       "desc": "Information icon - filled",
       "style": "ico_squareLarge",
-      "actualcategory": "alert",
-      "category": "broken"
+      "category": "alert"
     },
     {
       "title": "Question Filled",
       "name": "question-filled",
       "desc": "Question icon - filled",
       "style": "ico_squareLarge",
-      "actualcategory": "alert",
-      "category": "broken"
+      "category": "alert"
     },
     {
       "title": "Warning Filled",
       "name": "warning-filled",
       "desc": "Warning icon - filled",
       "style": "ico_squareLarge",
-      "actualcategory": "alert",
-      "category": "broken"
+      "category": "alert"
     },
 
 
@@ -245,16 +243,14 @@
       "name": "plus-filled",
       "desc": "Plus icon",
       "style": "ico_squareLarge",
-      "actualcategory": "interface",
-      "category": "broken"
+      "category": "interface"
     },
     {
       "title": "Plus stroke",
       "name": "plus-stroke",
       "desc": "Plus icon",
       "style": "ico_squareLarge",
-      "actualcategory": "interface",
-      "category": "broken"
+      "category": "interface"
     },
     {
       "title": "Checkmark display indicator",
@@ -657,6 +653,8 @@
       "category": "shop"
     },
 
+
+
     {
       "title": "Credit Card",
       "name": "credit-card",
@@ -669,35 +667,40 @@
       "name": "cc-alaska",
       "desc": "Alaska Credit Card",
       "style": "ico_squareLarge",
-      "category": "payment"
+      "category": "payment",
+      "path": "/icons/fullColor"
     },
     {
       "title": "CC Amex",
       "name": "cc-amex",
       "desc": "Amex Credit Card",
       "style": "ico_squareLarge",
-      "category": "payment"
+      "category": "payment",
+      "path": "/icons/fullColor"
     },
     {
       "title": "CC Discover",
       "name": "cc-discover",
       "desc": "Discover Credit Card",
       "style": "ico_squareLarge",
-      "category": "payment"
+      "category": "payment",
+      "path": "/icons/fullColor"
     },
     {
       "title": "CC Mastercard",
       "name": "cc-mastercard",
       "desc": "Mastercard Credit Card",
       "style": "ico_squareLarge",
-      "category": "payment"
+      "category": "payment",
+      "path": "/icons/fullColor"
     },
     {
       "title": "CC Visa",
       "name": "cc-visa",
       "desc": "Visa Credit Card",
       "style": "ico_squareLarge",
-      "category": "payment"
+      "category": "payment",
+      "path": "/icons/fullColor"
     }
   ]
 }