@ucd-lib/theme-elements 1.2.4 → 1.2.6

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { LitElement, svg } from 'lit';
+import { LitElement, html, svg } from 'lit';
 import {render, styles} from "./ucdlib-branding-bar.tpl.js";
 
 import {Mixin, NavElement} from "../../utils/mixins";
@@ -28,6 +28,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   static get properties() {
     return {
       figure: {type: String},
+      figureUrl: {type: String, attribute: "figure-url"},
       siteName: {type: String, attribute: "site-name"},
       slogan: {type: String},
       siteUrl: {type: String, attribute: "site-url"},
@@ -62,7 +63,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    */
   willUpdate(props){
     if ( props.has("figure") && props.get("figure") !== undefined ){
-      const allowedKeywords = ['book', 'logo'];
+      const allowedKeywords = ['book', 'logo', 'custom'];
       if ( !allowedKeywords.includes(props.get('figure')) ){
         console.warn(`${props.get('figure')} is not a recognized "figure" keyword.
           Allowed values: ${JSON.stringify(allowedKeywords)}
@@ -79,6 +80,9 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    * @returns {TemplateResult}
    */
   _renderFigure(){
+    if( this.figure === 'custom' ) {
+      return html`<img src="${this.figureUrl}" />`;
+    }
     if ( this.figure === 'logo') return logo;
     if ( this.figure === 'book' ) return bookLogo;
     return svg``;

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

@@ -27,6 +27,10 @@ export function styles() {
       width: 70px;
       min-width: 70px;
     }
+    .figure--custom img {
+      width: 150px;
+      min-width: 150px;
+    }
     .figure--logo svg {
       width: 375px;
       min-width: 375px;

package/ucdlib/ucdlib-header/ucdlib-header.js

@@ -23,6 +23,10 @@ import {
  *      <a href="#">LINK 2</a>
  *      <a href="#">LINK 3</a>
  *    </ucd-theme-primary-nav>
+ *    <ucd-theme-search-popup>
+ *      <ucd-theme-search-form>
+ *      </ucd-theme-search-form>
+ *    </ucd-theme-search-popup>
  *  </ucdlib-header>
  * 
  */
@@ -38,6 +42,7 @@ export default class UcdlibHeader extends LitElement {
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
       _hasPrimaryNav: {type: Boolean, state: true},
+      _hasQuickLinks: {type: Boolean, state: true},
       _hasSearch: {type: Boolean, state: true},
       _components: {type: Object, state: true}
     };
@@ -63,6 +68,7 @@ export default class UcdlibHeader extends LitElement {
 
     this._transitioning = false;
     this._hasPrimaryNav = false;
+    this._hasQuickLinks = false;
     this._hasSearch = false;
     this._animationDuration = 500;
     this._slottedComponents = {};
@@ -74,6 +80,9 @@ export default class UcdlibHeader extends LitElement {
    */
   _onLocationChange(){
     this.close();
+    if ( this._hasQuickLinks ){
+      this._slottedComponents.quickLinks.close();
+    }
   }
 
   /**
@@ -200,6 +209,15 @@ export default class UcdlibHeader extends LitElement {
       }
       this._hasPrimaryNav = false;
     }
+
+    let search = this.querySelector('ucd-theme-search-popup');
+    if ( search ) {
+      search.setAttribute('slot', 'search');
+      this._hasSearch = true;
+      this._slottedComponents.search = search;
+    } else {
+      this._hasSearch = false;
+    }
   }
 
 }

package/ucdlib/ucdlib-header/ucdlib-header.tpl.js

@@ -8,7 +8,7 @@ import headerLayoutStyles from "@ucd-lib/theme-sass/5_layout/_l-header.css.js"
 import brandingStyles from "@ucd-lib/theme-sass/4_component/_site-branding.css.js"
 import mobileBarStyles from "@ucd-lib/theme-sass/4_component/_mobile-bar.css.js";
 import navToggleStyles from "@ucd-lib/theme-sass/4_component/_nav-toggle.css.js"
-// import offCanvasStyles from "@ucd-lib/theme-sass/4_component/_nav-off-canvas.css.js"
+import offCanvasStyles from "@ucd-lib/theme-sass/4_component/_nav-off-canvas.css.js"
 
 export function styles() {
   const elementStyles = css`
@@ -40,16 +40,18 @@ export function styles() {
 
     .logo-container {
       display: flex;
+      
+    }
+
+    .website-link-container {
+      padding-left: 0.5rem;
       background-color: #13639E;
-      clip-path: polygon(1rem 0px, 110% 0px, 110% 102%, 0% 102%);
+      clip-path: polygon(1rem 0px, 110% 0px, 110% 104%, 0% 104%);
     }
 
-    .logo-container::before {
-      width: 1rem;
+    .website-link-container::before {      
       margin-left: 0.5rem;
-      background-color: #14447A;
       content: "";
-      transform: skewX(-16deg);
     }
 
     .logo-link::before {
@@ -57,10 +59,18 @@ export function styles() {
       color: white;
     }
 
-    .logo-container:hover {
+    .website-link-container:hover {
       background-color: #FFBF00;
+    }
 
+    .logo-border {
+      background-color: #14447A;
+      width: 1rem;
+      transform: skewX(-16deg);
+      position: relative;
+      left: 0.55rem;
     }
+
     .logo-link img {
       fill: #FFFFFF;
     }
@@ -92,7 +102,8 @@ export function styles() {
     brandingStyles,
     mobileBarStyles,
     navToggleStyles,
-    elementStyles
+    offCanvasStyles,
+    elementStyles,
   ];
 }
 
@@ -211,6 +222,7 @@ ${this.isDemo ? html`
   }
   .menu--hidden .off-canvas__container {
     display: grid;
+    grid-template-areas: "nav quick search logo";
   }
   .l-nav-horizontal {
     display: grid;
@@ -268,10 +280,19 @@ ${this.isDemo ? html`
         <div>
           <slot name="primary-nav"></slot>
         </div>
+        ${this._hasSearch ? html`
+          <div class="l-nav-horizontal__search-popup">      
+            <slot name="search"></slot>
+          </div>
+        ` : html``}
+        
         <div class="logo-container">
-          <a class="logo-link" href="https://www.ucdavis.edu/" aria-label="UC Davis main website link">
-            <div class="ucd-logo"></div>
-          </a>
+          <div ?hidden=${this._hasSearch} class="logo-border"></div>
+          <div class="website-link-container">
+            <a class="logo-link" href="https://www.ucdavis.edu/" aria-label="UC Davis main website link">
+              <div class="ucd-logo"></div>
+            </a>
+          </div>
         </div>
 
       </div>

package/ucdlib/ucdlib-primary-nav/ucdlib-primary-nav.tpl.js

@@ -140,7 +140,6 @@ return html`
       padding: 0 !important;
       border-bottom: 0 !important;
       background-color: transparent !important;
-      font-weight: 700 !important;
       line-height: 3.25rem !important;
     }
     .primary-nav a:before, .primary-nav__nolink:before {