Merge branch 'develop' into feature/CSR-188

src/App.vue

@@ -3,9 +3,8 @@
 </template>
 
 <style lang="scss">
-@import "./node_modules/bootstrap/scss/bootstrap";
+  @import "./node_modules/bootstrap/scss/bootstrap";
-@import "@/styles/common-styles.scss";
+  @import "@/styles/common-styles.scss";
-@import "@/styles/common-list-styles.scss";
+  @import "@/styles/common-typography-styles.scss";
-@import "@/styles/common-typography-styles.scss";
+  @import "@/styles/common-error-styles.scss";
-@import "@/styles/error-styles.scss";
 </style>

src/layouts/vehicle-year/year-question/year-question.vue

@@ -8,6 +8,7 @@
     textPosition="text-start"
     :loaderEnabled="true"
     v-model="modelValue"
+    isRequired=true
   />
 </template>
 

src/router/index.js

@@ -35,6 +35,7 @@ const routes = [
   },
   {
     path: "/",
+    name: "root",
     async beforeEnter(to, from, next) {
       // If we have no query string, or we don't have the FmgPage query string.
       if (to.query.fmgPage === undefined) {
@@ -53,7 +54,7 @@ const routes = [
               await GoToFunnelStartOn404(next);
             }
 
-            return next({ name: to.query.fmgPage, query: to.query });
+            return next({ name: to.query.fmgPage, query: to.query, params: to.params });
           }
 
           // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
@@ -81,6 +82,7 @@ const routes = [
           next({
             name: routeData[0].name,
             query: Object.assign(to.query, { fmgPage: routeData[0].name }),
+            params: to.params
           });
         } catch (error) {
           console.log(error);
@@ -118,7 +120,7 @@ router.navigate = (
   if (matchingScenarioMap.destinationFmgPageValue !== undefined) {
     // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
     router.push({
-      path: "/",
+      name: "root",
       query: Object.assign(optionalQuery, {
         fmgPage: matchingScenarioMap.destinationFmgPageValue,
       }),

src/styles/common-list-styles.scss

@@ -1,44 +0,0 @@
-.list-group {
-  &.list-button {
-    input[type="radio"],
-    input[type="checkbox"] {
-      opacity: 0;
-      position: fixed;
-      width: 0;
-      &:focus-visible + label {
-        box-shadow: 0 0 0 2.5px $blue inset;
-      }
-      &:focus + label {
-        box-shadow: 0 0 0 2.5px $blue inset;
-      }
-      &:checked + label {
-        color: $black;
-        font-weight: 500;
-        background: $blue-100;
-        box-shadow: 0 0 0 1px $blue;
-      }
-      &:checked + label p:first-child {
-        font-weight: 500;
-      }
-    }
-    label {
-      color: $gray-600;
-      position: relative;
-      background: $white;
-      transition: all 150ms linear;
-      border-radius: $border-radius-lg;
-      border: 1px solid $gray-500;
-      width: 100%;
-
-      &:hover {
-        @include media-breakpoint-up(sm) {
-          box-shadow: 0 0 0 4px $blue-100;
-        }
-        cursor: pointer;
-      }
-      + p {
-        display: none;
-      }
-    }
-  }
-}

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

@@ -106,6 +106,40 @@ export default {
       position: static; //override bootstrap
       height: 0;
     }
+    &:focus-visible + label {
+      box-shadow: 0 0 0 2.5px $blue inset;
+    }
+    &:focus + label {
+      box-shadow: 0 0 0 2.5px $blue inset;
+    }
+    &:checked + label {
+      color: $black;
+      font-weight: 500;
+      background: $blue-100;
+      box-shadow: 0 0 0 1px $blue;
+    }
+    &:checked + label p:first-child {
+      font-weight: 500;
+    }
+  }
+  label {
+    color: $gray-600;
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid $gray-500;
+    width: 100%;
+
+    &:hover {
+      @include media-breakpoint-up(sm) {
+        box-shadow: 0 0 0 4px $blue-100;
+      }
+      cursor: pointer;
+    }
+    + p {
+      display: none;
+    }
   }
 }
 </style>