From 99deeca4a8be340b935d1fa1455576fe4d1a9816 Mon Sep 17 00:00:00 2001
From: Alex Humphries <Alex.Humphries@safelite.com>
Date: Mon, 29 Dec 2025 15:12:30 -0500
Subject: [PATCH] INSR-7934: Update validation styles and focus behavior

- common-error-styles.scss renamed to common-validation-styles.scss
- Added 'has-success' to dropdown-question component
- Updated dropdown-question to only show error/success when not disabled
- Fixed issue with focusing first invalid input in base-form-mixin
---
 src/App.vue                                   |   2 +-
 src/assets/img/icons/select-success.png       | Bin 0 -> 1393 bytes
 .../dropdown-question/dropdown-question.vue   |   5 +-
 src/mixins/base-form-mixin.js                 |   2 +-
 ...les.scss => common-validation-styles.scss} | 130 ++++++++++++++++++
 5 files changed, 136 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/img/icons/select-success.png
 rename src/styles/{common-error-styles.scss => common-validation-styles.scss} (61%)

diff --git a/src/App.vue b/src/App.vue
index 81e59a4e..ae924427 100644
--- a/src/App.vue
+++ b/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";
diff --git a/src/assets/img/icons/select-success.png b/src/assets/img/icons/select-success.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdeb92f574ae01086881589fa3296600191e9db8
GIT binary patch
literal 1393
zcmV-%1&;cOP)<h;3K|Lk000e1NJLTq0015U001)x1^@s6fC9Km00001b5ch_0Itp)
z=>Px)D@jB_R9Fe^SX*dZMHrqrXE$*-Nvl@WTD(AFi4UR=vesC7m&WX-BuH9c1R-9a
z5Pi|^u2cwk$!--<3%+Qncmc6W+a%iyG_AI^mb@wAEiHJV5sR_fO?I2?o-_X6?w)jJ
z&e?Rg3FN^HEa#u^|NrkhXZD<#`G>QsXo0>+Cll6Ng;Z`nn~e|dt(JyYn-ENd!@{=r
zQJ$}qo9Bknk%^^J)o@iM97wjWV3sw+m<XyOJi|<LeKtC9TE)xvDi&^dy}jAW<xdL1
zmUz)|&c;l?Z)N(qfgip6I#!WzFuCa#VdYQJliscqsD1t`H+?OcX#c2+yL*NkQjzNt
zU5lBWKXheL<k5{$Y#~RbarI^tZhE_?_L4omUkGuxE0eP%!%u67MGkT`m(ndO+$(yG
z(TTGkQ}k*jgF2k^4>GX>ar|KGe&iq*93H*`RMxR0F}#!R{t-Qqgbs#Qgu3Y}@GIH$
zSEvoS;84-aJ<pdbm}uKBZ1K|Nu%g8oA8zn3S@-AjA5O@=n_hdYE}a`YDwqh#IBah4
z7inZ(cHue@OoqFKWxuE6G`>Ik{N{u7x%}nw5kQ~Y4f&k)6%%5)?&qfQL?)WrCF9By
z2NRKYA?&@BY-&M&)bQGtf8zUok#XI=wy)!kDKU9UFt$|jac*&LbY^0M0}ehd+>i*j
z<b^mwq5;Q=D+OHShPi4YHu#N<m$T~<k$Z$~9VhWcN(|>&ALkp=u@ub*j1^w4`egVn
z%eDt}QBs{WOrxVxQ4k^)ImktSy3qqc16sg%;El*KcFFph>|3XU3I@07e|<C?Pwi3h
z%6fsma2GwuCp4+(U(WCB8uJ0OW=-QqMCE!LnPJd!m)c#Kj5{hnH1fUwq2(7y{9(<z
zm|LRBph<t7=D-BemyM;$euH{^xjs0+rTd|2kmIcEpzm&XCVt=r8Jmp_F4A~k=76SQ
za=w+8wDWKvAasA|DLH5^Y?|Gkbi|<r%>r-Nr(I?xE6Qwd0vgboEzd&!!U!ykz`_Xp
zA4gz5=4y_;mPH#pS|e{PtWLC&e6hASKbL>Nnq$4b;nTzK(q8-V;_75{n!fdS4v=VL
zN$B3ubECKAhDP?!rSSRY;4X-kIO}L5cpvRRgd<wO5fFH_&9!T|+8Y6vB<g51(hh_j
zb(4x%AQA3y<JBQW4iVF{plOI&b1Q8<e$$=I7H`%k+BUoJ3V}i{ak#=s3z~%uJ@&e`
zWuK(6zg`XGQ>MvV$D^rZDn4_M_|{sMKuujEN0QjzwC7$)d_T-@C4sv_X+ibP78-U-
zzDpW~MO2a;L|r7~UN&N=_Bw<d#b2zQwm9Vre9A5#MHOvtpH`BnLqtm_+0<cFgu2h^
z!-p7pgKu^)=L$}_U<0lQ13)=RPre<t(y08jrmPfdVFjlSF!-oyaF?jWrI)D4cL@W`
z#8a=(EcOm;xuNh*=f^(7OyuCOfq53?!~rfRR=#=)BVb!B)I;K*%fYZ|C|haz!%W2S
zE7`4j9CE>-<4%A2t#$zUij$jj<7W;NwpzxEHs4XaifwKm`*K-*)5bH;>{LrtDR4$%
z#9{Y8DJD+P)47kFBqGNo!f$Jh`c)TVd;WDWuj>_sku)zSdl1GEq0jVfq&apBeXj-|
zVk$XKM1I+qOD9i9`+pLKFG4kCM)v`O4>4|^H&U@M(s3+IlK~bEd80t*)qHa`N5<f)
zx@62985!|!X#S2qtQN|@$hg@}M;84ctET-2aIh?|YslDI00000NkvXXu0mjfE99fA

literal 0
HcmV?d00001

diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index f0634855..69b8a530 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/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"
diff --git a/src/mixins/base-form-mixin.js b/src/mixins/base-form-mixin.js
index f292c0ba..314a1dd8 100644
--- a/src/mixins/base-form-mixin.js
+++ b/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();
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-validation-styles.scss
similarity index 61%
rename from src/styles/common-error-styles.scss
rename to src/styles/common-validation-styles.scss
index 5aacfa51..04dd7448 100644
--- a/src/styles/common-error-styles.scss
+++ b/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 {