#37

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

@@ -76,25 +76,6 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
   }
 
-  /**
-   * @method updated
-   * @description Lit lifecycle method called after element has updated.
-   * @param {Map} props - Properties updated in cycle
-   * @private
-   */
-  updated( props ){
-
-    // Check if we're using the default branding div
-    const brandProps = ['siteName', 'slogan', 'figureSrc'];
-    if ( brandProps.map(p => props.has(p)).filter(Boolean).length ) {
-      if ( brandProps.map(p => this[p]).filter(Boolean).length ) {
-        this._hasSlottedBranding = false;
-      } else {
-        this._hasSlottedBranding = true;
-      }
-    }
-  }
-
   /**
    * @method open
    * @description Opens header menu in mobile
@@ -213,6 +194,16 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     } else {
       this._hasSearch = false;
     }
+
+    let UcdlibBrandingBar = this.querySelector('ucdlib-branding-bar');
+    if ( UcdlibBrandingBar ) {
+      UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
+      this._hasSlottedBranding = true;
+    } else if ( this.querySelector("*[slot='branding-bar']") ){
+      this._hasSlottedBranding = true;
+    } else {
+      this._hasSlottedBranding = false;
+    }
   }
 
 }

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

@@ -20,6 +20,9 @@ export function styles() {
     button {
       cursor: pointer;
     }
+    ::slotted(ucdlib-branding-bar){
+      width: 100%;
+    }
   `;
 
   return [

elements/package.json

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

elements/ucdlib/ucdlib-branding-bar/logo.js

@@ -0,0 +1,67 @@
+import { svg } from "lit";
+export default svg`
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1512 436.8" style="enable-background:new 0 0 1512 436.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DAAA00;}
+	.st1{fill:#002855;}
+	.st2{fill:none;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<g>
+					<g>
+						<path class="st0" d="M1369.7,174.7l18.4-48.8l3.2,2.8c11.3,9.2,26.7,17.1,41.2,17.4c13,0.3,19.3-3.2,17.6-14.1
+							c-1.3-8.2-10.5-9.6-16.3-10.8l-12.7-2.5c-24.7-4.6-45.4-19.8-45.4-48.7c0-43.6,37.6-68.1,75.4-68.1c19.9,0,38.1,5.1,55.1,16.1
+							l-16,43.3c-8.8-6.3-22.1-15.2-38.9-15.8c-5.5-0.2-18.2,2.7-14.1,15.6c1.8,5.5,9.6,7.8,14.4,8.9l14.3,3.4
+							c26.7,6.2,46.1,21.5,46.1,52.6c0,43.8-37.8,65.5-75.4,65.5C1414.7,191.5,1389.3,185.3,1369.7,174.7"/>
+						<rect x="1291.7" y="4.9" class="st0" width="64.4" height="183.9"/>
+						<polygon class="st0" points="1219.1,4.9 1285.1,4.9 1217.8,188.8 1164.2,188.8 1097.1,4.9 1162.8,4.9 1191,115.8 						"/>
+						<path class="st0" d="M941,188.8h66.9l5.1-23.1h47.7l6.3,23.1h66.9L1071.3,4.9h-70.2L941,188.8z M1036.9,57.9L1036.9,57.9
+							c1.2,7.8,12.7,64.1,12.7,64.1h-25.3L1036.9,57.9z"/>
+						<path class="st0" d="M840.4,135.9h4.3c21.2,0,37-12.7,37-36.7c0-25.8-13.9-40.3-37.2-40.3h-4V135.9z M775.6,4.9h65.9
+							c58.8,0,103.8,27,103.8,94.6c0,54.5-36.7,89.3-88.1,89.3l-81.6-0.1V4.9z"/>
+						<path class="st0" d="M737.1,10.6l3.4,30.2c0.8,7.2,4.9,24.4-0.2,22.1c-3.2-1.4-5.8-9.2-8.4-16.1c-1.3-3.5-7.6-20.1-9.2-21.4
+							c-7.9-5.9-27.7-12.6-41.1-12.7c-40.5-0.2-67.4,29.8-67.4,82.8c0,38.1,18.2,83.7,64.6,83.7c16.6,0,48.4-5.2,57.1-28.9
+							c3.9-10.7,7.5-20.2,10.1-17.3c1.9,2.1-0.6,10.7-1.7,15.3c-5.5,21.9-5.8,28.6-7.5,29.4c-20.9,10.5-47.8,14-71.3,14
+							c-74.8,0-100.6-43.6-100.6-87.2C565,28.9,611.5-3,683.6,0.2C701.8,0.9,720,4.2,737.1,10.6"/>
+						<path class="st0" d="M516.4,14l-12-4.2c-4-3.6,0.9-4.6,0.9-4.6s17.3,3.2,60.4-0.4c0,0,3.7,0.7,1.2,3.8l-14.1,6
+							c-9.2,4-9.2,1.7-9.2,11.8l-0.1,93.7c0,73.3-74.6,71.7-89.1,71.7c-6.9,0-75.3,0-75.3-58.9V33.7c0-17.3,1.8-16.8-3.9-18.9
+							l-17.3-6.5c0,0-2.9-4.2,2.3-3.9c14.1,0.7,34.6,3.8,82.7,0.3c0,0,4.2,1,1.4,4l-14.4,4c-11,4.9-9.5,1.2-9.8,12.4l0.3,97.8
+							c0,24,12.3,53.7,51.2,53.7c52.8,0,53.3-45.7,53.3-55.9l0.1-96.9C525.6,14.8,524.4,17.4,516.4,14"/>
+					</g>
+				</g>
+				<rect x="379.1" y="229.5" class="st0" width="1132.9" height="7.7"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<path class="st1" d="M419,403h48v33.9h-88V282.9h40V403z"/>
+		<path class="st1" d="M551.3,436.8h-40V282.9h40V436.8z"/>
+		<path class="st1" d="M601.9,436.8V282.9H659c27.4,0,45.7,10.6,45.7,40c0,13.9-4.5,25.1-16.9,31.4v0.4c22,2.9,31.4,17.8,31.4,39.2
+			c0,32.3-27.6,42.9-55.7,42.9H601.9z M641.9,343.3h4.5c10.6,0,21.6-1.8,21.6-14.9c0-14.1-12.5-14.9-23.3-14.9h-2.9V343.3z
+			 M641.9,406.2h5.1c11.8,0,31.8,0.6,31.8-16.3c0-18.6-19.8-16.7-32.9-16.7h-4.1V406.2z"/>
+		<path class="st1" d="M886.7,436.8h-49.8l-37.8-59.2h-0.4v59.2h-40V282.9h59.8c30.4,0,53.5,14.5,53.5,47.4
+			c0,21.2-11.8,39.6-33.7,43.5L886.7,436.8z M798.7,351.9h3.9c13.1,0,27.8-2.4,27.8-19.2c0-16.7-14.7-19.2-27.8-19.2h-3.9V351.9z"/>
+		<path class="st1" d="M951.6,410.1L941,436.8h-42.5l59.2-153.9h43.7l58,153.9h-42.7l-10-26.7H951.6z M979.6,330.5h-0.4l-16.5,49
+			h33.3L979.6,330.5z"/>
+		<path class="st1" d="M1210.9,436.8h-49.8l-37.8-59.2h-0.4v59.2h-40V282.9h59.8c30.4,0,53.5,14.5,53.5,47.4
+			c0,21.2-11.8,39.6-33.7,43.5L1210.9,436.8z M1122.9,351.9h3.9c13.1,0,27.8-2.4,27.8-19.2c0-16.7-14.7-19.2-27.8-19.2h-3.9V351.9z"
+			/>
+		<path class="st1" d="M1216.4,282.9h48l28.8,41.8l28.8-41.8h48l-56.8,80v73.9h-40v-73.9L1216.4,282.9z"/>
+	</g>
+</g>
+<g>
+	<path class="st2" d="M148,330.2l-45.6,12.4v33.6l141,22.2V137.2L171.9,126v172.3C171.9,312.8,161.6,326.5,148,330.2z"/>
+	<path class="st0" d="M102.4,342.6l45.6-12.4c13.7-3.7,24-17.4,24-31.9V126L102.4,115V342.6z"/>
+	<path class="st0" d="M171.9,92.7V4.8L24.9,36C10.7,39,0,52.7,0,67.8v302.7l69.6-18.9V76.6L171.9,92.7z"/>
+	<path class="st1" d="M250.6,105.1l-78.6-12.4V126l71.5,11.2v261.2l-141-22.2v-33.6l-32.8,8.9v25.5c0,15.3,11.3,29.1,25.7,31.3
+		l181,28.5V136.4C276.3,121.1,265,107.4,250.6,105.1z"/>
+</g>
+<rect class="st2" width="1512" height="436.8"/>
+<rect class="st2" width="1512" height="436.8"/>
+</svg>
+`;

elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js

@@ -0,0 +1,95 @@
+import { LitElement, svg } from 'lit';
+import {render, styles} from "./ucdlib-branding-bar.tpl.js";
+
+import {Mixin, MutationObserverElement, NavElement} from "../../utils";
+import logo from "./logo.js";
+import bookLogo from "./book.js";
+
+/**
+ * @class UcdlibBrandingBar
+ * @classdesc Component class for displaying a Library branding bar in a header
+ * 
+ * @property {String} figure - Figure to display: 'book' or 'logo'
+ * @property {String} siteName - Name of website to display
+ * @property {String} slogan - Optional text to display below site name
+ * @property {String} siteUrl - Url to use for links around site name and figure
+ * 
+ * @examples
+ *  <ucdlib-branding-bar>
+ *   <a href="#">My Account</a>
+ *   <a href="#">Access VPN</a>
+ *   <a href="#">Give</a>
+ *  </ucdlib-branding-bar>
+ */
+export default class UcdlibBrandingBar extends Mixin(LitElement)
+  .with(NavElement, MutationObserverElement) {
+
+  static get properties() {
+    return {
+      figure: {type: String},
+      siteName: {type: String, attribute: "site-name"},
+      slogan: {type: String},
+      siteUrl: {type: String, attribute: "site-url"},
+      navItems: {type: Array}
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+
+    this.figure = "book";
+    this.siteName = "UC Davis Library";
+    this.slogan = "";
+    this.siteUrl = "/";
+    this.navItems = [];
+  }
+
+  /**
+   * @method willUpdate
+   * @description Lit lifecycle method called before an update
+   * @private
+   * @param {Map} props - Properties that have changed
+   */
+  willUpdate(props){
+    if ( props.has("figure") && props.get("figure") !== undefined ){
+      const allowedKeywords = ['book', 'logo'];
+      if ( !allowedKeywords.includes(props.get('figure')) ){
+        console.warn(`${props.get('figure')} is not a recognized "figure" keyword.
+          Allowed values: ${JSON.stringify(allowedKeywords)}
+        `);
+        this.figure = allowedKeywords[0];
+      }
+    }
+  }
+
+  /**
+   * @method _renderFigure
+   * @description Renders an svg logo
+   * @private
+   * @returns {TemplateResult}
+   */
+  _renderFigure(){
+    if ( this.figure === 'logo') return logo;
+    if ( this.figure === 'book' ) return bookLogo;
+    return svg``;
+  }
+
+  /**
+   * @method _onChildListMutation
+   * @private
+   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   *  Sets the 'navItems' property.
+   */
+  _onChildListMutation(){
+    let navItems = this.parseNavChildren();
+    if ( navItems.length ) this.navItems = navItems;
+  }
+
+}
+
+customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);

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

