start hero image component. #75

services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.js

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit-element';
+import render from "./dams-hero.tpl.js";
+
+/**
+ * @class DamsHero
+ * @description UI component for displaying a hero image
+ * @prop {Array} srcOptions - Set of images sources to randomly display
+ * @prop {String} src - Background image source
+ */
+export default class DamsHero extends LitElement {
+
+  static get properties() {
+    return {
+      src: {type: String},
+      srcOptions: {type: Array, attribute: "src-options"},
+      _selectedSrc: {type: String}
+    };
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+    this.src = "";
+    this.srcOptions = [];
+  }
+
+  /**
+   * @method _setSrc
+   * @description Sets the background image src property.
+   */
+  _setSrc(){
+    let src = "";
+    let setCt = this.srcOptions.length;
+    if ( setCt === 0 && this.src ) src = this.src;
+    if ( !src && setCt > 0 ) {
+      src = Math.floor(Math.random() *  setCt + 1);
+    }
+    this._selectedSrc = src;
+  }
+
+}
+
+customElements.define('dams-hero', DamsHero);

services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.tpl.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-element';
+
+export default function render() { 
+return html`
+
+<style>
+  :host {
+    display: block;
+  }
+</style>
+<p>Hello world!</p>
+
+`;}

services/ucd-lib-client/client/public/elements/fin-app.html

@@ -27,6 +27,7 @@
   .footer {
     display: flex; 
     justify-content: center;
+    background-color: var(--color-dams-primary);
   }
 
   .mobile-filters-layout {

services/ucd-lib-client/client/public/elements/pages/components/app-components.js

@@ -3,6 +3,7 @@ import render from "./app-components.tpl.js";
 
 import "../../components/graphics/dams-watercolor";
 import "../../components/graphics/dams-watercolor-overlay";
+import "../../components/graphics/dams-hero";
 import "../../components/cards/dams-collection-card";
 import "../../components/filterButton";
 import "../../components/icon";

services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js

@@ -71,6 +71,13 @@ return html`
       icon="star"></dams-watercolor-overlay>
   </section>
 
+  <section>
+    <h2>Hero Image</h2>
+    ${ SharedHtml.headerDots() }
+    <p>Displays a hero image.</p>
+    <dams-hero></dams-hero>
+  </section>
+
   <section>
     <h2>Collections Preview Card</h2>
     ${ SharedHtml.headerDots() }

services/ucd-lib-client/client/public/elements/styles/shared-styles.js

@@ -3,17 +3,18 @@ import ucdCss from "./campus-theme.css";
 import damsCssProps from "./dams-styles-properties.css";
 import damsCss from "./dams-styles.css";
 
-// Insert campus and DAMS style properties
+// Insert campus and DAMS style properties for polymer elements
 let styleEle = document.createElement('style');
 styleEle.innerHTML = ucdCssProps + damsCssProps;
 document.head.appendChild(styleEle);
 
-// Insert campus and DAMS style rules
+// Insert campus and DAMS style rules for polymer elements
 let templateEle = document.createElement('template');
 templateEle.innerHTML = `<style>${ucdCss + damsCss}</style>`;
 let dmEle = document.createElement('dom-module');
 dmEle.id = 'shared-styles';
 dmEle.appendChild(templateEle);
 document.head.appendChild(dmEle);
 
+// import this for Lit elements
 export const sharedStyles = `${ucdCss + damsCss}`;