Merge pull request #991 from Safelite/feature/humphries/INSR-7934

INSR-7934: Update validation styles and focus behavior

src/App.vue

@@ -65,7 +65,7 @@ window.onerror = (msg, url, line, col, error) => {
    @import "./node_modules/bootstrap/scss/bootstrap";
    @import "@/styles/common-styles.scss";
    @import "@/styles/common-typography-styles.scss";
-   @import "@/styles/common-error-styles.scss";
+   @import "@/styles/common-validation-styles.scss";
    @import "@/styles/common-animations.scss";
    @import "@/styles/shared-input-button-styles.scss";
    @import "@/styles/client-customizations.scss";

src/digital-components/dropdown-question/dropdown-question.vue

@@ -1,7 +1,10 @@
 <template>
     <div
         class="dropdown-question"
-        :class="(meta.touched && errors && errors.length) || hasError ? 'has-error' : ''">
+        :class="{
+            'has-error' : (meta.touched && errors && errors.length && !isDisabled) || hasError,
+            'has-success': (meta.touched && (!errors || !errors.length) && !isDisabled)
+        }">
         <label
             :for="inputId"
             :aria-label="questionText"

src/mixins/base-form-mixin.js

@@ -20,7 +20,7 @@ export default {
             const errorNames = errors ? Object.keys(errors) : [];
             const firstErrorEl = errorNames[0];
             if (firstErrorEl) {
-                const qsString = `[data-focus-target="${firstErrorEl}"]`;
+                const qsString = `[name="${firstErrorEl}"]`;
                 const el = document.querySelector(qsString);
                 if (el !== null) {
                     el.focus();

src/styles/common-validation-styles.scss

@@ -131,6 +131,136 @@ html {
         }
     }
 
+    .has-success {
+
+        // START HOVER
+        &.list-button-horizontal,
+        &.list-button,
+        &.list-button.list-group,
+        &.list-card &.option-label {
+            border: 1px solid $success;
+            position: relative;
+            z-index: 4;
+
+            .button-content {
+                border: none;
+            }
+
+            &:hover {
+                @include box-shadow-hover($green-200);
+                z-index: 5;
+            }
+
+            input[type="radio"]:focus+.list-button-content {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+        }
+
+        &.list-card {
+            border: 1px solid $success;
+        }
+
+        &.ui-radio {
+            &:hover {
+
+                input[type="radio"],
+                input[type="checkbox"] {
+                    @include box-shadow-hover($green-200);
+                }
+            }
+        }
+
+        .form-check-input {
+            &:focus {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+        }
+
+        // END HOVER
+
+        &.list-button,
+        &.list-card {
+            color: $success;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 0 2.5px $success;
+            }
+
+            input[type="checkbox"]:checked+label {
+                box-shadow: 0 0 0 1px $success;
+            }
+
+            &:hover {
+                border-radius: 0.5rem;
+            }
+        }
+
+        &.list-button-horizontal {
+            color: $success;
+
+            input[type="checkbox"]:focus+label,
+            input[type="radio"]:focus+label {
+                box-shadow: 0 0 1px $success;
+            }
+        }
+
+        &.grid-item {
+            input[type="radio"] {
+                +label {
+                    border: 1px solid $success;
+
+                    &:hover {
+                        background-color: $blue-100;
+                        box-shadow: 0px 0px 0px 4px $green-200;
+                    }
+                }
+            }
+        }
+
+        &.ui-radio,
+        &.ui-checkbox {
+
+            input[type="checkbox"],
+            input[type="radio"],
+            input[type="radio"]+label:before,
+            input[type="checkbox"]+label:before {
+                border: 1px solid $success;
+                background-color: initial;
+            }
+
+            input[type="checkbox"]:checked+label:before {
+                border: 1px solid $blue;
+            }
+        }
+
+        &.textbox-question,
+        &.dropdown-question {
+            p {
+                color: $success;
+            }
+
+            input,
+            input.form-control,
+            select,
+            select.form-select,
+            input:focus,
+            input.form-control:focus,
+            input.form-control:focus-within,
+            select:focus,
+            select.form-select:focus {
+                border-color: $success;
+            }
+
+            select,
+            select.form-select,
+            select:focus,
+            select.form-select:focus {
+                background-image: url(~@/assets/img/icons/select-success.png);
+            }
+        }
+    }
+
     //Quote page radio button group
     .package-main {
         .package-wrapper {