Add external URL support for Soho Icon functions and Dropdown

app/views/components/dropdown/example-icons.html

@@ -1,3 +1,14 @@
+<style>
+  /* Defines rules for the custom icon style */
+  .custom-icon {
+    border: 1px solid var(--ids-color-slate-100);
+    border-radius: 2px;
+    height: 18px;
+    margin-inline-end: 8px;
+    top: 3px;
+    width: 18px;
+  }
+</style>
 
 <div class="row top-padding">
   <div class="twelve columns">
@@ -21,6 +32,15 @@
       </div>
     </div>
 
+    <div class="field">
+      <label for="example-external">Dropdown With External icons</label>
+        <select id="example-external" name="example-external" class="dropdown">
+        <option value="opt-2" data-icon="{icon: 'https://randomuser.me/api/portraits/lego/7.jpg'}">One</option>
+        <option value="opt-3" data-icon="{icon: 'https://randomuser.me/api/portraits/lego/1.jpg'}">Two</option>
+        <option value="opt-4" data-icon="{icon: 'https://randomuser.me/api/portraits/lego/2.jpg'}">Three</option>
+        <option value="opt-5" data-icon="{icon: 'https://randomuser.me/api/portraits/lego/3.jpg'}">Four</option>
+      </select>
+    </div>
   </div>
 </div>
 

src/components/dropdown/_dropdown-new.scss

