CSR-266 WIP

src/ux-components/button/button.vue

@@ -0,0 +1,93 @@
+<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">
+    <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]" />
+  </button>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+export default {
+  name: "buttonPrimary",
+  props: {
+    isPrimary: Boolean,
+    buttonText: String,
+    isDisabled: Boolean,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: [Number, String],
+  },
+  data() {
+    return {
+      display: false,
+    };
+  },
+  methods: {
+    displayComponent() {
+      this.display = true;
+    },
+  },
+  components: {
+    loader,
+  },
+};
+</script>
+
+<style lang="scss">
+.btn {
+  &.btn-primary {
+    position: relative;
+    background: $blue-700;
+    @include blue-gradient;
+    border: none;
+    border-radius: $border-radius-lg;
+    color: $white;
+    transition: all 150ms linear;
+    &:hover {
+      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+    }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+      color: $white;
+      @include blue-gradient;
+    }
+    &:disabled {
+      background: $gray-100 !important;
+      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
+      color: $gray !important;
+      height: 48px;
+      border: none;
+      border-radius: $border-radius-lg;
+    }
+  }
+  &.btn-secondary {
+    position: relative;
+    background: transparent;
+    border: 1px solid $blue;
+    border-radius: $border-radius-lg;
+    color: $blue;
+    transition: all 150ms linear;
+    &:hover {
+      color: $white;
+      @include blue-gradient;
+    }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+      color: $white;
+      @include blue-gradient;
+    }
+    &:disabled {
+      background: transparent;
+      color: $gray !important;
+      height: 48px;
+      border: 1px solid $gray-300;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+</style>