diff --git a/.svglintrc.js b/.svglintrc.js index e668266..97fe2bb 100644 --- a/.svglintrc.js +++ b/.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" }] diff --git a/.travis.yml b/.travis.yml index e7a22e0..c8dd962 100644 --- a/.travis.yml +++ b/.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 diff --git a/README.md b/README.md index eb0d02c..ed9023b 100644 --- a/README.md +++ b/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`.__ +`orion-icons.scss` is deprecated, please reference `icons.scss`. ```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! +#### DEPRECATION WARNING! -__NOTE: This process has been deprecated!__ +__NOTE: This process has been deprecated!__ -__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.__ +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. 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 `` specifically to `<title>iconTitle` -1. Set `` specifically to `iconDesc` -1. Set `` -1. Keep all necessary `` 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 - iconTitle - iconDesc - @@ -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 | diff --git a/package.json b/package.json index 4e7b57b..efc44c9 100644 --- a/package.json +++ b/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": { diff --git a/scripts/primarybuild.js b/scripts/primarybuild.js index 3f9527b..9f28eda 100755 --- a/scripts/primarybuild.js +++ b/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(`iconTitle iconDesc `, ''); + + // 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(/(^)/); + // Scrub out any pre-existing attributes split[1] = ''; split.splice(2, 0, ` - ${icon.title} - ${icon.desc}`); + ${icon.title} + ${icon.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({ diff --git a/src/data/icons.json b/src/data/icons.json index 35fc9e2..dfa0998 100644 --- a/src/data/icons.json +++ b/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" } ] } diff --git a/src/icons/cc-alaska.svg b/src/icons/fullColor/cc-alaska.svg similarity index 100% rename from src/icons/cc-alaska.svg rename to src/icons/fullColor/cc-alaska.svg diff --git a/src/icons/cc-amex.svg b/src/icons/fullColor/cc-amex.svg similarity index 100% rename from src/icons/cc-amex.svg rename to src/icons/fullColor/cc-amex.svg diff --git a/src/icons/cc-discover.svg b/src/icons/fullColor/cc-discover.svg similarity index 100% rename from src/icons/cc-discover.svg rename to src/icons/fullColor/cc-discover.svg diff --git a/src/icons/cc-mastercard.svg b/src/icons/fullColor/cc-mastercard.svg similarity index 100% rename from src/icons/cc-mastercard.svg rename to src/icons/fullColor/cc-mastercard.svg diff --git a/src/icons/cc-visa.svg b/src/icons/fullColor/cc-visa.svg similarity index 100% rename from src/icons/cc-visa.svg rename to src/icons/fullColor/cc-visa.svg