@ucd-lib/theme-elements 1.1.0 → 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.1.0",
+  "version": "1.1.1",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {

package/ucdlib/ucdlib-author-profile/ucdlib-author-profile.tpl.js

@@ -112,9 +112,9 @@ export function render() {
     }
 
     @media (min-width:992px) {
-      .side-bar{
+      .container{
         grid-template-columns: 25% 75%;
-      }  
+      }
     }
 
     @media (max-width: 800px) {

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)}