Adding proposed theme with new themeable dropdowns

package.json

@@ -65,4 +65,4 @@
     "webpack-merge": "^4.1.4",
     "webpack-s3-plugin": "^1.0.2"
   }
-}
+}

src/components/dropdown/dropdown.css

@@ -0,0 +1,151 @@
+
+:host {
+  --primary-color: #41a6ef;
+  --secondary-color: #fff;
+  --drop-background: var(--dropdown-color, var(--primary-color));
+  --drop-border:  var(--dropdown-border-color, var(--primary-color));
+  --drop-text-color: var(--dropdown-text-color, var(--secondary-color));
+  --drop-text-size:  var(--dropdown-text-size, 1rem);
+  --drop-text-hover-color: var(--dropdown-text-hover-color, var(--secondary-color));
+  --drop-text-expanded-color: var(--dropdown-text-expanded-color, var(--primary-color));
+  --drop-text-background-hover: var(--dropdown-text-background-hover, var(--primary-color));
+  --drop-timing: var(--global--dropdown-timing, .3s);
+
+    height: 2em;
+    position: relative;
+    display: block;
+
+  & .dropdown-el {
+    min-width: 12em;
+    position: relative;
+    display: inline-block;
+    margin-right: 1em;
+    min-height: 2em;
+    max-height:2em;
+    overflow:hidden;
+    font-size: var(--drop-text-size);
+    top: .5em;
+    cursor: pointer;
+    text-align: left;
+    white-space: nowrap;
+    color: var(--drop-text-color);
+
+    outline: none;
+    border: .06em solid transparent;
+    border-radius: 1em;
+    background-color: var(--drop-background);
+
+    transition: var(--drop-timing) all ease-in-out;
+    & input {
+      display:none;
+    }
+    & label {
+      border-top: .06em solid #d9d9d9;
+      display:block;
+      height: 2em;
+      line-height: 2em;
+      padding-left: 1em;
+      padding-right: 3em;
+      cursor: pointer;
+      position: relative;
+      &:nth-child(2) {
+        margin-top: 2em;
+        border-top: .06em solid #d9d9d9;
+      }
+    }
+    /* Display default option first, if not selected/expanded */
+    & #option_def + label {
+      display:block;
+      border-top: none;
+      position: absolute;
+      top: 0;
+
+      &:nth-child(2) {
+        margin-top: 0;
+        position: relative;
+      }
+    }
+    /* If selection made, don't display default, display selected */
+    &.selection {
+      & input + label {
+        margin-top: 2em;
+      }
+
+      & #option_def + label {
+        display:none;
+      }
+
+      & input:checked + label {
+        display:block;
+        border-top: none;
+        position: absolute;
+        top: 0;
+        margin-top: 0;
+      }
+    }
+    /* If selection made & expanded, don't display default, display selected */
+    &.selection.expanded {
+      & input + label {
+        margin-top: 0;
+      }
+      & input:checked + label {
+        display:block;
+        border-top: .06em solid #d9d9d9;
+        position: unset;
+        top: unset;
+      }
+    }
+    &::after {
+      content:"";
+      position: absolute;
+      right: 0.8em;
+      top: 0.9em;
+      border: .3em solid var(--drop-text-color);
+      border-color: var(--drop-text-color) transparent transparent transparent;
+      transition: .4s all ease-in-out;
+    }
+
+    &.expanded {
+      border: .06em solid var(--drop-border);
+      background: #fff;
+      border-radius: .25em;
+      padding: 0;
+      box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
+      max-height:15em;
+      overflow: overlay;
+      z-index: 100;
+
+      & label {
+        border-top: .06em solid #d9d9d9;
+        color:var(--drop-text-expanded-color);
+        &:hover {
+          color:var(--drop-text-hover-color) !important;
+          background-color: var( --drop-text-background-hover) !important;
+        }
+      }
+      & input:checked + label {
+        color:var(--drop-background);
+        font-weight:600;
+      }
+
+      &::after {
+        transform: rotate(-180deg);
+        top:.55em;
+        border: .3em solid var(--drop-text-expanded-color);
+        border-color: var(--drop-text-expanded-color) transparent transparent transparent;
+      }
+      /* If expanded, display default at top of list */
+      & #option_def + label {
+        display:block !important;
+        border-top: none;
+        position: absolute;
+        top: 0;
+
+        &:nth-child(2) {
+          margin-top: 0 !important;
+          position: relative;
+        }
+      }
+    }
+  }
+}

