hig-vanilla - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dev/gemini/tabs-test.js

 gemini.suite('tabs', (parent) => {
-  parent.setUrl('src/components/global-nav/sub-nav/tabs/tests/gemini-tabs.html');
+  parent.setUrl('src/components/tabs/tests/gemini-tabs.html');
 
   gemini.suite('tabs', (suite) => {
-    suite.setCaptureElements('.hig__global-nav__sub-nav__tabs')
-         .capture('tabs');
+    suite.setCaptureElements('.hig__tabs')
+      .capture('tabs');
   });
-
-  gemini.suite('activated tab', (suite) => {
-    suite.setCaptureElements('.hig__global-nav__sub-nav__tabs__tab.hig__global-nav__sub-nav__tabs__tab--active')
-         .capture('activated tab');
-  });
-
-  gemini.suite('deactivated tab', (suite) => {
-    suite.setCaptureElements('.hig__global-nav__sub-nav__tabs__tab:nth-child(2)')
-         .capture('deactivated tab');
-  });
 });

package.json

 {
   "name": "hig-vanilla",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Stateless implementation in pure CSS, HTML and JS with no framework dependecies",
@@ -28,7 +28,8 @@ "main": "lib/hig.js",
     "babel-core": "^6.26.0",
+    "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
-    "babel-eslint": "^7.2.3",
     "babel-plugin-module-resolver": "^2.7.1",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-2": "^6.24.1",
     "concurrently": "^3.4.0",
@@ -60,4 +61,4 @@ "css-loader": "^0.26.1",
   "dependencies": {
-    "hig-interface": "^0.1.1"
+    "hig-interface": "^0.1.3"
   }
 }

src/basics/flyout/flyout.js

@@ -7,3 +7,3 @@ import './flyout.scss';
 
-const OPEN_CLASS = 'hig__flyout--open';
+import CSSTransition from '../../helpers/js/css-transition.js';
 
