Revert "Update buttons to use one button for all instances (so far)."

This reverts commit 868897f0d2.

src/Funnel1.vue

@@ -26,24 +26,29 @@
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
-          buttonText="Primary"
+          btnText="Primary"
-          buttonType="btn-primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
+        <buttonPrimaryFocus
-          buttonText="Primary Focus"
+          btnText="Primary Focus"
-          buttonType="btn-primary-focus"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
+        <buttonPrimary class="button-loader"
-          buttonText="Disabled"
+          btnText="w/Loader"
-          buttonType="disabled"
+          btnClass="test"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonDisabled
+          btnText="Disabled"
         />
       </div>
     </div>
@@ -56,6 +61,8 @@
   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 {
@@ -65,7 +72,9 @@
       vehicleImage,
       imageButton,
       confetti,
-      buttonPrimary
+      buttonPrimary,
+      buttonPrimaryFocus,
+      buttonDisabled
     }
 }
 </script>

src/assets/scss/components/_buttons.scss

@@ -30,11 +30,11 @@
         }
       }
     }
-  }
+    &:disabled {
-  &.disabled {
+      background: $gray-100;
-    background: $gray-100;
+      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
-    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+      color: $gray-400;
-    color: $gray-400;
+    }
   }
   &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly

src/components/buttons/buttonPrimary.vue

@@ -1,30 +1,10 @@
 <template>
-  <button
+  <button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</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: {
+  props: ['btnText']
-    buttonText: String,
-    buttonType: String
-  },
-  data(){
-    return {
-      isLoading: false
-    }
-  },
-  methods: {
-    showLoader(){
-      this.isLoading = true;
-    }
-  }
 }
 </script>