From 5f3f6c717525fd294024644d1d487368968c6259 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 25 Jan 2022 17:08:28 -0500
Subject: [PATCH] CSR-266 WIP

---
 src/ux-components/button/button.spec.js |  0
 src/ux-components/button/button.vue     | 93 +++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/ux-components/button/button.spec.js
 create mode 100644 src/ux-components/button/button.vue

diff --git a/src/ux-components/button/button.spec.js b/src/ux-components/button/button.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ux-components/button/button.vue b/src/ux-components/button/button.vue
new file mode 100644
index 000000000..15e2bb98f
--- /dev/null
+++ b/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>