From 8faf7c1b2c227f0b1beb10494fc3fcae43c23457 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Wed, 20 Oct 2021 12:17:23 -0400
Subject: [PATCH] Re-push button updates.

---
 src/Funnel1.vue                          | 75 +++++++++++++-----------
 src/assets/scss/components/_buttons.scss | 10 ++--
 src/components/buttons/buttonPrimary.vue | 24 +++++++-
 3 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index f55bfe40c..0998aa9d8 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -1,54 +1,63 @@
 <template>
-<router-view></router-view>
-<div class="container-fluid">
+  <div class="container-fluid">
     <div class="row">
-        <div class="col my-3 d-flex justify-content-center">
-            <vehicleImage />
-        </div>
+      <div class="col my-3 d-flex justify-content-center">
+        <vehicleImage/>
+      </div>
     </div>
     <div class="row">
-        <div class="col">
-            <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
-            <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
-        </div>
+      <div class="col">
+        <p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
+        <p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
+      </div>
     </div>
     <div class="row">
-        <div class="col">
-            <buttonFunnel />
-            <confetti />
-        </div>
+      <div class="col">
+        <buttonFunnel/>
+        <confetti/>
+      </div>
     </div>
     <div class="row mt-5">
-        <imageButton btnText="windshield-damage.svg" altText="Windshield" damageTitle="Windshield" ariaLabel="Windshield" />
-        <imageButton btnText="side-window-damage.svg" altText="Side Window" damageTitle="Side door" ariaLabel="Side door" />
-        <imageButton btnText="back-glass-damage.svg" altText="Back Glass" damageTitle="Back glass" ariaLabel="Back glass" />
+      <imageButton
+        btnText="windshield-damage.svg"
+        altText="Windshield"
+        damageTitle="Windshield"
+        ariaLabel="Windshield"
+      />
+      <imageButton
+        btnText="side-window-damage.svg"
+        altText="Side Window"
+        damageTitle="Side door"
+        ariaLabel="Side door"
+      />
+      <imageButton
+        btnText="back-glass-damage.svg"
+        altText="Back Glass"
+        damageTitle="Back glass"
+        ariaLabel="Back glass"
+      />
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
-          btnText="Primary"
+          buttonText="Primary"
+          buttonType="btn-primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimaryFocus
-          btnText="Primary Focus"
+        <buttonPrimary
+          buttonText="Primary Focus"
+          buttonType="btn-primary-focus"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary class="button-loader"
-          btnText="w/Loader"
-          btnClass="test"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonDisabled
-          btnText="Disabled"
+        <buttonPrimary
+          buttonText="Disabled"
+          buttonType="disabled"
         />
       </div>
     </div>
@@ -61,8 +70,6 @@
   import imageButton from './components/imageButton';
   import confetti from './components/confetti';
   import buttonPrimary from './components/buttons/buttonPrimary';
-  import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
-  import buttonDisabled from './components/buttons/buttonDisabled';
 
 
   export default {
@@ -72,9 +79,7 @@
       vehicleImage,
       imageButton,
       confetti,
-      buttonPrimary,
-      buttonPrimaryFocus,
-      buttonDisabled
+      buttonPrimary
     }
-}
+  }
 </script>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index efbb34ded..0d0608dd7 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -30,11 +30,11 @@
         }
       }
     }
-    &:disabled {
-      background: $gray-100;
-      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
-      color: $gray-400;
-    }
+  }
+  &.disabled {
+    background: $gray-100;
+    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+    color: $gray-400;
   }
   &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
index 50cd6daa7..abc24e291 100644
--- a/src/components/buttons/buttonPrimary.vue
+++ b/src/components/buttons/buttonPrimary.vue
@@ -1,10 +1,30 @@
 <template>
-  <button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</button>
+  <button
+    type="button"
+    class="btn d-flex align-items-center"
+    v-on:click="showLoader()"
+    v-bind:class="[(this.isLoading ? 'button-loader' : 'not-loading'),this.buttonType]"
+    >
+    {{ this.buttonText }}
+  </button>
 </template>
 
 <script>
 export default {
   name: 'buttonPrimary',
-  props: ['btnText']
+  props: {
+    buttonText: String,
+    buttonType: String
+  },
+  data(){
+    return {
+      isLoading: false
+    }
+  },
+  methods: {
+    showLoader(){
+      this.isLoading = true;
+    }
+  }
 }
 </script>