From 2ea2847528774c0115fcb2bbb25da8c3e5cd97bf Mon Sep 17 00:00:00 2001
From: spelkey <spelkey@ucdavis.edu>
Date: Fri, 12 Mar 2021 11:52:25 -0500
Subject: [PATCH] start hero image component. #75

---
 .../elements/components/graphics/dams-hero.js | 43 +++++++++++++++++++
 .../components/graphics/dams-hero.tpl.js      | 13 ++++++
 .../client/public/elements/fin-app.html       |  1 +
 .../pages/components/app-components.js        |  1 +
 .../pages/components/app-components.tpl.js    |  7 +++
 .../public/elements/styles/shared-styles.js   |  5 ++-
 6 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.js
 create mode 100644 services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.tpl.js

diff --git a/services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.js b/services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.js
new file mode 100644
index 0000000..433b564
--- /dev/null
+++ b/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);
diff --git a/services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.tpl.js b/services/ucd-lib-client/client/public/elements/components/graphics/dams-hero.tpl.js
new file mode 100644
index 0000000..f9ed40d
--- /dev/null
+++ b/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>
+
+`;}
\ No newline at end of file
diff --git a/services/ucd-lib-client/client/public/elements/fin-app.html b/services/ucd-lib-client/client/public/elements/fin-app.html
index e75ce68..488074c 100644
--- a/services/ucd-lib-client/client/public/elements/fin-app.html
+++ b/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 {
diff --git a/services/ucd-lib-client/client/public/elements/pages/components/app-components.js b/services/ucd-lib-client/client/public/elements/pages/components/app-components.js
index e805632..b041cab 100644
--- a/services/ucd-lib-client/client/public/elements/pages/components/app-components.js
+++ b/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";
diff --git a/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js b/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js
index b9aa736..a3ff857 100644
--- a/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js
+++ b/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() }
diff --git a/services/ucd-lib-client/client/public/elements/styles/shared-styles.js b/services/ucd-lib-client/client/public/elements/styles/shared-styles.js
index fa64f89..1aff868 100644
--- a/services/ucd-lib-client/client/public/elements/styles/shared-styles.js
+++ b/services/ucd-lib-client/client/public/elements/styles/shared-styles.js
@@ -3,12 +3,12 @@ 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');
@@ -16,4 +16,5 @@ dmEle.id = 'shared-styles';
 dmEle.appendChild(templateEle);
 document.head.appendChild(dmEle);
 
+// import this for Lit elements
 export const sharedStyles = `${ucdCss + damsCss}`;