Merge branch 'release/2022.06.09' into feature/CSR-638

src/common-components/loading-modal/loading-modal.vue

@@ -103,135 +103,134 @@ export default {
   }
 
   .text-container {
-  display: flex;
+    display: flex;
-  width: 350px;
+    width: 350px;
-  overflow: hidden;
+    overflow: hidden;
-  white-space: nowrap;
+    white-space: nowrap;
-  margin: 0 auto;
+    margin: 0 auto;
-  position: relative;
+    position: relative;
-  &:after {
+    &:after {
-    content: '';
+      content: '';
-    background: rgb(245,245,245);
+      background: rgb(245,245,245);
-    background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
+      background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
-    position: absolute;
+      position: absolute;
-    width: 100%;
+      width: 100%;
-    height: 100%;
+      height: 100%;
-    z-index: 2;
+      z-index: 2;
-    top: 0;
+      top: 0;
-    left: 0;
+      left: 0;
-    right: 0;
+      right: 0;
-    bottom: 0;
+      bottom: 0;
-  }
+    }
 
-  &.slide p {
+    &.slide p {
-    animation: slide-in 20s ease-in-out 1s forwards 1;
+      animation: slide-in 20s ease-in-out 1s forwards 1;
-  }
+    }
 
 
-  p {
+    p {
-    margin: 0 175px;
+      margin: 0 175px;
-    transform: translateX(-2346px);
+      transform: translateX(-2346px);
-  }
+    }
 
-  @keyframes slide-in {
+    @keyframes slide-in {
-    0% {
-      transform: translateX(-2346px)
-    }
-    11% {
-      transform: translateX(-2010px)
-    }
-    22% {
-      transform: translateX(-2010px)
-    }
-    33% {
-      transform: translateX(-1490px)
-    }
-    44% {
-      transform: translateX(-1490px)
-    }
-    55% {
-      transform: translateX(-985px)
-    }
-    66% {
-      transform: translateX(-985px)
-    }
-    77% {
-      transform: translateX(-490px)
-    }
-    88% {
-      transform: translateX(-490px)
-    }
-    100% {
-      transform: translateX(-40px)
-    }
-  }
-
-
-  .dot-1 {
-    animation: blinking-elipsis .75s linear infinite;
-    @keyframes blinking-elipsis {
       0% {
-        opacity: 1;
+        transform: translateX(-2346px)
       }
-      65% {
+      11% {
-        opacity: 1;
+        transform: translateX(-2010px)
-      }
-      66% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-  }
-
-  .dot-2 {
-    animation: blinking-elipsis-2 .75s linear infinite;
-    @keyframes blinking-elipsis-2 {
-      0% {
-        opacity: 0;
-      }
-      21% {
-        opacity: 0;
       }
       22% {
-        opacity: 1;
+        transform: translateX(-2010px)
       }
-      65% {
+      33% {
-        opacity: 1;
+        transform: translateX(-1490px)
-      }
-      66% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 0;
-      }
-    }
-  }
-
-  .dot-3 {
-    animation: blinking-elipsis-3 .75s linear infinite;
-    @keyframes blinking-elipsis-3 {
-      0% {
-        opacity: 0;
-      }
-      43% {
-        opacity: 0;
       }
       44% {
-        opacity: 1;
+        transform: translateX(-1490px)
       }
-      65% {
+      55% {
-        opacity: 1;
+        transform: translateX(-985px)
       }
       66% {
-        opacity: 0;
+        transform: translateX(-985px)
+      }
+      77% {
+        transform: translateX(-490px)
+      }
+      88% {
+        transform: translateX(-490px)
       }
       100% {
-        opacity: 0;
+        transform: translateX(-40px)
+      }
+    }
+
+    .dot-1 {
+      animation: blinking-elipsis .75s linear infinite;
+      @keyframes blinking-elipsis {
+        0% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
+
+    .dot-2 {
+      animation: blinking-elipsis-2 .75s linear infinite;
+      @keyframes blinking-elipsis-2 {
+        0% {
+          opacity: 0;
+        }
+        21% {
+          opacity: 0;
+        }
+        22% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+    }
+
+    .dot-3 {
+      animation: blinking-elipsis-3 .75s linear infinite;
+      @keyframes blinking-elipsis-3 {
+        0% {
+          opacity: 0;
+        }
+        43% {
+          opacity: 0;
+        }
+        44% {
+          opacity: 1;
+        }
+        65% {
+          opacity: 1;
+        }
+        66% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 0;
+        }
       }
     }
   }
 }
-}
 </style>

src/common-components/menu-button/menu-button.spec.js

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

src/common-components/menu-button/menu-button.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+    <div class="bar1"></div>
+    <div class="bar2"></div>
+    <div class="bar3"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'menuButton',
+  data() {
+    return {
+      isActive: false,
+    };
+  },
+  methods: {
+    toggleClass: function(event){
+      this.isActive = !this.isActive;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.menu-button {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .bar1,
+  .bar2,
+  .bar3 {
+    width: 14px;
+    height: 2px;
+    background-color: $blue-400;
+    margin: 1px 0;
+    transition: 0.25s;
+  }
+  &.active .bar1 {
+    transform: rotate(-45deg) translate(-3px, 3px);
+  }
+  &.active .bar2 {opacity: 0;}
+  &.active .bar3 {
+    transform: rotate(45deg) translate(-3px, -3px);
+  }
+}
+</style>

src/layouts/component-test/component-test.vue

@@ -1,5 +1,15 @@
   <template>
     <div class="container-fluid container-shadow p-2 rounded-3">
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Hamburger Menu Button</h4>
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <menuButton/>
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
@@ -1064,81 +1074,6 @@
       <h6>h6 Heading</h6>
     </div>
   </div>
-  <div class="row my-4">
-    <div class="col">
-      <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="Dismissible Alert"
-      alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
-      v-bind:isDismissible="true"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-danger"
-      alertHeadline="NON-Dismissible Alert"
-      alertCopy="This is an example of a NON-DISMISSIBLE alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-warning"
-      alertHeadline="Warning Alert"
-      alertCopy="This is an example of a WARNING alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-info"
-      alertHeadline="Info Alert"
-      alertCopy="This is an example of a INFO alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-danger"
-      alertHeadline="Danger Alert"
-      alertCopy="This is an example of a DANGER alert."
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="No Body Copy Alert"
-      alertCopy=""
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
-  <div class="row my-2">
-    <div class="col">
-      <alert
-      alertClass="alert-success"
-      alertHeadline="Multi-Paragraph Alert"
-      :alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
-      v-bind:isDismissible="false"
-      />
-    </div>
-  </div>
   </div>
   </template>
 
@@ -1147,7 +1082,6 @@
   import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
   import listCard from "@/ux-components/list-card/list-card";
   import listButton from "@/ux-components/list-button/list-button";
-  import alert from "@/ux-components/alert/alert";
   import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
   import checkbox from "@/ux-components/checkbox/checkbox";
   import radio from "@/ux-components/radio/radio";
@@ -1155,6 +1089,7 @@
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
+  import menuButton from "@/common-components/menu-button/menu-button";
   export default {
     name: "App",
     components: {
@@ -1162,7 +1097,6 @@
       buttonBack,
       listCard,
       listButton,
-      alert,
       listButtonHorizontal,
       checkbox,
       radio,
@@ -1170,6 +1104,7 @@
       textboxQuestion,
       dropdownQuestion,
       vinInformation,
+      menuButton,
     },
     data() {
       return {

src/router/index.js

@@ -21,7 +21,6 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 // Components
 import ComponentTest from "@/layouts/component-test/component-test.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
-import Modal from "@/common-components/loading-modal/loading-modal.vue";
 
 
 const routes = [
@@ -35,11 +34,6 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
-  {
-    path: "/loading-modal", // This is a temporary route for testing.
-    name: "Modal",
-    component: Modal,
-  },
   {
     path: "/",
     name: "root",