From 0a8e89c782adab172b4bf2f2e32cfaef5fb0c129 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Mon, 18 Jan 2016 10:32:27 -0400
Subject: [PATCH] Only append label if this exists in hero-icon

Currently, an empty element was appended to hero-icon template to hold
the label even if this didn't exist, causing some vertical bottom
spacing.

We use Polymer's `dom-if` to conditional show this element. The label
was changed to be passed as an HTML property since it seems to be really
difficult to access the inner HTML of a polymer element programatically.
---
 lib/components/hero-icon.html | 11 ++++++-----
 lib/index.html                |  6 +++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/lib/components/hero-icon.html b/lib/components/hero-icon.html
index 5088e845..a2956846 100644
--- a/lib/components/hero-icon.html
+++ b/lib/components/hero-icon.html
@@ -14,11 +14,9 @@
     </style>
     <div class="icon"></div>
 
-    <div>
-      <hero-caption>
-        <content></content>
-      </hero-caption>
-    </div>
+    <template is="dom-if" if="{{label}}">
+      <hero-caption>{{label}}</hero-caption>
+    </template>
   </template>
 
   <script>
@@ -31,6 +29,9 @@
         path: {
           type: String
         },
+        label: {
+          type: String
+        },
         width: {
           type: String
         },
diff --git a/lib/index.html b/lib/index.html
index cb0060ac..6a7383fc 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -22,7 +22,7 @@
         <div class="row around-xs space-bottom-large" ng-hide="app.writer.progress == 100 && !app.writer.isBurning()">
           <div class="col-xs">
             <div class="box text-center">
-              <hero-icon path="images/image.svg">SELECT IMAGE</hero-icon>
+              <hero-icon path="images/image.svg" label="SELECT IMAGE"></hero-icon>
               <hero-badge class="block space-vertical-medium">1</hero-badge>
 
               <div class="space-vertical-large">
@@ -41,7 +41,7 @@
               <div class="step-border-left" ng-disabled="!app.selection.hasImage()"></div>
               <div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>
 
-              <hero-icon path="images/drive.svg" ng-disabled="!app.selection.hasImage()">SELECT DRIVE</hero-icon>
+              <hero-icon path="images/drive.svg" ng-disabled="!app.selection.hasImage()" label="SELECT DRIVE"></hero-icon>
               <hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage()">2</hero-badge>
 
               <div class="space-vertical-large">
@@ -72,7 +72,7 @@
 
           <div class="col-xs">
             <div class="box text-center">
-              <hero-icon path="images/burn.svg" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">BURN IMAGE</hero-icon>
+              <hero-icon path="images/burn.svg" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()" label="BURN IMAGE"></hero-icon>
               <hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</hero-badge>
 
               <div class="space-vertical-large">