From 5d52b19c2b52654e18e8df47f9e123b0bc3d36b6 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jviottidc@gmail.com>
Date: Wed, 30 Mar 2016 14:11:18 -0400
Subject: [PATCH] Refactor hero-button as a scss component

---
 build/css/main.css                       | 54 ++++++++++++++++++----
 lib/components/hero-button.html          | 58 ------------------------
 lib/components/hero-progress-button.html |  5 +-
 lib/index.html                           |  1 -
 lib/partials/main.html                   |  9 ++--
 lib/partials/success.html                |  9 ++--
 lib/scss/components/_button.scss         | 56 +++++++++++++++++++++++
 lib/scss/main.scss                       | 16 +------
 8 files changed, 114 insertions(+), 94 deletions(-)
 delete mode 100644 lib/components/hero-button.html
 create mode 100644 lib/scss/components/_button.scss

diff --git a/build/css/main.css b/build/css/main.css
index b7cd87be..ca45ff9b 100644
--- a/build/css/main.css
+++ b/build/css/main.css
@@ -5915,21 +5915,57 @@ button.close {
   font-size: 11px;
   margin-bottom: 0; }
 
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+button.btn {
+  padding: 10px;
+  padding-top: 11px;
+  border-radius: 2px;
+  border: none;
+  letter-spacing: 0.5px;
+  outline: none;
+  position: relative; }
+  button.btn[disabled] {
+    background-color: #313339;
+    color: #787c7f;
+    pointer-events: none; }
+    button.btn[disabled]:hover {
+      background-color: #36383e; }
+
+.btn:not(.btn-link) {
+  min-width: 170px; }
+
+.btn > .glyphicon {
+  top: 2px;
+  margin-right: 2px; }
+
+/*
+ * Remove blue/orange outline
+ * !important is needed here for some reason
+ * despite the rule having top precedence.
+ */
+button.btn:focus {
+  outline: none !important; }
+
 html {
   background-color: #535760; }
 
 hero-icon[disabled] .caption {
   color: #787c7f; }
 
-hero-button .btn {
-  min-width: 170px; }
-  hero-button .btn[disabled] {
-    background-color: #313339;
-    color: #787c7f;
-    pointer-events: none; }
-    hero-button .btn[disabled]:hover {
-      background-color: #36383e; }
-
 hero-progress-button .bar {
   background: #6ca1e0; }
 
diff --git a/lib/components/hero-button.html b/lib/components/hero-button.html
deleted file mode 100644
index dfe1a4c1..00000000
--- a/lib/components/hero-button.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<dom-module id="hero-button">
-  <template>
-    <style>
-      :host ::content button.btn {
-        padding: 10px;
-        padding-top: 11px;
-
-        border-radius: 2px;
-        border: none;
-
-        letter-spacing: 0.5px;
-        outline: none;
-
-        position: relative;
-      }
-
-      :host ::content .glyphicon {
-        top: 2px;
-        margin-right: 2px;
-      }
-
-      /*
-       * Remove blue/orange outline
-       * !important is needed here for some reason
-       * despite the rule having top precedence.
-       */
-      :host ::content button.btn:focus {
-        outline: none !important;
-      }
-    </style>
-
-    <button type="button" class="btn" disabled="{{disabled}}">
-      <content></content>
-    </button>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'hero-button',
-      properties: {
-        disabled: {
-          type: String
-        },
-        type: {
-          type: String,
-          value: 'primary'
-        }
-      },
-      ready: function() {
-        'use strict';
-
-        this.querySelector('.btn').className += ` btn-${this.type}`;
-      }
-    });
-  </script>
-</dom-module>
diff --git a/lib/components/hero-progress-button.html b/lib/components/hero-progress-button.html
index 89d78ea8..26afd046 100644
--- a/lib/components/hero-progress-button.html
+++ b/lib/components/hero-progress-button.html
@@ -1,5 +1,4 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="hero-button.html">
 
 <!-- From http://tympanus.net/Development/ProgressButtonStyles/ -->
 <dom-module id="hero-progress-button">
@@ -27,12 +26,12 @@
       }
     </style>
 
-    <hero-button disabled="{{disabled}}">
+    <button class="btn btn-primary" disabled="{{disabled}}">
       <span class="text">
         <content></content>
       </span>
       <span class="bar"></span>
-    </hero-button>
+    </button>
   </template>
 
   <script>
diff --git a/lib/index.html b/lib/index.html
index 00668f6c..39cc60c0 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" type="text/css" href="css/angular.css">
 
     <link rel="import" href="components/hero-icon.html">
-    <link rel="import" href="components/hero-button.html">
     <link rel="import" href="components/hero-progress-button.html">
     <link rel="import" href="components/hero-tick.html">
 
diff --git a/lib/partials/main.html b/lib/partials/main.html
index 40273f8f..513403f7 100644
--- a/lib/partials/main.html
+++ b/lib/partials/main.html
@@ -6,7 +6,7 @@
 
       <div class="space-vertical-large">
         <div ng-hide="app.selection.hasImage()">
-          <hero-button ng-click="app.selectImage()">Select image</hero-button>
+          <button class="btn btn-primary" ng-click="app.selectImage()">Select image</button>
           <p class="step-footer tiny">*supported files: .img, .iso, .zip</p>
         </div>
         <div ng-show="app.selection.hasImage()">
@@ -30,8 +30,9 @@
 
           <div ng-show="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
             <div class="btn-group" uib-dropdown>
-              <hero-button ng-disabled="!app.selection.hasImage()"
-                uib-dropdown-toggle>Select drive</hero-button>
+              <button class="btn btn-primary"
+                ng-disabled="!app.selection.hasImage()"
+                uib-dropdown-toggle>Select drive</button>
 
               <ul class="dropdown-menu">
                 <li ng-repeat="drive in app.scanner.drives">
@@ -42,7 +43,7 @@
           </div>
 
           <div ng-hide="app.scanner.hasAvailableDrives() || !app.selection.hasImage()">
-            <hero-button type="danger">Connect a drive</hero-button>
+            <button class="btn btn-danger">Connect a drive</button>
           </div>
 
         </div>
diff --git a/lib/partials/success.html b/lib/partials/success.html
index f543d3d4..416f6d82 100644
--- a/lib/partials/success.html
+++ b/lib/partials/success.html
@@ -11,9 +11,10 @@
           <div class="box">
             <p class="soft button-label">Would you like to burn the same image?</p>
 
-            <hero-button ng-click="finish.restart({ preserveImage: true })">
+
+            <button class="btn btn-primary" ng-click="finish.restart({ preserveImage: true })">
               Use <b>same</b> image
-            </hero-button>
+            </button>
           </div>
         </div>
 
@@ -23,9 +24,9 @@
           <div class="box">
             <p class="soft button-label">Would you like to burn a new image?</p>
 
-            <hero-button ng-click="finish.restart()">
+            <button class="btn btn-primary" ng-click="finish.restart()">
               Use <b>new</b> image
-            </hero-button>
+            </button>
           </div>
         </div>
       </div>
diff --git a/lib/scss/components/_button.scss b/lib/scss/components/_button.scss
new file mode 100644
index 00000000..865a8dad
--- /dev/null
+++ b/lib/scss/components/_button.scss
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2016 Resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+button.btn {
+  padding: 10px;
+  padding-top: 11px;
+
+  border-radius: 2px;
+  border: none;
+
+  letter-spacing: 0.5px;
+  outline: none;
+
+  position: relative;
+
+  &[disabled] {
+    background-color: $btn-disabled;
+    color: $color-disabled;
+    pointer-events: none;
+
+    &:hover {
+      background-color: lighten($btn-disabled, 2);
+    }
+  }
+}
+
+.btn:not(.btn-link) {
+  min-width: $btn-min-width;
+}
+
+.btn > .glyphicon {
+  top: 2px;
+  margin-right: 2px;
+}
+
+/*
+ * Remove blue/orange outline
+ * !important is needed here for some reason
+ * despite the rule having top precedence.
+ */
+button.btn:focus {
+  outline: none !important;
+}
diff --git a/lib/scss/main.scss b/lib/scss/main.scss
index 70162032..95bf23d4 100644
--- a/lib/scss/main.scss
+++ b/lib/scss/main.scss
@@ -23,7 +23,6 @@ $font-size-base: 13px;
 $cursor-disabled: initial;
 $color-disabled: rgb(120, 124, 127);
 $btn-disabled: rgb(49, 51, 57);
-$btn-padding: 10px;
 $btn-min-width: 170px;
 $link-color: $gray-light;
 $link-hover-decoration: none;
@@ -33,6 +32,7 @@ $link-hover-decoration: none;
 @import "./modules/space";
 @import "./components/badge";
 @import "./components/caption";
+@import "./components/button";
 
 // Prevent white flash when running application
 html {
@@ -43,20 +43,6 @@ hero-icon[disabled] .caption {
   color: $color-disabled;
 }
 
-hero-button .btn {
-  min-width: $btn-min-width;
-
-  &[disabled] {
-    background-color: $btn-disabled;
-    color: $color-disabled;
-    pointer-events: none;
-
-    &:hover {
-      background-color: lighten($btn-disabled, 2);
-    }
-  }
-}
-
 hero-progress-button .bar {
   background: lighten($brand-primary, 5);
 }