From 6a8476db4ed40b65208c295b8d77d9a401605625 Mon Sep 17 00:00:00 2001
From: James Arroyo <jamesarroyo5@gmail.com>
Date: Sun, 5 Nov 2017 20:47:47 -0700
Subject: [PATCH 1/4] added basic template for ab-animated-banner element

---
 ab-animated-banner.html | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 ab-animated-banner.html
diff --git a/ab-animated-banner.html b/ab-animated-banner.html
new file mode 100644
index 0000000..cf2010d
--- /dev/null
+++ b/ab-animated-banner.html
@@ -0,0 +1,32 @@
+<link rel="import" href="./bower_components/polymer/polymer-element.html">
+
+<dom-module id="ab-animated-banner">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <h2>Hello [[test]]!</h2>
+  </template>
+
+  <script>
+    /**
+     * @customElement
+     * @polymer
+     */
+    class AbAnimatedBanner extends Polymer.Element {
+      static get is() { return 'ab-animated-banner'; }
+      static get properties() {
+        return {
+          test: {
+            type: String,
+            value: 'Test string...'
+          }
+        };
+      }
+    }
+
+    window.customElements.define(AbAnimatedBanner.is, AbAnimatedBanner);
+  </script>
+</dom-module>

From 05b92920e74a5efef128e7492b61dbef50bfa127 Mon Sep 17 00:00:00 2001
From: James Arroyo <jamesarroyo5@gmail.com>
Date: Sun, 5 Nov 2017 22:07:53 -0700
Subject: [PATCH 2/4] updated index.html and added polymer iron-component
 dependency to bower.json

---
 bower.json |  4 +++-
 index.html | 27 +++++++++++++--------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/bower.json b/bower.json
index 9fa878c..f50981c 100644
--- a/bower.json
+++ b/bower.json
@@ -17,11 +17,13 @@
     "url": "git://github.com/JamesRArroyo/ab-animated-banner"
   },
   "license": "MIT",
-  "main": "index.html",
+  "main": "ab-animated-banner.html",
   "dependencies": {
     "polymer": "Polymer/polymer#^2.0.0"
   },
   "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   }
diff --git a/index.html b/index.html
index 7ff8c13..bc71e73 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,19 @@
 <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+<html>
+<head>
 
-    <title>ab-animated-banner</title>
-    <meta name="description" content="ab-animated-banner description">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
-    <!-- See https://goo.gl/OOhYW5 -->
-    <link rel="manifest" href="/manifest.json">
+  <title>ab-animated-banner</title>
 
-    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+  <script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="/src/ab-animated-banner-app/ab-animated-banner-app.html">
-  </head>
-  <body>
-    <ab-animated-banner-app></ab-animated-banner-app>
-  </body>
+  <link rel="import" href="./bower_components/polymer/polymer.html">
+  <link rel="import" href="./bower_components/iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
 </html>

From a42681fa871cea1646ba96d327210b4851791930 Mon Sep 17 00:00:00 2001
From: James Arroyo <jamesarroyo5@gmail.com>
Date: Sun, 5 Nov 2017 22:09:22 -0700
Subject: [PATCH 3/4] removed the src folder and added a demo folder with a
 demo file to show off the ab-animated-banner element

---
 demo/index.html                               | 16 ++++++++++
 .../ab-animated-banner-app.html               | 32 -------------------
 2 files changed, 16 insertions(+), 32 deletions(-)
 create mode 100644 demo/index.html
 delete mode 100644 src/ab-animated-banner-app/ab-animated-banner-app.html

diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..071d0cf
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>An animated banner</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
+  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../ab-animated-banner.html">
+</head>
+
+<body>
+  <ab-animated-banner></ab-animated-banner>
+</body>
+
+</html>
diff --git a/src/ab-animated-banner-app/ab-animated-banner-app.html b/src/ab-animated-banner-app/ab-animated-banner-app.html
deleted file mode 100644
index ac5cfbc..0000000
--- a/src/ab-animated-banner-app/ab-animated-banner-app.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-
-<dom-module id="ab-animated-banner-app">
-  <template>
-    <style>
-      :host {
-        display: block;
-      }
-    </style>
-    <h2>Hello [[prop1]]!</h2>
-  </template>
-
-  <script>
-    /**
-     * @customElement
-     * @polymer
-     */
-    class AbAnimatedBannerApp extends Polymer.Element {
-      static get is() { return 'ab-animated-banner-app'; }
-      static get properties() {
-        return {
-          prop1: {
-            type: String,
-            value: 'ab-animated-banner-app'
-          }
-        };
-      }
-    }
-
-    window.customElements.define(AbAnimatedBannerApp.is, AbAnimatedBannerApp);
-  </script>
-</dom-module>

From 4c06ec0b5cc6c5160f79c483c9b7869155f69d97 Mon Sep 17 00:00:00 2001
From: James Arroyo <jamesarroyo5@gmail.com>
Date: Sun, 5 Nov 2017 23:54:04 -0700
Subject: [PATCH 4/4] Created the basic styling for the banner

---
 ab-animated-banner.html | 47 ++++++++++++++++++++++++++++++++++++++---
 demo/index.html         |  2 +-
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/ab-animated-banner.html b/ab-animated-banner.html
index cf2010d..c7d6f6e 100644
--- a/ab-animated-banner.html
+++ b/ab-animated-banner.html
@@ -3,11 +3,48 @@
 <dom-module id="ab-animated-banner">
   <template>
     <style>
+
       :host {
         display: block;
       }
+
+      .banner-container{
+          width: 30%;
+      }
+
+      .banner{
+          background: white;
+          height: 70px;
+          font-size: 12px;
+          color: black;
+          text-align: left;
+
+      }
+
+      .banner .innerLeft{
+          height: 100%;
+          width: 20%;
+          float: left;
+          background: rgba(253,202,0,1);
+      }
+
+      .innerLeft h4{
+          font-size: 20px;
+          text-align: center;
+      }
+
+
+
     </style>
-    <h2>Hello [[test]]!</h2>
+
+    <div class="banner-container">
+        <div class="banner">
+            <div class="innerLeft">
+                <h4>[[title]]</h4>
+            </div>
+        </div>
+    </div>
+
   </template>
 
   <script>
@@ -19,9 +56,13 @@ <h2>Hello [[test]]!</h2>
       static get is() { return 'ab-animated-banner'; }
       static get properties() {
         return {
-          test: {
+          title: {
             type: String,
-            value: 'Test string...'
+            value: 'Title'
+          },
+          dataSet: {
+            type: Array,
+            value: ['Jimmy Arroyo', 'John Doe', 'Bob Smith']
           }
         };
       }
diff --git a/demo/index.html b/demo/index.html
index 071d0cf..45110bc 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,7 +9,7 @@
   <link rel="import" href="../ab-animated-banner.html">
 </head>
 
-<body>
+<body style="background-color: #efefef">
   <ab-animated-banner></ab-animated-banner>
 </body>
 
