@ucd-lib/theme-elements 1.2.8 → 1.2.9

package/package.json

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

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

@@ -9,12 +9,13 @@ 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} figure - Figure to display: 'book', 'logo', or 'custom'
+ * @property {String} figureSrc - Url of image to use for custom figure
  * @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>
@@ -28,7 +29,8 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   static get properties() {
     return {
       figure: {type: String},
-      figureUrl: {type: String, attribute: "figure-url"},
+      figureSrc: {type: String, attribute: "figure-src"},
+      figureCustomWidth: {type: String, attribute: "figure-custom-width"},
       siteName: {type: String, attribute: "site-name"},
       slogan: {type: String},
       siteUrl: {type: String, attribute: "site-url"},
@@ -49,6 +51,8 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
     );
 
     this.figure = "book";
+    this.figureSrc = '';
+    this.figureCustomWidth = '150px';
     this.siteName = "UC Davis Library";
     this.slogan = "";
     this.siteUrl = "/";
@@ -81,7 +85,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    */
   _renderFigure(){
     if( this.figure === 'custom' ) {
-      return html`<img src="${this.figureUrl}" />`;
+      return html`<img src="${this.figureSrc}" />`;
     }
     if ( this.figure === 'logo') return logo;
     if ( this.figure === 'book' ) return bookLogo;
@@ -106,4 +110,4 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
 
 }
 
-customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);
+customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);

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

@@ -27,10 +27,6 @@ export function styles() {
       width: 70px;
       min-width: 70px;
     }
-    .figure--custom img {
-      width: 150px;
-      min-width: 150px;
-    }
     .figure--logo svg {
       width: 375px;
       min-width: 375px;
@@ -66,7 +62,7 @@ export function styles() {
         display: none;
       }
     }
-    
+
   `;
 
   return [
@@ -76,8 +72,14 @@ export function styles() {
     elementStyles];
 }
 
-export function render() { 
+export function render() {
 return html`
+  <style>
+    .figure--custom img {
+      width: ${this.figureCustomWidth};
+      min-width: ${this.figureCustomWidth};
+    }
+  </style>
   <div class="container figure--${this.figure}">
     <div class="site-branding">
       <div class="site-branding__figure">
@@ -93,7 +95,7 @@ return html`
     ${this.navItems.length ? html`
       <nav class="menu">
         ${this.navItems.map(link => html`
-          <a 
+          <a
             href=${ifDefined(link.href ? link.href : null)}
             target=${ifDefined(link.newTab ? "_blank": null)}
             >${link.linkText}</a>
@@ -103,4 +105,4 @@ return html`
 
   </div>
 
-`;}
+`;}