changing to components

src/assets/scss/components/_SelectCar.scss

@@ -1,7 +1,7 @@
 .select-car {
     height: 100vh;
 
-    .select-car-form {
+    .select-car-form, .car_info, .radio_question {
         background: $white;
         height: 100%;
 

src/commonComponents/baseTemplate/baseTemplate.vue

@@ -16,12 +16,12 @@
               @click="backFunction ? backFunction() : null"
             >
               <div class="d-flex align-items-center justify-content-center">
-                <span class="text-center text-secondary fs-5 d-block">{{
+                <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-secondary fs-6 mt-2">{{
+              <span v-if="style" class="text-center text-dark fs-6 mt-2">{{
                 style
               }}</span>
             </div>

src/commonComponents/radioQuestion/radioQuestion.spec.js

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

src/commonComponents/radioQuestion/radioQuestion.vue

@@ -0,0 +1,28 @@
+<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>
+    </div>
+    <div class="list-view d-flex">
+        <div class="car_list">
+            <div v-for="answer in answers" :key="answer" class="mb-2">
+                <radio :text="answer" :value="answer" />
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import radio from "@/uxComponents/radio/radio";
+export default {
+  name: "radio-question",
+  props: {
+    questionText: String,
+    answers: Array
+  },
+  components: {
+    radio
+  }
+};
+</script>

src/layouts/componentTest/componentTest.vue

@@ -79,6 +79,16 @@
         <h6>h6 Heading</h6>
       </div>
     </div>
+    <div class="my-3">
+      <div class="select-car">
+        <div class="select-car-form">
+          <radioQuestion
+            questionText="What year is your vehicle?"
+            :answers="this.years"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -86,12 +96,19 @@
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
 import listButton from "@/uxComponents/listButton/listButton";
+import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     radioCard,
-    listButton
+    listButton,
+    radioQuestion
   },
+  data() {
+    return {
+      years: [2023, 2022, 2021, 2020],
+    };
+  }
 };
 </script>

src/layouts/selectYear/selectYear.vue

@@ -1,17 +1,22 @@
 <template>
-  <div>
-    <baseTemplate
-      currentCarInfo="Select a year to get started"
-      neededCarInfo="What year is your vehicle?"
-    >
-      <carAttributes :attritbutes="years" :selectAttribute="selectYear" />
-    </baseTemplate>
+  <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">
+        <Header
+          text="Select a year to get started"
+        />
+        <radioQuestion
+          questionText="What year is your vehicle?"
+          :answers="this.years"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
-import carAttributes from "@/commonComponents/carAttributes/carAttributes";
+import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
+import Header from "@/uxComponents/header/header";
 import { endpoints } from "@/constants/endpoints.js";
 import globalMethods from "@/global-methods";
 
@@ -40,8 +45,8 @@ export default {
     }
   },
   components: {
-    baseTemplate,
-    carAttributes,
+    radioQuestion,
+    Header,
   },
 };
 </script>

src/uxComponents/header/header.spec.js

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

src/uxComponents/header/header.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="current_car_info-text">
+        <div class="d-flex align-items-center justify-content-center">
+            <span class="text-center text-dark fs-5 d-block">{{ text }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "Header",
+  props: {
+    text: String
+  }
+};
+</script>

src/uxComponents/radio/radio.spec.js

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

src/uxComponents/radio/radio.vue

@@ -0,0 +1,39 @@
+<template>
+<div>
+    <input
+        type="radio"
+        :id="this.value"
+        :value="this.value"
+        class="position-absolute opacity-0"
+        v-on:click="showLoader()"
+    />
+    <label
+        :for="this.value"
+        class="btn list-button d-flex align-items-center"
+        v-bind:class="[this.isLoading ? 'button-loader' : '']"
+    >
+        <span>{{ text }}</span>
+    </label>
+</div>
+  
+</template>
+
+<script>
+export default {
+  name: "radio",
+  props: {
+    value: String,
+    text: String
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
+    },
+  },
+};
+</script>