Merge pull request #171 from Safelite/CSR-262-validation-styling

CSR-266 add has-error css styling for validation.

src/App.vue

@@ -7,4 +7,5 @@
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-list-styles.scss";
   @import "@/styles/common-typography-styles.scss";
+  @import "@/styles/error-styles.scss";
 </style>

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

@@ -9,10 +9,11 @@
   <div class="row g-2 mt-6 mx-4">
     <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
     <p class="mx-2">NOTE: This page is testing functionality only; styling will not match Figma mocks.</p>
-  </div> 
+  </div>
 
   <div class="row g-2 mt-6 mx-4">
     <h4 class="mx-2 mt-4 mb-0">How many chips are we repairing? (Required)</h4>
+    <fieldset>
     <div
       role="radiogroup"
       aria-labelledby="demo-group"
@@ -61,6 +62,7 @@
         screenReaderOnlyText=" opens new window"
       />
     </div>
+  </fieldset>
     <div class="row px-3 form-test-error">
       <error-message name="demo"></error-message>
     </div>
@@ -292,7 +294,7 @@ export default {
         // passwordConfirmation: Yup.string()
         //  .required()
         //  .oneOf([Yup.ref("password")], "Passwords do not match"),
-      }).test('repair-replace-conflict', 
+      }).test('repair-replace-conflict',
         null, // need to pass null as error message so it won't get added to list of errors
         function(value) {
           // whole form test
@@ -352,7 +354,4 @@ export default {
   .form-test-invalid {
     opacity: 0.5;
   }
-  .has-error {
+</style>
-    border: 1px solid red;
-  }
-</style>

src/styles/error-styles.scss

@@ -0,0 +1,10 @@
+.has-error {
+  .list-button,
+  .list-card,
+  .list-button-horizontal {
+    color: $red;
+    label {
+      border: 1px solid $red;
+    }
+  }
+}