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 1/3] 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>

From e5ff6206c4720025b867325856bbe5e805382c64 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 09:07:55 -0500
Subject: [PATCH 2/3] Add button wrapper for back button.

---
 src/ux-components/button-back/button-back.vue | 88 ++++++++++---------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 90301c42a..94364f6a6 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="button-back">
-    <div class="arrow-left"></div>
-    <div class="box"></div>
-  </div>
+  <button class="back-button-wrapper d-flex p-0">
+    <div class="button-back">
+      <div class="arrow-left"></div>
+      <div class="box"></div>
+    </div>
+</button>
 </template>
 
 <script>
@@ -12,47 +14,51 @@ export default {
 </script>
 
 <style lang="scss">
-.button-back {
-  display: inline-flex;
-  position: relative;
-  height: 18px;
-  width: 23px;
-  overflow: hidden;
-  .arrow-left {
-    position: absolute;
-    width: 18px;
+.back-button-wrapper {
+  border: none;
+  background: transparent;
+  .button-back {
+    display: inline-flex;
+    position: relative;
     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 {
+    width: 23px;
+    overflow: hidden;
+    .arrow-left {
       position: absolute;
-      left: 1px;
-      top: 3px;
-      content: " ";
-      height: 12px;
-      width: 2px;
-      background-color: $white;
-      border-radius: 2px;
-    }
-    &:before {
+      width: 18px;
+      height: 18px;
+      left: 4px;
+      background-color: $gray-550;
       transform: rotate(45deg);
+      border-radius: 4px;
     }
-    &:after {
-      transform: rotate(-45deg);
+    .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);
+      }
     }
   }
 }

From c2d2224015792b379910ff356717e84d6a87f77f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 09:08:54 -0500
Subject: [PATCH 3/3] Fix indentation.

---
 src/ux-components/button-back/button-back.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 94364f6a6..aa462accc 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -4,7 +4,7 @@
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-</button>
+  </button>
 </template>
 
 <script>