Merge branch 'develop' into feature/CSR-347

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

@@ -11,8 +11,33 @@
         </div>
         <div class="row">
           <div class="col">
-            <p class="mb-0 text-center">We're processing your information.</p>
+            <div class="text-container slide">
-            <p class="mb-0 text-center">This could take up to 30 seconds...</p>
+              <p>Finishing up
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Nearly there
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Generating your quote
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Finding your glass
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+              <p>Assessing your damage
+                <span class="dot-1">.</span>
+                <span class="dot-2">.</span>
+                <span class="dot-3">.</span>
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -59,10 +84,6 @@ export default {
   overflow-y: auto;
   outline: 0;
   background: $gray-100;
-  p {
-    font-family: Roboto;
-    font-size: 1.125rem;
-  }
 
   .tagbg {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
@@ -80,5 +101,136 @@ export default {
     border: 0.45em solid currentColor;
     border-right-color: transparent;
   }
+
+  .text-container {
+    display: flex;
+    width: 350px;
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0 auto;
+    position: relative;
+    &:after {
+      content: '';
+      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%);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    &.slide p {
+      animation: slide-in 20s ease-in-out 1s forwards 1;
+    }
+
+
+    p {
+      margin: 0 175px;
+      transform: translateX(-2346px);
+    }
+
+    @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;
+        }
+        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",