From ccc0f485b0e771f5cb07edae5438c320555094cb Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Thu, 28 Oct 2021 17:34:31 -0400
Subject: [PATCH] Update buttonPrimary, listButton, radioCard.

NOTE: disabled button now has dynamic aria-disabled element.
---
 src/App.vue                                   | 18 ---------
 src/assets/scss/components/_buttons.scss      | 40 +++++++------------
 .../buttonPrimary/buttonPrimary.vue           |  5 ++-
 src/uxComponents/listButton/listButton.vue    |  2 +-
 src/uxComponents/radioCard/radioCard.vue      |  8 ++--
 5 files changed, 23 insertions(+), 50 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7f44f49fa..640ecadbb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,23 +36,6 @@
       <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
-          buttonText="Primary Focus"
-          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>
@@ -60,7 +43,6 @@
       <div class="col my-3 d-flex align-items-center">
         <listButton
           buttonText="List Button"
-          class="list-button"
         />
       </div>
     </div>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index 2a8e40bf3..d39f71bcc 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -1,7 +1,6 @@
 //Custom button styles
 .btn {
-  &.btn-primary,
-  &.btn-primary-focus {
+  &.btn-primary {
     position: relative;
     background: $blue-700;
     background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%);
@@ -13,6 +12,12 @@
     &: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 {
@@ -31,30 +36,13 @@
       }
     }
   }
-  &.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
-    margin: 5px;//Because :after is position absolute and isn't accounted for in DOM
-    &:before {
-      content: "";
-      position: absolute;
-      width: calc(100% + 12px);
-      height: calc(100% + 12px);
-      border: 3px solid $blue-700;
-      background-color: $white;
-      border-radius: 12px;
-      left: -6px;
-      top: -6px;
-      z-index: -1;
-    }
-  }
-  &.btn-funnel {
-    display: flex;
-    justify-content: space-between;
+  &:disabled {
+    background: $gray-100 !important;
+    background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
+    color: $gray-400 !important;
+    height: 48px;
+    border: none;
+    border-radius: $border-radius-lg;
   }
   &.list-button {
     position: relative;
diff --git a/src/uxComponents/buttonPrimary/buttonPrimary.vue b/src/uxComponents/buttonPrimary/buttonPrimary.vue
index 194c1483f..5e0dd1dcf 100644
--- a/src/uxComponents/buttonPrimary/buttonPrimary.vue
+++ b/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: {
diff --git a/src/uxComponents/listButton/listButton.vue b/src/uxComponents/listButton/listButton.vue
index e39a10a09..143dddae6 100644
--- a/src/uxComponents/listButton/listButton.vue
+++ b/src/uxComponents/listButton/listButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="btn d-flex align-items-center"
+    class="btn list-button d-flex align-items-center"
     v-on:click="showLoader()"
     v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
     >
diff --git a/src/uxComponents/radioCard/radioCard.vue b/src/uxComponents/radioCard/radioCard.vue
index 805b6d7cd..70a7cec82 100644
--- a/src/uxComponents/radioCard/radioCard.vue
+++ b/src/uxComponents/radioCard/radioCard.vue
@@ -3,12 +3,12 @@
     <input
       type="radio"
       class="position-absolute opacity-0"
-      v-bind:class="className"
-      v-bind:id="radioID"
-      v-bind:name="groupName"
+      :class="className"
+      :id="radioID"
+      :name="groupName"
       :value="radioLabel"
       v-model="picked"
-      v-bind:tabindex="tabIndex"
+      :tabindex="tabIndex"
     />
     <label
       v-bind:for="radioID"