@ucd-lib/theme-elements 1.2.9 → 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": "1.2.9",
+  "version": "2.1.0",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -10,10 +10,10 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/task": "^1.0.0",
-    "@ucd-lib/theme-sass": "^5.0.15",
+    "@ucd-lib/theme-sass": "^6.0.1",
     "dompurify": "^2.3.9",
     "ip-cidr": "^3.0.4",
-    "lit": "^2.0.2",
+    "lit": "^3.0.2",
     "marked": "^4.0.18",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"

package/utils/controllers/index.js

@@ -1,6 +1,7 @@
 import { BreakPointsController } from "./break-points";
 import { IntersectionObserverController } from "./intersection-observer";
 import { MutationObserverController } from "./mutation-observer";
+import { PageWidthController } from "./page-width";
 import { PopStateObserverController } from "./popstate-observer";
 import { SilsPrimoController } from "./sils-primo";
 import { WaitController } from "./wait";
@@ -10,7 +11,8 @@ export {
   BreakPointsController,
   IntersectionObserverController,
   MutationObserverController,
+  PageWidthController,
   PopStateObserverController,
   SilsPrimoController,
   WaitController,
-};
+};

package/utils/controllers/page-width.js

@@ -0,0 +1,78 @@
+/**
+ * @class PageWidthController
+ * @description Sets the page width as a CSS variable (--page-width), which is needed for some layout classes.
+ *
+ * @example
+ *   const pageWidthController = new PageWidthController();
+ *   pageWidthController.init();
+ */
+export class PageWidthController {
+
+  constructor(){
+    this.documentRoot = document.documentElement;
+    this.propertyName = '--page-width';
+    this.fullWidthPropertyName = '--full-width';
+  }
+
+  /**
+   * @description Initialize the controller.
+   * @returns
+   */
+  init(){
+    if ( this.isInitialized() ) {
+      return;
+    }
+
+    // set initial state
+    this.setPageWidthProperty();
+    this.setFullWidthProperty();
+
+    // set up resize listener
+    this.resizeListener = window.addEventListener('resize', () => {
+      this.setPageWidthProperty();
+    });
+
+  }
+
+  /**
+   * @description Check if the controller has been initialized.
+   * @returns {Boolean}
+   */
+  isInitialized(){
+    return this.resizeListener !== undefined;
+  }
+
+  /**
+   * @description Destroy the controller.
+   */
+  destroy(){
+    window.removeEventListener('resize', this.resizeListener);
+    this.documentRoot.style.removeProperty(this.propertyName);
+    this.documentRoot.style.removeProperty(this.fullWidthPropertyName);
+    this.resizeListener = undefined;
+  }
+
+  /**
+   * @description Get the '--page-width' CSS variable from document root.
+   * @returns {String}
+   */
+  getPageWidthProperty(){
+    return this.documentRoot.style.getPropertyValue(this.propertyName);
+  }
+
+  /**
+   * @description Set the '--page-width' CSS variable on document root.
+   */
+  setPageWidthProperty(){
+    this.documentRoot.style.setProperty(this.propertyName, `${this.documentRoot.clientWidth}px`);
+  }
+
+  /**
+   * @description Set the '--full-width' CSS variable on document root.
+   */
+  setFullWidthProperty(){
+    const value = 'min(var(--page-width, 100vw), 100vw)';
+    this.documentRoot.style.setProperty(this.fullWidthPropertyName, value);
+  }
+
+}