refactor css

src/commonComponents/baseTemplate/baseTemplate.spec.js

@@ -1,6 +0,0 @@
-
-describe("baseTemplate.vue", () => {
-  it("Is a test", () => {
-    expect(true).toBe(true);
-  });
-});

src/commonComponents/baseTemplate/baseTemplate.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="select-car sticky-lg-top py-4">
-    <div class="select-car-form overflow-hidden p-3 rounded">
-      <div class="car_info text-center">
-        <div class="car-image mb-3">
-          <img
-            class="vehicle-image img-fluid"
-            :class="{ blur: blurImg }"
-            :src="carImg"
-          />
-        </div>
-        <div class="current_car_info">
-          <transition appear name="fade">
-            <div
-              class="current_car_info-text"
-              @click="backFunction ? backFunction() : null"
-            >
-              <div class="d-flex align-items-center justify-content-center">
-                <span class="text-center text-dark fs-5 d-block">{{
-                this.currentCarInfo
-              }}</span>
-              <span v-if="backFunction" class="back-button"><img src="@/assets/img/icons/back-forward.svg" alt="back-button"></span>
-              </div>
-              <span v-if="style" class="text-center text-dark fs-6 mt-2">{{
-                style
-              }}</span>
-            </div>
-          </transition>
-        </div>
-        <transition appear :name="slideTransition">
-          <div class="needed_car_info d-flex overflow-hidden mt-4 mb-3">
-            <span class="text-center fs-6 fw-bold needed_car_info-text">{{
-              this.neededCarInfo
-            }}</span>
-          </div>
-        </transition>
-      </div>
-      <transition appear :name="slideTransition">
-        <slot></slot>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "BaseTemplate",
-  computed: {
-    ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
-  },
-  props: {
-    currentCarInfo: String,
-    neededCarInfo: String,
-    backFunction: Function,
-  },
-};
-</script>

src/commonComponents/carAttributes/carAttributes.spec.js

@@ -1 +0,0 @@
-test.todo('some test to be written in the future');

src/commonComponents/carAttributes/carAttributes.vue

@@ -1,24 +0,0 @@
-<template>
-    <div class="list-view d-flex">
-        <div class="car_list">
-            <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
-                <listButton :buttonText="attritbute" @click="selectAttribute(attritbute)" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import listButton from "@/uxComponents/listButton/listButton";
-
-export default {
-    name: "CarAttributes",
-    props: {
-        attritbutes: Array,
-        selectAttribute: Function,
-    },
-    components: {
-        listButton,
-    },
-};
-</script>

src/commonComponents/radioQuestion/radioQuestion.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="radio_question">
     <div class="needed_car_info d-flex mt-4 mb-3">
-      <span class="text-center fs-6 fw-bold needed_car_info-text">{{ questionText }}</span>
+      <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{ questionText }}</span>
     </div>
-      <div class="car_list">
+      <div class="car_list overflow-scroll position-absolute">
           <div v-for="answer in answers" :key="answer" class="mb-2">
               <radio :text="answer" :value="answer" @click="chooseAnswer(answer)" />
           </div>

src/global-methods.js

@@ -29,9 +29,4 @@ export default {
       );
     });
   },
-  disableItems(arr) {
-    arr.forEach( (i) => {
-      i.disabled = true
-      })
-  },
 };

src/layouts/selectDamage/selectDamage.spec.js

@@ -1 +0,0 @@
-test.todo('some test to be written in the future');

src/layouts/selectDamage/selectDamage.vue

