From e4b67979e127417db1c9efceae14d762049e0e4e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 08:38:13 -0500
Subject: [PATCH] Add back button component.

---
 src/layouts/component-test/component-test.vue | 12 +++-
 src/styles/ux-variables.scss                  |  1 +
 .../button-back/button-back.spec.js           |  1 +
 src/ux-components/button-back/button-back.vue | 59 +++++++++++++++++++
 4 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/ux-components/button-back/button-back.spec.js
 create mode 100644 src/ux-components/button-back/button-back.vue

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f8d5006ef..4a5d91bd2 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -35,7 +35,10 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary buttonText="Primary" loaderColor="white" sizeInRem="1" />
+        <buttonPrimary
+        buttonText="Primary"
+        loaderColor="white"
+        sizeInRem="1" />
       </div>
     </div>
     <div class="row">
@@ -47,6 +50,11 @@
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonBack/>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
@@ -429,6 +437,7 @@
 <script>
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+import buttonBack from "@/ux-components/button-back/button-back";
 import radioCard from "@/ux-components/radio-card/radio-card";
 import listButton from "@/ux-components/list-button/list-button";
 import radio from "@/ux-components/radio/radio";
@@ -441,6 +450,7 @@ export default {
   components: {
     buttonPrimary,
     buttonSecondary,
+    buttonBack,
     radioCard,
     listButton,
     radio,
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index a9857c420..285b0c037 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -131,6 +131,7 @@ $h5-font-size:                $font-size-base * 1.25;
 $h6-font-size:                $font-size-base * .875;
 
 //Border Radius
+// Helper classes are rounded, rounded-1, rounded-2, rounded-3
 $border-radius:               .25rem;
 $border-radius-sm:            .2rem;
 $border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
new file mode 100644
index 000000000..90301c42a
--- /dev/null
+++ b/src/ux-components/button-back/button-back.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="button-back">
+    <div class="arrow-left"></div>
+    <div class="box"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "buttonBack"
+};
+</script>
+
+<style lang="scss">
+.button-back {
+  display: inline-flex;
+  position: relative;
+  height: 18px;
+  width: 23px;
+  overflow: hidden;
+  .arrow-left {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 4px;
+    background-color: $gray-550;
+    transform: rotate(45deg);
+    border-radius: 4px;
+  }
+  .box {
+    content: "";
+    position: absolute;
+    background: $gray-550;
+    height: 100%;
+    width: 11px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 12px;
+    border-radius: 5px;
+    &:before, &:after {
+      position: absolute;
+      left: 1px;
+      top: 3px;
+      content: " ";
+      height: 12px;
+      width: 2px;
+      background-color: $white;
+      border-radius: 2px;
+    }
+    &:before {
+      transform: rotate(45deg);
+    }
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+}
+</style>