Merge branch 'develop' into SSR-348-site-header-unstick-2

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

@@ -67,7 +67,7 @@
                 </div>
             </fieldset>
         </div>
-        <div class="row form-test-error mt-1 px-5">
+        <div class="row form-test-error mt-1">
             <error-message
                 :name="formatString(groupName)"
                 v-if="!suppressError"></error-message>

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

@@ -1,5 +1,5 @@
 <template>
-    <div v-for="(q, i) in questions" :key="i">
+    <div v-for="(q, i) in questions" :key="i" class="questionBlock" >
         <transition appear name="fade" mode="out-in">
             <buttonQuestion
                 v-if="q.answerSelected || q.questionSequence === currentQuestionNum"
@@ -161,3 +161,12 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+
+.questionBlock:not(:nth-of-type(1)){
+    .button-question.radioQuestion >div {
+    margin-top: 0.73rem;
+    }
+}
+
+</style>

src/layouts/provider-preference/provider-preference.vue

@@ -14,7 +14,6 @@
                                     class="mt-0 body-text"
                                     ></div>
                                     <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" />
-
                                     <buttonQuestion
                                     cmsWidgetName="ServiceLocationQuestion"
                                     :questionText="questionText"
@@ -140,19 +139,19 @@ export default {
     }
 }
 #sub-header span{
-    color: #000000;
+color: $black;
 }
-.body-text p{
+.body-text {
-    margin-bottom: 0.5rem;
+color: $darker-gray;
+p, li {
+margin-bottom: 0.5rem;
 }
-.body-text li{
-    margin-bottom: 0.5rem;
 }
 .modal-link a{
-    color:#06577C;
+  color: $blue-700;
-    font-size: 14px;
+  font-size: 14px;
-    line-height: 24px;
+  line-height: 24px;
-    font-weight: 500;
+  font-weight: 500;
 }
 .question-text {
     margin-top: 0;

src/layouts/service-location/service-location.spec.js

@@ -0,0 +1,32 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import serviceLocationModal from "@/layouts/service-location/service-location.vue";
+
+describe("navigation", () => {
+    test("if the back button is clicked, navigate back", async () => {
+        // Arrange
+        
+        const { wrapper } = setupMocks({
+        });
+
+        // Act
+        await wrapper.vm.backButtonAction();
+
+        // Assert
+        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+    });
+});
+
+
+function setupMocks() 
+{    
+    const wrapper = shallowMount(
+        serviceLocationModal,       
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+            },       
+        })
+    );
+    return { wrapper };
+}

src/router/router-constants/routing-table.js

@@ -440,6 +440,16 @@ const routingTable = function(store) {
         },
       ],
     },
+    {
+      issPageValue: issPageValues.SERVICE_LOCATION,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE,
+        },
+        
+      ],
+    },
 
   ];
 };

src/styles/common-error-styles.scss

@@ -160,13 +160,6 @@ html {
       font-weight: 500;
   }
   
-  .vehicle-damage,
-  .vehicle-lookup {
-      .form-test-error {
-          margin: 0;
-          padding: 0 .75rem;
-      }
-  }
 
   .form-test-invalid {
     &.btn.btn-primary {

src/styles/ux-variables.scss

@@ -68,6 +68,9 @@ $orange: #fd7e14;
 $teal: #20c997;
 $cyan: #0dcaf0;
 
+// Darker gray
+$darker-gray: #525656;
+
 // scss-docs-start colors-map
 $colors: (
     "blue": $blue,
@@ -83,6 +86,7 @@ $colors: (
     "white": $white,
     "gray": $gray,
     "gray-dark": $gray-500,
+    "darker-gray":$darker-gray,
 );
 
 // scss-docs-start theme-color-variables