@ucd-lib/theme-elements 1.0.2 → 1.1.1

package/brand/ucd-theme-header/ucd-theme-header.js

@@ -18,6 +18,7 @@ import {
  * @property {String} slogan - Optional text to display below site name
  * @property {String} figureSrc - Site logo/icon to display next to site name
  * @property {String} siteUrl - Url to use for links around site name and figure
+ * @property {Boolean} silenceWarnings - Console warnings will be silences
  * @property {Boolean} opened - Whether header is open in the mobile view
  * @property {Boolean} preventFixed - Navbar will not be fixed to top of screen in desktop view
  * 
@@ -49,6 +50,7 @@ export default class UcdThemeHeader extends LitElement {
       figureSrc: {type: String, attribute: "figure-src"},
       siteUrl: {type: String, attribute: "site-url"},
       opened: {type: Boolean},
+      silenceWarnings: {type: Boolean, attribute: 'silence-warnings'},
       preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
@@ -57,6 +59,8 @@ export default class UcdThemeHeader extends LitElement {
       _hasQuickLinks: {type: Boolean, state: true},
       _hasSearch: {type: Boolean, state: true},
       _brandingBarInView: {type: Boolean, state: true},
+      _brandingBarLinks: {type: Array, state: true},
+      _brandingBarListener: {type: Boolean, state: true},
       _components: {type: Object, state: true}
     };
   }
@@ -79,6 +83,7 @@ export default class UcdThemeHeader extends LitElement {
     this.figureSrc = "";
     this.opened = false;
     this.isDemo = false;
+    this.silenceWarnings = false;
 
     this._transitioning = false;
     this._hasPrimaryNav = false;
@@ -87,6 +92,8 @@ export default class UcdThemeHeader extends LitElement {
     this._hasSearch = false;
     this._animationDuration = 500;
     this._brandingBarInView = false;
+    this._brandingBarLinks = [];
+    this._brandingBarListener = false;
     this._slottedComponents = {};
 
   }
@@ -261,6 +268,21 @@ export default class UcdThemeHeader extends LitElement {
 
   }
 
+  /**
+   * @method _onBrandingBarUpdate
+   * @description Listens to nav item changes to the ucdlib-branding-bar element (if applicable)
+   * @private
+   * @param {Element} ele - ucdlib-branding-bar element
+   */
+  _onBrandingBarUpdate(ele) {
+    if ( ele.navItems ) {
+      this._brandingBarLinks = ele.navItems;
+    } else {
+      this._brandingBarLinks = [];
+    }
+    console.log(ele.navItems);
+  }
+
   /**
    * @method _onChildListMutation
    * @description Fires when there are changes to this element's non-shadow DOM children
@@ -273,7 +295,9 @@ export default class UcdThemeHeader extends LitElement {
       this._hasPrimaryNav = true;
       this._slottedComponents.primaryNav = primaryNav;
     } else {
-      console.warn("No 'ucd-theme-primary-nav' child element found!");
+      if ( !this.silenceWarnings ) {
+        console.warn("No 'ucd-theme-primary-nav' child element found!");
+      }
       this._hasPrimaryNav = false;
     }
 
@@ -300,10 +324,18 @@ export default class UcdThemeHeader extends LitElement {
       UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
       this._hasSlottedBranding = true;
       this._slottedComponents.brandingBar = UcdlibBrandingBar;
+      if ( !this._brandingBarListener ){
+        this._onBrandingBarUpdate(UcdlibBrandingBar);
+        UcdlibBrandingBar.addEventListener('nav-update', (e) => {this._onBrandingBarUpdate(e.target);});
+        this._brandingBarListener = true;
+      }
+
     } else if ( this.querySelector("*[slot='branding-bar']") ){
       this._hasSlottedBranding = true;
+      this._brandingBarLinks = [];
     } else {
       this._hasSlottedBranding = false;
+      this._brandingBarLinks = [];
     }
   }
 

package/brand/ucd-theme-header/ucd-theme-header.tpl.js

@@ -1,5 +1,6 @@
 import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import headingStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js";
 import headerStyles from "@ucd-lib/theme-sass/4_component/_header.css.js";
@@ -40,6 +41,9 @@ export function styles() {
       .fixed-mobile .l-header__branding {
         margin-top: 55px;
       }
+      .branding-bar-mobile-links {
+        display: block;
+      }
     }
 
     @media (min-width: 992px) {
@@ -51,6 +55,36 @@ export function styles() {
         left: 0;
         width: 100%;
       }
+      .branding-bar-mobile-links {
+        display: none;
+      }
+    }
+    .branding-bar-mobile-links ul {
+      margin: 0px;
+      padding: 0px;
+      list-style: none;
+    }
+    .branding-bar-mobile-links li {
+      margin: 0px;
+      padding: 0px;
+      list-style: none;
+    }
+    .branding-bar-mobile-links a {
+      display: flex;
+      align-items: center;
+      padding: 0.75rem;
+      border-bottom: 0.15rem solid rgb(219, 234, 247);
+      background-color: #fff;
+      color: rgb(2, 40, 81);
+      font-weight: 700;
+      line-height: 1.5rem;
+      text-decoration: none;
+    }
+    .branding-bar-mobile-links a:hover {
+      background-color: rgb(255, 191, 0);
+    }
+    .branding-bar-mobile-links li:last-child a {
+      border-bottom: none;
     }
 
   `;
@@ -137,6 +171,19 @@ ${this.isDemo ? html`
         <div class="l-nav-horizontal__primary-nav">
           <slot name="primary-nav"></slot>
         </div>
+        ${this._brandingBarLinks.length ? html`
+          <div class='branding-bar-mobile-links'>
+            <ul>
+              ${this._brandingBarLinks.map(link => html`
+                <li><a 
+                  href=${ifDefined(link.href ? link.href : null)}
+                  target=${ifDefined(link.newTab ? "_blank": null)}
+                  >${link.linkText}</a></li>
+              `)}
+            </ul>
+
+          </div>
+        ` : html``}
       </div>
     </div>
   </div>

package/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.tpl.js

@@ -17,6 +17,9 @@ export function styles() {
     button[disabled] {
       pointer-events: none;
     }
+    .submenu-toggle__icon {
+      min-width: 40%;
+    }
     @media (min-width: 992px) {
       nav.primary-nav--mega li.depth-0 > ul.menu {
         opacity: 1;

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

@@ -29,6 +29,9 @@ export function styles() {
     .click-attached {
       cursor: pointer;
     }
+    .submenu-toggle__icon {
+      min-width: 40%;
+    }
     @media (min-width: 992px) {
       .slot-parent {
         display: block;

package/package.json

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

package/{brand/ucd-theme-author-profile/ucd-theme-author-profile.js → ucdlib/ucdlib-author-profile/ucdlib-author-profile.js}

@@ -1,5 +1,5 @@
 import {html, LitElement} from 'lit';
-import {render, styles} from "./ucd-theme-author-profile.tpl.js";
+import {render, styles} from "./ucdlib-author-profile.tpl.js";
 import {TaskController} from '../../utils/controllers/task.js';
 
 /**
@@ -29,7 +29,8 @@ export default class UcdlibAuthorProfile extends LitElement {
       positionTitle: {type: String},
       photo: {type: Object},
       department: {type: String},
-      domain: {type: String}
+      domain: {type: String},
+      sidebar: {type: Boolean}
     };
   }
 
@@ -46,6 +47,7 @@ export default class UcdlibAuthorProfile extends LitElement {
     this.results = {};
     this.email = '';
     this.domain = '';
+
     this.errorMessage = 'This is not an email.';
     
     this.svgIcon = {
@@ -149,7 +151,6 @@ export default class UcdlibAuthorProfile extends LitElement {
       this.PENDING = false;
       this.LOADING = false;
 
-
       this.id = this.results.id;
 
       this.nameLast = this.results.nameLast;
@@ -217,4 +218,4 @@ export default class UcdlibAuthorProfile extends LitElement {
 
 }
 
-customElements.define('ucdlib-theme-author-profile', UcdlibAuthorProfile);
+customElements.define('ucdlib-author-profile', UcdlibAuthorProfile);

package/{brand/ucd-theme-author-profile/ucd-theme-author-profile.tpl.js → ucdlib/ucdlib-author-profile/ucdlib-author-profile.tpl.js}

@@ -40,6 +40,11 @@ export function render() {
       width: 33.3%;
       height:18px;
     }
+    .side-bar{
+      display: inline-grid;
+      grid-template-columns: 15% 85%;
+      width:100%;
+    }
     .container {
       display: inline-grid;
       grid-template-columns: 15% 85%;
@@ -75,14 +80,14 @@ export function render() {
       display:inline-block;
     }
     .name {
-      color:var(--ucd-blue-80); 
+      color: #13639e;
       margin-bottom:0;
     }
     .title {
       margin-bottom:0;
     }
     .info {
-      color:var(--ucd-blue-80); 
+      color: #13639e;
       margin-bottom:0;
     }
     .svg-icon {
@@ -106,6 +111,12 @@ export function render() {
       display:none;
     }
 
+    @media (min-width:992px) {
+      .container{
+        grid-template-columns: 25% 75%;
+      }
+    }
+
     @media (max-width: 800px) {
 
       .contact-list {
@@ -127,6 +138,7 @@ export function render() {
       .container {
         grid-template-columns: 35% 65%;
       }
+      
       .photo {
         width:80%;
         height:80%;
@@ -151,21 +163,21 @@ ${this.eController ? html`
   ${!this.LOADING ? html`
       ${this.photo != "Empty"  && this.photo != undefined ? 
       html`   
-      <div class="container">
-        <div class="photo"><img src="${this.photo.link}" alt="${this.photoAlt}"></div>
-        <div class="text_container"> 
-          <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
-          <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
-          <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a>  <span class="pipe">&#124;</span>`: html``}</p>
-          <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>
-          <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
+        <div class="${this.sidebar ? 'side-bar':'container'}">
+          <div class="photo"><img src="${this.photo.link}" alt="${this.photoAlt}"></div>
+          <div class="text_container"> 
+            <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
+            <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
+            <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a>  <span class="pipe">&#124;</span>`: html``}</p>
+            <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>
+            <p class="contact-list">${this.contactAppointmentUrl ? html`${this.svgIcon.calendar} <a class="info" href="${this.contactAppointmentUrl ? this.contactAppointmentUrl:"#"}">Book an Appointment</a>`: html``}</p>
+          </div>
         </div>
-      </div>
       `
       :html`
       <div class="container-no-image">
         <div class="text_container"> 
-          <h3 class="name"><a class="name" href="">${this.nameFirst} ${this.nameLast}</a></h3>
+          <h3 class="name"><a class="name" href="${this.link}">${this.nameFirst} ${this.nameLast}</a></h3>
           <p class="title">${this.positionTitle} <span class="pipe">&#124;</span> ${this.department}</p>
           <p class="contact-list">${this.contactPhone ? html`${this.svgIcon.phone} <a class="info" href="tel:${this.contactPhone}">${this.contactPhone}</a>  <span class="pipe">&#124;</span> `: html``}</p>
           <p class="contact-list">${this.contactEmail ? html`${this.svgIcon.email} <a class="info" href="mailto:${this.contactEmail}">${this.contactEmail}</a> ${this.contactAppointmentUrl ? html`<span class="pipe">&#124;</span>`:html`<span class="noApp-pipe">&#124;</span>`}`: html``}</p>

package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js

@@ -92,7 +92,12 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    */
   _onChildListMutation(){
     let navItems = this.parseNavChildren();
-    if ( navItems.length ) this.navItems = navItems;
+    if ( navItems.length ) {
+      this.navItems = navItems;
+    } else {
+      this.navItems = [];
+    }
+    this.dispatchEvent(new CustomEvent('nav-update', {bubbles: true, composed: false}));
   }
 
 }

package/ucdlib/ucdlib-sils-search-redirect/ucdlib-sils-search-redirect.tpl.js

@@ -13,7 +13,7 @@ export function styles() {
   const elementStyles = css`
     :host {
       display: block;
-      max-width: 500px;
+      max-width: 33rem;
       margin: auto;
     }
     h2 {
@@ -44,8 +44,9 @@ export function styles() {
       justify-content: space-between;
     }
     .search-options label {
-      color: ${unsafeCSS(categoryBrands.primary.hex)};
+      font-weight: 700;
       padding-bottom: 0;
+      color: ${unsafeCSS(categoryBrands.primary.hex)};
     }
     input[type=checkbox] {
       margin-right: 0;
@@ -53,13 +54,15 @@ export function styles() {
     .search-options button {
       border: none;
       background-color: inherit;
-      color: ${unsafeCSS(categoryBrands.primary.hex)};
+      font-weight: 700;
       text-decoration: underline;
       padding: 0;
       font-family: inherit;
+      color: ${unsafeCSS(categoryBrands.primary.hex)};
     }
     .checkbox label::before {
       background-color: white;
+      border: 1px solid rgb(153, 153, 153);
     }
     .dark h2 {
       color: ${unsafeCSS(categoryBrands.secondary.hex)}