@ucd-lib/theme-elements 2.0.1 → 2.1.0

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

@@ -6,7 +6,7 @@ import { MutationObserverController, WaitController } from '../../utils/controll
 /**
  * @class UcdThemeQuickLinks
  * @classdesc Component class for displaying a quick links nav
- * 
+ *
  *  Patternlab Url:
  *    - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-quick-links
  *    - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-quick-links-2-columns
@@ -16,6 +16,7 @@ import { MutationObserverController, WaitController } from '../../utils/controll
  * @property {String} styleModifiers - Apply alternate styles with a space-separated list.
  * @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
  */
 export default class UcdThemeQuickLinks extends LitElement {
 
@@ -25,6 +26,7 @@ export default class UcdThemeQuickLinks extends LitElement {
       styleModifiers: {type: String, attribute: "style-modifiers"},
       opened: {type: Boolean},
       animationDuration: {type: Number, attribute: "animation-duration"},
+      useIcon: {type: Boolean, attribute: "use-icon"},
       _links: {type: Array, state: true},
       _hasCustomIcons: {type: Boolean, state: true},
       _transitioning: {type: Boolean, state: true},
@@ -46,6 +48,7 @@ export default class UcdThemeQuickLinks extends LitElement {
     this.styleModifiers = "";
     this.opened = false;
     this.animationDuration = 300;
+    this.useIcon = false;
 
     this._links = [];
     this._classPrefix = "quick-links";
@@ -102,7 +105,7 @@ export default class UcdThemeQuickLinks extends LitElement {
    */
   ingestChildren(){
     // remove any slotted icons created from a previous render
-    this.querySelectorAll('[slot]').forEach(ele => ele.remove());
+    this.querySelectorAll('slot:not([name="custom-icon"])').forEach(ele => ele.remove());
     this._hasCustomIcons = false;
 
     let links = [];
@@ -111,8 +114,8 @@ export default class UcdThemeQuickLinks extends LitElement {
       let link = {};
 
       // if first child exists, we assume it is an icon
-      if ( 
-        child.childElementCount > 0 && 
+      if (
+        child.childElementCount > 0 &&
         index < 3 &&
         child.children[0].tagName !== 'A'
       ){
@@ -157,7 +160,7 @@ export default class UcdThemeQuickLinks extends LitElement {
    * @method _onItemClick
    * @private
    * @description Attached to menu item links without an href
-   * @param {Event} e 
+   * @param {Event} e
    */
   _onItemClick(e){
     this._dispatchItemClick(e.target.index);
@@ -167,7 +170,7 @@ export default class UcdThemeQuickLinks extends LitElement {
    * @method _onItemKeyup
    * @private
    * @description Attached to menu item links without an href
-   * @param {Event} e 
+   * @param {Event} e
    */
   _onItemKeyup(e){
     if( e.which !== 13 ) return;
@@ -199,7 +202,7 @@ export default class UcdThemeQuickLinks extends LitElement {
   _getNavClasses(){
     let classes = {};
     classes[`${this._classPrefix}__menu`] = true;
-    
+
     if ( this.styleModifiers ) {
       this.styleModifiers.split(" ").forEach(mod => {
         if (mod) classes[`${this._classPrefix}--${mod}`] = true;
@@ -265,4 +268,4 @@ export default class UcdThemeQuickLinks extends LitElement {
 
 }
 
-customElements.define('ucd-theme-quick-links', UcdThemeQuickLinks);
+customElements.define('ucd-theme-quick-links', UcdThemeQuickLinks);

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

@@ -13,6 +13,9 @@ export function styles() {
     :host {
       display: block;
     }
+    [hidden] {
+      display: none !important;
+    }
     .slot-parent {
       display: none;
     }
@@ -43,8 +46,44 @@ export function styles() {
         margin-right: .75rem;
         color: #13639e;
         font-size: .875em;
+      }
+
+      .quick-links__title.show-icon:after {
+        content: "";
+      }
+
+      .quick-links__title.show-icon .custom-icon {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: hidden;
+        width: 2.4375rem;
+        height: 2.4375rem;
+        padding: 0px;
+        border: 0px;
+        border-radius: 50%;
+        background-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;
+        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;
+      }
+
+      .quick-links__title.show-icon {
+        padding-right: 0;
+      }
     }
-  }
   `;
 
   return [
@@ -57,7 +96,7 @@ export function styles() {
   ];
 }
 
-export function render() { 
+export function render() {
 return html`
   ${this._hasCustomIcons ? html`
     <style>
@@ -81,17 +120,20 @@ return html`
     }
   </style>
   <div class="quick-links">
-    <button 
-      class="quick-links__title"
+    <button
+      class="quick-links__title ${this.useIcon ? 'show-icon' : ''}"
       @click=${this._onBtnClick}
-      aria-controls="quick-links" 
-      aria-expanded="${this.opened}" 
+      aria-controls="quick-links"
+      aria-expanded="${this.opened}"
       aria-label="Toggle ${this.title} Menu">
       ${this.title}<span class="submenu-toggle ${this.opened ? 'submenu-toggle--open' : ''}"><span class="submenu-toggle__icon">+</span></span>
+      <div class="custom-icon" ?hidden="${!this.useIcon}">
+        <slot name="custom-icon"></slot>
+      </div>
     </button>
-    <nav 
-      id="quick-links" 
-      class=${classMap(this._getNavClasses())} 
+    <nav
+      id="quick-links"
+      class=${classMap(this._getNavClasses())}
       style=${styleMap(this._getNavStyles())}
       aria-label="Quick Links Menu">
     <ul class="menu" id="menu">
@@ -100,8 +142,8 @@ return html`
           ${link.href ? html`
             <a href="${link.href}">${this._renderSlot(link)}${link.text}</a>
           ` : html`
-            <a 
-              class="click-attached" 
+            <a
+              class="click-attached"
               tabindex="0"
               @click=${this._onItemClick}
               @keyup=${this._onItemKeyup}
@@ -111,7 +153,7 @@ return html`
       `)}
     </ul>
     </nav>
-    
+
   </div>
 
-`;}
+`;}

package/package.json

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