@ucd-lib/theme-elements 3.0.5 → 3.1.1

package/brand/ucd-theme-quick-links/ucd-theme-quick-links.js

@@ -17,6 +17,8 @@ import { MutationObserverController, WaitController } from '../../utils/controll
  * @property {Boolean} opened - Menu is open
  * @property {Number} animationDuration - Length of animation when opening/closing menu
  * @property {Boolean} useIcon - Show a custom icon next to the title
+ * @property {String} href - URL to navigate to when the button is clicked. Disables dropdown.
+ * @property {Boolean} disableDropdown - Disables dropdown functionality. Fires btn-click event instead.
  */
 export default class UcdThemeQuickLinks extends LitElement {
 
@@ -27,6 +29,8 @@ export default class UcdThemeQuickLinks extends LitElement {
       opened: {type: Boolean},
       animationDuration: {type: Number, attribute: "animation-duration"},
       useIcon: {type: Boolean, attribute: "use-icon"},
+      href: {type: String},
+      disableDropdown: {type: Boolean, attribute: "disable-dropdown"},
       _links: {type: Array, state: true},
       _hasCustomIcons: {type: Boolean, state: true},
       _transitioning: {type: Boolean, state: true},
@@ -143,6 +147,13 @@ export default class UcdThemeQuickLinks extends LitElement {
    * @description Attached to menu open/close button
    */
   async _onBtnClick(){
+    if ( this.href ){
+      window.location.href = this.href;
+      return;
+    } else if ( this.disableDropdown ) {
+      this.dispatchEvent(new CustomEvent('btn-click'));
+      return;
+    }
     let didToggle;
     if ( this.opened ) {
       didToggle = await this.close();

package/brand/ucd-theme-quick-links/ucd-theme-quick-links.tpl.js

@@ -62,22 +62,23 @@ export function styles() {
         padding: 0px;
         border: 0px;
         border-radius: 50%;
-        background-color: #ffbf00;
+        background-color: var(--ucd-theme-quick-links-icon-bg-color, #ffbf00);
         background-size: 50%;
-        color: rgb(255, 255, 255);
         text-indent: inherit;
         margin-left: .75rem;
       }
 
       .quick-links__title.show-icon .custom-icon ::slotted(svg) {
-        fill: white;
+        fill: var(--ucd-theme-quick-links-icon-color, #fff);
         height: 65%;
         width: 65%;
         margin: 0 auto;
       }
-
       .quick-links__title.show-icon:hover .custom-icon, .quick-links__title.show-icon:focus .custom-icon {
-        background-color: #13639e;
+        background-color: var(--ucd-theme-quick-links-icon-bg-color-hover, #13639e);
+      }
+      .quick-links__title.show-icon:hover .custom-icon ::slotted(svg), .quick-links__title.show-icon:focus .custom-icon ::slotted(svg) {
+        fill: var(--ucd-theme-quick-links-icon-color-hover, #fff);
       }
 
       .quick-links__title.show-icon {

package/brand/ucd-theme-search-form/ucd-theme-search-form.js

@@ -29,7 +29,8 @@ export default class UcdThemeSearchForm extends LitElement {
       formClass: {type: String, attribute: "form-class"},
       labelText: {type: String, attribute: "label-text"},
       inputClass: {type: String, attribute: "input-class"},
-      queryParam: {type: String, attribute: "query-param"}
+      queryParam: {type: String, attribute: "query-param"},
+      clearOnSearch: {type: Boolean, attribute: "clear-on-search"}
     };
   }
 
@@ -48,6 +49,7 @@ export default class UcdThemeSearchForm extends LitElement {
     this.inputClass = "";
     this.value = "";
     this.queryParam = "searchterm";
+    this.clearOnSearch = false;
   }
 
   /**
@@ -87,10 +89,11 @@ export default class UcdThemeSearchForm extends LitElement {
       },
       bubbles: true,
       composed: true });
-  
+
     this.dispatchEvent(e);
-  }
 
+    if( this.clearOnSearch ) this.value = '';
+  }
 }
 
 customElements.define('ucd-theme-search-form', UcdThemeSearchForm);

package/brand/ucd-theme-search-form/ucd-theme-search-form.tpl.js

@@ -48,7 +48,7 @@ return html`
     class="search-form__input ${this.inputClass}" 
     name=${this.queryParam} 
     @input="${this._onInput}"
-    value="${this.value}">
+    .value="${this.value}">
   <button type="submit" class="search-form__submit">&#xf002;</button>
 
 </form>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "3.0.5",
+  "version": "3.1.1",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {