Merge pull request #25 from Safelite/brm-list-button

Add List Button.

src/App.vue

@@ -36,23 +36,13 @@
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
           buttonText="Primary"
-          class="btn-primary"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
+        <listButton
-          buttonText="Primary Focus"
+          buttonText="List Button"
-          class="btn-primary-focus"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
-          buttonText="Disabled"
-          class="disabled"
         />
       </div>
     </div>
@@ -67,11 +57,13 @@
 <script>
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
+import listButton from "@/uxComponents/listButton/listButton";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     radioCard,
+    listButton
   },
 };
 </script>

src/assets/img/icons/button-spinner-green.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
+  <path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z" fill="#73e5b9"/>
+</svg>

src/assets/scss/components/_buttons.scss

@@ -1,7 +1,6 @@
 //Custom button styles
 .btn {
-  &.btn-primary,
+  &.btn-primary {
-  &.btn-primary-focus {
     position: relative;
     background: $blue-700;
     background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%);
@@ -13,10 +12,16 @@
     &:hover {
       background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
     }
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+      background-color: #da291c;
+      border-color: #da291c;
+    }
     &.button-loader {
       padding: 0 40px 0 12px;
       &:after {
-        content: url(../../assets/img/icons/button-spinner.svg);
+        content: url(../../assets/img/icons/button-spinner-white.svg);
         position: absolute;
         right: 14px;
         width: 16px;
@@ -31,31 +36,40 @@
       }
     }
   }
-  &.disabled {
+  &:disabled {
-    background: $gray-100;
+    background: $gray-100 !important;
-    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
-    color: $gray-400;
+    color: $gray-400 !important;
+    height: 48px;
+    border: none;
+    border-radius: $border-radius-lg;
   }
-  &.btn-primary-focus {
+  &.list-button {
-    position: relative;//Required for :after pseduo to position correctly
+    position: relative;
-    margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
+    background: $white;
-    &:before {
+    height: 48px;
-      content: "";
+    transition: all 150ms linear;
-      position: absolute;
+    border-radius: $border-radius-lg;
-      width: calc(100% + 12px);
+    border: 1px solid rgba($gray-300,.3);
-      height: calc(100% + 12px);
+    width: 100%;
-      border: 3px solid $blue-700;
+    &.button-loader {
-      background-color: $white;
+      padding: 0 40px 0 12px;
-      border-radius: 12px;
+      &:after {
-      left: -6px;
+        content: url(../../assets/img/icons/button-spinner-green.svg);
-      top: -6px;
+        position: absolute;
-      z-index: -1;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
     }
   }
-  &.btn-funnel {
-    display: flex;
-    justify-content: space-between;
-  }
 }
 // Non-Bootstrap button
 // Intended to be used without .btn class
@@ -89,4 +103,4 @@
     outline: none;
     box-shadow: 0 0 0 2px $blue;
   }
-}
+}

src/uxComponents/buttonPrimary/buttonPrimary.vue

@@ -1,6 +1,8 @@
 <template>
   <button
-    class="btn d-flex align-items-center"
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    class="btn btn-primary d-flex align-items-center"
     v-on:click="showLoader()"
     v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
     >
@@ -17,6 +19,7 @@ export default {
   data() {
     return {
       isLoading: false,
+      isDisabled: false,
     };
   },
   methods: {

src/uxComponents/listButton/listButton.spec.js

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

src/uxComponents/listButton/listButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="btn list-button 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: "listButton",
+  props: {
+    buttonText: String
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
+    },
+  },
+};
+</script>

src/uxComponents/radioCard/radioCard.vue

@@ -3,12 +3,12 @@
     <input
       type="radio"
       class="position-absolute opacity-0"
-      v-bind:class="className"
+      :class="className"
-      v-bind:id="radioID"
+      :id="radioID"
-      v-bind:name="groupName"
+      :name="groupName"
       :value="radioLabel"
       v-model="picked"
-      v-bind:tabindex="tabIndex"
+      :tabindex="tabIndex"
     />
     <label
       v-bind:for="radioID"