feat(Icons): Update Icons

* Replace non-compliant icons
* Deprecate `input-url` in favor of `globe`
* Deprecate `technical-change` in favor of `server-config`
* Deprecate `technical-incident` in favor of `server-incident`
* Correct geometry of several icons
* Add `file`
* Add `flag`
* Add `globe`
* Add `key`
* Add `mime-archive`
* Add `mime-audio`
* Add `mime-code`
* Add `mime-data`
* Add `mime-image`
* Add `mime-system`
* Add `mime-text`
* Add `mime-video`
* Add `paperclip`
* Add `server-config`
* Add `server-incident`
* Update visual regression snapshots

Closes #163, SURF-981

Author: Ryan A. Johnson

docs/_data/icons.json5

@@ -24,16 +24,46 @@ if (document.getElementById('vue-iconDemo')) {
             onFilterUpdate: function (evt) {
                 this.filter = evt.currentTarget.value || '';
             },
+            matchesName: function (icon) {
+                let _name = icon.name.toLowerCase();
+                return _name.indexOf(this.downcaseFilter) >= 0;
+            },
+            matchesAlias: function (icon) {
+                if (!icon.alias) {
+                    return false;
+                }
+                let _alias = icon.alias.toLowerCase();
+                return _alias.indexOf(this.downcaseFilter) >= 0;
+            },
+            matchesKeyword: function (icon) {
+                if (!icon.keywords) {
+                    return false;
+                }
+
+                return icon.keywords.some(keyword => {
+                    return keyword.indexOf(this.downcaseFilter) >= 0;
+                });
+            },
         },
         computed: {
+            downcaseFilter: function () {
+                return this.filter.toLowerCase();
+            },
             hasFilter: function () {
                 return this.filter !== '';
             },
+            filterConditions: function () {
+                return [
+                    this.matchesName,
+                    this.matchesAlias,
+                    this.matchesKeyword,
+                ];
+            },
             filteredIcons: function () {
                 let filtered = this.icons;
                 if (this.hasFilter) {
-                    filtered = this.icons.filter((icon) => {
-                        return icon.name.indexOf(this.filter) >= 0;
+                    filtered = this.icons.filter(icon => {
+                        return this.filterConditions.some(fn => fn(icon));
                     });
                 }
                 return filtered;

docs/components/icons/icon-demo.js

@@ -62,15 +62,38 @@ <h2 id="available-icons">Icons</h2>
       </div>
       <div v-if="filteredIcons.length" class="hxRow">
         <template v-for="icon in filteredIcons">
-          <div class="hxCol hxSpan-12-xs hxSpan-12-sm hxSpan-6-md hxSpan-4-xl" key="icon.name">
+          <div class="hxCol hxSpan-12-xs hxSpan-12-sm hxSpan-6-md hxSpan-4-xl" :key="icon.name">
             <div class="media icon-media">
               {% raw %}
               <div class="media__icon">
                 <hx-icon :type="icon.name"></hx-icon>
               </div>
               <div class="media__body">
                 <h3 class="hxHeading-4">{{icon.name}}</h3>
-                <small class="hxSubdued">Added: v{{icon.minver}}</small>
+                <p>
+                  <!-- alias -->
+                  <span v-if="icon.alias" class="hxSubdued">
+                    <small>(alias: {{icon.alias}})</small><br />
+                  </span>
+
+                  <!-- version/deprecation -->
+                  <hx-error v-if="icon.deprecated" class="hxSubBody">
+                    Deprecated
+                  </hx-error>
+                  <span v-else>
+                    <small v-if="icon.minver" class="hxSubdued">Added: v{{icon.minver}}</small>
+                    <i v-else class="hxSubdued hxSubBody">New!</i>
+                  </span>
+                </p>
+
+                <!-- keywords/tags -->
+                <p v-if="icon.keywords" class="hxSubBody hxSubdued">
+                  <hx-icon type="tag"></hx-icon>
+                  <span v-for="(word, idx) in icon.keywords" :key="word">
+                    <span v-if="(idx + 1) < icon.keywords.length">{{word}}, </span>
+                    <span v-else>{{word}}</span>
+                  </span>
+                </p>
               </div>
               {% endraw %}
             </div>

docs/components/icons/index.html

@@ -2,13 +2,18 @@
   background-color: @gray-0;
   border: 1px solid @gray-400;
   height: 100%;
+  padding: 1.25rem;
 
   .media__icon {
-    align-items: center;
+    color: @gray-1000;
     display: flex;
     font-size: 2em;
     line-height: 1;
   }
+
+  .media__body {
+    margin-left: 1.25rem;
+  }
 }
 
 hx-icon {

docs/styles/demo/icon-docs.less

@@ -21,12 +21,14 @@ import _exclamationDiamond from './icons/exclamation-diamond.svg';
 import _exclamationTriangle from './icons/exclamation-triangle.svg';
 import _export from './icons/export.svg';
 import _externalLink from './icons/external-link.svg';
+import _file from './icons/file.svg';
 import _filter from './icons/filter.svg';
+import _flag from './icons/flag.svg';
+import _globe from './icons/globe.svg';
 import _helpCircle from './icons/help-circle.svg';
 import _infoCircle from './icons/info-circle.svg';
 import _inputFile from './icons/input-file.svg';
 import _inputTime from './icons/input-time.svg';
-import _inputUrl from './icons/input-url.svg';
 import _kbdArrowDown from './icons/kbd-arrow-down.svg';
 import _kbdArrowLeft from './icons/kbd-arrow-left.svg';
 import _kbdArrowRight from './icons/kbd-arrow-right.svg';
@@ -40,31 +42,41 @@ import _kbdReturn from './icons/kbd-return.svg';
 import _kbdShift from './icons/kbd-shift.svg';
 import _kbdSpace from './icons/kbd-space.svg';
 import _kbdTab from './icons/kbd-tab.svg';
+import _key from './icons/key.svg';
 import _lock from './icons/lock.svg';
+import _mimeArchive from './icons/mime-archive.svg';
+import _mimeAudio from './icons/mime-audio.svg';
+import _mimeCode from './icons/mime-code.svg';
+import _mimeData from './icons/mime-data.svg';
+import _mimeImage from './icons/mime-image.svg';
+import _mimeSystem from './icons/mime-system.svg';
+import _mimeText from './icons/mime-text.svg';
+import _mimeVideo from './icons/mime-video.svg';
 import _minus from './icons/minus.svg';
 import _minusCircle from './icons/minus-circle.svg';
 import _monitoring from './icons/monitoring.svg';
+import _paperclip from './icons/paperclip.svg';
 import _payment from './icons/payment.svg';
 import _pencil from './icons/pencil.svg';
 import _phone from './icons/phone.svg';
 import _plus from './icons/plus.svg';
 import _plusOrMinus from './icons/plus-or-minus.svg';
 import _search from './icons/search.svg';
 import _server from './icons/server.svg';
+import _serverConfig from './icons/server-config.svg';
+import _serverIncident from './icons/server-incident.svg';
 import _sort from './icons/sort.svg';
 import _sortDown from './icons/sort-down.svg';
 import _sortUp from './icons/sort-up.svg';
 import _support from './icons/support.svg';
 import _tag from './icons/tag.svg';
-import _technicalChange from './icons/technical-change.svg';
-import _technicalIncident from './icons/technical-incident.svg';
 import _ticketing from './icons/ticketing.svg';
 import _times from './icons/times.svg';
 import _timesCircle from './icons/times-circle.svg';
 import _trash from './icons/trash.svg';
 import _user from './icons/user.svg';
 
-export default {
+const MAP = {
     'account': _account,
     'angle-bottom': _angleBottom,
     'angle-down': _angleDown,
@@ -88,12 +100,14 @@ export default {
     'exclamation-triangle': _exclamationTriangle,
     'export': _export,
     'external-link': _externalLink,
+    'file': _file,
     'filter': _filter,
+    'flag': _flag,
+    'globe': _globe,
     'help-circle': _helpCircle,
     'info-circle': _infoCircle,
     'input-file': _inputFile,
     'input-time': _inputTime,
-    'input-url': _inputUrl,
     'kbd-arrow-down': _kbdArrowDown,
     'kbd-arrow-left': _kbdArrowLeft,
     'kbd-arrow-right': _kbdArrowRight,
@@ -107,27 +121,44 @@ export default {
     'kbd-shift': _kbdShift,
     'kbd-space': _kbdSpace,
     'kbd-tab': _kbdTab,
+    'key': _key,
     'lock': _lock,
+    'mime-archive': _mimeArchive,
+    'mime-audio': _mimeAudio,
+    'mime-code': _mimeCode,
+    'mime-data': _mimeData,
+    'mime-image': _mimeImage,
+    'mime-system': _mimeSystem,
+    'mime-text': _mimeText,
+    'mime-video': _mimeVideo,
     'minus': _minus,
     'minus-circle': _minusCircle,
     'monitoring': _monitoring,
+    'paperclip': _paperclip,
     'payment': _payment,
     'pencil': _pencil,
     'phone': _phone,
     'plus': _plus,
     'plus-or-minus': _plusOrMinus,
     'search': _search,
     'server': _server,
+    'server-config': _serverConfig,
+    'server-incident': _serverIncident,
     'sort': _sort,
     'sort-down': _sortDown,
     'sort-up': _sortUp,
     'support': _support,
     'tag': _tag,
-    'technical-change': _technicalChange,
-    'technical-incident': _technicalIncident,
     'ticketing': _ticketing,
     'times': _times,
     'times-circle': _timesCircle,
     'trash': _trash,
     'user': _user,
 };
+
+// DEPRECATED: remove in v1.0.0
+MAP['input-url'] = MAP['globe'];
+MAP['technical-change'] = MAP['server-config'];
+MAP['technical-incident'] = MAP['server-incident'];
+
+export default MAP;