Merge pull request #43 from Safelite/brm-csr-116-secondary-buttons

Create buttonSecondary component.

src/layouts/componentTest/componentTest.vue

@@ -30,6 +30,13 @@
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonSecondary
+          buttonText="Secondary"
+        />
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <listButton
@@ -84,12 +91,14 @@
 
 <script>
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
 import listButton from "@/uxComponents/listButton/listButton";
 export default {
   name: "App",
   components: {
     buttonPrimary,
+    buttonSecondary,
     radioCard,
     listButton
   },

src/styles/commonButtonStyles.scss

@@ -43,6 +43,48 @@
       border-radius: $border-radius-lg;
     }
   }
+  &.btn-secondary {
+    position: relative;
+    background: transparent;
+    border: 1px solid $blue;
+    border-radius: $border-radius-lg;
+    height: 48px;
+    color: $blue;
+    transition: all 150ms linear;
+    &:hover {
+      color: $white;
+      background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+    }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+    }
+    &.button-loader {
+      padding: 0 40px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner-blue.svg);
+        position: absolute;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
+    }
+    &:disabled {
+      background: transparent;
+      color: $gray !important;
+      height: 48px;
+      border: 1px solid $gray-300;
+      border-radius: $border-radius-lg;
+    }
+  }
   &.list-button {
     position: relative;
     background: $white;

src/styles/uxVariables.scss

@@ -10,7 +10,7 @@ $blue-200:   #C1DFEE;
 $blue-300:   #9FCEE6;
 $blue-400:   #69ADCF;// Used in theme
 $blue-500:   #3B8FB8;
-$blue:       #167CAC;// Default Blue
+$blue:       #1574A1;// Default Blue
 $blue-700:   #06577C;
 $blue-800:   #003D58;
 $blue-900:   #002433;// Used in theme

src/uxComponents/buttonSecondary/buttonSecondary.spec.js

@@ -0,0 +1 @@
+test.todo('some test to be written in the future');

src/uxComponents/buttonSecondary/buttonSecondary.vue

@@ -0,0 +1,31 @@
+<template>
+  <button
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    class="btn btn-secondary d-flex align-items-center"
+    v-on:click="showLoader()"
+    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
+    >
+    {{ this.buttonText }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "buttonSecondary",
+  props: {
+    buttonText: String
+  },
+  data() {
+    return {
+      isLoading: false,
+      isDisabled: false,
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
+    },
+  },
+};
+</script>