@@ -1,120 +0,0 @@
-<template>
-  <div>
-    <baseTemplate
-      :currentCarInfo="year + ' ' + make + ' ' + model"
-      neededCarInfo="What is your damage?"
-    >
-      <div class="damage-section text-center">
-        <div class="choose-damage row">
-          <radioCard
-            radioLabel="Windshield"
-            radioImage="windshield-damage.svg"
-            altText="Windshield"
-            groupName="damageKey"
-            radioID="windshield"
-            name="damage"
-            @click="chooseDamage('windshield')"
-          />
-          <radioCard
-            radioLabel="Side Window"
-            radioImage="side-window-damage.svg"
-            altText="Side Window"
-            groupName="damageKey"
-            radioID="sidewindow"
-            name="damage"
-            @click="chooseDamage('side-window')"
-          />
-          <radioCard
-            radioLabel="Back Glass"
-            radioImage="back-glass-damage.svg"
-            altText="Back Glass"
-            groupName="damageKey"
-            radioID="backglass"
-            name="damage"
-            @click="chooseDamage('side-glass')"
-          />
-        </div>
-        <transition name="fade">
-          <div v-if="damage" class="how-bad mt-3">
-            <span class="text-center fs-6 fw-bold">How bad is it?</span>
-            <div class="choose-how-bad row mt-2">
-              <radioCard
-                radioLabel="Crack"
-                radioImage="windshield-damage.svg"
-                altText="Crack"
-                groupName="severityKey"
-                radioID="Crack"
-                name="severity"
-                @click="chooseSeverity(Crack)"
-              />
-              <radioCard
-                radioLabel="Chip(s)"
-                radioImage="side-window-damage.svg"
-                altText="Chips"
-                groupName="severityKey"
-                radioID="Chips"
-                name="severity"
-                @click="chooseSeverity(Chips)"
-              />
-            </div>
-          </div>
-        </transition>
-        <transition appear name="fade">
-          <div class="next-action d-flex align-items-center justify-content-around fixed-bottom py-3 border border-top-1 border-top-light">
-            <div v-on:click="goBack" class="change">
-              <span class="fw-bold text-decoration-underline">Change Vehicle</span>
-            </div>
-            <div>
-              <buttonPrimary
-                buttonText="Get your estimate"
-                :isDisabled="this.isDisabled"
-              />
-            </div>
-          </div>
-        </transition>
-      </div>
-    </baseTemplate>
-  </div>
-</template>
-
-<script>
-import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
-import radioCard from "@/uxComponents/radioCard/radioCard";
-import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
-import { mapState } from "vuex";
-
-export default {
-  name: "SelectCar",
-  computed: {
-    ...mapState(["year", "make", "model"]),
-  },
-  data() {
-    return {
-      damage: "",
-      severity: "",
-      isDisabled: true
-    };
-  },
-  methods: {
-    chooseDamage(damage) {
-      this.damage = damage;
-    },
-    chooseSeverity(severity){
-      this.severity = severity;
-      this.isDisabled = false;
-    },
-    goBack() {
-      this.$store.state.slideTransition = "slide_reverse";
-      this.$store.commit("removeStyle");
-      this.$router.push(
-        `/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`
-      );
-    },
-  },
-  components: {
-    baseTemplate,
-    radioCard,
-    buttonPrimary,
-  },
-};
-</script>

src/layouts/selectYear/selectYear.vue

@@ -37,16 +37,13 @@ export default {
     ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
   },
   mounted() {
-    const headerHeight = document.querySelector('.select-car-form').offsetHeight + 75;
-    document.querySelector('.car_list').style.padding = `0 0 ${headerHeight}px 0`;
-
     globalMethods.callHttpClient({
           method: endpoints.GetYears.method,
           endpoint: endpoints.GetYears.url,
           payload:{}
         })
         .then( (response) => {
-          this.years = response.data.Result;
+          this.years = response.data;
         });
 
     axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => {

src/router/index.js

@@ -8,7 +8,6 @@ import selectYear from "@/layouts/selectYear/selectYear.vue";
 import selectMake from "@/layouts/selectMake/selectMake.vue";
 import selectModel from "@/layouts/selectModel/selectModel.vue";
 import selectStyle from "@/layouts/selectStyle/selectStyle.vue";
-import selectDamage from "@/layouts/selectDamage/selectDamage.vue";
 
 const routes = [
   {
@@ -86,11 +85,6 @@ const routes = [
     name: "selectStyle",
     component: selectStyle,
   },
-  {
-    path: "/select-damage",
-    name: "selectDamage",
-    component: selectDamage,
-  },
 ];
 
 const router = createRouter({

src/store/index.js

@@ -2,7 +2,6 @@ import { createStore } from "vuex";
 import { endpoints } from "@/constants/endpoints.js";
 import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
-import router from "@/router";
 
 export default createStore({
   plugins: [
@@ -26,17 +25,17 @@ export default createStore({
   mutations: {
     updateYear(state, data) {
       state.year = data.year;
-      state.makes = data.makes.data.Result;
+      state.makes = data.makes.data;
       state.slideTransition = "slide";
     },
     updateMake(state, data) {
       state.make = data.make;
-      state.models = data.models.data.Result;
+      state.models = data.models.data;
       state.slideTransition = "slide";
     },
     updateModel(state, data) {
       state.model = data.model;
-      state.styles = data.styles.data.Result;
+      state.styles = data.styles.data;
       state.slideTransition = "slide";
     },
     updateStyle(state, data) {

src/styles/commonComponentStyles/ymmsCommonStyles.scss

@@ -1,39 +1,14 @@
-// SelectCar styles
 .select-car {
     height: calc(100vh - 1rem);
 
     .car_list {
-      position: absolute;
+      // Height will be determined by overall height of content above list
-      height: 100%;
+      height: calc(100% - 100px);
       width: calc(100% - 1rem);
-      overflow-y: scroll;
-      overflow-x: hidden;
-    }
-  
-    .current_car_info-text, .needed_car_info-text {
-        flex-shrink: 0;
-        width: 100%;
-        position: relative;
-        transition: transform .3s;
-    }
-  
-    .current_car_info {
-        position: relative;
-        min-height: 2.5rem;
-  
-        .current_car_info-text {
-            position: absolute;
-        }
-    }
-  
-    .back-button {
-        margin-left: 5px;
-        img {
-            width: 20px;
-        }
     }
 }
   
+// Animations
 .slide-enter-from {
   opacity: 0;
   transform: translateX(30vw);