From 703919cd103710558d5ed50d8b1e40004cce7e8e Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Tue, 9 Nov 2021 13:09:34 -0500
Subject: [PATCH] Updated listButton styles. Add error state with dynamic error
 message.

---
 src/layouts/componentTest/componentTest.vue |  1 +
 src/styles/commonButtonStyles.scss          | 21 +++++++++++++++++++--
 src/uxComponents/listButton/listButton.vue  | 21 +++++++++++++--------
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index 83bd541b8..0f3c70aef 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -41,6 +41,7 @@
       <div class="col my-3 d-flex align-items-center">
         <listButton
           buttonText="List Button"
+          errorText="Test error message"
         />
       </div>
     </div>
diff --git a/src/styles/commonButtonStyles.scss b/src/styles/commonButtonStyles.scss
index b6f7896f0..4f409cb76 100644
--- a/src/styles/commonButtonStyles.scss
+++ b/src/styles/commonButtonStyles.scss
@@ -91,11 +91,28 @@
     height: 48px;
     transition: all 150ms linear;
     border-radius: $border-radius-lg;
-    border: 1px solid rgba($gray-300,.3);
+    border: 1px solid $gray-500;
     width: 100%;
+    &:hover {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible { // Keyboard focus for accessibility
-      box-shadow: none;
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:active {
+      background: $blue-100;
+      border: 1px solid $blue;
+    }
+    + label {
+      display: none;
+    }
+    &.error {
+      border: 1px solid $danger;
+      ~ label {
+        display: flex;
+        color: $danger;
+      }
     }
     &.button-loader {
       padding: 0 40px 0 12px;
diff --git a/src/uxComponents/listButton/listButton.vue b/src/uxComponents/listButton/listButton.vue
index 143dddae6..e6297fe60 100644
--- a/src/uxComponents/listButton/listButton.vue
+++ b/src/uxComponents/listButton/listButton.vue
@@ -1,22 +1,27 @@
 <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>
+  <div class="d-flex flex-column w-100">
+    <button
+      class="btn list-button d-flex align-items-center"
+      v-on:click="showLoader()"
+      v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
+      >
+      {{ this.buttonText }}
+    </button>
+    <label class="small mt-1">{{ this.errorText }}</label>
+  </div>
 </template>
 
 <script>
 export default {
   name: "listButton",
   props: {
-    buttonText: String
+    buttonText: String,
+    errorText: String
   },
   data() {
     return {
       isLoading: false,
+      isError: false
     };
   },
   methods: {