hig-vanilla - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     'class-methods-use-this': 0,
-    'max-len': [2, { code: 100 }],
+    'import/no-extraneous-dependencies': 0,
     'no-underscore-dangle': 0,
-    'import/no-extraneous-dependencies': 0
+    'no-unused-expressions': ['error', { allowTernary: true }],
+    'max-len': [2, { code: 100 }]
   }
 };

.gemini.js

@@ -8,2 +8,3 @@ require('dotenv').config({path: './dev/.env'})
   windowSize: "1024x768",
+  compositeImage: true,
   sessionsPerBrowser: 3, system: {
@@ -10,0 +11,0 @@ plugins: {

dev/gemini/flyout-test.js

@@ -1,2 +0,2 @@
-gemini.suite('flyout', parent => {
+gemini.suite('flyout', (parent) => {
   parent.setUrl('src/basics/flyout/tests/gemini-flyout.html');
@@ -19,10 +19,10 @@
 
-  gemini.suite('flyout', suite => {
+  gemini.suite('flyout', (suite) => {
     suite
-        .setCaptureElements('.test-container')
-        .before((actions, find) => {
-          this.next = find('.hig__button');
-        });
+      .setCaptureElements('.test-container')
+      .before((actions, find) => {
+        this.next = find('.hig__button');
+      });
 
-    examples.forEach(example => {
+    examples.forEach((example) => {
       suite.capture(example, (actions, find) => {
@@ -29,0 +29,0 @@ actions.click(this.next);

dev/gemini/help-test.js

 gemini.suite('help', (parent) => {
   parent.setUrl('src/components/global-nav/top-nav/help/tests/gemini-help.html');
 
-  gemini.suite('help-button', (suite) => {
-    suite.setCaptureElements('.hig__global-nav__top-nav')
-         .capture('regular help button');
+  gemini.suite('help', (suite) => {
+    suite.setCaptureElements('body')
+      .capture('open');
   });
-});
+});

dev/gemini/modal-test.js

@@ -9,14 +9,11 @@ gemini.suite('modal', (parent) => {
             })
-            .capture('white')
-            .capture('gray', function(actions, find) {
+            .capture('standard')
+            .capture('alternate', function(actions, find) {
                 actions.click(this.next);
             })
-            .capture('slate', function(actions, find) {
+            .capture('scrollable', function(actions, find) {
                 actions.click(this.next);
             })
-            .capture('scrolling', function(actions, find) {
-                actions.click(this.next);
-            });
   });
 
-});
+});

dev/gemini/profile-test.js

@@ -6,4 +6,4 @@ gemini.suite('profile', (parent) => {
     suite.setCaptureElements('body')
-         .capture('open');
+      .capture('open');
   });
-});
+});

dev/gemini/project-account-switcher-test.js

@@ -6,4 +6,4 @@ gemini.suite('project-account-switcher', (parent) => {
     suite.setCaptureElements('body')
-         .capture('open');
+      .capture('open');
   });
-});
+});

dev/gemini/shortcut-test.js

 gemini.suite('shortcut', (parent) => {
   parent.setUrl('src/components/global-nav/top-nav/shortcut/tests/gemini-shortcut.html');
 
-  gemini.suite('gear', (suite) => {
+  gemini.suite('settings', (suite) => {
     suite.setCaptureElements('.hig__global-nav__top-nav')
-         .capture('gear shortcut');
+      .capture('settings shortcut');
   });
-});
+});

dev/gemini/table-test.js

@@ -10,1 +10,2 @@ gemini.suite("table", parent => {
 });
+  

dev/plopfile.js

@@ -63,3 +63,3 @@ var path = require('path');
             path: '{{absPath path}}/{{ dashCase name }}/tests/tests-{{ dashCase name }}.html',
-            templateFile: 'src/web/helpers/skeletons/skeleton-tests-template.html',
+            templateFile: '../src/helpers/skeletons/skeleton-tests-template.html',
             abortOnFail: true
@@ -69,3 +69,3 @@ },{
             path: '{{absPath path}}/{{ dashCase name }}/tests/gemini-{{ dashCase name }}.html',
-            templateFile: 'src/web/helpers/skeletons/skeleton-gemini-template.html',
+            templateFile: '../src/helpers/skeletons/skeleton-gemini-template.html',
             abortOnFail: true
@@ -75,3 +75,3 @@ },{
             path: 'gemini/{{ dashCase name }}-test.js',
-            templateFile: 'src/web/helpers/skeletons/skeleton-gemini-test.js',
+            templateFile: '../src/helpers/skeletons/skeleton-gemini-test.js',
             abortOnFail: true
@@ -81,3 +81,3 @@ },{
             path: '{{absPath path}}/{{ dashCase name }}/{{ dashCase name }}.html',
-            templateFile: 'src/web/helpers/skeletons/skeleton-template.html',
+            templateFile: '../src/helpers/skeletons/skeleton-template.html',
             abortOnFail: true
@@ -93,3 +93,3 @@ },{
             path: '{{absPath path}}/{{ dashCase name }}/{{ dashCase name }}.scss',
-            templateFile: 'src/web/helpers/skeletons/skeleton-template.scss',
+            templateFile: '../src/helpers/skeletons/skeleton-template.scss',
             abortOnFail: true
@@ -105,3 +105,3 @@ },{
             path: '{{absPath path}}/{{ dashCase name }}/{{ dashCase name }}.js',
-            templateFile: 'src/web/helpers/skeletons/skeleton-template.js',
+            templateFile: '../src/helpers/skeletons/skeleton-template.js',
             abortOnFail: true
@@ -108,0 +108,0 @@ },{

package.json

 {
   "name": "hig-vanilla",
-  "version": "0.1.0",
-  "description": "",
-  "main": "dist/hig.js",
-  "css": "dist/hig.css",
+  "version": "0.1.1",
+  "description": "Stateless implementation in pure CSS, HTML and JS with no framework dependecies",
+  "main": "lib/hig.js",
+  "css": "lib/hig.css",
   "scripts": {
-    "build": "NODE_ENV=production webpack -p",
+    "foo": "NODE_ENV=production webpack -p",
     "watch": "webpack --watch",
-    "deploy": "npm run build && surge .",
+    "deploy": "npm run lib && surge .",
     "generate-index": "node ./dev/generate-index.js",
@@ -17,4 +17,3 @@ "build-icons": "node src/basics/icons/build/build.js",
     "gemini-ci": "gemini test dev/gemini/*",
-    "test": "npm run gemini",
-    "postinstall": "npm run build"
+    "test": "npm run gemini"
   },
@@ -27,2 +26,3 @@ "repository": {
   "license": "Apache 2.0",
+  "homepage": "http://hig.autodesk.com",
   "devDependencies": {
@@ -59,3 +59,6 @@ "babel-core": "^6.26.0",
     "webpack": "^3.5.5"
+  },
+  "dependencies": {
+    "hig-interface": "^0.1.1"
   }
 }

README.md

@@ -8,3 +8,3 @@ ## Web Implementation
 npm install
-npm run build
+npm run lib
 ```
@@ -27,3 +27,3 @@
 
-more advanced button examples can be found in [the components tests dir](src/basics/button/tests/tests-button.html)
+more advanced button examples can be found in [the components tests dir](src/components/button/tests/tests-button.html)
 
@@ -65,2 +65,2 @@ ## Developing
 - Run the gemini tests and generate a report: `$ npm run gemini-report`
-- View the report: `$ open ./gemini-report/index.html`
+- View the report: `$ open ./gemini-report/index.html`

src/basics/flyout/flyout.js

 import './flyout.scss';
 
-var Template = require('./flyout.html');
-var Interface = require('interface.json');
-var Core = require('../../helpers/js/_core.js');
+const Template = require('./flyout.html');
+const Interface = require('interface.json');
+const Core = require('../../helpers/js/_core.js');
 
@@ -74,6 +74,8 @@ const OPEN_CLASS = 'hig__flyout--open';
     }
-    this.el.classList.remove(
-      ...Flyout.AvailableAnchorPoints.map(s => `hig__flyout--anchor-${s}`)
+
+    const container = this._findDOMEl('.hig__flyout__container', this.el);
+    container.classList.remove(
+      ...Flyout.AvailableAnchorPoints.map(s => `hig__flyout__container--anchor-${s}`)
     );
-    this.el.classList.add(`hig__flyout--anchor-${anchorPoint}`);
+    container.classList.add(`hig__flyout__container--anchor-${anchorPoint}`);
   }
@@ -91,3 +93,3 @@
 
-Flyout._interface = Interface['basics']['Flyout'];
+Flyout._interface = Interface.basics.Flyout;
 Flyout._defaults = {
@@ -94,0 +96,0 @@ title: 'link',

src/basics/form-elements/checkbox/checkbox.js

@@ -1,5 +0,6 @@
-var Template = require('./checkbox.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
-var InputButton = require('../input-button/input-button.js');
+const Template = require('./checkbox.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
+const InputButton = require('../input-button/input-button.js');
+const Icon = require('../../icon/icon.js');
 
@@ -14,46 +15,59 @@ /**
 const inputButtonMethods = [
-    'setLabel',
-    'setValue',
-    'setName',
-    'required',
-    'noLongerRequired',
-    'enable',
-    'disable',
-    'check',
-    'uncheck',
-    'onChange',
-    'onFocus',
-    'onHover'
+  'setLabel',
+  'setValue',
+  'setName',
+  'required',
+  'noLongerRequired',
+  'enable',
+  'disable',
+  'check',
+  'uncheck',
+  'onChange',
+  'onFocus',
+  'onHover'
 ];
 
-
 class Checkbox extends InputButton {
+  constructor(options) {
+    super(options);
+    this.commentLabel = 'CHECKBOX_LABEL';
+    this._render(Template, options);
+  }
+  _componentDidMount() {
+    this._setIcon();
+  }
 
-    constructor(options){
-        super(options);
-        this.commentLabel = "CHECKBOX_LABEL";
-        this._render(Template, options);
+  _setIcon() {
+    const mountEl = this._findDOMEl('.hig__input-button__input-wrapper', this.el);
+    this._findOrCreateIconComponent(mountEl).setNameOrSVG('check-white');
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = 'icon') {
+    if (this[name]) {
+      return this[name];
     }
-    _componentDidMount() {
-        this._findDOMEl('.hig__input-button__input-wrapper',this.el).innerHTML = this._getIconString('check-white');
-    }
+    this[name] = new Icon({});
+    this[name].mount(mountElOrSelector);
+    return this[name];
+  }
 }
 
-inputButtonMethods.forEach(fn => {
-    Object.defineProperty(Checkbox.prototype, fn, {
-        configurable: false,
-        enumerable: false,
-        writable: false,
-        value: InputButton.prototype[fn]
-    });
+inputButtonMethods.forEach((fn) => {
+  Object.defineProperty(Checkbox.prototype, fn, {
+    configurable: false,
+    enumerable: false,
+    writable: true,
+    value: InputButton.prototype[fn]
+  });
 });
 
-Checkbox._interface = Interface['basics']['FormElements']['partials']['Checkbox'];
+Checkbox._interface =
+  Interface.basics.FormElements.partials.Checkbox;
 Checkbox._defaults = {
-    "label": "",
-    "name": "",
-    "value": ""
+  label: '',
+  name: '',
+  value: ''
 };
 Checkbox._partials = {};
 
-module.exports = Checkbox;
+module.exports = Checkbox;

src/basics/form-elements/dropdown/dropdown.js

@@ -112,5 +112,3 @@ import "./dropdown.scss";
   _callbackIfClickOutside(callback, event) {
-    const menuEl = this._findDOMEl(".hig__dropdown__menu");
-
-    if (menuEl.contains(event.target) || menuEl === event.target) {
+    if (this.menu.contains(event.target) || this.menu === event.target) {
       return;
@@ -117,0 +115,0 @@ }

src/basics/form-elements/dropdown/option/option.js

@@ -1,6 +0,7 @@
-import './option.scss';
+import "./option.scss";
 
-const Template = require('./option.html');
-const Interface = require('interface.json');
-const Core = require('_core.js');
+const Template = require("./option.html");
+const Interface = require("interface.json");
+const Core = require("_core.js");
+const Icon = require("../../../../basics/icon/icon.js");
 
@@ -14,40 +15,61 @@ /**
 class Option extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
+  }
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
-    }
+  _componentDidMount(){
+    this._setIcon()
+  }
 
-    deselect() {
-        this.el.classList.remove('hig__dropdown__option--selected');
-    }
+  deselect() {
+    this.el.classList.remove("hig__dropdown__option--selected");
+  }
 
-    onClick(fn) {
-        return this._attachListener("click", this.el, this.el, fn);
-    }
+  onClick(fn) {
+    return this._attachListener("click", this.el, this.el, fn);
+  }
 
-    onHover(fn) {
-        return this._attachListener("hover", this.el, this.el, fn);
-    }
+  onHover(fn) {
+    return this._attachListener("hover", this.el, this.el, fn);
+  }
 
-    select() {
-        this.el.classList.add('hig__dropdown__option--selected');
-    }
+  select() {
+    this.el.classList.add("hig__dropdown__option--selected");
+  }
 
-    setLabel(label) {
-       this._findDOMEl(".hig__option__label", this.el).textContent = label;
-    }
+  setLabel(label) {
+    this._findDOMEl(".hig__option__label", this.el).textContent = label;
+  }
 
-    setValue(value) {
-        this.el.setAttribute('data-value', value);
+  setValue(value) {
+    this.el.setAttribute("data-value", value);
+  }
+
+  _setIcon(){
+    const mountEl = this._findDOMEl(".hig__dropdown__option__checkmark", this.el);
+    this._findOrCreateIconComponent(mountEl).setNameOrSVG('checkmark-blue-dark');
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = "icon") {
+    if (this[name]) {
+      return this[name];
+    } else {
+      this[name] = new Icon({});
+      this[name].mount(mountElOrSelector);
+      return this[name];
     }
+  }
 }
 
-Option._interface = Interface['basics']['FormElements']['partials']['Dropdown']['partials']['Option'];
+Option._interface =
+  Interface["basics"]["FormElements"]["partials"]["Dropdown"]["partials"][
+    "Option"
+  ];
 Option._defaults = {
-    label: '',
-    value: '',
+  label: "",
+  value: ""
 };
 Option._partials = {};
 
-module.exports = Option;
+module.exports = Option;

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

@@ -1,4 +0,4 @@
-var Template = require('./password-field.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./password-field.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
@@ -8,15 +8,15 @@ const TextField = require('../text-field/text-field');
 const textFieldMethods = [
-    'setLabel',
-    'setPlaceholder',
-    'setValue',
-    'setName',
-    'setInstructions',
-    'required',
-    'noLongerRequired',
-    'onBlur',
-    'onChange',
-    'onFocus',
-    'onInput',
-    'enable',
-    'disable'
+  'setLabel',
+  'setPlaceholder',
+  'setValue',
+  'setName',
+  'setInstructions',
+  'required',
+  'noLongerRequired',
+  'onBlur',
+  'onChange',
+  'onFocus',
+  'onInput',
+  'enable',
+  'disable'
 ];
@@ -31,67 +31,65 @@
 class PasswordField extends Core {
+  constructor(options = {}) {
+    super(options);
+    this._render(Template, options);
 
-    constructor(options = {}){
-        super(options);
-        this._render(Template, options);
+    this.initialOptions = options;
+    this.textField = new TextField(this.initialOptions);
+  }
 
-        this.initialOptions = options;
-        this.textField = new TextField(this.initialOptions);
-    }
+  _componentDidMount() {
+    this.mountPartialToComment('PASSWORD-FIELD', this.textField);
+    this.textField._setType('password');
+  }
 
-    _componentDidMount() {
-        this.mountPartialToComment('PASSWORD-FIELD', this.textField);
-        this.textField._setType('password');
-    }
+  revealPassword() {
+    this.textField._setType('text');
+  }
 
-    revealPassword() {
-        this.textField._setType('text');
-    }
+  hidePassword() {
+    this.textField._setType('password');
+  }
 
-    hidePassword() {
-        this.textField._setType('password');
-    }
+  showPasswordRevealButton() {
+    this.textField._showPasswordRevealButton();
+  }
 
-    showPasswordRevealButton() {
-        this.textField._showPasswordRevealButton();
-    }
+  hidePasswordRevealButton() {
+    this.textField._hidePasswordRevealButton();
+  }
 
-    hidePasswordRevealButton() {
-        this.textField._hidePasswordRevealButton();
-    }
+  onPasswordRevealButtonClick(fn) {
+    return this.textField._onPasswordRevealButtonClick(fn);
+  }
 
-    onPasswordRevealButtonClick(fn) {
-        return this.textField._onPasswordRevealButtonClick(fn);
-    }
+  showPasswordHideButton() {
+    this.textField._showPasswordHideButton();
+  }
 
-    showPasswordHideButton() {
-        this.textField._showPasswordHideButton();
-    }
+  hidePasswordHideButton() {
+    this.textField._hidePasswordHideButton();
+  }
 
-    hidePasswordHideButton() {
-        this.textField._hidePasswordHideButton();
-    }
+  onPasswordHideButtonClick(fn) {
+    return this.textField._onPasswordHideButtonClick(fn);
+  }
+}
 
-    onPasswordHideButtonClick(fn) {
-        return this.textField._onPasswordHideButtonClick(fn);
+textFieldMethods.forEach((fn) => {
+  Object.defineProperty(PasswordField.prototype, fn, {
+    configurable: false,
+    enumerable: false,
+    writable: true,
+    value() {
+      return this.textField[fn].apply(this.textField, arguments);
     }
-
-}
-
-textFieldMethods.forEach(fn => {
-    Object.defineProperty(PasswordField.prototype, fn, {
-        configurable: false,
-        enumerable: false,
-        writable: false,
-        value: function() {
-            return this.textField[fn].apply(this.textField, arguments);
-        }
-    });
+  });
 });
 
-PasswordField._interface = Interface['basics']['FormElements']['partials']['PasswordField'];
+PasswordField._interface = Interface.basics.FormElements.partials.PasswordField;
 PasswordField._defaults = Object.assign({}, TextField._defaults, {
-    label: "Password"
+  label: 'Password'
 });
 PasswordField._partials = {};
 
-module.exports = PasswordField;
+module.exports = PasswordField;

src/basics/form-elements/radio-button/radio-button.js

@@ -1,4 +0,4 @@
-var Template = require('./radio-button.html');
-var Interface = require('interface.json');
-var InputButton = require('../input-button/input-button.js');
+const Template = require('./radio-button.html');
+const Interface = require('interface.json');
+const InputButton = require('../input-button/input-button.js');
 
@@ -8,14 +8,14 @@
 const inputButtonMethods = [
-    'setLabel',
-    'setValue',
-    'setName',
-    'required',
-    'noLongerRequired',
-    'enable',
-    'disable',
-    'check',
-    'uncheck',
-    'onChange',
-    'onFocus',
-    'onHover'
+  'setLabel',
+  'setValue',
+  'setName',
+  'required',
+  'noLongerRequired',
+  'enable',
+  'disable',
+  'check',
+  'uncheck',
+  'onChange',
+  'onFocus',
+  'onHover'
 ];
@@ -30,27 +30,26 @@
 class RadioButton extends InputButton {
-
-    constructor(options) {
-        super(options);
-        this.commentLabel = 'RADIOBUTTON_LABEL';
-        this._render(Template, options);
-    }
+  constructor(options) {
+    super(options);
+    this.commentLabel = 'RADIOBUTTON_LABEL';
+    this._render(Template, options);
+  }
 }
 
-inputButtonMethods.forEach(fn => {
-    Object.defineProperty(RadioButton.prototype, fn, {
-        configurable: false,
-        enumerable: false,
-        writable: false,
-        value: InputButton.prototype[fn]
-    });
+inputButtonMethods.forEach((fn) => {
+  Object.defineProperty(RadioButton.prototype, fn, {
+    configurable: false,
+    enumerable: false,
+    writable: true,
+    value: InputButton.prototype[fn]
+  });
 });
 
-RadioButton._interface = Interface['basics']['FormElements']['partials']['RadioButton'];
+RadioButton._interface = Interface.basics.FormElements.partials.RadioButton;
 RadioButton._defaults = {
-    "label": "",
-    "name": "",
-    "value": ""
+  label: '',
+  name: '',
+  value: ''
 };
 RadioButton._partials = {};
 
-module.exports = RadioButton;
+module.exports = RadioButton;

src/basics/form-elements/range/range.js

 import './range.scss';
 
-var Template = require('./range.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./range.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
@@ -14,100 +14,106 @@ /**
 class Range extends Core {
+  constructor(options = {}) {
+    options.id = Math.floor(Math.random() * 100000, 5).toString();
+    super(options);
+    this._render(Template, options);
 
-    constructor(options = {}){
-        options.id = Math.floor(Math.random() * 100000, 5).toString();
-        super(options);
-        this._render(Template, options);
+    this._findCurrentRangeValue = this._findCurrentRangeValue.bind(this);
+  }
 
-        this._findCurrentRangeValue = this._findCurrentRangeValue.bind(this);
-    }
+  _componentDidMount() {
+    this._attachListener('change', '.hig__range__field', this.el, this._findCurrentRangeValue); // for IE11
+    this._attachListener('input', '.hig__range__field', this.el, this._findCurrentRangeValue); //  for everyone else :/
+  }
 
-    _componentDidMount() {
-      this._attachListener("change", '.hig__range__field', this.el, this._findCurrentRangeValue); // for IE11
-      this._attachListener("input", '.hig__range__field', this.el, this._findCurrentRangeValue); //  for everyone else :/
+  setInstructions(instructions) {
+    if (instructions) {
+      const instructionsEl = this._findOrAddElement('INSTRUCTIONS', 'p', '.hig__range__instructions');
+      instructionsEl.textContent = instructions;
+    } else {
+      this._removeElementIfFound('.hig__range__instructions');
     }
+  }
 
-    setInstructions(instructions) {
-        if (instructions) {
-            const instructionsEl = this._findOrAddElement('INSTRUCTIONS', 'p', '.hig__range__instructions');
-            instructionsEl.textContent = instructions;
-        } else {
-            this._removeElementIfFound('.hig__range__instructions');
-        }
+  setLabel(label) {
+    if (label) {
+      const labelEl = this._findOrAddElement('LABEL', 'label', '.hig__range__label');
+      labelEl.textContent = label;
+    } else {
+      this._removeElementIfFound('.hig__range__label');
     }
+  }
 
-   setLabel(label) {
-        if (label) {
-            const labelEl = this._findOrAddElement('LABEL', 'label', '.hig__range__label');
-            labelEl.textContent = label;
-        } else {
-            this._removeElementIfFound('.hig__range__label');
-        }
-    }
+  setValue(value) {
+    const field = this._findDOMEl('.hig__range__field', this.el);
+    field.setAttribute('value', value);
+    field.value = value;
+    this._findDOMEl('.hig__range__field__current-value', this.el).textContent = value;
+    this._findCurrentRangeValue();
+  }
 
-    setValue(value) {
-        this._findDOMEl('.hig__range__field', this.el).setAttribute("value", value);
-        this._findDOMEl('.hig__range__field__current-value', this.el).textContent = value;
-    }
+  setMax(maxValue) {
+    this._findDOMEl('.hig__range__field', this.el).setAttribute('max', maxValue);
+    this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMax = maxValue;
+  }
 
-    setMax(maxValue){
-        this._findDOMEl('.hig__range__field', this.el).setAttribute("max", maxValue);
-        this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMax = maxValue;
-    }
+  setMin(minValue) {
+    this._findDOMEl('.hig__range__field', this.el).setAttribute('min', minValue);
+    this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMin = minValue;
+  }
 
-    setMin(minValue){
-        this._findDOMEl('.hig__range__field', this.el).setAttribute("min", minValue);
-        this._findDOMEl('.hig__range__field__range-values', this.el).dataset.rangeMin = minValue;
-    }
+  setStep(value) {
+    this._findDOMEl('.hig__range__field', this.el).setAttribute('step', value);
+  }
 
-    setStep(value) {
-        this._findDOMEl('.hig__range__field', this.el).setAttribute("step", value);
-    }
+  onBlur(fn) {
+    return this._attachListener('focusout', '.hig__range__field', this.el, fn);
+  }
 
-    onBlur(fn){
-        return this._attachListener("focusout", '.hig__range__field', this.el, fn);
-    }
+  onChange(fn) {
+    return this._attachListener('change', '.hig__range__field', this.el, fn);
+  }
 
-    onChange(fn){
-        return this._attachListener("change", '.hig__range__field', this.el, fn);
-    }
+  onFocus(fn) {
+    return this._attachListener('focusin', '.hig__range__field', this.el, fn);
+  }
 
-    onFocus(fn){
-        return this._attachListener("focusin", '.hig__range__field', this.el, fn);
-    }
+  onInput(fn) {
+    return this._attachListener('input', '.hig__range__field', this.el, fn);
+  }
 
-    disable(){
-        this._findDOMEl('.hig__range__field', this.el).setAttribute('disabled', true);
-        this.el.classList.add('hig__range--disabled');
-    }
+  disable() {
+    this._findDOMEl('.hig__range__field', this.el).setAttribute('disabled', true);
+    this.el.classList.add('hig__range--disabled');
+  }
 
-    enable(){
-        this._findDOMEl('.hig__range__field', this.el).removeAttribute('disabled');
-        this.el.classList.remove('hig__range--disabled');
-    }
+  enable() {
+    this._findDOMEl('.hig__range__field', this.el).removeAttribute('disabled');
+    this.el.classList.remove('hig__range--disabled');
+  }
 
-    required(requiredLabelText){
-        this.el.classList.add('hig__range--required');
-        const requiredNoticeEl = this._findOrAddElement('REQUIRED-NOTICE', 'p', '.hig__range__required-notice');
-        requiredNoticeEl.textContent = requiredLabelText;
-    }
+  required(requiredLabelText) {
+    this.el.classList.add('hig__range--required');
+    const requiredNoticeEl = this._findOrAddElement('REQUIRED-NOTICE', 'p', '.hig__range__required-notice');
+    requiredNoticeEl.textContent = requiredLabelText;
+  }
 
-    noLongerRequired(){
-        this.el.classList.remove('hig__range--required');
-        this._removeElementIfFound('.hig__range__required-notice');
-    }
+  noLongerRequired() {
+    this.el.classList.remove('hig__range--required');
+    this._removeElementIfFound('.hig__range__required-notice');
+  }
 
-    _findCurrentRangeValue(){
-        const currentValue = this._findDOMEl('.hig__range__field', this.el).value;
-        this._findDOMEl('.hig__range__field__current-value', this.el).textContent = currentValue;
-    }
+  _findCurrentRangeValue() {
+    const currentValue = this._findDOMEl('.hig__range__field', this.el).value;
+    this._findDOMEl('.hig__range__field__current-value', this.el).textContent = currentValue;
+  }
 }
 
-Range._interface = Interface['basics']['FormElements']['partials']['Range'];
+Range._interface = Interface.basics.FormElements.partials.Range;
 Range._defaults = {
-    instructions: '',
-    label: '',
-    minValue: 0,
-    maxValue: null,
-    step: 1,
-    value: null
+  instructions: '',
+  label: '',
+  minValue: 0,
+  maxValue: null,
+  step: 1,
+  value: null
 };
@@ -114,0 +120,0 @@

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

 import './text-area.scss';
 
-var Template = require('./text-area.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./text-area.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
@@ -14,3 +14,2 @@ /**
 class TextArea extends Core {
-
   constructor(options = {}) {
@@ -27,2 +26,10 @@ options.id = Math.floor(Math.random() * 100000, 5).toString();
 
+  _componentDidMount() {
+    if (this.initialOptions) {
+      this._detectPresenceOfValue(this.initialOptions.value);
+    }
+    this.field = this.el.querySelector(this.inputSelector);
+    this.field.addEventListener('input', this._handleKeyDown);
+  }
+
   setInstructions(instructions) {
@@ -37,3 +44,2 @@ if (instructions) {
 
-
   setLabel(label) {
@@ -43,3 +49,3 @@ const labelEl = this._findDOMEl('.hig__text-area__label', this.el);
     if (label) {
-      labelEl.classList.add('hig__text-area__label--visible')
+      labelEl.classList.add('hig__text-area__label--visible');
     } else {
@@ -51,15 +57,19 @@ labelEl.classList.remove('hig__text-area__label--visible');
   setPlaceholder(placeholder) {
-    this._findDOMEl(this.inputSelector, this.el).setAttribute('placeholder', placeholder);
+    this.field.setAttribute('placeholder', placeholder);
   }
 
-  setName(name){
-    this._findDOMEl(this.inputSelector, this.el).setAttribute('name', name);
+  setName(name) {
+    this.field.setAttribute('name', name);
   }
 
   setValue(value) {
-    this._findDOMEl(this.inputSelector, this.el).textContent = value;
-    this._detectPresenceOfValue(value)
+    const { selectionStart, selectionEnd } = this.field;
+    this.field.value = value;
+    this.field.selectionStart = selectionStart;
+    this.field.selectionEnd = selectionEnd;
+
+    this._detectPresenceOfValue(value);
   }
 
-  required(requiredLabelText){
+  required(requiredLabelText) {
     this.el.classList.add('hig__text-area--required');
@@ -70,3 +80,3 @@ const requiredNoticeEl = this._findOrAddElement('REQUIRED-NOTICE', 'p', '.hig__text-area__required-notice');
 
-  noLongerRequired(){
+  noLongerRequired() {
     this.el.classList.remove('hig__text-area--required');
@@ -77,3 +87,3 @@ this._removeElementIfFound('.hig__text-area__required-notice');
   enable() {
-    this._findDOMEl(this.inputSelector, this.el).removeAttribute('disabled');
+    this.field.removeAttribute('disabled');
     this.el.classList.remove('hig__text-area--disabled');
@@ -83,3 +93,3 @@ }
   disable() {
-    this._findDOMEl(this.inputSelector, this.el).setAttribute('disabled', 'true');
+    this.field.setAttribute('disabled', 'true');
     this.el.classList.add('hig__text-area--disabled');
@@ -89,28 +99,19 @@ }
   onBlur(fn) {
-    return this._attachListener("focusout", this.inputSelector, this.el, fn);
+    return this._attachListener('focusout', this.inputSelector, this.el, fn);
   }
 
   onChange(fn) {
-    return this._attachListener("change", this.inputSelector, this.el, fn);
+    return this._attachListener('change', this.inputSelector, this.el, fn);
   }
 
   onFocus(fn) {
-    return this._attachListener("focusin", this.inputSelector, this.el, fn);
+    return this._attachListener('focusin', this.inputSelector, this.el, fn);
   }
 
   onInput(fn) {
-    return this._attachListener("input", this.inputSelector, this.el, fn);
+    return this._attachListener('input', this.inputSelector, this.el, fn);
   }
 
-
-  _componentDidMount() {
-    if (this.initialOptions) {
-      this._detectPresenceOfValue(this.initialOptions.value);
-    }
-    this.el
-        .querySelector(this.inputSelector)
-        .addEventListener('input', this._handleKeyDown);
-  }
-
   _handleKeyDown(event) {
+    console.log('handling keydown');
     this._detectPresenceOfValue(event.target.value);
@@ -128,6 +129,5 @@ }
   }
-
 }
 
-TextArea._interface = Interface['basics']['FormElements']['partials']['TextArea'];
+TextArea._interface = Interface.basics.FormElements.partials.TextArea;
 TextArea._defaults = {
@@ -143,2 +143,2 @@ label: '',
 
-module.exports = TextArea;
+module.exports = TextArea;

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

 import './text-field.scss';
 
-var Template = require('./text-field.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./text-field.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
+const Icon = require('../../icon/icon.js');
 
@@ -14,218 +15,304 @@ /**
 class TextField extends Core {
+  constructor(options = {}) {
+    // Ensure each text field component has an id so the label can be associated to the input
+    let name = options.name;
+    if (!name) {
+      const randomName = Math.floor(Math.random() * 100000, 5).toString();
+      name = randomName;
+    }
+    options.id = `text-field-${name}`;
 
-    constructor(options = {}){
-        // Ensure each text field component has an id so the label can be associated to the input
-        let name = options.name;
-        if (!name) {
-            const randomName = Math.floor(Math.random() * 100000, 5).toString()
-            name = randomName;
-        }
-        options.id = `text-field-${name}`;
+    super(options);
 
-        super(options);
+    this._render(Template, options);
+    this._handleKeyDown = this._handleKeyDown.bind(this);
+    this.initialOptions = options;
+  }
 
-        this._render(Template, options);
-        this._handleKeyDown = this._handleKeyDown.bind(this);
-        this.initialOptions = options;
+  _componentDidMount() {
+    if (this.initialOptions) {
+      this._detectPresenceOfValue(this.initialOptions.value);
     }
-
-    _componentDidMount() {
-        if (this.initialOptions) {
-          this._detectPresenceOfValue(this.initialOptions.value);
-        }
-        this.el
-            .querySelector('.hig__text-field__input')
-            .addEventListener('input', this._handleKeyDown);
-        if (this.initialOptions && this.initialOptions.icon) {
-            this.setIcon(this.initialOptions.icon);
-        }
+    this.el
+      .querySelector('.hig__text-field__input')
+      .addEventListener('input', this._handleKeyDown);
+    if (this.initialOptions && this.initialOptions.icon) {
+      this.setIcon(this.initialOptions.icon);
     }
+  }
 
-    showClearButton() {
-        const buttonElement = this.el.querySelector('.hig__text-field__clear-button');
-        const iconString = this._getIconString('clear-small');
-        buttonElement.innerHTML = iconString;
-        this.el.classList.add('hig__text-field--clear-button-visible');
-    }
+  showClearButton() {
+    const buttonElement = this.el.querySelector(
+      '.hig__text-field__clear-button'
+    );
 
-    hideClearButton() {
-        this.el.classList.remove('hig__text-field--clear-button-visible');
-    }
+    this._findOrCreateIconComponent(buttonElement, 'clear-small').setNameOrSVG('clear-small');
+    this.el.classList.add('hig__text-field--clear-button-visible');
+  }
 
-    setLabel(label){
-        const labelEl = this._findDOMEl('.hig__text-field__label', this.el);
-        labelEl.textContent = label;
-        label
-            ? labelEl.classList.add('hig__text-field__label--visible')
-            : labelEl.classList.remove('hig__text-field__label--visible');
-    }
+  hideClearButton() {
+    this.el.classList.remove('hig__text-field--clear-button-visible');
+  }
 
-    setPlaceholder(placeholder){
-        this._findDOMEl('.hig__text-field__input', this.el).setAttribute('placeholder', placeholder);
-    }
+  setLabel(label) {
+    const labelEl = this._findDOMEl('.hig__text-field__label', this.el);
+    labelEl.textContent = label;
+    label
+      ? labelEl.classList.add('hig__text-field__label--visible')
+      : labelEl.classList.remove('hig__text-field__label--visible');
+  }
 
-    setValue(value){
-        const inputEl = this._findDOMEl('.hig__text-field__input', this.el);
-        inputEl.setAttribute('value', value);
-        inputEl.value = value;
-        this._detectPresenceOfValue(value);
-    }
+  setPlaceholder(placeholder) {
+    this._findDOMEl('.hig__text-field__input', this.el).setAttribute('placeholder', placeholder);
+  }
 
-    setName(name){
-        this._findDOMEl('.hig__text-field__input', this.el).setAttribute('name', name);
-    }
+  setValue(value) {
+    const inputEl = this._findDOMEl('.hig__text-field__input', this.el);
+    inputEl.setAttribute('value', value);
+    inputEl.value = value;
+    this._detectPresenceOfValue(value);
+  }
 
-    setIcon(icon) {
-        const iconEl = this._findDOMEl('.hig__text-field__icon', this.el);
+  setName(name) {
+    this._findDOMEl('.hig__text-field__input', this.el).setAttribute(
+      'name',
+      name
+    );
+  }
 
-        if (icon && icon.length > 0) {
-            const iconString = this._getIconString(icon);
+  setIcon(icon) {
+    const iconEl = this._findDOMEl('.hig__text-field__icon', this.el);
 
-            iconEl.innerHTML = iconString;
-            iconEl.classList.add('hig__text-field__icon--visible');
-            this._findOrAddElement('ICON-SPACER', 'div', '.hig__text-field__icon-spacer');
-        } else {
-            iconEl.classList.remove('hig__text-field__icon--visible');
-            this._removeElementIfFound('.hig__text-field__icon-spacer');
-        }
+    if (icon && icon.length > 0) {
+      this._findOrCreateIconComponent(iconEl).setNameOrSVG(icon);
 
+      iconEl.classList.add('hig__text-field__icon--visible');
+      this._findOrAddElement(
+        'ICON-SPACER',
+        'div',
+        '.hig__text-field__icon-spacer'
+      );
+    } else {
+      iconEl.classList.remove('hig__text-field__icon--visible');
+      this._removeElementIfFound('.hig__text-field__icon-spacer');
     }
+  }
 
-    setInstructions(instructions){
-        if (instructions) {
-            const instructionsEl = this._findOrAddElement('INSTRUCTIONS', 'p', '.hig__text-field__instructions');
-            instructionsEl.textContent = instructions;
-        } else {
-            this._removeElementIfFound('.hig__text-field__instructions');
-        }
+  _findOrCreateIconComponent(mountElOrSelector, name) {
+    if (this[name]) {
+      return this[name];
     }
+    this[name] = new Icon({});
+    this[name].mount(mountElOrSelector);
+    return this[name];
+  }
 
-    required(requiredLabelText){
-        this.el.classList.add('hig__text-field--required');
-        const requiredNoticeEl = this._findOrAddElement('REQUIRED-NOTICE', 'p', '.hig__text-field__required-notice');
-        requiredNoticeEl.textContent = requiredLabelText;
+  setInstructions(instructions) {
+    if (instructions) {
+      const instructionsEl = this._findOrAddElement(
+        'INSTRUCTIONS',
+        'p',
+        '.hig__text-field__instructions'
+      );
+      instructionsEl.textContent = instructions;
+    } else {
+      this._removeElementIfFound('.hig__text-field__instructions');
     }
+  }
 
-    noLongerRequired(){
-        this.el.classList.remove('hig__text-field--required');
-        this._removeElementIfFound('.hig__text-field__required-notice');
-    }
+  required(requiredLabelText) {
+    this.el.classList.add('hig__text-field--required');
+    const requiredNoticeEl = this._findOrAddElement(
+      'REQUIRED-NOTICE',
+      'p',
+      '.hig__text-field__required-notice'
+    );
+    requiredNoticeEl.textContent = requiredLabelText;
+  }
 
-    onBlur(fn){
-        return this._attachListener("focusout", '.hig__text-field__input', this.el, fn);
-    }
+  noLongerRequired() {
+    this.el.classList.remove('hig__text-field--required');
+    this._removeElementIfFound('.hig__text-field__required-notice');
+  }
 
-    onChange(fn){
-        return this._attachListener("change", '.hig__text-field__input', this.el, fn);
-    }
+  onBlur(fn) {
+    return this._attachListener(
+      'focusout',
+      '.hig__text-field__input',
+      this.el,
+      fn
+    );
+  }
 
-    onFocus(fn){
-        return this._attachListener("focusin", '.hig__text-field__input', this.el, fn);
-    }
+  onChange(fn) {
+    return this._attachListener(
+      'change',
+      '.hig__text-field__input',
+      this.el,
+      fn
+    );
+  }
 
-    onInput(fn){
-        return this._attachListener("input", '.hig__text-field__input', this.el, fn);
-    }
+  onFocus(fn) {
+    return this._attachListener(
+      'focusin',
+      '.hig__text-field__input',
+      this.el,
+      fn
+    );
+  }
 
-    onClearButtonClick(fn){
-        return this._attachListener("click", '.hig__text-field__clear-button', this.el, fn);
-    }
+  onInput(fn) {
+    return this._attachListener(
+      'input',
+      '.hig__text-field__input',
+      this.el,
+      fn
+    );
+  }
 
-    enable() {
-        this._findDOMEl('.hig__text-field__input', this.el).removeAttribute('disabled');
-        this.el.classList.remove('hig__text-field--disabled');
-    }
+  onClearButtonClick(fn) {
+    return this._attachListener(
+      'click',
+      '.hig__text-field__clear-button',
+      this.el,
+      fn
+    );
+  }
 
-    disable() {
-        this._findDOMEl('.hig__text-field__input', this.el).setAttribute('disabled', 'true');
-        this.el.classList.add('hig__text-field--disabled');
-    }
+  enable() {
+    this._findDOMEl('.hig__text-field__input', this.el).removeAttribute(
+      'disabled'
+    );
+    this.el.classList.remove('hig__text-field--disabled');
+  }
 
-    _addSlot(element) {
-        this.mountPartialToComment('SLOT', element);
-    }
+  disable() {
+    this._findDOMEl('.hig__text-field__input', this.el).setAttribute(
+      'disabled',
+      'true'
+    );
+    this.el.classList.add('hig__text-field--disabled');
+  }
 
-    _handleKeyDown(event) {
-        this._detectPresenceOfValue(event.target.value);
-    }
+  _addSlot(element) {
+    this.mountPartialToComment('SLOT', element);
+  }
 
-    _detectPresenceOfValue(value) {
-        if (value.length === 0) {
-            this.el.querySelector('.hig__text-field__input').classList.add('hig__text-field__input--no-value');
-        } else {
-            this.el.querySelector('.hig__text-field__input').classList.remove('hig__text-field__input--no-value');
-        }
-    }
+  _handleKeyDown(event) {
+    this._detectPresenceOfValue(event.target.value);
+  }
 
-    _setType(type) {
-        this.el.querySelector('.hig__text-field__input').setAttribute('type', type);
+  _detectPresenceOfValue(value) {
+    if (value === undefined || value.length === 0) {
+      this.el
+        .querySelector('.hig__text-field__input')
+        .classList.add('hig__text-field__input--no-value');
+    } else {
+      this.el
+        .querySelector('.hig__text-field__input')
+        .classList.remove('hig__text-field__input--no-value');
     }
+  }
 
-    _showPasswordRevealButton() {
-        const iconString = this._getIconString('eye-blocked');
-        const passwordButton = this.el.querySelector('.hig__text-field__password-reveal-button');
-        passwordButton.innerHTML = iconString;
-        passwordButton.classList.add('hig__text-field__extra--show');
-        this.el.classList.add('hig__text-field--password-button-visible');
-    }
+  _setType(type) {
+    this.el.querySelector('.hig__text-field__input').setAttribute('type', type);
+  }
 
-    _hidePasswordRevealButton() {
-        const passwordButton = this.el.querySelector('.hig__text-field__password-reveal-button');
-        passwordButton.classList.remove('hig__text-field__extra--show');
-        this.el.classList.remove('hig__text-field--password-button-visible');
-    }
+  _showPasswordRevealButton() {
+    const passwordButton = this.el.querySelector(
+      '.hig__text-field__password-reveal-button'
+    );
+    this._findOrCreateIconComponent(passwordButton).setNameOrSVG('hidden');
+    passwordButton.classList.add('hig__text-field__extra--show');
+    this.el.classList.add('hig__text-field--password-button-visible');
+  }
 
-    _onClick(fn){
-        return this._attachListener("click", '.hig__text-field__input', this.el, fn);
-    }
+  _hidePasswordRevealButton() {
+    const passwordButton = this.el.querySelector(
+      '.hig__text-field__password-reveal-button'
+    );
+    passwordButton.classList.remove('hig__text-field__extra--show');
+    this.el.classList.remove('hig__text-field--password-button-visible');
+  }
 
-    _onPasswordRevealButtonClick(fn) {
-        return this._attachListener("mousedown", '.hig__text-field__password-reveal-button', this.el, fn);
-    }
+  _onClick(fn) {
+    return this._attachListener(
+      'click',
+      '.hig__text-field__input',
+      this.el,
+      fn
+    );
+  }
 
-    _showPasswordHideButton() {
-        const iconString = this._getIconString('eye');
-        const passwordButton = this.el.querySelector('.hig__text-field__password-hide-button');
-        passwordButton.innerHTML = iconString;
-        passwordButton.classList.add('hig__text-field__extra--show');
-        this.el.classList.add('hig__text-field--password-button-visible');
-    }
+  _onPasswordRevealButtonClick(fn) {
+    return this._attachListener(
+      'mousedown',
+      '.hig__text-field__password-reveal-button',
+      this.el,
+      fn
+    );
+  }
 
-    _hidePasswordHideButton() {
-        const passwordButton = this.el.querySelector('.hig__text-field__password-hide-button');
-        passwordButton.classList.remove('hig__text-field__extra--show');
-        this.el.classList.remove('hig__text-field--password-button-visible');
-    }
+  _showPasswordHideButton() {
+    const passwordButton = this.el.querySelector(
+      '.hig__text-field__password-hide-button'
+    );
 
-    _onPasswordHideButtonClick(fn) {
-        return this._attachListener("mousedown", '.hig__text-field__password-hide-button', this.el, fn);
-    }
+    this._findOrCreateIconComponent(passwordButton, 'visible').setNameOrSVG('visible');
+    passwordButton.classList.add('hig__text-field__extra--show');
+    this.el.classList.add('hig__text-field--password-button-visible');
+  }
 
-    _showDropdownCaret() {
-        const iconString = this._getIconString('caret');
-        const caretEl = this._findOrAddElement('EXTRA', 'span', '.hig__text-field__extra.hig__text-field__extra--dropdown-caret');
-        caretEl.innerHTML = iconString;
-        caretEl.classList.add('hig__text-field__extra--show');
-    }
+  _hidePasswordHideButton() {
+    const passwordButton = this.el.querySelector(
+      '.hig__text-field__password-hide-button'
+    );
+    passwordButton.classList.remove('hig__text-field__extra--show');
+    this.el.classList.remove('hig__text-field--password-button-visible');
+  }
 
-    _hideDropdownCaret() {
-        this._removeElementIfFound('.hig__text-field__extra.hig__text-field__extra--dropdown-caret');
-    }
+  _onPasswordHideButtonClick(fn) {
+    return this._attachListener(
+      'mousedown',
+      '.hig__text-field__password-hide-button',
+      this.el,
+      fn
+    );
+  }
 
-    _setReadonly(value) {
-        const field = this._findDOMEl('.hig__text-field__input', this.el);
-        value ? field.setAttribute('readonly', true) : field.removeAttribute('readonly');
-    }
+  _showDropdownCaret() {
+    const caretEl = this._findOrAddElement(
+      'EXTRA',
+      'span',
+      '.hig__text-field__extra.hig__text-field__extra--dropdown-caret'
+    );
+    this._findOrCreateIconComponent(caretEl).setNameOrSVG('caret');
+    caretEl.classList.add('hig__text-field__extra--show');
+  }
 
+  _hideDropdownCaret() {
+    this._removeElementIfFound(
+      '.hig__text-field__extra.hig__text-field__extra--dropdown-caret'
+    );
+  }
+
+  _setReadonly(value) {
+    const field = this._findDOMEl('.hig__text-field__input', this.el);
+    value
+      ? field.setAttribute('readonly', true)
+      : field.removeAttribute('readonly');
+  }
 }
 
-TextField._interface = Interface['basics']['FormElements']['partials']['TextField'];
+TextField._interface =
+  Interface.basics.FormElements.partials.TextField;
 TextField._defaults = {
-    "label": "",
-    "name": "",
-    "icon": null,
-    "placeholder": "",
-    "required": "",
-    "value": "",
-    "instructions": ""
+  label: '',
+  name: '',
+  icon: null,
+  placeholder: '',
+  required: '',
+  value: '',
+  instructions: ''
 };
@@ -232,0 +319,0 @@ TextField._partials = {};

src/basics/grid/grid-item/grid-item.js

 const Template = require('./grid-item.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
+const AvailableFractions = [
+  'one-whole',
+  'one-half',
+  'one-quarter',
+  'two-quarters',
+  'three-quarters',
+  'one-eighth',
+  'two-eighths',
+  'three-eighths',
+  'four-eighths',
+  'five-eighths',
+  'six-eighths',
+  'seven-eighths',
+  'one-twelfth',
+  'two-twelfths',
+  'three-twelfths',
+  'four-twelfths',
+  'five-twelfths',
+  'six-twelfths',
+  'seven-twelfths',
+  'eight-twelfths',
+  'nine-twelfths',
+  'ten-twelfths',
+  'eleven-twelfths'
+];
+
 /**
@@ -12,3 +38,2 @@ * Creates a GridItem
 class GridItem extends Core {
-
   constructor(options) {
@@ -19,19 +44,20 @@ super(options);
 
-  addSlot(slotElement){
+  addSlot(slotElement) {
     this.mountPartialToComment('SLOT', slotElement);
   }
 
-  setFraction(fraction){
-    this.el.classList = "";
-    this.el.classList.add("hig__grid__item", "hig__grid__item--"+fraction);
+  setFraction(fraction) {
+    this.el.classList = '';
+    this.el.classList.add('hig__grid__item', `hig__grid__item--${fraction}`);
   }
-
 }
 
 
-GridItem._interface = Interface['basics']['Grid']['partials']['GridItem'];
+GridItem._interface = Interface.basics.Grid.partials.GridItem;
 GridItem._defaults = {
-  "fraction": "one-whole"
+  fraction: 'one-whole'
 };
 
-module.exports = GridItem;
+GridItem.AvailableFractions = AvailableFractions;
+
+module.exports = GridItem;

src/basics/spacer/spacer.js

 import './spacer.scss';
 
 const Template = require('./spacer.html');
-var Interface = require('interface.json');
-var Core = require('../../helpers/js/_core.js');
+const Interface = require('interface.json');
+const Core = require('../../helpers/js/_core.js');
 
@@ -27,55 +27,55 @@ const SIZES = {
 class Spacer extends Core {
-    constructor(options = {}) {
-      super(options);
-      this._render(Template, options);
-      this.initialOptions = options;
+  constructor(options = {}) {
+    super(options);
+    this._render(Template, options);
+    this.initialOptions = options;
+  }
+
+  _componentDidMount() {
+    if (this.initialOptions.type) {
+      this.setType(this.initialOptions.type);
     }
 
-    _componentDidMount() {
-        if (this.initialOptions.type) {
-            this.setType(this.initialOptions.type);
-        }
+    if (this.initialOptions.width) {
+      this.setWidth(this.initialOptions.width);
+    }
 
-        if (this.initialOptions.width) {
-            this.setWidth(this.initialOptions.width);
-        }
-
-        if (this.initialOptions.inset) {
-            this.setInset(this.initialOptions.inset);
-        }
+    if (this.initialOptions.inset) {
+      this.setInset(this.initialOptions.inset);
     }
+  }
 
-    setWidth(width = 'none') {
-        if (!Spacer.AvailableSizes.includes(width)) {
-            console.error(`Spacer cannot have width "${width}". Only these widths are allowed: `, Spacer.AvailableSizes);
-            return;
-        }
-        this.el.classList.remove(...Spacer.AvailableSizes.map(s => `hig__spacer--width-${s}`));
-        this.el.classList.add(`hig__spacer--width-${width}`);
+  setWidth(width = 'none') {
+    if (!Spacer.AvailableSizes.includes(width)) {
+      console.error(`Spacer cannot have width "${width}". Only these widths are allowed: `, Spacer.AvailableSizes);
+      return;
     }
+    this.el.classList.remove(...Spacer.AvailableSizes.map(s => `hig__spacer--width-${s}`));
+    this.el.classList.add(`hig__spacer--width-${width}`);
+  }
 
-    setType(type) {
-        if (!Spacer.AvailableTypes.includes(type)) {
-            console.error(`Spacer cannot have type "${type}". Only these types are allowed: `, Spacer.AvailableTypes);
-            return;
-        }
-        this.el.classList.remove(...Spacer.AvailableTypes.map(t => `hig__spacer--${t}`));
-        this.el.classList.add(`hig__spacer--${type}`);
+  setType(type) {
+    if (!Spacer.AvailableTypes.includes(type)) {
+      console.error(`Spacer cannot have type "${type}". Only these types are allowed: `, Spacer.AvailableTypes);
+      return;
     }
+    this.el.classList.remove(...Spacer.AvailableTypes.map(t => `hig__spacer--${t}`));
+    this.el.classList.add(`hig__spacer--${type}`);
+  }
 
-    setInset(size = 'none') {
-        if (!Spacer.AvailableSizes.includes(size)) {
-            console.error(`Spacer cannot have inset size "${size}". Only these inset sizes are allowed: `, Spacer.AvailableSizes);
-            return;
-        }
-        this.el.classList.remove(...Spacer.AvailableSizes.map(s => `hig__spacer--inset-${s}`));
-        this.el.classList.add(`hig__spacer--inset-${size}`);
+  setInset(size = 'none') {
+    if (!Spacer.AvailableSizes.includes(size)) {
+      console.error(`Spacer cannot have inset size "${size}". Only these inset sizes are allowed: `, Spacer.AvailableSizes);
+      return;
     }
+    this.el.classList.remove(...Spacer.AvailableSizes.map(s => `hig__spacer--inset-${s}`));
+    this.el.classList.add(`hig__spacer--inset-${size}`);
+  }
 
-    addSlot(slotEl) {
-        this.el.appendChild(slotEl);
-    }
+  addSlot(slotEl) {
+    this.el.appendChild(slotEl);
+  }
 }
 
-Spacer._interface = Interface['basics']['Spacer'];
+Spacer._interface = Interface.basics.Spacer;
 Spacer._defaults = {
@@ -87,2 +87,3 @@ type: 'stack',
 
+Spacer.SizeMap = SIZES;
 Spacer.AvailableSizes = Object.keys(SIZES);
@@ -89,0 +90,0 @@ Spacer.AvailableTypes = TYPES;

src/basics/text-link/text-link.js

 import './text-link.scss';
 
-var Template = require('./text-link.html');
-var Interface = require('interface.json');
-var Core = require('../../helpers/js/_core.js');
+const Template = require('./text-link.html');
+const Interface = require('interface.json');
+const Core = require('../../helpers/js/_core.js');
 
@@ -16,58 +16,57 @@ const TYPES = ['primary', 'secondary'];
 class TextLink extends Core {
-    constructor(options = {}) {
-        super(options);
-        this._render(Template, options);
-        this.initialOptions = options;
-    }
+  constructor(options = {}) {
+    super(options);
+    this._render(Template, options);
+    this.initialOptions = options;
+  }
 
-    _componentDidMount() {
-        if (this.initialOptions) {
-            if (this.initialOptions.href) {
-                this.setHref(this.initialOptions.href);
-            }
+  _componentDidMount() {
+    if (this.initialOptions) {
+      if (this.initialOptions.href) {
+        this.setHref(this.initialOptions.href);
+      }
 
-            if (this.initialOptions.text) {
-                this.setText(this.initialOptions.text);
-            }
+      if (this.initialOptions.text) {
+        this.setText(this.initialOptions.text);
+      }
 
-            if (this.initialOptions.type) {
-                this.setType(this.initialOptions.type);
-            }
-        }
+      if (this.initialOptions.type) {
+        this.setType(this.initialOptions.type);
+      }
     }
+  }
 
-    setText(text) {
-        this.el.setAttribute('alt', text);
-        this.el.innerHTML = text;
-    }
+  setText(text) {
+    this.el.setAttribute('alt', text);
+    this.el.innerHTML = text;
+  }
 
-    setHref(href) {
-        this.el.setAttribute('href', href);
-        this.el.href = href;
-    }
+  setHref(href) {
+    this.el.setAttribute('href', href);
+    this.el.href = href;
+  }
 
-    setType(type) {
-        if (!TextLink.AvailableTypes.includes(type)) {
-            console.error(`TextLink cannot have type "${type}". Only these types are allowed: `, TextLink.AvailableTypes);
-            return;
-        }
-        this.el.classList.remove(...TextLink.AvailableTypes.map(t => `hig__text-link--${t}`));
-        this.el.classList.add(`hig__text-link--${type}`);
+  setType(type) {
+    if (!TextLink.AvailableTypes.includes(type)) {
+      console.error(`TextLink cannot have type "${type}". Only these types are allowed: `, TextLink.AvailableTypes);
+      return;
     }
+    this.el.classList.remove(...TextLink.AvailableTypes.map(t => `hig__text-link--${t}`));
+    this.el.classList.add(`hig__text-link--${type}`);
+  }
 
-    onClick(fn) {
-        return this._attachListener("click", this.el, this.el, fn);
-    }
-
+  onClick(fn) {
+    return this._attachListener('click', this.el, this.el, fn);
+  }
 }
 
-TextLink._interface = Interface['basics']['TextLink'];
+TextLink._interface = Interface.basics.TextLink;
 TextLink.AvailableTypes = TYPES;
 
 TextLink._defaults = {
-    href: null,
-    text: 'Text',
-    type: 'primary'
+  href: null,
+  text: 'Text',
+  type: 'primary'
 };
 
 module.exports = TextLink;

src/basics/typography/typography.js

@@ -1,6 +0,6 @@
-import "./typography.scss"
+import './typography.scss';
 
-var Template = require('./typography.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./typography.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
@@ -14,3 +14,2 @@ /**
 class Typography extends Core {
-
   constructor(options) {
@@ -20,4 +19,4 @@ super(options);
     // Check for compliance
-    if (options && ['h1', 'h2', 'h3', 'sub1', 'sub2', 'body', 'bold', 'disabled', 'caption'].indexOf(options["type"]) === -1) {
-      console.error("Not a valid typography type!");
+    if (options && ['h1', 'h2', 'h3', 'sub1', 'sub2', 'body', 'bold', 'disabled', 'caption'].indexOf(options.type) === -1) {
+      console.error('Not a valid typography type!');
     }
@@ -35,3 +34,3 @@
     this._removeElLastClass();
-    this.el.classList.add("hig__typography__" + type);
+    this.el.classList.add(`hig__typography__${type}`);
   }
@@ -44,13 +43,12 @@
   applyTypographyToElement(el) {
-    var e = this._findDOMEl(el);
-    e.classList.add("hig__typography");
+    const e = this._findDOMEl(el);
+    e.classList.add('hig__typography');
   }
-
 }
 
-Typography._interface = Interface['basics']['Typography'];
+Typography._interface = Interface.basics.Typography;
 Typography._defaults = {
-  "text": "text", "type": "body"
+  text: 'text', type: 'body'
 };
 
 module.exports = Typography;

src/components/button/button.js

@@ -9,3 +9,6 @@ import './button.scss';
 const AvailableSizes = ['small', 'standard', 'large'];
+const AvailableWidths = ['shrink', 'grow'];
+const Icon = require('../../basics/icon/icon.js');
 
+
 /**
@@ -51,2 +54,14 @@ * Creates a button
 
+  setWidth(width) {
+    if (AvailableWidths.indexOf(width) > -1) {
+      this._clearAllWidths();
+      this.el.classList.add(`hig__button--${width}`);
+    } else {
+      console.error(
+        `Button type "${width}" not found, only these types are allowed: `,
+        AvailableWidths,
+      );
+    }
+  }
+
   setSize(size) {
@@ -66,9 +81,8 @@ if (AvailableSizes.indexOf(size) > -1) {
     if (icon && icon.length > 0) {
-      const iconString = this._getIconString(icon);
-
-      this._findOrAddElement(
+      const mountEl = this._findOrAddElement(
         'ICON',
         'span',
-        '.hig__button__icon',
-      ).innerHTML = iconString;
+        '.hig__button__icon'
+      );
+      this._findOrCreateIconComponent(mountEl).setNameOrSVG(icon);
     } else {
@@ -79,2 +93,6 @@ this._removeElementIfFound('.hig__button__icon');
 
+  setTarget(target) {
+    this.el.setAttribute('target', target);
+  }
+
   disable() {
@@ -106,2 +124,12 @@ this.el.classList.add('hig__button--disabled');
 
+  _findOrCreateIconComponent(mountElOrSelector, name = "icon") {
+    if (this[name]) {
+      return this[name];
+    } 
+      this[name] = new Icon({});
+      this[name].mount(mountElOrSelector);
+      return this[name];
+    
+  }
+
   _clearAllTypes() {
@@ -118,2 +146,8 @@ AvailableTypes.forEach((type) => {
   }
+
+  _clearAllWidths() {
+    AvailableWidths.forEach((width) => {
+      this.el.classList.remove(`hig__button--${width}`);
+    });
+  }
 }
@@ -123,12 +157,15 @@
 Button._defaults = {
+  icon: false,
+  link: false,
+  size: 'standard',
+  target: '_self',
   title: 'link',
-  link: '#',
   type: 'primary',
-  size: 'standard',
-  icon: false,
+  width: 'shrink'
 };
 
+Button.AvailableSizes = AvailableSizes;
 Button.AvailableTypes = AvailableTypes;
-Button.AvailableSizes = AvailableSizes;
+Button.AvailableWidths = AvailableWidths;
 
 module.exports = Button;

src/components/global-nav/side-nav/group/module/collapse/collapse.js

@@ -6,3 +6,5 @@ import './collapse.scss';
 const Core = require('_core.js');
+const Icon = require("../../../../../../basics/icon/icon.js");
 
+
 /**
@@ -20,2 +22,6 @@ * Creates an Collapse
 
+  _componentDidMount(){
+    this._setIcon()
+  }
+
   minimize() {
@@ -40,2 +46,16 @@ this.el.classList.add('hig__global-nav__side-nav__section__group__module__collapse--collapsed');
   }
+
+  _setIcon(){
+    this._findOrCreateIconComponent(this.el).setNameOrSVG('caret');
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = "icon") {
+    if (this[name]) {
+      return this[name];
+    } else {
+      this[name] = new Icon({});
+      this[name].mount(mountElOrSelector);
+      return this[name];
+    }
+  }
 }
@@ -42,0 +62,0 @@

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

@@ -9,2 +9,3 @@ import './module.scss';
 const Collapse = require('./collapse/collapse.js');
+const Icon = require("../../../../../basics/icon/icon.js");
 
@@ -20,5 +21,15 @@ /**
     super(options);
+    if(!options.icon){
+      options['no-icon-class'] = "hig__global-nav__side-nav__section__group__module__submodules--no-icon";
+    }
     this._render(Template, options);
+    this.initialOptions = options
   }
 
+  _componentDidMount(){
+    if (this.initialOptions.icon) {
+      this.setIcon(this.initialOptions.icon);
+    }
+  }
+
   onClick(fn) {
@@ -33,3 +44,4 @@ return this._attachListener('click', '.hig__global-nav__side-nav__section__group__module__link', this.el, fn);
   setIcon(icon) {
-    this._findDOMEl('.hig__global-nav__side-nav__section__group__module__link__icon', this.el).innerHTML = this._getIconString(icon);
+    const mountEl = this._findDOMEl('.hig__global-nav__side-nav__section__group__module__link__icon', this.el);
+    this._findOrCreateIconComponent(mountEl).setNameOrSVG(icon);
   }
@@ -72,2 +84,12 @@
   }
+
+  _findOrCreateIconComponent(mountElOrSelector, name='icon') {
+    if (this[name]) {
+        return this[name];
+    } else {
+        this[name] = new Icon({});
+        this[name].mount(mountElOrSelector);
+        return this[name];
+    }
+  }
 }
@@ -74,0 +96,0 @@

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

@@ -6,3 +6,5 @@ import './search.scss';
 const Core = require('_core.js');
+const Icon = require("../../../../basics/icon/icon.js");
 
+
 /**
@@ -20,2 +22,6 @@ * Creates an Search
 
+  _componentDidMount(){
+    this._setIcons()
+  }
+
   hideClearIcon() {
@@ -52,2 +58,20 @@ this._findDOMEl('.hig__global-nav__side-nav__search__clear', this.el).classList.remove('hig__global-nav__side-nav__search__clear--show');
   }
+
+  _setIcons(){
+    const mountSearchIcon = this._findDOMEl('.hig__global-nav__side-nav__search__icon', this.el);
+    this._findOrCreateIconComponent(mountSearchIcon, 'search').setNameOrSVG("search", "16" );
+
+    const mountClearIcon = this._findDOMEl(".hig__global-nav__side-nav__search__clear", this.el);
+    this._findOrCreateIconComponent(mountClearIcon, 'clear').setNameOrSVG("close-small");
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = "icon") {
+    if (this[name]) {
+      return this[name];
+    } else {
+      this[name] = new Icon({});
+      this[name].mount(mountElOrSelector);
+      return this[name];
+    }
+  }
 }
@@ -54,0 +78,0 @@

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

@@ -42,2 +42,10 @@ import './side-nav.scss';
 
+  addSlot(slotElement) {
+    this._findOrAddElement(
+      'SLOT',
+      'div',
+      '.hig__side-nav__slot',
+    ).appendChild(slotElement);
+  }
+
   onHeaderClick(fn) {
@@ -44,0 +52,0 @@ return this._attachListener('click', '.hig__global-nav__sidenav__header-link', this.el, fn);

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

 import './sub-nav.scss';
 
-var Template = require('./sub-nav.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+let Template = require('./sub-nav.html');
+let Interface = require('interface.json');
+let Core = require('_core.js');
 
-var Tabs = require('./tabs/tabs.js');
+let Tabs = require('./tabs/tabs.js');
+const Icon = require('../../../basics/icon/icon.js');
 
@@ -16,39 +17,80 @@ /**
 class SubNav extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
+    this.initialOptions = options;
+  }
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
+  _componentDidMount() {
+    if (this.initialOptions.moduleIndicatorIcon) {
+      this.setModuleIndicatorIcon(this.initialOptions.moduleIndicatorIcon);
     }
+  }
 
-    setModuleIndicatorName(name){
-        this._findDOMEl('.hig__global-nav__sub-nav__module-indicator__name', this.el).textContent = name;
-        this._findDOMEl('.hig__global-nav__sub-nav__module-indicator__name.hig__global-nav__sub-nav__spacer', this.el).textContent = name;
-    }
+  setModuleIndicatorName(name) {
+    this._findDOMEl(
+      '.hig__global-nav__sub-nav__module-indicator__name',
+      this.el
+    ).textContent = name;
+    this._findDOMEl(
+      '.hig__global-nav__sub-nav__module-indicator__name.hig__global-nav__sub-nav__spacer',
+      this.el
+    ).textContent = name;
+  }
 
-    setModuleIndicatorIcon(icon){
-        this._findDOMEl('.hig__global-nav__sub-nav__module-indicator__icon', this.el).innerHTML = this._getIconString(icon);
-        this._findDOMEl('.hig__global-nav__sub-nav__module-indicator__icon.hig__global-nav__sub-nav__spacer', this.el).innerHTML = this._getIconString(icon);
-    }
+  setModuleIndicatorIcon(icon) {
+    const mountIndicatorIcon = this._findDOMEl(
+      '.hig__global-nav__sub-nav__module-indicator__icon',
+      this.el
+    );
+    this._findOrCreateIconComponent(
+      mountIndicatorIcon,
+      'indicator-icon'
+    ).setNameOrSVG(icon);
 
-    addTabs(tabsInstance){
-        if(tabsInstance instanceof Tabs) {
-            this.mountPartialToComment('TABS', tabsInstance)
-        }
-    }
+    const mountIndicatorIconSpacer = this._findDOMEl(
+      '.hig__global-nav__sub-nav__module-indicator__icon.hig__global-nav__sub-nav__spacer',
+      this.el
+    );
+    this._findOrCreateIconComponent(
+      mountIndicatorIconSpacer,
+      'indicator-icon-spacer'
+    ).setNameOrSVG(icon);
+  }
 
-    onModuleIndicatorClick(fn){
-        return this._attachListener("click", '.hig__global-nav__sub-nav__module-indicator', this.el, fn);
+  addTabs(tabsInstance) {
+    if (tabsInstance instanceof Tabs) {
+      this.mountPartialToComment('TABS', tabsInstance);
     }
+  }
 
+  onModuleIndicatorClick(fn) {
+    return this._attachListener(
+      'click',
+      '.hig__global-nav__sub-nav__module-indicator',
+      this.el,
+      fn
+    );
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = "icon") {
+    if (this[name]) {
+      return this[name];
+    } 
+      this[name] = new Icon({});
+      this[name].mount(mountElOrSelector);
+      return this[name];
+    
+  }
 }
 
-SubNav._interface = Interface['components']['GlobalNav']['partials']['SubNav'];
+SubNav._interface = Interface.components.GlobalNav.partials.SubNav;
 SubNav._defaults = {
-    "moduleIndicatorName": "Module Name",
-    "moduleIndicatorIcon": "#"
+  moduleIndicatorName: 'Module Name',
+  moduleIndicatorIcon: ''
 };
 SubNav._partials = {
-    Tabs: Tabs
+  Tabs
 };
 
-module.exports = SubNav;
+module.exports = SubNav;

src/components/global-nav/top-nav/help/help.js

@@ -1,22 +0,73 @@
-var Shortcut = require('../shortcut/shortcut.js');
-var Interface = require('interface.json');
+import './help.scss';
 
+const Interface = require('interface.json');
+const Core = require('_core.js');
+const Template = require('./help.html');
+
+const Flyout = require('basics/flyout/flyout.js');
+const Shortcut = require('../shortcut/shortcut.js');
+const Group = require('./group/group.js');
+const Option = require('./option/option.js');
+
 /**
- * Creates an Help
+ * Creates a Help
  *
  * @class
  */
+class Help extends Core {
+  constructor(options) {
+    super(options);
+    this.options = options || {};
+    this._render(Template, options);
+  }
 
-class Help extends Shortcut {
-    constructor(options){
-        options.icon = 'help';
-        super(options);
+  open() {
+    this.flyout.open();
+  }
+
+  close() {
+    this.flyout.close();
+  }
+
+  // bind the supplied fn to click events on this element.
+  onClick(fn) {
+    return this.shortcut.onClick(fn);
+  }
+
+  onClickOutside(fn) {
+    return this.flyout.onClickOutside(fn);
+  }
+
+  addGroup(group, referenceGroup) {
+    if (group instanceof Group) {
+      group.mount(this.el, referenceGroup);
+      this.flyout.addSlot(group);
     }
-    setLink(link) { super.setLink(link); }
-    setTitle(title) { super.setTitle(title); }
-    onClick(action) { super.onClick(action); }
+  }
+
+  setTitle(title) {
+    this.shortcut.setTitle(title);
+  }
+
+  _componentDidMount() {
+    this.flyout = new Flyout();
+    this.mountPartialToComment('FLYOUT', this.flyout, this.el);
+    this.shortcut = new Shortcut({
+      icon: 'help',
+      title: this.options.title
+    });
+    this.shortcut.mount(this.el);
+    this.flyout.addTarget(this.shortcut);
+  }
 }
 
-Help._interface = Interface['components']['GlobalNav']['partials']['TopNav']['partials']['Help'];
+Help._interface = Interface.components.GlobalNav.partials.TopNav.partials.Help;
+Help._defaults = {
+  title: 'Help'
+};
+Help._partials = {
+  Group,
+  Option
+};
 
-module.exports = Help;
+module.exports = Help;

src/components/global-nav/top-nav/project-account-switcher/_lists/lists.js

@@ -1,6 +0,6 @@
-import './lists.scss';
+const Template = require('./lists.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
-var Template = require('./lists.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const List = require('./_list/_list.js');
 
@@ -14,27 +14,82 @@ /**
 class Lists extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
+    // #TODO: NEED TO REFACTOR, THIS SHOULD LIVE ON THE REACT LAYER
+    this.options = options;
+    this.projectList = false;
+    this.accountList = false;
+    this.projectTitle = false;
+    this.accountTitle = false;
+  }
+
+  _componentDidMount() {
+    if (this.options.accountTitle) {
+      this.setAccountTitle(this.options.accountTitle);
     }
 
-    addProject(newInstance, referenceInstance) {
-        this.mountPartialToComment('PROJECTS', newInstance, referenceInstance);
+    if (this.options.projectTitle) {
+      this.setProjectTitle(this.options.projectTitle);
     }
+  }
 
-    addAccount(newInstance, referenceInstance) {
-        this.mountPartialToComment('ACCOUNTS', newInstance, referenceInstance);
+  addProject(newInstance, referenceInstance) {
+    this._ensureProjectsList();
+    this.projectList.addItem(newInstance, referenceInstance);
+  }
+
+  addAccount(newInstance, referenceInstance) {
+    this._ensureAccountsList();
+    this.accountList.addItem(newInstance, referenceInstance);
+  }
+
+  setProjectTitle(title) {
+    if (this.projectTitle) {
+      this.projectTitle.setTitle(title);
+    } else {
+      this._ensureProjectsList();
+      this.projectTitle = this.projectList.addTitle(title);
     }
+  }
 
+  setAccountTitle(title) {
+    if (this.accountTitle) {
+      this.accountTitle.setTitle(title);
+    } else {
+      this._ensureAccountsList();
+      this.accountTitle = this.accountList.addTitle(title);
+    }
+  }
+
+  _ensureAccountsList() {
+    if (this.accountList) { return; }
+
+    this.accountList = new List();
+    this.mountPartialToComment('ACCOUNTS', this.accountList);
+  }
+
+  _ensureProjectsList() {
+    if (this.projectList) { return; }
+
+    this.projectList = new List();
+    this.mountPartialToComment('PROJECTS', this.projectList);
+  }
 }
 
+// HACKY HACKY HACKY :(
 Lists._interface = {
-    "methods": {
-        "addAccount": {},
-        "addProject": {},
-    }
+  methods: {
+    addAccount: {},
+    addProject: {},
+    setProjectTitle: {},
+    setAccountTitle: {}
+  }
 };
-Lists._defaults = {};
+Lists._defaults = {
+  projectTitle: '',
+  accountTitle: ''
+};
 Lists._partials = {};
 
-module.exports = Lists;
+module.exports = Lists;

src/components/global-nav/top-nav/project-account-switcher/_target/target.js

@@ -1,8 +0,9 @@
-import './target.scss';
+import "./target.scss";
 
-var Template = require('./target.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+var Template = require("./target.html");
+var Interface = require("interface.json");
+var Core = require("_core.js");
 
-var Item = require('../_item/item.js');
+var Item = require("../_item/item.js");
+const Icon = require("../../../../../basics/icon/icon.js");
 
@@ -16,50 +17,72 @@ /**
 class Target extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
+    this.item = new Item(options);
+  }
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
-        this.item = new Item(options);
-    }
+  _componentDidMount() {
+    this.mountPartialToComment("ITEM", this.item);
+    this._setIcon();
+  }
 
-    _componentDidMount() {
-        this.mountPartialToComment('ITEM', this.item);
-        this._findDOMEl('.hig__global-nav__top-nav__project-account-switcher__target__caret', this.el).innerHTML = this._getIconString('caret');
-    }
+  setLabel(label) {
+    this.item.setLabel(label);
+  }
 
-    setLabel(label) {
-        this.item.setLabel(label);
-    }
+  setImage(imageUrl) {
+    this.item.setImage(imageUrl);
+  }
 
-    setImage(imageUrl) {
-        this.item.setImage(imageUrl);
-    }
+  setType(type) {
+    this.item._setType(type);
+  }
 
-    setType(type) {
-        this.item._setType(type);
-    }
+  onClick(fn) {
+    return this._attachListener("click", this.el, this.el, fn);
+  }
 
-    onClick(fn) {
-        return this._attachListener("click", this.el, this.el, fn);
-    }
+  addCaret() {
+    this._findDOMEl(
+      ".hig__global-nav__top-nav__project-account-switcher__target__caret",
+      this.el
+    ).classList.remove(
+      "hig__global-nav__top-nav__project-account-switcher__target__caret--hide"
+    );
+  }
 
-    addCaret(){
-        this._findDOMEl('.hig__global-nav__top-nav__project-account-switcher__target__caret', this.el).classList.remove('hig__global-nav__top-nav__project-account-switcher__target__caret--hide');
-    }
+  removeCaret() {
+    this._findDOMEl(
+      ".hig__global-nav__top-nav__project-account-switcher__target__caret",
+      this.el
+    ).classList.add(
+      "hig__global-nav__top-nav__project-account-switcher__target__caret--hide"
+    );
+  }
 
-    removeCaret(){
-        this._findDOMEl('.hig__global-nav__top-nav__project-account-switcher__target__caret', this.el).classList.add('hig__global-nav__top-nav__project-account-switcher__target__caret--hide');
+  _setIcon(){
+    const mountEl = this._findDOMEl(".hig__global-nav__top-nav__project-account-switcher__target__caret", this.el)
+    this._findOrCreateIconComponent(mountEl).setNameOrSVG("caret");
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = "icon") {
+    if (this[name]) {
+      return this[name];
+    } else {
+      this[name] = new Icon({});
+      this[name].mount(mountElOrSelector);
+      return this[name];
     }
+  }
 }
 
-
-
 Target._interface = {
-    "methods": {
-        "setLabel": {},
-        "setImage": {},
-        "setType": {},
-        "onClick": {},
-        "addCaret": {},
-        "removeCaret": {}
-    }
+  methods: {
+    setLabel: {},
+    setImage: {},
+    setType: {},
+    onClick: {},
+    addCaret: {},
+    removeCaret: {}
+  }
 };
@@ -69,2 +92,2 @@ Target._defaults = {};
 
-module.exports = Target;
+module.exports = Target;

src/components/global-nav/top-nav/project-account-switcher/account/account.js

@@ -17,2 +17,4 @@ var Interface = require('interface.json');
 
+    
+
 }
@@ -19,0 +21,0 @@

src/components/global-nav/top-nav/project-account-switcher/project-account-switcher.js

 import './project-account-switcher.scss';
 
-var Template = require('./project-account-switcher.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+let Template = require('./project-account-switcher.html');
+let Interface = require('interface.json');
+let Core = require('_core.js');
 
-var Button = require('../../../button/button.js');
-var Flyout = require('../../../../basics/flyout/flyout.js');
-var Project = require('./project/project.js');
-var Account = require('./account/account.js');
-var Lists = require('./_lists/lists.js');
-var Target = require('./_target/target.js');
+let Button = require('../../../button/button.js');
+let Flyout = require('../../../../basics/flyout/flyout.js');
+let Project = require('./project/project.js');
+let Account = require('./account/account.js');
+let Lists = require('./_lists/lists.js');
+let Target = require('./_target/target.js');
 
@@ -21,74 +21,92 @@ /**
 class ProjectAccountSwitcher extends Core {
+  constructor(options) {
+    super(options);
 
-    constructor(options){
-        super(options);
+    this.flyout = new Flyout();
+    this.target = new Target({
+      label: options.activeLabel,
+      image: options.activeImage,
+      _type: options.activeType
+    });
+    this.flyoutContent = new Lists({
+      projectTitle: options.projectTitle,
+      accountTitle: options.accountTitle
+    });
 
-        this.flyout = new Flyout();
-        this.target = new Target({
-            label: options.activeLabel,
-            image: options.activeImage,
-            _type: options.activeType
-        });
-        this.flyoutContent = new Lists();
+    this._render(Template, options);
+  }
 
-        this._render(Template, options);
-    }
+  _componentDidMount() {
+    this.mountPartialToComment('FLYOUT', this.flyout);
+    this.flyout.addTarget(this.target);
+    this.flyout.addSlot(this.flyoutContent);
+  }
 
-    _componentDidMount() {
-        this.mountPartialToComment('FLYOUT', this.flyout);
-        this.flyout.addTarget(this.target);
-        this.flyout.addSlot(this.flyoutContent);
-    }
+  addProject(newInstance, referenceInstance) {
+    this.flyoutContent.addProject(newInstance, referenceInstance);
+  }
 
-    addProject(newInstance, referenceInstance) {
-        this.flyoutContent.addProject(newInstance, referenceInstance);
-    }
+  addAccount(newInstance, referenceInstance) {
+    this.flyoutContent.addAccount(newInstance, referenceInstance);
+  }
 
-    addAccount(newInstance, referenceInstance) {
-        this.flyoutContent.addAccount(newInstance, referenceInstance);
-    }
+  onClick(fn) {
+    return this.target.onClick(fn);
+  }
 
-    onClick(fn) {
-        return this.target.onClick(fn);
-    }
+  showCaret() {
+    this.target.addCaret();
+  }
 
-    showCaret() {
-        this.target.addCaret();
-    }
+  hideCaret() {
+    this.target.removeCaret();
+  }
 
-    hideCaret() {
-        this.target.removeCaret();
-    }
+  open() {
+    this.flyout.open();
+  }
 
-    open() { this.flyout.open(); }
+  close() {
+    this.flyout.close();
+  }
 
-    close() { this.flyout.close(); }
+  onClickOutside(fn) {
+    return this.flyout.onClickOutside(fn);
+  }
 
-    onClickOutside(fn) { return this.flyout.onClickOutside(fn); }
+  setActiveLabel(label) {
+    this.target.setLabel(label);
+  }
 
-    setActiveLabel(label) {
-        this.target.setLabel(label);
-    }
+  setActiveImage(imageUrl) {
+    this.target.setImage(imageUrl);
+  }
 
-    setActiveImage(imageUrl) {
-        this.target.setImage(imageUrl);
-    }
+  setActiveType(type) {
+    this.target.setType(type);
+  }
 
-    setActiveType(type) {
-        this.target.setType(type);
-    }
+  setProjectTitle(title) {
+    this.flyoutContent.setProjectTitle(title);
+  }
 
+  setAccountTitle(title) {
+    this.flyoutContent.setAccountTitle(title);
+  }
 }
 
-ProjectAccountSwitcher._interface = Interface['components']['GlobalNav']['partials']['TopNav']['partials']['ProjectAccountSwitcher'];
+ProjectAccountSwitcher._interface =
+  Interface.components.GlobalNav.partials.TopNav.partials.ProjectAccountSwitcher;
 ProjectAccountSwitcher._defaults = {
-    "activeImage": "",
-    "activeLabel": "",
-    "activeType": "project"
+  activeImage: '',
+  activeLabel: '',
+  activeType: 'project',
+  projectTitle: '',
+  accountTitle: ''
 };
 ProjectAccountSwitcher._partials = {
-    Account: Account,
-    Project: Project
+  Account,
+  Project
 };
 
-module.exports = ProjectAccountSwitcher;
+module.exports = ProjectAccountSwitcher;

src/components/global-nav/top-nav/project-account-switcher/project/project.js

@@ -16,3 +16,2 @@ var Interface = require('interface.json');
     }
-
 }
@@ -19,0 +18,0 @@

src/components/global-nav/top-nav/search/search.js

 import './search.scss';
 
-var Template = require('./search.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./search.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
+const Icon = require('../../../../basics/icon/icon.js');
 
@@ -14,49 +15,107 @@ /**
 class Search extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
+  }
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
-    }
+  _componentDidMount() {
+    this._setIcons();
+  }
 
-    setPlaceholder(placeholder){
-        this._findDOMEl(".hig__global-nav__top-nav__search__inputholder__input", this.el).setAttribute('placeholder', placeholder);
-    }
+  setPlaceholder(placeholder) {
+    this._findDOMEl(
+      '.hig__global-nav__top-nav__search__input',
+      this.el
+    ).setAttribute('placeholder', placeholder);
+  }
 
-    setQuery(query){
-        this._findDOMEl(".hig__global-nav__top-nav__search__inputholder__input", this.el).value = query;
-    }
+  setQuery(query) {
+    this._findDOMEl(
+      '.hig__global-nav__top-nav__search__input',
+      this.el
+    ).value = query;
+  }
 
-    showClearIcon(){
-        this._findDOMEl(".hig__global-nav__top-nav__search__clear", this.el).classList.add("hig__global-nav__top-nav__search__clear--show");
-    }
+  showClearIcon() {
+    this._findDOMEl(
+      '.hig__global-nav__top-nav__search__clear',
+      this.el
+    ).classList.add('hig__global-nav__top-nav__search__clear--show');
+  }
 
-    hideClearIcon(){
-        this._findDOMEl(".hig__global-nav__top-nav__search__clear", this.el).classList.remove("hig__global-nav__top-nav__search__clear--show");
-    }
+  hideClearIcon() {
+    this._findDOMEl(
+      '.hig__global-nav__top-nav__search__clear',
+      this.el
+    ).classList.remove('hig__global-nav__top-nav__search__clear--show');
+  }
 
-    onClearIconClick(fn){
-        return this._attachListener("click", '.hig__global-nav__top-nav__search__clear', this.el, fn);
-    }
+  onClearIconClick(fn) {
+    return this._attachListener(
+      'click',
+      '.hig__global-nav__top-nav__search__clear',
+      this.el,
+      fn
+    );
+  }
 
-    onInput(fn){
-        return this._attachListener("input", '.hig__global-nav__top-nav__search__inputholder__input', this.el, fn);
-    }
+  onInput(fn) {
+    return this._attachListener(
+      'input',
+      '.hig__global-nav__top-nav__search__input',
+      this.el,
+      fn
+    );
+  }
 
-    onFocusIn(fn){
-        return this._attachListener("focusin", '.hig__global-nav__top-nav__search__inputholder__input', this.el, fn);
-    }
+  onFocusIn(fn) {
+    return this._attachListener(
+      'focusin',
+      '.hig__global-nav__top-nav__search__input',
+      this.el,
+      fn
+    );
+  }
 
-    onFocusOut(fn){
-        return this._attachListener("focusout", '.hig__global-nav__top-nav__search__inputholder__input', this.el, fn);
+  onFocusOut(fn) {
+    return this._attachListener(
+      'focusout',
+      '.hig__global-nav__top-nav__search__input',
+      this.el,
+      fn
+    );
+  }
+
+  _setIcons() {
+    const mountSearchIcon = this._findDOMEl(
+      '.hig__global-nav__top-nav__search__icon',
+      this.el
+    );
+    this._findOrCreateIconComponent(mountSearchIcon, 'search').setNameOrSVG('search');
+
+    const mountClearIcon = this._findDOMEl(
+      '.hig__global-nav__top-nav__search__clear',
+      this.el
+    );
+    this._findOrCreateIconComponent(mountClearIcon, 'clear').setNameOrSVG('close-small');
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = 'icon') {
+    if (this[name]) {
+      return this[name];
     }
-
+    this[name] = new Icon({});
+    this[name].mount(mountElOrSelector);
+    return this[name];
+  }
 }
 
-Search._interface = Interface['components']['GlobalNav']['partials']['TopNav']['partials']['Search'];
+Search._interface =
+  Interface.components.GlobalNav.partials.TopNav.partials.Search;
 Search._defaults = {
-    "query": "",
-    "placeholder": "Search"
+  query: '',
+  placeholder: 'Search'
 };
 Search._partials = {};
 
-module.exports = Search;
+module.exports = Search;

src/components/global-nav/top-nav/shortcut/shortcut.js

 import './shortcut.scss';
 
-var Template = require('./shortcut.html');
-var Interface = require('interface.json');
-var Core = require('_core.js');
+const Template = require('./shortcut.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
+const Icon = require('../../../../basics/icon/icon.js');
 
@@ -14,34 +15,48 @@ /**
 class Shortcut extends Core {
+  constructor(options) {
+    super(options);
+    this._render(Template, options);
+    this.initialOptions = options;
+  }
 
-    constructor(options){
-        super(options);
-        this._render(Template, options);
+  _componentDidMount() {
+    if (this.initialOptions.icon) {
+      this.setIcon(this.initialOptions.icon);
     }
+  }
 
-    onClick(fn){
-        return this._attachListener("click", this.el, this.el, fn);
-    }
+  onClick(fn) {
+    return this._attachListener('click', this.el, this.el, fn);
+  }
 
-    setIcon(icon){
-        this._findDOMEl(".hig__global-nav__top-nav__shortcut__link__icon", this.el).innerHTML = this._getIconString(icon);
-    }
+  setIcon(icon) {
+    this._findOrCreateIconComponent(this.el).setNameOrSVG(icon);
+  }
 
-    setTitle(title){
-        this.el.textContent = title;
-        this.el.setAttribute("title", title);
-    }
+  setTitle(title) {
+    this.el.setAttribute('title', title);
+  }
 
-    setLink(link){
-        this.el.setAttribute("href", link);
+  setLink(link) {
+    this.el.setAttribute('href', link);
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = 'icon') {
+    if (this[name]) {
+      return this[name];
     }
-
+    this[name] = new Icon({});
+    this[name].mount(mountElOrSelector);
+    return this[name];
+  }
 }
 
-Shortcut._interface = Interface['components']['GlobalNav']['partials']['TopNav']['partials']['Shortcut'];
+Shortcut._interface =
+  Interface.components.GlobalNav.partials.TopNav.partials.Shortcut;
 Shortcut._defaults = {
-    icon: "",
-    title: "",
-    link: "#"
+  icon: '',
+  title: '',
+  link: '#'
 };
 
-module.exports = Shortcut;
+module.exports = Shortcut;

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

@@ -12,2 +12,3 @@ import './top-nav.scss';
 const Search = require('./search/search.js');
+const Icon = require('../../../basics/icon/icon.js');
 
@@ -26,16 +27,30 @@ /**
 
+  _componentDidMount() {
+    this._setIcons();
+  }
+
   onHamburgerClick(fn) {
-    return this._attachListener('click', '.hig__global-nav__top-nav__hamburger', this.el, fn);
+    return this._attachListener(
+      'click',
+      '.hig__global-nav__top-nav__hamburger',
+      this.el,
+      fn
+    );
   }
 
   onLogoClick(fn) {
-    return this._attachListener('click', '.hig__global-nav__top-nav__logo > a', this.el, fn);
+    return this._attachListener(
+      'click',
+      '.hig__global-nav__top-nav__logo',
+      this.el,
+      fn
+    );
   }
 
   setLogo(logo) {
-    this._setLogoAttributeForTag('img', 'src', logo);
+    this._findDOMEl('.hig__global-nav__top-nav__logo img', this.el).setAttribute('src', logo);
   }
 
   setLogoLink(link) {
-    this._setLogoAttributeForTag('a', 'href', link);
+    this._findDOMEl('.hig__global-nav__top-nav__logo', this.el).setAttribute('href', link);
   }
@@ -63,3 +78,8 @@
     if (instance instanceof Shortcut) {
-      this.mountPartialToComment('SHORTCUT', instance, referenceInstance);
+      const shortcutContainer = this._findOrAddElement(
+        'SHORTCUT',
+        'div',
+        '.hig__global-nav__top-nav__item.hig__global-nav__top-nav__spacer-container'
+      );
+      instance.mount(shortcutContainer, referenceInstance);
     }
@@ -70,17 +90,26 @@ }
     if (instance instanceof Help) {
-      this.mountPartialToComment('SHORTCUT', instance, referenceInstance);
+      const helpContainer = this._findOrAddElement(
+        'SHORTCUT',
+        'div',
+        '.hig__global-nav__top-nav__item.hig__global-nav__top-nav__spacer-container'
+      );
+      instance.mount(helpContainer, referenceInstance);
     }
   }
 
-  sidenavOpen() {
-    this._findDOMEl('.hig__global-nav__top-nav__hamburger', this.el).classList.add('hig__global-nav__top-nav__hamburger--menuopen');
-  }
+  _setIcons() {
+    const mountHamburgerIcon = this._findDOMEl('.hig__global-nav__top-nav__hamburger__hamburgericon', this.el);
+    this._findOrCreateIconComponent(mountHamburgerIcon, 'hamburger').setNameOrSVG('hamburger');
 
-  sidenavClosed() {
-    this._findDOMEl('.hig__global-nav__top-nav__hamburger', this.el).classList.remove('hig__global-nav__top-nav__hamburger--menuopen');
+    const mountCloseIcon = this._findDOMEl('.hig__global-nav__top-nav__hamburger__closeicon', this.el);
+    this._findOrCreateIconComponent(mountCloseIcon, 'close-hamburger').setNameOrSVG('close-hamburger');
   }
 
-  _setLogoAttributeForTag(tag, attr, val) {
-    const scope = this._findDOMEl('.hig__global-nav__top-nav__logo', this.el);
-    this._findDOMEl(tag, scope).setAttribute(attr, val);
+  _findOrCreateIconComponent(mountElOrSelector, name = 'icon') {
+    if (this[name]) {
+      return this[name];
+    }
+    this[name] = new Icon({});
+    this[name].mount(mountElOrSelector);
+    return this[name];
   }
@@ -87,0 +116,0 @@ }

src/components/icon-button/icon-button.js

@@ -6,3 +6,5 @@ import './icon-button.scss';
 const Core = require('_core.js');
+const Icon = require("../../basics/icon/icon.js");
 
+
 /**
@@ -18,4 +20,12 @@ * Creates an icon button
     this._render(Template, options);
+    this.initialOptions = options
   }
 
+  _componentDidMount(){
+    if (this.initialOptions.icon) {
+      this.setIcon(this.initialOptions.icon);
+    }
+  }
+  
+
   setTitle(title) {
@@ -30,3 +40,4 @@ this.el.setAttribute('title', title);
   setIcon(icon) {
-    this._findDOMEl('.hig__icon-button__icon', this.el).innerHTML = this._renderIcon(icon);
+    const mountEl = this._findDOMEl('.hig__icon-button__icon', this.el)
+    this._findOrCreateIconComponent(mountEl).setNameOrSVG(icon);
   }
@@ -59,2 +70,13 @@
   }
+
+  _findOrCreateIconComponent(mountElOrSelector, name='icon') {
+    if (this[name]) {
+        return this[name];
+    } else {
+        this[name] = new Icon({});
+        this[name].mount(mountElOrSelector);
+        return this[name];
+    }
+  }
+  
 }
@@ -61,0 +83,0 @@

src/components/modal/modal.js

@@ -7,4 +7,5 @@ import './modal.scss';
 const Button = require('../button/button');
+const Icon = require('../../basics/icon/icon.js');
 
-const AvailableHeaderColors = ['white', 'slate', 'gray'];
+const AvailableStyles = ['standard', 'alternate'];
 
@@ -23,2 +24,39 @@ /**
 
+  _componentDidMount() {
+    const scrollingElement = this._findDOMEl('.hig__modal__slot', this.el);
+    this._attachListener('scroll', scrollingElement, scrollingElement, event =>
+      this._handleIsScrolling(event.target)
+    );
+    this._setIcon();
+  }
+
+  _handleIsScrolling(scrollingElement) {
+    const windowElement = this._findDOMEl('.hig__modal__window', this.el);
+    if (scrollingElement.scrollTop > 0) {
+      windowElement.classList.add('hig__modal__window--is-scrolling');
+    } else {
+      windowElement.classList.remove('hig__modal__window--is-scrolling');
+    }
+  }
+
+  _handleHasScrolling() {
+    const windowElement = this._findDOMEl('.hig__modal__window', this.el);
+    if (this._hasScrolling()) {
+      windowElement.classList.add('hig__modal__window--has-scrolling');
+    } else {
+      windowElement.classList.remove('hig__modal__window--has-scrolling');
+    }
+  }
+
+  _hasScrolling() {
+    const scrollingElement = this._findDOMEl('.hig__modal__slot', this.el);
+    return scrollingElement.scrollHeight > scrollingElement.clientHeight;
+  }
+
+  _setScrollTop(scrollTop) {
+    const scrollingElement = this._findDOMEl('.hig__modal__slot', this.el);
+    scrollingElement.scrollTop = scrollTop;
+    this._handleIsScrolling(scrollingElement);
+  }
+
   addButton(instance) {
@@ -36,2 +74,3 @@ if (instance instanceof Button) {
     this.el.classList.remove('hig__modal--open');
+    this.el.classList.add('hig__modal--close');
   }
@@ -64,3 +103,5 @@
   open() {
+    this.el.classList.remove('hig__modal--close');
     this.el.classList.add('hig__modal--open');
+    this._handleHasScrolling();
   }
@@ -70,17 +111,18 @@
     this._findDOMEl('.hig__modal__slot', this.el).textContent = body;
+    this._handleHasScrolling();
   }
 
-  setHeaderColor(headerColor) {
-    if (!AvailableHeaderColors.includes(headerColor)) {
+  setStyle(style) {
+    if (!AvailableStyles.includes(style)) {
       console.error(
-        `Modal cannot have header color "${headerColor}". Only these colors are allowed: `,
-        AvailableHeaderColors
+        `Modal cannot have style "${style}". Only these styles are allowed: `,
+        AvailableStyles
       );
       return;
     }
-    const headerEl = this._findDOMEl('.hig__modal__header', this.el);
-    headerEl.classList.remove(
-      ...AvailableHeaderColors.map(c => `hig__modal__header--${c}`)
+    const windowEl = this._findDOMEl('.hig__modal__window', this.el);
+    windowEl.classList.remove(
+      ...AvailableStyles.map(s => `hig__modal__window--${s}`)
     );
-    headerEl.classList.add(`hig__modal__header--${headerColor}`);
+    windowEl.classList.add(`hig__modal__window--${style}`);
   }
@@ -97,2 +139,16 @@
   }
+
+  _setIcon() {
+    const mountedEl = this._findDOMEl('.hig__modal__close-button', this.el);
+    this._findOrCreateIconComponent(mountedEl).setNameOrSVG('x-close-gray');
+  }
+
+  _findOrCreateIconComponent(mountElOrSelector, name = 'icon') {
+    if (this[name]) {
+      return this[name];
+    }
+    this[name] = new Icon({});
+    this[name].mount(mountElOrSelector);
+    return this[name];
+  }
 }
@@ -103,3 +159,3 @@
   body: '',
-  headerColor: 'white',
+  style: 'standard',
   title: ''
@@ -109,2 +165,4 @@ };
 
+Modal.AvailableStyles = AvailableStyles;
+
 module.exports = Modal;

src/components/table/table-head/slot-head-cell/slot-head-cell.js

@@ -0,1 +1,3 @@
+import "./slot-head-cell.scss";
+
 var Template = require("./slot-head-cell.html");
@@ -2,0 +4,0 @@ var Interface = require("interface.json");

src/components/table/table-head/text-head-cell/text-head-cell.js

@@ -1,10 +0,10 @@
-import "./text-head-cell.scss";
+import './text-head-cell.scss';
 
-var Template = require("./text-head-cell.html");
-var Interface = require("interface.json");
-var Core = require("_core.js");
+const Template = require('./text-head-cell.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
-var frToPercentage  =  require("../../../../helpers/js/_frtopercentage.js");
+const frToPercentage = require('../../../../helpers/js/_frtopercentage.js');
 
-var AvailablePositions = ["left", "right", "center"];
+const AvailableAlignments = ['left', 'right', 'center'];
 
@@ -21,8 +21,8 @@
     super(options);
-    this._render(Template, options, undefined, "tr");
+    this._render(Template, options, undefined, 'tr');
     this.initialOptions = options;
   }
 
-  _componentDidMount(){
-    if(this.initialOptions.width){
+  _componentDidMount() {
+    if (this.initialOptions.width) {
       this.setWidth(this.initialOptions.width);
@@ -32,13 +32,13 @@ }
 
-  setText(text){
+  setText(text) {
     this.el.textContent = text;
   }
 
-  setAlignment(position){
-    if(AvailablePositions.indexOf(position) > -1) {
-      this.el.style.textAlign = position
-    };
+  setAlignment(alignment) {
+    if (AvailableAlignments.indexOf(alignment) > -1) {
+      this.el.style.textAlign = alignment;
+    }
   }
 
-  setWidth(width){
+  setWidth(width) {
     this.el.style.width = frToPercentage(width);
@@ -49,9 +49,10 @@ }
 TextHeadCell._interface =
-  Interface["components"]["Table"]["partials"]["TableHead"]["partials"]["TextHeadCell"];
+  Interface.components.Table.partials.TableHead.partials.TextHeadCell;
 TextHeadCell._defaults = {
-  text: "",
-  alignment: "",
-  width: "1fr"
+  text: '',
+  alignment: '',
+  width: '1fr'
 };
+TextHeadCell.AvailableAlignments = AvailableAlignments;
 
 module.exports = TextHeadCell;

src/components/table/table-row/icon-cell/icon-cell.js

@@ -6,3 +6,5 @@ import "./icon-cell.scss";
 var Core = require("_core.js");
+const Icon = require("../../../../basics/icon/icon.js");
 
+
 /**
@@ -21,3 +23,3 @@ * Creates an Table
 
-  _componentDidMount(){
+  _componentDidMount() {
     if (this.initialOptions.icon) {
@@ -30,5 +32,15 @@ this.setIcon(this.initialOptions.icon);
     if (icon && icon.length > 0) {
-      this._el.innerHTML = this._getIconString(icon);
+      this._findOrCreateIconComponent(this._el).setNameOrSVG(icon);
     }
   }
+
+  _findOrCreateIconComponent(mountElOrSelector, name='icon') {
+    if (this[name]) {
+        return this[name];
+    } else {
+        this[name] = new Icon({});
+        this[name].mount(mountElOrSelector);
+        return this[name];
+    }
+  }
 }
@@ -35,0 +47,0 @@

src/components/table/table-row/slot-cell/slot-cell.js

@@ -1,3 +0,1 @@
-import "./slot-cell.scss";
-
 var Template = require("./slot-cell.html");
@@ -4,0 +2,0 @@ var Interface = require("interface.json");

src/components/table/table-row/table-row.js

@@ -1,10 +0,10 @@
-import "./table-row.scss";
+import './table-row.scss';
 
-var Template = require("./table-row.html");
-var Interface = require("interface.json");
-var Core = require("_core.js");
+const Template = require('./table-row.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
-var TextCell = require("./text-cell/text-cell.js");
-var SlotCell = require("./slot-cell/slot-cell.js");
-var IconCell = require("./icon-cell/icon-cell.js");
+const TextCell = require('./text-cell/text-cell.js');
+const SlotCell = require('./slot-cell/slot-cell.js');
+const IconCell = require('./icon-cell/icon-cell.js');
 
@@ -20,3 +20,3 @@ /**
     super(options);
-    this._render(Template, options, undefined, "tbody");
+    this._render(Template, options, undefined, 'tbody');
   }
@@ -30,15 +30,23 @@
     ) {
-      this.mountPartialToComment("BODY-CELL", cellInstance);
+      this.mountPartialToComment('BODY-CELL', cellInstance);
     }
   }
+
+  select() {
+    this.el.classList.add('hig__table__row--selected');
+  }
+
+  deselect() {
+    this.el.classList.remove('hig__table__row--selected');
+  }
 }
 
-TableRow._interface = Interface["components"]["Table"]["partials"]["TableRow"];
+TableRow._interface = Interface.components.Table.partials.TableRow;
 TableRow._defaults = {};
 TableRow._partials = {
-  TextCell: TextCell,
-  SlotCell: SlotCell,
-  IconCell: IconCell
+  TextCell,
+  SlotCell,
+  IconCell
 };
 
 module.exports = TableRow;

src/components/table/table-row/text-cell/text-cell.js

@@ -1,31 +0,38 @@
-import './text-cell.scss'
-var Template = require("./text-cell.html");
-var Interface = require("interface.json");
-var Core = require("_core.js");
+import './text-cell.scss';
 
-var AvailablePositions = ["left", "right", "center"];
+const Template = require('./text-cell.html');
+const Interface = require('interface.json');
+const Core = require('_core.js');
 
-/**
- * Creates an Table
- *
- * @class
- */
+const TextCellContent = require('../text-cell-content/text-cell-content.js');
 
+const AvailableAlignments = ['left', 'right', 'center'];
+
 class TextCell extends Core {
   constructor(options = {}) {
     super(options);
-    this._render(Template, options, undefined, "tr");
+    this._render(Template, options, undefined, 'tr');
+    this.initialOptions = options;
   }
 
+  _componentDidMount() {
+    this.textCellContent = new TextCellContent(this.initialOptions);
+    this.mountPartialToComment('TEXT-CELL-CONTENT', this.textCellContent);
+  }
+
   setText(text) {
-    this._findDOMEl(".hig__table__text-cell-text", this.el).textContent = text;
+    if (this.textCellContent) {
+      this.textCellContent.setText(text);
+    }
   }
 
   setDetail(detail) {
-    this._findDOMEl(".hig__table__text-cell-detail", this.el).textContent = detail;
+    if (this.textCellContent) {
+      this.textCellContent.setDetail(detail);
+    }
   }
 
   setAlignment(position) {
-    if (AvailablePositions.indexOf(position) > -1) {
-      this.el.style.textAlign = position;
+    if (this.textCellContent) {
+      this.textCellContent.setAlignment(position);
     }
@@ -36,12 +43,8 @@ }
 TextCell._interface =
-  Interface["components"]["Table"]["partials"]["TableRow"]["partials"][
-    "TextCell"
-  ];
-TextCell._defaults = {
-  "text": "",
-  "alignment": "",
-  "detail": ""
-};
+  Interface.components.Table.partials.TableRow.partials.TextCell;
 
+TextCell._defaults = {};
+TextCell._partials = {};
+TextCell.AvailableAlignments = AvailableAlignments;
+
 module.exports = TextCell;
-  

src/components/table/table.js

@@ -57,2 +57,4 @@ import "./table.scss";
 
+Table.AvailableDensities = AvailableDensities;
+
 module.exports = Table;

src/helpers/js/_core.js

@@ -92,10 +92,2 @@ var Icons = require('../../basics/icons/icons.js');
 
-            // ICON MIXIN
-            data.renderIcon = () => {
-                return (text, render) => {
-                var iconName = Mustache.render(text, data);
-                return this._renderIcon(iconName);
-                };
-            };
-
             elWrapper.innerHTML = Mustache.render(
@@ -113,11 +105,2 @@ template,
 
-    _renderIcon(icon){
-        const iconString =  Icons[icon];
-        if (!iconString) {
-            console.warn("NO HIG ICON FOUND WITH THE NAME: "+ iconString);
-            return;
-        }
-        return "<div class='hig__icon'>" + iconString + "</div>";
-    }
-
     _componentDidMount() {
@@ -204,32 +187,38 @@ // Subclass should implement this if needed
      * Attach a document event listener
-     * @param {String} eventType - event type, for example "click"
+     * @param {String} eventTypes - event types, for example "click", supports multiple events, seperated by space, ex: "click touchstart"
      * @param {String} targetClass - query selector for target class
      * @param {HTMLElement} scopeElement - element that defines the scope in which this takes place
      * @param {Function} executeOnEventFunction - function that will be executed on event
-     * @returns {Function} disposeFunction - function to call to remove event listener
+     * @returns {Function} disposeFunction - function to call to remove event listener, note: only returns dispose function when single eventType has been requested
      */
 
-    _attachListener(eventType, targetClass, scopeElement, executeOnEventFunction ){
+    _attachListener(eventTypes, targetClass, scopeElement, executeOnEventFunction ){
+      function childOf(/*child node*/c, /*parent node*/p){ //returns boolean
+        while( (c=c.parentNode) && c!==p );
+        return !!c;
+      }
 
-        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 events = eventTypes.split(' ');
+      for (var i=0; i<events.length; i++) {
+        var eventType = events[i];
+
+        if (eventType == 'hover') {
+          eventType = 'mouseenter';
         }
 
-        var q = this._findDOMEl(targetClass, scopeElement);
-        var eventTarget, eventFn;
+        if (eventType == 'mouseenter' || eventType == 'scroll') {
+          eventFn = executeOnEventFunction;
+          eventTarget = q;
+        } else {
+          eventFn = (event) => {
+            var element = event.target;
 
-        if(eventType == 'hover' || eventType == 'mouseenter'){
-            eventFn = executeOnEventFunction;
-            eventTarget = q;
-            eventType = 'mouseenter';
-        }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;
         }
@@ -239,7 +228,11 @@
 
-        var dispose = function(){
+        if(events.length === 1){
+          var dispose = function(){
             eventTarget.removeEventListener(eventType, eventFn);
-        };
+          };
 
-        return dispose;
+          return dispose;
+        }
+      }
+
     }
@@ -306,8 +299,4 @@
      * @returns {String} String with SVG of the icon
-     */
+     
 
-    _getIconString(icon){
-        return Icons[icon];
-    }
-
     /**
@@ -314,0 +303,0 @@ * Returns valid interface methods

src/helpers/js/polyfills.js

@@ -78,2 +78,14 @@ // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
   });
-}
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
+if (!Object.entries) {
+  Object.entries = function (obj) {
+    let ownProps = Object.keys(obj),
+      i = ownProps.length,
+      resArray = new Array(i); // preallocate the Array
+    while (i--) { resArray[i] = [ownProps[i], obj[ownProps[i]]]; }
+
+    return resArray;
+  };
+}

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');
@@ -10,2 +13,3 @@ Hig.Dropdown = require('./basics/form-elements/dropdown/dropdown.js');
 Hig.IconButton = require('./components/icon-button/icon-button.js');
+Hig.Icon = require('./basics/icon/icon.js');
 Hig.Icons = require('./basics/icons/icons.js');
@@ -18,3 +22,5 @@ Hig.InputButton = require('./basics/form-elements/input-button/input-button.js');
 Hig.Range = require('./basics/form-elements/range/range.js');
-Hig.Table = require('./components/table/table.js')
+Hig.RichText = require('./basics/rich-text/rich-text.js');
+Hig.Table = require('./components/table/table.js');
+Hig.TextCellContent = require('./components/table/table-row/text-cell-content/text-cell-content.js')
 Hig.TextArea = require('./basics/form-elements/text-area/text-area.js');
@@ -25,4 +31,7 @@ Hig.TextField = require('./basics/form-elements/text-field/text-field.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.sizes = Hig.Spacer.SizeMap;
+
 module.exports = Hig;

webpack.config.js

@@ -5,7 +5,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
-r = {
+var r = {
     entry: './src/index.js',
     output: {
         filename: 'hig.js',
-        path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, 'lib'),
         library: 'Hig',
@@ -26,3 +26,3 @@ libraryTarget: 'umd'
             },
-            exclude: [/node_modules/, /orion-ui\/packages\/hig\.web\/dist/]
+            exclude: [/node_modules/]
         },{
@@ -44,3 +44,3 @@ test: /\.scss$/,
             "components": path.resolve(__dirname, "src", "components"),
-            "interface.json": path.resolve( __dirname, '../../interface/interface.json' ),
+            "interface.json": "hig-interface",
             "_core.js": path.resolve( __dirname, 'src/helpers/js/_core.js' )
@@ -47,0 +47,0 @@ },

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

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9265479

increased by4.91%

Number of package files

733

increased by32.07%

Lines of code

11358

increased by141.92%

Number of lines in readme file

64

increased by1.59%

Number of high supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedhig-interface@^0.1.1

• + Addedhig-interface@0.1.19(transitive)