Add back button component.

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,

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.

src/ux-components/button-back/button-back.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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>