@@ -12,9 +12,12 @@ div.multiselect {
   }
 
   > .listoption-icon {
-    left: 12px;
     top: 11px;
 
+    &:not(.custom-icon) {
+      left: 12px;
+    }
+
     &.large-icon {
       height: 32px;
       width: 32px;

src/components/dropdown/_dropdown.scss

@@ -114,12 +114,9 @@ div.multiselect {
     @include list-icon-colors();
 
     color: $popupmenu-icon-color;
-    height: 16px;
-    left: 14px;
     position: absolute;
     top: 9px;
     vertical-align: middle;
-    width: 16px;
 
     + span {
       padding-left: 29px;
@@ -129,6 +126,12 @@ div.multiselect {
       border-radius: 2px;
       left: 15px;
     }
+
+    &:not(.custom-icon) {
+      left: 14px;
+      height: 16px;
+      width: 16px;
+    }
   }
 
   span {
@@ -421,11 +424,14 @@ div.multiselect {
       @include list-icon-colors();
 
       color: $popupmenu-icon-color;
-      height: 16px;
       left: 0;
       margin-right: 7px;
       pointer-events: none;
       top: 3px;
+
+      &:not(.custom-icon) {
+        height: 16px;
+      }
     }
 
     // Badge Support
@@ -445,22 +451,30 @@ div.multiselect {
     @include list-icon-colors();
 
     color: $popupmenu-icon-color;
-    height: 16px;
     left: 10px;
     position: absolute;
     top: 8px;
 
     &.swatch {
       border-radius: 2px;
       left: 14px;
-      width: 16px;
     }
 
     + span {
       padding-left: 39px;
     }
   }
 
+  .listoption-icon {
+    &.swatch {
+      width: 16px;
+    }
+
+    &:not(.custom-icon) {
+      height: 16px;
+    }
+  }
+
   &.is-ontop {
     > .listoption-icon {
       bottom: 6px;

src/components/dropdown/dropdown.js

@@ -318,8 +318,8 @@ Dropdown.prototype = {
       this.wrapper.append(this.pseudoElem, this.trigger);
     }
 
-    // Check for and add the icon
-    this.icon = this.wrapper.find('.icon');
+    // Check for and add the trigger icon
+    this.icon = this.wrapper.find('.trigger').find('.icon');
     if (!this.icon.length) {
       this.icon = $.createIconElement(this.settings.dropdownIcon || 'dropdown');
       this.wrapper.append(this.icon);
@@ -572,7 +572,7 @@ Dropdown.prototype = {
       return;
     }
 
-    // Set icon properties
+    // Use as a settings object
     if (typeof listIconItem.icon === 'object') {
       listIconItem.obj = listIconItem.icon;
       listIconItem.icon = listIconItem.icon.icon;
@@ -622,15 +622,16 @@ Dropdown.prototype = {
       listIconItem.isClassListOver = true;
     }
 
-    // Build icon
-    listIconItem.html = $.createIcon({
-      icon: listIconItem.isIcon ? listIconItem.icon : '',
-      class: `listoption-icon${listIconItem.isClassList ? ` ${listIconItem.classList}` : ''}`
-    });
-
     if (listIconItem.icon === 'swatch') {
+      // Create a swatch span
       listIconItem.isSwatch = true;
       listIconItem.html = `<span class="swatch ${listIconItem.isClassList ? listIconItem.classList : ''}"></span>`;
+    } else {
+      // Build IDS Icon SVG or external icon
+      listIconItem.html = $.createIcon({
+        icon: listIconItem.isIcon ? listIconItem.icon : '',
+        class: `listoption-icon ${listIconItem.isClassList ? ` ${listIconItem.classList}` : ''}`
+      });
     }
 
     self.listIcon.items.push(listIconItem);
@@ -674,8 +675,9 @@ Dropdown.prototype = {
     }
 
     if (hasIcons) {
-      self.pseudoElem.prepend($.createIcon({ icon: '', class: 'listoption-icon' }));
-      self.listIcon.pseudoElemIcon = self.pseudoElem.find('> .listoption-icon');
+      const elem = $.createIconElement({ icon: '', class: 'listoption-icon' });
+      self.pseudoElem.prepend(elem);
+      self.listIcon.pseudoElemIcon = elem;
       self.listIcon.idx = -1;
     }
 
@@ -772,30 +774,46 @@ Dropdown.prototype = {
     if (self.listIcon.hasIcons) {
       const target = self.listIcon.pseudoElemIcon;
       const i = opt.index();
-      const idx = self.listIcon.idx;
+      // const idx = self.listIcon.idx;
       const iconRef = self.listIcon.items[i];
-      const icon = iconRef && iconRef.isIcon ? iconRef.icon : '';
-
+      // const icon = iconRef && iconRef.isIcon ? iconRef.icon : '';
       // Return out if this item has no icon
       if (!iconRef) {
         return;
       }
 
       // Reset class and color
+      /*
       if (idx > -1) {
         const iconAtIndex = self.listIcon.items[idx];
         if (iconAtIndex) {
           target.removeClass(`${iconAtIndex.classList} ${iconAtIndex.classListOver}`);
           target[0].style.fill = '';
         }
       }
+      */
 
       // Update new stuff
+      target.remove();
+      const elem = $.createIconElement({
+        icon: iconRef.icon,
+        class: ['listoption-icon']
+      });
+
+      self.pseudoElem.prepend(elem);
+      self.listIcon.pseudoElemIcon = elem;
       self.listIcon.idx = i;
+
+      if (iconRef.isClassList) {
+        elem.addClass(iconRef.classList);
+      }
+
+      /*
       target.changeIcon(icon);
       if (iconRef.isClassList) {
         target.addClass(iconRef.classList);
       }
+      */
     }
   },
 
@@ -1013,7 +1031,10 @@ Dropdown.prototype = {
 
     if (this.listIcon.hasIcons) {
       this.list.addClass('has-icons');
-      this.listIcon.pseudoElemIcon.clone().appendTo(this.list);
+
+      const iconClone = this.listIcon.pseudoElemIcon.clone();
+      iconClone.addClass('listoption-icon');
+      iconClone.appendTo(this.list);
     }
 
     if (hasOptGroups) {
@@ -1168,7 +1189,7 @@ Dropdown.prototype = {
     }
     if (this.isHidden) {
       this.pseudoElem.hide().prev('label').hide();
-      this.pseudoElem.next('svg').hide();
+      this.pseudoElem.next('.icon').hide();
     }
   },
 

src/components/icons/icons.jquery.js

@@ -1,4 +1,5 @@
 import { Icon, COMPONENT_NAME } from './icons';
+import { stringUtils } from '../../utils/string';
 
 /**
  * jQuery component wrappers
@@ -30,8 +31,14 @@ $.fn.icon = function (settings) {
     options = options || $.extend({}, defaults);
 
     if (typeof options === 'string') {
+      let icon = '';
+
+      if (options && options.indexOf('icon-') === 0) {
+        icon = options.replace('icon-', '');
+      }
+
       options = $.extend({}, defaults, {
-        icon: options.replace('icon-', '')
+        icon
       });
     }
 
@@ -63,11 +70,23 @@ $.fn.icon = function (settings) {
   $.createIcon = function createIcon(options) {
     options = normalizeIconOptions(options);
 
-    return [
-      `<svg class="${options.classes.join(' ')}" focusable="false" aria-hidden="true" role="presentation">` +
-        `<use href="#icon-${options.icon}"></use>` +
-      '</svg>'
-    ].join('');
+    // Use external URL to create an `<img>` based icon
+    if (stringUtils.isValidURL(options.icon)) {
+      return `<img
+        src="${options.icon}"
+        alt="Icon" class="icon custom-icon ${options.classes.join(' ')}"
+        aria-hidden="true"
+        role="presentation" preload="true"/>`;
+    }
+
+    // Use SVG with an official IDS Icon
+    return `<svg
+      class="${options.classes.join(' ')}"
+      focusable="false"
+      role="presentation">
+      aria-hidden="true"
+        <use href="#icon-${options.icon}"></use>
+      </svg>`;
   };
 
   // Returns a jQuery-wrapped element containing a new icon