CSR-119 Push Loader component and updated radio-list and list-button.

src/layouts/component-test/component-test.vue

@@ -28,19 +28,6 @@
       radioID="backglass"
       />
     </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <loader
-          sizeInRem="2"
-          loaderColor="blue"
-        />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -70,6 +57,9 @@
         <listButton
         buttonText="List Button"
         errorText="Test error message"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1.5"
         />
       </div>
     </div>
@@ -87,9 +77,9 @@
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        loaderColor="blue"
+        loaderColor="red"
         loaderPosition="right"
-        sizeInRem="1"
+        sizeInRem="1.5"
         />
         <radioList
         groupName="demo"
@@ -97,7 +87,7 @@
         radioID="2020"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
+        sizeInRem="1.5"
         />
         <radioList
         groupName="demo"
@@ -105,7 +95,7 @@
         radioID="2019"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
+        sizeInRem="1.5"
         />
       </div>
     </div>
@@ -241,7 +231,6 @@
   import listButton from "@/ux-components/list-button/list-button";
   import radioList from "@/ux-components/radio-list/radio-list";
   import alert from "@/ux-components/alert/alert";
-  import loader from "@/ux-components/loader/loader";
   export default {
     name: "App",
     components: {
@@ -250,8 +239,7 @@
       radioCard,
       listButton,
       radioList,
-      alert,
-      loader
+      alert
     },
     data() {
       return {

src/layouts/loader-demo/loader-demo.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container-fluid container-shadow p-2 rounded-3">
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <loader
+        sizeInRem="10"
+        loaderColor="blue"
+        loaderPosition="center"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+export default {
+  name: "App",
+  components: {
+    loader
+  }
+};
+</script>

src/router/index.js

@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
+import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -16,6 +17,11 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
+  {
+    path: "/loader-demo", // This is a temporary route for testing.
+    name: "LoaderDemo",
+    component: LoaderDemo,
+  },
   {
     path: "/",
     beforeEnter(to, from, next) {

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

@@ -1,36 +1,48 @@
 <template>
   <div class="d-flex flex-column w-100">
     <button
-      class="btn list-button d-flex align-items-center"
-      v-on:click="showLoader()"
-      v-bind:class="[
-        this.isLoading ? 'button-loader' : 'not-loading',
-        this.isError ? 'error' : '',
-      ]"
+    class="btn list-button d-flex align-items-center justify-content-between"
+    @click='displayComponent'
+    v-bind:class="[
+    this.isLoading ? 'button-loader' : 'not-loading',
+    this.isError ? 'error' : '',
+    ]"
     >
-      {{ this.buttonText }}
-    </button>
-    <label class="small mt-1">{{ this.errorText }}</label>
-  </div>
+    {{ this.buttonText }}
+    <loader
+    v-if="display"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
+    />
+  </button>
+  <label class="small mt-1">{{ this.errorText }}</label>
+</div>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
     buttonText: String,
     errorText: String,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: Number
   },
   data() {
     return {
-      isLoading: false,
-      isError: false,
+      display: false,
+      isError: false
     };
   },
   methods: {
-    showLoader() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>

src/ux-components/loader/loader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="loader"
-    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
-    v-bind:class="[this.loaderColor, this.loaderPosition]"
+  v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+  v-bind:class="[this.loaderColor, this.loaderPosition]"
   ></div>
 </template>
 
@@ -27,5 +27,5 @@ export default {
 </script>
 
 <style lang="scss">
-  @include loader();
+@include loader();
 </style>

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

@@ -1,15 +1,22 @@
 <template>
   <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
-    <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
+    <input type="radio"
+    v-bind:id="radioID"
+    v-bind:name="groupName"
+    v-bind:value="radioID">
+    <label role="radio" tabindex="0" aria-checked="false"
+    v-bind:for="radioID"
+    class="mb-2 d-flex align-items-center justify-content-between p-2"
+    @click='displayComponent'
     >{{radioID}}
     <loader
-      v-bind:class="[this.loaderColor, this.loaderPosition]"
-      v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-if="display"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </label>
-    <p class="small">{{errorMessage}}</p>
-  </div>
+  <p class="small">{{errorMessage}}</p>
+</div>
 </template>
 
 <script>
@@ -28,13 +35,13 @@ export default {
   ],
   data() {
     return {
-      isLoading: false,
-      isError: false
+      isError: false,
+      display: false
     };
   },
   methods: {
-    showLoader() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
   components: {