Update buttonPrimary, listButton, radioCard.

NOTE: disabled button now has dynamic aria-disabled element.

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>

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,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 {
+  &: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;
-  &.btn-primary-focus {
+    border: none;
-    position: relative;//Required for :after pseduo to position correctly
+    border-radius: $border-radius-lg;
-    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;
   }
   &.list-button {
     position: relative;

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.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']"
     >

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"