@@ -0,0 +1,102 @@
+import { html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import headingStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js";
+import linkStyles from "@ucd-lib/theme-sass/1_base_html/_links.css.js";
+import brandingStyles from "@ucd-lib/theme-sass/4_component/_site-branding.css.js"
+
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+    .container {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .site-branding__figure svg {
+      max-height: 6.25rem;
+      max-width: 100%;
+      height: auto;
+    }
+    .figure--book svg {
+      width: 70px;
+      min-width: 70px;
+    }
+    .figure--logo svg {
+      width: 375px;
+      min-width: 375px;
+    }
+    [hidden] {
+      display: none !important;
+    }
+    .figure--logo .site-branding__body {
+      display: none;
+    }
+    .menu {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+    }
+    .menu a {
+      text-decoration: none;
+      font-weight: 700;
+      margin-right: 1rem;
+    }
+    .menu a:last-child {
+      margin-right: 0;
+    }
+
+    @media (max-width: 992px) {
+      .figure--logo svg {
+        width: 200px;
+        min-width: 200px;
+      }
+
+      .menu {
+        display: none;
+      }
+    }
+    
+  `;
+
+  return [
+    headingStyles,
+    brandingStyles,
+    linkStyles,
+    elementStyles];
+}
+
+export function render() { 
+return html`
+  <div class="container figure--${this.figure}">
+    <div class="site-branding">
+      <div class="site-branding__figure">
+        <a href="${this.siteUrl}" class="">${this._renderFigure()}</a>
+      </div>
+      <div class="site-branding__body">
+        <h1 class="site-branding__site-name" ?hidden=${!this.siteName}>
+          <a href=${this.siteUrl}>${this.siteName}</a>
+        </h1>
+        <div class="site-branding__slogan" ?hidden=${!this.slogan}>${this.slogan}</div>
+      </div>
+    </div>
+    ${this.navItems.length ? html`
+      <nav class="menu">
+        ${this.navItems.map(link => html`
+          <a 
+            href=${ifDefined(link.href ? link.href : null)}
+            target=${ifDefined(link.newTab ? "_blank": null)}
+            >${link.linkText}</a>
+        `)}
+      </nav>
+    ` : html``}
+
+  </div>
+
+`;}

elements/utils/mutation-observer.js

@@ -42,6 +42,10 @@ const MutationObserverElement = (superClass) => class extends superClass {
     this._childListObserver.disconnect();
     super.disconnectedCallback();
   }
+
+  _onChildListMutation(){
+    console.warn("You must create a '_onChildListMutation' method in your element to use the MutationObserverElement mixin");
+  }
 };
 
 export {MutationObserverElement};

elements/utils/nav-element.js

@@ -34,7 +34,7 @@ const NavElement = (superClass) => class extends superClass {
    * @returns {Object} Formatted object describing the menu item and its children
    */
   _makeNavItemTree(ele){
-    let linkText, href, subItems = [], isOpen=false, inlineStyles={};
+    let linkText, href, subItems = [], isOpen=false, inlineStyles={}, newTab=false;
     if ( ele.tagName === 'LI' && ele.children.length > 0) ele = ele.children[0];
 
     if ( ele.tagName === 'A' ) {
@@ -51,9 +51,10 @@ const NavElement = (superClass) => class extends superClass {
         if ( childItem.linkText ) subItems.push(childItem);
       }
     }
+    if (ele.getAttribute('target') == '_blank') newTab = true;
 
     if ( linkText ) linkText = linkText.trim();
-    return {linkText, href, subItems, isOpen, inlineStyles};
+    return {linkText, href, subItems, isOpen, inlineStyles, newTab};
   }
 
   /**

test-app/index.js

@@ -23,3 +23,4 @@ import "./pages/page-ucdlib-icon";
 import "./pages/page-ucdlib-icons";
 import "./pages/page-ucdlib-iconset";
 import "./pages/page-ucdlib-pages";
+import "./pages/page-ucdlib-branding-bar";

test-app/pages/page-ucd-theme-header.js

@@ -9,6 +9,7 @@ import "../../elements/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.js";
 import "../../elements/brand/ucd-theme-quick-links/ucd-theme-quick-links.js";
 import "../../elements/brand/ucd-theme-search-popup/ucd-theme-search-popup.js";
 import "../../elements/brand/ucd-theme-search-form/ucd-theme-search-form.js";
+import "../../elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js";
 
 export default class PageUcdThemeHeader extends Mixin(LitElement)
   .with(MainDomElement, BrandedPageElement, MdElement) {