@@ -25,2 +25,7 @@ const ANCHOR_POINTS = [
 
+const AVAILABLE_TYPES = [
+  'tooltip',
+  'default'
+];
+
 /**
@@ -41,12 +46,31 @@ * Creates a flyout
     this.setAnchorPoint(this.initialOptions.anchorPoint);
+    this._setType(this.initialOptions.type);
+    this.flyoutContainer = this._findDOMEl('.hig__flyout__container', this.el);
+    this.containerAnimation = new CSSTransition(this.el, 'hig__flyout');
   }
 
   open() {
-    this.el.classList.add(OPEN_CLASS);
+    this.containerAnimation.enter();
   }
 
   close() {
-    this.el.classList.remove(OPEN_CLASS);
+    this.containerAnimation.exit();
   }
 
+  _setType(type = 'default') {
+    if (!Flyout.AvailableTypes.includes(type)) {
+      console.error(
+        `Flyout cannot have type "${type}". Only these inset types are allowed: `,
+        Flyout.AvailableTypes
+      );
+      return;
+    }
+
+    this.el.classList.remove(
+      ...Flyout.AvailableTypes.map(s => `hig__flyout--${s}`)
+    );
+
+    this.el.classList.add(`hig__flyout--${type}`);
+  }
+
   onClickOutside(fn) {
@@ -80,3 +104,5 @@ return this._attachListener(
     container.classList.remove(
-      ...Flyout.AvailableAnchorPoints.map(s => `hig__flyout__container--anchor-${s}`)
+      ...Flyout.AvailableAnchorPoints.map(
+        s => `hig__flyout__container--anchor-${s}`
+      )
     );
@@ -86,2 +112,3 @@ container.classList.add(`hig__flyout__container--anchor-${anchorPoint}`);
 
+
   _callbackIfClickOutside(callback, event) {
@@ -91,3 +118,3 @@ if (this.el.contains(event.target) || this.el === event.target) {
     }
-    if (this.el.classList.contains(OPEN_CLASS)) {
+    if (this.containerAnimation.isEntering()) {
       callback();
@@ -105,4 +132,5 @@ }
 
+Flyout.AvailableTypes = AVAILABLE_TYPES;
 Flyout.AvailableAnchorPoints = ANCHOR_POINTS;
 
 module.exports = Flyout;

src/basics/form-elements/text-field/text-field.js

@@ -235,3 +235,6 @@ import './text-field.scss';
     passwordButton.classList.remove('hig__text-field__extra--show');
-    this.el.classList.remove('hig__text-field--password-button-visible');
+
+    const passwordHideButton = this.el.querySelector('.hig__text-field__password-hide-button');
+    passwordHideButton === undefined ? this.el.classList.remove('hig__text-field--password-button-visible') : null;
+   
   }
@@ -272,3 +275,4 @@
     passwordButton.classList.remove('hig__text-field__extra--show');
-    this.el.classList.remove('hig__text-field--password-button-visible');
+    const passwordHideButton = this.el.querySelector('.hig__text-field__password-reveal-button');
+    passwordHideButton === undefined ? this.el.classList.remove('hig__text-field--password-button-visible') : null;
   }
@@ -275,0 +279,0 @@

src/components/global-nav/side-nav/side-nav.js

@@ -67,3 +67,7 @@ import './side-nav.scss';
   setHeaderLink(link) {
-    this._findDOMEl('.hig__global-nav__sidenav__header-link', this.el).setAttribute('href', link);
+    if (link) {
+      this._findDOMEl('.hig__global-nav__sidenav__header-link', this.el).setAttribute('href', link);
+    } else {
+      this._findDOMEl('.hig__global-nav__sidenav__header-link', this.el).removeAttribute('href');
+    }
   }
@@ -76,3 +80,7 @@
   setSuperHeaderLink(link) {
-    this._findDOMEl('.hig__global-nav__sidenav__super-header-link', this.el).setAttribute('href', link);
+    if (link) {
+      this._findDOMEl('.hig__global-nav__sidenav__super-header-link', this.el).setAttribute('href', link);
+    } else {
+      this._findDOMEl('.hig__global-nav__sidenav__super-header-link', this.el).removeAttribute('href');
+    }
   }
@@ -79,0 +87,0 @@ }

src/components/global-nav/sub-nav/tabs/tab/tab.js

 import './tab.scss';
 
-var Template = require('./tab.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./tab.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
@@ -14,29 +14,28 @@ /**
 class Tab extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
+  }
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
-    }
+  onClick(fn) {
+    return this._attachListener('click', this.el, this.el, fn);
+  }
 
-    onClick(fn){
-        return this._attachListener("click", this.el, this.el, fn);
-    }
+  setLabel(label) {
+    this.el.textContent = label;
+    this.el.setAttribute('title', label);
+  }
 
-    setLabel(label) {
-        this.el.textContent = label;
-        this.el.setAttribute("title", label);
-    }
+  activate() {
+    this.el.classList.add('hig__global-nav__sub-nav__tabs__tab--active');
+  }
 
-    activate() {
-        this.el.classList.add("hig__global-nav__sub-nav__tabs__tab--active");
-    }
-
-    deactivate() {
-        this.el.classList.remove("hig__global-nav__sub-nav__tabs__tab--active");
-    }
+  deactivate() {
+    this.el.classList.remove('hig__global-nav__sub-nav__tabs__tab--active');
+  }
 }
 
-Tab._interface = Interface['components']['GlobalNav']['partials']['SubNav']['partials']['Tabs']['partials']['Tab'];
+Tab._interface = Interface.components.GlobalNav.partials.SubNav.partials.Tabs.partials.Tab;
 Tab._defaults = {
-    label: 'Tab'
+  label: 'Tab'
 };
@@ -43,0 +42,0 @@ Tab._partials = {};

src/components/global-nav/sub-nav/tabs/tabs.js

 import './tabs.scss';
 
-var Template = require('./tabs.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./tabs.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
-var Tab = require('./tab/tab.js');
+const Tab = require('./tab/tab.js');
 
@@ -16,22 +16,20 @@ /**
 class Tabs extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
+  }
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
+  addTab(tabInstance, referenceTab) {
+    if (tabInstance instanceof Tab) {
+      this.mountPartialToComment('TAB', tabInstance, referenceTab);
     }
-
-    addTab(tabInstance, referenceTab){
-        if(tabInstance instanceof Tab){
-            this.mountPartialToComment('TAB', tabInstance, referenceTab)
-        }
-    }
-
+  }
 }
 
-Tabs._interface = Interface['components']['GlobalNav']['partials']['SubNav']['partials']['Tabs'];
+Tabs._interface = Interface.components.GlobalNav.partials.SubNav.partials.Tabs;
 Tabs._defaults = {};
 Tabs._partials = {
-    Tab: Tab
+  Tab
 };
 
-module.exports = Tabs;
+module.exports = Tabs;

src/helpers/js/_core.js

@@ -1,8 +0,7 @@
-var Icons = require('../../basics/icons/icons.js');
-var Mustache = require('mustache');
-require('./polyfills.js');
+var Icons = require("../../basics/icons/icons.js");
+var Mustache = require("mustache");
+require("./polyfills.js");
 
 class Core {
-
-    /**
+  /**
      * Our constructor mixes the options with the defaults (_defaults function) provided by the implementation class
@@ -13,69 +12,89 @@ * @abstract
 
-    constructor(options) {
-
-        // CHECK INTERFACE COMPATIBILITY
-        if(!this._interface){
-            console.warn("NO INTERFACE SET FOR CLASS, PLEASE DEFINE INTERFACE IN _interface PROPERTY OF YOUR CLASS");
-        }else {
-            var instanceMethods = Object.getOwnPropertyNames( Object.getPrototypeOf( this ) );
-            var coreMethods = Object.getOwnPropertyNames(Core.prototype);
-            // CHECK IF ALL METHODS IN COMPONENT ARE DEFINED IN INTERFACE
-            instanceMethods.forEach(function(v, i){
-                const coreMethodMissing = coreMethods.indexOf(v) === -1;
-                if(coreMethodMissing && v[0] != "_" && !this._interface["methods"][v]){
-                    console.error("METHOD: \"" + this.constructor.name + '.' + v + "\" IS NOT DEFINED AS INTERFACE OR IS NOT A VALID INTERFACE METHOD");
-                }
-            }, this);
-
-            // CHECK IF ALL METHODS IN INTERFACE ARE IMPLEMENTED
-            for(var k in this._interface["methods"]){
-                if(instanceMethods.indexOf(k) === -1){
-                    console.error(`METHOD: \"${this.constructor.name}.${k}\" IS NOT IMPLEMENTED BY THIS COMPONENT YET AND NEEDS AN IMPLEMENTATION`);
-                }
-            };
+  constructor(options) {
+    // CHECK INTERFACE COMPATIBILITY
+    if (!this._interface) {
+      console.warn(
+        "NO INTERFACE SET FOR CLASS, PLEASE DEFINE INTERFACE IN _interface PROPERTY OF YOUR CLASS"
+      );
+    } else {
+      var instanceMethods = Object.getOwnPropertyNames(
+        Object.getPrototypeOf(this)
+      );
+      var coreMethods = Object.getOwnPropertyNames(Core.prototype);
+      // CHECK IF ALL METHODS IN COMPONENT ARE DEFINED IN INTERFACE
+      instanceMethods.forEach(function(v, i) {
+        const coreMethodMissing = coreMethods.indexOf(v) === -1;
+        if (
+          coreMethodMissing && v[0] != "_" && !this._interface["methods"][v]
+        ) {
+          console.error(
+            'METHOD: "' +
+              this.constructor.name +
+              "." +
+              v +
+              '" IS NOT DEFINED AS INTERFACE OR IS NOT A VALID INTERFACE METHOD'
+          );
         }
+      }, this);
 
-        // CHECK DEFAULTS ARE DEFINED
-        if(!this._defaults){
-            console.warn(`NO DEFAULTS SET FOR ${this.constructor.name}, PLEASE DEFINE DEFAULTS IN _defaults PROPERTY OF YOUR CLASS`);
-        }else{
-            for(var v in this._interface['defaults']){
-                if(this._defaults[v] === undefined){
-                    console.error(`DEFAULT VALUE: \"${this.constructor.name}.${v}\" IS DEFINED IN THE INTERFACE BUT NOT IMPLEMENTED`, this);
-                }
-            };
+      // CHECK IF ALL METHODS IN INTERFACE ARE IMPLEMENTED
+      for (var k in this._interface["methods"]) {
+        if (instanceMethods.indexOf(k) === -1) {
+          console.error(
+            `METHOD: \"${this.constructor.name}.${k}\" IS NOT IMPLEMENTED BY THIS COMPONENT YET AND NEEDS AN IMPLEMENTATION`
+          );
         }
+      }
+    }
 
-        // MIX OPTIONS WITH DEFAULTS
-        if(options){
-            var defaults = this._defaults;
-            if(defaults){
-                for(var key in defaults){
-                    if (!defaults.hasOwnProperty(key)) continue; // skip loop if the property is from prototype
-                    if(!options[key]){
-                        options[key] = defaults[key];
-                    }
-                }
-            }
-        }else{
-            options = this._defaults;
+    // CHECK DEFAULTS ARE DEFINED
+    if (!this._defaults) {
+      console.warn(
+        `NO DEFAULTS SET FOR ${this.constructor.name}, PLEASE DEFINE DEFAULTS IN _defaults PROPERTY OF YOUR CLASS`
+      );
+    } else {
+      for (var v in this._interface["defaults"]) {
+        if (this._defaults[v] === undefined) {
+          console.error(
+            `DEFAULT VALUE: \"${this.constructor.name}.${v}\" IS DEFINED IN THE INTERFACE BUT NOT IMPLEMENTED`,
+            this
+          );
         }
+      }
+    }
 
-        // SET PARTIALS IF ANY
-        if(this._partials){
-            this.partials = this.constructor._partials;
+    // MIX OPTIONS WITH DEFAULTS
+    if (options) {
+      var defaults = this._defaults;
+      if (defaults) {
+        for (var key in defaults) {
+          if (!defaults.hasOwnProperty(key)) continue; // skip loop if the property is from prototype
+          if (!options[key]) {
+            options[key] = defaults[key];
+          }
         }
+      }
+    } else {
+      options = this._defaults;
     }
 
-    get el() {
-        if(this._el) { return this._el }
-
-        throw `ELEMENT: You cannot access ${this.constructor.name}'s \`el\` property before it is mounted.`;
+    // SET PARTIALS IF ANY
+    if (this._partials) {
+      this.partials = this.constructor._partials;
     }
+  }
 
-    set el(element) {
-        this._el = element;
+  get el() {
+    if (this._el) {
+      return this._el;
     }
 
-    /**
+    throw `ELEMENT: You cannot access ${this.constructor.name}'s \`el\` property before it is mounted.`;
+  }
+
+  set el(element) {
+    this._el = element;
+  }
+
+  /**
      * Creation of the DOM element and mustache template rendering
@@ -88,24 +107,21 @@ * @param {String} template - template string
 
-    _render(template, data, partials, tagname = 'div'){
-        if(!this._rendered){
-            var elWrapper = document.createElement(tagname);
-            data = (data || {});
+  _render(template, data, partials, tagname = "div") {
+    if (!this._rendered) {
+      var elWrapper = document.createElement(tagname);
+      data = data || {};
 
-            elWrapper.innerHTML = Mustache.render(
-                template,
-                data,
-                (partials || {})
-            );
-            this._rendered = elWrapper.firstChild;
-        } else {
-            console.error("RENDER ALREADY CALLED ON THIS COMPONENT, USE PROPER METHODS TO UPDATE CONTENT");
-        }
-
+      elWrapper.innerHTML = Mustache.render(template, data, partials || {});
+      this._rendered = elWrapper.firstChild;
+    } else {
+      console.error(
+        "RENDER ALREADY CALLED ON THIS COMPONENT, USE PROPER METHODS TO UPDATE CONTENT"
+      );
     }
+  }
 
-    _componentDidMount() {
-        // Subclass should implement this if needed
-    }
+  _componentDidMount() {
+    // Subclass should implement this if needed
+  }
 
-    /**
+  /**
      * Inserts the HIG Element into the DOM using mountNode. If beforeChild is specified the HIG Element should be inserted before that.
@@ -119,12 +135,12 @@ * If string, this is a CSS selector if more than one element matches it takes the first
 
-    mount(mountNode, beforeChild, scopeNode){
-        var parentNode = this._findDOMEl(mountNode, scopeNode);
-        var refNode = this._findDOMEl(beforeChild, scopeNode);
+  mount(mountNode, beforeChild, scopeNode) {
+    var parentNode = this._findDOMEl(mountNode, scopeNode);
+    var refNode = this._findDOMEl(beforeChild, scopeNode);
 
-        this.el = parentNode.insertBefore(this._rendered, refNode);
-        this._componentDidMount();
-        return mountNode.el;
-    }
+    this.el = parentNode.insertBefore(this._rendered, refNode);
+    this._componentDidMount();
+    return mountNode.el;
+  }
 
-    /**
+  /**
      * Inserts a partial child into the DOM at a specified comment.
@@ -137,33 +153,43 @@ * @param {String} searchComment - HTML comment to target
 
-    mountPartialToComment(searchComment, mountNode, scopeNode){
-        function filterNone() {
-            return NodeFilter.FILTER_ACCEPT;
-        }
+  mountPartialToComment(searchComment, mountNode, scopeNode) {
+    function filterNone() {
+      return NodeFilter.FILTER_ACCEPT;
+    }
 
-        var comment = null;
+    var comment = null;
 
-        var iterator = document.createNodeIterator((this.el || document), NodeFilter.SHOW_COMMENT, filterNone, false); // Fourth argument, which is actually obsolete according to the DOM4 standard, is required in IE 11
-        var curNode;
-        while (curNode = iterator.nextNode()){
-            if(curNode.nodeValue == searchComment){
-                comment = curNode;
-            }
-        }
+    var iterator = document.createNodeIterator(
+      this.el || document,
+      NodeFilter.SHOW_COMMENT,
+      filterNone,
+      false
+    ); // Fourth argument, which is actually obsolete according to the DOM4 standard, is required in IE 11
+    var curNode;
+    while ((curNode = iterator.nextNode())) {
+      if (curNode.nodeValue == searchComment) {
+        comment = curNode;
+      }
+    }
 
-        if(comment){
-            var refNode = (scopeNode) ? scopeNode.el : comment;
-            if(mountNode._rendered){
-                mountNode.el = comment.parentNode.insertBefore(mountNode._rendered, refNode);
-                mountNode._componentDidMount();
-            }else{
-                mountNode.el = comment.parentNode.insertBefore(mountNode, refNode);
-            }
+    if (comment) {
+      var refNode = scopeNode ? scopeNode.el : comment;
+      if (mountNode._rendered) {
+        mountNode.el = comment.parentNode.insertBefore(
+          mountNode._rendered,
+          refNode
+        );
+        mountNode._componentDidMount();
+      } else {
+        mountNode.el = comment.parentNode.insertBefore(mountNode, refNode);
+      }
 
-            return mountNode.el;
-        }else{
-            console.error(`MOUNT PARTIAL TO COMMENT: ${this.constructor.name} has no comment \"${searchComment}\" to mount to.`);
-        }
+      return mountNode.el;
+    } else {
+      console.error(
+        `MOUNT PARTIAL TO COMMENT: ${this.constructor.name} has no comment \"${searchComment}\" to mount to.`
+      );
     }
+  }
 
-    /**
+  /**
      * Remove the HTMLElement from the DOM, does NOT destroy the component, lifecyclemanagement is handled by the adapter or implementation layer!
@@ -173,17 +199,17 @@ * @returns null
 
-    unmount(){
-        let el;
+  unmount() {
+    let el;
 
-        try {
-            el = this.el;
-        } catch (error) {
-            return
-        }
+    try {
+      el = this.el;
+    } catch (error) {
+      return;
+    }
 
-        if (el.parentNode) {
-            el.parentNode.removeChild(this.el); // use removeChild for IE11 support
-        }
+    if (el.parentNode) {
+      el.parentNode.removeChild(this.el); // use removeChild for IE11 support
     }
+  }
 
-    /**
+  /**
      * Attach a document event listener
@@ -197,47 +223,52 @@ * @param {String} eventTypes - event types, for example "click", supports multiple events, seperated by space, ex: "click touchstart"
 
-    _attachListener(eventTypes, targetClass, scopeElement, executeOnEventFunction ){
-      function childOf(/*child node*/c, /*parent node*/p){ //returns boolean
-        while( (c=c.parentNode) && c!==p );
-        return !!c;
-      }
+  _attachListener(
+    eventTypes,
+    targetClass,
+    scopeElement,
+    executeOnEventFunction
+  ) {
+    function childOf(/*child node*/ c, /*parent node*/ p) {
+      //returns boolean
+      while ((c = c.parentNode) && c !== p);
+      return !!c;
+    }
 
-      var q = this._findDOMEl(targetClass, scopeElement);
-      var eventTarget, eventFn;
+    var q = this._findDOMEl(targetClass, scopeElement);
+    var eventTarget, eventFn;
 
-      var events = eventTypes.split(' ');
-      for (var i=0; i<events.length; i++) {
-        var eventType = events[i];
+    var events = eventTypes.split(" ");
+    for (var i = 0; i < events.length; i++) {
+      var eventType = events[i];
 
-        if (eventType == 'hover') {
-          eventType = 'mouseenter';
-        }
+      if (eventType == "hover") {
+        eventType = "mouseenter";
+      }
 
-        if (eventType == 'mouseenter' || eventType == 'scroll') {
-          eventFn = executeOnEventFunction;
-          eventTarget = q;
-        } else {
-          eventFn = (event) => {
-            var element = event.target;
+      if (eventType == "mouseenter" || eventType == "scroll") {
+        eventFn = executeOnEventFunction;
+        eventTarget = q;
+      } else {
+        eventFn = event => {
+          var element = event.target;
 
-            if(q && (childOf(element, q) || element === q)){
-                executeOnEventFunction(event, this);
-            }
-          };
-          eventTarget = document;
-        }
+          if (q && (childOf(element, q) || element === q)) {
+            executeOnEventFunction(event, this);
+          }
+        };
+        eventTarget = document;
+      }
 
-        eventTarget.addEventListener(eventType, eventFn);
+      eventTarget.addEventListener(eventType, eventFn);
 
-        if(events.length === 1){
-          var dispose = function(){
-            eventTarget.removeEventListener(eventType, eventFn);
-          };
+      if (events.length === 1) {
+        var dispose = function() {
+          eventTarget.removeEventListener(eventType, eventFn);
+        };
 
-          return dispose;
-        }
+        return dispose;
       }
-
     }
+  }
 
-    /**
+  /**
      * Determines search type and returns the first DOM element found
@@ -249,19 +280,17 @@ * @param {String | HTMLElement} f - input to search
 
-    _findDOMEl(f, s){
-        if(typeof f === "string"){
-            // do our selection
-            var domEl = (s || document).querySelectorAll(f);
-            if(!domEl || domEl.length === 0){
-                return console.error("TARGET NOT FOUND ", f);
-            }else{
-                return domEl[0];
-            }
-        }else{
-            return f; // already a HTMLElement, no need to search
-        }
+  _findDOMEl(f, s) {
+    if (typeof f === "string") {
+      // do our selection
+      var domEl = (s || document).querySelectorAll(f);
+      if (!domEl || domEl.length === 0) {
+        return console.error("TARGET NOT FOUND ", f);
+      } else {
+        return domEl[0];
+      }
+    } else {
+      return f; // already a HTMLElement, no need to search
     }
+  }
 
-
-
-    /**
+  /**
      * Returns first matching element if found, creates and returns an element if not
@@ -274,14 +303,14 @@ * @param {String} searchComment - HTML comment to target where element should be inserted if created
 
-    _findOrAddElement(searchComment, tagname, selector) {
-        const existingEl = this.el.querySelector(selector, this.el);
-        if (existingEl) {
-            return existingEl;
-        }
-
-        const newEl = document.createElement(tagname);
-        newEl.classList.add(...selector.split('.').filter(c => c.length > 0));
-        return this.mountPartialToComment(searchComment, newEl);
+  _findOrAddElement(searchComment, tagname, selector) {
+    const existingEl = this.el.querySelector(selector, this.el);
+    if (existingEl) {
+      return existingEl;
     }
 
-    /**
+    const newEl = document.createElement(tagname);
+    newEl.classList.add(...selector.split(".").filter(c => c.length > 0));
+    return this.mountPartialToComment(searchComment, newEl);
+  }
+
+  /**
      * Searches for an element and removes it if found.
@@ -292,10 +321,10 @@ * @param {String} selector - Selector of element to remove
 
-    _removeElementIfFound(selector) {
-        const existingEl = this.el.querySelector(selector, this.el);
-        if (existingEl) {
-            return existingEl.remove();
-        }
+  _removeElementIfFound(selector) {
+    const existingEl = this.el.querySelector(selector, this.el);
+    if (existingEl) {
+      return existingEl.remove();
     }
+  }
 
-    /**
+  /**
      * Get the Icon SVG String
@@ -311,24 +340,23 @@ * @param {String} icon - icon ID
 
-    help(){
-        return this._interface;
-    }
+  help() {
+    return this._interface;
+  }
 
-    defaults(){
-        return this._defaults;
-    }
+  defaults() {
+    return this._defaults;
+  }
 
-    get _interface() {
-        return this.constructor._interface;
-    }
+  get _interface() {
+    return this.constructor._interface;
+  }
 
-    get _defaults() {
-        return this.constructor._defaults;
-    }
+  get _defaults() {
+    return this.constructor._defaults;
+  }
 
-    get _partials() {
-        return this.constructor._partials;
-    }
-
+  get _partials() {
+    return this.constructor._partials;
+  }
 }
 
 module.exports = Core;

src/index.js

 const Hig = {};
 
 Hig.Avatar = require('./components/avatar/avatar.js');
-Hig.breakpoints = require('./basics/responsive/responsive');
 Hig.Button = require('./components/button/button.js');
-Hig.colors = require('./basics/colors/colors.js');
 Hig.Checkbox = require('./basics/form-elements/checkbox/checkbox.js');
 Hig.Dropdown = require('./basics/form-elements/dropdown/dropdown.js');
+Hig.Flyout = require('./basics/flyout/flyout.js');
 Hig.FormElements = require('./basics/form-elements/form-elements.js');
-Hig.Flyout = require('./basics/flyout/flyout.js');
 Hig.GlobalNav = require('./components/global-nav/global-nav.js');
+Hig.Grid = require('./basics/grid/grid.js');
+Hig.Icon = require('./basics/icon/icon.js');
 Hig.IconButton = require('./components/icon-button/icon-button.js');
-Hig.Icon = require('./basics/icon/icon.js');
 Hig.Icons = require('./basics/icons/icons.js');
@@ -22,11 +21,17 @@ Hig.InputButton = require('./basics/form-elements/input-button/input-button.js');
 Hig.RichText = require('./basics/rich-text/rich-text.js');
+Hig.SlotHeadCell = require('./components/table/table-head/slot-head-cell/slot-head-cell.js');
+Hig.Spacer = require('./basics/spacer/spacer.js');
 Hig.Table = require('./components/table/table.js');
-Hig.TextCellContent = require('./components/table/table-row/text-cell-content/text-cell-content.js')
+Hig.Tabs = require('./components/tabs/tabs.js');
+Hig.Tab = require('./components/tabs/tab/tab.js');
 Hig.TextArea = require('./basics/form-elements/text-area/text-area.js');
+Hig.TextCellContent = require(
+  './components/table/table-row/text-cell-content/text-cell-content.js'
+);
 Hig.TextField = require('./basics/form-elements/text-field/text-field.js');
 Hig.TextLink = require('./basics/text-link/text-link.js');
+Hig.Tooltip = require('./basics/tooltip/tooltip.js');
 Hig.Typography = require('./basics/typography/typography.js');
-Hig.Spacer = require('./basics/spacer/spacer.js');
-Hig.SlotHeadCell = require('./components/table/table-head/slot-head-cell/slot-head-cell.js');
-Hig.Grid = require('./basics/grid/grid.js');
+Hig.breakpoints = require('./basics/responsive/responsive');
+Hig.colors = require('./basics/colors/colors.js');
 
@@ -33,0 +38,0 @@ Hig.sizes = Hig.Spacer.SizeMap;

webpack.config.js

@@ -1,57 +0,58 @@
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-var path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const path = require('path');
 
-var r = {
-    entry: './src/index.js',
-    output: {
-        filename: 'hig.js',
-        path: path.resolve(__dirname, 'lib'),
-        library: 'Hig',
-        libraryTarget: 'umd'
-    },
-    module: {
-        rules: [{
-            test: /\.js$/,
-            loader: 'babel-loader',
-            query: {
-                presets: [
-                    'es2015'
-                ],
-                plugins: [],
-                babelrc: false,
-                compact: false
-            },
-            exclude: [/node_modules/]
-        },{
-            test: /\.scss$/,
-            loader: ExtractTextPlugin.extract({
-                fallbackLoader: "style-loader",
-                loader: "css-loader!sass-loader"
-            }),
-        },{
-            test: /\.html$/,
-            use: 'raw-loader'
-        }]
-    },
-    resolve: {
-        alias: {
-            "basics": path.resolve(__dirname, "src", "basics"),
-            "helpers": path.resolve(__dirname, "src", "helpers"),
-            "components": path.resolve(__dirname, "src", "components"),
-            "interface.json": "hig-interface",
-            "_core.js": path.resolve( __dirname, 'src/helpers/js/_core.js' )
+const r = {
+  entry: './src/index.js',
+  output: {
+    filename: 'hig.js',
+    path: path.resolve(__dirname, 'lib'),
+    library: 'Hig',
+    libraryTarget: 'umd'
+  },
+  module: {
+    rules: [{
+        test: /\.js$/,
+        loader: 'babel-loader',
+        query: {
+            presets: [
+                "es2015",
+                "stage-2"
+            ],
+            plugins: [],
+            babelrc: false,
+            compact: false
         },
-        extensions: [ '.js', '.json' ]
-    },
-    plugins: [
-        new ExtractTextPlugin('hig.css'),
-        new OptimizeCssAssetsPlugin()
-    ]
+        exclude: [/node_modules/]
+    },{
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract({
+            fallbackLoader: "style-loader",
+            loader: "css-loader!sass-loader"
+        }),
+    },{
+        test: /\.html$/,
+        use: 'raw-loader'
+    }]
+  },
+  resolve: {
+      alias: {
+          "basics": path.resolve(__dirname, "src", "basics"),
+          "helpers": path.resolve(__dirname, "src", "helpers"),
+          "components": path.resolve(__dirname, "src", "components"),
+          "interface.json": "hig-interface",
+          "_core.js": path.resolve( __dirname, 'src/helpers/js/_core.js' )
+      },
+      extensions: [ '.js', '.json' ]
+  },
+  plugins: [
+      new ExtractTextPlugin('hig.css'),
+      new OptimizeCssAssetsPlugin()
+  ]
 }
 
-if(process.env.NODE_ENV != "production"){
-    r['devtool'] = "source-map";
+if (process.env.NODE_ENV !== 'production') {
+  r.devtool = 'source-map';
 }
 
-module.exports = r;
+module.exports = r;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10336582

increased by11.56%

Number of package files

757

increased by3.27%

Lines of code

12327

increased by8.53%

Worsened metrics

Dev dependency count

31

increased by3.33%

Dependency changes

• Updatedhig-interface@^0.1.3