src/components/dropdown/dropdown.js

@@ -1,41 +1,104 @@
-import { html, LitElement } from '@polymer/lit-element'; 
+import { html, LitElement } from '@polymer/lit-element';
+import css from './dropdown.css';
 
 class DropdownComponent extends LitElement {
-
   static get properties() {
     return {
-      optionSelectedCallback: {
-        type: Function
-      },
       label: {
         type: String
       },
       options: {
         type: Array
+      },
+      selected: {
+        type: String
       }
     };
   }
 
-  /* eslint-disable indent */
+  handleEvent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    let selected = '';
+
+    if (e.target.htmlFor) {
+      selected = e.target.parentNode;
+      if (e.target.htmlFor !== 'option_def') {
+        this.setSelected(this.shadowRoot.querySelector('#' + e.target.htmlFor).value);
+        selected.classList.add('selection');
+      }
+    } else {
+      selected = e.target;
+    }
+    this.handleDropdown(selected);
+    selected.classList.toggle('expanded');
+  }
+
+  setSelected(selected) {
+    let idx = this.options.findIndex(({ value }) => {
+      return value === selected;
+    });
+
+    let previousCheck = this.options.findIndex(({ checked }) => {
+      return checked;
+    });
+
+    if (previousCheck > -1) {
+      this.options[previousCheck].checked = false;
+    }
+
+    if (idx > -1) {
+      this.options[idx].checked = true;
+      this.selected = this.options[idx].value;
+      this.optionSelectedCallback(this.selected, idx);
+    }
+    this.dropdown.scrollTop = 0;
+  }
+
+  handleDropdown(drop) {
+    this.dropdown = drop;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.addEventListener('click', this.handleEvent.bind(this), true);
+    window.addEventListener('click', this.close.bind(this), false);
+  }
+
+  disconnectedCallback() {
+    this.shadowRoot.removeEventListener('click', this.handleEvent.bind(this), true);
+    window.removeEventListener('click', this.close.bind(this), false);
+  }
+
+  close() {
+    if (this.dropdown) {
+      this.dropdown.classList.remove('expanded');
+    }
+  }
+
+  renderItems(items, label) {
+    const renderOption = (label, value, checked, id) => html`<input type="checkbox" name="option_drop" ?checked=${checked} value=${value} id=${id}><label for=${id}>${label}</label>`;
+
+    if (typeof label === 'undefined' && items) {
+      return items.map(({ label, value, checked }, idx) => {
+        return renderOption(label, value, checked, `option_${idx}`);
+      });
+    }
+    return renderOption(label, '', false, 'option_def');
+  }
+
   render() {
-    let { options, label, optionSelectedCallback } = this;
-
-    if (!options) {
-      options = [];
-    } 
-
+    let { options, label } = this;
+
     return html`
-      <select @change="${optionSelectedCallback}">
-        <option value="">${label}</option>
-
-        ${options.map((option) => {
-            return html`<option value="${option.value}">${option.label}</option>`;
-          })
-        }                        
-      </select>
+    <style>
+      ${css}
+    </style>
+      <span class="dropdown-el">
+        ${this.renderItems(options, label)}
+        ${this.renderItems(options)}
+      </span>
     `;
   }
-  /* eslint-enable indent */
 }
 
 customElements.define('cc-dropdown', DropdownComponent);