Merge branch 'develop' into feature/CSR-268_fix

src/common-components/button-question/button-question.vue

@@ -37,7 +37,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+    <div class="row mt-2 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>

src/layouts/component-test/component-test.vue

@@ -18,7 +18,6 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">
@@ -62,7 +61,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain buttonText="secondary" loaderColor="white" sizeInRem="1" />
+        <buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
       </div>
     </div>
     <div class="row">

src/layouts/form-test/form-test.vue

@@ -8,7 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ values, meta, errors }"
-        >        
+        >
             <damageLocationQuestion
               ref="damageLocation"
               v-model="selectedDamageLocations"
@@ -20,6 +20,7 @@
               :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
             />
             <alert
+              class="my-3"
               v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"

src/styles/common-error-styles.scss

@@ -1,6 +1,19 @@
 .has-error {
   &.list-button,
-  &.list-card,
+  &.list-card {
+    border: 1px solid transparent;
+    color: $red;
+    label {
+      border: 1px solid $red;
+      border-radius: .5rem;
+    }
+  }
+  input[type=checkbox]:focus + label,
+  input[type=radio]:focus + label,
+  input[type=checkbox]:checked + label,
+  input[type=radio]:checked + label {
+    box-shadow: 0 0 0 2.5px transparent !important;
+  }
   &.list-button-horizontal {
     color: $red;
     label {
@@ -11,14 +24,16 @@
 
 .form-test-error {
   color: $red;
-  font-weight: bold;
+  font-size: .875rem;
+  font-weight: 500;
 }
 
 .form-test-invalid {
   &.btn.btn-primary {
     color: $gray;
     background: $gray-200;
-    cursor: default;
+    cursor: pointer;
+    pointer-events: all;
   }
   &.btn.btn-primary:hover,
   &.btn.btn-primary:focus,
@@ -28,4 +43,4 @@
     box-shadow: none;
   }
 
-}
+}

src/ux-components/button-main/button-main.vue

@@ -1,8 +1,8 @@
 <template>
   <button
     :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-2"
+    class="btn d-flex align-items-center py-3 px-4 delay"
-    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >
     <span class="m-0">{{ this.buttonText }}</span>
@@ -51,12 +51,10 @@ export default {
 .btn {
   &.btn-primary {
     position: relative;
-    background: $blue-700;
+    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
-    @include blue-gradient;
     border: none;
     border-radius: $border-radius-lg;
     color: $white;
-    transition: all 150ms linear;
     justify-content: center;
     &:hover {
       background: linear-gradient(
@@ -71,19 +69,32 @@ export default {
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
       color: $white;
-      @include blue-gradient;
-    }
-    &:disabled {
-      background: $gray-100 !important;
       background: linear-gradient(
         270deg,
-        $gray-100 0%,
+        rgba(6, 87, 124, 1) 0%,
-        $gray-100 100%
+        rgba(6, 87, 124, 1) 100%
+      );
+    }
+    &:disabled {
+      background: $gray-200 !important;
+      background: linear-gradient(
+        270deg,
+        $gray-200 0%,
+        $gray-200 100%
       ) !important;
-      color: $gray !important;
+      color: $gray-550 !important;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
+    }
+    &.has-loader {
+      color: $white;
+      background: $blue-700;
+    }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
     }
   }
   &.btn-secondary {
@@ -112,6 +123,13 @@ export default {
       border: 1px solid $gray-300;
       border-radius: $border-radius-lg;
     }
+    &.has-loader {
+      color: $white;
+      @include blue-gradient;
+    }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
+    }
   }
 }
 </style>

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -166,6 +166,7 @@ export default {
     label {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
+      z-index: 2;
     }
   }
   &:last-of-type {

src/ux-components/list-card/list-card.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="'col' + colLength">
-    <div 
+    <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
     >
@@ -108,11 +108,11 @@ export default {
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const { 
+    const {
         value: inputValue,
         handleChange,
         errors,
-    } = useField(props.groupName, props.validationRules, 
+    } = useField(props.groupName, props.validationRules,
     {
       type: inputType,
       checkedValue: props.value,
@@ -155,6 +155,7 @@ export default {
         cursor: pointer;
       }
       p {
+        color: $gray-600;
         text-align: center;
         &.sub-copy {
           color: $gray-550;
@@ -170,6 +171,14 @@ export default {
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
+    &:checked + label {
+      p {
+        color: $black;
+      }
+      .sub-copy {
+        color: $gray-600;
+      }
+    }
     + label::before {
       content: "";
       position: absolute;