CSR-266 create button-main component.

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

@@ -22,7 +22,8 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
+        <buttonMain
+        isPrimary
         buttonText="Primary"
         loaderColor="white"
         sizeInRem="1" />
@@ -887,7 +888,7 @@
 </template>
 
 <script>
-import buttonPrimary from "@/ux-components/button-primary/button-primary";
+import buttonMain from "@/ux-components/button-main/button-main";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
 import buttonBack from "@/common-components/button-back/button-back";
 import listCard from "@/ux-components/list-card/list-card";
@@ -902,7 +903,7 @@ import textLink from "@/ux-components/text-link/text-link";
 export default {
   name: "App",
   components: {
-    buttonPrimary,
+    buttonMain,
     buttonSecondary,
     buttonBack,
     listCard,

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

@@ -1,14 +1,14 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="isPrimary ? 'btn-primary' : 'btn-secondary'" @click="displayComponent">
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="isPrimary ? 'btn-primary' : 'btn-secondary'" @click="clicked()">
     <span class="m-0">{{ this.buttonText }}</span>
-    <loader class="ms-2" v-if="display" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" />
+    <loader class="ms-2" v-if="isLoaderDisplayed" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" />
   </button>
 </template>
 
 <script>
 import loader from "@/ux-components/loader/loader";
 export default {
-  name: "buttonPrimary",
+  name: "buttonMain",
   props: {
     isPrimary: Boolean,
     buttonText: String,
@@ -19,13 +19,14 @@ export default {
   },
   data() {
     return {
-      display: false,
+      isLoaderDisplayed: false,
     };
   },
   methods: {
-    displayComponent() {
-      this.display = true;
-    },
+    clicked() {
+      this.isLoaderDisplayed = true;
+      this.$emit('click-event');
+    }
   },
   components: {
     loader,